وب يکی از مهمترين سرويس های اينترنت است . اطلاعات در ساختارهای خاصی با نام "صفحات وب " ، سازماندهی می شوند . صفحات وب در ارائه سرويس وب دارای نقشی حياتی می باشند. صفحات وب با استفاده از HTML ايجاد می گردند. HTML شامل مجموعه ای از تگ های از قبل تعريف شده و ثابت بوده که با استفاده از آنان می توان نحوه نمايش محتويات يک صفحه را برای نمايش دهندگان صفحات وب ( مرورگرها ) مشخص کرد. مرورگرهای وب دارای نرم افزار لازم برای تفسير هر يک از تگ ها و نمايش آنها می باشند. قبل از بررسی HTML و امکانات مربوطه آن، لازم است در ابتدا با برخی مفاهيم اوليه بيشتر آشنا شويم:
-
صفحه وب . صفحه وب يک فايل ساده متنی است که محتويات آن علاوه بر متن، شامل تگ های HTML نيز می باشد. تگ های فوق ، نحوه نمايش اطلاعات توسط يک مرورگر را مشخص می نمايند. تگ های HTML ، دستورالعمل های ساده ای می باشند که نحوه نمايش محتويات صفحه را برای مرورگر وب ، تبين می نمايد. مرورگر به منظور اتخاذ تصميم در رابطه با نحوه نمايش اطلاعات ، تگ های HTML را تفسير می نمايند.
-
HTML يک " زبان نشانه گذاری " است . زبان فوق نحوه فرمت ( قالب ) يک صفحه را تشريح می نمايد. با استفاده از زبان فوق می توان : نوع ، اندازه و رنگ يک فونت را مشخص نمود . اقدام به ايجاد جداول نمود و يا از فايل های گرافيکی و يا صوتی به همراه صفحات وب استفاده نمود .
-
مرورگر وب . مرورگر وب ( نظير Internet Explorer و يا Netescape Navigator) ، نرم افزاری است که دو کار اصلی را انجام می دهد:
- مرورگرها با نحوه درخواست يک صفحه وب از سرويس دهنده وب آشنائی دارند. بدين ترتيب برنامه های فوق قادر به درخواست يک صفحه وب از سرويس دهنده وب و نمايش آن بر روی کامپيوتر سرويس گيرنده می باشند.
- مرورگرهای وب با نحوه تفسير تگ های HTML آشنائی دارند. پس از تفسير تگ های HTML زمينه نمايش اطلاعات موجود در صفحه وب با فرمت مشخص شده ، فراهم می گردد . -
سرويس دهنده وب . سرويس دهنده وب ، نرم افزاری است که قادر به پاسخگوئی به مرورگر وب و ارسال صفحه درخواستی است . صفحات وب بر اساس يک ساختار مشخص و تحت يک نام واحد ( نام حوزه ) بر روی سرويس دهنده وب ذخيره می گردند. بر روی يک سرويس دهنده وب امکان استقرار صفحات وب متعدد و با ساختارهای جداگانه وجود دارد.
مشاهده محتويات اوليه يک صفحه وب
به منظور مشاهده کد اوليه (Source) يک صفحه وب، می توان از گزينه "View Source" استفاده نمود . بدين منظور می توان کليد سمت راست موس را فعال ( زمانيکه صفحه مورد نظر توسط مرورگر نمايش داده شده است ) و گزينه "View Source" را انتخاب کرد. در ادامه پنجره ای فعال و کلمات و کاراکترهای مربوطه نمايش داده می شود. کلمات و کاراکترهای فوق ، کدهای برنامه نويسی Html می باشند. هر عنصر(Element) بهمراه کد مربوط ، يک تگ Html می باشد.
تگ HTML
يک تگ Html ، کدی است که به مرورگر اعلام می نمايد با متن مورد نظر چه رفتاری را می بايست داشته باشد. هر تگ بصورت حروف و يا کلماتی که بين علامت < و > می باشند ، نشان داده می شود ( مثلا" <Body> ). برای اعلام خاتمه عمليات مورد نظر در رابطه با يک تگ خاص به مروگر، از "/" بهمراه تگ مربوطه استفاده می شود ( مثلا" <Body/> ) . اکثر تگ ها بصورت زوج ( شروع و پايان) استفاده می گردند. برخی از تگ ها تابع قانون فوق نمی باشند.
هر صفحه وب دارای تگ های زير در ابتدای صفحه است :
-
<HTML> . ابتدای يک صفحه وب را مشخص می نمايد.
-
<HEAD> . هدر صفحه وب را مشخص می نمايد
-
<TITLE> . عنوان در نظر گرفته شده برای صفحه وب را مشخص می نمايد.
-
<BODY> . ابتدای محتويات صفحه وب را مشخص می نمايد.
تگ های زير می بايست در انتهای صفحه بسته گردند.
-
<HTML> . ابتدای يک صفحه وب را مشخص می نمايد.
-
<BODY> . ابتدای محتويات صفحه وب را مشخص می نمايد.
ايجاد يک صفحه وب
برای ايجاد صفحات وب از روش های متعددی استفاده می گردد.صدها شرکت در اين زمينه ابزارهائی را بدين منظور طراحی و عرضه نموده اند. در مقطع فعلی هدف صرفا" آشنائی با اصول اوليه صفحات وب می باشد ، بنابراين می توان از ابزارهای ساده ای نظير اديتورهای ساده متنی استفاده کرد. با توجه به نوع سيستم عامل نصب شده بر روی کامپيوتر می توان از گزينه های متفاوتی در اين زمينه استفاده کرد. مثلا" کاربران ويندوز می توانند از نرم افزار Notepad که يک اديتور ساده متنی است ، استفاده نمايند. اديتور را فعال و تگ های Html زير را در آن تايپ نمائيد :
|
<html> |
پس از تايپ تگ های فوق ، فايل را با نام دلخواه و انشعاب html و يا htm ذخيره نمائيد. در ادامه مرورگر موجود بر روی کامپيوتر خود را فعال و فايل فوق را با استفاده از آن فعال (open) نمائيد. صفحه وب در مرورگر بصورت زير نمايش داده می شود.
در ادامه برخی از تگ های متداول Html توضيح داده می شود.
● تگ های Bold,Italic,Underline
برای پررنگ نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <B> و <B/> قرار داد.
خروجی |
تگ Html |
|
اين قسمت پر رنگ است |
اين قسمت <B> پر رنگ <B/> است. |
برای ايتاليک نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <I> و <I/> قرار داد.
خروجی |
تگ Html |
|
اين قسمت ايتاليک است |
اين قسمت <I> ايتاليک <I/> است. |
برای زيرخط داشتن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <U> و <U/> قرار داد.
خروجی |
تگ Html |
|
اين قسمت زيرخط دارد |
اين قسمت <U> زيرخط <U/> دارد |
● تگ های پاراگراف و خط فاصله
با استفاده از <BR> می توان بين خطوط فاصله ( خط خالی ) ايجاد کرد.
خروجی |
تگ Html |
|
اين قسمت |
اين قسمت <BR> خط دوم نمايش داده می شود |
تگ <P> ، باعث ايجاد يک پاراگراف می گردد. در اين حالت بين خطوط ، فواصل بيشتری بوجود می آيد.
خروجی |
تگ Html |
|
اين قسمت خط دوم نمايش داده می شود |
اين قسمت <P> خط دوم نمايش داده می شود |
تگ <hr> باعث ايجاد يک خط افقی می شود.
خروجی |
تگ Html |
| اين يک خط افقی است. |
اين يک خط افقی است. <hr> |
● تگ های نوع ، اندازه و رنگ فونت
به منظور تغيير رنگ متن دلخواه از تگ <Font color="color"> ... </Font> استفاده می شود.
خروجی |
تگ Html |
|
اين قسمت آبی است |
اين قسمت <" Font color="Blue> آبی<Font/> است |
برای تعيين رنگ می توان از کد معادل آن ( بصورت مبنای شانزده ) نيز استفاده کرد :
|
<font color= "#FDFD00"> |
در صورتيکه قصد اختصاص يک رنگ برای تمام نوشته های موجود در يک صفحه وب را داشته باشيد ، می توان در بخش <Body> از text=color بصورت زير استفاده کرد.
|
<Body text="blue" > |
برای تغيير نوع فونت از تگ <font face="fonttype"> ...</font> استفاده می گردد.
خروجی |
تگ Html |
|
اين قسمت با فونت تيتر نوشته شده است |
اين قسمت با <" Font face="Titr> فونت تيتر<Font/> نوشته شده است |
برای تغيير اندازه فونت از تگ <font size="value"> ...</font> استفاده می گردد. اندازه فوتت پيش فرض سه است . در صورت تمايل می توان در بخش value از مقاديری بصورت 2 + ( افزايش به اندازه دو ) و يا 2 - ( کاهش به اندازه دو ) نيز استفاده کرد.
خروجی |
تگ Html |
|
اين قسمت با اندازه فونت نوشته شده است |
اين قسمت با <" Font size="4> اندازه فونت<Font/> نوشته شده است |
| اين قسمت با اندازه فونت نوشته شده است | اين قسمت با < Font size=+2> اندازه فونت<Font/> نوشته شده است |
| اين قسمت با اندازه فونت نوشته شده است | اين قسمت با <Font size= -2> اندازه فونت<Font/> نوشته شده است |
برای تغييراندازه يک فونت می توان از تگ های <small> و يا <big> نيز استفاده کرد.
خروجی |
تگ Html |
| اين قسمت کوچک است | اين قسمت <small> کوچک <small/> است. |
| اين قسمت بزرگ است | اين قسمت <big> بزرگ <big/> است. |
با استفاده از تگ های هدينگ ، نيز می توان اندازه يک فونت را تغيير داد. ( متن مورد نظر بصورت پررنگ نيز نوشته می شود)
خروجی |
تگ Html |
اين عنوان يک است |
<H1>اين عنوان يک است<H1/> |
اين عنوان دو است |
<H2>اين عنوان دو است<H2/> |
اين عنوان سه است |
<H3>اين عنوان سه است<H3/> |
● تغيير رنگ زمينه يک صفحه
برای تغيير رنگ زمينه يک صفحه بهمراه تگ <Body> از bgcolo=color استفاده می شود.
خروجی |
تگ Html |
| <body bgcolor="Red"> |
●ايجاد ليست
سه نوع ليست وجود دارد : Unordered ,Ordered,Descriptive در ادامه به نحوه استفاده از هر يک اشاره می گردد.
- يک ليست Unordered بصورت زير است :
|
Unordered list |
|
برای ايجاد يک ليست unordered ، از تگ <ul> و برای مشخص نمودن هر آيتم ليست از تگ <li> استفاده می شود. نوع bullet ( قبل هر آيتم قرار می گيرد) می تواند Circle , square , disc باشد . به منظور تغيير نوع bullet می توان بهمراه تگ <ul> از type استفاده کرد.
خروجی |
تگ Html |
|
<UL> <li> مورد يک <li> مورد دوم <li> مورد سوم </UL> |
- يک ليست ordered بصورت زير است :
|
Ordered list |
|
برای ايجاد يک ليست ordered ، از تگ <ol> و برای مشخص نمودن هر آيتم ليست از تگ <li> استفاده می شود.
خروجی |
تگ Html |
|
<OL> <li> مورد يک <li> مورد دوم <li> مورد سوم </OL> |
نحوه مرتب سازی ليست ( قبل هر هر آيتم قرار می گيرد) می تواند تغيير داده شود . به منظور تغيير نوع ليست می توان بهمراه تگ <ol> از type استفاده کرد. در اين حالت می توان از "A" به منظور مرتب سازی ليست بر اساس حروف بزرگ ، از حرف "a" برای مرتب سازی ليست بر اساس حروف کوچک ، از حرف "I" برای مرتب سازی ليست بر اساس حروف بزرگ رومی و از حرف "i" برای مرتب سازی ليست بر اساس حروف رومی کوچک استفاده کرد. مثلا" دستور زير باعث نمايش ليست با استفاده از حروف رومی می گردد:
|
<OL type="I" > |
يک ليست Descriptive ، ليستی از آيتم ها را ايجاد که در سطر دوم متن مورد نظر دارای تورفتگی است.
|
Descriptive list |
|
از تگ <dl> برای تعريف ليست استفاده می شود. تگ <dt> برای سطرهای معمولی و از تگ <dd> برای سطرهائی شامل تورفتگی استفاده می شود.
خروجی |
تگ Html |
|
<DL > <dt> مورد يک <dd>مورد مربوط به يک <dt> مورد دوم </DL> |
● لينک به ساير سايت ها و صفحات
يکی از ويژگی های جالب صفحات وب ، امکان ايجاد لينک ( پيوند ) به ساير صفحات و سايت ها است . بدين منظور از تگ <a> بهمراه href که آدرس مورد نظر را مشخص می کند در ابتدای عنوان مورد نظر استفاده شده و در انتهای عنوان نيز از تگ </a> استفاده می شود.
<a href = "http://www.srco.ir"> برای ورود به سايت در اين محل کليک نمائيد </a>
برای ورود به سايت در اين محل کليک نمائيد
● پنجره جديد
در صورتيکه قصد داشته باشيم ، کاربران سايت پس از اينکه بر روی يک لينک ، کليک می نمايند ، صفحه حاوی لينک را کماکن در اختيار داشته باشند ، می توان از تگ <target=_Blank> همراه تگ <a> استفاده کرد. در چنين حالتی ، پس از اينکه کاربران بر روی لينک مورد نظر ، کليک نمودند ، يک پنجره خالی حديد فعال و محتويات سايت و يا صفحه لينک شده در آن نمايش داده خواهد .
<a href = "http://www.srco.ir" target="_Blank" > برای ورود به سايت در اين محل کليک نمائيد </a>
برای ورود به سايت در اين محل کليک نمائيد
● رنگ لينک ها
رنگ آبی بعنوان رنگ پيش فرض برای لينک ها در نظر گرفته شده است . به منظور تغيير رنگ لينک ( قبل از مشاهده صفحه لينک شده ) و رنگ لينک ملاقات شده ( مشاهده شده ) می توان از تگ های <link> و <vlink> استفاده کرد . مثال زير نحوه عمليات فوق را نشان می دهد:
|
<body link = "Red" vlink = "gray" > |
● لينک دريافت نامه الکترونيکی
در صورتيکه بخواهيم بر روی صفحه يک لينک به منظور دريافت E-mail داشته باشيم ، بهمراه تگ <a> ، آدرس E-mail مربوطه را نيز مشخص نمود.
<a href = "mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید"> برای ارسال نامه الکترونيکی در اين محل کليک نمائيد </a>
برای ارسال نامه الکترونيکی در اين محل کليک نمائيد
● اضافه کردن تصوير و گرافيک
برای اضافه نمودن تصوير در يک صفحه وب از تگ زير استفاده می شود.
|
<img src= " نام فايل گرافيکی مورد نظر " > |
● تراز متن
متن و تصاوير استفاده شده در يک صفحه وب ، بصورت پيش فرض " تراز از سمت چپ " می گردند. در صورتيکه بخواهيم بخش های خاص از صفحه در وسط قرار بگيرد ، از تگ <center> در ابتدای بخش مورد نظر و از تگ <center/> در انتهای بخش ، استفاده می شود.
● ايجاد جدول
برای ايجاد جدول از تگ <table> ، سطر از تگ <tr> ،هر بخش داده از <td> استفاده می شود. فرض کنيد ،قصد ايجاد يک جدول مشابه شکل زير را داشته باشيم :
|
A1 |
A2 |
|
B1 |
B2 |
|
C1 |
C2 |
جدول فوق دارای سه سطر و دو ستون است . برای ايجاد جدول فوق از تگ های زير استفاده می شود:
|
<table> |
شروع جدول |
|
<tr> |
شروع سطر اول |
|
<td> |
شروع اولين سلول سطر اول (A1) |
|
</td> |
پايان اولين سلول (A1) |
|
<td> |
شروع دومين سلول (A2) |
|
</td> |
پايان دومين سلول (A2) |
|
</tr> |
پايان سطر اول |
|
<tr> |
شروع سطر دوم |
|
<td> |
شروع اولين سلول سطر دوم (B1) |
|
</td> |
پايان دومين سلول (B1) |
|
<td> |
شروع دومين سلول (B2) |
|
</td> |
پايان دومين سلول (B2) |
|
</tr> |
پايان سطر دوم |
|
<tr> |
شروع سطر سوم |
|
<td> |
شروع اولين سلول سطر سوم (C1) |
|
</td> |
پايان اولين سلول (C1) |
|
<td> |
شروع دومين سلول (C2) |
|
</td> |
پايان دومين سلول (C2) |
|
</tr> |
پايان سطر سوم |
|
</table> |
پايان جدول |
برای تعريف رنگ زمينه برای هر سطر و يا سلول می توان بهمراه تگ های <tr> و يا <td> از bgcolor="Color استفاده کرد.
|
<tr bgcolor = "red" > |
برای تعريف اندازه طول و عرض يک جدول ، در زمان تعريف جدول می توان از width و height به منظور مشخص نمودن اندازه جدول ( بر حسب پيکسل و يا درصد ) استفاده کرد.
|
<table width=250 height=300 > |
برای مشخص نمودن طول و عرض هر سطر و يا سلول نيز می توان از width و يا height استفاده کرد.
Cellpading ، تگ فوق فضای خالی بين هر يک از گوشه های سلول با داده های موجود در سلول را مشخص می نمايد.
|
<table borde = 1 cellpadding = 3 > |
Cellspacing ، تگ فوق تعداد فضای خالی ( بر حسب پيکسل ) بين هر يک سلول ها را مشخص می نمايد.
|
<table borde = 1 cellspacing =13 > |
Alignment ، تمام سلول ها ی موجود در يک جدول بصورت پيش فرض "تراز از چپ " می گردند. برای تراز يک سلول می توان هر يک از تگ های <td> ، <tr> را بهمراه align = direction استفاده کرد.
|
<td align = "Right" > |
متولد بهمن ماه از تهران می باشد و در راستای ارائه خدمات نوین فناوری اطلاعات با تیمی مجرب و نخبگان ایرانی اقدام به راه اندازی یک شرکت فناوری اطلاعات در سال 1383 نموده است و امیدواراست تا خداوند متعال تیم رضوان نت را حمایت نماید و از استفاده نظرات و انتقادات شما عزیزان دریغ نخواهد کرد.. 