آموزش HTML > فصل پنجم

[Search]

درس 16 - زیبا کردن متن

شما می توانید رنگ و سایز و نوع متن را در HTML تغییر دهید.
اما صبر کنید شما می توانید انواعی از متنهای بالانویس و پایین نویس برای مطالب خنده دار یا ریاضی و شیمی اضافه کنید .
Co2+H2SO4

اهداف این درس

1- عوض کردن سایز بخش مشخصی از یک متن در یک صفحه
2- عوض کردن رنگ مشخصی از یک متن در یک صفحه
3- ایجاد اندیسهای بالا و پایین
4- مشخص کردن نوع قلم

شروع درس

با HTML3,2 و Netscape شما امکانات بیشتری برای ویرایش متن دارید . مخصوصا که می توانید برای فونت خود سایز و رنگ در نظر بگیرید.ویرایش متن می تواند در طرح و نقش صفحه شما تاثیر زیادی داشته باشد اما استفاده بی پروا از آن صفحه ، صفحه شما را دچار تداخل و پارازیت می کند.
شما همچنین می توانید اندیسهای بالا و پایین را برای بیانهای ریاضی و فرمولهای شیمی و پاورقی ها اضافه کنید .
در این درس شما را با اینگونه متن ها آشنا خواهیم کرد و مثالهایی را در این مورد برای شما مطرح خواهیم کرد .

سایز قلم

دستور < font > ....< / font > با Netscape مطرح شد و استفاده می شد برای سایز قلم از 1 تا استفاده می شود 7 از سایز 3 اندازه متن به حالت نرمال در می آید.



رنگ فونت

در درس 14 تگهایی را برای رنگی شدن متن و وارد کردن آن در صفحات وب معرفی کردیم شما همچنین می توانید از تگ فونت برای رنگی کردن قسمتی از متن استفاده کنید . با نوشتن کد رنگ در مبنای 16 یا نوشتن نام رنگ

1- سند Index.html را باز کنید .
2- متن آموزش از راه دور را بصورت زیر ویرایش کنید .

3- نتایج را ذخیره و صفحه را مجددا بار گذاری کنید .





تذکر :

صفات size و color در تگ فونت می توانند همجوار باشند .

اندیسهای بالا و پایین


در زمان HTML3 نمی توانستید در صفحه از بیانات ریاضی و فرمولهای شیمی که نیاز به اندیسهای بالا و پایین داشتند استفاده کنید ، اما بعد از آن از این تگ برای گذاشتن اندیس استفاده شد .
تگ HTML عبارت است از :

1- یکی از اسنادی که قبلا ایجاد کردید را باز کنید .
2- تعدادی معادلات شیمی و ریاضی در آن وارد کنید .
مثلا
HTML3.2 شامل توانایی است که نوع قلم را در صفحه مشخص کند . اما ممکن است در همه مرورگرها کارآیی لازم را نداشته باشد .
قالب HTML آن عبارت است از :

اگر مرورگر بازدید کننده از این توانایی تگ فونت پشتیبانی کند و فونتهایی که در این تگ قرار گرفته در کامپیوترخود داشته باشد در این صورت متن به همان صورت در صفحه وب به نمایش در می آید .
اگر شما قصد داشته باشید که از نوع قلم در تگ فونت استفاده کنید باید از قلمی استفاده کنید که استاندارد باشد و یا بیشتر کامپیوترها آن قلم را داشته باشند.
1- سند index.html را در ویرایشگر خود باز کنید .
2- نوشته زیر را بصورت زیر اصلاح کنید .
3- نتایج را ذخیره و صفحه را مجددا بار گذاری کنید .

مروری بر مطالب

1- چگونه اندازه و رنگ قسمتی از متن را در صفحه تغییر می دهید ؟
2- کدام تگهای HTML را می توانید استفاده کنید اگر مرورگر شما از تگ < font > پشتیبانی نکند؟
3- چگونه یک اندیس پایین در HTML ایجاد می کنید ؟
4- چگونه یک توده ای از متن را با فونت مشخص نمایش می دهید ؟

نکات اضافی

