آموزش 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

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

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

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

#آموزش_قدم_به_قدم_html #آموزش_تگ_ها_در_html #html_چیست #آموزش_html #منظور_از_تگ_در_html_چیست #آموزش_گام_به_گام_html #استفاده_از_تگ_های_html #html_چگونه_کار_می_کند #آموزش_مقدماتی_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
1 نظر
محمد برزگر

با عرض سلام خدمت جناب عباسی محترم

یه سوالی داشتم از خدمتتون

آیا نیازی هست نسخه های پایین تر از Html5 رو یاد بگیریم یا همون Html5 کافیه؟

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....