جلسه سوم
از سری آموزش های طراحی وب در خدمت شما عزیزان هستیم. قبل از هر چیز جلسه اول و جلسه دوم را حتما مطالعه کنید.
پس از اطلاع از ساختار اصلی و برچسب های اصلی یک سند html به سراغ تگ های پایه و کاربردی این زبان خواهیم رفت. همانطور که در جلسه قبل گفته شد تمام محتوایی که در برچسب head قرار میگیرد خوانش آنها توسط مرورگر انجام شده (قابل رویت در صفحه وب نیست) و شامل برچسب های مختلفی است که در ادامه هرکدام را مختصرا شرح می دهم.
برچسب دوطرفه title
حتما به سایت های مختلفی مراجعه کرده اید و عنوان سایت را که بر روی زبانه (Tab) مرورگر به نمایش در می آید دیده اید؛ برای به نمایش درآوردن نام سایت بر روی زبانه مرورگر از برچسبی به نام title استفاده می شود.
بصورت زیر نوشته می شود:
<title>دانگو وب</title>با این کار شما قادر خواهید بود زمانی که صفحه شما در مرورگر باز می شود نام آن در زبانه به نمایش در بیاید. پس در انتها با اضافه کردن برچسب title محتوای سند ما باید به شکل زیر باشد.
<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
</head>
<body>
</body>
</html>برچسب یکطرفه meta
این برچسب شامل ساختارهای مختلفی است که بنا بر نیاز نوشته شده و موتورهای جستجو از آنها برای بررسی سایت استفاده می کنند. در اینجا با یک نوع از ساختارهای متا تگ که مشخص کننده نوع رمزگذاری (encoding) سند شماست آشنا می شوید. اگر سند خود تا به اینجا را در مرورگر خود باز کنید، در زبانه مرورگر با کاراکترهایی ناخوانا مواجه می شوید که هیچ معنایی نداشته و با آنچه شما در برچسب title قرار داده اید متفاوت است.
برای رفع این مشکل از برچسب meta به صورت زیر استفاده می شود:
<meta charset="utf-8">
سند پس از اضافه کردن برچسب متا:
<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>تا اینجا با دو برچسب در head آشنا شدید که برای ساخت یک سند html کاربردی هستند. اما مابقی این برچسب ها را در جلسات بعدی و با شروع مباحث پیشرفته تر آموزش خواهم داد.
نکته: به یاد داشته باشید که برچسب های دو طرفه برچسب هایی هستند که درون آنها محتوا قرار می گیرد؛ اما برچسب های یک طرفه چنین ویژگی را ندارند.
حال به سراغ برچسب هایی می رویم که در body مورد استفاده قرار میگیرند. در جلسه قبل در مورد کلیت برچسب body توضیح داده شد. این برچسب، بدنه یک سند html را تشکیل داده و تمام برچسب هایی که در مرورگر توسط کاربر قابل رویت هستند در آن قرار می گیرد.
برچسب دوطرفه p
این برچسب برای ایجاد یک پاراگراف بکار برده می شود. یکی از ویژگی های برچسب پاراگراف این است که به صورت خودکار قبل و بعد از آن فضای خالی ایجاد کرده تا فاصله آن تا پاراگراف بعدی مشخص شود.
به صورت زیر نوشته می شود:
<p >این یک پاراگراف است.</p>سند پس از اضافه کردن برچسب پاراگراف:
<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
<meta charset="utf-8">
</head>
<body>
<p >این یک پاراگراف است.</p>
</body>
</html>برچسب دوطرفه تیتر (عنوان)
برای نوشتن عناوین از برچسب تیتر استفاده می کنیم. این برچسب شامل ۶ سطح می باشد که هر کدام از این سطح ها اندازه فونت متفاوتی با یکدیگر دارند. غیر از اندازه فونت هر یک از آنها نقش ویژه ای را در مسائل سئو (SEO) ایفا می کنند. (مانند عنوان همین نوشته که از برچسب تیتر۱ استفاده شده است)
که بصورت زیر نوشته می شوند:
<h1>عنوان یکم</h1>
<h2>عنوان دوم</h2>
<h3>عنوان سوم</h3>
<h4>عنوان چهارم</h4>
<h5>عنوان پنجم</h5>
<h6>عنوان ششم</h6>برچسب های توپُر کننده متن
شاید در برخی از نوشته ها با کلمات توپر(Bold) برخورد کرده اید. این یک قابلیت از html می باشد که می تواند متن دلخواه شما را به صورت بولد نمایش دهد. دو برچسب که مورد استفاده قرار می گیرند برچسب b و برچسب strong می باشد. از نظر ظاهری این دو تفاوتی با یکدیگر ندارند و هر دو عمل توپر کردن متون را برعهده دارند؛ ولی از لحاظ ساختاری، برچسب b تنها در نحوه نمایش متون به صورت توپر عمل می کند اما برچسب strong همانطور که متن رو بولد می کند؛ در مسائل مربوط به سئو و… نیز تاثیرگذار است.
به صورت زیر نوشته می شود:
<b>این یک برچسب b است</b>
<strong>این یک برچسب strong است.</strong>برچسب های italic
یکی دیگر از مواردی که در سایت های مختلف شاهد آن بوده اید کج (italic) بودن متون است. این قابلیت نیز توسط html امکاپذیر است. دو برچسب i و em این کار را برای شما انجام خواهند داد. تفاوت این دو برچسب هم مانند برچسب های توپر کننده بوده که توضیح آن در عنوان قبل گذشت. i تنها در نحوه نمایش و em در بحث سئو و… کاربرد دارد.
<i>این یک برچسب i است</i>
<em>این یک برچسب em است</em>برچسب یکطرفه br
اگر قصد این را دارید تا در قسمتی از متن خود یا یک عنصر دیگر، شکست خط ایجاد کنید(اینتر) این کار با استفاده از برچسب br انجام می گیرد. پس از قرار دادن این برچسب در مکان مورد نظر یک شکست خط اتفاق می افتد. (در سند نهایی این جلسه استفاده شد.)
به صورت زیر نوشته می شود:
<br>سند نهایی ما در این جلسه شامل تگ های زیر خواهد بود.
<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
<meta charset="utf-8">
</head>
<body>
<p >این یک پاراگراف است.</p>
<h1>عنوان یکم</h1>
<h2>عنوان دوم</h2>
<h3>عنوان سوم</h3>
<h4>عنوان چهارم</h4>
<h5>عنوان پنجم</h5>
<h6>عنوان ششم</h6>
<b>این یک برچسب b است</b>
<br>
<strong>این یک برچسب strong است.</strong>
<br>
<i>این یک برچسب i است</i>
<em>این یک برچسب em است</em>
</body>
</html>
دیدگاه