کسب در آمد از فورکیا
انواع ویژگی های مهم در اچ تی ام ال

انواع ویژگی های مهم در اچ تی ام ال


در این پست به بررسی و توضیح مهمترین و پرکاربردترین ویژگی های اچ تی ام ال می پردازیم.

ویژگی src

تصاویر در زبان اچ تی ام ال با تگ <img> تعریف می شوند. برای اینکه بتوانیم یک تصویر را در صفحه وب به نمایش بگذاریم ابتدا باید آنرا آپلود نماییم؛ سپس لینکی که به ما داده می شود را در ویژگی src قرار دهیم. ما تصویر لوگوی گوگل را در وبسایت uupload.ir آپلود کردیم و از لینکی که به ما داده شده در عنصر زیر استفاده می کنیم.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>ویژگی src</title>

</head>

<body>

<img src="http://uupload.ir/files/p5r_گوگل.png<"

</body>

</html>

نتیجه:

 ویژگی src

ویژگی alt

هنگامی که مرورگر وب نتواند یک تصویر را در صفحه اچ تی ام ال شناسایی کند و نمایش دهد از ویژگی alt استفاده می کند و یک متن جایگزین به جای تصویر نمایش می دهد.

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

توجه: مقدار تگ alt فقط زمانی نمایش داده می شود که تصویر نمایش داده نشود.

در مثال زیر ما یک آدرس تصویر اشتباه را وارد می کنیم تا نمایش داده نشود و به جای آن متن جایگزین نمایان شود.

مثال:

<!DOCTYPE html>

<html>

<head>

<Title>ویژگی alt</title>

</head>

<body>

<img src="img.png"alt="این متن جاگزین تصویر است">

</body>

</html>

نتیجه:

 ویژگی alt

ویژگی style

ویژگی استایل برای تغییر مشخصات ظاهری یک عنصر مانند: رنگ، فونت، اندازه و غیره استفاده می شود. ویژگی استایل امروزه بیشتر در زبان CSS مورد استفاده قرار می گیرد.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>ویژگی style</title>

</head>

<body>

<p style="color:red">یک پاراگراف با رنگ قرمز</p>

</body>

</html>

نتیجه:

 ویژگی style

ویژگی lang

زبان سند را می توان در تگ <html> مشخص کرد. نوع زبان با ویژگی lang تعریف می شود. اعلام زبان سند اچ تی ام ال برای برنامه های دسترسی (خوانندگان صفحه نمایش) و موتورهای جستجو مانند گوگل و یاهو اهمیت دارد.

در مثال زیر ما از fa برای که دو حرف اول Farsi است استفاده کردیم و در ادامه از IR که دو حرف اول Iran است استفاده کردیم.

مثال:

<!DOCTYPE html>

<html lang="fa-IR">

<head>

<title>ویژگی lang </title>

</head>

<body>

</body>

</html>

این ویژگی تغییری در قسمت بدنه ی سند ایجاد نمی کند.

ویژگی title

ویژگی title یک عنوان شناور را به عنصر اضافه می کند. در مثال زیر ما ویژگی عنوان را به یک لینک اضافه می کنیم.

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

مثال:

<!DOCTYPE html>

<html>

<head>

<title>ویژگی title</title>

</head>

<body>

<a href="https://google.com"title="وبسایت گوگل">لینک</a>

</body>

</html>

نتیجه:

ویژگی title

ویژگی height و width

در یک سند اچ تی ام ال می توان عرض و ارتفاع یک تصویر را مشخص نمود. با استفاده از یک مقدار عددی برای width و height می توان اندازه تصویر را تغییر داد. در ادامه بیشتر در مورد تصاویر در اچ تی ام ال صحبت خواهیم کرد.

در مثال زیر ما از همان تصویر لوگوی گوگل که در مثال های قبل استفاده کردیم، مجددا استفاده می کنیم و مشاهده می کنیم که اندازه تصویر متفاوت شده است.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>ویژگی عرض و ارتفاع</title>

</head>

<body>

<img src=" http://uupload.ir/files/p5r_گوگل.png " alt="لوگوی گوگل"width="250" height="250">

</body>

</html>

نتیجه:

 ویژگی عرض و ارتفاع

ویژگی class

از ویژگی class برای ارتباط یک عنصر با style sheetاستفاده می شود، و class عنصر را مشخص می کند. برای یادگیری استفاده از ویژگی class باید دوره ی آموزشی Cascading Style Sheet یا همان CSS را بگذرانید. بنابراین اکنون می توانید از این موضوع عبور کنید.

مقدار ویژگی class می تواند یک لیست از نام class های جدا شده با فضای خالی باشد.

مثال:

Class="class1 class2 class3"

ویژگی id

از ویژگی id برای شناسایی عناصر درون یک صفحه اچ تی ام ال استفاده می شود. معمولا طراحان وب به دو علت از id استفاده می کنند:

1- اگر به یک عنصر ویژگی id را اضافه کنند، می توانند با لینک کردن آن کاربران را به سمت همان عنصر در صفحه هدایت کنند.

2- اگر دو عنصر همنام در یک صفحه وب داشته باشید و بخواهید تمایز بگذارید می توانید از ویژگی id استفاده کنید.

در مورد این ویژگی در آینده بیشتر صحبت خواهیم کرد. در مثال زیر برای نام گذاری دو عنصر از ویژگی عنصر استفاده می کنیم.

مثال:

<p id="html" >این عنصر پاراگراف است که با مقدار اچ تی ام ال نام گذاری شده است</p>

<p id="css" >این یک عنصر پاراگراف است که با مقدار سی اس اس نام گذاری شده است</p>

ویژگی dir

این ویژگی همانند lang در تگ <html> به کار برده می شود. و جهت کلی متن ها را در سند اچ تی ام ال مشخص می کند. در حالت پیشفرض جهت متن ها در صفحه اچ تی ام ال از چپ به راست (انگلیسی) است و برای زبان های فارسی و عربی باید از ویژگی dir برای تغییر جهت متن ها استفاده کنیم.

جهت محتوا به صورت پیشفرض ltr است و نیاز نیست برای سندهای انگلیسی زبان از این ویژگی استفاده کنیم.

مثال:

<!DOCTYPE html>

<html dir="rtl">

<head>

<title>ویژگی dir</title>

</head>

<body>

<p>این یک متن از راست به چپ است.</p>

</body>

</html>

نتیجه:

 ویژگی dir

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی