آموزش

آموزش css

آموزش css 757 683 نویسنده

از آموزش css چه می دانید؟

در مقالات قبلی در مورد پیکره بندی و استفاده از html برای شما گفته بودیم. در این مقاله نیز می‌ خواهیم بدانیم پس از این که یک صفحه ی وب را پیکره بندی نمودیم، باید دیگر چه کنیم؟ در حقیقت در این مقاله می‌ خواهیم به آموزش css بپردازیم. آموزش css زیادی در سطح وب وجود دارد. اما ما در این مقاله سعی داریم به زبان کاملاً ساده آن را بیان نماییم.  قبل از هر چیزی بیاید ببینیم که خود سی اس اس چیست؟ به طور کلی  همان وسیله‌ ای است که پس از استفاده از html می توانیم اسناد را با استفاده از این وسیله به زبان بهتر نشان بدهیم. چنان که خود تان هم می دانید.

تنها به کمک اچ‌ تی‌ ام‌ ال قادر نخواهیم بود یک صفحه را بیش از پیکره بندی کار دیگری با آن بکنیم. رابطه html و css مانند رابطه ی سازه ی فلزی یک ساختمان با پوشش روی آن است.  در این مثال html را اسکلت فلزی می نامیم. و سی اس اس را یک نوع پوشش زیبا کننده برای آن در نظر می گیریم.

تست

تست

<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-color: lightblue;

}




h1 {

    color: yellow;

    text-align: center;

}




p {

    font-family: verdana;

    font-size: 20px;

}

</style>

</head>

<body>




<h1>اولین امتحان من</h1>

<p>به وب سایت http://oap-it.comخوش آمدید</p>




</body>

</html>

آموزش css و مخفف آن

شاید ندانید. اما سی اس اس مخفف سه کلمه ی Cascading Style Sheets می باشد. در حقیقت ما آن را یک نوع زبان برنامه‌ نویسی مجزا می دانیم. چون تا آن زمان html به تنهایی جوابگوی تمامی نیاز های یک صفحه ی وب نبود. بنابر این کنسرسیوم بین المللی شبکه ی جهانی وب یا w3c برای اینکه بتواند چنین مشکلاتی را از میان بردارد. این زبان برنامه نویسی جدید را که نامش سی اس اس بود پیشنهاد داد. در آن زمان css آمده بود که تمام نا توانایی های html را برطرف کند. و الحق والانصاف که چه قدر خوب توانسته بود که این کار را انجام بدهد. بنابر این روز به روز مردم استقبال بیشتری از آن کردند و بیشتر از آن استفاده می کردند.

تا خود کنسرسیوم و افرادی که مربوط به پروژه ی توسعه آن بودند مجبور شدند هر روز آن را بیشتر و بیشتر توسعه بدهند. در حقیقت هر جا خلائی را در html احساس کردید، می توانید آن را با css پر کنید. از طرفی به کمک سی اس اس می توانیم خودمان تعیین کنیم که تک تک تگ های درون پیکره ی وب یا همان html چگونه نمایش داده شوند؟ تا برای مخاطب خوشایند تر باشد. به عنوان مثال می‌ توان از رنگ و اندازه فونت و حتی نوع فونت نام برد. با کمک اچ تی‌ ام‌ ال ما تنها می توانستیم تعیین کنیم که چه چیزی بنویسیم؟ و یا پاراگراف بندی کنیم.

اما با کمک css حتی می‌ توانیم نوع دست خط ها و فونت ها و اندازه و رنگ های پس زمینه و یا خود نوشته را هم تعیین کنیم. که این کار بدون سی اس اس و تنها با html هیچ گاه امکان پذیر نیست.

حل کردن مشکلات بزرگی که فکرش را هم نمی کردید

 همان طور که در قسمت‌ های گذشته اشاره نمودیم html از همان اول هم برای استایل دادن و شکل‌ دهی به یک صفحه ی وب طراحی نشده بود. بنابر این باید زبان دیگری برای این کار طراحی می‌ شد. تا مکمل خود html باشد. ما در بهترین حالت می توانستیم با html بزرگی و اندازه ی نوشته ها و محتوا ها را آن هم تا حدی تعیین بکنیم. مثلاً با تگ عنوان می‌ توانستیم بزرگی آن را از ۱ تا ۶ تعیین کنیم. اما دیگر این امکان برای ما وجود نداشت که بتوانیم رنگ چیزی را هم تغییر بدهیم. و یا در دخل و تصرفی در نوع فونت آن بکنیم. نا گفته نماند که پس از مدتی که از نگارش اولین نسخه های html می‌ گذشت.

تگ هایی به نام فونت به آن اضافه گشت. که می‌ توانستیم فونت ها را با آن تغییر بدهیم. اما کم‌ کم همین موضوع تبدیل به یک مشکل شد. دلیلش چه بود؟ اگر می خواستید یک وب سایت تک صفحه ای درست کنید مشکلی در کار نبود. اما اگر می خواستید یک وب سایت بزرگی را راه اندازی بکنید که تعداد صفحات زیادی هم داشته باشد. حالا دیگر باید دست به دامن روش دیگری می شدید. تا بتوانید یک استایل کلی برای تمامی صفحات آن قرار بدهید. بنابر این از یک برهه‌ ای به بعد css وارد ماجرا شد. و کار را برای برنامه نویسان و توسعه دهندگان آسان و سهل نمود.

 قسمت جالب ماجرا این است که وقتی از سی اس اس کمک می گیرید. مقدار کد نویسی که لازم است انجام بدهید نیز کاهش می یابد. برای این که بعضی از کد ها از قبل آماده شده می باشند. و به اصطلاح کتابخانه برای این زبان وجود دارد. در صورتی که در مورد اچ تی ام ال هیچ کتابخانه ای وجود نداشت. و باید همه چیز را به صورت دستی وارد می کردید.

به نظر شما منظور از استایل چیست؟

 در این قسمت می خواهیم به این موضوع بپردازیم که خود استایل چه معنایی دارد؟ و چرا باید از آن استفاده نمود؟ به صورت کلی استایل به این معناست که با استفاده از زبان css بتوانیم یک قسمتی از صفحه را به صورت خاصی که می خواهیم بچینیم و چیدمان کنیم. استایل در آموزش css یک قسمت مهم به شمار می آید. زیرا اگر استایل دهی را ندانید. نمی‌ توانید به خوبی صفحه‌ ای کار آمد طراحی کنید. مثلاً می توانید تعیین کنید که یک تصویر و یا یک عکس در درون یک صفحه ی وب چگونه نمایش داده شود؟ آیا حاشیه داشته باشد یا نداشته باشد؟ آیا فرو رفتگی و برجستگی داشته باشد یا نداشته باشد؟ و سایر مشخصات دیگر که ممکن است بتوان برای یک عکس در یک صفحه ی اینترنتی به کار برد.

مثلاً ترازبندی نمودن نوشته های ما و محتوا هم می تواند جزوی از این استایل بندی باشد. همین حالا که این متن را دارید می خوانید. شاهد نوعی استایل بندی خاصی هستید که طراح صفحه آن را ایجاد نموده است. قسمت جالب ماجرا این است که مجبور نیستید همه این تنظیمات را تک به تک به روی تمام صفحات یک سایت انجام بدهید. می توانید طوری برنامه نویسی کنید که به طور اتوماتیک تمام این تنظیمات به همه ی صفحات یک وب سایت منتقل بشود. به صورتی که یک سایت یک دست و هماهنگ و زیبا داشته باشیم.

در عصر امروز دیگر نمی توانید شاهد وب سایتی باشید که از css به نوعی استفاده نکرده باشد. چرا که همه وب سایت ها هر چه قدر هم که پیشرفته باشند. در جا هایی لازم است حتماً استایل دهی لازم را به صفحات خود انجام بدهند. این استایل دهی را فقط می توان با css انجام داد و بس.

کمی بیشتر از استایل بندی بدانیم

 گفتیم که استایل تنها ظاهر یک عنصر را در صفحات اینترنتی نشان می دهد. و در واقع به مرورگر می گوید که فلان محتوا را چه طور نمایش بدهد. این محتوا می تواند شامل متن و عکس و یا فیلم باشد. مهم این است که استایل نمایش آن و نحوه ی نمایش و دیدن آن توسط بیننده چه طور باشد؟ باید گفت استایل ها از دو قسمت تشکیل می شوند. که به یک قسمت آن selector و به قسمت دیگر آن declaration block می گویند. حال ما به عنصری که قصد  اعمال تغییرات در آن را داریم selector  می گوییم. مترادف یا هم معنی فارسی selector درفارسی می‌ تواند ” انتخاب کننده” باشد. اگر می خواهید آموزش css را شروع کنید.

 باید حتماً به این دو قسمت نیز توجه ویژه ای داشته باشید. ما به مجموعه ی دستورالعمل ها و فرمت بندی هایی که بر روی یک محتوا انجام می دهیم declaration block می گوییم. خب ما چنین گفتیم که به قسمتی از محتوا که قصد اعمال تغییرات در آن داریم سلکتور می گوییم. این سلکتور می تواند شامل هر چیزی باشد. اعم از متن و فیلم یا عکس. ما بلاک های اعلان یا همان declaration block را می توانیم به چند طریق تعریف کنیم. گاهی اوقات با علامت نقطه ویرگول از هم جدا می کنیم. گاهی اوقات هم با استفاده از علامت دو نقطه. راستی از سلکتور ها برای نمایاندن و پیدا نمودن یک ویژگی و عنصیر نیز می توان استفاده نمود.

مثال های روشن

در این قسمت سعی می کنیم تا چند نمونه مثال برای تان بیاوریم. تا بهتر متوجه شوید:

<!DOCTYPE html>

<html>

<head>

<style>

p {

    color: red;

    text-align: center;

}

</style>

</head>

<body>




<p>Hello World!</p>

<p>These paragraphs are styled with CSS.</p>




</body>

</html>

تگ متا در HTML

تگ متا در HTML

تگ متا در HTML 800 450 نویسنده

تگ متا در HTML چیست؟

فکر می کنید تگ متا در HTML چیست؟ ما در اچ تی ام ال تگ خاصی داریم که به آن تگ متا در HTML نیز می گوییم. این عبارت را به نام های دیگر مانند متا داده و یا MetaData نیز به کار ببرند و شما به این صورت ها بشنویم. و طبیعی می باشد که این تگ ها در خود مرور گر ها قالیت تجزیه و تحلیل را داشته باشند. اما یک کاربر ساده مانند من و شما نتوانند آن ها را ببینند. وجود همه ی این تگ ها می تواند برای تمامی مرورگر ها خوب و مفید باشد. بیایید یک مثال برای این موضوع بزنیم. مثلا آیا می دانستید که می توان با استفاده از متاداده keywords یک سری کلمه ی کلیدی را به صفحه ی وب در هر مرورگری معرفی نماییم؟

 این تگ و یا همان متا دیتا باعث می شود که آن کلمه ی مورد علاقه ی ما در وب سایت مان به خوبی نمایش داده شود. البته در اچ تی ام ال 5 یک متا دیتا در مدل های دیگر اضافه شده است. نام این متا دیتا viewport است. که با آن می توان دقیقا تعیین نمود که متون در دیوایس های متفاوت چگونه نمایش داده شوند. چیزی مانند همان حالت ریسپانسیو بودن. منظور ما از این دستگاه ها شامل گوشی های موبایل و کامپیوتر و نظایر آن ها می باشد که در هر صورت مرورگر دارند و می توانند فضای وب را به نمایش بگذارند.

متا تگ

متا تگ

مثالی اضافه و واقعی در مورد تگ متا در HTML

حال با توجه به مطالبی که در پارامتر های قبلی خوانده اید، بیایید ببینیم که چطور می توان چنین دستوراتی را داد:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="description" content="آموزش رایگان طراحی وب">

  <meta name="keywords" content="HTML,CSS,JavaScript">

  <meta name="author" content="Mahdi mr">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>




<p>Salam Chetori? Man ghassem Hastam.</p>




</body>

</html>

