تاريخچه

در سال 1992 در دانشگاه مينه سوتا سيستمی به نام web به وجود آمد که دارای دو ويژگی خاص بود.

Graphic, Multi Media
Hyper Text (فقط کليک کردن و در سايت حرکت کردن )

صفحات اين سيستم توسط برنامه ای به نام HTML ساخته شد.

همچنين برای رد و بدل کردن اطلاعات:

(HTTP(Hyper Text Transfer Protocol

HTML Web page

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

فرمت کلی يک فايل HTML:

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

This is the the body
/>

L/>

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

تگ HEAD

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

TITLE:
برای تعيين لقب صفحه (چيزی که در قسمت Status Bar ديده می شود).

META:
1) برای تعيين نام و منبعی که برنامه توسط آن نوشته شده.

2) بهنگام کردن صفحات web توسط اين برچسب انجام می شود.

3) انتقال به يک صفحه ديگر web در زمان معيين.

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

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

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

با اين برچسب صفحه web بعد از 1 دقيقه بهنگام (refresh) خواهد شد.

در مثال بالا اگر در قسمت content به صورت زير عمل کنيم صفحه web بعد از 60 ثانيه به www.schoolnet.ir خواهد رفت:

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

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

schoolnet.ir/~zahiri/index.htm">

نکته مهم: در برنامه نويسی HTML برچسب ها به دو صورت با پايان و بی پايان نوشته می شوند.

همانطور که می بينيد متن ما به رنگ آبی درآمده و اندازه آن نيز 3 شده است.

نکته: اگر بخواهيم اندازه را نسبی مشخص کنيم يعنی نسبت به آنچه که قبلا بوده به صورت زير عمل می کنيم:

Size = +2

BOLD:
اول و آخر متن مورد نظر قرار گرفته و آنرا Bold می کند.

text ?

ITALIC:
اول و آخر متن مورد نظر قرار گرفته و آنرا Italic می کند.

text ?

UNDERLINE:
اول و آخر متن مورد نظر قرار گرفته و آنرا Underline می کند.

text ?

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 لينک کنيم:

click here to go to

<a href ="http://www.schoolnet.ir"> schoolnet a>
home page

همانطور که می بينيد کلمه مورد نظر به آدرسی که می خواهيم ، لينک شده است

تگهايی که به وسيله آنها متن را فرم بندی می کنيم:

PARAGRAPH

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

دارای يک Attribute است:

"left/center/right">

BREAK

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

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

مثال: <NOBR>a2

a, 2 را هرگز از هم جدا نمی کند.

HEADING

در HTML دارای شش نوع HEADING هستيم.

?

بزرگترين

?

.
.

?
کوچکترين

خود اين تگها خاصيت راست چين و چپ چين و يا وسط چين شدن را هم دارند که برای فعال کردن آن از روش زير استفاده می کنيم.

مثال:

vali

HR
تگ

برای ما تک خط افقی سه بعدی ايجاد می کند و دارای Attributeهای زير می باشد.

"left/center/right" width=?طول خط بر حسب پيکسل يا درصد?
size=?ضخامت خط بر حسب پيکسل?
noshade: با نوشتن اين کلمه خط سه بعدی نمی شود .
color=?رنگ خط?>

PRE
در HTML هر چيزی را که بين تگ

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

 Vali

                        Ali ?

                        Reza a b cd

DIV:
برای ما يک بلوک در متن ايجاد می کند.

مثال:

"color: red"> ? ?

استفاده ديگر برای تعيين Direction می باشد که سمت نوشتن را از راست به چپ يا چپ به راست می کند.

? ?

rtl= right to left
ltr= left to right

از Attributeهای اين تگ خاصيت align می باشد:

? ?

