آموزش HTML

parniann · 2012 , December 27

زبان HTML اولين زبان طراحي وب بوده و يك ربان كاملا استاتيك است . براي توليد و طراحي صفحات بر پايه تكنولوژي وب اولين قدم آشنايي با HTML است . HTML مخفف عبارت Hyper Text Markup Language و به معني زبان نشان گذاري ابر متن است. اين زبان، توسط مرورگر تفسير شده و نمايش مي يابد . يك سند HTML از اجزايي بنام تگ يا نشانه تشكيل شده است . هر كدام از اين تگ ها براي مرورگر معنا و مفهوم خاصي دارند . يادگيري HTML به معناي تسلط بر این تگ ها و چگونگي كار با آنها و به خصوص تسلط بر Attribute هاي آنها مي باشد . در اين بخش سعي بر آنست كه تا حد امكان تگ هاي HTML و خصوصيات پركاربرد آنها بررسي شود .
برای نوشتن کد html نیاز به محیط خاصی نیست . چرا که این زبان یک زبان سمت کلاینت بوده و وظیفه اجرای آن بر عهده مرورگر وب می باشد . لذا شما می توانید از هر ویرایشگری که دوست دارید برای نوشتن این کد استفاده کنید . فقط کافیست در نهایت فایل را با پسوند htm یا html ذخیره کنید .می توانید از IDE های پیشرفته ای همچون Visual Studio ، Dreamweaver ، Zend Studio و ... برای نوشتن کد استفاده کنید ولی پیشنهاد من به مبتدیان استفاده از یک ویرایشگر بسیار ساده است چرا که شما را مجبور می کند تگ ها و خصوصیات را به ذهن بسپارید . بنابراین من به شما نرم افزار ++Notepad را پیشنهاد می کنم که کمی هم پیشرفته تر از Notepad می باشد .

parniann · 2012 , December 27

آموزش HTML - شروع کار با HTML

برای شروع ابتدا باید با مفهوم سند html آشنا شوید . یک سند html همان فایل html می باشد . یعنی فایلی که حاوی تگ های html است . هر سند html از یک دید کلی فقط از یک تگ تشکیل شده است و آن تگ ، تگ html است . تگ یا نشانه ، هر چیزیست که بین دو علامت <> قرار گرفته باشد . پس اگر بخواهیم به یک فایل یا سند html نگاهی بیندازیم در یک دید سطح بالا و کلی فقط تگ html را میبینیم و هر چیز دیگری در این تگ خواهد آمد .

<html>
</html>
تگ html خود شامل دو قسمت و یا به عبارتی دو تگ دیگر است . یکی تگ head و دیگری تگ body . در واقع می توان گفت یک سند html از یک سر و یک پیکر تشکیل شده است .
<html>
<head>
</head>
<body>
</body>
</html>
در واقع میتوان گفت که سلسله مراتب تگ ها در زبان html از یک ساختار درختی بهره می برند . ساختاری که در آن تگ html در ریشه فرار دارد و دارای دو فرزند است . یکی head و دیگری body که این دو همزاد هم هستند و در کنار یکدیگر می آیند .
تگ head مربوط به یکسری heading ها است . مانند اضافه کردن فایل های css , جاوا اسکریپت (JavaScript) . مواردی که در تگ head آورده میشوند دارای اثر مستقیمی نیستند و نمی توانید آنها را عینا رویت کنید . (به استثنای تگ Title)
تگ body مربوط به محتویات صفحه وب است . در حقیقت چیزی که از صفحه وب در ذهن شما می باشد محتویات تگ body است . (تگ body در تصویر زیر با کادر قرمز مشخص شده است .)

هدف ما از آموزش html در حقیقت آموزش تگهایی می باشد که در تگ body بکار می روند که در ادامه و در مطالب آینده ای که در سایت بارگذاری خواهند شد به آنها می پردازیم .
به هنگام نوشتن کد html سعی کنید دو نکته را توجه کنید .
1- کد ها را به صورت دندانه دار بنویسید یعنی تگی که در دل تگ دیگری قرار می گیرد نسبت به تگ اول دارای فرورفتگی باشد . (به فاصله ای که سمت چپ تگ های head و body قرار دارد توجه کنید .)
2- از آنجا که کد html اغلب طولانی میشود ممکن است فراموش کنید تگی را که باز کرده اید ببندید . پس سعی کنید بلافاصله بعد از باز کردن تگ ، آنرا ببندید و بعد به داخل آن برگردید تا محتویات لازم را به آن اضافه کنید.

parniann · 2012 , December 27

آموزش HTML - نمایش عنوان صفحه - تگ Title

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

در داخل تگ head استفاده کرد . به شکل زیر :
<html>
<head>
<title>This is a TEST !</title>
</head>
<body>
</body>
<html>
با این کار عبارت This is a TES! در نوار عنوان مرورگر نمایش خواهد یافت .
توجه کنید که هر بار Source برنامه را تغییر می دهید بایدصفحه وب را refresh کنید تا الاعات دوباره از روی فایلی که بر روی هارد دیسک قرار دارند لود شوند .

parniann · 2012 , December 27

آموزش HTML - چینش مطالب - تگ p

هر مطلبی که در تگ body نوشته شود عینا در صفحه نمایش می یابد . اگر بخواهیم مطالب با یک نظم خاصی در صفحه ظاهر شوند می توانیم آنها را پاراگراف بندی کنیم . برای این کار می توان از تگ p یا <p> استفاده کرد .

<html>
<head>
<title>This is a TEST !</title>
</head>
<body>
<p>
Hello World !
</p>
</body>
<html>
با اين كار يك متن بسيار ساده خواهيم داشت . حال براي اينكه از نظر ظاهري يكسري تغييرات در اين پاراگراف اعمال كنيم بايد از Attribute هاي اين تگ استفاده كنيم . هر تگ در html يكسري Attribute دارد كه با آنها مي توان تغييراتي در شكل و شمايل آن تگ و محتوياتش داد . مهم ترين Attribute كه تقريبا در تمام تگ ها مشترك است Style مي باشد . همان چيزي كه ما در زبان فارسي و عاميانه خود مي گوئيم استيل . همانطور كه از كاربرد اين كلمه در زبان خودمان برمي آيد اين خصوصيت راجع به شكل و شمايل ظاهري صحبت مي كند . خصوصيت Style مجموعه اي از خصايص ديگر است و به شكل كلي زير به كار مي رود :

<tag style="attribute1: value; attribute2: value;...."> </tag>

همانطور كه در شكل كلي بالا پيداست ابتدا نام خصوصيت نوشته شده و سپس علامت كالن

) گذاشته شده و بعد از آن مقدار اين خصيصه نوشته مي شود . اگر خواستيم خصيصه هاي ديگري را نيز اضافه كنيم بايد بعد از مجموعه اول يك علامت (

گذاشت و سپس مجموعه دوم را به شكل اولي نوشت . ترتيب نوشتن مجموعه ها در اين بين هيچ اهميتي ندارد .

parniann · 2012 , December 27

آموزش HTML - خصيصه هاي موجود در Style

در مطلب قبل گفته شد كه Style به شكل كلي زير مي آيد :

style="Attr1:value;Attr2:value..."

بسته به اينكه خصيصه Style در چه تگي بكار رود ، خصيصه هاي مختلفي را در خود جاي مي دهد . البته در اكثر موارد خصيصه هاي يكساني وجود دارد و بسته به مورد خصيصه هاي جديدي به مجموعه اضافه شده يا از آن كم مي شود .

خصيصه font-family :
اين خصيصه براي تعيين نوع خط محتواي تگ استفاده مي شود به عنوان مثال فرض كنيد بخواهيم محتواي پاراگراف با نوع خط tahoma ظاهر شود در اين صورت بايد كد به شكل زير در آيد :

<p style="font-family : tahoma">
Hello World !
</p>
در اين مورد بايد توجه داشت يك فونت استاندارد را انتخاب كرد كه بر روي همه كامپيوتر ها وجود داشته باشد . چرا كه فونتي كه اينجا تعيين مي كنيد اگر بر روي سيستم كاربر وجود نداشته باشد محتويات پاراگراف با فونت پيش فرض سيستم (Times New Roman) نمايش داده خواهد شد .
اگر به هر حال مصر هستيد كه از يك نوع فونت خاص مثلا B Nazanin استفاده كنيد مي توانيد اين كار را به شكل زير انجام دهيد :
<p style="font-family : B Nazanin , tahoma">
Hello World !
</p>
اين كار به مرورگر وب مي گويد براي فونت ، B Nazanin ارجحيت دارد ولي اگر B Nazanin بر روي سيستم كاربر وجود نداشت به سراغ فونت Tahoma برو . هر چند فونتي را كه مي خواهيد مي توانيد به ترتيب در اين ليست اضافه كنيد منتها بايد بدانيد در انتهاي ليست حداقل بايد يك فونت استاندارد وجود داشته باشد تا اتفاق غير منتظره اي براي نمايش صفحه نيفتد .

خصيصه Color :
اين خصيصه براي تعيين رنگ متن محتواي تگ استفاده مي شود . به شكل زير :
<p style="font-family : B Nazanin , tahoma ; color:Orange" >
Hello World !
</p>
نتيجه اجراي اين كد به شكل زير خواهد بود :
Hello World!
براي رنگدهي دو روش وجود دارد : 1 - رنگدهي با نام رنگ . 2 - رنگدهي با كد رنگ
1- براي رنگدهي با نام رنگ همانند مثال فوق بايد نام رنگ را نوشت . نكته اينجاست كه به اين روش فقط مي توان رنگ هاي محدودي كه داراي نام هستند را اعمال نمود . اگر بخواهيم رنگ ها را به صورت حرفه اي بكار ببريم بايد حتما از كد آنها استفاده كنيم . برخي رنگ ها كه داراي نام هستند در زير ليست مي شوند :

Color Name	Color	Color Name	Color	Color Name	Color	Color Name	Color
Olive		Green		Lime		Gray
Maroon		Red		Yellow		Black
Teal		Purple		Fuchsia		White
Navy		Blue		Aqua		Silver

2 - براي رنگدهي با كد بايد براساس سيستم RGB اين كار را انجام داد . RGB كه فرم كوتاه عبارت Red Green Blue مي باشد به اين نكته اشاره دارد كه رنگ هاي قرمز ، سبز و آبي سه رنگ اصلي سيستم مي باشند و ساير رنگ ها از تركيب اين سه رنگ (هر يك با وزن خاصي) بدست مي آيند . در اين سيستم وزن هر رنگ از عدد 0 تا 255 تغيير مي كند . مثلا در يك سيستم RGB اگر سهم رنگ هاي آبي و سبز 0 و رنگ قرمز 255 باشد اين رنگ همان رنگ قرمز استاندارد خواهد بود . اما در كد html اين رنگ ها داراي كد مبناي 16 خواهند بود . بر اين اساس حد بالاي وزن رنگ ها از 255 به FF در مبناي 16 تغيير مي كند . چرا كه در مبناي 16 ارقام از 0 تا F (يعني همان 15) تغيير مي كند. (1،0،...،9 ، F ، E ، D ، C ، B ، A) بنابراين اگر 255 را با تقسيمات متوالي بر 16 به مبناي 16 ببريم به همان كد بالا يعني FF مي رسيم . حال براي رنگدهي به محتوا از اين طريق بايد كدي شبيه به زير بنويسيم .
<p style="font-family : B Nazanin , tahoma ; color:#FF8000" >
Hello World !
</p>
همانطور كه در كد فوق پيداست دو رقم اول از سمت چپ وزن رنگ قرمز ، دو رقم بعد وزن رنگ سبز و دو رقم آخر وزن رنگ آبي مي باشد . بنابراين نتيجه اجراي كد فوق به شكل زير خواهد بود .
Hello World!
براي يافتن رنگ مناسب و متناسب با سليقه شما ، مي توانيد از ابزارهايي مانند ‍Color Picker در برنامه Paint ويندوز يا فوتوشاپ (photoshop) استفاده كرد . البته اين ابزارها كد رنگ را در مبناي 10 به شما مي دهند كه مي توانيد با استفاده از برنامه ماشين حساب ويندوز و انتخاب گزينه HEX به جاي Dec كد را به مبناي 16 تبديل كنيد . منتها بايد ابتدا ماشين حساب در حالت Dec باشد و شما عدد مربوطه را وارد نمائيد و سپس گزينه Hex را انتخاب كنيد .

خصيصه Background : (خصوصیات Background-Repeat ، Background-Image و Background-Color)
این خصیصه در حقیقت نماینده یک مجموعه خصوصیات است که با این نام یعنی Background شروع می شوند . خصوصیاتی مانند Background-color یا Background-image و ... از این مجموعه هستند . به عنوان مثال خصيصه Background-Color مقداري ازجنس نام رنگ يا كد رنگ مي گيرد و رنگ پس زمينه تگ را تنظيم مي كند . اگر اين گزينه را نيز به مثال فوق اضافه كنيم و رنگ متن را به آبي تغيير دهيم (براي خوانايي بيشتر) كد آن به شكل زير در مي آيد :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background-Color : yellow" >
Hello World !
</p>
حال می توانستیم به جای عبارت Background-color تنها از عبارت Background استفاده کنیم و دقیقا همین نتیجه را ببینیم . نتيجه اجراي اين كد به شكل زير مي باشد :
Hello World!
یا مثلا می توانیم برای پاراگراف یک عکس به عنوان پس زمینه انتخاب کنیم برای اینکار کافیست برای عبارت Background-image یا Background آدرس یک عکس را مشخص کنیم به شکل زیر :
<p style="font-family : B Nazanin , tahoma ; color:red ; Background-Color : yellow;Background-Image: url('/images/preview_f2.png')" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=red ]Hello World ![/COLOR]
نیاز به توضیح نیست که عرض و ارتفاع تگ به عکس اعمال می شود و این طور نیست که اگر عکس بزرگتر باشد عرض و ارتفاع تگ به طور خودکار بزرگتر شود . نحوه تعریف عرض و ارتفاع تگ در ادامه توضیح داده می شود . ضمن اینکه اگر سایز فضای محصور شده بوسیله تگ بیشتر از سایز عکس باشد ، عکس پس زمینه به طور خودکار تکرار می شود . اگر بخواهید جلوی این کار را بگیرید باید بعد از تعیین عکس خصیصه ای با نام background-repeat با مقدار no-repeat را به مجموعه خصوصیات Style اضافه کنید مانند کد زیر :
<p style="font-family : B Nazanin , tahoma ; color:red ; Background-Color : yellow;Background-Image: url('/images/preview_f2.png') ; Background-Repeat:no-repeat" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=red ]Hello World ![/COLOR]

خصيصه Width :
اين خصيصه براي تعيين عرض محصور شده بوسيله تگ بكار مي رود . مقياس عرض بر حسب پيكسل يا درصد است :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;Width:200px" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :

Hello World!

همانگونه كه مي بينيد عرض 200 پيكسل تعريف شده و از آنجا كه رنگ پس زمينه زرد است تنها پاراگرافي با پهناي 200 پيكسل زرد شده است . حال اگر بخواهيم عرض را بر حسب درصد بيان كنيم بايد به شكل زير برخورد شود :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;Width:20%" >
Hello World !
</p>
يعني كافيست به جاي عبارت px علامت % گذاشته شود . نتيجه اجراي كد به شكل زير است :

Hello World!

خصيصه Height :
اين خصيصه براي تعيين ارتفاعي كه تحت تأثير يك تگ قرار مي گيرد بكار مي رود . نحوه كاربرد آن دقيقا به شكل خصيصه Width است . نكته اي كه بايد در مورد اين دو خصيصه مد نظر داشت اينست كه نبايد عرضي كه انتخاب مي كنيم بيش از عرض استاندارد صفحه نمايش باشد وگرنه اسكرول (Scroll) افقي در صفحه ظاهر مي شود و اگر ارتفاع بيش از ارتفاع استاندارد صفحه نمايش باشد اسكرول عمودي ظاهر خواهد شد :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;Width:200px;Height:80px" >
Hello World !
</p>
نتيجه اجراي اين كد به شكل زير است :

Hello World!

خصيصه font-size :
اين خصيصه براي تنظيم بزرگي خط بكار مي رود و بر اساس دو مقياس px يا Pixel و pt يا Point بكار مي رود آنچه كه شما در مورد بزرگي خط از نرم افزارهاي واژه پردازي مانند Word در ذهن داريد بر اساس pt يا Point است :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;font-size:16pt;" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]Hello World![/COLOR]

خصيصه font-weight :
اين گزينه فقط يك مقدار ميگيرد و آن هم عبارت bold است . اين گزينه تنها هنگامي بكار مي رود كه بخواهيم متن به صورت تو پر يا bold نوشته شود :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;font-size:16pt;font-weight:bold" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]Hello World![/COLOR]

خصيصه text-align :
با این خصیصه می توان موقعیت افقی چینش محتویات تگ را تعیین نمود . این خصیصه سه مقدار Left ، Center و Right را می گیرد و محتویات تگ را به ترتیب به چپ ، مرکز و راست تنظیم می کند . برای مثال اگر بخواهیم در مثال فوق متن در وسط پاراگراف قرار گیرد کد به شکل زیر تغییر خواهد یافت :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;font-size:16pt;font-weight:bold;text-align:center" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :

[COLOR=blue ]Hello World![/COLOR]

