همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي<body>وارد کنيد بعد از ذخيره آن فايل با پسوند.html يا.htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين عنصر کنترل نمايشنوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان داده شوند. تگهاي متن را ميتوان به دو دسته تقسيم کرد، تگهاي اوليه کهبيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند.بهتر است که Notepad يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.
<br>
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که نيازي به تگ پايان دهنده هم ندارد.
<p></p> پاراگراف بندي متن را به عهده دارد و فاصله بيشتري را نسبت به <br> بين خطوط ايجاد ميکند. اين تگ داراي خصوصيت align= " " ميباشد که محل قرارگيري پاراگراف را در يک سطر کنترل ميکند و با کلمات"left", "center", "right", "justify"مقداردهي ميشود.
<p align="left">...</p>
<center></center>
همانطور که از اسمش پيداست متن بين اين دو تگ در وسط يک سطر قرار خواهد گرفت، البته اين تگ را براي عناصر ديگروب نيز ميتوان بکار برد.
<pre></pre>
مرورگرها فاصله هر کلمه را در حد استاندارد نشان ميدهند و اگر شما بخواهيد که يک متن با فاصله هاي زيادي نمايش داده شود يعنيآنطور که ميخواهيد نشان داده شود از اين تگ استفاده ميکنيد.
<h1></h1> به اين تگHeading مي گويند و براي مشخص کردن سرفصلها و تيترها بکار ميرود. اين تگ از عدد يک تا شش درجه بندي دارد که عدد يک بزرگترين حد و شش کوچکترين حد حروف را نمايش ميدهند. در ضمن داراي خصوصيت " "=alignميباشند و با left, center , right مقداردهي ميشود
<hr>
اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم يک خط افقي آنها را از هم جدا ميکند که داراي خصوصيات زير ميباشد.
width=" "طول خط را کنترل ميکند که هم با عدد در مقياس پيکسل و هم با درصد ميتوان مقدار دهي کرد.
align=" " که محل قرار گيري خط در يکسطر را کنترل ميکند.
color=" "رنگ خط که ميتوانيد اسم رنگ يا کد هگز رنگ را بنويسيد.
size=" " اين خصوصيت ضخامت خط را تعيين ميکند که هرچه عدد بزرگتر باشد ، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه ميباشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نميدهد.
<div></div> اين تگ کاربرد فراواني براي مدل دادن به متن دارد و مانند تگ <br> آن قسمت از متن را جدا ميکندوبه خط بعد منتقل ميکند . خصوصيت style=" " در اين تگ توانايي اعمال يک الگوي خاص در آن قسمت از متن را ميدهد. بطور مثال هر گاه کاربر نشانگر موس را روي آن متن برد ، نوشته هاي ما خط دار شود، البته هر نوع Style که تعريف شود همان را بکار ميبرد. در بخشStyle Sheets درست کردن الگوها را توضيح خواهم داد.
<span></span> اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف ميباشد چون مانند div متن را از بقيه جدا نميکند و داراي خصوصيت style=" " ميباشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود.
<marquee></marquee>
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ ممکن است در همه مرورگرهاعمل نکند ولي در مرورگر اينترنت اکسپلورر (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از :
align=" "محل قرار گرفتن متن را تعيين ميکند که با کلماتtop, middle, bottom مقدار دهي ميشود.
behavior=" "اين خصوصيت نحوه حرکت متن را کنترل ميکند که آنرا برابر با scroll اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج ميشود و اگر برابر با alternate قرار دهيم ، متن از صفحه خارج نميشود و در عرض مرورگر حرکت ميکند، همچنين اگر برابر با slide باشد ، متن از يکطرف وارد صفحه شده و در طرف ديگرميايستد.
bgcolor=" " رنگ زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا مينويسيد.
direction=" "جهت ورود متن به صفحه را کنترل ميکند و با کلمات left, right, top, down که از چپ ، راست، بالا و پايين ميتواند وارد شود.
height=" "ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين ميکند.
hspace=" " حاشيه چپ و راست را کم وزياد ميکند.
loop=" "تعداد چرخش متن را کنترل ميکند.
scrolldelay=" " سرعت حرکت متن را تعيين ميکند.
vspace=" " حاشيه بالا و پايين متن را مشخص ميکند.
width=" " عرض کادر را کنترل ميکند.
<-- !.....-->
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش داده شود و يا عملي را انجام دهد استفاده ميکنيد کهبجاي نقطه چين هر متني را ميتوانيد وارد کنيد .
<bdo></bdo>
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت dir=” “ ميباشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقدار دهي ميشود.
تا به حال با تگهايي آشنا شديد که کنترل کلي نمايش متن را به عهده داشتن و ااز این به بعد تگهايي را مياموزيد که کنترل نمايش حروف از لحاظ سايز، ضخامت، نوع آرايش و قرارگيري آنها در کلمه را بعهده دارند که به اين نوع تگها formatting ميگويند.
<font></font>
براي مشخص کردن نوع يا شکل حروف ، رنگ و يا اندازه آنها از اين تگ استفاده ميکنيم که داراي خصوصيات زير ميباشد.مثال
face=" "اين خصوصيت نوع فونت را تعيين ميکند که بايد برابر با يکي از فونتهاي استاندارد سيستم عامل قرار دهيد.
size=" "اندازه هر حرف را تعيين ميکند که از اعداد يک تا هفت با علامت مثبت به نشانه افزاينده و با علامت منفي به نشانه کاهش سايز استفادهميشود.
color=" "براي کنترل و تعيين رنگ حروف اين تگ را ميتوان بکار برد.
<big></big> , <small></small>
براي تعيين اندازه حروف در يک حد خاص از اين تگها استفاده ميشود.
<s></s>
گاهي اوقات نياز داريم که روي يک حرف يا کلمه خط بکشيم، بطور مثال ميخواهيم روي قيمت قديمي کالا خط بکشيم و قيمت جديد آنراکنارش بنويسيم که در اينصورت اين تگ را بکار خواهيم برد، همچنين از تگ<strike> ميتوان بجاي آن استفاده کرد.
نکته:تگ هايي مانند<b><i><u><s>را physical مينامند يعني متن بکار رفته در آنها بصورت آنچه که انتظار داريم نمايان ميشوند اما در مقابل، تگ هاي logical هم هستند که تنظيمات مرورگرها در آنها موثر خواهند بود.
<sup></sup>
حروف يا اعداد بين آنها بالاتر از سطر ظاهر خواهند شد، مانند عدد توان در رياضيات.
<sub><sub>
حروف يا اعداد پايين تر از سطر نوشته ميشوند، مانند عدد ظرفيت در فرمولهاي شيمي.
<tt></tt>
نوشته بين آنها بصورت حروف تايپي ظاهر ميشود و خاصيت آن در اينست که کليه حروف به يک اندازه جا اشغال ميکنند.
<em></em> اين تگ مانند تگ<i>عمل ميکند و جزو تگهاي Logical است.
<strong></strong> اين تگ هم مانند <b>عمل ميکند و در ضمن logical است.
نکته: مزيت استفاده تگهاي logical به تگهاي physical در اينست که در کليه مرورگرها به نمايش در ميايند ولي در بعضي از مرورگرها ممکن است تگ physicalعمل نکند.
<cite></cite> براي جمله هاي نقل قول ميتوان ازش استفاده کرد که مانند <i>عمل ميکند و در ضمن logical هم هست.
<blockquote></blockquote> اين تگ مانند<p> وظيفه پاراگراف بندي را به عهده دارد با اين تفاوت که حاشيه بيشتري را در نظر ميگيرد و اگر براي دو دفعه متوالي استفاده شود، پاراگراف دوم با حاشيه دو برابر نسبت به اولي نمايان ميشود. در ضمن براي خطوط ساده از<q> ميتوان استفاده کرد.
<acronym></acronym> کاربرد اين تگ براي مختصرنويسي است يعني اگر يک کلمه مانند HTML داريد با استفاده از آن ميتوانيد کلمات کامل را در يک کادر کوچک به اسم tooltip قرار دهيد و هنگاميکه کاربرموس را روي آن کلمه ببرد اين کادر باز شده و آنها را نمايش دهد.کلمات کامل را بايد در خصوصيت title=" " قرار دهيد.
<acronym title="radiodetecting and ranging"> RADAR </acronym>
<abbr></abbr>
اين تگ هم مانند تگ بالا است با اين تفاوت که در مرورگر چيزي را نمايش نميدهد.
<code></code>
اگر شما نياز داشتيد تا داخل يک صفحه از وب در مورد کد زبانهاي برنامه نويسي صحبت کنيد، ميتوانيد آنها را بين اين دو تگ قرار دهيد، همچنين براي متغيرها هم از تگ <var></var> ميتوان استفاده کرد.
<dfn></dfn>
اين تگ نمايانگر کلمه definition و براي توصيف يک متن بکار ميرود که آن متن بصورت مايل ظاهر خواهد شد.
<kbd></kbd>
اين هم نمايانگر کلمه keyboard است که حروف را بصورت ساده و تايپي نشان ميدهد.
<samp></samp>
نمايانگر کلمه sample است و براي نمايش نمونه کارتوليد شده از يک برنامه بکار ميرود.
<del></del>
هنگاميکه بخواهيد يک مطلب را حذف کنيد از اين تگ استفاده ميکنيد و يک خطي روي متن بين آنها کشيده ميشود که بطور معمول با تگ <ins> بکار ميرود. اين تگ داراي دو خصوصيت منحصر ميباشد، cite=" " که ميتواند آدرس يک فايل باشد تا توضيحي راجع به علت حذف آن مطلب بدهد و date=" " که تاريخ و زمان حذف را معين ميکند.
<ins></ins>
اين تگ هم بطور معمول با <del> بکار برده ميشود و براي مشخص کردن يک مطلب وارد شده است که داراي خصوصيات درج شده در تگ <del> نيز ميباشد و همچنين اين دو تگ داراي خصوصيت title=" " هم ميباشند که در آن يک پيغام براي بيان علت حذف يا اضافه مطلب ميتوان نوشت.
ليستها هم جزو عنصر متن در html ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها را از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي با ترکيب منظم (Ordered list) و ليست با ترکيب نا منظم (Unordered list) وديگري ليستهاي توصيفي (Definition list). شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در ليست منظم است که در ديگري فقط نقطه هاي توپر هست که ترتيبي را نميتوان براي آنها در نظر گرفت. در هر صورت تگهاي آن به شرح زير ميباشند:
<ol><li></ol>
براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در آغاز قسمتي که ميخواهيم ليست درست کنيمتگ<ol>را که مخفف ordered list ميباشد رامينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از ليستمان تگ<li>را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده</ol>را می نويسيم.
اگر دقت کنيد به صورت پيش فرض اعداد 1,2,3 به ابتداي گزينه هاي ليست مان اضافه ميشود. شما ميتوانيد خصوصيت type را به تگ<ol>اضافه کنيد و آنرا با A, a که به صورت حروف کوچک يا بزرگ انگليسي و يا با I, i که با اعداد رومي است مقدار دهي کنيد. به طور مثال اگر ميخواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت تگ را کامل ميکنيد:
اين تگ را unordered list مينامند و مانند تگهاي بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده ميکند که مانندبالا ميتوانيد از خصوصيت type که با کلمات” disc”, “circle”, “square” مقدار دهي ميشود استفاده کنيد.
شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list گفته ميشود.
بر فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه دارند:
<ol type=”I”>
<li> Item 01 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 02 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 03 <ul type="circle"> <li> Black <li> White </ul>
<li> Item 04 <ul type="circle"> <li> Black <li> White </ul>
</ol>
<dl><dt><dd></dl>
آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند که کلمه مشخص را با تگ <dt> و توصيف آنرا با <dd> بکار ميبرند.
<dl>
<dt> Html
<dd> HyperText Markup Language.
</dl>
لينکها يا همان نقاط پيوند صفحات هم، يک نوع متن به حساب مي آيند، فقط تنها فرقي که بين آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس شکل دست به خودگرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با متن هاي معمولي فرق دارد. پس از کليک کردن روي لينکها، ما به صفحات ديگر يا حتي به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک <a></a>ميباشد که با خصوصيت href آدرس دهي ميشود که آن لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم يک لينک درست کنيم که به سايت yahoo متصل شود بدين صورت عمل ميکنيم،
<a href="www.yahoo.com">Yahoo website</a>
که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت ياهو حرکت ميدهد دقت کنيد فقط متني که مابين دو تگ آغاز کننده يعني <a href=” “>و تگ پايان دهنده </a> نوشته شود در مرورگر به شکل لينک ظاهر ميشود و قابل کليک است
همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط کشيده ميشود که در بخش Style Sheet شما ياد خواهيد گرفت تا اين خط را برداشته يا رنگ آن را تغيير دهيد.لينکها را مي توان به دو دسته داخلي و خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه يا صفحات مختلف يک وب سايت ميباشند و لينکهاي خارجينقاط پيوند بين دو سايت مختلف ميباشند.
Absolute and Relative
لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل را نوشت مانند:
و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض مثال اگر لينک ما قرار است به يک صفحه به اسم Page01.htm در دايرکتوري بنام htmlpages متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:
<a href="htmlpages/Page01.htm"> Page01 </a>
به اين مدل relative مي گويند.
دقت کنيد دوستان وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک مادر صفحه اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم( .. ) استفاده کنيم،
<a href="../page02.htm"> page02 </a>
به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه را مينويسيمولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول ميتوانيم دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:
<a href="../../thispage.htm"> this page </a>
target
تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank , _self , _top , _parent قرار گيرد.
target="_blank"
اين مقدار يک پنجره جديد در مرورگر باز کرده و صفحه مربوط به آن لينک را نمايش ميدهد.
_self
اطلاعات صفحه مربوط به آن لينک در همان فريم که لينک قرار دارد نمايش داده ميشود.
_parent
صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جديد.
_top
صفحه مربوط به اين لينک هيچگاه در پنجره اي که فريم دارد باز نخواهد شد.
Anchor
يک نوع لينک هم هست که دو نقطه را در داخل يک صفحه بهم متصل ميکند که به آن anchor مي گويند. کاربردهاي گوناگوني دارد ولي بيشترين کاربرد اين نوع لينک براي مواقعي است کهطول يک صفحه از سايت زياد شده و در انتهاي همان صفحه شما يک لينک مي گذاريد تا با کليک کردن بر روي آن بيننده سايت شما به بالاي همان صفحه هدايت شود. براي اينکار دو سريتگ لازم است که بايد بنويسيد، يکي جايي است که ميخواهيد لينک به آن متصل شود که بايد آن نقطه از صفحه را نامگذاري کنيد و اين اسم بايد داخل همان صفحه تک باشد يعني در جاي ديگربکار نبرده باشيد و تگ آن به اين صورت است:
<a name="top">
در بين دو علامت " " و به جاي کلمه top هر اسمي ميتوانيد بکار بريد اين نکته را در ذهن داشته باشيد که اين تگ درمرورگر ظاهر نميشود.اما تگ ديگري که نياز است خود کد لينک است وبجاي نوشتن آدرس فايل در خصوصيت href شما نامي را که انتخاب کرديد به اضافه علامت # را مينويسيد:
<a href="#top">top of the page</a>
در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از مدل absolute استفاده کنيد و آدرس کامل را بنويسيد:
<a href="http://www.sitename.com/page01.html"> link to another site </a>
نکته:نوشتن پروتکل http:// اجباري نيست و ميتوانيد از نوشتن آن صرف نظر کنيد.
mailto
علاوه بر اين لينکها شما ميتوانيد براي آدرسهاي ايميل هم لينک درست کنيد که تگ آن به صورت زير ميباشد:
<a href="mailto:email_address"> my email </a>
کلمه mailto: به مرورگر ميفهماند که بايد يک ايميل به آدرس بعد از آن فرستاده شود. البته اين لينکها براي بيننده هايي که ايميل هايشان را با برنامه هايي مانند Outlook express چک ميکنند ، مفيد است چون وقتي که روي اين نوع لينک کليک شود برنامه پيش فرض مديريت ايميل در سيستم عامل کاربر باز ميشود پس براي بيننده هايي که آدرس ايميل ياهو دارند اين کد مفيد نيست بهتر است که آدرس کامل ايميل را نوشته و به صورت يک لينک درست کنيد تا براي کليه بينندگان سايت مفيد باشد، مانند مثال زير:
البته شما ميتوانيد حتي موضوع و متن ايميل را تعيين کنيد. اگر قصد همچين کاري را داريد پس بايد بلافاصله بعد ازآدرس ايميل داخل تگ يک علامت سوال اضافه کنيد تا مرورگر بفهمد که اينآدرس ادامه دارد و بعد از علامت سوال کلمه subject= را مينويسيد که اين کلمه نشانگر موضوع ايميل است و هرچيزي که جلوي آن نوشته شود به عنوان موضوع ايميل در برنامه مشخصه نمايان خواهد شد و اگر متن ايميل هم بخواهيد نوشته شود بايد بعد از موضوعي که نوشتيد علامت&را بگذاريد وسپس کلمه body= را که نشانگر متن ايميل است و در جلوي علامت مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال ميخواهيد که ايميل با موضوع Test و متن Hello my friends به آدرس ايميل فرستاده شود:
<a href="mailto:my_email@domain.com?subject=Test&body=Hello my friends"> my_email@domain.com </a>
توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزارOutlook را براي آدرس ايميل خود تنظيم کنيد.
خب بپردازيم به ادامه بحث ، عکسها داراي فرمتهاي زيادي ميباشند ولي فرمتهايي که در وب بکار برده ميشوند، عبارتند از:
.gif (Graphic Interchange Format)
.jpeg (Joint Photographic Experts Group)
.png (Portable Network Graphics)
عکسها با فرمت .gif بيشترين استفاده را در وب دارند و محبوبترين نوع عکس است. اين نوع فرمت 256 رنگ را پشتيباني ميکند و از ويژگيهاي ديگر آنanimation, transparency, interlacing است . البته محبوبيت آن بيشتر براي حجم کم آن است.
Transparency به شفافيت يک عکس ميگويند که آنرا پشت نما هم مينامند. اين ويژگي است که يک عکس آنقدر شفاف است که شما ميتوانيد تا تصوير ، متن يا رنگ زير آن عکس را ببينيد.
Interlacing گاهي وقتها شما منتظر ميشويد تا يک عکس به دليل بزرگي اندازه بارگذاري شود بعد آنرا ببينيد اما اگر عکسي اين ويژگي را داشته باشد کم کم عکس کامل خواهد شد يعنيخط به خط به عکس اضافه ميشود تا کامل بارگذاري شود.
Animation عکسهاي متحرک را مي گويند وفقط اين فرمت هست که از متحرک سازي عکس حمايت ميکند.
عکسهايي با فرمت .jpeg حدود 16 ميليون رنگ را پشتيباني ميکنند ، نسبت به فرمت .gif از حجم بالاتري برخوردار است ولي کيفيتش بهتر است ، تمام ويژگيهاي gif را دارد به غير از Animation.فرمت .png نسبت به قبليها جديدتر است و مخلوطي از آنهاست يعني کيفيت jpegو حجم کم gif را دارد.
افزودن عکس به صفحه وب:
مانند همه عناصر داخل صفحه، عنصر عکس هم تگ خاص خودش را دارد که آن تگ <img>و پايان دهنده هم ندارد. اما براي مشخص کردن فايل عکس و آدرس دهي آن بايد از خصوصيت src=" " داخل تگ استفاده کنيم که اگر يک عکس داخل دايرکتوري وب سايت خودتان باشد ديگر نيازي به آدرس کامل نيست و فقط اسم دايرکتوري و اسم فايل با پسوند مشخصه آنعکس نوشته ميشود ولي اگر ميخواهيد که عکسي را از وب سايت ديگري در صفحه خود بگذاريد بايد آدرس آن وب سايت و دايرکتوري که عکس در آن قرار گرفته و اسم کامل آن فايل را بنويسيدمانند:
<img src="images/pic01.gif">
<img src="www.sitename.com/images/pic01.gif">
Height, Width
اين تگ خصوصيات ديگري هم دارد، يکي از آنها که کاربرد زيادي هم دارد خصوصيات طول height و عرض width ميباشد که توسط آنها اندازه يک عکس را داخل صفحه ميتوانيد کنترل کنيد. مقياس اندازه گيري طول و عرض بر حسب پيکسل Pixel ميباشد، اگر شما اين خصوصيات را کنترل نکنيد عکس در اندازه اصلي خود ظاهر ميشود. بطور مثال شما ميخواهيد عکسي را وارد کنيد که در صفحه بايد به اندازه 100×100 فضا اشغال کند:
اين نکته را در نظر داشته باشيد که سرعت کامل شدن عکس يعني download شدن آن در صفحه بستگي به حجم آن دارد نه اندازه عکس، پس ميتوانيد اندازه هاي يک عکس را اضافه کنيد ولي دقت کنيد که کيفيت عکس خراب نشود.
Alignment
شما ميتوانيد محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصيت align=” “تعيين کنيد و ميتوانيد کلمات left,right,top,middle,bottom را براي اين خصوصيت بکار بريد. بر فرض ميخواهيد که يک متن بعد از عکس و در وسط قرار گيرد:
<img src="images/pic01.gif" align="middle"> This is a text
در ضمن اگر ميخواهيد خود عکس در وسط صفحه قرارگيرد بايد از تگ<center>قبل از تگ<img>استفاده کنيد و بعد از آن</center> را بنويسيد:
<center><img src="pic01.gif"></center>
Border
اگر مايل هستيد براي عکس کادر بگذاريد ميتوانيد از خصوصيت border=” “ استفاده کنيد و آنرا برابر با يک عدد قرار دهيد که هر چه اين عدد بزرگتر باشد ، کادر دور عکس هم ضخيم تر است به صورت پيش فرض border=”0” است يعني هيچ کادري مشاهده نميشود.مثال
Alt
تا حالا متوجه شديد که در يک وب سايت هنگاميکه نشانگر موس بر روي يک عکس که قرار ميگيرد يک کادر متني کوچک باز شده بنام tooltip و اطلاعاتي را راجع به آن عکس ميدهد؟ پس شما هم اينکار را انجام دهيد، خصوصيت alt=" " را داخل تگ گذاشته و هر متني را که جلويش بنويسيد در صفحه هنگاميکه موس بر روي عکس قرار گيرد ، زيرنشانگر نمايان ميشود. بهتر است که شما هميشه اين کار را انجام دهيد چون مرورگرهايي وجود دارد که عکس را نمايش نميدهد پس با اينکار بيننده از حضور آن عکس خبر دار ميشود.
hspace, vspace
دو خصوصيت ديگر هست که حاشيه و فضاي خالي دور عکس را کنترل می کند، hspace=” “براي حاشيه چپ و راست عکس وvspace=” “ براي بالا و پايين. عددي را که وارد ميکنيد در مقياس پيکسل است.
Image link
شما ميتوانيد يک عکس را به صورت لينک هم درست کنيد يعني هرگاه بيننده روي عکس کليک کرد به صفحه يا سايت ديگر هدايت شود. در بخش قبل با درست کردن لينک آشنا شديد، در اينجاشما بايد تگ لينک را قبل از تگ عکس بنويسيد و تگ پايان دهنده لينک را بعد از تگ عکس وارد ميکنيد، بدين صورت:
بر روی عکس زير کليک کنيد تا به صفحه اصلی سايت هدايت شويد
در ضمن ميشود براي قسمتهاي مختلف يک عکس لينکهايي به جاهاي مختلف درست کرد. به فرض مثال ما يک عکس از نقشه ايران داريم و ميخواهيم که روي هر استان کليک شود ، آن قسمتلينک شود به صفحه مورد نظر. اين حالت راImage map مي گويند که در بخش بعد آنرا توضيح خواهم داد.
Image map يکي از تکنيکهاي ساخت عکس بصورت لينک است که گاهي اوقات به کمک ما ميايد. بطور مثال ما نقشه ايران را در صفحه اي قرارداده و ميخواهيم که بيننده سايت هرگاه روي يک استان کليک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختيار کاربر قرار دهد.اين حالت حجم عکس را افزايش نخواهد داد و بهتر است از عکسهايي با حجم بالا استفاده نکنيم که در اين مورد به قسمت عکسها رجوع کنيد.
خب حالا عکس مورد نظر را با استفاده از تگ<img>درصفحه قراردهيد، سپس خصوصيت usemap=" " را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورتImage map ميخواهيم بکار بريم.
<img src="images/mypic.gif" usemap="#map01">
به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي نقشه را وارد کنيم.ابتدا تگ <map name="map01"> وارد ميکنيم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصيتname=" " مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره،چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ<area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:
Shape=" "مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوشrectangle باشد آنرا برابر با"rect" قرار ميدهيم، اگر دايرهcircle بخواهيم برابر با"circle"و اگر چند ضلعيpolygon بخواهيم برابر با"poly" قرار ميدهيم.
Coords=" "اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محورx, y در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محورxها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.
Coords="10,10,65,65"
همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشتهشود و براي چند ضلعي به تعداد هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.
href=" " که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.
خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيلImage map را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيتismap را به تگ<img>اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيتstatus bar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.
جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از آنها ما مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات يا عناصرديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون آنکه خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي را پيدا ميکنيد که از اينعنصر استفاده نکند و زمانيکه تجربه کافي براي طراحي يک سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول<table></table>ميباشد. اما براي اضافه کردن رديف به يک جدول از<tr></tr>و براي ستون از تگ<td></td> استفاده ميکنيم. پس ساختار کلي يک جدول بدينصورت ميباشد:
<table>
<tr><td>this is a table.</td></tr>
</table>
هر چه تگهاي رديف و ستون بيشتر باشد به همان اندازه ما در جدولمان خانه خواهيم داشت. مجموعه کد بالا نشان دهنده يک جدول با يک رديف و يک ستون است يعني اين جدول داراي يک خانه ميباشد. يکي از ويژگيهاي جدول که محبوبيت آنرا زياد ميکند اينست که هر خانه از آن ميتواند به طور مجزا زمينه رنگي و يا عکسي در زمينه آن داشته باشد البته اندازه هاي هر خانه هم ميتواند متفاوت باشد.
border
خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت دور جدول يک کادردرست ميکند البته اگر اين خصوصيت را برابربا صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم تري خواهيم داشت، در ضمن رنگ کادرهم با bordercolor=" "که برابر با عدد هگز رنگ است تعيين ميشود. borderويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت frame=" "را به تگ<table>اضافه کرده و آنرا برابر با يکي از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان ميکنند.
rule
ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسمTable.htm ذخيره کنيد:
حالا خصوصيت rules=" "را به تگ<table>اضافه کنيد و هر بار يکي از کلمات all, none, groups, rows, cols را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد.
Alignment
ميتوانيد با استفاده از خصوصيت align=" "که در تگ <td>مينويسيدمحل قرارگرفتن يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات left, right, center, justify مقداردهي کنيد.
height, width
با خصوصيات height=" " , width=" " هم اندازه طول و عرض يک جدول را ميتوان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما ميتوانيد از درصد % هم استفاده کنيد مانند width="90%" که اين جدول نود درصد عرض يک صفحه را اشغال ميکند.
bgcolor
براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم. اين خصوصيت را در تگ هاي <tr> و <td> هم مي توانيد بکار بريد.
cellspacing, cellpadding
تگ<table> دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها ميتوانيد فاصله بين خانه هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن داخل يک خانه در جدول با لبه هاي چارچوب آن خانه است که خصوصيت cellpadding=" " اين وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد بود.
header: <th></th>
حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ <td></td> از تگ <th></th> استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود.
colspan, rowspan
گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب خانه هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ <td> استفاده ميکنيد و مقدار آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار ميدهيد.
caption
بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ <caption></caption> در ميان تگهاي <table></table>مشخص ميکنند. اين تگ داراي خصوصيت align=" " ميباشد با کلمات top, bottom, left, center, right مقداردهي ميشود.
thead, tbody, tfoot
اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين رديف، که قسمت سر را با <thead></thead> ، قسمت بدنه را با <tbody></tbody> و قسمت انتهايي را با <tfoot></tfoot> کنترل ميکنيم. اين تگ داراي خصوصيت align نيز ميباشد.
colgroup
همچنين با تگ <colgroup></colgroup> ميتوانيد خصوصيات کليه ستونهاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي خصوصيت span=" " نيز ميباشد که توسط آن تعداد ستونهايي که بايد کنترل شوند را تعيين ميکنيد.
summery
يک خصوصيت ديگر نيز براي تگ <table> هست بنام summery=" " که توصيفي از جدول ميباشد ولي در جايي نمايش داده نميشود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش ميدهند و يا مرورگرهاي مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است از آن استفاده کنيد.
به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روشNested table گفته ميشود.
فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده ميشود. شما ميتوانيد داخل يکصفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که هر کدام از اين فرمها را با استفاده از خصوصيت name=” “در تگ<form> بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه مشخص ميباشند که بايد قبل از تگ پايان دهنده </form> آنها را بکار برد.بعضي از اين اجزا عبارتند از: کادرهاي متني text fields ، قسمت انتخابات چند گزينه اي checkboxes وتک گزينه اي radio buttons ، ليستهاي پايين کشيدني drop-down lists و دکمه هاي تأييد submit وپاک کننده reset .
فرمها توسط برنامه هايي نظير ASP, CGI و با افزودن خصوصيات action=” “, method=” “, enctype=” “ در تگ <form> اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود.وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.
دکمه (button)
کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از فشردن اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين دکمه ميپردازيم.براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:
روش اول: با استفاده از تگ<button></button>که داراي دو خصوصيت name=” “براي نامگذاري و type=” “براي مشخص کردن نوع دکمه که submit و يا reset ميباشد .در بين تگ آغازکننده و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان ميشود
<button name="button 01" type="submit"> OK </button>
روش دوم: با استفاده از تگ<input>که مانند روش اول دو خصوصيت name=” “که بايد کلمه button در جلوي آن بيايد و type=” “که ميتواند هم submit باشد و يا reset.
<input name="button" type="submit">
فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit , reset نمايان ميشود. البته ميتوانيد بجاي دکمه هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيت type=” “ را برابر با کلمه image قرار ميدهيد و با خصوصيت src=” “ آن را آدرس دهي ميکنيد:
لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.
text field, text area
خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ
<input name=” “ type=” “>
وخصوصياتش زياد کار داريم . ما براي وارد کردن متن در فرم بسته به نيازمان از دو مدل کادرمتني ميتوانيم استفاده کنيم، يکي براي وارد کردن يک خط متن کوتاه که چند کلمه بيشتر نباشد و کادر ما هم به صورت خطي ميباشد و ديگري براي يک متن بلند است و کادر ما داراي چندين رديف ميباشد.
در مدل اول ازاين تگ استفاده ميکنيم:
<input name="textfield 01" type="text”>
دقت کنيد که کلمه text بايد در جلوي خصوصيت type=” “بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت size=” “ که با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=” “ حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.
Textfield :
اگر قرار باشد که بيننده داخل اين کادر خطي ، کلمه رمز را وارد کند پس بجاي خصوصيت type=”text” بايد از type=”password” استفاده کنيد تا هر متني که وارد شود بصورت ستاره در مرورگر نمايش داده شود.
Password :
اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از تگ<textarea></textarea>استفاده کنيد که جدا از خصوصيت name=” “از خصوصيات cols=” “ , rows=” “براي کنترل رديفها و ستونهاي کادر بکار ميبريد.
label
زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد کنيد تا نام آن قسمتدرمرورگر مشخص شود. اما با افزودن تگ <label> کنترل بيشتري روي نام واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد، بدين صورت:
<label> Name :
<input type="text" name="textfield01">
</label>
که اين کد به صورت زير ظاهر مي شود،
دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،
<label for="textfield01"> Name : </label>
<input type="text" name="textfield01">
Tab order
يکي از خصوصيات مفيد تگهاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي شود که مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:
گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ <input> را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين خصوصيت را وارد مي کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام Browse نمايان مي کند.در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به ايميل فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً enctype="multipart/form-data" را نوشته و در تگ file field هم accept="text/plain" را وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.
checkbox
براي درست کردن انتخاب چند گزينه اي checkboxes بايد type=”checkbox” قرار دهيم . براي مواقعي که ما ميخواهيم بيننده يک يا چند گزينه را انتخاب کند از آن استفاده ميکنيم. براي هر گزينه در اين قسمت بايد يکبار اين کد را نوشت و اگر ميخواهيد به صورت پيش فرض يک گزينه تيک خورده باشد بايد کلمه checked را به تگ اضافه کنيد:
براي انتخاب تک گزينه اي از type=”radio” استفاده ميشود و به آنها radio button ميگويند ، در مواردي کاربرد دارد که کاربر حق انتخاب يک گزينه را دارد.
Item 01
Item 02
Item 03
Item 04
drop-down list
يکي ديگر از اجزاي فرم، ليستهاي انتخابي است که در مرورگر بشکل ليستهاي پايين آمدني (drop-down list) ظاهر ميشوند. با تگ <select> آغاز ميشود و براي هر گزينه داخل اين ليست بايد تگ <option> را بنويسيد و در انتهاي آنها تگ پايان دهنده اين ليست يعني </select> را مينويسيم. در ليست ساخته شده، بيننده و کاربر ميتواند يک گزينه را انتخاب کند ولي اگر خصوصيت multiple را به تگ <select> اضافه کنيد، کاربر ميتواند با پايين نگه داشتن دکمه هاي Ctrl يا Shift بر روي کيبورد، چند گزينه را از آن ليست بطور همزمان انتخاب کند.
تگ select داراي خصوصيت size هم ميباشد که اگر آنرا برابر با عدد يک قرار دهيم بصورت زير ظاهر ميشود که در اين حالت بهتر است خصوصيت multiple را حذف کنيد. بصورت پيش فرض اولين گزينه در ليست نمايان ميشود ولي اگر خصوصيت selected را به يکي ديگراز تگهاي option اضافه کنيد، در مرورگر آن گزينه نمايش داده ميشود.
fieldset
بمنظور مرتب کردن و نظم دادن به اجزاي داخل يک فرم ميتوان از تگ<fieldset>در ابتداي کد يکي از اجزاي مورد نظراستفاده کرد و در انتهاي همان کد تگ</fieldset>را نوشت که بااين تگ يک کادر مستطيل نازک دور آن درست خواهد شد و اجزاي يک فرم را از هم جدا خواهد کرد. شما حتي ميتوانيد براي آن قسمت يک اسم بگذاريد که در بالاي آن کادر در مرورگر نمايان ميشود که براي اين کار بعد از تگ<fieldset>بايد تگ<legend> NAME </legend>را بکار برد که هر اسمي را ميتوانيد بجاي کلمهNAMEبکار بريد.
بعضي اوقات، لازم ميشود تا اطلاعاتي از فرم به سرور فرستاده شود که در مرورگر نبايد ديده شود. براي اين منظور بايد تگ input را نوشته و خصوصيت type را برابر با hidden قرار دهيم ، خصوصيت name را هم مقداردهي مي کنيم با يک نام دلخواه و غيرتکراري ، همچنين خصوصيت value را نوشته و هر مقداري که به آن نسبت دهيم بصورت پنهاني به سرور فرستاده خواهد شد.
اگر يکي از اجزاي فرم را به هردليلي نياز نداشته باشيد اما حذف هم نمي خواهيد کنيد مثلاً در آينده مي خواهيد آنرا بکار گيريد، مي توانيد با افزودن خصوصيت disabled به تگ مورد نظر، آنرا موقتاً غيرفعال کنيد و با حذف آن خصوصيت از تگ دوباره آنرا فعال کنيد. با فراگيري زبان جاوااسکريپت استفاده از اين خصوصيت در کنترل اجزاي فرم، بيشتر کاربرد خواهد داشت.
هنگاميکه دکمه تاييد يک فرم زده مي شود اطلاعات وارد شده از صفحه عبور کرده و به سرور ( کامپيوتري که فايلهاي وب سايت شما بر روي آن قرار دارد ) فرستاده مي شوند تا پردازش شود. در اين قسمت بايد با دو خصوصيت action و method در تگ <form> آشنا شويد. اين دو خصوصيت مشخص مي کنند که اطلاعات چگونه و به کجا بايد فرستاده شوند.
در خصوصيت action آدرس فايلي که اطلاعات را تجزيه تحليل مي کند و بر روي سرور قرار دارد وارد مي شود که بطور معمول يا برنامه CGIو يا فايلهاي ASPاست. CGI مخفف Common Gateway Interface است که فايلهاي آن با استفاده از زبان Perl, C ويا VB نوشته مي شوند و ASP مخفف Active Server Page است که يک زبان قوي تحت وب است که متعلق به شرکت مايکروسافت مي باشد. شما حتي مي توانيد اطلاعات گرفته شده از يک فرم را به آدرس ايميل هم بفرستيد که در اين حالت بايد خصوصيت action را برابر با”mailto:“ قرار دهيد.
در خصوصيت method تعيين مي شود که اطلاعات گرفته شده از فرم چگونه و به چه صورت به برنامه و فايل پردازشگر اطلاعات برسد. به دو روش اطلاعات را مي توان به سرور فرستاد، يکي روش get و ديگري روش post مي باشد. اين دو روش تفاوتي با هم دارند که روش دوم يعني post استفاده بيشتري دارد. در روش اول بايد خصوصيتmethod=” “ را برابر با کلمه get قرار دهيم که پس از وارد کردن اطلاعات و زدن دکمه تاييد فرم ، مطالب وارد شده، به انتهاي آدرس درمرورگراضافه مي شود که از لحاظ امنيتي روش خوبي نيست اما در روش دوم اينگونه عمل نمي شود و در ضمن روش post با بيشتر مرورگرها سازگارتر است. خصوصيت ديگري هم هست که در تگ <form> بکار مي رود و براي بالا بردن امنيت يک فرم است که اطلاعات گرفته شده از فرم را رمزدار کرده و به سرور مي فرستد که اين خصوصيت enctype=”application/x-www.form.urlencodeed “ است .
اما همانطور که گفته شد براي فرستادن اطلاعات يک فرم از طريق ايميل به آدرسي مشخص، بايد خصوصيت action=” “ را برابر با mailto: قرار داد و همچنين method=” “ را برابر با post و در خصوصيت enctype=” “ اصطلاح multipart/form-data را مي نويسيم تا هر قسمت از اطلاعات وارد شده در فرم بصورت يک فايل متني جداگانه به ايميل پيوست شود و يا برابر با text/plain قرار ميدهيم. براي وارد کردن آدرس ايميل بايد آنرا در جلوي کلمه “mailto:” نوشت، بدين صورت:
دقت کنيد که بعد از زدن دکمه تاييد فرم پيغامي ظاهر شده که بيننده را از فرستادن يک ايميل مطلع مي کند و سپس برنامه پيش فرض ايميل کاربر باز مي شود .
امروزه يکي از بهترين و پرکاربرد ترينبرنامه براي جمع آوري و پردازش اطلاعات از يک فرم، زبان ASP مي باشد که در بخش مربوطه مي توانيد مطالب مورد نظر و چگونگي ارتباط با بينندگان سايت را از طريق فرم بياموزيد.
هنگاميکه بخواهيد دو يا سه صفحه را در يک صفحه جاي دهيد بايد از عنصر فريم يا چارچوب استفاده کنيد. اين عنصر زماني کارآيي دارد که ميخواهيد يک قسمت، در همه صفحات ثابت باشد.به طور مثال شما در سمت چب صفحه يک ليست ثابت داريد و ميخواهيد هر وقت بيننده روي هر گزينه از اين ليست که کليک کرد توضيحات مربوط به آن در سمت راست نمايان شود. پس ابتدا يک صفحه براي آن ليست درست کنيد و براي اطلاعات هر گزينه هم يک صفحه بسازيد و آنها را در يک فريم بگذاريد.
به مجموعه صفحات گنجانده شده در يک صفحه frameset مي گويند و به هر صفحه از آن يک frame يا يک چارچوب گفته ميشود.در ساختار اصلي کدها، ديگر تگ<body>نوشته نميشود و جاي آن تگ<frameset></frameset> قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ<body></body>بايد استفاده کنيد ولي هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار کد آن بجاي<body>از<frameset> استفاده کرد،
توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.
cols, rows
هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يايک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ<frameset> کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “ استفاده ميکنيم و اين خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيميعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70 را اشغال خواهد کرد و تگ آن بدين صورت ميشود:
<frameset cols=”30%,70%”>
دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي داشته باشيد از خصوصيت rows=” “ استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم درframeset بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن براي هر کدام از فريمها به اين صورت است:
همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد. خصوصيت ديگري هم هست که به غير ازخصوصيت src بايد به اين تگ اضافه شود و آن name=” “است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر لينک خصوصيت target=” “ را اضافهکرد و آنرا برابر با نام منتخب هر فريم قرار داد.
شما اگر يک frameset درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا border=”0” رابه تگ<frameset> اضافه کنيد.
noresize
هنگاميکه frameset در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با drag کردن کم يا اضافه کندکه براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ<frame> بيافزاييد.
scrolling
خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند، هر فريم داراي scroll ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت scrolling=” “ کنترل ميشود و آنرا برابر با کلمات Yes,no,auto قرار دهيد.
noframes
بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي کنند و فريم ها را نشان نمي دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده مي کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه کد را هميشه به frameset اضافه کنيد:
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
نحوه ساخت iframe
در اين قسمت به يک مدل ديگري از فريم مي پردازيم که به آن Inline Frame يا iframe مي گويند. در اين مدل يک فريم با ابعاد مشخص داخل يک صفحه معمولي HTML قرار ميگيرد و مانند يک کادر در هر کجاي آن صفحه مي تواند باشد حتي در وسط . تگ کلي آن ،
<iframe src=”page.html”></iframe>
است که شما اين تگ را در هر قسمت از کد html مي توانيد بگذاريد و نيازي به تگ <frameset> نيست. کليه خصوصياتي را که براي فريم بکار مي رود براي iframe هم کاربرد دارد و فقط width=” “ و height=” “ هم به آن ميتوانيد اضافه کنيد تا ابعاد iframe را کنترل کنيد. فراموش نکنيد که از name=” “ استفاده کنيد تا نام آنرا براي ساختن لينک بکار بريد.
شما در يک صفحه مي توانيد چندين iframe داشته باشيد البته ناگفته نماند که اين عنصر در مرورگرهاي قديمي به غير از اينترنت اکسپلورر نمايش داده نمي شود.
با پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.
اهميت حجم فايل صوتي
فايلهاي صوتي يکي از سنگين ترين عناصر در وب از لحاظ حجم مي باشند که بايد در انتخاب آنها بيشتر دقت کنيد، چون هر چه فايل سنگين تر باشد دانلود شدن آن و همچنين صفحه وب کند تر و خسته کننده تر خواهد شد.
MIME
هنگاميکه يک فايل صوتي به صفحه اضافه شود، مرورگر به تنهايي قادر به پخش آن نمي باشد و بايد به کمک يک برنامه کاربردي ديگر اينکار را انجام دهد. مرورگرها توسط اطلاعاتي که از فايل دريافت مي کنند مي توانند تشخيص دهند که چه برنامه اي را بايد براي پخش آن فايل صدا بزنند که اين اطلاعات را MIME مي گويند.
MIME مخفف Multipurpose Internet Mail Extensions است.
زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي دهد.
فرمتهاي فايلهاي صوتي
WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .
AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .
AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .
MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.
افزودن فايل صوتي به زمينه صفحه
با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5 به پايين آنرا پشتيباني مي کنند. اين تگ داراي دو خصوصيت ، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي باشد.
<bgsound src=”mymusic.mid” loop=”2”>
افزودن فايل صوتي بصورت لينک
يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ <a> است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.
<a href=”musics/mysong.wav”> music file </a>
افزودن فايل صوتي از طريق object
يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت typeاستفاده مي شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.
<object data=”musics/sound.wav” MIME=”audio/wav”>
Your browser doesn’t support this audio format.
</object>
نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.
Embed file
تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.
احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي پردازيم.
اگرچه حجم فايلهاي صوتي زياد است، اما در مقايسه با حجم فايلهاي تصويري چندان قابل عرض نيستند چون فايلهاي تصويري بطور معمول مخلوطي از صدا و تصوير مي باشند، داراي حجم بسيار بالايي نيز هستند که بکار بردن آنها در وب سايت ها زياد معقولانه نيست مگر اينکه يک فيلم بسيار کوتاه چند ثانيه اي را بخواهيد در صفحه جاي دهيد که قرار دادن اين فايلها دقيقاً مانند فايلهاي صوتي است که در صفحه قبل توضيح آن آمده است.
اما در اين صفحه مي پردازيم به فرمتهاي فايلهاي تصويري و معرفي تکنولوژي که توسط آن بتوانيد فايلهاي صوتي و تصويري با حجم بالا را در وب سايت قرار دهيد.
فرمتهاي فايلهاي تصويري
MPEG اين فرمت مخفف کلمات Motion Picture Experts Group است که در بيشتر سيستمها قابل اجرا مي باشد. نوع MIME اين فرمت video/mpeg است.
AVI اين فرمت متعلق به سيستم عامل ويندوز مي باشد و نوع MIME آن برابر است با video/avi .
QuickTime (MOV) اين فرمت مخصوص سيستم هاي Macintosh مي باشد که اگر مرورگري در سيستمهاي ديگر Plug-in اين فرمت را داشته باشد آنرا پخش خواهد کرد و نوع MIMEآن video/quicktime مي باشد.
Advanced Streaming Format (ASF) اين فرمت متعلق به شرکت مايکروسافت است که MIME آن video/asf مي باشد.
Streaming Audio and Video
اين يک تکنولوژي است که فايلها در هنگام دانلود شدن هم قابل پخش هستند، يعني هنگاميکه فايلهاي صوتي يا تصويري در حال دانلود شدن در سيستم هستند، در همان لحظه هم مي توانيد آنها را مشاهده کنيد يا به آنها گوش دهيد قبل از اينکه بطور کامل در سيستم ذخيره شوند.
همانطور که مي دانيد يک فايل صوتي يا تصويري سنگين ممکن است چندين ساعت طول بکشد تا دانلود شود، اما براي غلبه بر اين مشکل تکنولوژي streaming audio and video بوجود آمد و در پي آن برنامه هايي نظير RealAudio, QuickTime, Microsoft’s streaming format عرضه شد. اين فرمتها قادر به پخش فايل در هنگام دانلود شدن هستند، بدين ترتيب که مقداري از اينگونه فايلها ابتدا در محلي از حافظه بنام بافر Buffer ذخيره شده و از آنجا پخش مي شود. هنگاميکه آن مقدار در حال اجرا است، مقدار ديگري از فايل در بافر ذخيره و پخش مي شود که به همين ترتيب ادامه پيدا مي کند تا کل فايل بطور کامل دانلود شود. البته اين نوع فرمتها، برنامه کاربردي مخصوص خود را مي خواهند و معروفترين برنامه ها RealOne.Playerاست که اين محصول فرمت RealAudio يعني ra براي فايل صوتي و RealVideoبراي پخش فايلهاي تصويري را پشتيباني مي کند. فرمتهاي ديگر هم مانند ASF متعلق به شرکت مايکروسافت و QuickTime براي سيستمهاي Macintosh از اين تکنولوژي استفاده مي کنند.
شما مي توانيد از برنامه هاي ويرايشگر صوتي مانند Sound Forge و تصويري مانند Adobe Premiere براي تبديل به اين تکنولوژي استفاده کنيد.
اگر مايل هستيد از فرمتهاي Real Audio, Real Video در سايت خود استفاده کنيد بايد به چند نکته توجه کنيد، ابتدا مطمئن شويد که سرور ميزبان سايت شما از اين تکنيک پشتيباني مي کند و در آن يکسري تنظيمات بايد انجام شود، مثلاً براي فرمت Real Audio دو نوع MIME بايد در سرور تعريف شود:
audio/x-pn-realaudio (files with a .ra or .ram file extension)
audio/x-pn-realaudio-plugin (files with a .rpm file extension)
سپس بايد يک برنامه براي تبديل فرمتهاي مختلف به اين فرمت و يک برنامه براي پخش اين نوع فرمت در سيستم خود داشته باشيد که مي توانيد آنها را از وب سايت www.real.com فراهم کنيد و در آخر هم يک فايل بنام متا فايل Meta File بايد درست کنيد براي ذخيره واستفاده از بافر، بدين ترتيب که، ابتدا يک برنامه ويرايشگر متن مانند Notepad را باز کرده وداخل آن آدرس فايل بر روي سايت خود را مي نويسيد، بطور مثال اگر نام فايل realtest.ra است و در دايرکتوري realaudiofile قرار دارد بايد خط زير را وارد کنيد بدون هيچ چيز اضافه،
سپس اين فايل متني را با نام دلخواه و با پسوند .ram ذخيره کرده و همراه با فايل صوتي مورد نظر به سرور خود منتقل کنيد. فقط دقت کنيد که براي فراخواني آن فايل بايد يک لينک بسازيد که متا فايل مربوطه را صدا کند نه خود فايل صوتي يا تصويري.
نکته: بيننده سايت بايد برنامه مخصوص پخش اين گونه فرمت را در سيستم خود داشته باشد. اگر MIME به درستي تعريف نشده باشد، فقط متن داخل متا فايل نمايش داده خواهد شد و دقت کنيد تا هنگام منتقل کردن فايلهاي صوتي و تصويري توسط برنامه FTP اگر تنظيمات را به صورت دستي انجام ميدهيد حتماً از گزينه Binary استفاده کنيد.
در اين بخش ميخواهم در مورد تگهاي قسمت<head>برايتان توضيح دهم . همانطور که ميدانيد تگهاي Html را به دو بخش اصلي تقسيم کرديم ، يکي قسمت سر يا همان headديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي<html></html> نوشته ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده<html>و آن DTDيک صفحه وب ميباشد که مخفف Document Type Definition است و کار آن معرفي نوع تگهاخصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD ، <!doctype> ميباشد و مانند بقيه تگها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.
هر نسخه ازHTMLيک DTD مخصوص به خود را دارد و نسخه هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد ، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگهاو نسخه هاي HTML , XHTML به عهده W3C ميباشد .
DTD براي HTML 4.0
<!DOCTYPE html public “-//w3c//DTD HTML 4.0//en”>
و براي XHTML 1.0
<!DOCTYPE xhtml public “-//w3c//DTD XHTML 1.0 strict//en”>
بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به قسمت سر ياهمان head .
<head></head>
مابين اين دو تگ اطلاعات مربوط به همان صفحه وارد ميشود که در مرورگر نشان داده نميشود و فقط اسم صفحه است که در نوار عنوان مرورگر نمايش داده ميشود.اين اطلاعات بيشتر براي سايتهاي جستجوگر مانند گوگل مفيد ميباشند که در بخش اين سايتها بيشتر توضيح خواهم داد.
بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگرtitle bar نمايان خواهد شد. دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال نمايان ميشود.
<base>
در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد ، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايتديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=” “ لينکها، اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.
<base href="http://www.sitename.com">
دقت کنيد که نوشتن پروتکل http اجباري است.
<meta>
متا تگها اطلاعات مربوط به موتورهاي جستجوگر را کنترل ميکنند. در اين تگها هر نوع اطلاعات که براي جستجو نياز باشد را وارد ميکنيد ، مانند کلمات کليدي يا نام سازنده سايت و يا تاريخ راه اندازي و از اين قبيل که در بخش سايتهاي جستجوگر بيشتر توضيح خواهم داد. خصوصياتي را که در اين تگ ميتوانيد بکار بريد،
http-equiv=” “, name=” “ , content=” “
براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv=”keyword”قرار دهيم و کلمات مورد نظر را در خصوصيت content=” “ وارد کنيم،
همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت معين کنيد که براي بکار بردن حروف فارسي بايدازutf-8 استفاده کنيد که در قسمت فارسي نويسي توضيح خواهم داد.
اين تگ به مرورگر ميفهماند که بايد از حروف و علامتهاي يونيکد براي نمايش صفحه استفاده کند.براي وارد کردن اطلاعات ديگر هم مانند زير عمل ميکنيد:
<meta name=”author” content=”your-name”>
اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا بصورت offline هم ببينند، از اين تگ بايد استفاده کنيد:
<meta name=”pragma” content=”no-cache”>
يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:
<meta http-equiv=”refresh” content=”5”>
که آن عدد زمان بر حسب ثانيه است. اگر ميخواهيد که بعد زمان معين همان صفحه به يک صفحه ديگر يا يک وب سايت ديگر هدايت شود خصوصيت زير را اضافه کنيد
همانطور که ميدانيد هر عنصر HTML که بخواهيد در صفحه وب نمايش داده شود بايد ما بين تگ body يعني <body></body> قرار گيرد. در کليه فايلهاي HTML اين تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد <frameset> را بکار بريد.
اما خود تگ body جدا از اهميتي که در فايلهاي HTML دارد، خود داراي خصوصياتي مي باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.
bgcolor
اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي توانيد از کد هگز رنگها ،
<body bgcolor=”#ccff00”>
و يا نام رنگ را بکار بريد، مانند:
<body bgcolor=”black”>
نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين حالت متن در صفحه محو خواهد شد.
background
توسط اين خصوصيت بجاي رنگ مي توانيد از عکس هم در زمينه صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،
<body background=”images/filename.gif”>
توجه داشته باشيد که حجم عکس در سنگيني صفحه و پايين آمدن سرعت تکميل شدن آن موثر است. هنگاميکه از اين خصوصيت استفاده مي کنيد آن عکس نسبت به اندازه اي که دارد در صفحه تکرار مي شود تا فضاي آنرا بپوشاند که با استفاده از StyleSheet تکرار آنرا مي توانيد کنترل کنيد.
bgproperties
هنگاميکه عکسي به زمينه اضافه مي شود همراه با ديگر عناصر صفحه مانند عنصر متن scroll مي شود يعني به بالا و پايين يا چپ و راست حرکت مي کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با fixed عکس در زمينه ثابت مي ماند و عناصر بر روي آن حرکت مي کنند.
لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر و اپرا قابل اجراست.
topmargin
توسط اين خصوصيت حاشيه بالاي صفحه کنترل مي شود که مقدار آن عدد در مقياس پيکسل مي باشد.
leftmargin
حاشيه سمت چپ صفحه را کنترل مي کند که اگر نيازي به حاشيه نداريد آنرا برابر با عدد صفر قرار دهيد.
<body topmargin=”0” leftmargin=”0”>
text
اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت رنگ را مرتب در تگها تکرار نکنيد ، مي توانيد اين خصوصيت را به تگ body اضافه کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.
<body text=”#99ccff”>
dir
اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند فارسي که در اينصورت بايد برابر با مقدار rtl و چپ به راست مانند حروف انگليسي که برابر با ltr مي باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ body بکار بريد و آنرا برابر rtl قرار دهيد محل scroll صفحه مرورگر از سمت راست به چپ منتقل مي شود.
lang
اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي fa و براي انگليسي en را مي نويسيد.
<body lang=”fa” dir=”rtl”>
link
در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي کنيد.
ICT مرکز آموزشی 
سریع- _