آموزش کامل html

**Aref** · 07-06-2010 10:18 PM

سلام

آموزش مرجع و مفید HTML رو در این تایپیک قرار می دهیم ;)

لطفا پست تشکر ندهید و از دکمه تشکر استفاده بفرمایید!

با تشکر

**Aref** · 07-06-2010 10:20 PM

مقدمه ای بر وب و معرفی HTML

وب گسترده جهانی :
وب گستره جهانی (World Wide Web) که معمولا فقط وب گفته میشود؛ شبکه ای است که تمام رایانه ها متصل به آن را در سراسر جهان به هم وصل میکند. و تمام رایانه ها میتوانند در وب با هم ارتباط داشته باشند.

WWW چگونه کار میکند ؟
اطلاعات وب در فایل هایی به نام Web Page قرار میگیرند که آن ها نیز در رایانه هایی به نام Web Server قرار دارند و رایانه ها برای دیدن صفحات وب از استانداردی ارتباطی به نام (Hyper Text Transfer Protocol) که HTTP مخففش ایت، استفاده میکنند. رایانه های متصل به وب اطلاعات موجود در Web Page ها را از طریق برنامه هایی به نام مرورگر وب (WWeb Browser) نشان میدهند. رایج ترین مرورگرهایی که مورد استفاده قرار میگیرند، Internet Explorer و FireFox میباشند.

چگونه مرورگرها صفحات وب را نشان میدهند ؟
همه صفحات وب شامل دستورالعمل هایی برای نمایش توسط مرورگرها هستند. مرورگرها با خواندن این دستورالعمل ها صفحات وب را نشان میدهند.
دستورالعمل های صفحات وب، تگ های HTML نامیده میشوند.

HTML چیست ؟

HTML یک زبان برای نشاه گذاری فرا متنی است که کارش توصیف وب است.
HTML برگرفته از کلمه Hyper Text Markup Language است.
HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است.
HTML از تگ های نشانه گذاری استفاده میکند که از طریق آن ها صفحات وب را توصیف میکند.
یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود.

تگ های HTML :

تگ های نشانه گذاری معمولا تگ های HTML خوانده میشوند.
برچسب هایی هستند که متن ها را توسط کلمات کلیدی احاطه میکنند مانند : <html>
تگ ها به صورت جفت هستند که اولی تگ شروع و دومی تگ پایان نامیده میشود.
همچنین تگ های شروع و پایان تگ های باز شدن و بسته شدن هم خوانده میشوند.

اسناد HTML = صفحات وب

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

هدف یک مرورگر وب (مانند اینترنت اکسپلورر و فایر فاکس و ... ) خواندن اسناد HTML و سپس نمایش آنها به صورت صفحات وب است. مرورگر تگ های HTML را نشان نمیدهد، بلکه با استفاده از تگ ها به تفسیر محتوای صفحات میپردازد.
به متن HTML زیر توجه کنید :

کد:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

توضیح مثال بالا :

متن بین <html> و <html/> صفحه وب را توصیف میکند.
متن بین <body> و <body/> متن قابل نمایش در صفحه وب را مشخص میکند.
متن بین<p> و <p/> یک پاراگراف را نشان میدهد.

**Aref** · 07-06-2010 10:22 PM

به چه چیز هایی نیاز دارید ؟

شما برای یادگیری HTML در Parstools به هیچ ابزاری نیاز ندارید !
شما ویرایشگر HTML نیاز ندارید!
شما به وب سرور نیاز ندارید !
شما به وب سایت نیاز ندارید!

ویرایشگر های HTML :
کا در این آموزش ها از یک ادیتور ساده متن مانند Notepad ویندوز استفاده میکنیم.
شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.

پسوند HTML یا HTM ؟
هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

آیا میخواهید یک بار امتحان کنید ؟
اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

کد:

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

فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

از طریق لینک زیر میتوانید آنلاین کار کنید !!!
[Only registered and activated users can see links. ]

**Aref** · 07-06-2010 10:26 PM

عناصر HTML :
پرونده های HTML فایل های متنی هستند که با عناصر HTML شناخته شده اند. عناصر HTML با استفاده از برچسب (تگ های ) HTML تعریف میشوند.

تگ (برچسب) های HTML

برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند
بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند
این کاراکتر های محاط کننده قلاب نامیده می شوند
بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>
اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است.

عناصر HTML

نمونه یک سند HTML :

کد:

<html>
 
<body>
<p>This is my first paragraph</p>
</body>
 
</html>

در این مثال از 3 برچسب استفاده شده است یعنی : <html> و <body> و <p> .

توضیح کامل مثال بالا:
عنصر <p> (پاراگراف) :

کد:

<p>This is my first paragraph</p>

متن بالا یک عنصر HTML است.
برچسب <p> به ما نشان میدهد که متن بالا یک پاراگراف در یک سند HTML است.
این عنصر با تگ <p> شروع میشود و با تگ <p/> پایان می یابد.
محتوای عنصر : This is my first paragraph

عنصر <body> (بدنه) :

کد:

<body>
<p>This is my first paragraph</p>
</body>

عنصر <body> بدنه فایل HTML را به ما نشان میدهد.
این عنصر با تگ <body> شروع و با تگ <body/> پایان می یابد.
محتوای این عنصر شامل یک عنصر دیگر HTML است، یعنی پاراگراف.

عنصر <html> (سند html ) :

کد:

<html>
 
<body>
<p>This is my first paragraph</p>
</body>
 
</html>

عنصر <html> نشان میدهد که تمام سند html است.
این عنصر با تگ <html> شروع و با تگ <html/> پایان می یابد
محتوای این عنصر شامل یک عنصر دیگر html است، یعنی body یا بدنه سند

چرا ما از تگ هایی با حروف کوچک استفاده میکنیم ؟
ما فقط گفتیم که تگ های HTML حساس به حروف کوچک و بزرگ نیستند و <B>همان معنی <b>را می دهد.هنگامی که شما به وب گردی می پردازد، متوجه خواهید شد که بیشتر آموزش ها در مثال هایشان از حروف بزرگ تگ های HTML استفاده می کنند.ما همیشه از برچسب های حروف کوچک استفاده می کنیم. چرا؟
اگر شما می خواهید خود را برای نسل های بعدی HTML آماده کنیدشما باید شروع کنید و از برچسبهای حروف کوچک استفاده کنید.کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.

عناصر تگ :
برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند:
<body>
با اضافه کردن عنصر <bgcolor>شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:<"body bgcolor="red>
این برچسب یک جدول HTML را معرفی می کند:<table>. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد: <"table border="0>
عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار"
عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند

هرگز تگ پایانی رافراموش نکنید!
بیشتر مرورگر های وب سند HTML رابه درستس نمایش میدهند حتی اگر شما تگ پایانی را فراموش کنید.

کد:

<p>This is a paragraph
<p>This is a paragraph

مثال بالا در بیشتر مرورگر ها به درستی نمایش داده میشود ولی به آنها اعتماد نکنید.فراموش کردن تگ پایانی منجر به اتفاقات و پیغام خطاهای غیر منتظره میشود!
توجه! : ورژن (نسخه) بعدی HTML به شما اجازه نمیدهد تا این مرحله را رها کنید و انجام ندهید.

عناصر خالی HTML :

عناصر html که بدون محتوی باشند عناصر خالی html نامیده میشوند.
عناصر خالی را میتوان در تگ آغازین بست!
<br> یک عنصر خالی است زیرا تگ پایانی ندارد.(که آن را خط شکسته یاد میکنند.)
در XHTML و XML و ورژن بعدی HTML همه ی عناصر باید دارای تگ پایانی باشند.
اضافه کردن یک اسلش ( / ) مانند <br /> به تگ آغازین یک راه صحیحی است تا عناصر خالی بسته شوند.این کار توسط XML، XHTML و HTml تایید شده است.
حتی اگر <br> در همه ی مرورگر ها کار کند، باز هم نوشتن <br /> مطمئن تر و در آینده باثبات تر است.

حالت های کتیشن ، 'RED' یا "RED" :
محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند لازم است که از تک کتیشن استفاده کنیم: 'Name='john "shotgun" Nelson

**Aref** · 07-06-2010 10:28 PM

ویژگی ها یا نشانه ها در HTML این امکان را میدهند تا اطلاعاتی را به یک عنصر اضافه کنیم.

نشانه ها در HTML :

عناصر HTML میتوانند شامل خواص و ویژگی هایی باشند.
نشانه ها این امکان را میدهند تا اطلاعاتی را به یک عنصر اضافه کنیم.
نشانه ها همیشه در تگ آغازین مورد استفاده قرار میگیرند.
نشانه ها به صورت جفت نام و مقدار می آیند مثل : name="value"

مثال برای نشانه ها :
لینک های در HTML توسط تگ <a> تعریف میشوند، آدرس لینک به صورت یک نشانه(ویژگی) شناخته میشود:

کد:

<a href="http://www.w3schools.com">This is a link</a>

در آموزش های بعدی در مورد لینک ها توضیح خواهیم داد. عجله نکنید!
از طریق لینک روبرو تمرین کنید : [Only registered and activated users can see links. ]

همیشه مقدار (value) یک ویژگی را نقل کنید :
ارزش و مقدار یک ویژگی همیشه باید در نقل قول ها لحاظ شود.
سبک دوبل استایل در نقل قول ها رایج تر است ولی سبک تک استایل در نقل قول ها مورد قبول تر است.(از نظر مرورگرها)
در بیشتر وضعیت های نادر، که خود مقدار (value) شامل نقل قول میشود؛ لازم است که شما از نقل قول یک گانه استفاده کنید : name='John "ShotGun" Nelson

**Aref** · 07-06-2010 10:35 PM

تیتر ها در HTML از اهمیت ویژه ای برخوردارند.
تیترها در HTML :

تیتر ها توسط تگ <h1> تا <6> تعریف میشوند.
<h1> بزرگترین تیتر را تعریف میکند و <h6> نیز کوچکترین تیتر را تعریف میکند.

مثال:

کد:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

نکته : مرورگرها به طور خودکار یک فاصله خالی قبل و بعد از تیتر ایجاد میکنند.
تمرین در لینک روبرو : [Only registered and activated users can see links. ]

تیتر ها بسیار مهم هستند :

از تگ های تیتر فقط برای تیتر ها استفاده کنید.
برای بزرگ تر (BIG) نشان دادن و یا پررنگ تر (BOLD) نشان دادن متن از تگ تیتر استفاده نکنید.
موتور های جستجو (مثل گوگل و یاهو و ... ) برای ساختن فهرستی از اطلاعات و محتوای وب سایت شما از تیتر ها استفاده میکنند.
از آن جا که ممکن است کاربران صفحات وب شما را به طور سطحی بخوانند، استفاده از تیتر ها برای سازماندهی کردن متن و همچنین منظم نشان دادن آن مهم است.
تگ <h1> باید برای تیتر اصلی استفاده شود، بعد تگ <h2> و بعد <h3> و ... یعنی تگ <h1> معرفی کننده مهمترین تیتر است، بعد <h2>که اهمیتش کمتر است و به ترتیب تا <h6> که <h6> اهمیتش کمتر از بقیه است.

قوانین خط (Rules) در HTML :

تگ <hr> برای ساختن (قرار دادن ) خط افقی استفاده میشود.

مثال :

کد:

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

تمرین در لینک روبرو : [Only registered and activated users can see links. ]

توضیح و تفسیر در HTML :
توضیحات میتوانند در کد های HTML درج شوند تا نوشته را خواندنی تر و قابل فهم تر کنند.
توضیحات توسط مرورگرها نادیده گرفته میشوند پس در نتیجه در مرورگر هاینمایش داده نخواهند شد.
توضیحات مانند مثال زیر نوشته میشوند :

کد:

<!-- This is a comment -->

تمرین و مثال بیشتر در لینک روبرو : [Only registered and activated users can see links. ]

نکته : یک علامت تعجب (!) بعد از براکت ( >) باز وجود دارد ولی قبل از براکت بسته (>) این علامت نیست!
چگونه کد های HTML را ببینیم ؟
حتما شما تا به حال یک صفحه ی وب را دیده اید و تعجب کرده اید ؛ " هی چطوری اینو ساخته ؟!!! "
برای فهمیدن این که چگونه آن را ساخته این کار را انجام دهید :
در صفحه راست کلیک کنید و گزینه ی "View Source"" را بزنید (در اینترنت اکسپلورر) و در فایرفاکس "View Page Source"را بزنید؛ در مرورگرهای دیگر هم به همین ترتیب. .قتی این کار را انجام دهید یک صفحه باز خواهد شد که کد های HTML صفحه وب مورد نظر شما را نشان خواهد داد.

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

توضیحات تگ :
<html> ................ یک سند HTML را تعریف میکند
<body>................ بدنه اصلی فایل HTML را تعریف میکند
<h1> to.<h6>......... تیتر را از سایز 1 تا 6 تعریف میکند
<hr />................ یک خط افقی را تعریف میکند
<!--> ................ توضیحات در HTML را تعریف میکند

**mehrancp** · 07-26-2010 07:16 AM

همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي <body>وارد کنيد بعد از ذخيره آن فايل با پسوند.html يا.htm و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان داده شوند. تگهاي متن را ميتوان به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند. بهتر است که Notepad يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.

<br>
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که نيازي به تگ پايان دهنده هم ندارد.

<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 يعني از راست به چپ مقدار دهي ميشود.

**mehrancp** · 07-26-2010 07:18 AM

در قسمت قبل با تگهايي آشنا شديد که کنترل کلي نمايش متن را به عهده داشتن و در اين صفحه تگهايي را مياموزيد که کنترل نمايش حروف از لحاظ سايز، ضخامت، نوع آرايش و قرارگيري آنها در کلمه را بعهده دارند که به اين نوع تگها formatting ميگويند.

<font></font>
براي مشخص کردن نوع يا شکل حروف ، رنگ و يا اندازه آنها از اين تگ استفاده ميکنيم که داراي خصوصيات زير ميباشد.

face=" " اين خصوصيت نوع فونت را تعيين ميکند که بايد برابر با يکي از فونتهاي استاندارد سيستم عامل قرار دهيد.

size=" "اندازه هر حرف را تعيين ميکند که از اعداد يک تا هفت با علامت مثبت به نشانه افزاينده و با علامت منفي به نشانه کاهش سايز استفاده ميشود.

color=" "براي کنترل و تعيين رنگ حروف اين تگ را ميتوان بکار برد.

<big></big> , <small></small>
براي تعيين اندازه حروف در يک حد خاص از اين تگها استفاده ميشود.

<b></b>
متن بين آنها بصورت توپر bold ظاهر ميشود.

<i></i>
براي نوشتن حروف بصورت کج italic اين تگ را بکار ميبريم.

<u></u>
اين تگ خطي زير کلمات خواهد کشيد.

<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=" " قرار دهيد.

کد HTML:

<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=" " هم ميباشند که در آن يک پيغام براي بيان علت حذف يا اضافه مطلب ميتوان نوشت.

**mehrancp** · 07-26-2010 07:19 AM

<!doctype>

در اين بخش ميخواهم در مورد تگهاي قسمت <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 به عهده [Only registered and activated users can see links. ] ميباشد .

DTD براي HTML 4.0

کد HTML:

<!DOCTYPE html public “-//w3c//DTD HTML 4.0//en”>

و براي XHTML 1.0

کد HTML:

<!DOCTYPE xhtml public “-//w3c//DTD XHTML 1.0 strict//en”>

بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به قسمت سر يا همان head .

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

تگهاي لازم براي اين قسمت به شرح زير ميباشند:

<title></title>

بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر title bar نمايان خواهد شد. دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال نمايان ميشود.

<base>

در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد ، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايت ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=” “ لينکها، اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.

کد HTML:

<base href="http://www.sitename.com">

دقت کنيد که نوشتن پروتکل http اجباري است.

<meta>

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

کد HTML:

http-equiv=” “, name=” “ , content=” “

براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv=”keyword” قرار دهيم و کلمات مورد نظر را در خصوصيت content=” “ وارد کنيم،

کد HTML:

<meta http-equiv=”keyword” content=”html, web, amoozesh,  amouzesh”>

همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت معين کنيد که براي بکار بردن حروف فارسي بايد از utf-8 استفاده کنيد که در قسمت فارسي نويسي توضيح خواهم داد.

کد HTML:

<meta http-equiv=”content-type” content=”text/html;charset=utf-8”>

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

کد HTML:

<meta name=”author” content=”your-name”>

اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا بصورت offline هم ببينند، از اين تگ بايد استفاده کنيد:

کد HTML:

<meta name=”pragma” content=”no-cache”>

يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:

کد HTML:

<meta http-equiv=”refresh” content=”5”>

که آن عدد زمان بر حسب ثانيه است. اگر ميخواهيد که بعد زمان معين همان صفحه به يک صفحه ديگر يا يک وب سايت ديگر هدايت شود خصوصيت زير را اضافه کنيد

کد HTML:

<meta http-equiv=”refresh” content=”5;url=http://www.sitename.com/page01.htm”>

<link>

اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند style sheet در آن صفحه استفاده کنيم،

کد HTML:

<link rel=”stylesheet” href=”stylesheets_folder/menu.css”>

<script>

کدهايي مانند javascript را در اين تگ کنترل ميکنيم که در بخش جاوا اسکريپت توضيح خواهم داد.

<style>

تگ مشخصه Style sheet ميباشد که در بخش مربوطه توضيح داده شده است.

**mehrancp** · 07-26-2010 07:32 AM

همانطور که ميدانيد هر عنصر HTML که بخواهيد در صفحه وب نمايش داده شود بايد ما بين تگ body يعني <body></body> قرار گيرد. در کليه فايلهاي HTML اين تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد <frameset> را بکار بريد.

اما خود تگ body جدا از اهميتي که در فايلهاي HTML دارد، خود داراي خصوصياتي مي باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.

bgcolor اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي توانيد از کد هگز رنگها ،

کد HTML:

[LEFT]<body bgcolor=”#ccff00”>[/LEFT]

و يا نام رنگ را بکار بريد، مانند:

کد HTML:

[LEFT]<body bgcolor=”black”>[/LEFT]

نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين حالت متن در صفحه محو خواهد شد.

background توسط اين خصوصيت بجاي رنگ مي توانيد از عکس هم در زمينه صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،

کد HTML:

<body background=”images/filename.gif”>

توجه داشته باشيد که حجم عکس در سنگيني صفحه و پايين آمدن سرعت تکميل شدن آن موثر است. هنگاميکه از اين خصوصيت استفاده مي کنيد آن عکس نسبت به اندازه اي که دارد در صفحه تکرار مي شود تا فضاي آنرا بپوشاند که با استفاده از StyleSheet تکرار آنرا مي توانيد کنترل کنيد.

bgproperties هنگاميکه عکسي به زمينه اضافه مي شود همراه با ديگر عناصر صفحه مانند عنصر متن scroll مي شود يعني به بالا و پايين يا چپ و راست حرکت مي کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با fixed عکس در زمينه ثابت مي ماند و عناصر بر روي آن حرکت مي کنند.

کد HTML:

<body background=”../images/bg.jpg” bgproperties=”fixed”>

لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر و اپرا قابل اجراست.

topmargin توسط اين خصوصيت حاشيه بالاي صفحه کنترل مي شود که مقدار آن عدد در مقياس پيکسل مي باشد.

leftmargin حاشيه سمت چپ صفحه را کنترل مي کند که اگر نيازي به حاشيه نداريد آنرا برابر با عدد صفر قرار دهيد.

کد HTML:

<body topmargin=”0” leftmargin=”0”>

text اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت رنگ را مرتب در تگها تکرار نکنيد ، مي توانيد اين خصوصيت را به تگ body اضافه کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.

کد HTML:

[LEFT]<body text=”#99ccff”>[/LEFT]

dir اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند فارسي که در اينصورت بايد برابر با مقدار rtl و چپ به راست مانند حروف انگليسي که برابر با ltr مي باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ body بکار بريد و آنرا برابر rtl قرار دهيد محل scroll صفحه مرورگر از سمت راست به چپ منتقل مي شود.

lang اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي fa و براي انگليسي en را مي نويسيد.

کد HTML:

<body lang=”fa” dir=”rtl”>

link در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي کنيد.

کد HTML:

<body link=”#990000” alink=”#009900” vlink=”#000099”>

خصوصيات ديگري هم هست مانند onload که مربوط به زبان جاوا اسکريپت مي باشد که در بخش مربوطه با آنها آشنا خواهيد شد.

موضوع: آموزش کامل html

LinkBack

ابزارهای موضوع

جستجو موضوع

نحوه نمایش موضوع

آموزش کامل html

مقدمه ای بر وب و معرفی html

شروع کردن

عناصر html

ویژگی ها و نشانه ها در html

تیتر ها :: HTML Headings

Members who have read this thread : 14

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش