در این جلسه از آموزش تگ های HTML به معرفی تعداد دیگری از تگ های پرکاربرد و ویژگی های (attribute) آن ها می پردازیم.

ol & ul & li Tags

در صفحات Html ، می توان با استفاده از تگ های مشخص لیست های ترتیبی و  بدون ترتیب ( نشانه ای) را ایجاد کرد .

لیست های ترتیبی –  Ordered List – ol

یک لیست ترتیبی ، مجموعه ای از موارد و آیتم های متفاوت در مورد یک موضوع خاص است که در ابتدای خط تعریف هر آیتم ، یک شماره یا حرف ( نماد نشانه گذاری ) قرار گرفته ، که با معرفی هر آیتم جدید شمارنده یا حرف یک واحد افزایش می یابد .
برای ایجاد لیست های ترتیبی از تگ < ol > مخفف عبارت ( Ordered List ) به معنای لیست های ترتیبی استفاده می شود . هر یک از آیتم های لیست توسط یک تگ درونی < li > در تگ< ol > تعریف می شود . متن بین تگ باز و بسته < li > ، عنوان یا متن آن آیتم است .

نمونه کد و خروجی

لیست های ترتیبی

 

ویژگی های تگ ol

 

خصوصیت مقدار توضیحات
compact compact در HTML5 پشتیبانی نمی شود.
مشخص می کند که لیست باید کوچکتر از حد نرمال نمایش داده شود.
reversed reversed مشخص می کند که لیست به صورت نزولی مرتب شود.(۹ و ۸ و ۷ و…)
start number مقدار شروع لیست مرتب را مشخص می کند.
type ۱
A
a
I
i
مشخص می کند که از چه نوع نشانگری در لیست استفاده شود.

 

نمونه کد و خروجی

لیست های ترتیبی و ویژگی ها

لیست های بدون ترتیب – Unordered List –  ul

یک لیست بدون ترتیب (نشانه ای) ، مجموعه ای از موارد و آیتم های متفاوت در مورد یک موضوع خاص است که در ابتدای خط تعریف هر آیتم ، یک نشانه ( Bullet ) قرار می گیرد .
برای ایجاد لیست های نشانه ای از تگ < ul > مخفف عبارت ( Unordered List ) به معنای لیست های بدون ترتیب استفاده می شود . هر یک از آیتم های لیست توسط یک تگ درونی < li > در تگ< ol > تعریف می شود . متن بین تگ باز و بسته < li > ، عنوان یا متن آن آیتم است .

نمونه کد و خروجی

لیست های بدون ترتیب

 

ویژگی های تگ ul

خصوصیت مقدار توضیحات
type disc
circle
square
none
مشخص می کند که از چه نوع نشانگری در لیست استفاده شود.
disc : دایره های توپر
circle : دایره های توخالی
square : مربع توپر
none : نشانه ای نمایش داده نشود

نمونه کد و خروجی

لیست های بدون ترتیب و ویژگی ها

 

تگ li

تگ <li> آیتم های یک لیست را تعریف می کند که در لیست های ترتیبی <ol> و  لیست های غیر ترتیبی <ul>، و در فهرست منو <menu> استفاده می شود که در نمونه کدهای توضیح داده شده با نحوه به کارگیری آن آشنا گردیدید.

 

Br & P Tags

تگ های پاراگراف P , Br برای تراز بندی متون و جملات درون صفحات کاربرد زیادی دارند.

تگ P یا پاراگراف :

متن داخل این تگ بصورت یک پاراگراف در نظر گرفته می شود. در صورت ایجاد یک پاراگراف یا تگ P جدید و یا نوشتن متنی بیرون از تگ P، پاراگراف بعدی به سطر بعد می رود.

نمونه کد و خروجی

تگ پاراگراف

ویژگی های تگ P

خصوصیت مقدار توضیحات
align left
right
center
justify
در HTML5 پشتیبانی نمی شود.
مشخص می کند که متن داخل پاراگراف در چه جهتی تراز شود.

نمونه کد و خروجی

تگ پاراگراف و ویژگی ها

تگ Br :

تگ Br در نقش enter در Word می باشد بدین صورت که خط جدیدی درون پاراگراف ایجاد میکند و نوشته ی بعد از آن را به سطر جدید می برد .

نکته ۱ : استفاده ی زیاد از این تگ مناسب نیست و بهتر است با استفاده از تگ P عمل انتقال به خط جدید انجام گردد ، دلیل اصلی آن کند نمودن سایت در استفاده های زیاد از این تگ می باشد.

نکته ۲ : این تگ، تگ پایانی ندارد.

 

 

 

تگ img 

این تگ نیز از مهمترین تگ ها در طراحی وب سایت می باشد.با استفاده از این تگ شما می توانید عکس دلخواه را به وب سایت خود اضافه کنید.توجه داشته باشید که سایز عکس نباید زیاد باشد.

 

ویژگی های تگ img

خصوصیت مقدار توضیحات
align top
bottom
middle
left
right
در HTML5 پشتیبانی نمی شود.
نحوه تراز بندی <img> نسبت به عناصر اطراف را مشخص می کند.
alt text خصوصیت alt یک alternate text یا “متن جایگزین” را برای یک تصویر مشخص می کند.
border pixels در HTML5 پشتیبانی نمی شود.
ضخامت (border) اطراف عکس را مشخص می کند.
crossorigin anonymous
use-credentials
اجازه می دهد با استفاده از canvas که تصاویری که متعلق به سایت های سوم شخص است و اجازه دسترسی متقابل به مبدا را می دهند، نمایش داده شود.
height pixels برای مشخص کردن طول یک عکس استفاده می شود.
hspace pixels در HTML5 پشتیبانی نمی شود.
فضای خالی طرف راست و چپ تصویر را مشخص می کند.
ismap ismap تصویر را به عنوان یک image-map سمت سرور مشخص می کند.
longdesc URL در HTML5 پشتیبانی نمی شود.
مسیر فایلی که اطلاعات کاملی در رابطه با عکس مورد نظر نگهداری می کند را مشخص می کند.
src URL URL تصویر را مشخص می کند.
usemap #mapname یک تصویر را به عنوان یک image-map سمت کاربر مشخص می کند.
vspace pixels در HTML5 پشتیبانی نمی شود.
فضای خالی بالا و پایین یک تصویر را مشخص می کند.
width pixels برای مشخص کردن عرض یک عکس استفاده می شود.

 

