صفحات وب

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

صفحه وب . صفحه وب يک فايل ساده متنی است که محتويات آن علاوه بر متن، شامل تگ های HTML نيز می باشد. تگ های فوق ، نحوه نمايش اطلاعات توسط يک مرورگر را مشخص می نمايند. تگ های HTML ، دستورالعمل های ساده ای می باشند که نحوه نمايش محتويات صفحه را برای مرورگر وب ، تبين می نمايد. مرورگر به منظور اتخاذ تصميم در رابطه با نحوه نمايش اطلاعات ، تگ های HTML را تفسير می نمايند.
مرورگر وب . مرورگر وب ( نظير Internet Explorer و يا Netescape Navigator) ، نرم افزاری است که دو کار اصلی را انجام می دهد:
- مرورگرها با نحوه درخواست يک صفحه وب از سرويس دهنده وب آشنائی دارند. بدين ترتيب برنامه های فوق قادر به درخواست يک صفحه وب از سرويس دهنده وب و نمايش آن بر روی کامپيوتر سرويس گيرنده می باشند.
- مرورگرهای وب با نحوه تفسير تگ های HTML آشنائی دارند. پس از تفسير تگ های HTML زمينه نمايش اطلاعات موجود در صفحه وب با فرمت مشخص شده ، فراهم می گردد .

سرويس دهنده وب . سرويس دهنده وب ، نرم افزاری است که قادر به پاسخگوئی به مرورگر وب و ارسال صفحه درخواستی است . صفحات وب بر اساس يک ساختار مشخص و تحت يک نام واحد ( نام حوزه ) بر روی سرويس دهنده وب ذخيره می گردند. بر روی يک سرويس دهنده وب امکان استقرار صفحات وب متعدد و با ساختارهای جداگانه وجود دارد.

مشاهده محتويات اوليه يک صفحه وب
به منظور مشاهده کد اوليه (Source) يک صفحه وب، می توان از گزينه "View Source" استفاده نمود . بدين منظور می توان کليد سمت راست موس را فعال ( زمانيکه صفحه مورد نظر توسط مرورگر نمايش داده شده است ) و گزينه "View Source" را انتخاب کرد. در ادامه پنجره ای فعال و کلمات و کاراکترهای مربوطه نمايش داده می شود. کلمات و کاراکترهای فوق ، کدهای برنامه نويسی Html می باشند. هر عنصر(Element) بهمراه کد مربوط ، يک تگ Html می باشد.

تگ HTML
يک تگ Html ، کدی است که به مرورگر اعلام می نمايد با متن مورد نظر چه رفتاری را می بايست داشته باشد. هر تگ بصورت حروف و يا کلماتی که بين علامت می باشند ، نشان داده می شود ( مثلا" ). برای اعلام خاتمه عمليات مورد نظر در رابطه با يک تگ خاص به مروگر، از "/" بهمراه تگ مربوطه استفاده می شود ( مثلا" ) . اکثر تگ ها بصورت زوج ( شروع و پايان) استفاده می گردند. برخی از تگ ها تابع قانون فوق نمی باشند.

هر صفحه وب دارای تگ های زير در ابتدای صفحه است :

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

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

. عنوان در نظر گرفته شده برای صفحه وب را مشخص می نمايد.

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

تگ های زير می بايست در انتهای صفحه بسته گردند.

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

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

ايجاد يک صفحه وب
برای ايجاد صفحات وب از روش های متعددی استفاده می گردد.صدها شرکت در اين زمينه ابزارهائی را بدين منظور طراحی و عرضه نموده اند. در مقطع فعلی هدف صرفا" آشنائی با اصول اوليه صفحات وب می باشد ، بنابراين می توان از ابزارهای ساده ای نظير اديتورهای ساده متنی استفاده کرد. با توجه به نوع سيستم عامل نصب شده بر روی کامپيوتر می توان از گزينه های متفاوتی در اين زمينه استفاده کرد. مثلا" کاربران ويندوز می توانند از نرم افزار Notepad که يک اديتور ساده متنی است ، استفاده نمايند. اديتور را فعال و تگ های Html زير را در آن تايپ نمائيد :

اولين صفحه وب

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

پس از تايپ تگ های فوق ، فايل را با نام دلخواه و انشعاب html و يا htm ذخيره نمائيد. در ادامه مرورگر موجود بر روی کامپيوتر خود را فعال و فايل فوق را با استفاده از آن فعال (open) نمائيد. صفحه وب در مرورگر بصورت زير نمايش داده می شود.

در ادامه برخی از تگ های متداول Html توضيح داده می شود.

● تگ های Bold,Italic,Underline

برای پررنگ نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های و قرار داد.

خروجی
تگ Html

اين قسمت پر رنگ است اين قسمت پر رنگ است.

برای ايتاليک نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های و قرار داد.

خروجی
تگ Html

اين قسمت ايتاليک است اين قسمت ايتاليک است.

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

خروجی
تگ Html

اين قسمت زيرخط دارد اين قسمت زيرخط دارد

● تگ های پاراگراف و خط فاصله

