تگ <font>

در نسخه های 3.2 و قبلی تر زبان اچتمل از تگ <font> برای تعیین نام قلم، رنگ و اندازه متون استفاده میشود. در این تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهای زیر کاربرد تگ <font> خدابیامرز را نشان میدهند:

کد اچتمل	نمايش کد روبرو توسط مرورگر
<p> <font size="2" face="Verdana"> This is a paragraph. </font> </p>	This is a paragraph.
<p dir="rtl"> <font size="1" face="Times" color="#FF9900"> متنی با قلم Times و اندازه 1 و رنگ FF9900 </font> </p>	متنی با قلم Times و اندازه 1 و رنگ FF9900
<p dir="rtl"> <font size="2" face="Tahoma" color="red"> این متنی با قلم Tahoma و اندازه 2 و رنگ قرمز </font> </p>	متنی با قلم Tahoma و اندازه 2 و رنگ قرمز

شناسه های تگ <font>

Attribute	Example	کاربرد
size="number"	size="2"	تعیین اندازه قلم
size="+number"	size="+1"	افزایش اندازه قلم
size="-number"	size="-1"	کاهش اندازه قلم
face="face-name"	face="Times"	تعیین نام قلم
color="color-value"	color="#eeff00"	تعیین رنگ قلم
color="color-name"	color="red"	تعیین رنگ قلم

*** بیان مختصر عملکرد تگ <font> در این دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحی صفحات اچتمل توصیه نمیشود.

دیگر از تگ <font> استفاده نکنید!

تگ <font> از رده خارج محسوب میشود و کنسرسیوم جهانی تعیین استانداردهای وب (World Wide Web Consortium, W3C) این تگ را از مجموعه تگهای استاندارد اچتمل کنار گذاشته است و اکیدا توصیه میشود که از Style Sheet ها برای تعریف هر گونه خواص نمایشی و آرایشی (layout & Presentation) المانها در اچتمل استفاده شود.

روش صحیح تعیین نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:

هر چند که مبحث و کلاسهای درس Style Sheet ها در "مدرسه وب" در دست تهیه بوده و امیدواریم که بزودی ارائه شوند ولی تا قبل از آن استفاده از شناسه ای به نام style در بسیاری از المانها کار گشا خواهد بود. مثالهای ساده زیر نحوه تعیین نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمایش خواهند گذاشت:

کد اچتمل	نمايش کد روبرو توسط مرورگر
<p>Some text <span style="color:#0000AF;">another text</span> again text...</p>	Some text another text again text...

id, class, title, style, dir, lang	شناسه های استاندارد المان span

مثالهائی از نحوه استفاده از المان span و Style sheet ها:
روش قدیمی	روش صحیح
<font color="#FF00FF">Hello!</font>	<span style="color:#FF00FF">Hello!</span>
<font color="rgb(255,0,255)">Hello!</font>	<span style="color:rgb(255,0,255)">Hello!</span>
<font style="color:Fuchsia">Hello!</font>	<span style="color:Fuchsia">Hello!</span>
<font color="#FF00FF" size="3">Hello!</font>	<span style="color:#FF00FF;font-size:100%">Hello!</span>

کد اچتمل	نمايش کد روبرو توسط مرورگر
<p>Some text <div style="color:#0000AF;">another text</div> again text...</p>	Some text another text again text...

id, class, title, style, dir, lang	شناسه های استاندارد المان div

تعیین جهت نمایش متون
مثالی در مورد استفاده از تگ div و اعمال "جهت نمایش متون" به بخشی از صفحه اچتمل

Start Tag	Purpose	کاربرد
<div>	Defines a division/section in a document	تعریف بخش و ناحیه ای از صفحه اچتمل
<span>	Defines a section in a document	تعریف بخش و ناحیه ای از صفحه اچتمل

یکشنبه هجدهم شهریور 1386 - 18:45

نویسنده : مهرداد ترکمندی  لينك ثابت  

درج تصوير
نحوه درج تصاوير با کمک تگ img