تگ < strik > و< strik / > که در HTML 3.2 در دسترسی قرار گرفته است ممکن است در مرورگر شما کار کند . با این دستور می توانید خطی را بر روی متن ایجاد کنید یعنی متنی که بین دو تگ < Strik > و < Strik /> نوشته شود . در روی آن یک خط کشیده می شود.
در اینجا کلمات ما هرانه ای را برای رنگ متن ذکر می کنیم . در درس 14 شما آموختید که چگونه از تگ < Body > توانائیهای آن برای عوض کردن رنگ زمینه و متن و لینکها استفاده می شود اما اگر برای رنگی شدن قسمتی از متن از تگ < font > استفاده کردیم فقط بر روی رنگ متن های ساده اثر می گذارد و بر روی ابر متنها و اتصالات بی تاثیراست و ممکن است ابر متن ها به طور پیش فرض با خط آبی که در زیر آن گذاشته می شود مشخص گردند.

تمرین

از تمامی تگهای گفته شده در صفحه خود استفاده کنید .

[Search]

اهداف این درس

1- ایجاد خط افقی با قاب متفاوت
2- ایجاد خط با پهنای متفاوت
3- ایجاد خط بدون سایه

شروع درس


سایز خط

اولین مورد این است که خطوطی می تواند با پهنای متفاوت در صفحه ظاهر شوند .

N برحسب Pixel می باشد .
< hr size=2 >same as< /hr > < hr size=8 >

پهنای خط

ویژگی اختیاری دیگری که در تگ < hr > وجود دارد این است که شما می توانید کنترلی بر طول خط داشته باشید که لازم نیست تا کل طول صفحه ادامه داشته باشد .
< hr width=x >
< hr width=z% >
x عددی بر اساس Pixel می باشد که شامل طول خط است و Z در صدی از طول صفحه جاری می باشد که به طور معمول ما درصد را به شما توصیه می کنیم.


طبیعی است که اگر خواستید چندین خط را در وسط قرار دهید هر کدام از آنها در یک خط جداگانه ظاهر خواهند شد . < p > ...< / p alignment=center >
بیشتر مرورگرها از این تگ پشتیبانی می کنند اما ممکن است بعضی از مرورگرها آن را نادیده بگیرند و از آن چشم پوشی کنند .
حال به آرایش صفحه ساخته شده خود می پردازیم :
1- صفحه index.html را باز کنید .
2- بخش زیر را در آن وارد کنید :


و آن را با عبارات زیر جایگزین کنید

بدون سایه
ممکن است شما نخواهید از سایه در خط استفاده کنید .


مروری بر مطالب

1- چگونه می توانید سایز خط افقی را تغییر دهید؟
2- چگونه می توانید طول خط خود را تغییر دهید؟
3- توانایی صفت noshade در تگ hr چیست ؟

تمرین

در صفحات خود از تگ < hr > استفاده کنید.

[Search]

اهداف این درس

1- ردیف کردن قسمتهای مختلف و مجزا کردن قسمتی از متن
2- بوجود آوردن فضای اضافی در اطراف تصویر
3- بوجود آوردن متنهای توضیحی

شروع درس


به ردیف در آوردن متن

با گسترش روز افزون وب نیاز ما برای کنترل بیشتر طرح و شکل صفحه بیشتر شد . یکی از این نیازها وجود تگهایی برای به ردیف در آوردن متن و یا وسط قرار دادن آن و کنترل آن از بقیه قسمتهای صفحه بود که با Netscape و HTML معرفی شد.
مواردی که بین دو تگ < center > و < center / > قرار می گیرد در وسط صفحه به نمایش گذاشته می شود . اگر بخواهید در این زبان کدگزاری متن یا عکسی را در وسط قرار دهید از صفت align در تگ P و Img استفاده کنید .


1- تمامی سندهای خود را باز کنید .
2- برای هر کدام متنی که بین 2 تگ < h1 > و < h1 / > این صفت را به تگ اضافه کنید .


3- نتایج خود را ذخیره و صفحه را مجددا بارگذاری کنید .

تذکر:

در تگ < hr > صفت alignment نیز برای جای دقیق خط می توان بکار برد


به ردیف در آوردن عکس و متن

در درس( a7 ) آموختیم که چگونه یک عکس را در صفحه قرار می دهیم و چگونه در اطراف عکس متن قرار می دهیم .
با صفت align که در تگ < Img > قرار می گیرد می توانید مشخص کنید که یک عکس در چه موقعیتی از بالا و پایین و کناره های صفحه قرار بگیرد ؟


اینک زمانی رسیده که شما بخواهید قسمتی از متن یا دیگر اقلام بکار رفته شده در صفحه را در زیر عکس بیاورید . ویژگی در تگ
وجود دارد که موقعیت را مشخص می کند .


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

لایه عکس

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


vspace و hspace که مخفف Vertical space و hovizental space می باشند( فضای عمودی و فضای افقی )، فضایی است بر حسب پیکسل که در بالا ، پایین ، چپ و راست عکس گذاشته می شود. صفت Alignment را در صفحه خود اضافه کنید . سند index.html خود را باز کنید . تصویر قرار داده شده در آن ممکن است زیبا به نظر برسد اما فضای خالی در کناره های عمودی آن زیاد است . سپس دستورات زیر را در آن بکار ببرید . توجه داشته باشید که اندازه واقعی وابسته به نوع متنی که برای مرورگر خود انتخاب کردید شما می توانید سایزی که وابسته به سایز انتخابی کاربران می باشد را تنظیم کنید .
این دستورات عبارتند از


روش دیگر استفاده از تگ فونت



وقتی از علامت منفی استفاده می کنید سایز فونت خیلی بیشتر از حد نرمال و متعارف می شود که در این موارد می توان از تگ فوق نیز استفاده کرد.
< basefont size=5 >
با این تغییرات سایز فونت شما از ابتدا 3 درجه بیشتر می شود شما از این دستور هنگامی باید استفاده کنید که از ابتدا فونتی خارج از استاندارد قرار دهید . اگر بخواهید تنظیمی بین بخشهای کوچکی از صفحه داشته باشید باید از تگ بالا استفاده کنید . با استفاده از تگ فوق برای بالاتر از درجه 5 می توانید به راحتی سایز تمام متن را تغییر دهید

تذکر :

تگ < base font > بسته می شود و تا جایی ادامه دارد که تگ < base font> دیگری استفاده شود .
اگر مرورگر شما از این تگ پشتیبانی کرد شما می توانید از دستورات و تگهای HTML3/0 استفاده کنید.


ابتدا تگ < font size=x > را برای آرایش عنوان صفحه استفاده می کنیم .
1- سند index.html را در ویرایشگر متنی خود را باز کنید .
2- در دروس قبل از قالب

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

به آنچه که ما انجام دادیم دقیق نگاه کنید اول سایز A 4 درجه بیشتر از مبنای اولیه ظاهر شد .
بقیه حروف 3 درجه بیشتر از حالت استاندارد و نیز تگهای < b > و < b / > برای برجسته کردن عنوان استفاده کردیم . در پایان چون از تگهای < h1 > تا < h6 > برای شکستن خط استفاده کردیم مجبور به استفاده از تگ
شدیم که عنوان را مجبور به ظاهر شدن در خط جدید کند.
3- اگر خواستیم در جایی از صفحه نقل قولی از کسی داشته باشیم آن را برجسته نشان می دهیم .
4- نتایج خود را ذخیره کنید .
می توانید تفاوت بین استفاده از تگ < font > و < h1 > .... را ببینید

[Search]

آرایش در جدول


اهداف این درس

1- آرایش جدول در یک صفحه وب با ردیفهای افقی و عمودی در یک نمایش متن در یک صفحه مشبک
2- یکپارچه کردن عکسها و متون
3- ایجاد جدولی با سلولهایی با رنگهای متفاوت
4- ایجاد جداولی که در زمینه آنها از عکس استفاده شده است .

شروع درس

جداول با HTML3 معرفی شد و بعدها با Netscape گسترش پیدا کرد که آرایش را برای المانها و عناصر در صفحه انجام می داد . یکی از بیشترین استفاده های جدول زمانی است که شما می خواهید ستونی از متن را اضافه کنید .
کدهای HTML برای جداول ممکن است خیلی پیچیده به نظر برسد اما ما با ساخت جداول ساده ای کار را شروع می کنیم .
جداول از انتهای چپ با ستونهایی به سمت راست شروع می شوند . سپس ردیف دوم نیز با چنین ستونهایی ادامه دارد و ...
-- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > هر کدام از این خانه های مشبک را یک Cell می نامند .


< b >تگ < Table >< /b >