نمونه کد و خروجی

تگ عکس

تگ a

تگ برای پیوند (لینک ) یک صفحه به صفحه ای دیگر استفاده می شود. از لینک ها در HTML ، برای پیوند به یک صفحه دیگر در هر جای وب ، پیوند به نقطه یا مکانی در داخل همان صفحه یا صفحه دیگر و یا یک فایل خارجی مثل عکس ،موسیقی ، فیلم و … به سند وب استفاده می شود . شکل کلی ایجاد یک پیوند در (HyperLink) در HTML به صورت زیر است :

< a href=”URL” > متن عنوان پیوند < /a >

به طور پیش فرض، لینک ها در مرورگرها به یکی از روش های زیر، ظاهر می شوند:

  • لینک مشاهده نشده، زیر خط دار و آبی است
  • لینک بازدید، زیر خط دار و بنفش است
  • لینک فعال، زیر خط دار و به رنگ قرمز است

ویژگی های تگ a

در تگ <a> مهم ترین ویژگی href است که نشان می دهد مقصد لینک کجاست.

خاصیت href که از نوع URL است برای تعیین مقصد پیوند به کار می رود .این خاصیت شامل آدرس صفحه یا فایلی است که با کلیک بر روی آن پیوند باز خواهد شد . متن عنوان ، متنی است رنگی و خط زیر دار که نشان دهنده پیوند است .

 

خواص مهم
نام خاصیت نوع خاصیت شرح
Charset Charset – encoding مشخص کننده نوع کدینگ کاراکترهای صفحه مقصد است .
Coords ابتدا به خاصیت shape توجه کنید .
مشخص کننده مختصات نقاط مختلف یک چند ضلعی (مربع ، مستطیل و … ) برای تعیین قسمتی
از یک عکس یا نقشه به عنوان ناحیه ای قابل کلیک شدن برای ایجاد پیوند است که دارای
حالت های زیر است :rect : مربع . تعیین کننده مختصات چهار نقطه مختلف یک مربع یا مستطیلcoords =left,top,right,bottom
circ : دایره . مشخص کننده نقطه مرکز و شعاع یک دایرهcoords=center X, center Y ,radius
poly : چند ضلعی مشخص کننده مختصات انواع نقاط مختلف یک چند ضلعیcoords = X1 Y1, X2 Y2, … , Xn Yn
href URL

مسیر و نام فایل

برای تعیین آدرس کامل صفحه یا فایل مقصد پیوند به کار می رود .
hreflang language
نام زبان
مشخص کننده زبان اصلی و پیش فرض صفحه مقصد پیوند است .
name text

نام منحصر به فرد

برای تعیین یک نام برای ایجاد لنگر به کار می رود .
rel alternate
designates
stylesheet
start
next
prev
contents
index
glossary
chapter
section
appendix
help
bookmark
تعیین کننده نوع ارتباط بین صفحه جاری و صفحه مقصد پیوند است که می تواند یکی از حالت
های زیر باشد :alternate : یک در میانdesignates : انتخاب شدهstylesheet : صفحه قالب دهی (CSS)start : ابتداnext : بعدیpre : صفحه قبلی

contents : صفحه محتویات

index : صفحه آغازین

chapter : بخش

section : بخشی از برنامه

appendix : ضمیمه

help : صفحه یا فایل راهنما

bookmark : یک لنگر در همان صفحه یا صفحه ای دیگر

rev تعیین کننده نوع ارتباط بین صفحه مقصد پیوند و صفحه جاری است (بر عکس rel ) و دارای
همان مقادیر است.
shape rect
rectangle
circ
circle
poly
polygon
چنانچه پیوند ناحیه ای از یک عکس یا نقشه تصویری باشد که قابل کلیک شدن است ، نوع شکل
ناحیه قابل کلیک شدن را مشخص می کند ، که مختصات آن توسط خاصیت coords در همین تگ مقدار
دهی می شود . انواع اشکال ممکن عبارتند از :
rect , rectangle : مربع یا مستطیلcirc , circle : دایره یا بیضیpoly , polygon : چند ضلعی
target _blank
_parent
_self
_top
نحوه باز شدن و نمایش پنجره صفحه مقصد را تعیین می کند که دارای حالت های زیر است :
– blank : لینک در یک پنجره جدید باز خواهد شد .- self : لینک در همان پنجره یا قابی که کلیک شده است باز خواهد شد .-parent : لینک در قاب اصلی یا مادر باز خواهد شد .-top : لینک در همان پنجره ای که کلیک شده است به طور کامل باز خواهد شد .

تگ لینک

نکته ۱: اگر ویژگی href تنظیم نشده باشد، هیچ کدام از ویژگی های زیر اثری نخواهند داشت:

download
hreflang
media
rel
target
type
نکته ۲: صفحه لینک شده به طور معمول در پنجره جاری مرورگر نمایش داده می شود، مگر اینکه شما خصوصیت target را برای لینک مذکور تنظیم نمایید.

نکته ۳: برای style دادن به لینک ها از CSS استفاده کنید.

معرفی HTML Tag – جلسه سوم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *