با سلام خدمت کاربران عزیز چیتا سافت . آموزش HTML اولین قسمت از سری آموزش های گسترده چیتاهاست می باشد که با هدف در بر گرفتن تمامی مهارت های لازم جهت برنامه نویسی وبسایت، در اختیار شما خواهد بود.
در این سری از مطالب آموزش برنامه نویسی وبسایت قصد داریم به زبان نشانه گذاری HTML بپردازیم. پس بهتر است با یک تعریف ساده از HTML شروع کنیم:
اچ تی ام ال استاندارد جهانی نمایش صفحات وب است. به نوعی سنگ بنای طراحی وبسایت.
تمامی صفحات وبسایتی که شما مشاهده می کنید – مثل همین صفحه – با استفاده از زبان نشانه گذاری HTML به نمایش در می آیند. حتما متوجه شده اید که برای تعریف HTML از عبارت “زبان نشانه گذاری” استفاده کردیم، و نه “زبان برنامه نویسی”. دلیلش بسیار ساده است:
HTML یک زبان برنامه نویسی نیست
به همین دلیل آموزش HTML بسیار بسیار ساده تر از یک زبان برنامه نویسی مانند جاوا اسکریپت یا پایتون است. پس انتظار داریم پس از مطالعه این سری آموزشی کوتاه، بتوانید تمامی قسمت های تشکیل دهنده یک صفحه وب را تشخیص دهید.
زبان نشانه گذاری HTML اولین قدم شما در یادگیری طراحی وبسایت است. به عبارت دیگر می توان HTML را الفبای برنامه نویسی وب دانست.
بیایید یک فایل HTML ساده را بررسی کنیم:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
در مثال بالا اصلی ترین و پر کاربرد ترین عبارت های HTML را مشاهده می کنید. حالا خط به خط معنی آن ها را بررسی کنیم:
- عبارت
<!DOCTYPE html>نشان دهنده این است که فایل ما HTML5 می باشد. - در سطر بعدی عبارت
<html>را داریم که جزء اصلی یک صفحه HTML است و تمامی فرامین HTML باید بعد از آن نوشته شوند. - عبارت
<head>به معنی “سر” ، در برگیرنده اطلاعات “متا”ی صفحه است.(بعدا با مفهوم متا (Meta) آشنا خواهیم شد) - عنوان صفحه مان نیز با استفاده از
<title>تعیین می شود. - قسمت بعدی
<body>است که محتوای قابل رویت صفحه را شامل می شود. - تگ
<h1>نیز نشان دهنده یک عنوان مطلب است. - برای تعیین پاراگراف ساده نیز از تگ
<p>استفاده می کنیم.
تگ های HTML
دستورات HTML همگی در داخل دو علامت < و > قرار می گیرند، که تگ نام دارد.
<tagname>content goes here...</tagname>
- تگ های HTML معمولا به صورت جفت استفاده می شوند. مثل
<p>و</p>. - به تگی که در ابتدا می آید “تگ آغاز” و به تگی که در انتها می آید “تگ پایان” می گویند.
- تگ پایان مانند تگ آغاز نوشته می شود، با این تفاوت که قبل از نام تگ، یک / قرار می دهیم.
مرورگر های وب
کاربرد مرورگر های وب این است که اسناد HTML را خوانده و آن ها را برای ما نمایش دهند.
مرورگر هیچگاه تگ های HTML را نمایش نمی دهد، بلکه آنها را می خواند و روی متن اجرا می کند:
مرورگر کروم
ساختار صفحه HTML
در تصویر زیر می توانید ساختار کلی یک صفحه از نظر HTML را مشاهده کنید:
نکته: تنها محتوای داخل تگ <body> که در تصویر بالا به صورت سفید است، در مرورگر نمایش داده می شود.
اعلان <DOCTYPE!>
عبارت <DOCTYPE!>که در ابتدای دستورات HTML استفاده شده است، نوع سند را تعیین می کند و به مرورگر می گوید که فرامین HTML را با چه استانداردی بخواند.
این اعلان فقط یک بار استفاده می شود، و آن هم در ابتدای صفحه، قبل از تمامی تگ های HTML .
اعلان <DOCTYPE!>حساس به حروف کوچک و بزرگ نیست.
برای این که به مرورگر بگوییم کد های HTML ما را با استفاده از استاندارد HTML5 بخواند، از اعلان زیر استفاده می کنیم:
<!DOCTYPE html>
ورژن های مختلف HTML
از همان روز های ابتدایی اختراع وب، HTML نیز در ورژن های مختلف وجود داشته است:
در این قسمت HTML را به طور خلاصه معرفی کردیم و یک صفحه ساده را نیز بررسی کردیم. در قسمت بعدی آموزش HTML ، ابزار های لازم برای دست به کار شدن و نوشتن اولین صفحه HTML را برایتان معرفی خواهیم کرد تا شما نیز بتوانید گام به گام با ما، تگ ها و فرامینی را که یاد می گیرید، اجرا کنید. پس همراه چیتاهاست باشید.
مطلب بعدی: آموزش HTML – قسمت ۲ (ویرایشگر ها)