درج تصويری واقع در فضای آدرسی ديگر
درج تصويری واقع در دايرکتوريی غير از آدر س صفحه اچتمل و يا تصويری واقع در فضای آدرسی ديگر سايتها

مثالهای بيشتر

تگ img و شناسه src يا source

در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست.

مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.

مقدار url آدرس اينترنتی تصوير ميباشد و مثلا اگر تصويری که قرار است که در صفحه درج شود در همان دايرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصوير يعنی me.jpg را بنويسيد و اگر تصوير در سايتی ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در اين url نام تصوير logo.gif بوده، در دايرکتوری images قرار داشته و روی وب سايت google.com قرار دارد.

شناسه های width و height در تگ img

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

<img src="http://www.google.com/images/logo.gif" width="276" height="110" >

<img src="images/AkseAlaki_88_31.jpg" alt="Fake Pic">

تگ های تصاوير

Start Tag	Purpose	کاربرد
<img>	Defines an image	درج تصوير
<map>	Defines an image map	تعريف Image map يا ؟؟؟
<area>	Defines an area inside an image map	تعريف ناحيه ای در داخل Image map

یکشنبه هجدهم شهریور 1386 - 18:43

نویسنده : مهرداد ترکمندی  لينك ثابت  

مجموعه فريمهای عمودی
مثالی در مورد ايجاد مجموعه فريمهای عمودی توسط تگ های frameset و frame

مجموعه فريمهای افقی
مثالی در مورد ايجاد مجموعه فريمهای افقی توسط تگ های frameset و frame

مثالهای بيشتر

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

معايب استفاده از فريمها:

• موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند.
• چاپ و print صفحاتی که از فريمها استفاده ميکنند مشکل است.
• صفحاتی که از فريمها استفاده ميکنند معمولا مبتدی بودن طراح سايت را نشان ميدهد!!

• تگ <frameset> به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد.
• هر تگ <frameset> مجموعه ای از رديفها يا ستونها را تعريف ميکند.
• داخل هر فريم ميتواند frameset ديگری قرار دهيد.
• با کمک شناسه های rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
• تگ <frameset> درون تگهای <html> و <html/> قرار ميگيرد.(نيازی به قيد تگ body هنگام معرفی يک frameset نيست.)

• کاربرد اصلی تگ <frame> تعيين source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود.

مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.

<html>
<frameset cols="75%,25%">
   <frame src="frame_left.html">
   <frame src="frame_right.html">
</frameset>
</html>

برای نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.

شناسه های cols و rows در تگ frameset

شناسه	مقدار شناسه	کارکرد
cols	عرض پنجره بر اساس پيکسل، درصد يا علامت *	تعيين تعداد و اندازه ستونها در فريم ست
rows	عرض پنجره بر اساس پيکسل، درصد يا علامت *	تعيين تعداد و اندازه رديفها در فريم ست

مثالهای زير را در نظر بگيريد:

<html>
<frameset cols="25%,50%,25%">
   <frame src="frame_3.html">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

<html>
<frameset cols="*,200">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدی به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهای بالا برقرارند.

* اگر فريمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و برای جلوگيری از تغيير اندازه فريمها توسط کاربر بايد از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود. در اين مثال noresize نميتوانيد که فريمها را تغيير اندازه بدهيد.

* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll نيستند.

* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد. (مثال frameborder )

* درصد بسيار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتيبانی نميکنند. برای اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.

مجموعه فريمهای مرکب
مثالی در مورد ايجاد مجموعه ای مرکب از فريمهای عمودی و افقی

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

فريمهای شناور و يا درجا (Inline frame)
مثالی در مورد فريمهای شناور و درجا (iframe)، فريمی درون يک صفحه اچتمل

مثالی کاربردی در مورد فريمهای درجا (Inline frame)
مثالی کاربردی در مورد فريمهای شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف

شوخی با فريم های شناور
مثالی در مورد نمايش درايو لوکال (مثلا c:\ بازديدکنندگان سايت به آنها

فريمها و پيوندهای نامگذاری شده
مثالی کامل در مورد فريمها و پيوندهای نامگذاری شده و نحوه استفاده از آنها در طراحی سايتی ساده متشکل از چهار فايل اچتمل

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

تگ های فريم

Start Tag	Purpose	کاربرد
<frameset>	Defines a set of frames	تعريف مجموعه ای از فريم ها
<frame>	Defines a sub window (a frame)	تعريف يک فريم
<noframes>	Defines a noframe section for browsers that do not handle frames	تعريف جايگزين برای مرورگرهائي که از فريم ها پشتيبانی نميکنند.
<iframe>	Defines an inline sub window (frame)	تعريف فريم های درجا (inline)

یکشنبه هجدهم شهریور 1386 - 18:40

نویسنده : مهرداد ترکمندی  لينك ثابت  

جداول، آرايه ها
مثال ساده ای برای ايجاد جداول

مرز جداول
نقش شناسه border در تعيين مرز جداول

مثالهای بيشتر

برای تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام های td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.

مثال زير جدولی است با دو سطر و سه ستون :

کد اچتمل جدولی با دو سطر و سه ستون	نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl"> <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> <td>رديف 1، سلول 3</td> </tr> <tr> <td>رديف 2، سلول 1</td> <td>رديف 2، سلول 2</td> <td>رديف 2، سلول 3</td> </tr> </table>	رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

کد اچتمل جدولی با سه سطر و سه ستون	نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl"> <tr> <th>سرستون ا</th> <th>سرستون 2</th> <th>سرستون 3</th> </tr> <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> <td>رديف 1، سلول 3</td> </tr> <tr> <td>رديف 2، سلول 1</td> <td>رديف 2، سلول 2</td> <td>رديف 2، سلول 3</td> </tr> </table>	سرستون ا سرستون 2 سرستون 3 رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3 رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3

کد اچتمل جدولی با دو سطر و دو ستون	نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl"> <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> </tr> <tr> <td>رديف 2، سلول 1</td> <td></td> </tr> </table>	رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1

کد اچتمل جدولی با دو سطر و دو ستون	نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl"> <tr> <td>رديف 1، سلول 1</td> <td>رديف 1، سلول 2</td> </tr> <tr> <td>رديف 2، سلول 1</td> <td>&nbsp;</td> </tr> </table>	رديف 1، سلول 1 رديف 1، سلول 2 رديف 2، سلول 1

تگهای جداول

Start Tag	Purpose	کاربرد
<table>	Defines a table	تعريف جدول
<th>	Defines a table header	تعريف سرستون در جداول
<tr>	Defines a table row	تعريف رديف ها در جداول
<td>	Defines a table cell	تعريف سلول يا خانه های يک جدول
<caption>	Defines a table caption	تعريف عنوان جدول

یکشنبه هجدهم شهریور 1386 - 18:39

نویسنده : مهرداد ترکمندی  لينك ثابت  

در استاندارد اچتمل گروهی از نويسه ها (Character) دارای معنی خاصی بوده ( مثلا نويسه < شروع يک تگ و نويسه > انتهای يک تگ را نشان ميدهد. ) و برای نمايش آنها در صفحاتتان مستقيما قابل مصرف نميباشند. در اين فصل با فهرست اين نويسه ها آشنا شده و نحوه درج آنها را با کمک Character Entities فرا خواهيد گرفت.

Character Entities
در اچتمل بعضی از نويسه ها دارای معنی خاصی بوده و برای نمايش آنها در صفحاتتان بايد از character entities ها استفاده کنيد. يک character entities از سه قسمت تشکيل ميشود:

1- نويسه ampersand (&)
2- نام entity يا نويسه # و سپس شماره عددی entity
3 - و نهايتا نويسه semicolon (;)
برای مثال برای نمايش نويسه > دو روش وجود دارد، بايد از &lt; يا از &#60; استفاده کنيد. در اين مثال lt نام entity و 60 شماره عددی آن ميباشد.

مزيت استفاده از نام entity در مقابل استفاده از شماره عددی آن سهولت يادآوری آن از روی نامش ميباشد و عيب آن اين است که تمامی مرورگرها نام گذاريهای موجود برای Entity ها را قبول ندارند ولی در عوض همگی شماره های عددی entity ها را بخوبی ميشناسند. توجه داشته باشيد که entity ها به کوچک و بزرگي حروف حساس هستند و در واقع Case Sensitive ميباشند.

پر کاربردترين character entity در اچتمل، نويسه فاصله يا Space يا Blank ميباشد و نام رسمی آن non-breaking space ميباشد. همانطور که ميدانيد مرورگرها فاصله های اضافی را در نظر نگرفته (truncate spaces) و مثلا از 10 نويسه فاصله، 9 تای آنرا ناديده ميگيرند و برای نمايش فاصله های اضافی بايد از &nbsp; استفاده کنيد.

Result (نمايش)	Description (شرح)	Entity Name (نام)	Entity Number (شماره عددی)
	non-breaking space	 	 
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	quotation mark	&quot;	&#34;
'	apostrophe		&#39;

چند Character Entitie با کاربردهای کمتر

Result	Description	Entity Name	Entity Number
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
§	section	§	§
©	copyright	©	©
®	registered trademark	®	®
×	multiplication	×	×
÷	division	÷	÷

و ...

یکشنبه هجدهم شهریور 1386 - 18:37

نویسنده : مهرداد ترکمندی  لينك ثابت  

مثالهای شکل دهی متون (Text Formatting)
در مثالهای زير نحوه استفاده از عناصر و تگهای شکل دهی متون شرح داده شده اند:

شکل دهی متون
شکلهای مختلف نمايش متون با کمک عناصر b , strong , big , em , i , small , sub , sup

متون از قبل شکل دهی شده
نمايش متون از قبل شکل دهی شده با کمک عنصر pre يا pre Formatted
برای نمايش اشعار فارسی استفاده از عنصر pre بهترين انتخاب ميباشد.

عناصر ديگر شکل دهی متن
نمايش متون deleted، underline و ... با کمک عناصر code , kbd , tt , samp , var , del , ins

نحوه ديدن سورس کدهای اچتمل (HTML Source)

• اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.
• اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.
• اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!

چند نکته کاربردی:

1. در استفاده از Underline دقت كنيد چون در اكثر مرورگرها، پيوندها با اين خطوط نشان داده مي شوند و اين مساله ميتواند كاربران را دچار اشتباه كند .
2. به كارگيري تگهاي EM و STRONG كه جايگزين تگهاي I و B هستند ، اين اطمينان را مي دهد كه صفحه شما توسط همه مرورگرها بصورت صحيح نمايش داده خواهد شد .
3. به ترتيب بسته شدن تگهاي پاياني در مثال زير دقت كنيد، همان گونه كه مشاهده مي كنيد عنصر STRONG بعد از عنصر U شروع شده است ، به همين خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار مي گيرد.
   
   <U>version <STRONG>2.0</STRONG></U>

تگهای فرمت دهی متون

Start Tag	Purpose	کاربرد
<b>	Defines bold text	نمايش توپر
<big>	Defines big text	نمايش در اندازه بزرگ
<em>	Defines emphasized text	نمايش بصورت تاکيد شده
<i>	Defines italic text	نمايش ايتاليک يا کج
<small>	Defines small text	نمايش در اندازه کوچک
<strong>	Defines strong text	نمايش قوی ؟!
<sub>	Defines subscripted text	نمايش پايين تر از خط افقی
<sup>	Defines superscripted text	نمايش بالاتر از خط افقی
<ins>	Defines inserted text	نمايش به صورت خط زير
<del>	Defines deleted text	نمايش به صورت خط خورده
<s>	Deprecated. Use <del> instead	از رده خارج
<strike>	Deprecated. Use <del> instead	از رده خارج
<u>	Deprecated. Use styles instead	از رده خارج

Start Tag	Purpose	کاربرد
<code>	Defines computer code text	نمايش کدهای برنامه نويسی
<kbd>	Defines keyboard text	نمايش متن بصورت صفحه کليدی
<samp>	Defines sample computer code	نمايش کدهای نمونه برنامه نويسی
<tt>	Defines teletype text	نمايش تله تايپ
<var>	Defines a variable	نمايش متغييرها
<pre>	Defines preformatted text	نمايش متون از قبل فرمت شده

یکشنبه هجدهم شهریور 1386 - 18:36

نویسنده : مهرداد ترکمندی  لينك ثابت  

سؤالات مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد:
- چگونه فارسی بنويسم ؟
- چگونه فارسی بخوانم؟
- چگونه صفحات اچتمل فارسی را نمايش دهم؟

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

<p dir="rtl"> سلام بر دنيای وب </p>
<div dir="rtl"> سلام بر دنيای وب </div>

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

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

مثالهای زير نحوه ترازبندی متون فارسی را به نمايش ميگذارند و برای مطالعه بيشتر در مورد ترازبندی متون "راست به چپ" به اين صفحه مراجعه کنيد. (عناصر BDO ، Span و شناسه lang هم برای مطالعه مفيد ميباشند.)

یکشنبه هجدهم شهریور 1386 - 18:35

نویسنده : مهرداد ترکمندی  لينك ثابت  

مثالی ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.

پاراگرافهای ساده:
چگونگی نمايش متون با کمک تگ <p> و بصورت پاراگرافی

نمايش متون فارسی:
چگونگی نمايش متون فارسی. برای جزئيات بيشتر به فصل فارسی نويسی مراجعه کنيد.

مثالهای بيشتر:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

<p>This is a paragraph</p> 
<p>This is another paragraph</p>

<p>This <br> is a para<br>graph with line breaks</p>

<!-- This is a comment -->

:

Start Tag	Purpose	کاربرد
<html>	Defines a html document	نشان شروع متن اچتمل
<body>	Defines the document's body	تعيين بدنه و قسمت اصلی صفحه اچتمل
<h1>-<h6>	Defines heading 1 to heading 6	تعريف سر تيترهای h1 تا h6
<p>	Defines a paragraph	تعريف پاراگراف
<br>	Inserts a single line break	رفتن سر خط جديد
<hr>	Defines a horizontal rule	نمايش خط افقی
<!-->	Defines a comment in the HTML source code	نوشتن شرح و comment

یکشنبه هجدهم شهریور 1386 - 18:34

نویسنده : مهرداد ترکمندی  لينك ثابت  

تگ های اچتمل (HTML Tags)

• با کمک تگ های اچتمل عناصر و يا Elements ساخته ميشوند.
• در زبان اچتمل حدود 80 عنصر تعريف شده است.
• تگ های اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
• تگ های اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>test</b>
• تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پايانی نام دارد.
• متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا element content ناميده ميشود، مثلا "test"
• تگ های اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ <b> و <B> معادل هم هستند ولی شديدا توصيه ميشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

<b>This text is bold</b>

<body>
This is my first homepage. <b>This text is bold</b>
</body>

یکشنبه هجدهم شهریور 1386 - 18:33

نویسنده : مهرداد ترکمندی  لينك ثابت  

در اين درس با مفاهيم وب، اينترنت، مرورگرها و استانداردهای وب آشنا خواهيد شد.

منظور از وب چيست؟

• وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
• اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.
• تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.
• کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .

نحوه کارکرد وب چگونه است؟

• اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند.
• اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.
• برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود.
• دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.
• مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.

مرورگرها چگونه به خواندن صفحات وب ميپردازند؟

• يک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور ميکند.
• اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد.
• آدرس يک صفحه وب چيزی شبيه http://www.internet.com/faq.html است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند، www.internet.com نام دومين يا Domain است و faq.html نام صفحه ای است که بايد خوانده شود.

مرورگرها چگونه صفحات وب را نمايش ميدهند؟

• چگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.
• مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.
• وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان چگونگی نمايش اطلاعات ميباشد.
• يک تگ اچتمل چيزی شبيه <p> اين تگ پاراگراف است! </p> است.

چه کسانی استاندارد های وب را تعيين ميکند؟

• تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ ندارد.
• World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.
• HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.
• آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .

یکشنبه هجدهم شهریور 1386 - 18:32

نویسنده : مهرداد ترکمندی  لينك ثابت