آموزش HTML - قسمت اول
چهارشنبه 28 شهریور1386
سلام دوستان.
امروز براتون مقاله آموزش HTML رو پیدا کردم که بدون شک یکی از برترین مقالات فارسی در این زمینه هست که خیلی خوب و به طور کامل به مطالب یادگیری HTMl اشاره کرده و افراد مبتدی به سادگی میتونن با خوندن این مقاله، کار با صفحات وب رو یاد بگیرن.این مقاله فعلا شامل سه بخشه که بخش اولش رو براتون میزارم.هر سئوالی در رابطه با این بخش داشتین تو قسمت نظرات بگین.
من این مقاله رو از سایت Schoolnet گرفتم این مقاله رو برای اونایی که اصلا با HTML کار نکردن و قصد یادگیری اونو دارن توصیه می کنم.سعی کنید مطالب رو بدقت بخونین و هر بند رو تو محیط ویرایش HTML اجرا کنید.خواندن کدها رو فراموش نکنین چرا که یکی بهترین روشهای یادگیری برنامه نویسیه.
به نکته های زیر دقت کنید :
ن.1 : "چون مطلب رو خودم ویرایش کردم و تغییرات زیادی رو ترتیب دادم ، پس اگه اشتباه نوشتاری دیدین به بزرگی خودتون ببخشید."
ن.2 : " شاید بعضی از کدها در مرورگرهای (Browser) جدید مثل IE7 و Opera و ... کار نکنه بنابراین اصل مطلب (کار با زبان HTML و ساختار نوشتاری آن) رو یاد بگیرین."
تگ HEAD
در تگ HEAD از برچسب هایی به نامهای TITLE و BASE و META و ... استفاده می شود. محتویات تگ <Head> در صفحه مرورگر وب نمایش داده نمی شود.
کد:
1) برای تعيين نام و منبعی که برنامه توسط آن نوشته شده است.
2) بهنگام کردن صفحات web توسط اين برچسب انجام می شود.
3) انتقال به يک صفحه ديگر web در زمان معيين.
4) نمایش صحیح متن های فارسی در مرورگر.
مثال برای حالت اول: در اين حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و google و ...) از META استفاده می کنيم:
کد:
کد:
در مثال بالا اگر در قسمت content به صورت زير عمل کنيم صفحه web بعد از 60 ثانيه به http://www.example.com خواهد رفت:
کد:
برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.
کد:
کد :
1. <TAG>…………………………………</TAG> با پايان
2. <TAG> بی پايان
تگ BODY
قسمت دوم يک فايل HTML را Body تشکيل می دهد که دارای حداقل مشخصه های زير می باشد.
کد:
Font:
با اين برچسب می توانيم مشخصات متن را به دلخواه خود درآوريم و فرمت کلی آن به صورت زير است.
<FONT> ........</FONT>
مهمترین مشخصه های این تگ به صورت زیر می باشد:
1. color: رنگ متن
2. size: اندازه قلم
3. face: نوع قلم
مثال: می خواهيم کلمه Example را با فونت Tahoma و با اندازه 2 یا 10pt و رنگ قرمز بنويسيم.
کد:
BOLD:
این مشخصه متن مورد نظر را ضخیم میکند و متن بین دوتگ زیر قرار می گیرد.
<B> text … </B>
ITALIC:
این مشخصه متن درون خود را به صورت مایل نمایش می دهد.
<I> text … </I>
UNDERLINE:
کار این مشخصه هم اضافه کردن زیرخط یا به قول خودمون آندرلاین هست که متن بین تگهای زیر قرار میگیره.
<U> text … </U>
ANCHOR:
در HTML بوسيله تگ <a> … </a> می توانيم يک متن يا عکس را به صفحه ای ديگر پيوند دهيم (Hyper link).مهمترين مشخصه های اين تگ، href و Target و Title و می باشد.
فرمت کلی اين تگ به صورت زير است.
کد:
کد:
فرم بندی صفحه :
PARAGRAPH
<P> … </P>: در اين تگ همه موضوعات آن در يک خط نوشته شده يا يک پاراگراف ايجاد می شود که در صورت بوجود آمدن پاراگراف در خط اول، خط دوم را با فاصله ایجاد میکند.
تگ <P> دارای چند مشخصه است:
کد:
2) در قسمت Dir هم مشخص می کنیم که متن مورد نظر ما از راست به چپ باشد یا از چپ به راست.
3) نمونه کد قسمت Title - ماوس رو اینجا نگه دارید
<BR>: اين تگ از تگهايی است که پايان ندارد و آن را هر کجا که قرار دهيم خط بعدی را در يک خط پائين تر ولی با فاصله کمتر می نويسد.
NO BREAK
<NOBR> … </NOBR>:
اگر بخواهيم در آخر خط شکستگی نداشته باشيم بين دو بخشی که شکسته می شود از اين تگ استفاده می کنيم.
کد:
HEADING
در HTML دارای شش نوع HEADING هستيم.
کد:
مثال:
کد:
تگ <HR> برای ما تک خط افقی سه بعدی ايجاد می کند و دارای مشخصه های زير می باشد.
کد:
noshade: با نوشتن اين کلمه خط سه بعدی نمی شود .
Color="رنگ خط"
PRE
در HTML هر چيزی را که بين تگ <PRE> … </PRE> به هر صورتی که بنويسيم با همان شکل در صفحه وب نشان می دهد.
مثال:
کد:
اینهم از جلسه اول.
موفق باشید.
امروز براتون مقاله آموزش HTML رو پیدا کردم که بدون شک یکی از برترین مقالات فارسی در این زمینه هست که خیلی خوب و به طور کامل به مطالب یادگیری HTMl اشاره کرده و افراد مبتدی به سادگی میتونن با خوندن این مقاله، کار با صفحات وب رو یاد بگیرن.این مقاله فعلا شامل سه بخشه که بخش اولش رو براتون میزارم.هر سئوالی در رابطه با این بخش داشتین تو قسمت نظرات بگین.
من این مقاله رو از سایت Schoolnet گرفتم این مقاله رو برای اونایی که اصلا با HTML کار نکردن و قصد یادگیری اونو دارن توصیه می کنم.سعی کنید مطالب رو بدقت بخونین و هر بند رو تو محیط ویرایش HTML اجرا کنید.خواندن کدها رو فراموش نکنین چرا که یکی بهترین روشهای یادگیری برنامه نویسیه.
به نکته های زیر دقت کنید :
ن.1 : "چون مطلب رو خودم ویرایش کردم و تغییرات زیادی رو ترتیب دادم ، پس اگه اشتباه نوشتاری دیدین به بزرگی خودتون ببخشید."
ن.2 : " شاید بعضی از کدها در مرورگرهای (Browser) جدید مثل IE7 و Opera و ... کار نکنه بنابراین اصل مطلب (کار با زبان HTML و ساختار نوشتاری آن) رو یاد بگیرین."
آموزش HTML قسمت اول
تاريخچه
در سال 1992 در دانشگاه مينه سوتا سيستمی به نام web به وجود آمد که دارای دو ويژگی خاص بود.
Graphic, Multi Media
Hyper Text (فقط کليک کردن و در سايت حرکت کردن )
صفحات اين سيستم توسط برنامه ای به نام HTML ساخته شد.
همچنين برای رد و بدل کردن اطلاعات:
(HTTP(Hyper Text Transfer Protocol
HTML Web page
HTML يک text عادی و در حقيقت زبانی برای مارک کردن فايلهای text به يکديگر می باشد که آن را با TAG مشخص کرده و به صورت <tag name> می نويسند.
تعریف تگ <Tag> :
به دو علامت <> و </> تگ گفته می شود.
فرمت کلی يک فايل HTML:
يک فايل HTML از دو بخش Body و Head ،تشکيل می شود. شکل ساده يک فايل HTML به صورت زير است.هر صفحه وب تحت HTML با تگ <HTML> شروع شده و با تگ <HTML/> پایان می پذیرد.
کد:
<HTML>
<HEAD>
<TITLE> This is the title</TITLE>
<HEAD/>
<BODY>
This is the the body
<BODY/>
<HTML/>
قسمت <Title> برای نمایش عنوان وب در نوار عنوان مرورگر می باشد و متن اصلی که در وب نمایش داده می شود بین تگهای <Body> و <Body/> قرار می گیرد.<HEAD>
<TITLE> This is the title</TITLE>
<HEAD/>
<BODY>
This is the the body
<BODY/>
<HTML/>
تگ HEAD
در تگ HEAD از برچسب هایی به نامهای TITLE و BASE و META و ... استفاده می شود. محتویات تگ <Head> در صفحه مرورگر وب نمایش داده نمی شود.
کد:
<HEAD>
<TITLE> </TITLE>
<META > </META >
<BASE >
<HEAD/>
META:<TITLE> </TITLE>
<META > </META >
<BASE >
<HEAD/>
1) برای تعيين نام و منبعی که برنامه توسط آن نوشته شده است.
2) بهنگام کردن صفحات web توسط اين برچسب انجام می شود.
3) انتقال به يک صفحه ديگر web در زمان معيين.
4) نمایش صحیح متن های فارسی در مرورگر.
مثال برای حالت اول: در اين حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و google و ...) از META استفاده می کنيم:
کد:
<META name="keyword"{اجباری} content="کلمات کلیدی مورد استفاده در وب")>
<META name="description"{اجباری} content="توضیحات در مورد وب">
مثال برای حالت دوم و سوم:<META name="description"{اجباری} content="توضیحات در مورد وب">
کد:
<META name="Iman"{دلخواه} http_equiv="refresh" content="زمان بر حسب ثانيه">
با اين برچسب صفحه web بعد از 1 دقيقه بهنگام (refresh) خواهد شد.در مثال بالا اگر در قسمت content به صورت زير عمل کنيم صفحه web بعد از 60 ثانيه به http://www.example.com خواهد رفت:
کد:
Content="60; URL= http://www.example.com"
BASE:برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.
کد:
<BASE href="آدرس">
<BASE href="http://www.example.com/">
این قسمت برای نمایش صحیح متنها در مرورگر استفاده می شود. <BASE href="http://www.example.com/">
کد :
<META http-equiv="Content-Type" content="text/html; charset=utf-8"> برای یونیکد کردن صفحه
<META http-equiv="Content-Language" content="fa"> برای نمایش صحیح متنهای فارسی در مرورگر
نکته مهم: در برنامه نويسی HTML برچسب ها به دو صورت با پايان و بی پايان نوشته می شوند.<META http-equiv="Content-Language" content="fa"> برای نمایش صحیح متنهای فارسی در مرورگر
1. <TAG>…………………………………</TAG> با پايان
2. <TAG> بی پايان
تگ BODY
قسمت دوم يک فايل HTML را Body تشکيل می دهد که دارای حداقل مشخصه های زير می باشد.
کد:
<BODY bgcolor = “رنگ پس زمينه صفحه”
background = “آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گيرد. “
topmargin = “يک فضای خالی بالای صفحه بر حسب پيکسل ايجاد ما کند”
leftmargin = “يک فضای خالی سمت چپ صفحه بر حسب پيکسل ايجاد ما کند”
text ="color” رنگ متن را مشخص می کند
link = “color” رنگ لینک را مشخص می کند
alink = “color” (active link) رنگ لینکهای فعال رو مشخص می کند
vlink = “color” (visited link)> رنگ لینکهای بازدید شده را مشخص می کند
نکته : در نوشتن تگها، بزرگ و يا کوچک بودن حروف هيچ تاثيری در کارایی ندارد.background = “آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گيرد. “
topmargin = “يک فضای خالی بالای صفحه بر حسب پيکسل ايجاد ما کند”
leftmargin = “يک فضای خالی سمت چپ صفحه بر حسب پيکسل ايجاد ما کند”
text ="color” رنگ متن را مشخص می کند
link = “color” رنگ لینک را مشخص می کند
alink = “color” (active link) رنگ لینکهای فعال رو مشخص می کند
vlink = “color” (visited link)> رنگ لینکهای بازدید شده را مشخص می کند
Font:
با اين برچسب می توانيم مشخصات متن را به دلخواه خود درآوريم و فرمت کلی آن به صورت زير است.
<FONT> ........</FONT>
مهمترین مشخصه های این تگ به صورت زیر می باشد:
1. color: رنگ متن
2. size: اندازه قلم
3. face: نوع قلم
مثال: می خواهيم کلمه Example را با فونت Tahoma و با اندازه 2 یا 10pt و رنگ قرمز بنويسيم.
کد:
<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT size = "2" color ="Red" face="Tahoma"> Example </FONT>
</BODY>
</HTML>
همانطور که می بينيد متن ما به رنگ قرمز درآمده و اندازه آن نيز 2 یا 10pt شده است. نمونه : Example<HEAD>
</HEAD>
<BODY>
<FONT size = "2" color ="Red" face="Tahoma"> Example </FONT>
</BODY>
</HTML>
BOLD:
این مشخصه متن مورد نظر را ضخیم میکند و متن بین دوتگ زیر قرار می گیرد.
<B> text … </B>
ITALIC:
این مشخصه متن درون خود را به صورت مایل نمایش می دهد.
<I> text … </I>
UNDERLINE:
کار این مشخصه هم اضافه کردن زیرخط یا به قول خودمون آندرلاین هست که متن بین تگهای زیر قرار میگیره.
<U> text … </U>
ANCHOR:
در HTML بوسيله تگ <a> … </a> می توانيم يک متن يا عکس را به صفحه ای ديگر پيوند دهيم (Hyper link).مهمترين مشخصه های اين تگ، href و Target و Title و می باشد.
فرمت کلی اين تگ به صورت زير است.
کد:
<a href ="آدرس لینک" target="_blank" Title="نمایش تکه متن در موقع قرار گرفتن ماوس روی متن">Type Your Text Here </a> لینک مورد نظر رو در صفحه ای جداگانه باز می کند
<a href ="آدرس لینک" target="_Self" Title="نمایش تکه متن در موقع قرار گرفتن ماوس روی متن">Type Your Text Here </a> لینک مورد نظر را در صفحه جاری باز می کند
مشخصه Target هم برای خودش مشخصه هایی داره که کاربردی ترین اونها در کد بالا به صورت ضخیم و با رنگ قرمز مشخص و توضیح داده شده است.<a href ="آدرس لینک" target="_Self" Title="نمایش تکه متن در موقع قرار گرفتن ماوس روی متن">Type Your Text Here </a> لینک مورد نظر را در صفحه جاری باز می کند
کد:
<BODY>
<p>
click here to go to
<a href ="http://www.Example.com" target"_blank" Title="ّExample For Test"> Example </a>
home page
</p>
</BODY>
همانطور که می بينيد کلمه مورد نظر به آدرسی که می خواهيم ، لينک شده است<p>
click here to go to
<a href ="http://www.Example.com" target"_blank" Title="ّExample For Test"> Example </a>
home page
</p>
</BODY>
فرم بندی صفحه :
PARAGRAPH
<P> … </P>: در اين تگ همه موضوعات آن در يک خط نوشته شده يا يک پاراگراف ايجاد می شود که در صورت بوجود آمدن پاراگراف در خط اول، خط دوم را با فاصله ایجاد میکند.
تگ <P> دارای چند مشخصه است:
کد:
<P Align="left/center/right" Dir="ltr/rtl" Title="نمایش تکه متن در موقع قرار گرفتن ماوس روی متن">
1) در قسمت Align مشخص می کنیم که متن مورد نظر ما در حالت جپ چین یا راست چین یا وست چین باشد. 2) در قسمت Dir هم مشخص می کنیم که متن مورد نظر ما از راست به چپ باشد یا از چپ به راست.
3) نمونه کد قسمت Title - ماوس رو اینجا نگه دارید
<BR>: اين تگ از تگهايی است که پايان ندارد و آن را هر کجا که قرار دهيم خط بعدی را در يک خط پائين تر ولی با فاصله کمتر می نويسد.
NO BREAK
<NOBR> … </NOBR>:
اگر بخواهيم در آخر خط شکستگی نداشته باشيم بين دو بخشی که شکسته می شود از اين تگ استفاده می کنيم.
کد:
<NOBR>a2</NOBR>
a, 2 را هرگز از هم جدا نمی کند.HEADING
در HTML دارای شش نوع HEADING هستيم.
کد:
<H1> … </H1> بزرگترين
<H2> … </H2>
<H6> … </H6> کوچکترين
خود اين تگها خاصيت راست چين و چپ چين و يا وسط چين شدن را هم دارند که برای فعال کردن آن از روش زير استفاده می کنيم.<H2> … </H2>
<H6> … </H6> کوچکترين
مثال:
کد:
<H2 align=”center”> Iman </H2>
HRتگ <HR> برای ما تک خط افقی سه بعدی ايجاد می کند و دارای مشخصه های زير می باشد.
کد:
<HR align="left/center/right" width=”طول خط بر حسب پيکسل يا درصد”
size="ضخامت خط بر حسب پيکسل"noshade: با نوشتن اين کلمه خط سه بعدی نمی شود .
Color="رنگ خط"
PRE
در HTML هر چيزی را که بين تگ <PRE> … </PRE> به هر صورتی که بنويسيم با همان شکل در صفحه وب نشان می دهد.
مثال:
کد:
<PRE> Iman
Iman …
</PRE>
همانطور که می بينيد دقيقا همان طور که متن در HTML، نوشته شده است در صفحه اصلی ديده می شود.Iman …
</PRE>
اینهم از جلسه اول.
موفق باشید.
نوشته شده
توسط ایمان در ساعت 2:23 | موضوع :
آموزش HTML
[
]