تازه این اول کار است. می توان از تگ های دیگری هم نام برد مانند تگ هازیر که می بینید:

  • Charset نوعی متا می باشد که سریعا جنس کاراکتر ها را شنا سایی و طبقه بندی می کند. تا بهتر بتوان آن ها را در یک صفحه وب نمایش داد.البته من و شما که محتوایی با زبان فارسی تولید می کنیم هم حتما باید از همین متا تگ استفاده کنیم.
  • متای بعدی را description می نامیم. که کارش این است تا کلیت مطلب ما را در یک کادر کوچک تر نمایش بدهد. مانند همان شرح مختصری که در بالای متون به صورت چکیده در برخی وب سایت ها ممکن است با آن مواجه باشیم.
  • نوع دیگری از متا وجود دارد که مانند مورد بالا به آن keywords می گوییم. و همان طور که گفتیم برای مشخص نمودن کلمه ای می باشد که برای ما واقعا مهم است.
  • تگ بعدی را author می نامند که در حقیقت به اسم نگارش کننده ی مطالب و محتوای درون صفحه اشاره می کند.
  • و آخرین تگی که می خواهیم در این قسمت به آن اشاره نماییم، viewport می گویند که همان عمل ریسپانسیو بودن متون در دستگاه های مختلف را به ما نشان می دهد.

حالا ببینیم کدام یک از مرورگر ها از تگ متا پشتیبانی می کنند؟

به صورت کلی مرورگر هایی مانند مرورگر Chrome  و Firefox و Opera و Safari و IE. حالا یک سوال دیگر. چه صفاتی را می توان در کنار مقدار مختلف در این تگ ها به کار برد؟ زمانی که در اچ تی ام ال 5 با علامت ضرب در مواجه شدید. به این معنا می باشد که این پارامتر در این ورژن از اچ تی ام ال پشتیبانی نمی گردد. و خود نماد اچ تی ام ال 5 را زمانی که در هر یک از این حالات مشاهده فرمودید به این معنا می باشد که پارامتر به خوبی کار می کند و اضافه شده است. در این حالت بیایید سری هم به صفت ها و مقادیر موجود بینداریم:

  • صفتی با نام charset که مقدار آن را با character_set می نمایانند. این نوع صفت برای مشخص کردن نوع کاراکتر موجود در وب کافی می باشد. مخصوصا این که محتوای شما در آن صفحه ی به خصوص به زبان فارسی هم باشد.
  • صفت بعدی را content می نماند. که با مقدار text مشخص می گردد. از این صفت هم برای توضیح صفت استفاده می کنند.
  • http-equiv صفت بعدی ای است که با مقدار content-type و default-style و refresh مشخص می گردد. می توان برای ساختن یک هدر در این صفخات از چنین صفت هایی و مقادیری استفاده نمود.
  • نام صفت چهارم name می باشد. که مقادیر بسیار متنوع تری مانند application-name و author و description و generator و  keywords و در آخر با viewport مشخص می گردد. کار آن هم این است که دقیقا مشخص کند نام متای مورد نظر ما چه است.
  • Schemeنیز به نوبه ی خود مقداری به نام format/URI دارد. که همان طور که مشخص می باشد فرمت و یو آر ال را بیان می کند.

بررسی نکات مهم

یکی از نکات مهم در استفاده از چنین تگی می تواند این باشد. که باید همیشه آن را در بین تگ هد قرارش بدهید. دومین نکته این است که تگ متا در HTML همیشه دارای دو قسمت می باشد. اول این که نام خود متا تگ چه باشد؟ و دوم این که مقدار آن چه قدر است؟ حال بیایید برای هر چه روشن تر شدن ماجرا مثال های بیشتر و بیشتری را بزنیم. حالا می خواهیم ببینیم که چه طور می توان کاری کرد که گوگل مطلبی را که ما نوشته ایم ایندکس نکند. اما خود خزنده های گوگل آن را بیابند؟ به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<head>

 <meta name="robots" content="noindex, follow">

</head>

<body style="text-align:center;">




<h4>این صفحه در نتایج گوگل نمایش داده نمی شود ولی توسط ربات یا خزنده های گوگل دنبال می شود</h2>




</body>

</html>

مثال دیگر درست بر عکس مثال قبلی خواهد بود. پس به آن توجه کنید:

<!DOCTYPE html>

<html>

<head>

 <meta name="robots" content="index, nofollow">

</head>

<body style="text-align:center;">




<h4>این صفحه در نتایج گوگل نمایش داده می شود ولی توسط ربات یا خزنده های گوگل دنبال نمی شود</h4>




</body>

</html>

 

خب از متا چنان که گفتیم تنها برای توصیف سند استفاده می کنیم. به مثال زیر که توصیفی از این دست است توجه کنید:

<!DOCTYPE html>

<html>

<head>

<meta name="author" content="Hege Refsnes" />

<meta name="revised" content="2010/06/20" />

</head>




<body>

<p>The meta elements on this page identifies the author and the revise date.</p>

</body>

</html>

یک نکته ی مهم دیگر که در این باره وجود دارد این است که اگر چنان چه  name یا  http-equiv در متن تعریف گردد. مجبوریم، شاخص content را نیز تعریف کنیم. و بر عکس. اگر دو بارزه ای که گفته شد را تعریف نکنیم. مجبور هم نمی شویم تا ویژگی content را دوباره تعریف کنیم.

کلیت تگ ها

کلیت تگ ها

چیز هایی که شاید نمی دانستید

یکی از چیز هایی که شاید نمی دانستید این است که ویژگی scheme به هیچ عنوان در اچ تی ام ال 5 قابلیت پشتیبانی را ندارد. ولی ویژگی دیگری تحت عنوان charset در اچ تی ام ال 5 تعریف شده است کارایی بیشتری را به آن بخشیده است. یک نکته ی جالب دیگر در این باره این می باشد که تگ متا در HTML محدودیت ندارد. در صورتی که در XHTML باید حتما بسته شده باشد. حال مجددا بیایید ببینیم که نمایش کلمات کلیدی را چگونه می توان انجام داد؟

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

حال کمی صبر کنید. چگونه می توانستیم محتوایات یک صفحه را نمایان نماییم؟

<meta name="description" content="Free Web tutorials on HTML and CSS">

 

این ها یک مرور مجدد می باشد. نام نویسنده ی صفحه را چگونه مشخص می کردیم؟

<meta name="author" content="Hege Refsnes">

 

به این یک مورد تا کنون اشاره ای ننموده بودیم. چگونه می شود که کاری کنیم تا کل صفحه ی وب ما مثلا هر نیم دقیقه یک مرتبه به روزرسانی گردد؟ به مثال زیر توجه کنید:

<meta http-equiv="refresh" content="30">

 

در مثال بالا عدد سی همان نمایانگر نیم دقیقه ای است که گفته بودیم. و در مورد نکته ی آخر باید چنین بگوییم که تگ متا در HTML شامل ویژگی های عمومی نمی گردد. ما این ویژگی ها را در قسمت پایین این سطر به ترتیب آورده ایم و با علامت کاما هر یک را از دیگری جدا نموده ایم:

Accesskey , class , contenteditable , contextmenu , data-* , dir , draggable , dropzone , hidden , id , lang , spellcheck , style , tabindex , title , translate.

ساختن قالب HTML

ساخت قالب با HTML

ساخت قالب با HTML 1024 576 نویسنده

طریقه ساختن قالب با HTML

در این مقاله به نحوه ی ساختن قالب HTML اشاره خواهیم نمود. ما در این مقاله از بیسیک ترین مواردی که یه آن احتیاج پیدا خواهید نمود صحیبت می کنیم. مواردی همچون یک ادیتور ساده برای این که فقط بتوانیم کد های مورد نیازمان را در درون آن بنویسیم. در صورتی که می خواهید با استفاده از پلتفرم ویندوز اقدام به ساخت قالب کنید بهتر است که از نرم افزار ادیتور Notepad++ بهره ببرید. هم چنینی اگر جزو کابرن و استفاده کننده گان سیستم عامل های لینوکسی و مک هستیم هم می توانید از نرم افزار ATOM برای این کار به عنوان یک ادیتور استفاده کنید. پس از آشنایی با این موارد حالا می خواهی بدانیم که از کجا باید کار را شروع کنیم.

و حالا بیایید به این بپردازیم که چگونه می توان یک فایل اچ تی ام ال را برای شروع قالب سازی و یا همان پیکره بندی ایجاد نمود؟ برای این کار باید ابتدا به ساکن یک فایل با نام و پسوند index.html بسازید. همیشه هم هاست شما اول این فایل را با همین نام استارت می کند. حالا فایلی را که تولید نموده ایم و وصف آن را گفته بودیم. با یکی از ویرایشگر هایی که کمی بالا تر توضیحش را داده بودیم ویرایش می کنیم. و در درون آن ابتدا همان جمله ی معروف Hello World می نویسیم. یعنی سلام دنیا. این جمله منظورش این است که وب سایت جدیدی قدم به دنیای وب گذاشته است.

index

index

 

 

کشیدن و رها کردن در ساختن قالب HTML

زمانی که فایلی را که گفتیم ساختید. می توانید آن را ابتدا انتخاب نموده و سپس به درون یکی از مرورگر های محبوب تان رها کنید. و آن جا همان عبارت Hello World را خواهید دید. شما اولین قدم برای طراحی و ساختن قالب HTML را برای یک وب سایت انجام داده اید. و اما اگر بخواهید شروع به ساختن قالب HTML کنید باید از دستور و کد های خاصی در این حالت استفاده کنید:

 

<html>

<head>

<title>Page Title</title>

</head>

<body>

Hello World

</body>

</html>

 

 

دقت کنید که در کد های بالا جایی به نام Page Title وجود دارد که اشاره به عنوان صفحه دارد. می توانید هر عنوانی را برای آن در نظر بگیرید. ما در ایجا عبارت ” اوج آراد پرگاس” را انتخاب می کنیم و به شکل زیر قرارش می دهیم:

 

<html>

<head>

<title>اوج آراد پرگاس </title>

</head>

<body>

سلام دنیا

</body>

</html>

 

از طرفی ما به جای جمله ی Hello World جمله ی ” سلام دنیا را قرار دادیم. و حالا عکس زیر را داریم. خوب به تغییرات به وجود آمده توجه کنید:

 

عنوان صفحه

عنوان صفحه

نکته ی مهم در این مورد این است که هیچ کدام از دو فریم ورک اچ تی ام ال و سی اس اس زبان برنامه نویسی محسوب نمی گردند. با این حساب یاد گرفتم آن ها خیلی ساده تر از چیزی می باشد که به آن فکر کرده اید. اگر مقالات قبلی ما را خوانده باشید گفته بودیم که اچ تی ام ال تنها برای پیکره بنی صفحات وبی استفاده می شود. و سی اس اس هم جنبه زیبایی بخشی به صفحات ما را دارد.

 

 

 

موضوع می تواند کمی سخت تر هم باشد

گاهی ما می توانیم اسنادی با فرمت PSD را به فرمت HTML نیز تبدیل کنیم. روند ساخت یک قالب وب سایتی همیشه به مانند آن چه در این جا گفته شد نیست. و می تواند از نرم افزار فتوشاپ شروع گردد. بله. تعجب نکنید. فتوشاپ پایه ی اول ساخت صفحات جدید وب است. ما فایل PSD را با فتوشاپ درست می کنیم. و سپس آن را به طراح می دهیم تا آن را تبدیل به اچ تی ام ال نماید. در این میان می تواند از سی اس اس نیز بهره ببرد. این قالب در ابتدا فقط به صورت تک صفحه ای به وجود می آید. و کم کم پس از طی مراحلی به ریسپانسیو نمودن ان می پردازیم. یعنی این که قالب وب سایت ما در هر ویوایسی به خوبی نمایش داده شود. آن هم با هر اندازه ای.

البته موارد دیگری هم در این راه وجود دارند که برای جلو گیری از سختی کار آن ها را فعلا نمی گوییم. بلکه در مقالات بعدی به آن ها اشاره خواهیم نمود. اولین گام ایجاد یک فولدر و یا همان پوشه ی اصلی برای ایجاد فایل ها می باشد. سپس PSD را درون فولدر قرار می دهیم. زیرا قرار است که آن را تبدیل به اچ تی ام ال کنیم. البته این را به خاطر داشته باشید که تنها از یک یا دو روش نمی توان اقدام به ساخت و طراحی ساختن قالب HTML نمود. برای همین هم طراح های حرفه ای برای ایجاد یک وب سایت به طرح کلی و خدماتی که خود وب سایت قرار است ارائه بدهد نگاه می کنند. و بر طبق آن شروع به ساختن قالب HTML می کنند.

 

 

 

 

ارائه ی طرح اولیه

