تا %60 تخفیف خرید برای 5 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی

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

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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

پیش از آنکه بخواهم اجزای این کدها را توضیح دهم باید به یکسری نکات توجه کنیم!


  • همانطور که گفتم اچ تی ام ال مخفف کلمات Hyper Text Markup Language می باشد.
  • یک زبان برچسب گذاری یا Markup زبانی با مجموعه ای از تگ ها می باشد.
  • یک سند اچ تی ام ال شامل یک سری تگ اچ تی ام ال می باشد.
  • هر تگ اچ تی ام ال می تواند محتوای سند دیگری را توضیح دهد.

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


  • <!DOCTYPE html> تعیین کننده و معرفی کننده سند اچ تی ام ال در واقع این خط کد معرف سند و ورژن اچ تی ام ال به ویرایشگر متن و مرورگر می باشد. در همین مقاله با همین کد برای ورژن های قبلی اچ تی ام ال آشنا می شوید.
  • کدی که در بین <html> و </html> قرار می گیرد معرف کدهای اچ تی ام ال می باشد. در واقع تگ اصلی موجود در اچ تی ام ال این تگ می باشد.
  • تگ <head> اطلاعاتی مربوط به سند اچ تی ام ال را در خود نگه داری می کند عموما اطلاعات بجز بعضی از تگ ها مثل عنوان و فاوآیکن نمایش داده نمی شوند. این اطلاعات بیشتر برای مرورگرها و موتورهای جستجو مهم است.
  • تگ <title> یا عنوان که یکی از تگ های خانواده <head> می باشد همانطور که عرض شد عنوان سند اچ تی ام ال را به ما نشان می دهد.
  • تگ <body> این تگ بدنه اصلی سند اچ تی ام ال را شامل می شود. کلیه اطلاعاتی که ما در یک صفحه اینترنتی می بینیم در این قسمت نوشته می شود.
  • تگ <h1> برای ساخت تیتر و عنوان از این تگ استفاده می کنیم.
  • تگ <p> این تگ برای پارگراف بندی مورد استفاده قرار می گیرد.

این تگ ها شاید اساسی ترین و مهمترین تگ هاییست که در اکثر سایت ها مورد استفاده قرار می گیرد.

شیوه نوشتن تگ ها


شاید تا کنون با شیوه تگ ها در اچ تی ام ال آشنا شده باشید. در اچ تی ام ال برای نوشتن تگ ها باید چند نکته را رعایت کنید.

  • تگهای اچ تی ام ال با یک علامت <> اغاز و </> پایان می یابند.
  • بعضی از تگ ها دارای مقدار پایانی نیستند.

مثال:

<p> ITPRO.ir </p>
<br>

در این مثال ها تگ مربوط به پاراگراف با علامت <> شروع شده و با علامت </> پایان یافته است. اما دقیقا تگ بعدی وی یعنی تگ <br> تگ پایانی ندارد. (این تگ برای شکستن متن استفاده می شود.)

شیوه کلی تگ های اچ تی ام ال:

<Tag Name> Content </tag Name>

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

<!DOCTYPE html>

یا

<!doctype HTML> 

این اضهارکننده برای اچ تی ام ال ورژن 5 استفاده می شود.

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

این اضهارکننده برای اچ تی ام ال 4.01 مورد استفاده قرار می گرفت

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

این اضهارکننده نیز برای XHTML 1.0استفاده می شود.

ورژن های مختلف اچ تی ام ال را می توانید در زیر ببینید

HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نظر شما
برای ارسال نظر باید وارد شوید.
3 نظر
افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند