فایل گپ | دریچه ای به دنیای تکنولوژی
HTML چیست ؟
برای آموزش HTML به زبان ساده در ابتدا باید بدانید HTML مخفف Hyper Text Markup Language است که پرکاربردترین زبان برای توسعه صفحات وب است. HTML در اواخر سال 1991 توسط Berners-Lee ایجاد شد اما “HTML 2.0” اولین نسخه استاندارد و جامع از HTML بود که در سال 1995 منتشر شد و در حال حاضر نسخه HTML-5 را داریم که پسوند HTML 4.01 شناسایی می شود و این نسخه در سال 2012 منتشر شد.
چرا باید زبان HTML را یاد بگیریم ؟
در اصل، HTML با هدف تعریف ساختار اسناد مانند سرفصل ها، پاراگراف ها، فهرست ها و غیره توسعه داده شد تا به اشتراک گذاری اطلاعات علمی بین محققان را تسهیل کند. اما با گذشت زمان، HTML به طور گسترده ای برای قالب بندی صفحات وب با کمک تگ های مختلف موجود در زبان HTML مورد استفاده قرار گرفت.
برای کسانی که در زمینه کامپیوتر فعالیت دارند یا می خواهند به یک مهندس نرم‌افزار عالی تبدیل شوند دانستن زبان HTML یک امر ضروری است، مخصوصاً زمانی که در دامنه توسعه وب کار می‌کنند. برخی از مزایای کلیدی یادگیری HTML را فهرست می کنیم:
- ایجاد وب سایت – اگر HTML را به خوبی بدانید، می توانید یک وب سایت ایجاد کنید یا یک قالب وب موجود را برای خودتان سفارشی سازی کنید.
- یک طراح وب شوید – اگر می خواهید به عنوان یک طراح وب حرفه ای برای خودتان کاری دست و پا کنید، طراحی HTML و CSS یک مهارت ضروری است.
- درک وب – اگر می خواهید وب سایت خود را بهینه کنید، سرعت و عملکرد آن را افزایش دهید، خوب است که HTML را بدانید تا بهترین نتیجه را داشته باشید.
- زبان های دیگر را بیاموزید – هنگامی که اصول HTML را درک کردید، سایر فناوری ها و زبان های برنامه نویسی مرتبط مانند جاوا اسکریپت، php یا angular برای درک آسان تر می شوند.
کاربردهای HTML
HTML یکی از پرکاربردترین زبان ها در دنیای وب است. برخی از کاربردهای اساسی زبان HTML عبارتند از:
- توسعه صفحات وب – HTML برای ایجاد صفحاتی که از طریق وب ارائه می شوند استفاده می شود. تقریباً هر صفحه وب دارای تگ‌های html برای نمایش جزئیات آن در مرورگر است.
- ناوبری اینترنتی – HTML برچسب هایی را ارائه می دهد که برای پیمایش از یک صفحه به صفحه دیگر استفاده می شود و به شدت در ناوبری اینترنتی استفاده می شود.
- رابط کاربری واکنشگرا – صفحات HTML به دلیل استراتژی طراحی واکنش گرا، امروزه در همه پلتفرم ها، موبایل ها، تبلت ها، دسکتاپ یا لپ تاپ ها به خوبی کار می کنند.
- پشتیبانی آفلاین – صفحات HTML پس از بارگیری می توانند به صورت آفلاین در دستگاه بدون نیاز به اینترنت در دسترس قرار گیرند.
- توسعه بازی – HTML5 دارای پشتیبانی کاملی برای یک تجربه غنی بصری است و اکنون در عرصه توسعه بازی نیز مفید است.
Hypertext Markup Language یعنی چه ؟
همانطور که قبلا گفتیم HTML مخفف Hypertext Markup Language است پس بیایید دقیقتر بررسی کنیم :
- Hypertext به روشی اشاره دارد که در آن صفحات وب (اسناد HTML) به یکدیگر مرتبط می شوند. بنابراین، پیوند موجود در یک صفحه وب، Hypertext نامیده می شود.
- Markup Language – همانطور که از نام آن پیداست، HTML یک زبان نشانه گذاری است که به این معنی است که شما از HTML برای “علامت گذاری” یک سند متنی از برچسب ( تگ ) هایی استفاده می کنید که به مرورگر وب می گوید چگونه آن را برای نمایش ساختار بندی کند.
در واقع همانطور که در بالا اشاره شد ، HTML با هدف تعریف ساختار اسناد مانند سرفصل ها، پاراگراف ها، فهرست ها و غیره توسعه داده شد تا به اشتراک گذاری اطلاعات علمی بین محققان را تسهیل کند.این ساختار ها با کمک تگ های مختلف موجود در زبان HTML قابل پیاده سازی می باشد.
تگ های پایه HTML
HTML یک زبان نشانه گذاری است و از برچسب های مختلف برای قالب بندی محتوا استفاده می کند. این تگ ها در داخل پرانتزهای زاویه ای مانند : <نام برچسب (تگ)> ،محصور شده اند. به جز چند تگ، بیشتر تگ ها دارای تگ های بسته مربوط به خود هستند.
برای مثال، <html> دارای تگ بسته <html/> و تگ <body> دارای تگ بسته شدن <body/> و غیره است. یعنی به این صورت که در ابتدا تگ <body> نوشته شده سپس محتوای مورد نظر پس از آن درج می شود و در انتها باید تگ body به صورت <body/> بسته شود.
به مثال زیر توجه کنید:
<html>
<head>
محتوایی که در میان تگ هد قرار می گیرد
</head>
<body>
محتوایی که در میان تگ بدنه قرار میگرد.
</body>
</html>
توجه نمایید که محتوای مورد نظر ما که می تواند شامل کد های html باشد و قرار است در قسمت بدنه یا همان bady قرار بگیرد باید با تگ <body> شروع و در انتها با تگ <body/> بسته شود .
بررسی تگ های پایه
<!DOCTYPE…> | این تگ نوع سند و نسخه HTML را مشخص می کند. |
<html> | این تگ سند کامل HTML را در بر می گیرد و عمدتاً شامل سرصفحه سند است که با <head>…</head> و بدنه سند که با تگ <body>…</body> نشان داده می شود. |
<head> | این تگ نشان دهنده هدر سند است که می تواند سایر تگ های HTML مانند <title>، <link> و غیره را نگه دارد. |
<title> | تگ <title> در داخل تگ <head> برای ذکر عنوان سند استفاده می شود. |
<body> | این تگ نمایانگر بدنه سند است که تگ های HTML دیگر مانند <h1>, <div>, <p> و غیره را نگه می دارد. |
<h1…6> | این تگ نشان دهنده عنوان یا سر تیتر است. |
<p> | این تگ نشان دهنده یک پاراگراف است. |
برای یادگیری HTML، باید تگ‌های مختلف را مطالعه کنید و درک کنید که چگونه یک سند متنی را قالب‌بندی کنید. یادگیری HTML ساده است زیرا تنها باید استفاده از برچسب های مختلف را یاد بگیرید تا متن یا تصاویر را قالب بندی کنید و یک صفحه وب زیبا بسازید.
اولین تگ که باید آن را بشناسید
تگ اعلان <DOCTYPE!> توسط مرورگر وب برای درک نسخه HTML استفاده شده در صفحه وب ،مورد استفاده قرار می گیرد. نسخه ای که ما نیز بر اساس آن سری آموزش های HTML به زبان ساده را پیش می بریم نسخه HTML 5 است و به شکل زیر استفاده می شود .
<!DOCTYPE html>لازم به ذکر است که شما باید این قطعه کد را در ابتدا تمامی صفحات HTML که طراحی میکنید قرار دهید البته بدون این کد نیز صفحات شما معمولا به درستی توسط مرورگر نمایش داده می شود اما از دیدگاه گوگل و مرورگر های وب عدم وجود این کد در ابتدای صفحات یک ارور محسوب شده و یک نمره منفی در سئو سایت محسوب می شود.
بسیاری از انواع دیگر تگ اعلان وجود دارد که بسته به اینکه با چه نسخه ای از HTML کار می کنید مورد استفاده قرار می گیرد. در قسمت های بعدی آموزش HTML به زبان ساده، درباره تگ <…DOCTYPE!> همچنین سایر تگ های HTML، جزئیات بیشتر و دقیق تری در این مورد خواهیم دید.
اهداف سری آموزش های HTML به زبان ساده
سری آموزش های HTML به زبان ساده برای طراحان و توسعه دهندگان وب با نیاز به درک HTML با جزئیات کافی همراه با نمای کلی ساده و مثال های عملی آن طراحی شده است. این آموزش به شما مواد لازم برای شروع کار با HTML را می دهد، جایی که می توانید خود را در سطح بالاتری از تخصص قرار دهید.
به همین منظور تمامی موارد لازم برای فراگیری زبان برنامه نویسی HTML به صورت بخش بندی شده از سطح مبتدی تا پیشرفته توسط فایل گپ برای شما کاربران گرامی آماده گردیده است و سعی شده که تمامی مفاهیم به دور از پیچیدگی و به زبان ساده بیان شود و همراه هرمفهوم انواع مثال ها نیز ارایه شود تا بتوانید به ساده ترین و راحت ترین حالت ممکن HTML را بیاموزید .
با سری آموزش های رایگان HTML به زبان ساده همراه ما باشید …
