یک آموزش ساده کد نویسی با HTML (بخش دوم)
در مطلب گذشته اطلاعات اولیه درباره کد نویسی با HTML را ارائه کردیم . در این مقاله ادامه آموزش پی خواهیم گرفت.
المان های خالی
برخی از عناصر هیچ محتوایی ندارند و عناصر خالی نامیده می شوند. عنصر <img> را که قبلاً در صفحه HTML (در مطلب گذشته) خود داریم ، بردارید:
<img src=”images/firefox-icon.png” alt=”My test image“>
این شامل دو ویژگی است ، اما هیچ تگ بسته </ img> و محتوای داخلی وجود ندارد.چرا که عنصر تصویر محتوا را برای تأثیرگذاری روی آن دربر نمی گیرد. هدف آن جاسازی یک تصویر در صفحه HTML در جایی است که ظاهر می شود.
آناتومی یک سند HTML
این اصول اساسی عناصر HTML منحصر به فرد را پیچیده می کند ، اما آنها به تنهایی مفید نیستند. اکنون ما به چگونگی ترکیب عناصر جداگانه برای تشکیل یک صفحه HTML کامل خواهیم پرداخت. بیایید کدی را که در مثال index.html خود قرار داده ایم (که اولین بار در مقاله برخورد با پرونده ها ملاقات کردیم) مرور کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8“>
<title>My test page</title>
<head/>
<body>
<img src=”images/firefox-icon.png” alt=”My test image“>
<body/>
<html/>
در اینجا ، موارد زیر را داریم:
- <! DOCTYPE html> – نوع اولیه . مقدمه لازم است. در زمان های مختلف ، مثلا حدود سال های ۱۹۹۱/۹۲ ، انواع اولیه به معنای پیوند به مجموعه ای از قوانین بود که صفحه HTML باید آنها را دنبال می کرد تا HTML خوبی بنظر برسد ، که می تواند به معنای بررسی خودکار خطا و سایر موارد مفید باشد . با این حال این روزها ، کارایی زیادی ندارند و اساساً فقط برای اطمینان از عملکرد صحیح سند لازم هستند. این همه آن چیزی است که فعلاً باید بدانید.
- <html> </html> – عنصر <html>. این عنصر تمام مطالب را در کل صفحه قرار می دهد و گاهی اوقات به عنوان عنصر ریشه شناخته می شود.
- <head> </head> – عنصر <head>. این عنصر به عنوان یک ظرف برای همه مواردی است که می خواهید در صفحه HTML قرار دهید ، البته محتوایی نیست که برای بازدید کنندگان صفحه خود نشان می دهید. شامل مواردی مانند کلمات کلیدی و شرح صفحه است که می خواهید در نتایج جستجو نشان داده شود ، CSS برای سبک دادن به محتوای ما ، اعلامیه های مجموعه کاراکترها و موارد دیگر.
- <meta charset=”utf-8″> – این عنصرکاراکتری را که سند شما باید استفاده کند روی UTF-8 تنظیم می کند که شامل بیشتر کاراکترهای اکثر قریب به اتفاق زبانهای نوشتاری است. اساساً ، اکنون می تواند از عهده هر محتوای متنی که روی آن قرار داده اید ، برآید. دلیلی برای تنظیم نکردن این مسئله وجود ندارد و می تواند بعداً از برخی مشکلات جلوگیری کند.
- <title> </title> – عنصر <title>. این عنصر ، عنوان صفحه شما را تنظیم می کند ، همان عنوانی که در browser tab صفحه نمایش داده می شود. همچنین برای توصیف صفحه bookmark/favorite نیز از آن استفاده می شود.
- <body> </body> – عنصر <body>. شامل تمام محتوایی است که می خواهید هنگام بازدید کاربران وب از صفحه شما ، اعم از متن ، تصاویر ، فیلم ، بازی ، آهنگ های صوتی قابل پخش یا موارد دیگر ، به آنها نشان داده شود.
تصاویر
بیایید دوباره توجه خود را به عنصر <img> معطوف کنیم:
<img src=”images/firefox-icon.png” alt=”My test image“>
همانطور که قبلاً گفتیم ، تصویر را در موقعیتی که به نظر می رسد در صفحه ما جاسازی می کند. این کار را از طریق ویژگی src (منبع) انجام می دهد که حاوی مسیر فایل پرونده ما است.
همچنین یک ویژگی alt (جایگزین) نیز آورده ایم. در این ویژگی ، شما ممکن است به دلایل زیر متن توصیفی را برای کاربرانی که نمی توانند تصویر را مشاهده کنند ، توصیف کنید :
- کاربران کم بینا . کاربرانی که دارای ضعف بینایی قابل توجه هستند اغلب از ابزارهایی به نام صفحه خوان استفاده می کنند تا متن alt را برای آنها بخوانند.
- وقتی مشکلی پیش آمده است که باعث عدم نمایش تصویر می شود. به عنوان مثال ، سعی کنید به عمد مسیر داخل ویژگی src خود را تغییر دهید تا نادرست باشد. در صورت ذخیره و بارگیری مجدد صفحه ، باید چیزی شبیه به این را به جای تصویر مشاهده کنید:
کلمات کلیدی برای متن alt “متن توصیفی” هستند . متن alt که می نویسید باید اطلاعات کافی در اختیار خواننده قرار دهد تا بتواند ایده خوبی از آنچه تصویر منتقل می کند داشته باشد. در این مثال ، متن فعلی “تصویر آزمون من” اصلاً خوب نیست. یک گزینه بسیار بهتر برای آرم فایرفاکس
“The Firefox logo: a flaming fox surrounding the Earth”
(“آرم فایرفاکس: روباهی شعله ور است که زمین را احاطه کرده است”) می تواند باشد. سعی کنید هم اکنون متن alt بهتری برای تصویر خود ارائه دهید.
ادامه دارد.. .
نوشته یک آموزش ساده کد نویسی با HTML (بخش دوم) اولین بار در . پدیدار شد.