(html) اچ تی ام ال چیست + آموزش HTML

آموزش اچ تی ام ال HTML

آموزش اچ تی ام ال ارائه نکات کلیدی مقدماتی تا حرفه برای طراحی وب سایت های حرفه ای و فروشگاه های اینترنتی. همراه آموزش html با ما باشید. ما در این مقاله نمی خواهیم شما را در گیر مطالب پایه ای کنیم اگر شما می خواهید اطلاعات پایه داشته باشید اچ تی ام ال چیست را مطالعه نماید.

مقدمه آموزش اچ تی ام ال HTML

در ابتدا می خواهیم مقدمه آموزش html را شروع کنیم. اچ تی ام ال به زبان انگلیسی HTML مخفف عبارت Hyper Text Markup Language که به معنی فارسی زبان نشانه گذاری فرا متن است می باشد. در زیر ساختار کلی اچ تی ام ال را بررسی می کنیم.

<!DOCTYPE html>
<html lang="en">
    <head>
       <title>HTML Syntax</title>
    </head>

    <body>

    </body>
</html>

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

DOCTYPE

تگ doctype مشخص می کند که نسخه HTML در یک سند استفاده می شود. این تأثیر مستقیم در تأیید اعتبار HTML شما دارد یا خیر. به این معنی که اعتبار صفحه شما را تائید می کند.

html

تگ html دارای دو تگ مهم head و body در خود می باشد و بدون این دو تگ صفحه بی معنا است.

Lang

تگ lang مشخص کننده زبان وب سایت شماست . برای مثال در سایت های فارسی زبان از fa  و در سایت های انگلیسی زبان از en مطابق با مثال استفاده می شود. برای مشاهده تمامی lang های موجود مقاله ای منتشر خواهد شد.

head

تگ head همانطور که از اسمش مشخص است عناصر هد صفحه را شامل می شود که در مثال ما فقط تگ title یا عنوان در آن قرار دارد اما در طراحی سایت باید تگ های دیگر نیز به آن اضافه کرد. توجه داشته باشید ساختار فعلی تگ head در مثال بالا قابل قبول می باشد اما در طراحی وب سایت عناصر دیگر نیز به آن اضافه خواهد شد که در ادامه به آن می پردازیم.

title

تگ title عنوان صفحه را مشخص می کند که در قسمت نوار ابزار مرورگر قابل مشاهده است.

body

تگ body یا بدنه وب سایت تمامی عناصر نمایشی در مرورگر برای مشاهده کاربر را در بر می گیرد.

طریقه نوشتن کدهای HTML

اگر دقت گرده باشید تمامی تگ ها دو بار تکرار شده اند, بله در زبان کدنویسی HTML اکثر تگ ها به غیر از تعداد محدودی مانند تگ img به صورت باز و بسته نوشته می شوند. در قدم اول قبل از نوشتن تگ آن را در علامت بزرگتر و کوچکتر قرار می دهیم <> و کد مورد نظر را داخل آن می نویسیم برای مثال برای نوشتن عنوان صفحه با تگ title ابتدا آن را در علامت بزرگتر و کوچکتر نوشته و سپس عنوان مورد نظر را وارد می نمایم سپس تگ را می بندیم. برای بستن تگ بعد از علامت کوچکتر اسلش قرار می دهیم مطابق با مثال زیر. بنابراین دقت داشته باشید در ادامه آموزش اچ تی ام ال برای استفاده از تگ ها هر جا آنها را باز کردیم در انتها باید آنها را ببندیم.

<title>HTML Syntax</title>

برای یادگیری نام علامت ها در کدنویسی حتما مطلب “علامت ها در کدنویسی و برنامه نویسی” را مطالعه فرماید.

زیبا نویسی

در آموزش html اگر می خواهید کدنویسی را به صورت حرفه ای یادبگیرید حتما کدهای خود را با فاصله و رعایت باز و بسته شدن های آنها بنویسید. در مثال اول دقت کنید کد اچ تی ام ال در خط دوم باز شد و در خط دهم بسته شد که در موازات هم قرار گرفته اند و به دلیل اینکه تمامی کدهای دیگر در زیرمجموعه تگ اچ تی ام ال هستند از تگ بزرگتر که head و body می باشند و هر دوی آنها یک اهمیت دارند.

در درجه اول یک خط جلو رفته به معنی کوچکتر بودن از تگ html و در قسمت بعدی وقتی بسته شده اند موازی هم بسته شده اند. حال تگ title چون زیر مجموعه تگ head است یک خط جلوتر رفته و چون در یک خط قرار دارد در همان خط نیز بسته شده.

زیبا نویسی در کدنویسی باعث خوانایی کدها برای خودتان و اشخاص دیگر می شود و باعث شده در تریس کردن کدها کمتر دچار خطا شوید.

آزمایش اول

برای آزمایش کدهای گفته شده در مثال یک را در نرم افزار notepad++ نوشته و با فرمت .html ذخیره نماید و خروجی را بررسی نماید.

بررسی کدهای زیر مجموعه تگ head

همانطور که در مثال یک مشاهده کردید ساختار اصلی html گفته شد و زیر مجموعه تگ html متشکل از تگ head و تگ body بود. حال می خواهیم به مهمترین تگ های کاربردی زیرمجموعه تگ head بپردازیم و در مثال زیر ساختار کلی آن را نمایش و سپس تک تک آنها را بررسی می نمایم.

اطلاعات بروز می شود.

دیدگاه‌ خود را بنویسید

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

حل کنید : *
25 − 12 =