معرفی عناوین و خصوصیات HTML
اگر قصد داشته باشید با HTML کار کنید، سر و کار داشتن با attributes یا همان خصوصیت در HTML برای شما اجتناب ناپذیر خواهد بود. همچنین مبحث عنوان یا تیتر در HTML هم مقوله‌ای است که می‌تواند هم روی ظاهر سایت شما تاثیرگذار باشد، هم به صورت مستقیم روی سئو سایت تاثیر بگذارد. در قسمت سوم آموزش HTML مقدماتی، با لیداوب همراه باشید تا بیشتر با این عامل مهم طراحی سایت آشنا شوید.
خصوصیات یا attributes در HTML
Attribute یا خصوصیات HTML در واقع اطلاعات بیشتری در مورد عناصر HTML ارائه می‌دهند. تمام عناصر HTML می‌توانند دارای خصوصیت باشند. خصوصیات HTML همیشه در تگ آغازین مشخص شده و در جفت‌های نام/ مقدار (name=”value”) می‌آیند.
خصوصیت href
همان‌طور که در درسنامه قبل گفتیم لینک‌های HTML با تگ تعریف می‌شوند. آدرس لینک مورد نظر در خصوصیت href مشخص می‌شود که در زیر یک نمونه از آن را میتوانید ببینید:
<a href="https://www.lydaweb.com">This is a link</a>خصوصیت src
تصاویر HTML با تگ <img> مشخص می‌شوند. نام فایل منبع تصویر در خصوصیت src مشخص می‌شود:
<img src="img_girl.jpg">خصوصیات عرض و طول
تصاویر در HTML دارای مجموعه‌ای از خصوصیات اندازه هستند که عرض و ارتفاع تصویر را مشخص می‌کند:
<img src="img_girl.jpg" width="500" height="600">اندازه تصویر به صورت پیکسل مشخص می‌شود مثلا width= “500” یعنی عرض تصویر ۵۰۰ پیکسل باشد.
خصوصیت alt
خصوصیت alt نشان‌دهنده متن جایگزین است که در صورت عدم توانایی مرورگر جهت نمایش تصویر باید به کار رود. مقدار این خصوصیت می‌تواند توسط صفحه‌خوان‌ها خوانده شود.
<img src="img_girl.jpg" alt="Girl with a jacket">خصوصیت alt در زمانی که تصویری وجود نداشته باشد هم مفید است. در زیر مثالی را خواهید دید که در آن تلاش بر نمایش تصویری می‌شود که وجود ندارد:
<img src="img_typo.jpg" alt="Girl with a jacket">خصوصیت style
خصوصیت style برای مشخص کردن آرایش و استایل یک عنصر مثل رنگ، فونت، اندازه و سایر موارد به کار می‌رود در زیر یک نمونه از این خصوصیت خواهید دید:
<p style="color:red">I am a paragraph</p>خصوصیت lang
زبان سند را می‌توان در تگ <html> و با خصوصیت lang مشخص کرد. مشخص کردن زبان برای دسترسی‌پذیری اپلیکیشن‌ها (صفحه‌خوان) و موتورهای جستجو ضروری است:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>دو حرف اول (en) زبان را مشخص می‌کند. اگر گویش خاصی مد نظر باشد با دو حرف دیگر (US) مشخص خواهد شد.
خصوصیت title
در اینجا خصوصیت title به عنصر <p> اضافه می‌شود. وقتی اشاره‌گر ماوس را روی پاراگراف قرار دهید، مقدار خصوصیت title به صورت یک تولتیپ (tooltip) نمایش داده خواهد شد:
<p title="I'm a tooltip">
This is a paragraph.
</p>از خصوصیات با حروف کوچک استفاده کنید
در استاندارد HTML5 نیازی به نوشتن نام خصوصیات با حروف کوچک نیست. خصوصیت عنوان را می‌توان با حروف کوچک (title) یا حروف بزرگ (TITLE) نوشت اما کنسرسیوم وب جهانی توصیه به استفاده از حروف کوچک در HTML می‌کند.
مقادیر خصوصیات را در علامت نقل قول قرار دهید
استاندارد HTML شما را مقید به قرار دادن مقادیر خصوصیات در داخل علامت نقل قول نمی‌کند اما بهتر است این کار را انجام دهید. خصوصیت href که در بالا آمد را می‌توان به صورت زیر نوشت:
<a href=https://www.lydaweb.com>کنسرسیوم وب جهانی توصیه می‌کند در HTML از علامت نقل قول استفاده شود. گاهی لازم است از علامت نقل قول استفاده شود. مثال زیر خصوصیت title را به درستی نشان نمی‌دهد چون بین دو کلمه یک اسپیس خورده است. حذف علامت نقل قول می‌تواند منجر به بروز خطا شود:
<p title=About lydaweb>نقل قول جفت یا تکی
استفاده از نقل قول جفتی پیرامون مقادیر خصوصیات HTML رایج‌ترین روش در این زبان است اما می‌توان از نقل قول تکی هم استفاده کرد. در بعضی از موقعیت‌ها وقتی مقدار یک خصوصیت خود حاوی نقل قول جفتی باشد لازم است که از نقل قول تکی استفاده کرد:
<p title='John "ShotGun" Nelson'>یا بالعکس:
<p title="John 'ShotGun' Nelson">عنوان در HTML
عنوان یا Heading در HTML با تگهای <h1> تا <h6> تعریف می‌شوند. تگ <h1> مهم‌ترین عنوان و <h6> کم اهمیت‌ترین عنوان را مشخص می‌کنند. در نمونه زیر این ترتیب رعایت شده است:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>به یاد داشته باشید که مرورگرها به صورت خودکار قبل یا بعد از عنوان کمی فضای سفید اضافه می‌کنند.
عنوان ها مهم هستند
موتورهای جستجو از عنوان‌ها برای ایندکس کردن ساختار و محتوای صفحات وب سایت شما استفاده می‌کنند. کاربران از طریق عنوان‌هایی که برای صفحات خود انتخاب کرده‌اید به محتوای آن‌ها پی می‌برند. بنابراین باید از عناوینی استفاده کنید که ساختار سند شما را نشان دهند. عنوان‌های <h1> باید برای عناوین اصلی استفاده شده و به دنبال آن عنوان <h2> قرار گرفته و پس از آن به ترتیب عنوان‌های کم اهمیت‌تر <h3> و بقیه قرار خواهند گرفت. یادتان باشد که از عنوان‌های HTML برای بزرگ یا برجسته کردن متن استفاده نکنید.
عنوان های بزرگ تر
هر عنوان HTML دارای یک اندازه پیش‌فرض است. البته شما میتوانید اندازه هر یک از عنوان‌ها را با خصوصیت style مشخص کنید که در زیر یک نمونه از آن را می‌بینید:
<h1 style="font-size:60px;">Heading 1</h1>ترسیم خط افقی در HTML
تگ <hr> یک شکست در متن موجود در صفحه HTML ایجاد می‌کند و اغلب به شکل یک خط افقی نمایش داده می‌شود. عنصر <hr> برای تفکیک محتوا (یا تعریف یک تغییر) در یک صفحه HTML به کار می‌رود. در زیر یک نمونه استفاده از این تگ را مشاهده خواهید کرد:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>عنصر <head> در HTML
عنصر <head> در HTML هیچ ارتباطی با عناوین HTML ندارد. این عنصر دربردارنده‌ی متا دیتا یا ابر داده است. ابرداده در واقع داده‌هایی در مورد آن سند HTML است که در صفحه وب سایت نمایش داده نمی‌شود. عنصر <head> بین تگ <html> و تگ <body> قرار می گیرد:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات سند را تعریف می‌کند.
چطور منبع HTML را مشاهده کنیم؟
تا به حال شده است یک صفحه از وب سایتی را مشاهده کرده و از خود بپرسید سازندگان آن چطور همه آن کارها را کرده‌اند؟ کافی است روی صفحه مورد نظر کلیک راست کرده و گزینه «View Page Source» در مرورگر کروم یا «View Source» در اینترنت اکسپلورر و گزینه‌های مشابه در دیگر مرورگرها را انتخاب کنید. با این کار پنجره‌ای باز می‌شود که حاوی کد منبع HTML آن صفحه است. روی یک عنصر یا در یک ناحیه خالی کلیک راست کرده و گزینه «inspect» یا «inspect element» را انتخاب کنید تا ببینید عناصر از چه کدهایی (HTML و CSS) ساخته شده‌اند. همچنین میتوانید به عنوان تمرین کدهای صفحه را برای خود تغییر داده و نتیجه را مشاهده کنید (این کدها در وب سایت اصلی ذخیره نخواهند شد).
اگر برای طراح سایت شدن از آموزش HTML در لیداوب شروع کرده‌اید، مسیر درستی را در پیش گرفته‌اید. اگر با قسمت بعدی مقاله همراه باشید، پاراگراف و استایل‌ها در HTML را با هم بررسی می‌کنیم. تا قسمت بعدی مقاله درس‌های پیشین را مرور کنید و چند نمونه تمرین انجام بدهید.
منبع : لیدا وب
سلام و وقت بخیر
چیزی که دنبالش بودم را توی اینترنت خیلی دنبال اون گشتم تا نهایت به سایت شما وارد شدم دقیقا همون چیزی که نیاز داشتم را از توی سایت شما پیدا کردم.
مرکز فروش ماهی خوراکی در تهران
براتون آرزوی موفقیت و پیروزی دارم.