در قديم از تگهای ديگری نيز برای ويرايش متن استفاده می کردند که اکنون بيشتر آنها منسوخ شده اند واستفاده ای ندارند.
در زير به برخی از آنها اشاره می کنيم:
? : دقيقا کار تگ ? را می کند ولی نشان می دهد که از نظر منطقی تاکيدی روی متن می باشد.
? : دقيقا کار تگ ? را انجام می دهد.
? : برای نوشتن اسم مقاله يا کتاب ( آنرا italic می کند)
? : برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )
? : ورودی های برنامه را با اين تگ می نوشته اند.(M.S)
? : برای نوشتن مثال از اين تگ استفاده می شده.(M.S)
? :متغييرها را Italic می کند.
? : متن را Mono Scape می کند.( يک نوع Font است.)
? : يک خط وسط متن داخل خود می کشد.

~~abc~~

????????????? با پايان
بی پايان

تگ BODY

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

bgcolor = ?رنگ پس زمينه صفحه?
background = ?آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گيرد. ?
topmargin = ?يک فضای خالی بالای صفحه بر حسب پيکسل ايجاد ما کند?
leftmargin = ?يک فضای خالی سمت چپ صفحه بر حسب پيکسل ايجاد ما کند?
text ="color? رنگ متن را مشخص می کند
link = ?color?
alink = ?color? (active link)
vlink = ?color? (visited link)>

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

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

........

اين تگ دارای Attributeهای زير می باشد:

color: رنگ متن
size: اندازه متن
face: نوع متن

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

size = "3" color ="blue"> Schoolnet

?

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

a₁
a²⁰

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

قرار دادن يک تصوير بر روی صفحه:

Image
: برای قرار دادن يک تصوير در web از اين تگ استفاده می کنيم.
به چند دليل نبايد از تگ image زياد استفاده کرد.

1- به علت زياد شدن تعداد عکسها صفحه دير load می شود.
2- ايجاد مشکل در Search Engine.
3- عدم قابل استفاده بودن برای همه(عدم سرعت کافی، هزينه دار بودن برای user و ... )

طرز قرار دادن عکس:

align="left/middle/right/top/bottom"
height="ارتفاع عکس بر حسب پيکسل"
width="طول عکس بر حسب پيکسل"
alt=" "

هر چيزی که در اين قسمت بنويسيم قبل از loadشدن تصوير و يا بعد از کامل شدن صفحه اگر موس را روی عکس ببريم اين متن ديده خواهد شد.(در يک مستطيل زرد رنگ)"

border=?ضخامت جدول دور عکس را بر حسب پيکسل نشان می دهد?
hspace=?فاصله عمودی دور تصوير بر حسب پيکسل?
vspace=?فاصله افقی دور تصوير بر حسب پيکسل?>

مثال: border="3" src="../Zahiri/email/zahiri.jpg" width="111" height="137" align="center" hscape="10" vscape="10" alt="This is Zahiri's picture">

سوال: برای لينک کردن يک عکس چه کاری را بايد انجام دهيم؟
جواب:

"URL" >"URL">

آشنايي با Image map:

در بسياری از مواقع در يک صفحه وب مجبوريم قسمتی از يک عکس را به صفحه ای لينک کنيم. برای اين کار در html از Image Map استفاده می کنيم.
مثال: می خواهيم در t1.gif در منطقه يکی دايره و ديگری چهارگوش را به صفحه ای ديگر لينک کنيم:

name="Zahiri" >
shape="circle" coord="50,50,30" href="1.htm">
shape="rect" cords-"100,70,130,100" href="2.htm">

?
"t1.gif" usemap="#Zahiri">

در Image Map يک سری ناحيه به وسيله تعريف می کنيم و می گوييم که بايد لينک شود و سپس آنرا وارد يک Image می کنيم.
يک نوع ديگر برای تعيين Area وجود دارد که روش چند ضلعی است:

اگر در<AREA>، نوع Shape را تعريف نکنيم مقدار default آن يعنی rect در آن قرار می گيرد.

interlink(لينک داخلی)

برای درست کردن لينکهای داخلی دو روش داريم.
1- ايجاد flag با استفاده از تگ
2- اسم گذاری عناصر موجود در صفحه با استفازه از headingها