با استفاده از
می توان بين خطوط فاصله ( خط خالی ) ايجاد کرد.

خروجی
تگ Html

اين قسمت
خط دوم نمايش داده می شود اين قسمت
خط دوم نمايش داده می شود

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

خروجی
تگ Html

اين قسمت

خط دوم نمايش داده می شود اين قسمت
خط دوم نمايش داده می شود

تگ باعث ايجاد يک خط افقی می شود.

خروجی
تگ Html
اين يک خط افقی است. اين يک خط افقی است.

● تگ های نوع ، اندازه و رنگ فونت

به منظور تغيير رنگ متن دلخواه از تگ ... استفاده می شود.

خروجی
تگ Html

اين قسمت آبی است اين قسمت آبی است

برای تعيين رنگ می توان از کد معادل آن ( بصورت مبنای شانزده ) نيز استفاده کرد :

در صورتيکه قصد اختصاص يک رنگ برای تمام نوشته های موجود در يک صفحه وب را داشته باشيد ، می توان در بخش از text=color بصورت زير استفاده کرد.

برای تغيير نوع فونت از تگ ... استفاده می گردد.

خروجی
تگ Html

اين قسمت با فونت تيتر نوشته شده است اين قسمت با فونت تيتر نوشته شده است

برای تغيير اندازه فونت از تگ [SIZE=value] ... استفاده می گردد. اندازه فوتت پيش فرض سه است . در صورت تمايل می توان در بخش value از مقاديری بصورت 2 + ( افزايش به اندازه دو ) و يا 2 - ( کاهش به اندازه دو ) نيز استفاده کرد.

خروجی
تگ Html

اين قسمت با اندازه فونت نوشته شده است اين قسمت با اندازه فونت نوشته شده است
اين قسمت با اندازه فونت نوشته شده است اين قسمت با اندازه فونت نوشته شده است
اين قسمت با اندازه فونت نوشته شده است اين قسمت با اندازه فونت نوشته شده است

برای تغييراندازه يک فونت می توان از تگ های و يا نيز استفاده کرد.

خروجی
تگ Html
اين قسمت کوچک است اين قسمت کوچک است.
اين قسمت بزرگ است اين قسمت بزرگ است.

با استفاده از تگ های هدينگ ، نيز می توان اندازه يک فونت را تغيير داد. ( متن مورد نظر بصورت پررنگ نيز نوشته می شود)

خروجی
تگ Html
اين عنوان يک است اين عنوان يک است
اين عنوان دو است اين عنوان دو است
اين عنوان سه است اين عنوان سه است

● تغيير رنگ زمينه يک صفحه

برای تغيير رنگ زمينه يک صفحه بهمراه تگ از bgcolo=color استفاده می شود.

خروجی
تگ Html

●ايجاد ليست

سه نوع ليست وجود دارد : Unordered ,Ordered,Descriptive در ادامه به نحوه استفاده از هر يک اشاره می گردد.

- يک ليست Unordered بصورت زير است :

Unordered list
مورد يک
مورد دوم
مورد سوم

برای ايجاد يک ليست unordered ، از تگ و برای مشخص نمودن هر آيتم ليست از تگ
استفاده می شود. نوع bullet ( قبل هر آيتم قرار می گيرد) می تواند Circle , square , disc باشد . به منظور تغيير نوع bullet می توان بهمراه تگ از type استفاده کرد.

خروجی
تگ Html
مورد يک
مورد دوم
مورد سوم

- يک ليست ordered بصورت زير است :

Ordered list
مورد يک
مورد دوم
مورد سوم

برای ايجاد يک ليست ordered ، از تگ و برای مشخص نمودن هر آيتم ليست از تگ
استفاده می شود.

خروجی
تگ Html
مورد يک
مورد دوم
مورد سوم

[/SIZE] HTML يک " زبان نشانه گذاری " است . زبان فوق نحوه فرمت ( قالب ) يک صفحه را تشريح می نمايد. با استفاده از زبان فوق می توان : نوع ، اندازه و رنگ يک فونت را مشخص نمود . اقدام به ايجاد جداول نمود و يا از فايل های گرافيکی و يا صوتی به همراه صفحات وب استفاده نمود . مورد يک مورد دوم مورد سوم مورد يک مورد دوم مورد سوم

نحوه مرتب سازی ليست ( قبل هر هر آيتم قرار می گيرد) می تواند تغيير داده شود . به منظور تغيير نوع ليست می توان بهمراه تگ از type استفاده کرد. در اين حالت می توان از "A" به منظور مرتب سازی ليست بر اساس حروف بزرگ ، از حرف "a" برای مرتب سازی ليست بر اساس حروف کوچک ، از حرف "I" برای مرتب سازی ليست بر اساس حروف بزرگ رومی و از حرف "i" برای مرتب سازی ليست بر اساس حروف رومی کوچک استفاده کرد. مثلا" دستور زير باعث نمايش ليست با استفاده از حروف رومی می گردد:

يک ليست Descriptive ، ليستی از آيتم ها را ايجاد که در سطر دوم متن مورد نظر دارای تورفتگی است.

