مقدمه ای بر HTML

مقدمه ای بر 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

منظور از تگ 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 در وبلاگ آی ای امیدی با ما همراه بودید.

اشتراک گذاری

هشتگ (برچسب ها): #######################################################

Picture of حمید امیدی

حمید امیدی

حمید امیدی هستم ؛ فارغ التحصیل رشته مهندسی صنایع که از سال 1386 فعالیت فریلنسری خودم رو در عرصه تجارت الکترونیک شروع کردم ! تو اوج بحران کرونا بود که تصمیم گرفتم یه وب سایت جمع و جور بزنم و تجربیات و خدماتی که به خوبی بلدم رو به همگان عرضه کنم.

پست های مرتبط

2 پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

16 − دو =