HTML --> بخش ۱

با سلام .

تاریخچه
در سال 1992 در دانشگاه مینه سوتا سیستمی به نام web به وجود آمد که دارای دو ویژگی خاص بود.
1.Graphic, Multi Media
2.Hyper Text (فقط کلیک کردن و در سایت حرکت کردن )
صفحات این سیستم توسط برنامه ای به نام HTML ساخته شد.
همچنین برای رد و بدل کردن اطلاعات:

(HTTP ( Hyper Text Transfer Protocol
HTML Web page

•HTML یک text عادی و در حقیقت زبانی برای مارک کردن فایلهای text به یکدیگر می باشد که آن را با TAG مشخص کرده و به صورت < tag name > می نویسند.

فرمت کلی یک فایل HTML:
یک فایل HTML از دو بخش Body و Head ،تشکیل می شود. شکل ساده یک فایل HTML به صورت زیر است.

< HTML >
< HEAD >
< TITLE > This is the title< /TITLE >
< HEAD/ >

This is the body
< BODY/ >
< HTML/ >

نمایش صفحه ای که دارای HTML بالاست...
همان طور که می بینید، در بالای صفحه حاصل،متن نوشته شده در قسمت Title و در بدنه اصلی صفحه متن ما نوشته شده است.

تگ HEAD
در برچسب HEAD از برچسب به نامهای TITLE و BASE و META استفاده می شود.

< HEAD >
< TITLE > < /TITLE >
< META > < /META >
< BASE >
< HEAD/ >

TITLE:
برای تعیین لقب صفحه (چیزی که در قسمت Status Bar دیده می شود
META:
1- برای تعیین نام و منبعی که برنامه توسط آن نوشته شده.
2- بهنگام کردن صفحات web توسط این برچسب انجام می شود.
3- انتقال به یک صفحه دیگر web در زمان معیین.
مثال برای حالت اول: در این حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و google و ...) از META استفاده می کنیم:

< META name="keyword"{اجباری} content="Hedayat, students,zahiri,yaghoubi,schoolnet") >
< META name="description"{اجباری} content="This is Hedayat high school" >

مثال برای حالت دوم و سوم:

< META name="vali "{دلخواه} http_equiv="refresh" content="زمان بر حسب ثانیه" >

با این برچسب صفحه web بعد از 1 دقیقه بهنگام (refresh) خواهد شد.
در مثال بالا اگر در قسمت content به صورت زیر عمل کنیم صفحه web بعد از 60 ثانیه به http://www.schoolnet.ir خواهد رفت:

Content="60; URL= http://www.schoolnet.ir"

BASE:
برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.

< BASE href="آدرس" >
< BASE href="http://www.schoolnet.ir/~zahiri/index.htm" >

نکته مهم: در برنامه نویسی HTML برچسب ها به دو صورت با پایان و بی پایان نوشته می شوند.
1.< TAG >…………………………………< /TAG > با پایان
2.< TAG > بی پایان


تگ BODY
قسمت دوم یک فایل HTML را Body تشکیل می دهد که دارای Attributeهای زیر می باشد.

< BODY bgcolor = “رنگ پس زمینه صفحه”
background = “آدرس عکسی که به عنوان پس زمینه در صفحه وب قرار می گیرد. “
topmargin = “یک فضای خالی بالای صفحه بر حسب پیکسل ایجاد ما کند”
leftmargin = “یک فضای خالی سمت چپ صفحه بر حسب پیکسل ایجاد ما کند”
text ="color” رنگ متن را مشخص می کند
link = “color”

alink = “color” ( active link)
vlink = “color” ( visited link) >

نکته مهم: در برنامه HTML و در نوشتن تگها بزرگ و یا کوچک نوشتن حروف هیچ تاثیری ندارد.

آشنایی با برخی تگها
Font:
با این برچسب می توانیم مشخصات متن را به دلخواه خود درآوریم و فرمت کلی آن به صورت زیر است.

< FONT> ........< /FONT >
این تگ دارای Attributeهای زیر می باشد:
1.color: رنگ متن
2.size: اندازه متن
3.face: نوع متن
مثال: می خواهیم کلمه Schoolnet را با فونت نازنین و با اندازه normal و رنگ آبی بنویسیم.
< HTML >
< HEAD >
< / HEAD >

< FONT size = "3" color ="blu e" > Schoolnet < /FONT >
< /BODY >
< /HTML >
نمایش صفحه ای که دارای HTML بالاست...
همانطور که می بینید متن ما به رنگ آبی درآمده و اندازه آن نیز 3 شده است.

نکته: اگر بخواهیم اندازه را نسبی مشخص کنیم یعنی نسبت به آنچه که قبلا بوده به صورت زیر عمل می کنیم:
Size = +2
BOLD:
اول و آخر متن مورد نظر قرار گرفته و آنرا Bold می کند.
< B > text … < /B >
ITALIC:
اول و آخر متن مورد نظر قرار گرفته و آنرا Italic می کند.
< I > text … < /I >
UNDERLINE:
اول و آخر متن مورد نظر قرار گرفته و آنرا Underline می کند.
< U > text … < /U >
ANCHOR:
در HTML بوسیله تگ < a > … < /a > می توانیم یک متن یا عکس را به صفحه ای دیگر پیوند دهیم (Hyper link).مهمترین Attribute در این تگ، href می باشد.
فرمت کلی این تگ به صورت زیر است.
< a href = “ URL” > text /image < /a >
مثال: در جمله click here to go to zahiri home page کلمه zahiri را به آدرس index .html لینک کنیم:
< BODY >
< p >
click here to go to
< a href = "http: //www.schoolnet.ir" > schoolnet < /a >
home page
< /p >
< /BODY >

نمایش صفحه ای که دارای HTML بالاست...
همانطور که می بینید کلمه مورد نظر به آدرسی که می خواهیم ، لینک شده است
تگهایی که به وسیله آنها متن را فرم بندی می کنیم:
PARAGRAPH

… < /P >: در این تگ همه موضوعات آن در یک خط نوشته شده یا یک پاراگراف ایجاد می شود که در صورت بوجود آمدن پاراگراف در زیر خط اول، خط دوم را با فاصله زیاد می نویسد.برای حل این مشکل از تگ < B R > استفاده می کنیم.
تگ < P > دارای یک Attribute است:

< A align = " left /center/right" >

BREAK
< BR >: این تگ از تگهایی است که پایان ندارد و آن را هر کجا که قرار دهیم کلمه بعدی را در یک خط پائین تر ولی با کمتر می نویسد.

NO BREAK
… < /NOBR >: اگر بخواهیم در آخر خط شکستگی نداشته باشیم بین دو بخشی که شکسته می شود از این تگ استفاده می کنیم.
مثال: a2< /NOBR >
a, 2 را هرگز از هم جدا نمی کند.
HEADING
در HTML دارای شش نوع HEADING هستیم.
< H1> … < /H1 > بزرگترین
< H2 > … < /H2 >
.
.
< H6 > … < /H6 > کوچکترین
خود این تگها خاصیت راست چین و چپ چین و یا وسط چین شدن را هم دارند که برای فعال کردن آن از روش زیر استفاده می کنیم.
مثال: < H2 align=”center” > vali < /H2 >
HR
تگ < HR > برای ما تک خط افقی سه بعدی ایجاد می کند و دارای Attributeهای زیر می باشد.
< HR align="left/center/right" width =”طول خط بر حسب پیکسل یا درصد”
size=”ضخامت خط بر حسب پیکسل”
noshade: با نوشتن این کلمه خط سه بعدی نمی شود .
color=”رنگ خط” >
PRE
در HTML هر چیزی را که بین تگ < PRE > … < /PRE > به هر صورتی که بنویسیم با همان شکل در صفحه وب نشان می دهد.
مثال:
< PRE > Vali
Ali …
Reza a b cd
< / PRE >
این توشته ها در صفحه وب به این صورت دیده خواهد شد.
همانطور که می بینید دقیقا همان طور که متن در HTML، نوشته شده است در صفحه اصلی دیده می شود.
DIV:
برای ما یک بلوک در متن ایجاد می کند.
مثال style="color:red" > … … < /DIV >
استفاده دیگر برای تعیین Direction می باشد که سمت نوشتن را از راست به چپ یا چپ به راست می کند.
< DIV dir="rtl/ltr" > … … < /DIV >
rtl = right to left
ltr = left to right
از Attributeهای این تگ خاصیت align می باشد:
< DIV align=”left/center/right” > … … < /DIV >
در قدیم از تگهای دیگری نیز برای ویرایش متن استفاده می کردند که اکنون بیشتر آنها منسوخ شده اند واستفاده ای ندارند.
در زیر به برخی از آنها اشاره می کنیم:
< e m > … < /e m >: دقیقا کار تگ < I > … [ / i ] را می کند ولی نشان می دهد که از نظر منطقی تاکیدی روی متن می باشد.
< s trong > … < / s trong >: دقیقا کار تگ < B > … [ / b ] را انجام می دهد.
< c ite > … < / c ite >: برای نوشتن اسم مقاله یا کتاب ( آنرا italic می کند)
< c ode > … < / c ode >: برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )
< k bd > … < / k bd >: ورودی های برنامه را با این تگ می نوشته اند.(M.S)
< s amp > … < / s amp >: برای نوشتن مثال از این تگ استفاده می شده.(M.S)
< v ar > … < / v ar >:متغییرها را Italic می کند.
< t t> … < / t t >: متن را Mono Scape می کند.( یک نوع Font است.)
< s trike > … < / s trike >: یک خط وسط متن داخل خود می کشد.

< S TRIKE > a bc < / S TRIKE >
که نتیجه کار چنین است.
< b lockquote > … < / b lockquote >:
< b ig > … < / b ig >: متن که بین آن باشد یک فونت درشتتر می نویسد.
< s mall > … < / s mall >: متن که بین آن باشد یک فونت کوچکتر می نویسد.
برای درست کردن توان و اندیس دو تگ داریم.
مثال: برای نوشتن از دو تگ زیر استفاده می کنیم.

a < S UB > 1 < / S UB >
a < S UP > 20 < / S UP >

… < / blink >: این تگ فقط در NetScape کار می کند. متن یا عکس که داخل این تگ قرار می گیرد در صفحه چشمک می زند.

تا بعد ... در پناه حق