آشنایی اوليه
با زبان تحت وب
HTML
اين آموزش از موارد بسيار سطح پايين شروع مي شود و به پيچيده ترين موارد
مي رسد .پيشنهاد مي كنم مطالب را پي گيري كنيد تمرينات آن را براي خود
انجام دهيد تا تمام موارد را بصورت كامل فرا بگيريد.
تاريخچه 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.Sefroyek.ueuo.com خواهد رفت :
Content="60; URL= http://www.Sefroyek.ueuo.com/"
BASE :
برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد .
< BASE href="آدرس" >
< BASE href="http://www.Sefroyek.ueuo.com/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.Sefroyek.ueuo.com" > 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 > : برای نوشتن قطعه برنامه از آن استفاده می شود .
(با خط MonoScape )
< 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 کار می کند . متن يا عکس که داخل
اين تگ قرار می گيرد در صفحه چشمک می زند .
پايان
|
| 