خصيصه padding :
این خصیصه برای تنظیم یک حاشیه از کناره های فضای محصور شده توسط تگ ، بکار می رود . البته این فضا به 4 قسمت چپ ، راست ، بالا و پائین تقسیم می شود که می توان به ترتیب با خصیصه های padding-left و padding-right و padding-top و padding-bottom این حاشیه ها را به طور جداگانه و مستقل تنظیم کرد ولی اگر بخواهیم همگی به یک شکل و یکسان باشند می توان فقط با تنظیم padding این کار را انجام داد . البته باید به این نکته نیز توجه داشت که تنظیمات نباید با هم ناسازگاری داشته باشند چرا که مثلا نمی توان در پاراگرافی که 200 پیکسل است و متنی به طول 100 پیکسل دارد فاصله از چپ و راست را 40 پیکسل تنظیم کرد چرا که اگر فاصله از چپ 40 پیکسل باشد به صورت خودکار فاصله از راست 60 پیکسل خواهد شد .
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;width:200px;height:80px;padding:50px" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :
Hello World !

و یا این کد :
<p style="font-family : B Nazanin , tahoma ; color:blue ; Background : yellow;width:200px;height:100px;padding-top:70px;padding-left:140px" >
Hello World !
</p>
نتيجه اجراي كد به شكل زير است :
Hello World !

parniann · 2012 , December 27

آموزش HTML - تنظيمات خط و فونت - تگ فونت (Font)

ديديم كه اگر بخواهيم كل متن يك پاراگراف و يا هر تگ ديگري به رنگ يا فونت و يا اندازه خاصي درآيد كافيست كه در خصوصيت Style از آن تگ اين تنظيمات را وارد كنيم . اما اين تنظيمات به كل تگ اعمال مي شوند . حال فرض كنيد بخواهيم كه كل پاراگراف يك رنگ ، يك سايز فونت و يك نوع خط داشته باشند اما يك يا چند كلمه و يا حتي يك يا چند حرف مجزا با تنظيمات ديگري بيايند . چه كاري بايد انجام دهيم ؟ آيا يك تگ پاراگراف ديگر ايجاد كنيم ؟ پاسخ منفي است چرا كه اين كار چينش را به هم مي ريزد . پس راهكار چيست ؟ تگ Font اين كار را راحت كرده است هر تگ Font سه خصيصه دريافت مي كند :

1- Color كه مشخص كننده رنگ خط است .
2 - Face كه مشخص كننده نوع خط مي باشد.
3 - Size كه مشخص كننده اندازه خط است .
به عنوان مثال كد زير را در نظر بگيريد :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<font color="red" face="Vazir" size="7" >Hello </font> World !
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]Hello World ![/COLOR]
شايد تنها چيزي كه باعث تعجب شما شده باشد عبارت size باشد . اين عبارت با عبارت مشابهي كه در خصيصه Style‌ استفاده ميشد متفاوت است . در اينجا اين خصيصه تنها عددي از 1 تا 7 مي گيرد . بزرگترين سايز 7 ، كوچكترين سايز 1 و سايز پيش فرض 3 مي باشد . به عنوان مثالي ديگر ، كد زير را در نظر بگيريد :

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<font color="red" face="Vazir" size="7" >H<font color="green" size="1" >e</font>llo </font> World !
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]Hello World ![/COLOR]
همانطور كه مشاهده مي كنيد محدوده اثر تگ font تا رسيدن با تگ بسته font مي باشد و بعد از آن تنظيمات به حالت قبل (يعني چيزي كه در تگ حاوي تگ font ست شده) برميگردد.

parniann · 2012 , December 27

آموزش HTML - ایجاد لینک با استفاده از تگ a

برای ایجاد لینک باید از تگ a به شکل زیر استفاده کرد . a ابتدای کلمه anchor به معنای لنگر است . تگ a دارای 3 attribute پر کاربرد است .

1- href : مشخص می کند در صورت کلیک شدن بر روی لینک چه صفحه ای باز شود .
2- name : برای ایجاد Bookmark استفاده می شود . bookmark باعث می شود که با کلیک بر روی آن به جایی از صفحه جاری و یا به محل خاصی در صفحه دیگر برویم (نه فقط به ابتدای صفحه)
3 - title : برای ایجاد توضیحی که مانند hint ظاهر شود به کار می رود . این گزینه برای آن به کار می رود که کاربر قبل از کلیک بداند به کجا هدایت خواهد شد .
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a href="http://www.yahoo.com" title="هدایت به سایت یاهو" >yahoo</a>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]yahoo[/COLOR]
آنچه که باید مورد توجه قرار داد اینست که به هنگام وارد نمودن آدرس (مقدار href) باید حتما عبارت //:http گذاشته شود وگرنه مرورگر به دنبال فایلی بنام www.yahoo.com در همان مسیر صفحه وب می گردد که چون آنرا نمی یابد دچار خطا می شود .
حال فرض کنید . صفحه ای نسبتا طولانی شده است . می خواهیم در انتهای صفحه لینکی ایجاد کنیم بنام برو بالا که اگر کاربر این لینک را کلیک کرد به ابتدای صفحه برود . چگونه این کار را انجام دهیم؟ این همان چیزیست که به آن Bookmarking می گوئیم و بوسیله خصیصه name قابل انجام است کد زیر را به دقت بررسی کنید . برای اینکه صفحه کمی طولانی شده و دارای اسکرول شود چند پاراگراف اضافی با محتوای آموزش طراحی وب با HTML ایجاد شده است:
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a name="first"></a>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<p> آموزش طراحی وب با HTML </p>
<a href="/#first" title=" برو بالا">برو بالا</a>
</p>
نتيجه اجراي كد به شكل زير است :
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
آموزش طراحی وب با HTML
برو بالا
همانطور که در نتیجه می بینید جایی که bookmark می کنیم هیچ کس متوجه نمی شود و چیزی دیده نمی شود در مثال فوق ابتدای پاراگراف زرد رنگ یک bookmark بنام first درست شده است . و در آخرین خط این پاراگراف عبارت برو بالا درج شده که به آن bookmark لینک شده است . لینک به bookmark از علامت # و بدنبال آن نام bookmark تشکیل می شود . در اینجا منظور از برو بالا ابتدای صفحه نیست بلکه ابتدای پاراگراف است . اگر به موقعیت اسکرول قبل و بعد از کلیک کردن توجه کنید متوجه منظور خواهید شد . علامت # در لينك ها به همان صفحه اي كه لينك در آن واقع شده است اشاره دارد . حال اگر بخواهيم لينكي به يك قسمت خاص از صفحه ديگري دهيم كافيست ابتدا در آن قسمت خاص از آن صفحه يك bookmark ايجاد كنيم ، سپس در جايي كه مي خواهيم لينك ايجاد كنيم ، مقدار پارامتر href را اينگونه تنظيم كنيد كه ابتدا آدرس آن صفحه باشد و بعد علامت # و سپس نام bookmark. سعي كنيد اكنون اين كار را انجام دهيد .

مطلب مهمی که درباره آدرس دهی چه در لینک ، چه در عکس و چه در هر جای دیگر html وجود دارد، اینست که آدرس دهی باید به گونه ای باشد که وب سایت در هر جا باشد ، چه online و چه offline درست عمل کند و همه آدرس ها معتبر باشند . برای این کار باید آدرس دهی ها به صورت نسبی (local) باشند . یعنی اگر به فایل یا عکسی لینک می دهیم آدرس آن عکس نسبت به فایلی که در آن لینک ایجاد می کنیم باید به صورت نسبی بیاید . مثلا فرض کنید میخواهم به یک فایل بنام test.html لینک دهم که این فایل در شاخه images از مسیر اصلی وب سایت من قرار دارد . برای ایجاد این لینک باید به صورت زیر عمل شود :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a href="/images/test.html" title="فایل تست" >test</a>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]test[/COLOR]
همانطور که مشاهده می کنید آدرس با عبارت images شروع شده چرا که صفحه جاری که index.php نام دارد با پوشه ای بنام images هم شاخه هستند بنابراین برای اینکه از صفحه جاری به test.html برسیم باید از پوشه images گذر کنیم . حال اگر بخواهیم از test.html به index.php لینک دهیم این بار باید اول از پوشه images بیرون بیاییم که اینکار با نوشتن عبارت /.. انجام می شود یعنی مقدار عبارت href می شود : index.php/..
اين تگ خصيصه ديگري نيز بنام target دارد . بيشترين كاربرد target زماني است كه بخواهيد صفحه اي كه به آن لينك مي دهيد در پنجره اي جديد باز شود . بدين ترتيب بايد مقدار خصيصه target را به blank_ تنظيم كنيد . مانند مثال زير :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a href="http://www.yahoo.com" title="هدایت به سایت یاهو" target="_blank" >yahoo</a>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]yahoo[/COLOR]

parniann · 2012 , December 27

چکار کنم کادر رنگی مطالبم بیااااااااااااااااااااااااااااااد اینجا اون کادر ها برام مهم هستن !!!! وگرنه مطلبم الکی میشه

parniann · 2012 , December 27

آموزش HTML - ايجاد عكس با تگ img

براي ايجاد عكس بايد از تگ img كه يك تگ فرد هست استفاده نمود . مهمترين خصيصه اين تگ ، خصيصه src مي باشد كه بايد آدرس عكس را به صورت نسبي (local) در آن تنظيم كرد .

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<img src="/images/preview_f2.png" />
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]

[/COLOR]
اگر بخواهيم يك متن توضيحي به شكل hint هنگامي كه ماوس بر روي عكس قرار مي گيرد ظاهر شود ، بايد از خصوصيت title استفاده كنيم . مانند زير :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<img src="/images/preview_f2.png" title="توضيح عكس" />
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]

[/COLOR]
معمولاتگ img را جوري تنظيم مي كنند كه اگر عكس درست لود نشد به جاي آن يك جمله توضيحي نمايش يابد . دليل لود نشدن عكس هر چيزي مي تواند باشد مثلا گم شدن بسته هاي اطلاعاتي در شبكه ، اشتباه بودن نام و .... اين كار (يعني نمايش يك جمله توضيحي) توسط خصيصه alt انجام مي شود . كد زير نحوه كاربرد اين مطلب را نشان مي دهد .
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<img src="/images/preview_f2_invalid_picture.png" title="توضيح عكس" alt="متن جايگزين عكس" />
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]

[/COLOR]
البته اين خصيصه يعني alt فقط در مرورگر IE كار مي كند . جهت بهينه سازي وب سايت براي موتور هاي جستجو (سئو يا SEO) خصيصه هاي alt و title يكي از گزينه هاي مهم هستند كه بايد رعايت شوند و كمك زيادي براي افزايش رنك در موتورهاي جستجو مي كنند . لازم به ذكر است كه در مرورگر IE خصيصه alt مي تواند به جاي title هم استفاده شود (يعني alt كار title را انجام ميدهد ) اما title نمي تواند به جاي alt استفاده شود .
همچنين مي توانيم از خصيصه style براي تگ img استفاده كنيم . با اين خصيصه مي توانيم عرض و ارتفاع مناسب براي عكس را معين كنيم .
حتي مي توان عكس را به آدرس خاصي لينك داد . يعني كاري كرد كه نشانگر ماوس هنگامي كه بر روي عكس قرار مي گيرد به شكل دست شده و با كليك بر روي آن به صفحه خاصي هدايت شويم . براي اين منظور بايد عكس را به در داخل تگ a قرار داد ، همانند زير :

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a href="/http://www.yahoo.com" >
<img src="/images/preview_f2_invalid_picture.png" title="توضيح عكس" alt="متن جايگزين عكس" />
</a>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]

[/COLOR]
در برخي نسخ مرورگر ها هنگامي كه عكس را داخل يك تگ a ميگذاريم يك كادر دور عكس قرار مي گيرد . براي برداشتن اين كادر مي توان خصيصه border در تگ img را برابر صفر قرار داد . عكس اين مطلب هم صادق است يعني مي توان براي گذاشتن يك قاب با پهناي دلخواه از اين خصيصه استفاده كرد . به شكل زير :

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a href="/http://www.yahoo.com" >
<img src="/images/preview_f2_invalid_picture.png" border="10" alt="متن جايگزين عكس" />
</a>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]

[/COLOR]

parniann · 2012 , December 27

آموزش HTML - ايجاد متن متحرك با تگ marquee

براي ايجاد متن متحرك بايد از تگ marquee استفاده كنيد . اين تگ چهار خصيصه عمده دارد :

1- behavior : كه دو مقدار ميگيرد . يكي scroll كه باعث مي شود متن از يك طرف صفحه وارد شود و از طرف ديگر خارج شود . و يكي alternate كه باعث مي شود متن در صفحه نوسان كند يعني به طرف ديگر كه رسيد از همان طرف برگردد . مانند كد زير :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<marquee > Hello World ! </marquee>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]Hello World ! [/COLOR]
اگر در قطعه كد بالا مقدار behavior را به alternate تغيير دهيم نتيجه اجرا به شكل زير تغيير خواهد كرد :
[COLOR=blue ]Hello World ! [/COLOR]
البته اينجانب نتوانستن اجراي شكل دوم را در Chrome ببينم ولي در IE و FF اجرا مي شود .
2 - Scrollamount :‌ كه يك عدد بدون واحد ميگيرد و سرعت حركت متن را مشخص مي كند . البته در برخي مراجع واحد پيكسل را براي مقدار اين خصيصه ذكر كرده اند :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<marquee scrollamount="20" behavior="scroll" > Hello World ! </marquee>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]Hello World ! [/COLOR]
3 - direction :‌ اين خصيصه جهت حركت متن را مشخص مي كند و چهار مقدار left ، right ، up ، down كه به ترتيب نمايانگر جهت هاي پائين ، بالا ، راست و چپ هستند را ميگيرد. البته اين جهت ها كمي با جهت هايي كه تا به حال با آنها آشنا شديد متفاوت هستند مثلا هنگامي كه مقدار اين خصيصه را به left تنظيم كنيد به اين معني نيست كه متن از سمت چپ وارد مي شود بلكه بدين معني است كه متن از سمت راست وارد مي شود و داراي جهتي به سمت چپ صفحه است . اين مقدار ، مقدار پيش فرض اين خصيصه است . به مثال زير توجه كنيد : در اين مثال يك متن فارسي نمايش مي يابد بنابراين جهت را بايد به راست تنظيم نمود .
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<marquee direction="right" behavior="scroll" > Hello World ! </marquee>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]آموزش ايجاد متن متحرك با تگ marquee
[/COLOR]
و يا مثلا اگر بخواهيم مانند بسياري از سايت ها يك بخش خبري متحرك به سمت بالا درست كنيم بايد اين جهت را به up تنظيم كنيم مانند كد زير :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow;height:200px;width:300px;" >
<marquee direction="up" behavior="scroll" > Hello World ! </marquee>
</p>
نتيجه اجراي كد به شكل زير است :

آموزش ايجاد متن متحرك با تگ marquee
آموزش ايجاد عكس با تگ img
آموزش ايجاد پيوند با تگ a
خصيصه هاي موجود در تگ style

4 - loop : مي توان تعداد حلقه هاي (دفعات) گردش متن را با استفاده از اين خصيصه دقيقا مشخص نمود. مقدار پيش فرض اين گزينه infinte يا بينهايت مي باشد .

parniann · 2012 , December 27

آموزش HTML - ايجاد ليست هاي نامرتب با استفاده از تگ ul

براي ايجاد ليست هايي كه ترتيب آيتم هاي آنها اهميت ندارد بايد ازتگ ul كه ابتداي عبارت Unordered List است استفاده كنيد. با استفاده از اين تگ صرفا يك ليست نامرتب ايجاد كرده ايد اما هنوز هيچ گزينه اي به آن اضافه نكرده ايد . به ازاء هر گزينه بايد از يك زوج باز و بسته تگ li كه مخفف List Item است استفاده نمود . تگ ul يك خصيصه عمده دارد و آن هم type است كه چهار مقدار متفاوت مي پذيرد :

1- Disk :‌ كه باعث مي شود يك دايره سياه تو پر در كنار هر يك از آيتم ها ظاهر شود . اين گزينه مقدار پيش فرض است .
2 - Circle :‌ كه باعث مي شود يك دايره تو خالي در كنار هر يك از آيتم ها ظاهر شود .
3 - Square :‌ كه باعث مي شود يك مربع سياه تو پر در كنار هر يك از آيتم ها ظاهر شود .
4 - none : كه باعث مي شود هيچ علامتي در كنار گزينه ها قرار نگيرد .
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<ul type="square" > <li>HTML</li> <li type="circle">PHP</li> <li>MS SQL Server</li> </ul>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]

HTML
PHP
MS SQL Server

[/COLOR]

همانطور كه مي بينيد خصيصه type به طور جداگانه براي هر li نيز مي تواند به كار رود و فقط آيكن همان li تغيير يابد . براي مثال اين گزينه براي مورد دوم از مثال فوق به كار رفته است .
بنده نوع ديگري براي گلوله گذاري ليست هاي نامرتب در مراجع نديده ام . اگر بخواهيد انواع ديگري براي گلوله گذاري انتخاب كنيد بايد در يك نرم افزار گرافيكي آنرا درست نمود و سپس ا استفاده از خصيصه هاي css آنرا به عنوان گلوله نمايش داد . قبل از اين كار بايد مقدار خصيصه type را در تگ ul با مقدار none مقدار دهي كرد . كد زير مثالي از اين نوع است

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >

<ul >
< li style="background-image:url('images/M_images/arrow.png'); background-repeat:no-repeat;padding-left:10px;background-position:0px 6px" >HTML</li>
<li style="background-image:url('images/M_images/arrow.png'); background-repeat:no-repeat;padding-left:10px;background-position:0px 6px" >PHP</li>
<li style="background-image: url('/images/M_images/arrow.png'); background-repeat:no-repeat;padding-left:10px;background-position:0px 6px" >MS SQL Server</li> </ul>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ]

HTML
PHP
MS SQL Server

[/COLOR]

براي يادگيري بهتر قطعه كد بالا به مراجع css در اينترنت يا بخش آموزش css از همين سايت مراجعه كنيد .

parniann · 2012 , December 27

آموزش HTML - ايجاد ليست هاي نامرتب با استفاده از تگ ol

براي ايجاد ليست هاي مرتب بايد از تگ ol استفاده كرد . كاربرد ol تقريبا همانند ul است يعني براي ايجاد گزينه ها بايد از تگ li استفاده كرد . اين تگ هم مانند تگ ul داراي خصيصه type است كه مي تواند مقادير زير را بپذيرد :

1- عدد : كه معمولا عدد يك است باعث مي شود گزينه ها به همراه شماره بيايند .
2 - a : باعث مي شود يك ليست ترتيبي حرفي با حروف كوچك الفباي انگليسي داشته باشيم .
3 - A : باعث مي شود يك ليست ترتيبي حرفي با حروف بزرگ الفباي انگليسي داشته باشيم .

4 - i : باعث مي شود يك ليست ترتيبي حرفي با حروف كوچك الفباي يوناني داشته باشيم .
5- I : باعث مي شود يك ليست ترتيبي حرفي با حروف بزرگ الفباي يوناني داشته باشيم .
اين تگ يك خصيصه ديگري هم دارد بنام start كه مشخص مي كند ، ترتيب از كدام نماد شروع شود . مثلا اگر مقدار start برابر 10 باشد ، ترتيب ليست از اين عدد شروع مي شود .
حال سئوال اينجاست . فرض كنيد مقدار type برابر a و تعداد آيتم ها بيش از تعداد حروف الفبا باشد در اينصورت شمارش به چه شكل خواهد شد ؟ اگر اين تعداد از تعداد حروف a تا z بيشتر شود بعد از z نوبت به aa مي رسد . دوباره اين مقدار تا az بالا ميرود و سپس نوبت به ba مي رسد و همينگونه بالا مي رود . سعي كنيد اين مطلب را هم اكنون امتحان كنيد .

parniann · 2012 , December 27

آموزش HTML - ايجاد player با استفاده از تگ embed

يكي از راه هاي موجود براي نمايش فيلم بر روي صفحات وب ، استفاده از تگ embed مي باشد . مهمترين خصيصه اين تگ src است كه آدرس فيلم را مشخص مي كند .

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<embed src="/images/butterfly.wmv" />
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ] [/COLOR]
برخي از خصيصه هاي اين تگ به شرح ذيل مي باشند :
1- style : با استفاده از اين گزينه مي توان سبك و شكل و رنگ و لعاب اين تگ را تنظيم كرد .
2- loop : با استفاده از اين گزينه مي توان تعداد دفعات اجراي يك ويدئو را مشخص نمود .

3- playcount :‌كاري شبيه loop انجام مي دهد . (از بين اين دو خصيصه در هر مرورگري يكي اجرا مي شود)
4- autoplay : دو مقدار false و true مي گيرد و مشخص مي كند به صورت اتوماتيك و با لود شدن صفحه اين فايل اجرا شود يا خير .
5- volume : يك مقدار بين 1000 - و صفر مي گيرد و ميزان صداي اجراي ويدئو را مشخص مي كند .

parniann · 2012 , December 27

آموزش HTML - ایجاد صدا در پس زمینه با استفاده از تگ bgsound

همانطور که در مطلب قبل مشاهده نمودید با استفاده از تگ embed می توان فایل صوتی را پخش کرد یا یک ویدئو را نمایش داد . اگر بخواهیم کنترل اجرا را از دست کاربر خارج کنیم به نحوی که انگار فایل در پس زمینه اجرا می شود و کاربر هیچ اختیاری بر روی پخش آن نداشته باشد باید از تگی بنام bgsound استفاده کرد . این تگ تنها یک خصیصه دارد و آنهم src است که آدرس فایل صوتی را می گیرد . هنگام اجرای فایل هیچ اثری از پلیر (player) در صفحه وجود نخواهد داشت .

parniann · 2012 , December 27

آموزش HTML - ایجاد خط افقی با استفاده از تگ hr

با استفاده از تگ hr می توان یک خط افقی در صفحه درج کرد . پهنای این خط به صورت پیش فرض کل عرض صفحه و چینش پیش فرض آن center است . مهم ترین خصیصه این تگ هم style است با این خصیصه می توانید طول و پهنای خط ، رنگ خط و سایر پارامترها را تنظیم کنید . برای تغییر نوع چینش هم از خصیصه align استفاده کنید :

نتيجه اجراي كد به شكل زير است :

parniann · 2012 , December 27

آموزش HTML - موجودیت های HTML یا HTML Entity

مجموعه کاراکترهایISO-8859-1 کدینگ پیش فرض در اکثر کامپیوترهاست . 128 کاراکتر اول این مجموعه ، مجموعه اسکی (ASCII) را تشکیل می دهند . یعنی ارقام 0 تا 9 ، حروف کوچک و بزرگ انگلیسی و برخی کاراکترهای ویژه . کاراکترهای بالایی این مجموعه یعنی کدهای 160 تا 255 کاراکترهایی را شامل می شوند که در کشورهای اروپای غربی (Western European) کاربرد دارند . موجودیت ها (Entities) برای پیاده سازی کاراکتر های رزرو شده و یا کاراکترهایی که وارد کردن آن ها بوسیله صفحه کلید کار راحتی نیست ، استفاده می شوند .

[h=5]کاراکترهای رزرو شده
کاراکترهای معدودی در HTMLو XHTML به عنوان کاراکتر رزرو شده شناخته می شوند . به عنوان مثال علامت کوچکتر (>) یکی از این کاراکترهاست چرا که اگر شما این کاراکتر را در صفحه درج کنید مرورگر فکر می کند شما می خواهید یک تگ را شروع کنید پس به جای متن ، آنرا به صورت کد html تفسیر می کند . لیست کاراکترهای رزرو شده html در زیر قابل مشاهده است . برای نمایش هر یک از کاراکترهایی که در ادامه آمده اند کافیست کد آنها را در صفحه بنویسیم .

Character	Entity Number	Entity Name	Description
"	&#34	"	quotation mark
'	&#39	' (does not work in IE)	apostrophe
&	&#38	&	ampersand
<	&#60	<	less-than
>	&#62	>	greater-than

توجه : موجودیت ها به حروف بزرگ و کوچک حساس (Case Sensitive) هستند

[h=5]نمادهای ISO-8951-1

Character	Entity Number	Entity Name	Description
			non-breaking space
¡	¡	¡	inverted exclamation mark
¢	¢	¢	cent
£	£	£	pound
¤	¤	¤	currency
¥	¥	¥	yen
¦	¦	¦	broken vertical bar
§	§	§	section
¨	¨	¨	spacing diaeresis
©	©	©	copyright
ª	ª	ª	feminine ordinal indicator
«	«	«	angle quotation mark (left)
¬	¬	¬	negation
			soft hyphen
®	®	®	registered trademark
¯	¯	¯	spacing macron
°	°	°	degree
±	±	±	plus-or-minus
²	²	²	superscript 2
³	³	³	superscript 3
´	´	´	spacing acute
µ	µ	µ	micro
¶	¶	¶	paragraph
·	·	·	middle dot
¸	¸	¸	spacing cedilla
¹	¹	¹	superscript 1
º	º	º	masculine ordinal indicator
»	»	»	angle quotation mark (right)
¼	¼	¼	fraction 1/4
½	½	½	fraction 1/2
¾	¾	¾	fraction 3/4
¿	¿	¿	inverted question mark
×	×	×	multiplication
÷	÷	÷	division

[h=5]کاراکتر های ISO-8951-1

