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

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

برچسب دوطرفه select

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

بصورت زیر نوشته می شود:

<select></select>

نکته: برچسب select به تنهایی کارایی ندارد بلکه باید همراه با برچسب زیر مجموعه خود استفاده شود.

برچسب دوطرفه option

option برچسب زیرمجموعه select می باشد. برای اینکه گزینه های مورد نظر خودمان را ایجاد کنیم از آن استفاده می کنیم.

بصورت زیر نوشته می شود:

<option>قرار گیری محتوا</option>

حال برای اینکه موارد متعددی را به برچسب انتخاب خود اضافه کنیم کافیست بصورت زیر عمل کرده و نتیجه را در خروجی مشاهده کنید. ما میخواهیم ۳ مورد در فیلد کشویی به نمایش در بیاید.

مثال:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option>گزینه سوم</option>
</select>

خروجی در مرورگر:
html-select

برای اینکه بخواهیم میان چندین مورد از option ها یکی به صورت پیشفرض انتخاب شده باشد، کافیست از ویژگی selected در برچسب option موردنظر استفاده کنیم.

بصورت زیر نوشته می شود:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option selected>گزینه سوم</option>
</select>

خروجی در مرورگر:

html-selected

برچسب دوطرفه textarea

در فرم های تماس حتما دیده اید که قسمتی برای درج متن وجود داشته و با دیگر ورودی ها متفاوت است. برای ایجاد چنین قسمتی از برچسب textarea استفاده می شود.

بصورت زیر نوشته می شود:

<textarea></textarea>

خروجی در مرورگر:

html-textarea

برچسب ناحیه متنی نیز مانند دیگر برچسب ها از ویژگی های متعددی برخوردار است که برخی از آنها را شرح می دهم.

ویژگی cols و rows

برای اینکه بتوانیم بر روی اندازه ناحیه متنی مدیریت بهتری داشته باشیم می توانیم از دو ویژگی برای تغییر سطر و ستون استفاده کنیم. این دو ویژگی با نام های cols و rows در دسترس بوده و با قرار دادن آنها در برچسب textarea این امکان برای تغییر اندازه فراهم خواهد شد.

بصورت زیر نوشته می شود:

<textarea cols="50" rows="20"></textarea>

rows مشخص کننده تعداد سطرها و cols مشخص کننده تعداد ستون هاست.

ویژگی maxlength

اگر بخواهیم بر روی تعداد کاراکتری که درون ناحیه متنی نوشته می شود هم مدیریت کنیم، ویژگی به نام maxlength وجود دارد که می توان با استفاده از آن بر روی ناحیه متنی محدودیت اعمال کرد تا کاربر تنها بتواند به اندازه محدودیتی که در نظر گرفته اید متن خود را نوشته و ارسال کند.

بصورت زیر نوشته می شود:

<textarea maxlength="50"></textarea>

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

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

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

فرم (Form)

فرم یک برچسب دوطرفه است که بصورت زیر نوشته می شود:

<form></form>

برچسب یکطرفه input

اصلی ترین برچسب درونی یک فرم، input‌ می باشد. که با در اختیار گذاشتن الگوهای مختلف می تواند یک فرم کامل را ایجاد نماید.

<input>

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

با قرار دادن ویژگی type و دادن مقدار مناسب به آن می توان از این الگو ها استفاده کرد.

بصورت زیر نوشته می شود:

<input type="مقدار">

مقادیری که باید در type قرار گیرد از پیش تعیین شده و شما برحسب نیاز می توانید از یکی از آنها استفاده نمایید. در ادامه به تعدادی از آنها اشاره خواهم کرد.

ورودی متنی در فرم

برای ایجاد یک فیلد یا همان ورودی متن باید بصورت زیر عمل کرده و مقدار درون type را با text پر کنید.

<input type="text">

خروجی در مرورگر:

html-form-text

همچنین برای دیگر موارد نیز با تغییر مقدار در ویژگی type می توان متناسب با آن در خروجی الگو مورد نظر خود را پیاده کرد.

دکمه در فرم

برای ایجاد یک دکمه باید بصورت زیر عمل کرده و مقدار درون type را با button پر کنید. همچنین برای این دکمه باید یک نام نیز قرار داد تا در خروجی نمایش داده شود. برای این کار با قرار دادن ویژگی value و دادن مقدار(نام مورد نظر برای دکمه) به آن، دکمه در خروجی حاوی یک نام خواهد بود.

<input type="button" value="نام دکمه">

خروجی در مرورگر:

html-form-button

ورودی گذرواژه در فرم

برای ایجاد یک فیلد یا ورودی گذرواژه (پسورد) با تغییر مقدار در ویژگی type به password می توان این ورودی را ایجاد نمود. تفاوت این ورودی با ورودی متن در نوع نمایش کاراکترهای درونی آنها می باشد. در تصویر خروجی خواهید دید که مقادیری که در ورودی پسورد قرار می گیرد به صورت دایره ای نشان داده می شود.