Descriptive list
مورد يک
مورد مربوط به يک
مورد دوم

از تگ برای تعريف ليست استفاده می شود. تگ برای سطرهای معمولی و از تگ برای سطرهائی شامل تورفتگی استفاده می شود.

خروجی
تگ Html
مورد يک
مورد مربوط به يک
مورد دوم

مورد يک
مورد مربوط به يک
مورد دوم

● لينک به ساير سايت ها و صفحات
يکی از ويژگی های جالب صفحات وب ، امکان ايجاد لينک ( پيوند ) به ساير صفحات و سايت ها است . بدين منظور از تگ بهمراه rel="nofollow" href که آدرس مورد نظر را مشخص می کند در ابتدای عنوان مورد نظر استفاده شده و در انتهای عنوان نيز از تگ استفاده می شود.

برای ورود به سايت در اين محل کليک نمائيد

برای ورود به سايت در اين محل کليک نمائيد

● پنجره جديد
در صورتيکه قصد داشته باشيم ، کاربران سايت پس از اينکه بر روی يک لينک ، کليک می نمايند ، صفحه حاوی لينک را کماکن در اختيار داشته باشند ، می توان از تگ همراه تگ استفاده کرد. در چنين حالتی ، پس از اينکه کاربران بر روی لينک مورد نظر ، کليک نمودند ، يک پنجره خالی حديد فعال و محتويات سايت و يا صفحه لينک شده در آن نمايش داده خواهد .

برای ورود به سايت در اين محل کليک نمائيد

برای ورود به سايت در اين محل کليک نمائيد

● رنگ لينک ها
رنگ آبی بعنوان رنگ پيش فرض برای لينک ها در نظر گرفته شده است . به منظور تغيير رنگ لينک ( قبل از مشاهده صفحه لينک شده ) و رنگ لينک ملاقات شده ( مشاهده شده ) می توان از تگ های و استفاده کرد . مثال زير نحوه عمليات فوق را نشان می دهد:

● لينک دريافت نامه الکترونيکی
در صورتيکه بخواهيم بر روی صفحه يک لينک به منظور دريافت E-mail داشته باشيم ، بهمراه تگ ، آدرس E-mail مربوطه را نيز مشخص نمود.

برای ارسال نامه الکترونيکی در اين محل کليک نمائيد

برای ارسال نامه الکترونيکی در اين محل کليک نمائيد

● اضافه کردن تصوير و گرافيک
برای اضافه نمودن تصوير در يک صفحه وب از تگ زير استفاده می شود.

● تراز متن

متن و تصاوير استفاده شده در يک صفحه وب ، بصورت پيش فرض " تراز از سمت چپ " می گردند. در صورتيکه بخواهيم بخش های خاص از صفحه در وسط قرار بگيرد ، از تگ در ابتدای بخش مورد نظر و از تگ در انتهای بخش ، استفاده می شود.

● ايجاد جدول
برای ايجاد جدول از تگ ، سطر از تگ ،هر بخش داده از و يا از bgcolor="Color استفاده کرد.

برای تعريف اندازه طول و عرض يک جدول ، در زمان تعريف جدول می توان از width و height به منظور مشخص نمودن اندازه جدول ( بر حسب پيکسل و يا درصد ) استفاده کرد.
استفاده می شود. فرض کنيد ،قصد ايجاد يک جدول مشابه شکل زير را داشته باشيم :

A1
A2

B1
B2

C1
C2

جدول فوق دارای سه سطر و دو ستون است . برای ايجاد جدول فوق از تگ های زير استفاده می شود:

شروع جدول

شروع سطر اول

پايان اولين سلول (A1)

پايان دومين سلول (A2)

پايان سطر اول

شروع سطر دوم

پايان دومين سلول (B1)

پايان دومين سلول (B2)

پايان سطر دوم

شروع سطر سوم

پايان اولين سلول (C1)

پايان دومين سلول (C2)

پايان سطر سوم

شروع اولين سلول سطر اول (A1)

شروع دومين سلول (A2)

شروع اولين سلول سطر دوم (B1)

شروع دومين سلول (B2)

شروع اولين سلول سطر سوم (C1)

شروع دومين سلول (C2)

پايان جدول

برای تعريف رنگ زمينه برای هر سطر و يا سلول می توان بهمراه تگ های

برای مشخص نمودن طول و عرض هر سطر و يا سلول نيز می توان از width و يا height استفاده کرد.

Cellpading ، تگ فوق فضای خالی بين هر يک از گوشه های سلول با داده های موجود در سلول را مشخص می نمايد.

Cellspacing ، تگ فوق تعداد فضای خالی ( بر حسب پيکسل ) بين هر يک سلول ها را مشخص می نمايد.

Alignment ، تمام سلول ها ی موجود در يک جدول بصورت پيش فرض "تراز از چپ " می گردند. برای تراز يک سلول می توان هر يک از تگ های ، را بهمراه align = direction استفاده کرد.

این صفحه را در گوگل محبوب کنید

[ارسال شده از: فان پاتوق]

[مشاهده در: www.funpatogh.com]

[تعداد بازديد از اين مطلب: 420]