Character	Entity Number	Entity Name	Description
À	À	À	capital a, grave accent
Á	Á	Á	capital a, acute accent
Â	Â	Â	capital a, circumflex accent
Ã	Ã	Ã	capital a, tilde
Ä	Ä	Ä	capital a, umlaut mark
Å	Å	Å	capital a, ring
Æ	Æ	Æ	capital ae
Ç	Ç	Ç	capital c, cedilla
È	È	È	capital e, grave accent
É	É	É	capital e, acute accent
Ê	Ê	Ê	capital e, circumflex accent
Ë	Ë	Ë	capital e, umlaut mark
Ì	Ì	Ì	capital i, grave accent
Í	Í	Í	capital i, acute accent
Î	Î	Î	capital i, circumflex accent
Ï	Ï	Ï	capital i, umlaut mark
Ð	Ð	Ð	capital eth, Icelandic
Ñ	Ñ	Ñ	capital n, tilde
Ò	Ò	Ò	capital o, grave accent
Ó	Ó	Ó	capital o, acute accent
Ô	Ô	Ô	capital o, circumflex accent
Õ	Õ	Õ	capital o, tilde
Ö	Ö	Ö	capital o, umlaut mark
Ø	Ø	Ø	capital o, slash
Ù	Ù	Ù	capital u, grave accent
Ú	Ú	Ú	capital u, acute accent
Û	Û	Û	capital u, circumflex accent
Ü	Ü	Ü	capital u, umlaut mark
Ý	Ý	Ý	capital y, acute accent
Þ	Þ	Þ	capital THORN, Icelandic
ß	ß	ß	small sharp s, German
à	à	à	small a, grave accent
á	á	á	small a, acute accent
â	â	â	small a, circumflex accent
ã	ã	ã	small a, tilde
ä	ä	ä	small a, umlaut mark
å	å	å	small a, ring
æ	æ	æ	small ae
ç	ç	ç	small c, cedilla
è	è	è	small e, grave accent
é	é	é	small e, acute accent
ê	ê	ê	small e, circumflex accent
ë	ë	ë	small e, umlaut mark
ì	ì	ì	small i, grave accent
í	í	í	small i, acute accent
î	î	î	small i, circumflex accent
ï	ï	ï	small i, umlaut mark
ð	ð	ð	small eth, Icelandic
ñ	ñ	ñ	small n, tilde
ò	ò	ò	small o, grave accent
ó	ó	ó	small o, acute accent
ô	ô	ô	small o, circumflex accent
õ	õ	õ	small o, tilde
ö	ö	ö	small o, umlaut mark
ø	ø	ø	small o, slash
ù	ù	ù	small u, grave accent
ú	ú	ú	small u, acute accent
û	û	û	small u, circumflex accent
ü	ü	ü	small u, umlaut mark
ý	ý	ý	small y, acute accent
þ	þ	þ	small thorn, Icelandic
ÿ	ÿ	ÿ	small y, umlaut mark

parniann · 2013 , January 2

آموزش HTML - تگ های متفرقه

در html تگ های زیاد دیگری غیر از آنچه که تا کنون گفته شد ، وجود دارد . در اینجا تنها به برخی از آنها اشاره می کنم :

تگ B :
این تگ برای توپر (Bold) نوشتن متن استفاده می شود . بدین صورت که متنی را که می خواهیم توپر باشد بین داخل تگ باز و بسته b می گذاریم . مثال :
<b>Hello</b>
تگ I :
برای کج (Italic) نوشتن متن استفاده می شود . نحوه کاربرد آن همانند تگ B می باشد .

تگ U :
این تگ برای زیر خط (Underline) دار کردن متن استفاده می شود . نحوه کاربرد این تگ همانند دو مورد فوق است .

تگ S :
برای کشیدن خط روی متن استفاده می شود نحوه کاربرد آن همانند موارد فوق است و نحوه اجرای آنرا در زیر می بینید :
100$ 99$
در مثال فوق عبارت $100 داخل تگ s قرار گرفته است .

تگ Strike :
این تگ همانند تگ S عمل می کند .

تگ Del :
این تگ همانند تگ s عمل می کند .

توجه : در حال حاضر به جای تگ های S و Strike از تگ Del استفاده می شود .

تگ Code :
این تگ باعث می شود که فونت متن همانند فونت زبان های برنامه نویسی شود . مثلا تمامی کدهای این سایت داخل این تگ نوشته شده اند . شایان ذکر است که فونت زبان های برنامه نویسی این خصوصیت را دارد که اندازه همه حروف آن یکسان است و تمام کاراکتر ها به یک اندازه فضای افقی اشغال می کنند . به اینگونه فونت ها Monospaced Font یا fixed-pitch font و یا non-proportional-font گفته می شود .

تگ Sub :
این تگ که فرم کوتاه عبارت Sub Script است برای نوشتن اندیس یا زیرنویس استفاده می شود . مثلا فرض کنید می خواهید یک فرمول شیمیایی را روی صفحه وب نمایش دهید می توانید تعداد اتم های فرمول را در تگ sub قرار دهید . نتیجه اجرا به شکل زیر خواهد بود :
O[SUB]2[/SUB]

تگ Sup :

این تگ که فرم کوتاه عبارت Super Script است برای نوشتن بالا نویس استفاده می شود . مثلا توان در عبارت های تواندار باید داخل این تگ نوشته شود . نتیجه اجرا به شکل زیر خواهد بود :
3[SUP]2[/SUP]
توجه : تگ های فوق را می توان به صورت تو در تو استفاده کرد و مهم نیست که کدام داخل دیگری استفاده شود باید بسته به اینکه چه خروجی ای می خواهید تصمیم بگیرید کدام تگ داخل دیگری استفاده شود . منتها نکته مهم اینست که هر تگی که زود تر باز شود باید دیر تر بسته شود و در حقیقت اگر تگ شماره 2 را داخل تگ شماره 1 باز کردید ، باید قبل از بستن تگ شماره 1 (تگ پدر) ، تگ شماره 2 (تگ فرزند) را ببندید .

parniann · 2013 , January 2

آموزش HTML - ایجاد جدول با استفاده از تگ table

حتما تا کنون متوجه شده اید که نمی توانید دو عنصر را به صورت هم عرض و هم سطح هم در صفحه وب نمایش دهید . علت این امر آنست که مرورگر ها به طور خودکار چینش هر عنصر را نسبت به عنصر قبلی تنظیم می کنند و بنابراین تمام عناصر زیر هم قرار می گیرند . برای ایجاد این چینشی که عناصر در آن هم سطح باشند در HTML دو راه وجود دارد یکی استفاده از جدول یا همان table و دیگری استفاده از div. در این مطلب نحوه استفاده از جدول را بیان می کنیم و در مطلب بعدی سعی می شود نحوه استفاده از div مطرح گردد .
برای ایجاد جدول در صفحه وب باید از تگ table استفاده کنیم . تگ باز table شروع یک جدول و تگ بسته table پایان یک جدول را مشخص می کند ولی تا وقتی که سطر ها و ستون ها را ایجاد نکنید هیچ نمایی از جدول را ایجاد نمی کند .
برای ایجاد هر سطر در جدول از تگ tr استفاده می کنیم . هر تگ باز و بسته tr نشاندهنده یک سطر از جدول است سطری که در ابتدا فاقد هرگونه سلولی می باشد . برای ایجاد سلول (خانه) و نه ستون در داخل هر سط می بایست از تگ td استفاده نمود . چرا می گوئیم سلول و نه ستون ؟ بدین خاطر که همانطور که بعدا مشاهده خواهید کرد این امکان وجود دارد که سطر ها به تعداد نامساوی سلول داشته باشند حال آنکه مفهوم ستون در جدول یک قسمت بندی عمودی است که در تمام سطرها ظاهر شده باشد ولی تگ td که شما در یک سطر بکار می برید ، فقط روی همان سطر اثر می گذارد .
در داخل تگ td متن و محتویاتی که می خواهیم در خانه های جدول نمایش یابد را قرار می دهیم . در داخل تگ td تقریبا تمامی تگهایی که تا به حال دیدیم قابل استفاده است . به این نکته توجه کنید که هر آنچه که قرار است در جدول نمایش دهید باید داخل تگ های td نوشته شود و نه تگ های tr و یا بین تگ table و tr .
و ام نحوه نوشتن تگ های table و محتویات آن :
<table>
<tr>
<td>
HTML
</td>
<td>
PHP
</td>
<td>
jQuery
</td>
</tr>
<tr>
<td>
JavaScript
</td>
<td>
CSS
</td>
<td>
MySQL
</td>
</tr>
<tr>
<td>
ASP.NET
</td>
<td>
C#
</td>
<td>
SQL Server
</td>
</tr>
<table>
همانطور که می بینید خواندن کد فوق کمی مشکل است چرا که همه عناصر هم سطح هم آمده اند . هنگامی که جدول بزرگ شود و عناصری غیر از متن معمولی را نیز شامل شود کار از این هم سخت تر می شود . اکیدا توصیه می شود کهکد ها را دندانه دار بنویسید یعنی عنصر فرزند باید با کمی تو رفتگی نسبت به عنصر پدر نوشته شود . در این مطلب چون از ویرایشگرهای تحت وب استفاده شده این کار با مشکل مواجه شده است . نتیجه اجرای کد فوق را در زیر می بینید :

HTML	PHP	jQuery
JavaScript	CSS	MySQL
ASP.NET	C#	SQL Server