<input type="password" >

خروجی در مرورگر:

html-form-pass

ورودی ایمیل در فرم

برای ایجاد یک فیلد یا ورودی ایمیل با تغییر مقدار در ویژگی type به email می توان این ورودی را ایجاد نمود.

<input type="email">

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

خروجی در مرورگر:

html-form-email

دکمه ارسال در فرم

برای ایجاد یک دکمه ارسال باید بصورت زیر عمل کرده و مقدار درون type را با submit پر کنید. در اینجا نیز با قرار دادن ویژگی value می توان برای دکمه ارسال نیز نام تعیین کنید.

<input type="submit" value="دکمه ارسال" >

خروجی در مرورگر:

html-form-submit

چک‌باکس در فرم

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

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

خروجی در مرورگر:

html-form-checkbox

نکته: برای اینکه بخواهید بصورت پیشفرض چک‌باکس شما تیک خورده باشد، کافیست ویژگی checked را به برچسب خود اضافه کنید.

بصورت زیر:

<input type="checkbox" checked>

دکمه رادیو در فرم

برای قرار دادن دکمه رادیویی (که بصورت گرد است) باید بصورت زیر عمل کرده و مقدار درون type را با radio پر کنید. بر خلاف checkbox دکمه رادیویی برای انتخاب یک گزینه از میان چند گزینه مورد استفاده قرار می گیرد.

<input type="radio">
<input type="radio">
<input type="radio">

خروجی در مرورگر:

html-form-radio

نکته: از ویژگی checked در دکمه رادیویی نیز می توان استفاده کرد.

دکمه انتخاب فایل در فرم

برای اینکه بتوان فایلی را از رایانه خود انتخاب کنیم؛ برچسب فرم باز هم به کمک خواهد آمد. تنها کافیست مقدار درون type را با file پر کنید.

<input type="file">

خروجی در مرورگر:

html-form-file

تا به اینجا شما با برچسب فرم و همچنین ساختارهای مختلف برچسب input آشنا شدید. اما ویژگی های فرم به همین جا ختم نشده و موارد متعددی وجود دارد که به مرور زمان می توانید از آنها نیز استفاده کنید.

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

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

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

از لیست ها برای قرار دادن موارد متعدد یک مجموعه استفاده می شود. حال این مجموعه ممکن است شامل چند نام یا توضیحات کوتاه از یک مساله و یا لیست کردن چند عدد پشت هم باشد! در HTML دو نوع لیست با نام های لیست نامرتب (غیرترتیبی) و لیست مرتب (ترتیبی) وجود دارد که در ادامه هر یک توضیح داده خواهد شد.

لیست نامرتب (لیست غیرترتیبی)

مشخصه این لیست در خروجی وجود یک نماد دایره ای شکل پیش از هر یک از موارد است. که بنا بر نیاز میتوان آنها را در CSS تغییر داد.(در جلسات بعد بیشتر آشنا می شوید) برچسب ابتدایی و اصلی لیست نامرتب <ul></ul>  است. و مواردی که خواهان لیست شدن آنها هستید با برچسب <li></li> میان ul قرار می گیرد. به این ترتیب در خروجی یک لیست غیرترتیبی خواهید داشت.

به صورت زیر نوشته می شود:

<html>
<body>
<ul>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه</li>
<li>مورد چهار</li>
</ul>
</body>
</html>

خروجی در مرورگر:

html-unordered-list

لیست مرتب (لیست ترتیبی)

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

به صورت زیر نوشته می شود:

<html>
<body>
<ol>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه</li>
<li>مورد چهار</li>
</ol>
</body>
</html>

خروجی در مرورگر:

html-ordered-list

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

برای مثال:

<html>
<body>
<ul>
<li>مورد یک</li>
<li>مورد دو</li>
<li>مورد سه
<ol>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
<li>زیر مجموعه</li>
</ol>
</li>
<li>مورد چهار</li>
<li>مورد پنج</li>
</ul>
</body>
</html>

خروجی در مرورگر:

html-nested-list

تا به اینجا با لیست ها آشنا شدید. تا جلسه بعدی سعی کنید خودتان لیست های مختلفی بسازید و آنها در خروجی ببینید.

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

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

برچسب دوطرفه title

حتما به سایت های مختلفی مراجعه کرده اید و عنوان سایت را که بر روی زبانه (Tab) مرورگر به نمایش در می آید دیده اید؛ برای به نمایش درآوردن نام سایت بر روی زبانه مرورگر از برچسبی به نام title استفاده می شود.

بصورت زیر نوشته می شود:

<title>دانگو وب</title>

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

<!DOCTYPE html>
<html>
<head>
<title>دانگو وب</title>
</head>
<body>
</body>
</html>

برچسب یکطرفه meta

