با عرض سلام خدمت شما کاربران گرامی آی وحید

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

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

شما با HTML می توانید وب سایت خودتان را بسازید با سلیقه و مطالب خودتان!

یادگیری زبان برنامه نویسی HTML برای طراحی سایت بسیار آسان است و شما از آن لذت خواهید برد مثل آب خوردن پس همراه ما باشید. در هر بخش از آموزش برای هر یک از گفته هایمان یک مثال خواهیم آورد بنابراین آموزش آی وحید با دیگر آموزش متفاوت بوده و کاملا پروژه محور می باشد.

  • HTML مخفف شده ی کلمات Hyper Text Markup Language
  • زبان برنامه نویسی HTML شامل تگ ها می باشد که هر تگ خصوصیات مخصوص خود را دارد و کار خاصی می کند.

خب سریع میریم سراغ آموزش اولین جلسه و اولین مثال همراه با توضیحات:

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

<body>

  <h1>My First Heading</h1>

  <p>My first paragraph.</p>

</body>

</html>

خب در اولین خط DOCTYPE نوع صفحه وب و سند رو مشخص میکنه که HTML هست.

تمام محتویات و کدهای زبان برنامه نویسی HTML باید بین دو تگ <html></html> قرار داده شود.

اطلاعات صفحه وب و برخی المان های دیگر باید بین دو تگ <head></head> قرار بگیرد که محتویات این تگ در معمولا در حالت عادی به جز عنوان صفحه به کاربر نمایش داده نمی شود.

عنوان صفحه وب ما بین دو تگ <title></title> قرار میگرد که خود ایت تگ نیز در داخل تگ <head></head> قرار می گیرد(به مثال توجه شود).

تمام محتویات صفحه بین دو تگ <body></body> قرار میگیرد.

برای نمایش هدینگ یا همان عنوان ها از تگ <h1></h1> که معمولا تا عدد 6 استفاده می شود. برای مثال <h3></h3> که متناسب با عددشان بزرگ هستند که 1 بزرگترین و 6 کوچکترین هست.

هم چنین برای نمایش بند ها و پاراگراف ها از تگ <p></p> استفاده می شود.

این تگ ها را تمامی مرورگرها پشتیبانی میکنند و حالا شما زبان برنامه نویسی HTML را می دایند البته خیلی کم اما یادتان باشد اگر بیل گیتس هم برنامه نویسی را تمرین نکند با شما تفاوتی نخواهد داشت پس نکته مهم اینکه پس از هر مثال باید تمرین کنید.

 

ساختار تگ های HTML

ساختار تگ های HTML به صورت زیر هست:

<tagname>content</tagname>

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

خب کمی هم به مرورگرها اشاره میکنیم. مرورگرهای وب مانند گوگل کروم – فایرفاکس – سافاری و اینترنت اکسپلورر نخست کدهارو میخونن و سپس به کاربر نمایش میدن. اما همانطور که شما تجربه کرده اید مرور تگ ها رو نشون نمیده و محتوای تگ ها رو بر اساس همون تگ و خاصیت هایی که برنامه نویس در طراحی اون سایت بهش اختصاص داده نشون میده.

یه نکته هم اینکه مرورگر محتویات و کدهای داخل تگ <body></body> رو به کاربر نمایش میده و معمولا تگ <head></head> برای خرده کاری های سئو و فراخوانی فایل های دیگه و اطلاعاتی که معمولا برای منابع دیگه آماده شده است رو شامل میشه به بیان دیگر و ساده تر محتویات تگ هد بیشتر در کدنویسی و موتورهای جستجوگر و ارتباط وب سایت با شبکه های اجتماعی و… به کارگرفته میشه و زیاد به کاربر مربوط نمیشه گرچه کاربر اون اطلاعات رو دریافت میکنه.

تگ <!DOCTYPE>

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

اما چند نوع از این تگ رو ببینید:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

خب مثل من برای شما هم سوال شد که اینا چه تفاوتی با هم دارن؟! یادتون هست که چند سطر بالاتر گفتم HTML ورژن های متفاوتی داره؟! خب یه چند تا مثال میزنم:

HTML5

<!DOCTYPE html>

HTML 4.01

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

XHTML 1.0

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

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

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

نسخه زبان برنامه نویسی HTML سال عرضه
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
خب جلسه اول به پایان رسید. امیدوارم خوب یادگرفته باشید و یادتون باشه اگر بیل گیتس هم تمرین نکنه با شما فرقی نخواهد داشت پس حتما تمرین کنید البته شایان ذکر است چون این جلسه تگ های خاصی نگفتیم زیاد تمرین تاثیر نداره اما جلوتر که خواهیم اگر تمرین نکنید حتما شکست خواهید خورد.
با تشکر – آی وحید