close
تبلیغات در اینترنت
آموزش HTML

آموزش HTML

مجله اینترنتی آفتاب

 

ارتباط آن لاين

 

آمار کاربران


عضو شويد

نام کاربری :
رمز عبور :

فراموشي رمز عبور؟

 

عضويت در سايت

نام کاربری :
رمز عبور :
تکرار رمز :
ایمیل :
نام اصلی :
کد امنیتی : * کد امنیتیبارگزاری مجدد

 

عضويت در خبرنامه


 

تبليغات

 

آخرين ارسال هاي انجمن

 

آموزش HTML

بازديد:1147



 

 

تاريخچه
در سال 1992 در دانشگاه مينه سوتا سيستمی به نام Web به وجود آمد که دارای دو ويژگی خاص بود .
Graphic, Multi Media
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 :
برای تعيين نام و منبعی که برنامه توسط آن نوشته شده .
بهنگام کردن صفحات web توسط اين برچسب انجام می شود .
انتقال به يک صفحه ديگر web در زمان معين .

مثال برای حالت اول
در اين حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و Google و ...) از META استفاده می کنيم :

< META name="keyword"{اجباری } content="sunbook,photoshop,illustrator,networking training,programming") >
< META name="description"{اجباری } content="This is sunbook website" >

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

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

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

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

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

< BASE href="/fa-article/آدرس " >
< BASE href="/fa-article/http://www.sunbook.ir/exchange/index.htm%22 >

نکته مهم: در برنامه نويسی 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: نوع متن

مثال: می خواهيم کلمه sunbook را با فونت Tahoma و با اندازه normal و رنگ آبی بنويسيم .

< HTML >
< HEAD >
< / HEAD >

< FONT size = "3" color ="blue" > sunbook < /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.sunbook.ir" > sunbook < /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 >

در قديم از تگهای ديگری نيز برای ويرايش متن استفاده می کردند که اکنون بيشتر آنها منسوخ شده اند واستفاده ای ندارند .
در زير به برخی از آنها اشاره می کنيم :

< em > … < /em >: دقيقا کار تگ < I > … [ / i ] را می کند ولی نشان می دهد که از نظر منطقی تاکيدی روی متن می باشد .
< strong > … < / strong >: دقيقا کار تگ < B > … [ / b ] را انجام می دهد .
< cite > … < / cite >: برای نوشتن اسم مقاله يا کتاب ( آنرا italic می کند)
< code > … < / code >: برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )
< kbd > … < / kbd >: ورودی های برنامه را با اين تگ می نوشته اند .(M.S)
< samp > … < / samp >: برای نوشتن مثال از اين تگ استفاده می شده .(M.S)
< var > … < / var >:متغييرها را Italic می کند .
< tt> … < / tt >: متن را Mono Scape می کند.( يک نوع Font است . )
< strike > … < / strike >: يک خط وسط متن داخل خود می کشد .

< STRIKE > a bc < / STRIKE >

که نتيجه کار چنين است .

< blockquote > … < / blockquote >:
< big > … < / big >: متن که بين آن باشد يک فونت درشتتر می نويسد .
< small > … < / small >: متن که بين آن باشد يک فونت کوچکتر می نويسد .

برای درست کردن توان و انديس دو تگ داريم .

مثال: برای نوشتن از دو تگ زير استفاده می کنيم .

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

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

 




برچسب هاي مطلب: آموزش HTML, Hyper Text Transfer Protocol, فرمت کلی يک فايل HTML :, نمايش صفحه ای که دارای HTML بالاست ., تگ HEAD, META :, ANCHOR:, سایت مقاله, وب سایت کامپیوتر و الکترونیک,
نوشته شده توسط:حامد ممتاز

 

مطالب مرتبط

 

آخرين مطالب سايت

 

لوگوی دوستان

متفاوت ترین وب سایت سرگرمی

 

بازدیدکنندگان

 

تبادل لينک

 

سايت دوستان



تمامي حقوق ، امتيازات و مطالب براي www.sunbook.ir محفوظ بوده و هر گونه کپي برداري با ذکر منبع مجاز خواهد بود.

Copyright © 2008-2012 by sunbook - All Rights Reserved - Theme design by hamed momtaz
بهترين حالت نمايش و هماهنگي با مرورگرهاي Firefox و Opera و Google Chrome مي باشد