در درس پیشین ، HTML را معرفی کلی کردیم. در این درس به معرفی و نحوه استفاده از تگ های HTML می پردازیم و چند مثال ساده از یک صفحه ی HTML خواهیم زد. با ما همراه باشید .
همانطور که در درس قبلی گفتیم ، باید در هر سند HTML شما کد نویسی رو با داک تایپ شروع کنید. مانند :
نکته:
این یک تگ نیست. بنابراین چیزی به نام باز و بسته شدن تگ ها در این نداریم! و فقط باید اول سند HTML ذکر کنیم و تمام.
حال برای شروع کد نویسی HTML باید کد خودمون رو با یک <html> ساده شروع کنیم. یعنی بعد از ذکر داک تایپ باید تگ <html> رو هم باز کنیم و تا زمانی که کد نویسی HTML داریم ، آن را ببندیم. پس این تگ باید باز و بسته شود.
بعد از باز شدن تگ اصلی HTML که در بالا معرفی کردیم ، نوبت به باز شدن دو مورد می رسد. همان مورد هایی که در درس قبلی ذکر کردیم. یعنی تگ سرصفحه – Head و تگ بدنه ی سند – Body . وجود تگ سرصفحه در یک سند عادی HTML ضروری نیست. ولی وجود تگ بدنه – body برای سندی که میخواهد محتوایی داشته باشد الزامی است. فعلاً یک مثال می زنیم. در حال حاضر نیازی به تگ head نداریم و بلافاصله بعد از باز شدن <html> تگ بدنه <body> رو باز می کنیم.
در HTML ترتیب باز و بسته شدن تگ ها اهمیت بالایی دارد و باید توجه زیادی به این موضوع داشته باشید. جهت اطمینان ، هر تگی رو که باز کردید ، همان لحظه تگ بسته شدن آن را نیز بنویسید و در بین آنها تگ ها و کد های جدید را ذکر کنید .
حال تا اینجا ما به این رسیدیم و سند HTML ما شامل این است :
حال برای مثال در این درس، دو تگ مهم را نیز معرفی میکنیم تا بتوانید یک نتیجه بسیار ساده از درس امروز را اجرا کنید.
1- تگ <p> :
این تگ کاربرد زیادی داره و کار پاراگراف رو انجام میده. یعنی هر چیزی که بین تگ <p> و <p/> قرار داده بشه، به عنوان یک پاراگراف معرفی و شناخته میشه. مثال:
| This is text here just for test ! Replace your text here ! |
2- تگ های سرفصل اصلی <h1> :
بین تمام اسناد HTML معمول است عنوان اصلی صفحه را در تگ <h1> می گذارند . این تگ سرتیتر و عنوان اصلی یک فایل HTML را تعیین می کند که البته می تواند یک یا چند بار مورد استفاده قرار گیرد . البته تگ های <h2> و <h3> …. تا <h6> نیز قابل استفاده هستند که در درس های آتی به آن خواهیم پرداخت و شما می توانید عناوینی که اهمیت و درجه پایین تری دارند را در این تگ ها قرار دهید. ولی فعلاً به عنوان نمونه ، می توانید از این تگ استفاده کنید :
حال کد تکمیل شده مثال ساده امروز :
| This is text here just for test ! Replace your text here ! |
چند نکته پیرامون HTML :
1) در کد نویسی های HTML زدن اینتر بین نوشته ها و کد ها در خروجی که روی مرورگر کاربر نمایش داده میشه هیچ اثر خاصی نداره. شما اگر بخواید بین خطوط نوشته هاتون فاصله بدید ، باید از تگ مخصوص این کار که بعداً معرفی میشه استفاده کنید. (تگ <br>)
2) کد هایی که شما می نویسید در ویرایشگر خودتون ، در مرورگر در حالت عادی دیده نمیشن. و تنها خروجی کد ها دیده میشه. مگر اینکه کاربر با مرورگر خودش View Source کنه. یعنی روی صفحه شما راست کلیک کنه و این گزینه رو بزنه یا از ترکیب کلید های کنترل + U استفاده کنه.
ضمناً حتما مثال بالا رو اجرا کنید و خودتون متن ها رو تغییر بدید تا با خروجی و عملکرد هر کد بیشتر آشنا بشید.
3) ذکر داک تایپ الزامی است. ترجیحاً از داک تایپی که در بالا معرفی کردیم همیشه استفاده کنید. هم نوشتن این داک تایپ راحت تر و کوتاه تره و هم محدودیت شما در استفاده از کد ها به نوعی کمتره و می تونید علاوه بر کد های HTML زیر ورژن 5 ، از کد های HTML5 هم استفاده کنید. ولی به هر حال انتخاب با شماست و می توانید از هر داک تایپ و ورژنی از HTML استفاده کنید .
داک تایپ HTML4 :
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
داک تایپ xHTML1 :
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
منتظر درس های بعدی باشید .
زیبا ترین دنیای اموزشی...
ما را در سایت زیبا ترین دنیای اموزشی دنبال می کنید
برچسب : آموزش HTML به زبان ساده و مختصر – مفید, نویسنده : فاطمه sokoot-eshgh3000 بازدید : 741 تاريخ : چهارشنبه 15 مرداد 1393 ساعت: 14:35
