مقدمه ای بر HTML ؛ اچ تی ام ال یا HTML یک زبان علامت گذاری استاندارد برای ایجاد صفحات وب است . به نوعی هر صفحه ای رو که سطح وب مشاهده می کنید به زبان HTML نشانه گذاری شده است . مرورگر این صفحات را که با توجه به کدها به صورت قابل فهم برای کاربر نمایش میده. یعنی میاد کدها ، فایل ها ، تصاویر و اطلاعات کلی را بصورت قابل فهم برای کاربر نشون میده . یادگیری HTML رو میشه اولین قدم برای یادگیری طراحی وب دونست . اگر HTML رو به خوبی یاد بگیرید میشه گفت که اصول اولیه طراحی وب رو فرا گرفتید.
در کنار HTML نیز CSS و JAVASCRIPT هم برای طراحی بخش کاربری یا همون فرانت اند نیز مورد استفاده قرار میگیره . پس اگر میخواید طراحی UI یا بخش کاربری و ظاهری رو فرا بگیرید . یادگیری HTML اولین قدم و قدم بعدی نیز یادگیری CSS و JavaScript خواهد بود . تو این مقاله میخوایم بصورت کامل به معرفی HTML بپردازیم و از پایه و بصورت جامع آموزشش رو قرار بدیم . همراه ما باشید.
HTML چیه ؟
یه سوال اساسی ؛ اصلا HTML چی هست ؟ HTML مخفف چیست و اصلا چرا اسمش شد HTML ؟
خب باید بگم که اچ تی ام ال مخفف عبارت Hyper Text Markup Language ؛ یک زبان علامت گذاری استاندارد برای صفحات وب که میاد ساختار وب رو توصیف میکنه. 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 باشه چنین تگ هایی رو درون خودش جا داده . خط اول نشون دهنده اینه که این صفحه به زبان html نشانه گذاری شده . به نوعی وقتی مرورگر میاد و یک صفحه وب رو باز میکنه ، از خط اول متوجه میشه که این صفحه به چه زبانی و از چه نسخه ای اون زبان نشانه گذاری و نوشته شده . بعد میاد اون هارو بررسی و به شکل قابل فهم برای ما نمایش میده .
بطور خلاصه :
<!DOCTYPE html>مشخص میکنه که این قایل یا سند ، یک فایل HTML5 هست.- به هر یک از عبارت هایی که بین <> قرار بگیره تگ گفته میشه و هر کدوم ویژگی ها و خصوصیات خاص خودشون رو دارن.
- تگ <HTML> از جمله تگ های اصلی یک فایل HTML محسوب میشه و همیشه باید تو فایل باشه .
- داخل تگ <Head> هم کلیه اطلاعات شامل متاها قرار میگیره .
- تگ <title> هم همون عنوانی هست که ما تو آدرس بار مرورگر میبینیم.
- داخل تگ <Body> هم کلیه عناصری که ما میبینیم قرار میگیرن مثل لینک ها ، مطالب ، تصاویر و …
- تگ <h1> معرف سرتیتر هست . یعنی اگر بخوایم یک عنوان تعریف کنیم میتونیم از این تگ استفاده کنیم.
- تگ <p> معرف پاراگرف هست . یعنی اگر بخوایم یک پاراگراف بنویسیم باید از این تگ استفاده کنیم .
نگران نباشید تنها اینجا مثال زدیم و تازه اول راه هستیم . تو پست های آینده بصورت کامل و با مثل کلیه این مطالب توضیح داده شده تا درک کاملی از کلیه تگ ها پیدا کنید و بتونید اونها رو مورد استفاده قرار بدید.
منظور از تگ HTML چیست ؟
همونطور که قبلا گفتیم به هر عبارتی که بین <> قرار بگیره بهش میگیم تگ یا به زبان لاتین element ؛ این تگ ها شاکله اصلی HTML رو میسازن . یادگیری این تگ ها و اینکه هر کدوم از این تگ ها چه نقشی رو ایفا میکنن امر ضروری محسوب میشه . یجورایی اگر با این تگ ها آشنایی پیدا کنید کامل به زبان HTML تسلط پیدا کردید. حالت کلی تگ ها به شکل زیر تعریف میشه :
<tagname>Content goes here...</tagname>تگ ها ابتدا با <tagname> شروع میشن ؛ بعد محتوای مورد نظر ما توش قرار میگیره و در آخر ها با <tagname/> بسته میشن . توجه داشته باشید که حتما حتما باید تگ رو ببنیدید . برای درک بهتر به چند مثال زیر توجه کنید :
<h1>My First Heading</h1> <p>My first paragraph.</p><h1> تگ شروع ما که مشخص میکنه محتوای درونش یک سرتیتر هست . بخش میانی یا First Heading سرتیتر ماست و در اخر هم با استفاده از <h1/> تگ بسته شده . برای بخش دوم یا همون پاراگراف <p> هم به همین ترتیب ؛ توجه داشته باشید که تگ ها پایانی دارای علامت / هستند اما تگ های آغازین یا شروع فاقد آن هستند.
یک سری استثنا هم در این بین وجود داره . برخی تگ ها مثل بریک وجود دارند که نیازی به تگ پایانی یا بستن اونها نیست . مثل تگ <br> یا همون بریک برای رفتن به خط بعدی استفاده میشه . یعنی برای اینکه برید به خط بعدی کافیه که از <br> استفاده کنید . بدون اینکه از تگ پایانی استفاده کنید.
سعی کردیم تو این بصورت کامل یه مقدمه کامل و جامع از زبان html برای شما تهیه کرده باشیم تا هم یک مقدمه ای بر یادگیری باشه و هم آشنایی کلی از این زبان به شما داده باشیم . میتونید کلیه سوالات خودتون رو در بخش کامنت ها از ما بپرسید . همچنین اگر میخواید html رو بصورت کامل یاد بگیرید میتونید از مقالات موجود در سایت استفاده کنید . خوشحالیم که تا انتهای مقاله مقدمه ای بر HTML در وبلاگ آی ای امیدی با ما همراه بودید.
2 پاسخ
چقدر خوب و کامل توضیح دادید .
ممنون از حسن توجه شما