مثال: می خواهيم جمله go to Hamed در بالای صفحه مقابل را به کلمه Hamed در وسط صفحه لينک کنيم.

1- روش flag:

2?> go to Hamed
?
2?> Hamed
?

که در اينجا می توانيد نتيجه را ببينيد.

2- روش اسم گذاری

go to middle
?

middle

در حالت اول می توانيم middle را به بالای صفحه لينک کنيم ولی در حالت دوم اين امر امکان پذير نيست برای اين کار در حالت اول:

middle

طرز ايجاد ليست در HTML:

برای ايجاد ليست در html دو روش داريم:
1- Ordered list ليست منظم
2- Unordered list: ليست نامنظم

1- Ordered List:
برای درست کردن يک ليست منظم به روش زير عمل می کنيم.

vali

تگ

دارای سه Attribute می باشد:

a) Compact :ليست را فشرده تر نشان می دهد
b) Type:"A/a/I/i"

در حالت عادی شماره ها عدد می باشد اما می تواند حروف الفبا يا حروف يونانی باشد.
A: حروف الفبای انگليسی بزرگ
a: حروف الفبای انگليسی کوچک
I: اعداد يونانی با تايپ بزرگ
i: اعداد يونانی با تايپ کوچک
اگر اين Attribute را ننويسيم ليست را با اعداد انگليسی می نويسد.

c) start=? ?

از هر عدد يا حرفی که داخل آن قرار بدهيم از همانجا شروع به شماره گذاری می کند.
2- Unordered List:
برای درست کردن يک ليست نامرتب (بدون شماره گذاری) از اين تگ استفاده می کنيم.

? ?
? ?
?
? ?

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

نکته: اگر بخواهيم عکس خاصی را در UL قرار دهيم:

جدولها:
?

: هر جدول از سطر و ستون تشکيل می شود.
به طور دقيقتر هد حدول n سطر دارد که هر سطر در داخل خود m سلول خواهد داشت.
سطرها را با ? هر سلول را با ? مشخص می کنيم.
مثال: يک جدول 2*2:

?	?
?	?

هر چيزی که داخل بنويسيم در داخل آن خانه (سلول) جدول قرار می گيرد.
نکته مهم اين است که نبايد بين دو ? خالی باشد.
اگر بخواهيم در داخل اين خانه جدول چيزی نباشد ولی ديده شود، بايد از يک فاصله ( ) استفاده کنيم.
Attributeهای عبارتند از:

bgcolor="رنگ پس زمينه جدول"
background="عکس پس زمينه جدول"
border="حاشيه دور جدول"
align="left/center/right"
width="ظول جدول(پيکسل يا درصد)"
height="ارتفاع جدول(پيکسل يا درصد)"
bordercolor="تگ حاشيه دور جدول"
valign="top/middle/bottom"
cellpadding="فاصله متن از ديواره سلول"
cellspacing="فاصله سلولها از هم"
>

attributeهای هر cell:

width=" "

height=" "

bgcolor=" "

background=" "

border=" "

nowrap

rowspan=" "

colspan=" "

nowrap: محتويات داخل سلول همه دريک خط نوشته می شود و ديگر سلول شکسته شده و به خط بعدی نمی رود.
مثال 1:

مثال 2:

در rowspan يا colspan تعداد سلولهايی را که می خواهيم در هم ادغام کنيم را بنويسيم.
بايد توجه کنيم که به همان تعداد که سلول در هم ادغام می کنيم بايد از پائين سلولهای اضافی را حذف کنيم.
مثلا در مثال 1:

colspan="2"> ?

rowspan="2"> ?

?	?
?	?

?
?	?

فريم بندی در html:

فريم بندی صفحات html يعنی اينکه صفحه را به چند قسمت تقسيم کرده و برای هر قسمت يک صفحه html يا ASP يا PHP جايگزين می کنيم.
برای معرفی يک صفحه فريمی از ? استفاده می کنيم.
مثال: می خواهيم صفحه فريمی زير را که از دو ستون تشکيل شده را طراحی کنيم.

