تاریخ انتشار:۱۱:۲۹ ۱۳۹۸/۶/۱۷
آموزش html - جلسه دوم
در این فصل قصد داریم چند مورد از تگ های رایج در سند HTML را به طور اجمالی بررسی کنیم. قصد ما در این نوشته آموزش کامل این عناصر نیست و صرفا آشنایی مقدماتی هست.
HTML زبان نشانه گذاری استاندارد برای طراحی صفحات وب هست.
- HTML مخفف Hyper Text Markup Language به معنای زبان نشانه گذاری فرامتن است
- عناصر 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 >
توضیح عناصر به کار برده شده در مثال :
<!DOCTYPE html> مشخص میکند که نوع سند استفاده شده HTML5 است.
<html> عنصر ریشه برای دیگر عناصر صفحه ی HTML است.
<head> شامل اطلاعاتی در مورد سند مورد نظر بوده و البته ارجاعات فایل های CSS و JavaScript میتواند در آن قرار بگیرد.
<title> عنوان صفحه ی HTML را مشخص میکند.
<body> یا بدنه ی سند HTML حاوی عناصری هست که در خروجی مرورگر نمایش داده میشود.
<h1> مهمترین عنوان نوشته ی ما را در سند HTML مشخص میکند
<p> یک پاراگراف را در سند HTML مشخص میکند.
تگ ها در HTML
تگ های HTML همان نام عناصر هستند که به وسیله ی علامت های کوچکتر و بزرگتر احاطه شده اند :
<tagname >content goes here... </tagname >
تگ ها در HTML به صورت معمول جفت هستند مانند : <p> و <p/>
اولین تگ ، تگ آغازین و دومین تگ ، تگ پایانی نامیده میشود . تگ پایانی همانند تگ آغازین نوشته میشود با این تفاوت که قبل از نام عنصر یک اسلش قرار میگیرد.
نکته : تگ آغازین با نام تگ باز و تگ پایانی با نام تگ بسته نیز نامیده میشوند.
مرورگرهای وب
هدف یک مرورگر اینترنتی مانند کروم ، اینترنت اکسپلورر ، فایرفاکس و سافاری خواندن اسناد HTML و نمایش محتوای آنهاست. مرورگر ها تگ های HTML را نمایش نمیدهند ولی از آنها برای چگونگی نمایش محتوای صفحه استفاده میکنند.
پیکره اصلی یک صفحه ی HTML
در نمونه کد زیر میتوانید ساختار اصلی یک صفحه ی HTML را مشاهده کنید :
<html >
<head >
<title >Page title </title >
</head >
<body >
<h1 >This is a heading </h1 >
<p >This is a paragraph. </p >
<p >This is another paragraph. </p >
</body >
</html >
به خاطر داشته باشید که تنها محتویات داخل تگ body در مرورگر قابل نمایش خواهد بود.
تگ <DOCTYPE!>
تگ <DOCTYPE!> نوع سند را مشخص کرده و به مرورگر برای نمایش بهتر صفحه کمک میکند.
این تگ فقط یک بار و آن هم در بالای صفحه قرار میگیرد (قبل از تگ HTML).
تگ <DOCTYPE!> حساس به حروف کوچک و بزرگ نیست و در هر دو حالت برای مرورگر قابل قبول است.
در نمونه کد زیر نحوه ی تعریف تگ نوع سند را مشاهده میکنید :