صفت border در تگ Table به مرورگر می فهماند که یک قابی در دور جدول با ضخامت مختلفی که عدد آن بر حسب pixel برابر با مقدار Border قرار می گیرد ، ایجاد کنید هر سطر با تگهای < tr > ... < / tr > ایجاد می شود و اطلاعات هر ردیف با ستونهای آن که با تگ < td > ... < / td > ایجاد می شود توصیف می گردند .
هر تگ < td > ...< / td > می تواند شامل انواعی از تگهای HTML مثل سرفصلها و ابر متنها و تصاویر خطی و غیره باشد ، صفات زیادی را برای تراز کردن اقلام جدول می توانید به کار ببرید .
< td align=left >aligns all elements to the left side of the cell(this is the default setting)< td valign=top >aligns all elements to the top of the cell< td align=right > aligns all elements to the right side of the cell < td valign=bottom >aligns all elements to the bottom of the cell < td valign=bottom >aligns all elements to the bottom of the cell later, siv. Longhorn dec lared that all markers of cheese would have to be certified befor commencing production < td align=center >aligns all elements to center of the cell < td valign=middle >aligns all elements to the middle of the cell(this is the default setting)

ردیف ها و ستون ها

جداول ساده و زیبا و مربع شکل هستند . جدولی که در بالا ذکر شد شامل 3 ردیف ستون و 3 سطر می باشد ، با صفات Colspan و Rowspan چه می توان کرد ؟

تذکر :

صفت استفاده شده برای ستون دوم از سطر اول را با هم تلفیق کرده است ، همچنین می توانیم متن را در وسط هر خانه آرایش دهیم .





در قبل 2 ستون را با هم تلفیق کردیم و بصورت یک سلول واحد در آوردیم . در اینجا می توانیم 2 سطر را با هم تلفیق کنیم و بصورت واحد در آوریم :






اطلاعات یک جدول
1- صفحه lesson2.html را باز کنید .
2- مواردی که بین < pre > ...< / pre > را تماما حذف کنید .
3- این موارد را اضافه کنید :



تذکر : < td >< /tr >< /table >
نگاه کنید به ردیف اول کدها سر فصل جدول تگ< th > و< th / > دقیقا مانند < td > و < td / > عمل می کنند . متنی که بین < th > و < th / > نوشته می شود بطور خودکار بصورت جسم و برجسته به نمایش در می آید .
نام دوره اموزشينام مدرسطول دورهinternetxxxhtmlxxx40 h
4- صفحه خود را ذخیره و آن را مجددا بار گذاری کنید .
مواردی را به جدول خود اضافه کنید . توانائیها و صفات دیگری در تگ < table > وجود دارد که باعث آرایش جدول می شود


X ضخامت دیواره خارجی جدول می باشد . صفت Cellpadding فضای خالی بین عناصر جدول از دیواره جدول می باشد . هر چه Y بیشتر باشد خانه جدول بزرگتر خواهد بود . صفت Cellspacing فاصله بین خانه های جدول را تنظیم می کند .
تگ را بصورت فوق در آورید :

1- جدول قبل را بصورت زیر ویرایش کنید .

تگ < caption > نیز مابین تگ های < table > و < table /> قرار می گیرد .
2- برای سرگرمی هر متنی که مابین < th > و < th /> قرار می گیرد را تغییر دهید.

3- سپس جدول را به وسط صفحه انتقال دهید . اگر مرورگر شما از تگ < centert > و < center / > پشتیبانی می کند جدول را با این تگ محاصره کنید .
4- نتایج خود را ذخیره و صفحه را مجددا بار گذاری کنید .
5- در آخر می خواهیم یک ستون به طرف چپ اضافه کنیم . حالا می توانیم یک خانه خالی با اضافه کردن تگ < th > < th / > به ردیف اول جدول اضافه کنیم.


6- حال به ردیف دوم از جدول می رویم و خانه ای که 4 ردیف را در هم ادغام کرده به آن اضافه می کنیم .



جدول سایز خود را با محتویاتی که در خانه های جدول قرار داده می شود تعیین می کند ما چند تگ < br > اضافه کردیم تا از پهن شدن خانه های جدول جلوگیری کنیم شاید بخواهید تحقیق کنید که اگر این تگها را حذف کنیم چه پیش می آید ؟
7- در ردیف 6 جدول خانه ای اضافه می کنیم که به اندازه 2 ستون پهنا دارد.


8- نتایج خود را ذخیره و صفحه بارگذاری کنید .

جدول های غیر قابل روئیت ( خیالی )

