در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه


نکات مربوط به attribute ها


1- ساختار کلی (نه همیشه) یک تگ در اچ تی ام ال به صورت زیر می باشد:

<tagname>Content</tagname>

2- تگهای اچ تی ام ال می توانند تو در تو باشند یعنی برای مثال شما می خواهید متنی را به صورت پاراگراف و عنوان به نمایش در بیاورید خب برای اینکار ابتدا یکی از تگ ها را نوشته سپس تگ بعدی به عنوان محتوای تگ اول شناسایی شده و در بخش محتوای تگ دوم متن را بنویسید.یک قانون کلی تگی که اول از همه باز می شود در آخر از همه نیز بسته خواهد شد. یک مثال ساده:

<h1>
<p>
This text is title also paragraph
</p>
</h1>

توجه داشته باشید که تگ عنوان اول باز شده است و در انتهای همه بسته شده است. به این نوع کدنویسی در اچ تی ام ال تودرتو یا Nested می گویند.

3- تگ های خالی اچ تی ام ال به تگ هایی گفته می شود که علاوه بر اینکه دارای تگ پایانی نیستند برای درست کار کردن احتیاج خاصی به صفتی هم ندارند، مثل تگ <br> ! این تگ برای آن استفاده می شود که یک خط شکسته شود. در اچ تی ام ال برای شکستن خط یا به اصطلاح اینتر کردن باید از این تگ استفاده کنید، زدن دکمه اینتر هیچ کاربردی ندارد. حتی زدن دکمه Space بیش از یک کاراکتر نیز هیچ فایده ای ندارد!

4- نکته ی پایانی، اچ تی ام ال یک زبان حساس به بزرگی یا کوچکی کلمات نیست یعنی نوشتن <P> و <p> با هم برابر هستند و هیچ تفاوتی ندارند، اما من نمیدونم چرا هیچوقت از کلمات بزرگ استفاده نمی کنم پیشنهاد می کنم شما هم استفاده نکنید!

صفات یا Attributes


صفات اطلاعاتی اضافی در مورد تگ ها بوجود می آورند، با صفات می توان دامنه کاربردی تگ ها را گسترش داد. بعضی از تگ ها بدون صفات هیچ کاربردی ندارند برای مثال تگ های <img> , <a> بدون صفات هیچ کاربردی ندارند.

  • تمام تگهای اچ تی ام ال می توانند شامل صفات باشند.
  • صفات اطلاعات اضافی درباره تگ ها می دهند و کاربرد تگ ها را توسعه می بخشند.
  • تمام صفات بدون استثنا در قسمت آغازین تگ ساخته می شوند.
  • هر صفت دارای یک نام/مقدار می باشد. به ساختار زیر توجه داشته باشید:
  • <tagname tagattributes="Value">
    

مثال:

<a href="http://www.tosinso.com"></a>
  • a نام تگ
  • href: نام صفت
  • http:////www.tosinso.com: مقدار صفت

چند صفت مهم و کاربردی در اچ تی ام ال برای تگ ها


  • صفت Lang در تگ HTML : برای تعیین نام سایت که برای مرورگرها بسیار مهم است و همچنین بعضی اوقات گوگل ترانسلیت براساس آن تصمیم به ترجمه سایت می کند صفت Lang می باشد که مربوط به تگ <html> می باشد.
  • <html lang="fa_IR">
    </html>
    یا
    <html lang="en_US">
    </html>
    

اجزای اصلی مقادیر صفت Lang زبان و کشور می باشد، یعنی به صورت زیر استفاده می شود:

(language_country)

زبان و کشور باید به صورت اختصار بیان شود برای نمونه اختصایر چند زبان و کشور در زیر آورده شده است:

فارسی: fa
انگلیسی: en
کردی: ckb
-
ایران: IR
آمریکا: US
انگلیس: UK

توجه داشته باشید که خیلی اوقات کشور تعیین کننده زبان نیز می باشد برای نمونه ما دو نوع فارسی داریم یکی فارسی که در ایران استفاده می شود و فارسی افغانستان یا دری!

صفت title در تگ P: زمانی که میخواهیم برای پاراگراف هایمان یک عنوان قرار دهیم از صفت title استفاده می کنیم اما توجه کنید که این عنوان به صورت تولتیپ ظاهر می شود یعنی زمانی که ماوس روی متن اصلی پاراگراف رفت یا Hover شدبه صورت یک تولتیپ ظاهر میشه کد زیر را اجرا کنید تا متوجه شوید:

<p title="I'm a tooltip">
This is a paragraph.
</p>
  • صفت href در تگ a : تگ a جزو آن دسته از تگ هاست که بدون صفت هیچ کاری را انجام نمیدهد یکی از صفت های این تگ href می باشد که آدرس مربوط به لینک را در آن می نویسیم به مثال زیر توجه کنید:
  • <a href="http://www.tosinso.com">This is a link</a>
    

در این مثلا متنی با عنوان "This is a link" ظاهر می شود که با کلیک روی آن وارد سایت Itpro.ir می شود.

  • صفت های مربوط به تگ img : تگ img نیز مثل تگ a بدون صفت هیچ کاربردی ندارد، اولین صفت مهم این تگ صفت منبع یا src می باشد که آدرس تصویر را معلوم می کند. صفت اندازه در تگ img نیز یکی از مهمترین تگ ها می باشد برای اندازه از دو صفت width و height استفاده میکنیم که در هر دو حالت مقدار عددی با فرمت px همراه است. و آخرین و جالبترین صفت این تگ alt می باشد که برای زمانی مناسب است که آدرس تصویر تغییر کرده باشد یا بنا به هر دلیلی تگ img قادر به نمایش تصویر نباشد، مقدار این صفت نمایش داده می شود. مقدار این صفت همیشه متنی می باشد. به مثال زیر توجه کنید:
  • <img src="c:/1.jpg" width="104" height="142" alt="ITPRO"> 
    

در این کد یک تصویر واقع در آدرس c: با نام 1.jpg ظاهر می شود اگر بنا به هر دلیلی این تصویر نمایش داده نشود متن ITPRO نمایش داده می شود.

چند نکته مهم دراین بخش


  • همانطور که متوجه شدیم مقدار صفات باید در بین دوبل کتیشن قرار بگیرد اما در اچ تی ام ال 5 می توان بدون این علامت هم صفتی را مقدار دهی کرد. با این حال من پیشنهاد میکنم از دوبل کتیشن استفاده کنید.
  • می توانیم از کتیشن و دوبل کتیشن نیز استفاده کرد، مثلا زمانی که در مقداردهی ما به کاراکتر " نیاز داریم(یعنی می خواهیم نمایش دهیم) باید از تک کتیشن استفاده کنیم! مثال:
  • <p title="John 'ShotGun' Nelson">
    یا
    <p title='John "ShotGun" Nelson'> 
    

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

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_قدم_به_قدم_html #آموزش_html_و_css #آموزش_تگ_ها_در_html #آموزش_html #آموزش_طراحی_وبسایت_با_html #html_مقدماتی #آموزش_گام_به_گام_html #آموزش_مقدماتی_html_و_css #استفاده_از_تگ_های_html #آموزش_مقدماتی_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....