قبل از انجام هر کاری طراحان یک وب سایت از در خواست کننده های آن می خواهند که هدف شان را به صورت کاملا واضح از تولید و ایجاد این وب سایت بیان کنند. این که این وب سایت قرار است یک درگاه و فروشگاه برای فروش اجناس باشد با این که قرار باشد خدماتی را ارائه بکند خیلی متفاوت می باشد. برای همین هم روش کار در هر قسمت تفاوت خواهد داشت. تازه دامنه ی کار به همین جا هم ختم نشده و گاهی صاحبین مشاغل از یک طراح می خواهند که بگوید آیا می خواهد وب سایت آن ها جنبه ی آموزشی داشته باشد یا خبری؟ مجموعه ای از این اطلاعات باعث می شود که خود طراح هم تصمیم بگیرد که از چه روش و کدام زبان و پلتفرم برای ایجاد وب سایت استفاده کند.

ضمنا تا می توانند هر چیزی را که می خواهند باید از همان اول به خود طراح اطلاع بدهند تا اضافه کند. این موضوع تا حدی مهم به نظر می رسد که ممکن است بعد ها نتوان یک آپشن و گزینه را در درون یک قالب قرار داد. و یا حداقل قرار دادنش خیلی سخت باشد. پس از آن که وب سایت شما طراحی ش. حالا به هر روشی. یک نقشه ی وب سایت نیاز خواهید داشت تا تمامی لین ک های موجود در وب سای تان را بتوانید در آن قرار بدهید. حال ما در قسمت بعدی به تشریح این نقشه ی وب سایت به صورت کامل تری خواهیم پرداخت.

 

 

 

 

نقشه ی ساختن قالب HTML

یکی از مواردی که در ساختن قالب HTML باید به آن توجه نمود. این است که لینک ها را باید در کجا قرار داد؟ جایی که تمام لینک ها ابتدا در آن محل ذخیره شده و سپس گوگل از طریق آن اقدام به ایندکس نمودن لینک ها و به تبع ان مطالب یک وب سایت می کند. پسوند این فایل XML می باشد. در برخی پلتفرم ها درست زمانی که اقدام به طراحی وب سایت می کنید. خود پلتفرم این فایل را به صورت خودکار تولید می کند. و کار شما آسان می گردد. ولی در برخی دیگر از پلتفرم ها باید خود تان دست به کار شده و این کار را انجام بدهید. که در این صورت ممکن است دچار خطای انسانی گردد. و نقشه و خروجی مناسبی به دست نیاید.

برای همین توصیه می کنیم که هرگز خود تان اقدام به درست نمودن یک نقشه برای وب سایت تان نکنید. و به جای ان از ابزار و حتی وب سایت های دیگری برای اینکار استفاده کنید. حال بیایید ببینیم چرا نقشه ی یک وب سایت برای ما تا این حد اهمیت دارد؟ دلیل این همه اهمیت آن از این جهت است که اگر نباشد گوگا تنها به دنبال اسم وب سایت شما می گردد. تصور می کنیم که وب سایتی دارید در حوزه ی ارز های دیجیتالی. اگر وب سایت شما نامش ارز دیجیتال دات ای ار باشد گوگل فقط همان را ایندکس می کند. و مخاطب تنها باید همین آدرس را جستجو کند که به وب سایت شما برسد.

اما اگر وب سایت شما دارای نقشه ی وب سایت باشد در این صورت مخاطب اگر هر کلمه ای را مرتبط با ارز دیجیتال جستجو نماید وب سایت شما با نمایش داده می شود؟

 

قالی PSD

قالی PSD

 

 

در پروژه خود به چه پوشه هایی نیازمندیم؟

همان طور که می دانید تا بخواهیم یک فایل وب را بسازیم. باید از چندیدن و چند ابزار برای این کار استفاده کنیم. و طبعا نیاز به چندین فولدر هم خواهیم داشت که هر کدام کارایی خود شان را خواهند داشت. در قسمت های قبلی چنین گفتیم که وقتی فایل index.html را می سازیم. حتما باید فولدر را هم برای آن در نظر بگیریم. اما در این قسمت می خواهیم بگوییم که برای ساختن قالب HTML باید چندین فولدر دیگر را هم در نظر داشته باشیم. یکی این که فولدری به نام img را ایجاد کنیم. که قائدتا عکس ها را در آن می گذاریم. و دوم این که فولدر به نام CSS نیاز خواهیم داشت. چیز هایی که در این مقاله به آن ها اشاره نمودیم. جزو پایه ای ترین موارد ساختن قالب HTML بود. در قسمت های بعدی موارد بیشتری را بررسی خواهیم نمود.

لیست در HTML

لیست در HTML

لیست در HTML 600 511 نویسنده

طریقه ایجاد لیست در HTML

در این مطلب می خواهیم طریقه ی ایجاد لیست در HTML را به صورت مفصل آموزش بدهیم. در قسمت های قبلی چنینی گفتیم که در زبان اچ تی ام ال برای انجام دادن هر نوع اکشن باید از مجموعه ای از تگ ها استفاده نمود. این تگ ها هستند که کار هایی مانند قالب بندی و پیکره بندی را برای ما امکان پذیر می سازند. هر یک از این تگ ها نیز برای خود کار و وظیفه ای مشخص داشت. ضمنا تگ ها به صورت دو قسمتی بودند. یکی از آن ها اول گشوده می شد و سپس بسته می شد. و دیگری قسمت پایانی و بست شدنی را نداشت. گفته می شود که تمامی این تگ ها هر یک به نوبه ی خود نماینده ی یک w3c می باشند. و از یک مجموعه تلقی می گردند.

بد نیست بدانید که لیست ها نیز برای خود انواعی دارند. که در این مقاله به تمامی آن ها می پردازیم. معمولا این نوع لیست ها را در وب سایت ها به دو طبقه دسته بندی می کنند. به اولین دسته از آن ها لیست های شماره های می گویند. اما چرا به آن ها لیست شماره ای می گویند؟ به خاطر این که در کنار هر گزینه یک عدد وجود دارد. و به صورت کلی هر یک از این لیست ها را با اعداد آن ها مرتب سازی می کنند. البته در زبان انگلیسی به آن ها لیست های ordered  هم گفته می شود.

لیست نشانه دار

لیست نشانه دار

مدل های دیگر لیست در HTML

گفتیم که دو نوع لیست در HTML داریم که نوع اول آن ها را لیست هایی تشکیل می دهند. که گزینه های شان توسط اعداد مرتب شده اند. مدل دوم لیست در HTML شامل مدلی می گردد که به جای استفاده از اعداد برای چینش گزینه ها و آپشن ها از علامت ها در آن ها استفده می گردد. این علامت ها می توانند هر نوعی باشند. مانند علامت های تو پر و تو خالی. نام دیگر این لیست در HTML همان unordered است. این دو مدل لیست ها در اچ تی ام ال شامل هیچ تفاوتی با یکدیگر نمی باشند. تنها تفاوت آن ها در اعدادی است که در یکی از آن ها به کار برده شده است. و در دیگری به کار برده نشده است. خب حالا می خواهیم ببینیم که لیست های شماره دار را در اچ تی ام ال چگونه می سازند؟

پس با ما همراه باشید. خب از مقالات قبلی ما چنین بر می آید که در زبان اچ تی ام ال تنها با تگ ها سر و کار داشته باشیم. در این مورد به خصوص هم همین طور است. یعنی فقط با تگ های خاصی این کار را انجام می دهیم. نام این تگ ها یک تگ ol و دیگری تگ li است. ما از این دو تگ در ایجاد لیست ها در اچ تی ام ال استفاده می کنیم. ولی لیست های شماره گذاری شده و اصطلاحا عددی. تفسیر گر هر مرورگر هم متوجه این تگ ها می شود.

مثالی برای ایجاد لیست شماره ای

در قسمت قبلی گفتیم که برای ایجاد لیست در HTML آن هم از نوع شماره دار آن، باید از دو نوع تگ li و ol استفاده کنیم. حالا به مثالی در این زمینه می پردازیم:

<ol>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وبسایت</li>
<li>http://oap-it.com </li>
</ol>

 

در مثالی که گفتیم چنان که از این تگ ها استفاده کنیم. باید شاهد لیست هایی باشیم که با اعداد شماره گذاری شده باشند. در این مورد گزینه ها به ترتیب شماره ها بررسی شده و نمایش داده خواهند شد. اما کمی صبر کنید. اگر بخواهیم یک آیتم قبل از تمامی آیتم های دیگر نمایش داده شود چه می شود؟ خب در این صورت هم از خصیصه ای به نام type استفاده می کنیم. که می توان برای هر یک از آن ها مقدار هایی را نیز تعیین نمود. مانند مثال های زیر:

– لیست آیتم ها به صورت شماره ای (1، 2، 3 و…) با مقدار 1 برای type.

– لیست آیتم ها به صورت حروف کوچک (c، b، a و…) با مقدار a برای type.

– لیست آیتم ها به صورت حروف بزرگ (C، B، A و…) با مقدار A برای type.

– لیست آیتم ها به صورت شماره های رومی کوچک (iii، ii، i و…) با مقدار i برای type.

– لیست آیتم ها به صورت شماره های رومی بزرگ (III، II، I و…) با مقدار I برای type.

برای درک بهتر این مسئله در قسمت بعدی مثالی را هم خواهیم آورد.

 

لیست به سبک اعداد یونانی

لیست به سبک اعداد یونانی

مثالی برای چینش های متفاوت دیگر

در این قسمت به مثالی خواهیم پرداخت که در آن شاهد موارد دیگر در ایجاد یک لیست در HTML خواهیم بود.

<ol type=”I”>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وب سایت</li>
<li>http://oap-it.com</li>
</ol>

بر اساس مثال بالا ما دیگر لیست خود را در قالب اعداد عادی نچیده ایم. بلکه از اعداد یونانی برای این کار استفاده نموده ایم. اما چه طور این اتفاق افتاد؟ ما طبق معمول کد مان را نوشتیم. ولی این بار به type را هم به آن اضافه نمودیم. و سپس i را آوردیم. به این ترتیب به مرورگر تفهیم نموده ایم که ما خواستار چینشی از نوع اعداد یونانی هستیم. در مثالی دیگر می خواهیم از بولت ها برای چینش و لیست نمودن کاراکتر ها استفاده نماییم.

پس برای این کار از دو تگ تگ ul و li استفاده می کنیم. ما در این روش با ارائه ی تگ ul به مرور گر می گوییم که از شماره ها و اعداد برای لیست نمودن گزینه ها استفاده نکند. در این میان از تگ li نیز برای به وجود آوردن چیز ها استفاده می کنیم. حال برای درک بهتر موضوع به مثال زیر لطفا توجه کنید:

<ul>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وب سایت</li>
<li>http://oap-it.com</li>
</ul>

حالا با توجه به مثالی که در بالا مشاهده می کنید اول همه ی نوشته ها و گزینه ها از بولت های تو پر و سیاه رنگ استفاده نموده ایم.

آیا می توان از مدل های دیگر لیستی استفاده نمود؟

بله. دقیقا سه مدل دیگر هم هستند که می توانند به ما در انجام این کار کمک کنند. البته به کمک گزاره ی type می توان این کار را انجام نمود:

– ایجاد نقطه های تو خالی با مقدار circle برای گزاره ی type.

– ایجاد نقطه های تو پر با مقدار disc برای گزاره ی type.

– ایجاد نقطه های مربعی با مقدار square برای گزاره ی type.

در این جا چنان که خود مان هم گفتیم کلمه ی square به معنای مربع می باشد. حالا با توجه به این شکل می توان مثال زیر را اجرا نمود:

<ul type=”square”>
<li>نمایش</li>
<li>لیست ها</li>
<li>در وب سایت</li>
<li>http://oap-it.com</li>
</ul>

در این مدل هم شاهد مربع هایی هستیم که یه صورت لیست در HTML نمایش داده خواهند شد. تازه این ها همه ی ماجرا نیستند. ما درباره ی ایجاد لیست در HTML آن قدر آزادی داریم که بتوانیم این کار را حتی با CSS نیز انجام دهیم. چرا که با استفاده از سی اس اس می توان خیلی سفارشی شده تر و تمیز تر و با کیفیت تر اقدام به ایجاد هر نوع لیست در HTML کنیم. در واقع دست مان برای خلاقیت و ایجاد هر نوعی از لیست در HTML باز است. حال بیایید ببینیم که چگونه می توانیم نسبت به ایجاد ul و li و لیست های پیچیده تر اقدام کنیم؟

لیست زیر مجموعه دار

لیست زیر مجموعه دار

بیایید کمی کار را پیچیده تر کنیم

خب در این قسمت می خواهیم با دو تگ ul و li اقدام به ایجاد لیست در HTML کنیم که کمی پیچیده تر از مدل های قبلی خود باشد. ما در زبان اچ تی ام ال به چنین لیست های پیچیده ای nested هم می گوییم. از این نوع لیست ها در منو های صفحات وبی هم استفاده می کنند. از لیست های nested برای مواردی استفاده می گردد که بخواهیم منو هایی را بسازیم که در آن نوعی طبقه بندی وجود داشته باشد. یعنی تقریبا چیزی شبیه به منو های دیجیکالا که هر کدام یک دسته بندی خاص و مشخصی برای خود دارند. مثالی که در پایین می آوریم از نوع اولیه ای چنین منو هاو لیست در HTML می باشد. به آن ها توجه کنید:

<ul>
<li>منوی اولیه که زیر مجموعه ندارد</li>
<li>
لیست ثانویه ای که دارای زیر مجموعه هم هست
<ul><li>اولین زیر مجموعه ی لیست ثانویه
<ul><li> دومین زیر مجموعه ی لیست ثانویه </li></ul></li></ul>
</li>
</ul>

ضمنا در این مثال هم از بولت های تو پر استفاده نمودیم. و هم از بولت های تو پر و حتی مربع ها. ما حتی می توانیم لیست های توصیفی را هم در اچ تی ام ال به وجود بیاوریم. این لیست های توصیفی را با استفاده از تگ های dl ,dt و dd می سازیم. به این صورت که تگ dl را مبنا در نظر گرفته. تگ dt مسئولیت ایجاد آیتم ها را دارد. و تگ dd را هم می آوریم تا بتوانیم توسط آن توصیفی انجام دهیم. البته برای ایجاد لیست در HTML می توان از انواع دیگری از تگ هاو مدل های مختلف هم استفاده نمود. اما آن ها را در مقاله ای جداگانه توضیح خواهیم داد.

دکمه در HTML

قرار دادن دکمه در HTML

قرار دادن دکمه در HTML 496 364 نویسنده

چگونگی قرار دادن دکمه در HTML

دکمه در HTML و نحوهی قرار دادن آن هم در این فریم ورک نیازمند به کار بردن یک تگ مخصوص است. تگی به نام تگ button که با ایجاد نمودن آن می توانیم یک کادر کوچک به نام دکمه را ایجاد کنیم تا لینکی را در آن جا سازی نماییم. در این مقاله می آموزیم که ما دو نوع دکمه یا button داریم که هر دو قابلیت کلیک خوردن را دارند. مدل اول به همین نام یعنی button معروف می باشد. که در درون آن می توانیم متنی را هم بگنجانیم.

در مدل دوم که آن را به نام input می شناسیم، می توان از آن به جهت ارسال اطلاعات مربوط به فرمی خاص استفاده نمود. ما در این جا برای درک و فهم بهتر شما مخاطب عزیز از چند مثال برای ایجاد و ساختن دکمه در HTML استفاده می کنیم. این مثال ا هم در قالب اچ تی ام ال خواهد بود. و هم در قالب سی اس اس. پس در ادامه با ما همراه باشید.

 

نقش دکمه ها در فرم

نقش دکمه ها در فرم

 

مثال هایی برای ایجاد دکمه در HTML و CSS

 

<body>

<button onclick=”alert(‘به وب سایت OAP خوش آمدید’)”>کلیک کن</button>

</body>

 

همان طور که مشاهده می کنید ما در این مدل کد نویسی از هیچ نوع رنگ بندی و استایل خاصی برای دکمه در HTML استفاده نکرده ایم. تنها کاری که کرده ایم پیکره را تعیین کرده ایم و آن را گشوده ایم. سپس در خط بعدی عبارت button onclick را برابر با جمله ای که می خواسته ایم قرار داده ایم. فقط قبل از آن کلمه ی Alert را که حاکی از گوش به زنگی می باشد آورده ایم که به این ترتیب هر گاه دکمه را زدیم. عبارت و جمله ای را که می خواهیم نمایش داده شود. در قسمت آخر هم می بینید که آنکر تکست را آورده ایم. آنکر تکست هم همان متن و نوشته ای می باشد که بر روی دکمه قرار می گیرد.

نکته ی قابل توجه در این جا این موضوع می باشد که همیشه به صورت پیش فرض دکمه ی ما به صورت یک مستطیل با خطوط شکسته شکل می گیرد. زمانی که بر روی دکمه کلیک می کنیم، کادری برای ما باز خواهد شد و عبارت مورد نظر ما را نمایش خواهد داد که در این مثال همان ” به وب سایت OAP خوش آمدید” است. و در زیر آن هم یک دکمه ی تایید یا OK وجود دارد. ضمنا اگر می خواستیم از آخرین نسخه ی اچ تی ام ال استفاده کنیم باید از دستور <!DOCTYPE html> برای این کار استفاده می کردیم. در مثال بعدی همین دکمه را در قالب سی اس اس خواهیم ساخت.

 

 

 

 

ساخت دکمه توسط سی اس اس

در قسمت قبلی ما تنها یک دکمه ی ساده و معمولی را ساختیم. اما در این بخش می خواهیم توسط سی اس اس کمی به آن رنگ و لعاب بدهیم. پس به مثال زیر کاملا توجه کنید:

 

<!DOCTYPE html>

<html>

<head>

<style>

.button {

  background-color: #008000;

  border: none;

  color: white;

  padding: 10px 20px;

  text-align: center;

  font-size: 16px;

  cursor: pointer;

}

.button:hover {

  background-color: #CD5C5C;

}

</style>

</head>

<body>

<button type=”button” class=”button” onclick=”alert(‘وب سایت OAP’)”>کلیک کن</button>

</body>

</html>

 

خب در این مثال چنان که مشاهده می کنید دکمه را طوری طراحی نموده ایم که رنگ پس زمینه ی آن سبز باشد که کد رنگی آن می شود ” #008000″. ولی وقتی موس را بر روی ان می بریم رنگ دکمه جگری می شود. چنان که ملاحظه می کنید چنین افکت ها و تغییراتی را تنها می توان در سی اس اس مشاهده نمود. و کار اچ تی ام ال تنها ساختن کلیات یک شی است. و نمی توان جلوه ی خاصی را با این فریم ورک به تنهایی به صفحه ی وب بخشید. برای همین هم هست که همیشه سی اس اس را مکمل اچ تی ام ال می دانند. زیرا معمولا کار هایی را که نمی توان با اچ تی ام ال به تنهایی انجام داد. باید توسط سی اس اس صورت بدهیم. ما در این مثال استایل تعریف نمودیم. رنگ ها را شناساندیم.

و حتی سایز ها و اندازه های دکمه در HTML را هم توسط همین فرامین به صفحه ی وب نشان دادیم. البته اتفاقی که در آخر می افتد همان چیزی است که در مثال قبلی دیدیم. با این تفاوت که در مثال قبلی دست مان چندان برای اعمال تغییرات در خروجی کار باز نبود. اما در این مثال با توجه به این که به سی اس اس هم دسترسی داشتیم توانستیم چندین تغییر کوچک را اعمال نماییم. مثلا اگر می خواستیم حتی می توانستیم گوشه های دکمه را هم گرد کنیم.

 

دکمه عریض

دکمه عریض

 

مثال سوم درباره ی دکمه های عریض

تا به این جا با دو نوع مختلف دکمه در HTML آشنا شدیم. که اولی جلوه ی خاصی را نداشت. اما در دومی توانستیم به خاطر وجود سی اس اس تغییرات مختصری را به کار مان بدهیم. حال این سوال پیش می آید که اگر بخواهیم یک دکمه ی کاملا عریض بسازیم باید چه دستوراتی را اعمال کنیم؟ به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<head>

<style>

.button {

  background-color: #2196F3;

  width: 100%;

  border: none;

  color: white;

  padding: 10px 20px;

  text-align: center;

  font-size: 16px;

  cursor: pointer;

}