"200,*">
"menu.htm">
"welcome.htm">

cols=" " =ستونی

1- می خواهيم صفحات را به صورت ستونی در کنار يکديگر قرار دهيم.
2- درون " "=cols بايد نسبت صفحاتی را که می خواهيم درون صفحه فريمی جا بگيرد را معرفی کنيم. در مثال به صورت زير نوشته شد.

"200,*" >

يعنی ما می خواهيم دو صفحه را در کنار هم قرار دهيم که اولی 200 پيکسل و صفحه دوم بقيه طول صفحه را در بر خواهد گرفت.
اگر بخواهيم صفحه ها به صورت مثلا مساوی قسمت شوند:

"*, *" >
يا
"50%,50%" >

اگر بخواهيم صفحه ها را به صورت سطری در کنار يکديگر قرار دهيم به صورت زير استفاده می کنيم:

" ">

نکته مهم:در فايلهای html يا بايد frameset داشته باشيم يا body و نمی توانيم هر دو را با هم داشته باشيم.

Attributeهای فريم:

src=" "
frameborder="yes/no/3d"
marginwidth=" "
marginheight=" " فضای دور هر فريم
noresize
scrolling="yes/no/auto">

اسم گذاری برای هر فريم و برای مراجعه به اين صفحه بايد <" "=name> حتما از اين اسم استفاده کرد.
مثال:
يک صفحه فريمی به صورت زير داريم و می خواهيم user با کليک کردن روی student صفحه ای را ببيند که به جای welcome باز می شود و همچنين برای کلمه grads:

برای ساختن اين صفحه فريمی بايد از قبل تمام صفحات را ساخته باشيم:

1- menu.htm
2- welcome.htm
3- student.htm
4- grads.htm

menu.htm

href="student.htm" target="reza"> student
href="grads.htm" target="reza"> grads

اين targetها همان اسم فريمها هستند برای اينکه با کليک کردن روی grads صفحه مربوطه به جای صفحه welcome.htm باز شود بايد از target استفاده کنيم.
در جلوی target اسم آن صفحه فريمی را که می خواهيم صفحه ما در آنجا باز شود را می نويسيم.

welcome.htm

Welcome to my home page

student.htm

this is student home page

grads.htm

Here is the grads home page.

بعد از ساختن اين صفحات حال بايد صفحه فريمی اصلی را بسازيم:

در صفحه های فريمی اول سطرها پر می شوند بعد ستونها.
Attributeهای frameset:

1- border=" "
2- bordercolor=" "
target=" "
target="_blank"                                 : روی صفحه فريمی باز می شود new pageيک
target="_self"                                     : را نگذاشته ايم target مثل اين است که
target="_parent"                                 : صفحه بر روی فريم مادر خود باز می شود
target="_top"                                      :صفحه قبلی از بين میرود ويک صفحه بدون فريم ظاهر میشود

قرار دادن يک AVI بر روی Webpage:

dynsrc="(URL)آدرس فايل مورد نظر "
width=" " height=" " loop="تعداد دفعات تکرار">

قرار دادن موسيقی background بر روی يک web page:

src=" " loop="عدد/infinite" >

قرار دادن نوشته متحرک بر روی web page:
marquee

align="top/middle/bottom"
bgcolor="رنگ نوار"
width=" "
height=" "
hspace=" "
vspace=" " فضای خالی اطراف نوار
behavior="scroll/slide/alternate"
scroll: خروج نوشته و ورود آن به صورت کارکتر به کارکتر است.
slide: خروج نوشته و ورود آن به صورت ناپديدشدن و پديدار شدن ناگهانی است.
alternate: به دو طرف نوار برخورد کرده و نوسان می کند.
direction="left/right" متن بايد به سمت چپ يا راست حرکت کند
loop=" " تعداد دفعات
scrollamount=" " مقدار حرکت بر حسب پيکسل
scrolldelay=" " مقدار تاخير بر > this is web page