جدول همراه با قاب دور برای نمودارها و اطلاعات مربوط به اهداف شما مهم می باشد . اصطلاح خیالی را به این خاطر به کار می بریم که برای خواننده روشن نیست که به یک جدول نگاه می کند . جدول خیالی غیر قابل رویت با همان تگ ساخته می شود با این تفاوت که Border آن صفر قرار داده می شود .
< table border= 0 > تمرین :
جداول خود را با تغییر Border به عدد صفر تغییر دهید . نتایج خود را ذخیره کنید .

جدا کردن لسیتهای طولانی

به عنوان یک تمرین در جداول خود از لیستهای متعدد استفاده کنید .

رنگی کردن جداول

اغلب مرورگرها از رنگی کردن جداول پشتیبانی می کنند.
مکان جدول

به تمامی ردیفها و ستونهای ساخته شده رنگ اضافه کنید .
تذکر :

شما می توانید از عکس به جای پیش زمینه جداول خود و پاورقی در سلولهای آن استفاده کنید . تذکر :
کاربرد ندارد در IE و

شما می توانید تمامی جداولی که ایجاد کردید را بصورتی تغییر دهید که در پس زمینه آن عکس قرار گرفته باشد .

مروری بر مطالب

1- به چه منظوری المانهای یک صفحه را در جدول قرار می دهند ؟
2- چه فرقی بین تگهای < td / > و < td > و < th > و< th / > وجود دارد.
3- صفات Colspan=X و Rowspan=Y به چه منظوری به کار می رود ؟
4- چگونه یک جدول بدون قاب ایجاد می شود ؟
5- چگونه یک سطر از جدول را رنگی کنیم ؟
6- چگونه یک عکس را پیش زمینه یک جدول کنیم ؟

تمرین :

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

[Search]

اهداف این درس

1- دانستن تفاوت بین فرآیندهای طرف سرور – طرف مشتری
2- ایجاد تصاویری که هر تکه از آن شما را به قسمتی یا صفحه ای هدایت می کند .

شروع درس

در درس( a 7 ) آموختیم که چگونه می توانیم از تصاویر در صفحات وب خود استفاده کنیم . در اینجا می آموزیم که چگونه یک عکس را بگونه ای در آوریم که هر قطعه از آن بصورت اتصالاتی باشد و شما را به قسمتی از همان سایت و حتی سایتهای دیگر هدایت کند. ایجاد یک نقشه تصویری نیاز به یکسری پردازشهایی از طرف وب سرور دارد که چگونگی آن به قرار زیر است :
1- هنگامی که دیدن کننده صفحه را دید و روی عکس خاص کلیک کرد.
2- مرورگر وب می گوید بر روی من کلیک شده و پیامی را برای وب سرور ارسال می کند که بعضی بر روی مختصات عکس کلیک کردند.
3- وب سرور می گوید که من این مختصات را برای عگس گرفتم . فایل HTML که بدنبال پیدا کردن مختصات عکس می باشد می گوید اگر این مختصات بصورت مستطیل باشد دیدن کننده URL مربوطه را برای وب سرور ارسال می کند سپس سرور اطلاعات را به مرورگر ارسال می کند .
4- مرورگر موافقت می کند و سرور می گوید که به URL مذکور برو .
این از فعالیتهای طرف سرور بود که به سادگی و زیبایی این اعمال جدا را از هم انجام می دهد . اما به آن معنی است که برای کلیک بر روی نقشه های تصویری همیشه باید به وب سرور دسترسی داشت .
تگ نقشه های تصویری برای طرف کلاینت بصورت زیر است :

Img.gif نام عکس و map_nam اتصال آن می باشد . HTML file



ویژگی Coords

نواحی داغی که با مختصات x1 و y1 مختصات افقی و عمودی از گوشه بالا سمت چپ و x2 و y2 مختصات افقی و عمودی از گوشه بالا سمت راست را مشخص می کنند .
1- فایل lesson2.html را باز کنید .
2- تغییرات زیر را در روی پان انجام دهید .

3- دستورات HTML را برای مختصات نقشه بکار ببرید .


4- نتایج خود را ذخیره کنید .
5- حال باید صفحاتی را که به آنجا اتصال درست کردیم ایجاد کنیم .
6- صفات خود را ذخیره کنید .

مروری بر مطالب

1- تگهای < map > و < map / > چه عملی را انجام می دهند ؟

تمرین :

در صفحات خود از نقشه های تصویری استفاده کنید .