.red{background-color:#F44336;}

.yellow{background-color:#FFEB3B;}

.green{background-color:#4CAF50;}

.purple{background-color:#9C27B0;}

</style>

</head>

<body>

<button class=”button”>کلیک کن</button> <br><br>

<button class=”button red”>کلیک کن</button> <br><br>

<button class=”button yellow”>کلیک کن</button> <br><br>

<button class=”button green”>کلیک کن</button> <br><br>

<button class=”button purple”>کلیک کن</button>

</body>

</html>

 

در این مثال پنج دکمه ی عریض را به کمک سی اس اس ساختیم. برای هر کدام رنگ جداگانه ای در نظر گرفتیم. ولی چون موضوع تنها جنبه ی مثال داشت پیغام خاصی را در هیچ یک از آن ها نگنجاندیم. در مثال بعدی با همان روش قدیمی لینک گذاری اقدام به ساخت دکمه هم می کنیم. همان که در آن از a و href استفاده می شد.

 

 

 

مثال چهارم با روش a و href

اگر خاطر تان باشد در یک مقاله طریقه ی لینک دهی را به صورت مفصلی باز گو کرده بودیم. آن جا که از این دو در کنار هم استفاده می نمودیم. در ابتدا a href را با هم و در هنگام گشودن تگ می اوردیم. و موقع بستن تگ ها فقط از اسلش a استفاده می نمودیم. در قسمتی از کد های زیر هم از همین روش استفاده شده است. لطفا به آن ها دقت کنید:

<!DOCTYPE html>

<html>

<head>

<style>

body{direction:rtl;font-family:tahoma;}

.button {

  border-radius: 4px;

  background-color: #f4511e;

  border: 2px solid #f2f2f2;

  color: #FFFFFF;

  text-align: center;

  font-size: 17px;

  padding: 12px 10px;

  width: 80px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

  display:block;

}

.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}

.button span:after {

  content: ‘\00bb’;

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}

.button:hover span {

  padding-right: 15px;

}

.button:hover span:after {

  opacity: 1;

  right: 0;

}

.bg-red{background-color: #F44336;}

.bg-blue{background-color: #2196F3;}

.bg-purple{background-color: #9C27B0;}

.bg-green{background-color: #4CAF50;}

</style>

</head>

<body>

<a href=”#” class=”button”><span>دانلود </span></a>

<a href=”#” class=”button bg-blue”><span>دانلود </span></a>

<a href=”#” class=”button bg-red”><span>دانلود </span></a>

<a href=”#” class=”button bg-purple”><span>دانلود </span></a>

<a href=”#” class=”button bg-green”><span>دانلود </span></a>

</body>

</html>

 

 

کلیک

کلیک

 

 

توضیحاتی در مورد مثال قبلی

خب ما به لطف سی اس اس و اچ تی ام ال توانستیم پنج دکمه ی دانلود با پنج رنگ متنوع طراحی کنیم که هر کدام از آن ها هم با دیگری هم سایز و هم اندازه بودند. در این میان افکت کوچکی هم در میان آن ها قرار دادیم. به این صورت که وقتی موس را بر روی آن ها می بریم فلش های کوچکی ظاهر می شوند. و وقتی هم که موس را کنار می زنیم فلش ها هم کنار می روند. این یک روند تاکیدی در دانلود است که می تواند کاربر را به دانلود کردن تشویق نماید. حال بیایید ببینیم که از تگ button کدام یک از مرورگر ها پشتیبانی کرده و در اصطلاح آن را می شناسند؟

 از این تگ مرورگر هایی مانند اینترنت اکسپلورر و فایر فاکس و اپرا و سفری و در نهایت مرورگر کروم پشتیبانی می کنند. حال به این نکته می پردازیم که  باید همیشه ماهیت و کارکرد دکمه هایی را که می سازیم دقیقا مشخص کنیم. زیرا اگر این کار را انجام ندهیم. ممکن است مرورگر ما به صورت پیشفرض عملکردی را تعیین نماید. این ماهیت و کارکرد می تواند اعم از reset یا submit و یا button باشد. به طور مثال اگر دکمه ی شما برای این ساخته می شود تا اطلاعاتی را ارسال کند باید آن را با ماهیت submit معرفی کنید. مانند مثالی که در زیر آورده ایم:

<input type=”submit”>

 

 

 

 

در کنار تگ button چه صفاتی را می توان آورد؟

در کنار این تگ می توان صفات زیادی را آورد که در این جا به برخی از آن ها اشاره ای خواهیم داشت. برخی از آن ها در اچ تی ام ال 5 هم کاربرد دارند. اما سعی می کنیم کاربرد هر کدام از آن ها را در مقالات بعدی روشن کنیم. پس فعلا به صفاتی که در پایین اورده می شود توجه کنید:

Autofocus

Disabled

Form

Formaction

Formenctype

Formmethod

Formnovalidate

Formtarget

Name

Type

value

attribute در HTML

attribute در HTML چیست؟

attribute در HTML چیست؟ 793 403 نویسنده

از کاربرد attribute در HTML چه می دانید؟

کاربرد attribute در HTML مانند یک صفت است در یک انسان. یا یک ویژگی در یک ماشین. و یا چیزی در همین مایه ها. ما در اچ تی ام ال با تگ ها سر و کار داریم. و ممکن است به این تگ ها عنصر هم بگوییم. attribute در HTML هم می تواند به عنوان یک صفت برای اچ تی ام ال محسوب گردد. بنابر این می توان گفت که هر عنصر می تواند دارای چندین صفت باشد. زبان برنامه نویسی شده ی آن می شود این: هر Tag می تواند دارای چندین attribute در HTML باشد. حال ببینیم که کار هر کدام از این صفت ها در یک تگ چه می تواند باشد؟ کار آن ها القای یک خصیصه و ویژگی به تگ اصلی می باشد.

مثلا می گوییم فلان تگ حاوی فلان صفت هم هست و آن را دارد. در حقیقت این صفت ها هستند که تگ ها را کامل می کنند. به عنوان مثال می توانیم بگوییم که فلان تگ دارای فلان عرض و فلان مقدار طول می باشد. در مثال یگری می توانیم چنین بگوییم که می توان حتی ورودی های یک تگ را محدود نمود. آن هم به وسیله ی صفت ها.برای انجام این محدودیت می توان از پارامتری به نام maxlength هم استفاده نمود. پارامتر maxlength در این جا یک صفت به شمار می شود. که تعیین کننده ی مقدار ورودی و سقف آن می باشد.

ویژگی و خصیصه

ویژگی و خصیصه

جایگاه و اهمیت یک صفت در میان تگ ها چیست؟

بله. دقیقا آن قدر وجود attribute در HTML لازم می باشد که خیلی جا ها خود اچ تی ام ال بدون آن بی معنی خواهد بود. پس شناخت دقیق و کامل آن ها را برای یادگیری اچ تی ام ال باید سر لوحه ی کار خود نمایید. در واقع برای این که کارکرد هر نوع تگی را بتوانید به خوبی شناسایی کنید باید حتما بتوانید نقش صفت ها و attribute در HTML را به خوبی شناخته باشید. یک نکته ی جالب در مورد صفت ها در اچ تی ام ال وجود دارد. و آن این که دو حالت متفاوت در مورد عناصر و روابط آن ها با صفت ها وجود دارد. یکی این که هر صفت می تواند تنها متعلق به یک تگ باشد.

و دوم این که برخی از صفات می توانند به صورت مشترک بر دو عنصر و یا همان تگ اثر گذار باشند و شامل آن دو باشند. به صورت مثال style یکی از همان صفاتی است که می تواند به چندین تگ متعلق باشد. بنابر این موقعی که می خواهید برنامه نویسی اچ تی ام ال را به خوبی فرا بگیرید باید به خاطر داشته باشید که شناسایی این attribute در HTML و کارکرد آن ها بسیار حائز اهمیت می باشد. مانند این که یک attribute در HTML تنها مربوط به یک تگ می باشد؟ و یا می تواند به چندین تگ مربوط گردد؟ در قسمت بعدی یک مثال هم برای درک بهتر این موضوع برای تان خواهیم زد.

فرمول و نمونه ی کار برای ساختن یک صفت

برای این که بتوانید یک صفت را به تگی خاص اختصاص بدهید باید از فرمولی در همین راستا هم استفاده کنید. به مثال زیر توجه کنید:

<item optional=”1″></item>

خب همان طور که مشاهده می کنید. آیتم اشاره به تگی دارد که دوگانه می باشد. یعنی باید آن را باز و بسته نمود. کلمه ی optional هم اشاره به نوع صفت ما دارد. کمی پس از آن که با دابل کوتیشن عددی را آورده ایم. در واقع مقدار  آن صفت یا attribute در HTML را هم مشخص نموده ایم. و پس از همه ی این ها تگ را به صورت همیشگی بسته ایم. چرا ما معتقدیم که تا به این حد یک attribute در HTML دارای اهمیت می باشد. دلیل کاملا واضح می باشد. چون ما پیکره ی چیزی را در صفحه ی وب خود قرار می دهیم و می سازیم. اما از طرفی هم آن پیکره که همان تگ ما است بدون داشتن یک صفت معنا ندارد. دقیق تر که بخواهیم مثالی بزنیم به این صورت می شود:

” ما می گوییم درخت. خب درخت که به معنای خاصی اشاره ندارد. ما باید چه چیزی را از یک کلمه به تنهایی بفهمیم؟ زیرا منظور گوینده ممکن است هر نوع درختی با هر برگی باشد. تازه این هم معلوم نیست که آن درخت در کجا کاشته شده است؟ اندازه اش چه قدر است؟ آیا میوه می دهد؟ یا میوه دار نیست؟ آیا قلمه زده شده است یا خیر؟ اصلا آیا نیاز به رسیدگی ما را دارد یا خیر؟”

صفت ها نمایان گر بهتری از یک وضعیت موجود می باشند

 خب تمام سوالاتی که مطرح نمودیم می توانند به خودی خود یک صفت برای این درخت به حسای بیایند که با هر بار کامل تر شدن آن ها فهم ما از کلمه ی درخت بالا تر می رود و بیشتر می شود. به عنوان مثال وقتی بگوییم یک درخت با سیب هایی قرمز که در پنجاه و سه عدد سیب دارد و در منطقه ی شمال شرقی نهاوند قرار دارد قابل فهم تر است تا این که فقط بگوییم درخت. مثال واضح تر ما برمی گردد به مطلب قبلی که درباره ی قرار دادن ایمیج و یا همان عکس ها در یک صفحه ی وب بود. در آن جا ما صفتی را داشتیم به نام alt که قرار دادن این صفت برای ما باعث می شد تا بتوانیم در صورت عدم لود و یا بارگزار یک عکس حداقل توضیح آن را به راحتی بخوانیم.

 به صورت کلی وقتی می خواهیم یک صفت را در اچ تی ام ال به کار ببریم باید تگ را گشوده سپس صفت را درون آن بگنجانیم. و با زدن علامت مساوی = مقداری را هم برای آن تعیین کنیم. سپس تگ را می بندیم. در میان تمامی صفت هایی که ممکن است بتوانیم در زبان اچ تی ام ال به کار ببندیم چهار ویژگی خود نمایی می کنند. زیرا کاربرد بیشتری را دارند. این صفت ها شامل id و title و class و style می باشند. هر کدام از این ها کاربرد مخصوص به خود شان را دارند.

attribute

attribute

مثال هایی درباره صفت های رایج در این زبان

Lang در این جا به عنوان ” زبان ” شناخته می شود. Lang هم جزو همان خاصیت ها و صفت هایی می باشد که همواره نشان دهنده ی زبانی است که کاربر قرار است به وسیله ی آن با وب سایت ما در تعامل باشد. مانند انگلیسی و یا فارسی بودن. این صفت و یا ویژگی و خصیصهدر HTML را چنان که گفته شد در درون تگ ها به کار می بریم. دقت داشته باشید که از دیدگاه موتور های جستجو این بسیار مهم است که ما به خاطر کاربرانی که داریم از چه نوع زبانی در حال استفاده هستیم. مثلا اگر کاربران ما فارسی زبان هستند و ما اصرار داریم که از زبان انگلیسی در صفحات وب گاه خود استفاده کنیم.

گوگل ما را در نتایج معمولا پایین تر از رقبا نشان خواهد داد. حال این که خود گوگل چگونه تشخیص می دهد که کاربران ما فارسی زبان هستند یا خیر بحث مفصل دیگری را می طلبد. ما در اول کار باید کاملا مشخص نماییم که زبان وب سایت ما چه چیزی است. بیایید به مثال زیر که بار نسخه ی HTML5 نگارش شده موضوع را کمی بررسی کنیم:

<!DOCTYPE html>

<html lang=”fa-IR”>

<body>

<h1>تیتر</h1>

<p>پاراگراف</p>

</body>

</html>

همان طور که مشاهده می کنید در ابتدا مشخص کرده ایم که می خواهیم از نسخه ی پنجم اچ تی ام ال استفاده کنیم. سپس زبان سایت را تعریف نموده ایم. پیکره را گشوده ایم. یک عنوان با اندازه ی بزرگ انتخاب کرده ایم. پاراگرافی را هم قرار داده ایم. و در آخر پیکره را بسته ایم.

link

link

صفت های تایتل و href

در این قسمت هم با این دو صفت آشنا می شویم که هر یک به نوعی یک attribute در HTML می باشند. خب می دانیم که خود تایتل ها بدون هیچ پاراگرافی معنا ندارند. پس ما در اینجا به پاراگراف هم احتیاج داریم.  به مثال زیر دقت کنید:

<!DOCTYPE html>

<html lang=”en-US”>

<body>

<p title=”about OAP”>

oap is a programming training website

</p>

</body>

</html>

در این مثال هم می بینید که به صورت آزمایشی ابتدا نسخه ی مورد استفاده ی اچ تی ام ال را معرفی کرده ایم. سپس زبان را به انگلیسی تغییر داده ایم. پیکره بندی کرده و سپس یک تایتل و یا همان عنوان را ایجاد نموده ایم. نام عنوان ” about OAP”در سطر پایین تر هم به عنوان یک پاراگرا متنی را به زبان انگلیسی آورده ایم. و در آخر پیکره را بسته ایم.

پس از این کار به توضیح و نحوه ی قرار دادن یک صفت به نام href خواهیم پرداخت. ما تنها زمانی از href در تگ های مان استفاده می کنیم که بخواهیم توضیح لینک ها را تغییر دهیم. برای درک بهتر موضوع نگاهی به مثال پایین بیندازید:

<a href=”http://oap-it.com”>این یک لینک است</a>

درباره ی این موضوع در یک مطلب قبلا به صورت جداگانه ای توضیح داده بودیم. که می توانید به آن مراجعه نمایید.

عکس در HTML

چگونگی و نحوه قرار دادن عکس در HTML

چگونگی و نحوه قرار دادن عکس در HTML 1440 900 نویسنده

چه طور عکس در HTML قرار بدهیم؟

فکر می کنید وجود یک عکس در HTML چه قدر در میزان بازدید صفحه ای داشته باشد که ساخته شده است؟ شاید ندانید. اما مخاطبان اینترنت به اولین چیزی که معمولا نگاه و دقت می کنند عکس در HTML است. زیرا وجود یک عکس می تواند تقریبا گویای تمام مطالبی باشد که به خاطر آن ها به این صفحه ی وبی رجوع کرده ایم. ما معمولا به این صفحات سر می زنیم و چون آن قدر وقت نداریم تا بخواهیم تمام نوشته هایش را بخوانیم. تا متوجه شویم که آیا به درد ما می خورند یا خیر. ابتدا و قبل از هر چیزی به عکس های آن و تصاویر به کار رفته اش توجه می کنیم. و اغلب اگر عکسی را در یک صفحه ی وب نبینیم با خود می گوییم این صفحه مطالب قانع کننده ای هم برای ما ندارد.

بر عکس چنین چیزی هم ممکن است. یعنی زمانی که به یک صفحه مراجعه می کنیم و با عکس های بسیار جالبی در آن رو به رو می شویم. سپس می بینیم که نوشته ها و متون آن شاید به درد ما نخورند. می خواهیم بگوییم که معمولا اولین قضاوت ما در مورد مطالب و اطلاعات در یک صفحه ی وب مربوط می گردد به عکس هایی که در آن وجود دارند. اگر این عکس ها خوب به نظر برسند تصور می کنیم که متون آن هم خوبند. و اگر عکس های بی ربط و نا واضحی باشند به این نتیجه می رسیم که متن صفحه هم بد است.

رنگ ها

رنگ ها

کار بر پسند بودن و رابطه ی آن با عکس در HTML

یکی از مواردی که باعث می شود وجود یک عکس در HTML تا به این حد مهم جلوه کند. بحث کاربر پسند بودن آن می باشد. این که بگوییم یک صفحه به علاوه ی مطالب درون آن کاربر پسند هستند یا خیر به موارد و پارامتر های زیادی متکی می باشد. وجود چندین عکس در HTML هم می تواند یکی از این موارد باشد. اما به غیر از این ها می توان از پاراگراف بندی مطالب نیز نام برد. اگر یک مطلب پاراگراف بندی و عنوان بندی مناسبی را نداشته باشد. باعث خستگی دید کاربران می گردد. حال تصور کنید که به سایتی وارد می شوید که تنها یک عنوان و یک ستون خیلی طولانی از نوشته ها وجود دارد که سردرگم کننده هستند. چه قدر زمان می برد تا از آن صفحه بیرون بیایید؟

هنوز هم این نوع قرار دادن مطلب در برخی از وبلاگ ها و وب سایت های خارجی را شاهد هستیم. میزان کم یا زیاد بودن پارامتر کاربر پسندی به دو چیز بستگی دارد. یکی این که در طول روز چه قدر توانسته ایم کاربران جدیدی را جذب وب سایت خود کنیم. و دوم این که هر کدام از این کاربران چه مدت زمانی را در صفحه ای که آمده اند مانده اند. وجود تعدادی عکس در HTML می تواند به هر دوی این موارد کمک کند. یعنی هم باعث ورود کاربر جدید می شود. و هم کاربر را در وب سایت نگه می دارد. یعنی سرگرم دیدن عکس می گردد.

حالا چه طور می توان عکس در صفحه وب قرار داد؟

خب بر طبق آن چه که تا کنون درباره ی تگ ها گفته ایم. می توان به راحتی حدس زد که قرار دادن عکس ها هم خودش نیاز به فن تگ گذاری دارد. ما به آن تگ ایمیج و یا همان <img> می گوییم. و اگر بخواهید تگ مخصوص به آن را بنویسید. باید به صورت زیر عمل کنید:

<img src=”url”>

طریقه ی باز و بستن این تگ و این که چگونه آدرس آن را می دهیم کمی با تگ های دیگر تفاوت دارد. اولین تفاوت آن در این می باشد که در کل تگ تنها یک بار علائم باز و بسته کردن تگ را که شامل < و > هستند می آوریم. دوم این که در هنگان بستن تگ بر خلاف موارد قبلی که یاد گرفته بودیم نیازی به اسلش رو به جلو یا / نداریم. و سوم این که به جای یو آر الی که در بالا مشاهده می کنیم. آدرس عکس را در میان دو دابل کوتیشن قرار می دهیم.

در این جا scr برای ما نماد یک شی فلت می باشد که ما آن را عکس می نامیم. پس نوشتن آن هم ضروری می باشد. ما به تگ عکس در اچ تی ام ال تگ تکی هم می گوییم. زیرا همان طور که گفته شد مانند تگ های دیگر دو قسمتی نیست. در قسمت بعدی سه مثال برای سه فرمت از عکس های JPG و  GIF و PNG خواهیم آورد تا بهتر بتوان درک نمود.

مثال برای درک بهتر

به عنوان اولین نمونه می خواهیم طریقه ی قرار دادن یک عکس با فرمت گیف ” Gif” را در یک صفحه ی وب بیاوریم. لطفا به طریقه ی نوشتن آن توجه کنید:

<body>

<img src=”http://oap-it.com/html/html_color/images/loader.gif”>

</body>

چنان که ملاحظه فرمودید از تگ باز و بسته ی body هم برای این کار استفاده نمودیم. و تگ ایمیج را در میان آن قرار دادیم. و اما به عنوان مثال و نمونه ی دوم می ریوم به سراغ فرمت png که طریقه ی قرار دادن آن هم به همین شیوه می باشد:

<body>

<img src=”http://oap-it.com/html/html_color/images/loader.gif”>

</body>

این مثال ها در مورد قرار دادن فرمت عکس JPEG هم کاملا صادق هستند. اما قرار دادن عکس در صفحه ی وب یک سر کار می باشد. طرف دیگر آن قرار دادن خصیصه ی alt در عکس ها است. ما این خصیصه را به عنوان ” یک تعریف کلی” از عکسی که می خواهیم در صفحه قرارش بدهیم می دانیم. یعنی چه؟ ی

عنی اگر تحت هر شرایطی عکس ما در صفحه نمایش داده نشد و یا کاربر ما نتوانست آن را ببیند به واسطه ی این خصیصه بتواند بفهمد که عکس درباره ی چه چیزی بوده است. البته زمانی هم که یک صفحه در حال لود شدن و بارگزاری می باشد. کاربر قبل از این که خود عکس را بتواند ببیند این خصیصه را می تواند ملاحظه نماید. در قسمت بعدی درباره ی این خصیصه بیشتر خواهیم گفت. و طریقه ی قرار دادنش را هم بررسی می کنیم.

alt

alt

چرا و چگونه باید صفت alt را به عکس ها اضافه نمود؟

ما در قسمت قبل چند دلیل برای این که چرا باید از خصیصه و صفت alt استفده نمود را آوردیم. اما یکی از مهم ترین این دلایل این است که افراد نا بینا هم از این مورد نفع می برند. به چه صورت؟ به این صورت که آن ها می توانند از نوع خاصی از مرورگر ها استفاده کنند که مطالب یک صفحه ی وب را برای آن ها بخواند. در این حالت چون نمی توانند عکسی را که ما در آن صفحه قرار داده ایم ببینند. مرورگر خودش به جای آن، صفتی را برای آن ها می خواند که ما به عنوان alt عکس نوشته بوده ایم. حال به مثال زیر هم توجه کنید تا طریقه ی قرار دادن این صفت را هم ببینید:

<body>

<img src=”images/apples.jpg” alt=”درختی پر از سیب های قرمز “>

</body>

خب چنان که مشاهده نمودید پس از قرار دادن آدرس عکس کلمه ی alt را هم نوشتیم و آن را درست برابر عبارت ” درختی پر از سیب های قرمز” قرار دادیم. تا به این ترتیب کاربر وب سایت ما ماهیت عکس را هم به خوب مشاهده نماید. در این میان صفات دیگری هم که برابر با مقیاس ها و اندازه های عکس در HTML می باشند هم وجود دارند. که ما به آن ها Width و Height می گوییم. در قسمت بعد هم در مورد این صفت ها صحبت می کنیم. پس با ما همراه باشید.

مقیاس و اندازه

مقیاس و اندازه

به کار بردن مقیاس ها و صفت های Width و Height

فارغ از این که اندازه ی خود عکس ما چه قدر می باشد. می توانیم خود مان اندازه ی عکس در HTML را تنظیم نماییم. البته به واحد پیکسل که مخفف شده ی آن می شود px. حال به مثال زیر توجه کنید. ما در این مثال از این مقیاس ها استفاده نموده ایم:

<body>

<img src=”images/apples.jpg” width=”300″ height=”400″>

</body>

ماجرا به همین جا ختم نمی شود. و می توانیم برای تعیین اندازه ها و مقیاس بزرگی و یا کوچکی یک عکس از صفت دیگری به نام استایل هم استفاده کنیم. لاتین آن می شود Style. به مثال زیر توجه کنید. این بار از طریق صفت Style اقدام به تعیین سایز عکس در HTML می کنیم:

<body>

<img src=”images/apples.jpg ” style=”width:300px; height:400px;”>

</body>

در مقاله ی قبلی اشاره ای داشتیم به این که چگونه می توان تصاویر لینک دار را ایجاد نمود. پس از توضیح مجدد آن در این بخش خودداری می کنیم. به جای آن چگونگی درست کردن Image Maps یا همان نقشه ی تصویری را خواهیم گفت. به صورت کلی نقشه ی تصویری یعنی یک عکس در HTML که هر قسمت از آن به صورت جداگانه لینک دهی به جای خاصی شده باشد. در این جا از تگ دیگری به نام تگ <map> استفاده می کنیم. برای این کار داخل خود تگ ایمیج صفتی با عنوان usemap را می آوریم. در مقاله ی بعدی نحوه ی کامل قرار دادن چنین تگی را به صورت کامل بررسی خواهیم نمود.

قرار دادن لینک در HTML

قرار دادن لینک در HTML

قرار دادن لینک در HTML 1920 1011 نویسنده

روش قرار دادن لینک در HTML

در مقاله های قبلی مطالب زیادی را پیرو استفاده از انواع تگ ها در اچ تی ام ال گفته ایم. حالا در این مقاله می خواهیم نحوه ی قرار دادن لینک در HTML را با هم بررسی کنیم. همان طور که می دانید زبان اچ تی ام ال یک زبان تحت وب برای پیکره بندی صفحات وب می باشد. در جریان این فرایند لینک دهی هم کاملا معمول می باشد. یعنی وقتی می خواهیم یک صفحه ی تحت وب را پیکره بندی کنیم. یکی از ملزومات آن هم حتما لینک دادن خواهد بود. در حقیقت تقریبا این گونه هرگز اتفاق نخواهد افتاد که شما یک صفحه ی وب را بسازید. و هیچ گونه لینکی را هم در آن قرار ندهید. در خالی ترین صفحات هم حداقل یک لینک را نیاز خواهید داشت.

پس می توان قرار دادن لینک در HTML را هم تراز با سایر اکشن هایی در وب دانست که به صورت پایه ای و بیسیک عنوان می شوند. تگ هایی مانند تگ body و paragraph را پایه ای بیان می کنیم. با این حساب قرار دادن لینک در HTML را هم باید پایه ای بدانیم. زیرا خیلی به انجام آن نیاز داریم. حداقل فرایند لینک دهی مربوط می شود به فوتر هایی که در آن ها نام قسمت های دیگری از وب سایت خود مان و یا وب سایت های دیگر را قرار می دهیم. این وب سایت ها می توانند وب سایت های همکار و دوست مان باشند.

اتصال صفحات به هم

اتصال صفحات به هم

خیلی از اوقات کار خاصی انجام نمی دهیم

خب شاید کمی عجیب به نظر برسد. اما با توجه به چیز هایی که بیان شد کد نویسی خاصی در مورد قرار دادن لینک ها در فوتر انجام نمی شود. و تنها کافی است که آدرس های سایت ها و یا صفحه ی مورد نظر خود مان را به همراه سایر المان ها قرار بدهیم و تمام. و در یک چشم به هم زدن تمام این اطلاعات در قسمت فوتر وب سایت ما قرار داده می شوند. بدون این که ما اقدام به نوشتن کد خاصی کرده باشیم. ولی با تمام این اوصاف همیشه خروجی کار ما به صورت کد هایی آن هم از نوع اچ تی ام ال خواهد بود. پس باید حتما طریقه ی قرار دادن آن ها را در صفحات وب بدانیم. ما می توانیم از راه های زیادی برای قرار دادن لینک در صفحات وب خود استفاده کنیم.

 یکی از این روش ها و راه ها می تواند استفاده از تگ href و a باشد. این دو ( href و a) به نوعی مکمل هم هستند. و هر کدام از آن ها نمایان گر یک کلمه و یا یک عبارت مخصوص به خود می باشند. برای مثال حرف a مخفف شده ی کلمه ی anchore می باشد. به معنای لنگر گاه. و خود href نیز مخفف شده ی دو کلمه ی Hypertext Reference می باشد. به معنای مرجع هایپر تکست می باشد. دقیق ترش را که بخواهیم بررسی کنیم. هایپر تکست یعنی ابر متن. اما یعنی چه؟ صبر کنید به آن هم می رسیم.

کمی هم از هایپر تکست و هایپر لینک بدانیم

خب در قسمت گذشته گفتیم که هایپر تکست به معنای ابر متن می باشد. اما خود این هایپر تکست شامل یک hyperlink می شود. ما هایپر لینک را به معنای متن الحاقی برداشت می کنیم. خب حالا که موضوع تا به این جا کمی روشن شد. بیایید طریقه ی لینک گذاشتن را با توجه به چیز هایی که گفته شد ببینیم:

<a href=” http://oap-it.com”>لطفا کلیک کنید</a>

به ساختار این تگ نگاه کنید. درست همان گونه که دیگر تگ ها را باز و بسته می کردیم. این تگ را هم ابتدا می گشاییم. عبارات مان را داخل آن درج می کنیم. و سپس آخر آن را با اضافه کردن یک اسلش رو به جلو می بندیم. این تگی که نوشته ایم شامل دو قسمت است. در قسمت href آدرس مورد نظر مان را می نویسیم. و قسمت دوم شامل همان نوشته ای است که کاربر به جای دیدن آدرس خواهد دید. تنها چیزی که باید به خاطر بسپارید این است که در حالت عادی اگر روی چنین لینکی کلیک شود.

صفحه ی مورد نظر ما دقیقا در همین صفحه باز خواهد شد. نه در پنجره ی دیگر و نه در تب دیگر. درست در همین صفحه و جایگزین صفحه ی فعلی خواهد شد. اما می توان کاری کرد که این روال تغییر کند. و در صفحه ی جدیدی باز شود.

تمرکز لینک ها

تمرکز لینک ها

چگونه برای لینک مان یک عنوان دلخواه بنویسیم؟

یکی از ویژگی های زیر شاخه ای مربوط به تگ a قرار دادن عنوان و یا همان title می باشد. می توانید از تایتل ها در روند لینک گذاری استفاده نکنید. ولی معمولا استفاده از آن ها می تواند برای سئوی سایت کمی کاربرد داشته باشد.

<a href=” http://oap-it.com” title=”این یک لینک است”>کلیک کنید</a>

توجه داشته باشید که در هنگام گشودن تگ با فاصله اول حرف a و سپس href را تایپ می کنیم. اما وقتی که می خواهیم همین تگ را ببندیم تنها بعد از اسلش حرف a را خواهیم نوشت. از این ها که بگذریم. کمی قبل تر گفتیم که می توان لینک ها را در صفحه ی جدید تری باز نمود. اما چطور می توان چنین دستوری را اجرا نمود؟ ما برای برقراری شرایط باز شدن لینک در صفحه و پنجره ی جدید از پارامتر دیگری به نام تارگت ” target” استفاده می کنیم. حال به مثال زیر توجه کنید تا ببینید چه طور می توان این کار را انجام داد:

<a href=” http://oap-it.com” title=”این یک لینک است” target=”_blank”>کلیک کنید</a>

خب blank به معنای جای خالی می باشد. که اشاره دارد به صفحه ای جدید. پس از این که دستور دفعات قبلی را تایپ کردیم. در قسمت آخر آن یک دابل کوتیشن جدید باز می کنیم و این بار عبارت target را تایپ نموده و سپس مساوی می گذاریم. و در نهایت کلمه ی blank را با یک خط فاصله در قبل از آن قرار می دهیم. خب حالا ما خیلی ساده فرمان داده ایم که کاربر مان هر گاه بر روی عبارت ” کلیک کنید” زد، به صورت خودکار لینک مربوط را در یک صفحه ی خالی و جدید باز کند.

سایر پارامتر هایی که می توانید استفاده کنید

  • می توانید از parent_ برای نمایش لینک در یک فریم استفاده کنید.
  • self_ برای زمانی استفاده می شود که بخواهید لینک در همین صفحه باز شود.
  • تصور کنید که ما چندین فریم در داخل یک صفحه داریم. وقتی از پارامتر top_ استفاده می کنیم. در واقع می خواهیم که محتوای یک لینک در سطح بالای تمام آن ها نمایش داده شود.

حتی می توان کاری کرد که لینک ما صورت نمایشی عکس مانندی را داشته باشد. تا به این جا تمام چیز هایی را که گفتیم. متعلق به زمانی بودند که وقتی روی یک تکست کلیک می کنیم لینکی باز شود. حالا می خواهیم ببینیم وقتی روی یک عکس بخواهیم کلیک کنیم هم آیا می توان چنین امری را انتظار داشت؟ بله. برای این کار از تگ دیگری به نام تگ img استفاده می کنیم.

قرار دادن لینک در HTML

عکس ها و لینک ها

استفاده از تگ img و موارد مربوط به آن

ما گفتیم که می توان از تگی برای الحاق و وصل کردن یک عکس استفاده کرد. حالا برای فهم بهتر مثالی می زنیم. به نمونه ی زیر توجه کنید:

<a href=”http://oap-it.com” title=”این یک لینک است” target=”_blank”><img src=”image/your-img.jpg” alt=”your-alt”  width=”100″ height=”100″></a>

به قسمت بعد از دستور _blank دقت کنید. دستور img را آورده ایم با اسکرینی که در ادامه ی آن وجود دارد. ساز های طول و عرض عکس را به همراه نام آن مشخص نموده ایم. خصیصه ی alt را هم آورده ایم. و در پایان تگ لینک را می بندیم. به این صورت هر گاه کاربر بر روی این عکس با این ویژگی ها کلیک نماید. صفحه ی جدیدی برای او همراه با مطالب جدید باز خواهد شد. البته ذکر این نکته نیز واجب می نماید که بعضی از مرورگر ها چنین طراحی شده اند که اگر لینکی را به یک عکس الحاق کنید. کنار آن عکس را متمایز نمایش می دهند. شاید شما نخواهید چنین کناره و حاشیه ای برای شما و کاربر تان نمایش داده شود.

در این صورت راه کار چیست؟ برای حل این مشکل و عدم نمایش چنین حاشیه ای می توان از خصیصه ای دیگر به نام border استفاده کرد. به این صورت که مقدار border را باید بر روی صفر تنظیم نمود. اما بهتر از آن این است که در این جا دیگر از سی اس اس کمک بگیرید. همه ی این ها به کنار آیا برای تان این سوال پیش نمی آید که چگونه می توان رنگ ها و سایز لینک ها را هم تغییر داد؟ ممکن است دیده باشید که وقتی ماوس را بر روی یک لینک می بریم. اندازه و رنگ آن لینک تغییر می کند. این اتفاق ناشی از عملیاتی می باشد که با سی اس اس صورت می پذیرد. چرا که با سی اس اس می توان به سادگی هم رنگ و هم اندازه ها را تغییر داد.

پاراگراف در HTML

پاراگراف در HTML چگونه تعریف می شود؟

پاراگراف در HTML چگونه تعریف می شود؟ 732 265 نویسنده

نحوه ایجاد پاراگراف در HTML

پاراگراف در HTML چگونه تعریف می شود؟ در این مقاله قصد داریم به چگونگی تعریف و ایجاد یک پاراگراف در HTML بپردازیم. ما در قسمت های گذشته گفتیم که خود زبان اچ تی ام ال یک زبان پیکره ساز برای صفحات وب محسوب می شود. همین طور گفتیم که اچ تی ام ال زبانی است که توسط آن می توانیم هر المان را که بخواهیم. توسط یک خط کد کوتاه شده به نام تگ به نمایش در آوریم. یکی از کار هایی هم که می توانستیم با استفاده از این تگ ها انجام دهیم همین پاراگراف در HTML بود. ما تگ های پاراگراف را در اچ تی ام ال با نام P می شناسیم. به صورت کلی پاراگراف ها دسته بندی متن ها با یک قالب منظم می باشند.

که گاهی از اوقات به آن ها بلوک متنی هم گفته می شود. و ضمنا هر کدام از این پاراگراف ها یا هر چه که اسمش را بگذارید. توسط یک خط از بخش قبلی و بعدی جدا می شوند. درست مانند همین متنی که الان در حال خوانش آن هستید. این را هم یک پاراگراف می گوییم. وقتی پاراگراف ها تعداد کلمات شان از حدی بگذرد باید بسته شوند. و در سر خط بعدی پاراگراف دیگری را شروع کنیم. التزام به این موضوع می تواند باعث شود که خوانایی مطالب بهتر باشد. و خواننده ی مطالب هم با آن ها مشکل کمتری را پیدا کند.

paragraph

paragraph

چه طور یک پاراگراف در HTML درست کنیم؟

گفتیم که در اچ تی ام ال پاراگراف بندی را با p نمایش می دهیم. در مقاله های گذشته هم که گفته بودیم که وقتی می خواهیم یک تگ را باز کنیم از علامت <…> و وقتی هم که می خواهیم تگی را ببندیم از همین علامت به علاوه ی یک اسلش استفاده می کنیم. مانند این شکل <…/> در جای نقطه چین هم که علامت مورد نظر مان را قرار می دهیم. با این حساب ایجاد یک بلوک متنی یا همان پاراگراف باید به شرح زیر باشد:

<p>متن مورد نظر ما در وب سایت<p/>

 <p>پاراگراف دوم ما در وب سایت <p/>

خب بعد از انجام چنین فرایندی خود مرورگر ها می فهمند که باید قبل از این بلاک متنی و بعد از آن یک فضای خالی را درست کنند. تا به این صورت یک پاراگراف به وجود بیاید. زیرا همان طور که می دانید ما پاراگراف را در متون به مجموعه نوشته های منتظمی می گوییم که یک فاصله قبل و بعد از آن وجود داشته باشد. این نظم داشتن و همچنین دارا بودن فضای خالی به ما کمک می کند تا مطالب را در آن صفحه ی وب بهتر بتوانیم بخوانیم. در این میان نکته ی جالبی را که باید بدانید این است که اگر بین کلمات چند تا تب و یا فاصله هم قرار بدهید، اچ تی ام ال همه ی آن ها را تنها یک فاصله خواهد دانست.

ذکر مثال در مورد فواصل کلمات در پاراگراف ها

خب ما گفتیم که هر چه قدر هم که ما بین کلمات فضای خالی ایجاد کنید. خود اچ تی ام ال همه ی آن ها را یک فاصله می بینید و همان طور هم نشان تان می دهد. مانند مثال زیر:

” در            وب سایت OAP مبانی کد نویسی            را از صفر تا      صد خواهید آموخت.”

چیزی که در بالا می بینید مانند نمونه ای است که در کد نویسی می آوریم. اما خروجی کار به صورت زیر خواهد بود:

” در وب سایت OAP مبانی کد نویسی را از صفر تا صد خواهید آموخت.”

یعنی همین قدر جمع و جور و شسته و رفته. بنابر این جای تعجب نیست اگر چندین فاصله در بین کلمات خود زدید و موقع خروجی گرفتن تنها یک فاصله دیدید. این مکانیزم اچ تی ام ال می باشد. حال مثال مان را در قالب چند خط کد بهتر بیان می کنیم. به نمونه ی زیر توجه کنید:

<p>

آموزش پاراگراف در HTML

</p>

<p>

آموزش                      پاراگراف در HTML

</p>

البته باید کم کم در این زبان عادت کنید که هر گاه تگی را باز کردید حتما هم باید آن را خود تان ببندید. آن هم به شیوه ای که در قسمت های گذشته گفته شد. ما گفتیم که طریقه ی بستن یک تگ درست همانند باز کردن یک تگ در اچ تی ام ال می باشد. با این تفاوت که در هنگام بستن تگ از یک اسلش رو به جلو هم استفاده می کنیم. مانند </P>

نقطه سر خط

خب حالا که ما طریقه ی ایجاد پاراگراف در HTML را به صورت خیلی ساده ای بیان نمودیم. حال این سوال پیش می آید این پاراگراف را چگونه می توان تمامش کرد؟ یعنی اگر بخواهیم نقطه سر خط را انجام بدهیم چگونه باید کد نویسی کنیم؟ آیا این هم تکه کد خاصی دارد؟ آیا تگ مخصوصی برای این کار وجود دارد؟ بله. دقیقا تگی مخصوص وجود دارد که در دسته بندی های ما معروف است به دسته ی تگ های تکی. اگر مطلب قبلی ما را با عنوان آموزش تگ های HTML خوانده باشید. حالا دیگر می دانید که در آن قسمت گفته بودیم تگ ها بر اساس یک دسته بندی خاص به انواع قابل بستن و تگ های تکی تقسیم می گردند.

تا به این جا ما فقط به آموزش تگ های قابل بستن پرداخته ایم. تگ هایی که پس از باز کردن شان حتما باید می بستیم. تا کد ما تمام شود. اما هیچ گاه این را هم نگفتیم که خیلی از تگ ها هم در این میان هستند که نیازی به بسته شدن ندارند. تنها یک اشاره ی کوچک به تک لینک کرده بودیم. اما تگ تکی دیگری هم در این میان داریم. که وظیفه ی آن همان شکستن خطوط می باشد. یعنی همان نقطه سر خط. که آن را با <br> نمایش می دهیم. این دو حرف مخفف کلمه ی break می باشند. یعنی شکستن می باشند.

نمایش یک مثال برای شکستن خطوط

همان طور که در قسمت قبل از آموزش پاراگراف در HTML گفتیم. برای شکستن خطوط یا همان نقطه سر خط خود مان باید از یک تگ دیگر به نام <br> استفاده کنیم. تا بتوانیم به خط بعدی برویم و نوشته ی دیگری را از سر بگیریم. این تگ در میانه ی تگ پاراگراف در HTML هم می تواند باشد. مانند مثال زیر:

<p>وب سایت<br>OAP<br>مرجع آموزش کدنویسی به زبان ساده</p>

همان طور که در مثال بالا مشاهده می کنید. ما هر بار که <br> را می آوریم نوشته ها شکسته شده و به خط بعدی منتقل می گردند. با این حساب باید بعد از نوشتن چنین کدی خروجی کار را به صورت زیر ببینید:

show

show

دفعه ی اول پس از گشودن یک تگ پاراگراف در HTML نوشتیم “وب سایت”. یک بار با دستور <br> به خط بعدی رفتیم. سپس در خط بعدی کلمه ی ” OAP” را نوشتیم. دوباره تگ <br> را مورد استفاده قرار دادیم. و به خط سوم رفتیم. در پایان عبارت ” مرجع آموزش کدنویسی به زبان ساده” را هم نوشتیم. و این بار تگ پاراگراف در HTML را کلا بستیم. اگر نخواهیم به هر دلیلی از تگ مستقل <br> استفاده کنیم. و فکر کنیم که با زدن Enter می توانیم خطوط را بشکنیم و سر خط بعدی برویم. کار درست از آب در نخواهد آمد. به این صورت که تمام جمله ی ما به صورت سر هم در اچ تی ام ال نمایش داده خواهد شد.

چگونه نوشته ها را به صورت زیر هم بیاوریم؟

اگر می خواهید مانند آن چه که در بالا گفته شد مشکل برای شما به وجود نیاید. می توانید از تگ جدید تری به نام <pre> هم استفاده کنید. در قسمت قبلی گفتیم که اگر <br> را به کار نبریم تمام نوشته ها پشت سر هم قرار می گیرند. به مثال زیر توجه کنید:

<p>

وب سایت

OAP

مرجع آموزش کدنویسی به زبان ساده

</p>

در این صورت نوشته ها به صورت پی در پی و در نتیجه بی معنا خوانده می شوند. که می توانید نتیجه ی آن را در عکس زیر هم مشاهده کنید. اما برای این که به چنین مشکلی بر نخوریم. می توانیم از همان تگ <pre> استفاده کنیم. تا با هر با Enter زدن واقعا تمام کلمات را به صورت زیر هم به ما نمایش بدهد. مانند مثال زیر:

<pre>

وب سایت

OAP

مرجع آموزش کدنویسی به زبان ساده

</pre>

حالا دیگر وقتی که تگ <pre> را به کار می بریم نوشته ها به صورت زیر هم زیر هم نمایش داده می شوند. خب در این مقاله چه چیز هایی را یاد گرفتیم؟ این که هر شروعی یک پایانی هم دارد. پس هر زمان که تگی را باز می کنید. حتما باید انتهای آن را هم ببندید. البته ممکن است چند بار فراموش کنید و یا عمدا یک تگ را نبندید. و اتفاقا هیچ ایرادی هم به وجود نیاید. اما مشکل زمانی به وجود خواهد آمد که به صورت اشتباه یک تگ بسته شده به عنوان پایان تگ شما در نظر گرفته شود. که در این صورت شاهد بروز خطا خواهید بود. بنابر این بهتر این است که تمام تگ های دو قسمتی را حتما ببندید.

آموزش 0 تا 100 HTML

آموزش 0 تا 100 HTML

آموزش 0 تا 100 HTML 300 300 نویسنده

آموزش 0 تا 100 HTML

در این مقاله به آموزش 0 تا 100 HTML خواهیم پرداخت. و آن چه که در این مقال نگنجد را موکول خواهیم نمود به مقاله های بعدی. برخی اچ تی ام ال را یک نوع زبان برنامه نویسی نشانه گذاری می دانند. چرا که با توسل به آن می توان قسمت های متفاوتی را از هم جدا نموده و نمایش داد. در حقیقت ممیز نمودن هر بخش در این زبان بسیار آسان می نماید. با این حساب می توان به راحتی قسمت های متنوع یک صفحه ی وب را به خوبی از یک دیگر جدا نموده و بر روی هر کدام هم به صورت کاملا جداگانه کار کرد. برای این هم که بتوانید با این فریم ورک به خوبی کار کنید. اول باید بتوانید مفهوم تگ ها را به خوبی بشناسید.

که در همین وب سایت به طور مفصلی به آن اشاره شده است. خوب است که بدانید بر خلاف باور عموم این زبان تحت وب اصلا هم زبان سختی نیست. و می تواند پایه ای باشد برای پیشرفت روند کاری ما در آینده. برای طراحی و ساخت وب سایت ها. این مهم است که حتما این زبان را بیاموزید. اما به تنهایی اصلا کفایت نمی کند. زیرا زبان اچ تی ام ال بیشتر بر روی پیکره بندی یک صفحه ی وب کار می کند. اما به درد این نمی خورد که بخواهیم قابلیت یا ویژگی خاصی را بر روی وب سایت خود پیاده سازی کنیم.

HTML

HTML

مفهوم پاراگراف و ایجاد آن

مانند سایر موارد دیگر این پاراگراف نیز خودش با یک نوع تگ به وجود می اید. و اصولا جزو تگ هایی می باشد که بیشترین کاربرد را برای ما دارند. وجود این تگ برای این است که ما بتوانیم متن مان را در درون آن بنویسیم. و طریقه ی نگارش آن نیز به صورت زیر می باشد:

<p></p>

اولین پی که نوشتیم برای باز کردن تگ و دومین آن ها هم برای بستن تگ به کار برده می شود. و هر چه که در میان این دو بیاید در وب سایت و صفحه ی وب ما نمایش داده می شود. پس از این قسمت به سراغ تگ عنوان ها و تیتر ها می رویم. مانند تگ H1 و H2 و غیره. بیایید ببینیم که این تگ ها چگونه به وجود می آیند؟ ما هیچ وقت عنوان نوشته ها را با متن های آن ها یکی نمی دانیم. پس با این حساب باید از یک تگ مربوط به خودشان استفاده کنیم.

به صورت کلی ما به تگ های تیتر و عنوان هدینگ یا heading نیز می گوییم. ما به صورت کلی تنها شش سایز هدینگ داریم. که از یک شروع می شوند. و تا شش ختم می گردند. و بسته به این که به کدام یک از آن ها نیاز است از آن ها استفاده می کنیم. مثلا وقتی می خواهیم متنی را شروع کنیم همیشه از بزرگ ترین تگ مانند تگ H1 شروع می کنیم. و کوچک ترین آن ها مربوط می شود به مطالبی که از اهمیت کم تری برخوردار هستند.

نمایش تگ تایتل و عنوان

برا این که بتوان آموزش 0 تا 100 HTML را انجام داد. باید تگ های عنوان و تیتر ها را هم بیاموزیم. طبق مراحل قبلی ما تگ مورد نظر خود را ایجاد نموده و عنوان مورد نظر مان را در میان آن ها قرار می دهیم. درست مانند آن چه در زیر مشاهده می کنید:

<h1> title </h1>

تگ اچ یک را باز می کنیم. دوباره می بندیم. با این تفاوت که در هنگام بستن تگ مورد نظر خود همیشه از یک اسلش استفاده می کنیم. و در نهایت در میان هر دوی آن ها عنوان مورد نظر مان را می نویسیم. و همانند آن چه که در قسمت قبلی توضیحش را دادیم. بسته به این که دقیقا از چه نوع تگی با چه سایزی استفاده کنیم. عنوان نوشته های ما هم بزرگ و کوچک خواهد بود. تگ های بسیاری وجود دارند که می توان از هر کدام از آن ها استفاده کرد. که بعدا در جای خود شان به هر یک خواهیم پرداخت. ولی سی اس اس به عنوان یک کمک کننده به ما وسعت عمل بیشتری را برای طراحی وب می دهد.

برای همین هم در قسمت بعدی به سی اس اس ها خواهیم پرداخت. گر چه ممکن است به لحاظ ظاهری ربطی به این آموزش نداشته باشند. اما وجود شان به عنوان بخشی از آموزش 0 تا 100 HTML الزامی می باشد.

CSS و HTML در کنار هم معنا دارند

اچ تی ام ال برای خود مکملی دارد به نام سی اس اس. اگر بخواهیم یک مثال به جا برای شما بیاوریم. می توانیم این دو زبان را به پیکره بندی یک ساختمان تشبیه کنیم. به این صورت که ما اچ تی ام ال را بدنه ی ساختمان و سی اس اس را نمای بیرونی آن می دانیم. توجه داشته باشید که هر کدام از آن ها بدون دیگری معنای خاصی ندارند. و با یک دیگر است که انسجام پیدا می کنند. عنوان کلی ای که می توان برای فایل های ایجاد شده توسط اچ تی ام ال به کار برد index.html می باشد. و به همین ترتیب عنوان کلی ای هم که می توان برای فایل های سی اس اس به کار برد style است.

هر دو را می توان در درون یک فایل نوت پد ویندوز ساخت و نگارش کرد. و در آخر هم با پسوند مربوط به خود شان ذخیره نمود. به عنوان مثال برای ذخیره ی اچ تی ام ال از همین پسوند یعنی .HTML و برای ذخیره نمودن سی اس اس هم می توانیم از همین پسوند با عنوان .CSS استفاده کنیم. هر دوی فایل های ایجاد شده باید در کنار هم باشند تا بتوانند ساختار کلی یک صفحه ی وب را برای ما ترسیم کنند. و برای اجرای آن ها نیز می توانیم از یک مرور گر استفاده کنیم. تگ ها بعضا به دو صورت هستند باز و بسته و تگ یک سره.

tag

tag

تگ یک سره دیگر چیست؟

وقتی تگی را باز می کنیم باید دوباره آن را ببندیم و مطلبی را که می خواهیم در داخل آن دو قرار بدهیم. اما در این میان تگ هایی هم وجود دارند که به خودی خود بسته هستند. مانند تگ <link> که جزو تگ های بسته می باشد. و نیازی هم به بستن ندارد. در چنین تگی بستن در کار نیست. و هر چه لازم باشد را باید در همان قسمت و بعد از خود کلمه ی لینک بنویسیم. چیز هایی مانند rel و type و href که هر کدام کار کرد خود شان را دارند. ما در اصطلاح به این مدل چیز ها که در یک تگ بسته مانند تگ لینک می آیند. صفت می گوییم. یعنی یک سری صفت را به یک لینک اختصاص می دهیم. به طور مثال صفت rel همان مخفف شده ی کلمه ی relation می باشد.

و کارش توضیح دادن مسیر مبداء و مقصد یک صفحه می شود. اشتباه نوشتن و یا اصلا ننوشتن relation تبعات خاص خودش را دارد. به طور کلی برنام نویسی ظرافت های خاص خودش را دارا می باشد. و باید حواس مان را در این موارد جمع کنیم. کلمه و صفت بعدی type می باشد که جنس فایل ما را می رساند. یعنی ممکن است جنس این فایل تکست باشد. یا هر چیز دیگری. در مورد type باید گفت که اهمیت آن به اندازه ی rel یا relation نیست. در قسمت بعدی به href هم اشاره خواهیم نمود.

href

href

سایر دستورات و بخش ها

خب در قسمت قبلی href مانده بود که در این جا توضیحش می دهیم. کار href توضیح دادن آدرس فایل ما می باشد. به خاطر داشته باشید که در صفت href ما هم می توانیم تنها اسم فایل را توضیح دهیم و آدرسی از آن را نیاوریم. و هم می توانیم آدرس را به صورت کامل بیاوریم. و این که دقیقا در کدام پوشه موجود می باشد. اگر فقط اسم خود فایل را بیاوریم که به خارج از محیط لینک رفته و به دنبال چنین اسمی می گردد. و در غیر این صورت اگر آدرس پوشه را هم داده باشیم تنها در همان پوشه به جستجو می پردازد. در میان صفت هایی که ممکن است بخواهیم به کار ببریم اصولا دو صفت هستند که وجود شان به شدت الزامی می باشد. نام یکی lang=”fa” و دیگری “dir=”rtl است.

lang=”fa” برای زمانی استفاده می شود که بخواهیم زبان وب سایت را فارسی معرفی کنیم. که این مورد برای ما خیلی مهم است. زیرا عمدتا قرار است وب سایت های ایرانی را طراحی کنیم. و “dir=”rtl هم اشاره به راست چین بودن حروف و عبارات دارد. زیرا اگر به کار برده نشود. ظاهر نا مناسبی را در حروف فارسی شاهد خواهیم بود. وب سایتی فارسی را تصور کنید که در آن نوشته ها چپ به راست باشند. دو حالت وجود دارد. یا به صورت کامل تمام حروف و کلمات بر عکس می شوند. و یا چینش آن ها به سمت چپ صفحه قرار می گیرد. که از زیبایی کار می کاهد.