همانگونه که می بینید این جدول فاقد هر گونه مرز و یا اصطلاحا border است . البته مرز وجود دارد ولی به خاطر اینکه پهنای پیش فرض آن 0 است دیده نمی شود می توانید با انجام عمل Drag و انتخاب جدول متوجه مرزبندی این جدول شوید . این تکنیک معمولا هنگامی بکار می رود که بخواهیم چینش صفحه را به نوعی منظم کنیم که کاربر متوجه نشود ما از جدول استفاده کرده ایم و یا هدف نشان دادن جدول نباشد . برای ایجاد border می توانید از خصیصه border در تگ table استفاده کنید . این خصیصه مقداری عددی را بر حسب پیکسل گرفته و پهنای مرز جدول را با آن مقدار تنظیم می کند . البته این خصیصه در مرورگر هایی مانند Google Chrome درست کار نمی کند در این مرورگر باید پهنا ، نوع و رنگ مرز را برای هر سلول دقیقا تعریف کنید در مثال زیر همان جدول بالا مشاهده می شود که تنها برای سلول css مرز تعریف شده است .
<table>
<tr>
<td>
HTML
</td>
<td>
PHP
</td>
<td>
jQuery
</td>
</tr>
<tr>
<td>
JavaScript
</td>
<td style="border-width:1px;border-style:solid;border-color:black">
CSS
</td>
<td>
MySQL
</td>
</tr>
<tr>
<td>
ASP.NET
</td>
<td>
C#
</td>
<td>
SQL Server
</td>
</tr>
<table>
نتیجه اجرای کد به شکل زیر است :

HTML	PHP	jQuery
JavaScript	CSS	MySQL
ASP.NET	C#	SQL Server

در کد بالا border-width پهنای border و border-style نوع border (که در اینجا solid به معنای خط پیوسته است) و border-color رنگ border را مشخص می کنند . اگر بخواهید جدول همانند جدول های نرم افزار MS Word که در ذهن شما هستند به نظر برسد باید این خصیصه style را در تمام تگ های td و tr و همچنین تگ table قرار دهید تا تمامی خطوط جدول نمایان شوند . البته برای راحتی کار و همچنین جهت رعایت نکات فنی هیچ گاه style را در تمامی سطرها و ستون ها قرار نمی دهیم مگر در موارد خاص . پس چه کار باید انجام دهیم ؟ راه درست اینست که یک کلاس css تعریف کنید و تمامی سطرها و سلول ها را عضو آن کلاس کنید . می توانید برای یافتن چگونگی انجام این کار بخش css از همین سایت را مطالعه کنید و یا مثالی که در پائین همین صفحه آورده شده را خوب بررسی کنید .
از موارد دیگری که در خصیصه style تگ table قابل استفاده است width و height هستند .
تگ table این امکان را می دهد که چینش افق و عمودی هر سطر و یا سلول را به صورت مستقل و جداگانه تعیین کنیم . برای این کار می توانیم در هر سطر و یا ستون خصیصه های align و valign را بکار برد . اولی مربوط به چینش افقی و دومی مربوط به چینش عمودی است . توجه داشته باشید که اگر خصیصه align را در تگ table بنویسید خود جدول در وسط صفحه قرار می گیرد و نه محتویات آن .

در تگ table دو خصوصیت دیگر هم وجود دارد :
- خصیصه cellspacing : فاصله بین سلول ها را تنظیم می کند .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .
- خصیصه cellpadding : حاشیه ای را از 4 طرف در داخل هر سلول ایجاد می کند . توجه کنید که align و valign بعد از اعمال cellpadding بر روی سلول اعمال می شوند .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .

دو خصیصه مهم دیگری که در تگ td بکار می روند به شرح زیر هستند :
1- خصیصه colspan : این خصیصه یک مقدار عددی می گیرد و مشخص کننده تعداد ستونهایی است که باید توسط این سلول پوشش داده شوند . به عنوان مثال اگر مقدار این خصیصه برابر با 3 باشد این سلول به اندازه پهنای 3 سلول عادی فضا اشغال می کند . توجه کنید که این خصیصه حالتی شبیه به merge cell را پیاده سازی می کند ولی در واقع هیچ گونه merge رخ نداده است .برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .
2- خصیصه rowspan : این خصیصه همانند خصیصه colspan عمل می کند با این تفاوت که در مورد سطرها عمل می کند .یعنی مثلا اگر سلولی دارای rowspan برابر با 2 باشد این سلول در دوسطر حضور خواهد داشت . برای فهم بهتر این مسئله شکل پائین صفحه را به دقت بررسی کنید .
این مثال شامل دو عکس می باشد . یکی عکس کد و دیگری عکس اجرای کد به همراه توضیح است .

parniann · 2013 , January 2

آموزش HTML - تقسیم بندی صفحه با استفاده از تگ div

در مطلب قبلی گفتیم که دو راه برای تقسیم بندی صفحه وجود دارد یکی table و یکی div . در مطلب پیش table توضیح داده شد و در این مطلب div توضیح داده می شود .
برای ایجاد div کافیست یک تگ باز و بسته div ایجاد کنید . به همین سادگی ! چیزی که باعث می شود کار با div مشکل به نظر برسد نحوه چیدمان div ها در کنار یکدیگر است . در ابتدا تفاوت div را با table بررسیمی کنیم .
در جدول این محدودیت وجود دارد که شما باید الزاما پهنای تمام سطر ها را با هم مساوی در نظر بگیرید یعنی در جدول نمی توان کاری کرد که حاشیه جدول دارای حالت کنگره ای یا دندانه دار باشد . ضمن اینکه جدول حجم صفحه را نسبت به div افزایش می دهد و کسانی که نگران رتبه خود در موتور های جستجو هستند بهتر است از div استفاده کنند .
شما در هر قسمت از صفحه که اراده کنید می توانید div بسازید حتی در داخل یک div دیگر . div در حالت عادی مانند یک پاراگراف عمل می کند . چیزی که باعث می شود div کارا باشد استفاده درست و بهینه از خصوصیت های موجود در style آن می باشد . در واقع با کمک div می توانید صفحه وب خود را هر طور که می خواهید تقسیم بندی نمائید . به مثال زیر توجه نمائید :

<div style="background-color:yellow;color:blue;width:100px;height:50px">
Hello
</div>
<div style="background-color

range;color:brown;width:110px;height:30px">
World !
</div>
نتیجه اجرای این کد به شکل زیر است :
Hello
World !

همانطور که می بینید div در حال عادی همانند پاراگراف به نظر می رسد . اما آنچه که div را ممتاز می کند اینست که اولا می توان جایگاه هر div را به طور جداگانه تعیین کرد (که البته این امکان برای تمام عناصر html وجود دارد) و ثانیا اینکه می توان در div تمام عناصر html و حتی کنترل هایی که مخصوص برنامه نویسی هستند را به کار برد در صورتیکه پاراگراف معمولا برای متن بکار می رود . تعیین جایگاه به صورت مجزا و مستقل نیازمند تعریف یک خصیصه جدید در style است :

خصیصه position :
جایگاه هر عنصر در سند html به طور پیش فرض نسبت به عنصر قبلی تعیین می شود بدین صورت که از ابتدای خط بعدی و درست از اول خط ظاهر می شود .عنصر اول نسبت به نقطه مرجع تعیین مکان می گردد . نقطه مرجع در صفحات راست به چپ (dir=rtl) نقطه بالا و سمت راست صفحه و در صفحات چپ به راست (dir=ltr) نقطه بالا و سمت چپ صفحه است . این خصیصه به صورت پیش فرض دارای مقدار static یا ایستا است به این معنی که جایگاه هر عنصر در سند html به ترتیب ظهور در سند html تعیین می گردد . اگر بخواهید این جایگاه به صورت مستقل (یعنی نسبت به نقطه مرجع) تعیین گردد باید مقدار این خصیصه را به absolute یا مطلق تغییر دهید . غیر از این دو مقدار این خصیصه سه مقدار دیگر نیز می تواند بگیرد که به شرح ذیل هستند :
relative : باعث می شود جایگاه عنصر نسبت به جایگاه عادی خود تعیین شود . مثلا عبارت 'left:20px' باعث می شود 20 پیکسل به مختصات سمت چپ عنصر اضافه شود .
fixed : جایگاه عناصر نسبت به جایگاه پنجره مرورگر تعیین می شود .
inherit : جایگاه عنصر نسبت به جایگاه عنصر والد تعیین می شود .
پس ازتعیین مشخصه فوق (در صورتیکه مقدار آنرا به absolute) تغییر داده اید باید مختصات نقطه سمت چپ و بالای عنصر (در صفحات چپ به راست) یا مختصات نقطه سمت راست و بالای عنصر (در صفحات راست به چپ) را به ترتیب نسبت به نقطه سمت چپ و بالای صفحه (در صفحات چپ به راست) یا مختصات نقطه سمت راست و بالای صفحه(در صفحات راست به چپ) تعیین کنید . برای این کار از خصوصیات زیر استفاده کنید .

خصیصه top :
این خصیصه یک مقدار بر حسب پیکسل گرفته و فاصله عمودی نقطه بالایی عنصر را با نقطه مرجع صفحه تنظیم می کند .

خصیصه left :
این خصیصه یک مقدار بر حسب پیکسل گرفته و فاصله افقی نقطه بالایی عنصر را با نقطه مرجع صفحه (لبه چپ صفحه) تنظیم می کند . (در صورتیکه صفحه چپ به راست باشد از این خصیصه استفاده می شود)

خصیصه right :
این خصیصه یک مقدار بر حسب پیکسل گرفته و فاصله افقی نقطه بالایی عنصر را با نقطه مرجع صفحه (لبه سمت راست صفحه) تنظیم می کند . (در صورتیکه صفحه راست به چپ باشد از این خصیصه استفاده می شود)
برای مثال به کد زیر توجه کنید :
<div style="background-color:yellow;color:blue;width:100px;height:50px">
Hello
</div>
<div style="background-color

range ; color:brown ; width:110px ; height:30px ; position:absolute ; left:200px ; top:1550px">
World !
</div>
نتیجه اجرای این کد چنین است :
Hello
World !

همانطور که می بینید div دوم با دادن مختصات در جای مناسب خودش قرار گرفته است . و چون این مختصات بر روی div اول واقع است این دو قسمت با هم همپوشانی دارند . بعد از تعیین position اگر هر یک از خصیصه های top و left و right تعیین نشوند نسبت به عنصر قبلی توسط مرورگر تعیین خواهند شد .
ضمن اینکه هر عنصر در html نسبت به عنصر قبلی خود دارای بعد سوم بالاتریست همانطور که در مثال فوق پیداست div دوم روی div اول را پوشانده است . اگر بخواهیم این ترتیب را به هم بزنیم باید از خصیصه z-index در style استفاده کرد . این خصیصه برای تنظیم بعد سوم بکار می رود .هر عنصری که دارای z-index بالاتری باشد ، بالاتر به نظر می رسد . اگر این قضیه را به مثال فوق اعمال کنیم کد و نتیجه زیر را خواهیم داشت :
<div style="background-color:yellow;color:blue;width:100px;height:50px;position:relative;z-index:10">
Hello
</div>
<div style="background-color

range ; color:brown ; width:110px ; height:30px ; position:absolute ; left:200px ; top:1940px">
World !
</div>
نتیجه اجرای این کد چنین است :
Hello
World !

می بینید که خصیصه z-index به div اول اعمال شده است . اما خصیصه position را نیز به آن اضافه کرده ایم . چرا ؟ برای اینکه خصیصه z-index فقط به عناصری اعمال می شود که دارای خصیصه position باشند. یعنی مرورگر تا وقتی که طراح آگاهانه جایگاه عنصر را تعیین ننماید اجازه نمی دهد از یک خصیصه حرفه ای مانند z-index استفاده نماید .

parniann · 2013 , January 2

آموزش HTML - نحوه تعیین سبک (style) برای عناصر html

تا کنون برای تنظیم style برای یک عنصر یک راه را آموخته اید و آن هم نوشتن خصیصه style در داخل تگ می باشد (InLine Style) . فرض کنید می خواهید استاندارد خاصی را در سراسر وب سایت خود رعایت کنید . مثلا می خواهید همه جداول یک سبک و سیاق خاص (از لحاظ نوع و اندازه و رنگ فونت ، اندازه جدول ، رنگ پس زمینه و ...) داشته باشند . با رویکرد فعلی تکلیف چیست ؟ آیا اگر در وب سایت خود کلا 50 جدول مختلف داشته باشیم باید 50 بار style را به صورت جداگانه بنویسیم ؟ فرض کنید این کار را هم کردیم اگر تصمیممان عوض شد و خواستیم style را تغییر دهیم آیا باید این کار را در 50 جدول مختلف انجام دهیم ؟ می بینید که اندکی (و بلکه بسیار) غیر منطقی به نظر می رسد . ضمن اینکه این کار حجم صفحه را نیز افزایش داده و ترافیک شبکه را نیز بالا می برد که این خود یک نکته منفی برای سایت به هنگام پویش توسط موتور جستجو به حساب می آید . پس راه حل چیست ؟ دو روش دیگر نیز برای تنظیم style وجود دارد که باید راه حل را در آنها جست . در حقیقت دو راه دیگر دو روش مختلف استفاده از css ها می باشد .

روش اول : استفاده از تگ style در داخل تگ head يا Internal Style Sheet
در این روش تمامی style ها را متمرکز می کنیم . در این روش به شکل مختلف می توان style ها را تنظیم کرد .

1- با استفاده از نام تگ : در این روش مانند کد زیر عمل می کنیم یعنی در داخل تگ style ابتدا نام تگ را نوشته و سپس با گذاشتن آکولاد های باز و بسته یک بلوک style را فراهم می کنیم و خصیصه های تگ مورد نظر را در داخل این بلوک تنظیم می کنیم . با این کار این تنظیمات به صورت اتوماتیک به تمامی تگ های موجود اعمال می شود .
<head>
<style>
p
{
font-family:tahoma;
color:blue;
background-color:yellow;
text-align:justify;
width:300px;
height:200px;
}
</style>
</head>
کد فوق باعث می شود این تنظیمات به صورت خودکار به تمامی تگ های p اعمال شود . بدیهی است این روش هنگامی استفاده می شود که بخواهیم تمام پاراگراف ها از یک تنظیمات واحد استفاده کنند .

2- با استفاده از نام كلاس (class) : در اين روش كلاس style تعريف مي شود ، بدين شكل كه كد مانند فوق نوشته مي شود با اين تفاوت كه يك علامت دات (.) قبل از نام كلاس مي آيد و هر عنصري كه عضو اين كلاس باشد اين تنظيمات روي آن اعمال مي شود . براي كلاس به يك عنصر ، از خصيصه class استفاده مي شود مانند كلاس زير :
<head>
<style>
.leftcol
{
font-family:tahoma;
color:blue;
background-color:yellow;
text-align:justify;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div class="leftcol">
</div>
</body>
همانطور كه پيداست هنگام تعريف كلاس علامت دات الزاميست ولي به هنگام استفاده از كلاس نبايد اين علامت دات استفاده شود . اين كلاس را مي توانيد براي بيش ازيك عنصر استفاده كنيد . ضمن اينكه نام كلاس الزاما نبايد نام يك تگ html باشد .

3- با استفاده از مشخصه ID : با استفاده از اين تكنيك مي توانيد براي تك تك عناصر صفحه به طور جداگانه سبك تعريف كنيد اين حالت همانند اينست كه در تك تك عناصر از خصيصه style استفاده كنيد . ولي خوبي آن اينست كه همه style ها متمركز هستند . براي مشخص كردن يك سبك براي يك عنصر خاص كافيست كه قبل از آوردن ID به هنگام تعريف سبك از علامت # استفاده كنيد و بعد در تگ مورد نظر از خصيصه ID استفاده كنيد .
<head>
<style>
#leftcol
{
font-family:tahoma;
color:blue;
background-color:yellow;
text-align:justify;
width:300px;
height:200px;
}
</style>
</head>
<body>
<div id="leftcol">
</div>
</body>

روش دوم : استفاده از فايل هاي css يا External Style Sheet
روش اول نيز به اين شكل كه در بالا در داخل تگ style گفته شد استفاده نمي شود چرا كه حجم فايل بالا رفته و در كدها اختلاط ايجاد مي كند . بهترين كار استفاده از فايل هاي css است . بدين شكل كه دقيقا محتويات تگ style را بدون خود تگ style به يك فايل ديگر با پسوند css منتقل مي كنيم و فقط كافيست اين فايل را با صفحه اي كه مي خواهيم style ها را در آن استفاده كنيم پيوند دهيم .اين پيوند با استفاده از تگ link كه در تگ head بكار مي رود ايجاد مي شود . اين مثال به شكل زير خواهد بود :
<head>
<link type="text/css" rel="stylesheet" href="/theme.css">
</head>
<body>
<div id="leftcol">
</div>
</body>
و محتويات فايل theme.css به شكل زير است :
#leftcol
{
font-family:tahoma;
color:blue;
background-color:yellow;
text-align:justify;
width:300px;
height:200px;
}

تگ link كه در بالا استفاده شده براي لينك كردن سند جاري با يك فايل استفاده ميشود . در مورد مشخصه هاي بكار رفته در تگ link بايد گفت كه خصيصه type براي تعيين نوع MIME فايل لينك شده ، خصيصه rel براي تعيين نوع رابطه اين دو فايل و خصيصه href براي تعيين محل فايلي كه به سند جاري لينك شده است استفاده مي شوند . براي آگاهي كامل از اينكه اين مشخصه ها چه مقاديري مي گيرند به مرجع اين تگ در همين سايت مراجعه كنيد .

آموزش HTML

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه

کاربر ويژه