این برچسب شامل ساختارهای مختلفی است که بنا بر نیاز نوشته شده و موتورهای جستجو از آنها برای بررسی سایت استفاده می کنند. در اینجا با یک نوع از ساختارهای متا تگ که مشخص کننده نوع رمزگذاری (encoding) سند شماست آشنا می شوید. اگر سند خود تا به اینجا را در مرورگر خود باز کنید، در زبانه مرورگر با کاراکترهایی ناخوانا مواجه می شوید که هیچ معنایی نداشته و با آنچه شما در برچسب title قرار داده اید متفاوت است.

 

html-meta-tag

برای رفع این مشکل از برچسب meta به صورت زیر استفاده می شود:

<meta charset="utf-8">

html-meta-tag-utf8

سند پس از اضافه کردن برچسب متا:

<!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>

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

اچ تی ام ال (HTML)

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

HTML زبانی برچسب (Tag) محور بوده که تمام دستورات آن از برچسب ها تشکیل شده اند. هر برچسب از دو علامت <> (بزرگتر و کوچکتر) ساخته شده که بنا بر کارایی و نوع ممکن است یک طرفه یا دوطرفه باشند.

  • برچسب های یکطرفه

این تگ ها از یک جفت علامت <> تشکیل شده اند.

مثال:

<img>
<hr>
  • برچسب های دوطرفه

این تگ ها از دو جفت علامت <> تشکیل شده اند. با این تفاوت که در جفت دوم با یک “/”به پایان می رسد.

علامت “/” نشان دهنده ی انتهای تگ مورد نظر است.

مثال:

<a></a>

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

همانطور که از قبل گفته شد؛ سند (File) هر زبان ساختار و پسوند منحصر بفردی دارد که باید طبق آن نوشته و ذخیره شود. HTML نیز از قائده مستثنی نیست. ابتدا به پسوند ذخیره سازی سند HTML میپردازم تا پس از ساخت یک سند، ساختار آن را شرح دهم.

ذخیره سازی سند HTML

برای اینکه بتوانیم یک سند اچ‌تی‌ام‌ال بسازیم که توسط مرورگر قابل اجرا باشد ابتدا باید بدانیم که پسوند آن باید چگونه نوشته شود. برای این کار نرم افزار ویرایشگر کد خود را باز کنید (من در اینجا از Notepad++ استفاده می کنم)

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

برای این کار (در نرم افزار Notepad++) از قسمت نوار ابزار بر روی گزینه new کلیک کرده تا یک صفحه جدید گشوده شود.

notpad-new

سپس بدون آنکه محتوایی در آن قرار دهید از منو گزینه File و بعد بر روی Save As کلیک و در پنجره باز شده مکان ذخیره سازی سند خود را انتخاب کنید. برای اینکه دسترسی بهتری بر روی سندهای خود داشته باشید یک پوشه بر روی دکستاپ ایجاد کرده (در اینجا من نام project را انتخاب می کنم) و فایل را در پوشه ذخیره کنید. نکته ای که باید به آن در زمان ذخیره سازی توجه کنید پسوند سند html شما می باشد. برای این کار پس از انتخاب نام برای سند خود (در اینجا من نام index را انتخاب می کنم) با قرار دادن یک نقطه “.” پس از نام، html را تایپ کرده و بر روی Save کلیک کرده تا ذخیره شود.

notpad-save

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

browser-fileساختار سند HTML

ساختار اصلی و ابتدایی یک سند html شامل چند تگ پیشفرض است که در ادامه هر یک را توضیح خواهم داد.

اعلامیه Doctype

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

به علت اینکه ما در حال استفاده از آخرین نسخه از html (نسخه ۵) هستیم از Doctype به صورت زیر استفاده می کنیم.

<!DOCTYPE html>

برای اطلاعات بیشتر شما درباره Doctype در نسخه پیشین html به یک نمونه از آن اشاره می کنم.(فقط برای آشنایی)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

همانطور که می بینید تفاوت بین نسخه ۵ و نسخه ۴.۰۱ بسیار است!

برچسب دوطرفه HTML

این تگ اصلی ترین تگ موجود در یک سند است زیرا وجود آن به مرورگر می فهماند که سند باز شده یک فایل HTML است.

تمام برچسب ها باید درون این تگ قرار گیرند بجز Doctype.

به این صورت نوشته می شود:

<html></html>

برچسب دوطرفه head

تگ هد محل قرار گیری برچسب هایی نظیر title, style, link و… است. برچسب های قرارگرفته در head برای مرورگرها قابل مشاهده و خوانش هستند.

به این صورت نوشته می شود:

<head></head>

برچسب دوطرفه body

تگ بادی محل قرارگیری تمام تگ ها و محتوا نظیر تصویر، متن و… می باشد.

به این صورت نوشته می شود:

<body></body>

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

در انتها ما در یک سند html تگ های زیر را خواهیم داشت.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

برای به یادسپاری این برچسب ها بهتر است ابتدا آموزش را مطالعه کرده و سپس آنها را با تایپ کردن مداوم تمرین کنید.