آموزش طراحی سایت (HTML CSS Javascript) | آتریا

html

چه چیزی نیاز دارید.

Wiki

در این سایت شما به هیچ ابزاری برای یاد گیری HTML نیاز ندارید.

به هیچ ویرایشگر HTML ی نیاز ندارید.
به هیچ سرویس دهنده وبی نیاز ندارید.
به هیچ وب سایتی نیاز ندارید.

نگارش HTML

Wiki

HTML می تواند توسط ویرایشگرهای مختلفی مثل Dreamweaver و Visual Studio نگارش و ویرایش شود.

اما در این خود آموز ما به ویرایشگر ساده متنی (مثل Notepad) برای نگارش HTML نیاز داریم. ما بر این عقیده ایم که استفاده از یک ویرایشگر ساده متنی بهترین راه برای یادگیری HTML است.

وب آزمایشی خود را ایجاد کنید.

Wiki

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

روی هر یک از لینک های زیر راست کلیک نمایید و گزینه "save target as" یا "save link as" را انتخاب نمایید.

mainpage.htm

page1.htm

page2.htm

بعد از اینکه فایل های بالا را کپی کردید، می توانید با دابل کلیک روی فایل "mainpage.htm" نخستین صفحه وب خود را در عمل ببینید.

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

Wiki

ما به شما پیشنهاد می کنیم که هر چه را که از این سایت آموختید با ویرایش فایل وب خود به وسیله یک ویرایشگر متن (مثل Notepad) تجربه کنید.

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

پسوند HTM یا HTML

Wiki

هنگامی که یک فایل HTML را ذخیره می کنید، می توانید از پسوند html یا htm استفاده کنید. تفاوتی نمی کند، این بستگی به شما دارد.

آموزش تصویری مطلب بالا (فیلم آموزش HTML)
درس شماره 2 (شروع کار با HTML) زمان فیلم: 14:58
خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)

HTML DOM Nodes

در مدل HTML DOM، هر چیزی یک گره است:

سند خودش به تنهایی یک گره سند، می باشد.
تمام عناصر HTML، گره های عنصر هستند.
تمام خصوصیت های HTML گره های خصوصیت هستند.
متن های درون عناصر HTML گره هستند.
کامنت ها نیز، گره کامنت هستند.

The Attr Object

در HTML DOM، اشیاء Attr، یک خصوصیت HTMLرا مشخص می کنند.

یک خصوصیت HTML همواره به یک عنصر HTML تعلق دارد.

The NamedNodeMap Object

در مدل HTML DOM، شیء NamedNodeMap یک مجموعه ی نامنظم از گره خصوصیت عنصرها را مشخص می کند.

گره های درون NamedNodeMap می توانند به وسیله ی نام یا اندیس، مورد دسترسی قرار بگیرند.

پشتیبانی مرورگرها

Object
Attr	بله	بله	بله	بله	بله
NamedNodeMap	بله	بله	بله	بله	بله

شیء Attr و شیءNamedNodeMap در تمام مرورگرهای بزرگ پشتیبانی می شوند.

خصوصیت ها و متدها

Property / متد	توضیحات
attr.isId	در صورتی که خصوصیت مورد نظر از نوع ID باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.
attr.name	نام یک خصوصیت را برمی گرداند.
attr.value	مقدار خصوصیت مورد نظر را ست کرده یا برمی گرداند.
attr.specified	در صورتی که خصوصیت مورد نظر، مشخص شده باشد، true را برمی گرداند و در غیر این صورت false برگردانده خواهد شد.

nodemap.getNamedItem()	یک گره خصوصیت، مشخص شده را از شیء NamedNodeMap برمی گرداند.
nodemap.item()	گره خصوصیت را با یک اندیس مشخص در یک شیء NamedNodeMap برمی گرداند.
nodemap.length	تعداد گره های خصوصیت را در یک شیء NamedNodeMap برمی گرداند.
nodemap.removeNamedItem()	یک گره خصوصیت مشخص شده را حذف می کند.
nodemap.setNamedItem()	گره خصوصیت مشخص شده را ست می کند(به وسیله ی نام).

DOM 4 اخطار !!!

در هسته ی W3C DOM، شیء Attr، تمام خصوصیت ها و متد ها را از شیء Node به ارث می برد.

در DOM4، شیء Attr مانند قبل از Node چیزی را به ارث نمی برد.

برای اینکه کیفیت کدنویسی در آینده بهتر شود، شما باید از استفاده از خصوصیات شیء node و متدهای اشیاء attribute خود داری کنید.

Property / متد	Reason for avoiding
attr.appendChild()	خصوصیت ها گره های فرزند ندارند.
attr.attributes	خصوصیت ها، attribute ندارند.
attr.baseURI	به جای آن از دستور document.baseURI استفاده کنید.
attr.childNodes	خصوصیت ها گره های فرزند ندارند.
attr.cloneNode()	به جای آن می توانید attr.value را گرفته یا ست کنید.
attr.firstChild	خصوصیت ها گره های فرزند ندارند.
attr.hasAttributes()	خصوصیت ها، attribute ندارند.
attr.hasChildNodes	خصوصیت ها، گره های فرزند ندارند.
attr.insertBefore()	خصوصیت ها گره های فرزند ندارند.
attr.isEqualNode()	هیچ مفهومی ندارد.
attr.isSameNode()	هیچ مفهومی ندارد.
attr.isSupported()	همواره true می باشد.
attr.lastChild	خصوصیت ها گره های فرزند ندارند.
attr.nextSibling	خصوصیت ها، ویژگی sibling(عناصر هم نیا) ندارند.
attr.nodeName	به جای آن از attr.name استفاده کنید.
attr.nodeType	این همواره 2 می باشد(ATTRIBUTE_NODE).
attr.nodeValue	به جای آن از attr.value استفاده کنید.
attr.normalize()	خصوصیت ها نمی توانند normalized شوند.
attr.ownerDocument	این همواره سند HTML شما می باشد.
attr.ownerElement	این، عنصر html ی است که شما از آن برای دسترسی به خصوصیت استفاده کرده اید.
attr.parentNode	این، عنصر html ی است که شما از آن برای دسترسی به خصوصیت استفاده کرده اید.
attr.previousSibling	خصوصیت ها، ویژگی sibling(عناصر هم نیا) ندارند.
attr.removeChild	خصوصیت ها، گره های فرزند ندارند.
attr.replaceChild	خصوصیت ها گره های فرزند ندارند.
attr.textContent	به جای آن از attr.value استفاده کنید.

صدا و تصویر در HTML

مولتی مدیا در وب شامل صدا، موزیک، ویدئو و انیمیشن هاست.

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

مولتی مدیا چیست؟

Wiki

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

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

در این خودآموز در مورد فرمت های مختلف مولتی مدیا و چگونگی کار با آن ها در صفحات وب چیزهایی خواهید آموخت.

پشتیبانی مرورگرها از مولتی مدیا

Wiki

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

صدا، انیمیشن و ویدئو به روش های مختلف، توسط مرورگرهای متفاوت پشتیبانی می شوند. بعضی عناصر به صورت درون برنامه ای (inline) و بعضی نیاز به نرم افزارهای کمکی (plug-ins) بیشتری دارند. (نرم افزارهایی که باید روی سیستم عامل نصب شوند)

در مورد نرم افزارهای جانبی (plug-ins) در فصل های بعد، بیشتر خواهید آموخت.

فرمت های مولتی مدیا

Wiki

عناصر مولتی مدیا (مثل ویدئو و صدا) در فایل های مدیا ذخیره می شوند.

راه معمول برای اینکه نوع مدیا را تشخیص دهیم نگاه کردن به پسوند آن فایل است. هنگامی که یک مرورگر با پسوند های htm. یا html. برخورد می کند فرض می کند که یک صفحه HTML است. پسوند xml. دلالت بر فایل XML دارد و پسوند css. دلالت بر یک style sheet دارد. عکس ها نیز با پسوند jpg. و png. و یا gif. شناخته می شوند.

عناصر مولتی مدیا نیز فرمت های مربوط به خود با پسوند های مختلفی مثل swf، .wmv، .mp3. و mp4. دارند.

فرمت های ویدئویی

Wiki

فرمت MP4 فرمت جدیدی برای ویدئوهای اینترنتی است. این فرمت توسط YouTube، Flash players و HTML5 پشتیبانی می شود.

فرمت	پسوند	توضیحات
AVI	.avi	فرمت AVI یا (Audio Video Interleave) توسط ماکروسافت ارائه شده و روی تمام کامپیوترهایی که دارای سیستم عامل ویندوز باشد، توسط مرورگر اجرا می شود. AVI یک فرمت رایج در اینترنت است اما در کامپیوترهایی که ویندوز روی آن ها نصب نیست همیشه اجرا نمی شود.
WMV	.wmv	فرمت WMV یا (Windows Media) توسط ماکروسافت ارائه شده و در اینترنت رایج است اما در کامپیوترهایی که ویندوز روی آن ها نیست بدون نصب یک کامپوننت اضافی(رایگان) نمایش داده نمی شوند. بعضی از فیلم های WMV قدیمی نمی توانند به هیچ عنوان در کامپیوترهای غیر ویندوزی نمایش داده شوند زیرا هیچ نمایش دهنده ای برای آن وجود ندارد.
MPEG	.mpg .mpeg	فرمت MPEG یا (Moving Pictures Expert Group) فرمت رایجی در اینترنت می باشد. این فرمت cross-platform می باشد و توسط تمامی مرورگرهای وب پشتیبانی می شود.
QuickTime	.mov	فرمت QuickTime توسط Apple ارائه شد. QuickTime فرمت رایجی در اینترنت است اما فیلم های QuickTime نمی توانند بدون نصب یک کامپوننت اضافی(رایگان) در کامپیوترهای ویندوزی نمایش داده شوند.
RealVideo	.rm .ram	فرمت RealVideo توسط شرکت Real Media در اینترنت ارائه شد. به خاطر اولویت در پهنای باند کم، کیفیت این نوع فایل ها، اغلب کاهش داده می شود.
Flash	.swf .flv	فرمت Flash یا (Shockwave) توسط Macromedia ارائه شد. فرمت Shockwave نیاز به یک کامپوننت اضافه، برای نمایش دارد. اما این کامپوننت به صورت از قبل نصب شده با مرورگرهایی مثل Firefox و Internet Explorer وجود دارد.
Mpeg-4	.mp4	Mpeg-4 فرمت جدیدی در اینترنت است (with H.264 video compression). در حقیقت، YouTube استفاده از MP4 را توصیه می کند. YouTube چندین فرمت را می پذیرد و آن ها را برای انتشار تبدیل به flv. یا mp4. می کند. بیشتر نشر دهنده های online ویدئو در حال حرکت به سمت MP4 به عنوان فرمت به اشتراک گذاری در اینترنت هم در Flash player و هم در HTML5 هستند.

فرمت های صوتی

Wiki

فرمت	پسوند	توضیحات
MIDI	.mid .midi	MIDI که مخفف (Musical Instrument Digital Interface) است فرمتی برای وسایل الکترونیکی موزیک مثل کارت های صوتی کامپیوتری و synthesizerها (ترکیب کننده ها) می باشد. فایل های MIDI شامل صدا نیست و فقط شامل دستورالعمل اجرای نوت ها می باشد. برای اجرای یک فایل MIDI، کلیک کنید. به دلیل اینکه فرمت MIDI تنها شامل نوت ها می باشد بنابراین بسیار کم حجم هستند. مثال بالا تنها 23 کیلو بایت حجم دارد اما حدود 5 دقیقه می باشد. MIDI توسط سیستم های نرم افزاری زیادی پشتیبانی می شود. MIDI توسط تمام مرورگرهای اینترنت پشتیبانی می شود.
RealAudio	.rm .ram	فرمت RealAudio توسط شرکت Real Media در اینترنت گسترش یافت. این فرمت همچنین ویدئو را نیز پشتیبانی می کند. این فرمت اجازه می دهد که فایل های صوتی با پهنای باند کم منتقل شود. به خاطر اولویت در پهنای باند کم، کیفیت این نوع فایل ها، اغلب کاهش داده می شود
Wave	.wav	فرمت WMA یا (waveform) توسط IBM و Microsoft ارائه شد و روی تمام کامپیوترهایی که دارای سیستم عامل ویندوز باشد، توسط مرورگر اجرا می شود. (بیشتر مرورگرهای معروف بجز Google Chrome آنها را اجرا می کنند)
WMA	.wma	فرمت WMA یا (Windows Media Audio) در کیفیت با MP3 مقایسه می شود، و با بیشتر پخش کننده ها غیر از iPod سازگار است. فایل های WMA برای رادیو اینترنتی و یا موزیک Online مناسب است.
MP3	.mp3 .mpga	فایل های MP3 درحقیقت بخش شنیداری فایل های MPEG هستند. فرمت MPEG در اصل برای ویدئو ارائه شده است. فرمت MP3 یکی از رایج ترین فرمت های صوتی است که در عین فشرده سازی، کیفیت بالایی دارد.

از چه فرمتی استفاده کنیم؟

Wiki

فرمت صوتی WAVE فایل های uncompressed(بدون فشرده سازی) متداولی در اینترنت هستند و توسط همه مرورگرها پشتیبانی می شوند. اگر می خواهید فایل های صوتی uncompressed(مثل: موزیک یا سخنرانی) برای بازدیدکنندگان تان به راحتی قابل دسترس باشد، باید از فرمت WAVE استفاده کنید.

فرمت MP3 یکی از جدیدترین فرمت های صوتی compressedشده است. MP3 مترادف با "موسیقی دیجیتال" است. اگر سایت تان شامل فایل های صوتی است، فرمت MP3 می تواند یک انتخاب باشد.

صفحه بندی در HTML

صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.

پس صفحه وبتان را با دقت طراحی نمایید.

مثال - خودتان امتحان کنید

Web page layout using <div> elements
نحوه صفحه بندی با استفاده از عناصر <div>.

Web page layout using <table> elements
نحوه صفحه بندی با استفاده از عناصر <table>.

صفحه بندی وب سایت ها

Wiki

بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)

با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.

	گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی.

صفحه بندی با استفاده از عناصر <div>

Wiki

عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.

توجه: CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.

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

مثال (صفحه بندی در HTML)

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © beyamooz.com</div>

</div>

</body>
</html>

خودتان امتحان کنید »

کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:

Main Title of Web Page

Menu
HTML
CSS
JavaScript

Content goes here

مثال - خودتان امتحان کنید

Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.

صفحه بندی با استفاده از جداول

Wiki

راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.

حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.

	استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است.

در مثال زیر، از یک جدول با سه سطر و دو ستون استفاده شده است. با استفاده از خصوصیت colspan سلول های سطرهای اول و آخر با هم ادغام شده اند.

مثال (صفحه بندی در HTML)

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

خودتان امتحان کنید »

کد بالا نتیجه زیر را ایجاد می کند.

Main Title of Web Page
Menu HTML CSS JavaScript	Content goes here
Copyright © W3Schools.com

نکات مهم

Wiki

نکته: بزرگترین مزیت استفاده از CSS این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.

برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس

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

تگ های صفحه بندی در HTML

تگ	توضیح
<div>	تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
<span>	تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

عناصر block و inline در HTML

عناصر HTML را می توانید به وسیله تگ های <div> و یا <span> گروه بندی نمایید.

عناصر Block

Wiki

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

مثال برای عناصر Block:

<h1>
<p>
<div>
<table>

عناصر Inline

Wiki

یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.

مثال برای عناصر inline:

<span>
<a>
<img>
<td>

عنصر <div>

Wiki

عنصر <div> یک عنصر block می باشد که می تواند به عنوان یک ظرف برای گروه بندی دیگر عناصر HTML استفاده شود.

عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.

هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style برای بلاک هایی با محتوای زیاد استفاده شود.

دیگر استفاده رایج از عنصر <div> صفحه بندی سند می باشد. استفاده از جدول برای صفحه بندی دیگر قدیمی شده است. استفاده از جدول ها برای این منظور روش مناسبی نمی باشد. هدف از عنصر <table> نمایش داده ها به صورت جدولی می باشد.

نحوه صفحه بندی با استفاده از عناصر <div>

توضیح مثال بالا: آموزش HTML-صفحه بندی

عنصر <span>

Wiki

عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.

عنصر <span> معنی خاصی ندارد.

هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style برای بخش های متنی شکل، استفاده شود.

استفاده از عنصر <span> برای متمایز کردن رنگ قسمتی از متن

تگ های گروه بندی

تگ	توضیح
<div>	تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
<span>	تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

عناصر پایه ای در HTML

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

در فصل های بعد آنها را خواهید آموخت.

عنوان ها (Heading)

Wiki

عنوان ها در HTMLبه وسیله تگ های <h1> تا <h6> تعریف می شوند.

مثال (عناصر پایه ای در HTML)

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

خودتان امتحان کنید »

پاراگراف (Paragraph)

Wiki

پارگراف ها در HTML به وسیله تگ <p> تعریف می شوند.

مثال (عناصر پایه ای در HTML)

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

خودتان امتحان کنید »

لینک ها (Link)

Wiki

لینک ها در HTML به وسیله تگ <a> تعریف می شود.

مثال (عناصر پایه ای در HTML)

خودتان امتحان کنید »

توجه: آدرس لینک، در خصوصیت href مشخص می شود.

(در فصل های بعدی این خودآموز راجع به خصوصیت های عناصر، بیشتر خواهید آموخت.)

تصاویر (Image)

Wiki

تصاویر در HTML به وسیله تگ <img> تعریف می شود.

مثال (عناصر پایه ای در HTML)

خودتان امتحان کنید »

توجه: نام و سایز عکس به وسیله خصوصیت ها مشخص می شود.

آموزش تصویری مطلب بالا (فیلم آموزش HTML)
درس شماره 3 (عناصر پایه ای در HTML) زمان فیلم: 08:00
خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)

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

تگ شروع* محتوای عنصر تگ پایان*

<p> This is a paragraph </p>

<a href="/default.htm" > This is a link </a>

<br />

*تگ شروع را اغلب تگ باز و تگ پایان را اغلب تگ بسته می نامند.
نحوه نوشتن یک عنصر در HTML
Wiki
- یک عنصر با یک تگ شروع (تگ باز) آغاز می شود.
- یک عنصر به یک تگ پایان (تگ بسته) ختم می شود.
- محتوای یک عنصر نوشته های بین تگ شروع و پایان می باشد.
- بعضی از عناصر در HTML تهی هستند.
- عناصر تهی در همان تگ شروع بسته می شود.
- بیشتر عناصر HTML می توانند دارای خصوصیت هایی باشند.
توجه: در آموزش بعدی در مورد خصوصیت های عناصر، بیشتر توضیح می دهیم.
عناصر تو در تو در HTML
Wiki
بیشتر عناصر HTML می توانند به صورت تو در تو باشند. (بدین معنی که محتوای آنها می تواند شامل دیگر عناصر HTML نیز باشد)
سندهای HTML شامل عناصر تو در توی HTML می باشند.
مثالی از یک سند HTML
Wiki
<html>

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

</html>
مثال بالا شامل سه عنصر زیر می باشد:
1- عنصر <p>
<p>This is my first paragraph.</p>
عنصر <p> یک پاراگراف را در سند HTML تعریف می کند.
این عنصر حاوی تگ شروع <p> و تگ پایان <p/> می باشد.
محتوای این عنصر "This is my first paragraph" می باشد.
2- عنصر <body>
<body>
<p>This is my first paragraph.</p>
</body>
عنصر <body> بدنه یک سند HTML را توصیف می کند.
این عنصر دارای تگ شروع <body> و تگ پایان <body/> می باشد.
محتوای این عنصر حاوی یک عنصر دیگر (عنصر p) می باشد.
3- عنصر <html>
<html>

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

</html>
عنصر <html> تمام سند html را توصیف می کند.
این عنصر دارای تگ شروع <html> و تگ پایان <html/> می باشد.
محتوای این عنصر حاوی یک عنصر دیگر (عنصر body که خود حاوی عنصر <p> است) می باشد.
تگ پایان را فراموش نکنید
Wiki
در بعضی عناصر HTML حتی اگر تگ پایان را فراموش کنید ممکن است آن عنصر درست عمل کند:
<p>This is a paragraph
<p>This is a paragraph
مثال بالا در بیشتر مرورگرها درست عمل می کند، زیرا تگ بسته در اینجا اختیاری می باشد.
هرگز به این مسئله که تگ بسته اختیاری است استناد نکنید. عناصر زیادی هستند که اگر تگ پایان را در آنها ننویسید خطا می دهند یا نتایج نادرستی می دهند.
عناصر تهی
Wiki
عناصری که قسمت محتوای آنها خالی است را عناصر تهی می نامیم.
عنصر <br> یک عنصر تهی و بدون تگ بسته است (تگ <br> یک خط را تعریف می کند.)
نکته: در XHTML تمام عناصر باید بسته شوند. اضافه کردن یک اسلش درون تگ شروع، مثل </br>، راه مناسبی برای بستن عناصر تهی در XHTML و XML می باشد.
نکته: تگ ها را با حروف کوچک بنویسید
Wiki
تگ های HTML حساس به کوچکی و بزرگی حروف نیستند: <P> با <p> یکسان است. بیشتر وب سایت ها تگ ها را با حروف بزرگ می نویسند.

تگ شروع*	محتوای عنصر	تگ پایان*
<p>	This is a paragraph	</p>
<a href="/default.htm" >	This is a link	</a>
<br />

عنصر head در HTML

مثال - خودتان امتحان کنید

Wiki

The title of a document
تگ <title> عنوان یک سند را تعریف می کند.

One target for all links
نحوه استفاده از تگ <base> برای اینکه معین کنیم تمام لینک های یک صفحه در یک پنجره جدید باز شوند.

Document description
از عنصر <meta> برای توصیف سند استفاده کنید.

Document keywords
از عنصر <meta> برای تعریف کلمات کلیدی سند استفاده کنید.

Redirect a user
چگونه یک کاربر را به آدرس وب جدیدی redirect کنیم (تغییر مسیر دهیم)

عنصر <head> در HTML

Wiki

عنصر <head> ظرفی برای تمام عناصر اصلی HTML می باشد. عناصر موجود در تگ <head> می توانند شامل script ها باشد، می تواند مرورگر را به مکانی هدایت کند که style sheet ها رابیابد، اطلاعات meta را ارائه کند و غیره.

تگ های <title> و <base> و <link> و <meta> و <script> و <style> می توانند به قسمت head اضافه شوند.

عنصر <title> در HTML

Wiki

تگ <title> عنوان سند را تعریف می کند.

عنصر title در تمام سندهای HTML/XHTML ضروری است و نیاز است که همیشه نوشته شود.

عنصر title:

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

یک سند ساده HTML

Wiki

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

عنصر <base> در HTML

Wiki

تگ <base> آدرس پیش فرض یا یک target پیش فرض را برای تمام لینک های یک صفحه مشخص می کند.

عنصر <link> در HTML

Wiki

تگ <link> ارتباط بین سند html و منبعی خارجی را تعریف می کند.

تگ <link> اغلب برای لینک به cssها استفاده می شود.

عنصر <style> در HTML

Wiki

تگ <style> برای تعریف اطلاعات نمایشی برای سند HTML استفاده می شود.

درون عنصر style، مشخص می کنید که عناصر HTML چگونه باید در مرورگر نمایش داده شوند.

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

عنصر <meta> در HTML

Wiki

عنصر <meta> اطلاعاتی در مورد سند HTML فراهم می کند. این داده ها در صفحه، نمایش داده نمی شوند اما توسط ماشین قابل خواندن هستند.

عنصر <meta> نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند.

تگ <meta> همیشه درون عنصر head می باشد.

داده های meta توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود.

کلمات کلیدی برای موتورهای جستجو

Wiki

بعضی موتورهای جستجو از خصوصیت name و content عنصر meta برای شاخص گذاری صفحات استفاده می کنند.

مثال1: توضیحی از محتویات یک صفحه

مثال2: مشخص کردن کلمات کلیدی برای موتورهای جستجو

مثال3: مشخص کردن نویسنده یک صفحه

مثال4: Refresh کردن صفحه هر 30 ثانیه یکبار

عنصر <script> در HTML

Wiki

تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript.

عنصر script در فصل بعد توضیح داده خواهد شد.

بخش Head

Wiki

در جدول زیر، تمام تگ هایی که می توانید در بخش Head صفحه، استفاده کنید لیست شده است:

Tag	توضیحات
<head>	اطلاعاتی در مورد سند ارائه می دهد.
<title>	عنوان یک سند را ارائه می دهد.
<base />	یک آدرس پیش فرض یا یک target پیش فرض برای تمام لینک های یک صفحه ارائه می دهد.
<link />	ارتباط بین یک سند و منبع خارجی را تعریف می کند.
<meta />	داده های meta در مورد یک سند HTML را مشخص می کند.
<script>	برای برنامه نویسی سمت کاربر استفاده می شود.
<style>	مشخص می کنید که عناصر HTML چگونه باید در مرورگر نمایش داده شوند.

عنوان یا سرتیتر در HTML

عنوان ها در سندهای HTML، عناصر مهمی هستند.

عنوان ها در HTML

Wiki

عنوان یا سرتیتر در HTML به وسیله تگ های <h1> تا <h6> تعریف می شود.

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

مثال (عنوان یا سرتیتر در HTML)

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

خودتان امتحان کنید »

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

سرتیترها عناصر مهمی هستند

Wiki

از عنصر heading تنها برای سرتیترها استفاده کنید. از آنها برای بزرگ یا bold کردن استفاده نکنید.

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

از آنجایی که کاربران ممکن است صفحات وب شما را با نگاه کردن به سرتیترها از نظر بگذرانند، استفاده از سرتیترها برای اینکه ساختار سند را نشان دهید مهم است.

h1 برای مهمترین سرتیتر استفاده می شود، بعد از آن h2 و سپس h3 برای سرتیترهای کم اهمیت تر و به همین ترتیب سایر سرتیترها.

ایجاد خطوط افقی در HTML

Wiki

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

مثال (عنوان یا سرتیتر در HTML)

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

خودتان امتحان کنید »

توضیحات (Comment ها) در HTML

Wiki

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

توضیحات به صورت زیر نوشته می شوند:

مثال (عنوان یا سرتیتر در HTML)

خودتان امتحان کنید »

نکته: علامت تعجب بعد از علامت باز نوشته می شود نه قبل از علامت بسته.

نکته: چگونه کدهای HTML را ببینیم

Wiki

آیا تاکنون وقتی یک صفحه وب را دیده اید از خود پرسیده اید "چگونه می توان کدهای HTML آن را دید."

برای دیدن این کدها روی صفحه مورد نظر راست کلیک کرده و از منوی باز شده گزینه "View Source" را در (IE) و یا "View Page Source" را در Firefox و یا گزینه مشابه را در سایر مرورگرها انتخاب کنید.

مثال - خودتان امتحان کنید

Wiki

Headings
چگونه سرتیترها را در یک سند HTML نشان دهیم.

Hidden comments
چگونه توضیحی را در کد HTML درج کنیم.

Horizontal lines
چگونه خط افقی درج کنیم.

منبعی از تگ ها در HTML

Wiki

در فصل های بعد در مورد تگ های HTML و خصوصیت های آن ها بیشتر خواهید آموخت.

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

فرم های ورود اطلاعات در HTML

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

مثال - خودتان امتحان کنید

ایجاد فیلدهای متنی
چگونه یک فیلد متنی ایجاد کنیم. کاربر می تواند داخل فیلد متنی یک متن دلخواه تایپ کند.

ایجاد فیلد کلمه عبور(پسورد)
چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم.

(در انتهای این صفحه مثال های بیشتری آورده شده است.)

فرم های HTML

Wiki

از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و... باشد.

از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

<form>
.
input elements
.
</form>

فرم های HTML و عناصر ورودی

Wiki

یکی از مهمترین عناصر فرم، عنصر input است.

در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

text , checkbox , radio , password , hidden , submit , reset , button , file , image

در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:

فیلد input از نوع Text

Wiki

اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و... را وارد کند، خصوصیت type را با مقدار "text" تنظیم کنید:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

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

نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.

اگر بخواهیم مقداری بیش از 20 کاراکتر را برای عنصر متنی مشخص کنیم چه کار می کنیم.

فیلد input از نوع Password

Wiki

اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار "password" تنظیم کنید:

<form>
Password: <input type="password" name="pwd" />
</form>

توجه: کاراکترها در فیلد پسورد به صورت ماسک شده نمایش داده می شوند.(ستاره ای یا دایره ای)

فیلد input از نوع Radio

Wiki

اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "radio" تنظیم کنید:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

فیلد input از نوع Checkbox

Wiki

اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "checkbox" تنظیم کنید:

فیلد input از نوع Submit

Wiki

در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال یا Submit استفاده می شود و با کلیک کاربر روی این دکمه، اطلاعات درون فرم به فایلی دیگر ارسال خواهند شد.

برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت.

معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

اگر در فیلد متنی بالا کاراکترهایی را تایپ کنید و روی دکمه "submit" کلیک کنید، مرورگر، ورودی شما را به صفحه ای به نام "html_form_action.php" ارسال خواهد کرد.

مثال - خودتان امتحان کنید

Wiki

Radio button
چگونه یک radio button ایجاد کنیم.

Checkbox
چگونه یک checkbox ایجاد کنیم. کاربر می تواند در انتخاب مختار باشد.

drop-down
چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم.

Drop-down با آیتم انتخاب شده از قبل
چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم.

Textarea
چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم. در یک text-area کاربر می تواند تعداد نامحدودی کاراکتر تایپ کند.

button
چگونه یک دکمه برای کلیک کردن ایجاد کنیم.

مثال - خودتان امتحان کنید(Form)

Fieldset
چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم.

فرمی با دو فیلد متنی و یک دکمه submit
چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم.

فرمی با دو checkbox
چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم.

فرمی با دو radio button
چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم.

تگ های فرم HTML

Wiki

تگ	توضیحات
<form>	یک فرم HTML برای ورودی کاربر تعریف می کند.
<input />	یک کنترل ورودی تعریف می کند.
<textarea>	یک کنترل ورودی متن چند خطه تعریف می کند.
<label>	برای یک عنصر ورودی مانند متن یک برچسب یا lable تعریف می کند.
<fieldset>	برای یک فرم HTML یک لبه یا border تعریف می کند.
<legend>	برای یک عنصر fieldset یک عنوان یا caption تعریف می کند.
<select>	یک لیست کشوئی یا (drop-down list) تعریف می کند.
<optgroup>	در لیست کشوئی یا (drop-down list) یک گروه از آیتم های مرتبط به هم را تعریف می کند.
<option>	در لیست کشوئی یا (drop-down list) یک آیتم یا option تعریف می کند.
<button>	یک دکمه برای کلیک کردن تعریف می کند.

فرمت دهی در HTML

فرمت دهی متن در HTML

This text is bold

This text is big

This text is italic

This is computer output

This is_subscript and ^superscript

خودتان امتحان کنید »

تگ های فرمت دهی در HTML

Wiki

HTML از تگ های <b> و <i> برای bold و italic کردن متن ها استفاده می کند.

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

	اغلب <strong> نتیجه ای شبیه <b> و <em> نتیجه ای شبیه <i> بر می گرداند. البته، تفاوتی در معنی این تگ ها وجود دارد. <b> یا <i> به معنی متن bold یا italic می باشند. <strong> یا <em> به این معنی است که می خواهید متن طوری نمایش داده شود که کاربر بفهمد متن مهم است. امروزه تمام مرورگرهای اصلی، متن strong شده را به صورت bold و متن با فرمت em را به صورت italic نمایش می دهند. با این وجود، اگر مرورگری بخواهد متون با فرمت strong را highlight کند متون bold شده را highlight نمی کند.

اغلب <strong> نتیجه ای شبیه <b> و <em> نتیجه ای شبیه <i> بر می گرداند.

البته، تفاوتی در معنی این تگ ها وجود دارد.

<b> یا <i> به معنی متن bold یا italic می باشند.

<strong> یا <em> به این معنی است که می خواهید متن طوری نمایش داده شود که کاربر بفهمد متن مهم است.

امروزه تمام مرورگرهای اصلی، متن strong شده را به صورت bold و متن با فرمت em را به صورت italic نمایش می دهند.

با این وجود، اگر مرورگری بخواهد متون با فرمت strong را highlight کند متون bold شده را highlight نمی کند.

مثال - خودتان امتحان کنید

Wiki

Text formatting
چگونه در یک سند HTML متنی را فرمت دهی کنیم.

Preformatted text
نحوه تنظیم فاصله ها و خط های جدید با استفاده از تگ pre.

"Computer output" tags
تگ های computer output به چه صورت هایی نمایش داده می شوند.

Address
چگونه اطلاعات تماس مالک یا نویسنده یک سند HTML را تعریف کنیم.

Abbreviations and acronyms
چگونه کلمات مخفف را بکار ببریم. (زمانی که اشاره گر موس روی سرنام یا مخفف عبارت مذکور قرار می گرد, عبارت به صورت کامل نمایش داده می شود)

Text direction
نحوه تغییر جهت متن (از آخر به اول).

Quotations
نحوه نوشتن نقل قول های کوتاه و بلند.

Deleted and inserted text
نحوه علامت گذاری متن های زیر خط دار یا حذف شده (روی آن خط کشیده می شود). برای خط زدن یک لغت و درج لغت جایگزین به گونه ای که هر دو کنار هم قرار گیرند استفاده می شود.

تگ های مربوط به قالب بندی متن در HTML

Wiki

تگ	توضیحات
<b>	متن را به صورت ضخیم یا bold نمایش می دهد.
<strong>	متن را به صورت ضخیم یا strong نمایش می دهد.
<em>	متن را به صورت مورب یا emphasized (تأکید شده) نمایش می دهد.
<i>	متن را به صورت مورب یا italic نمایش می دهد.
<small>	متن را به صورت small نمایش می دهد.
<big>	متن را به صورت big نمایش می دهد.
<sub>	متن را به صورت subscripted نمایش می دهد.
<sup>	متن را به صورت superscripted نمایش می دهد.
<ins>	متن را به صورت inserted (زیر خط دار) نمایش می دهد.
<del>	متن را به صورت deleted (روی آن خط کشیده شده) نمایش می دهد.

تگ های "computer output" در HTML

تگ	توضیحات
<code>	متن را به صورت computer code نمایش می دهد.
<kbd>	متن را به صورت keyboard نمایش می دهد.
<samp>	متن را به صورت sample computer code نمایش می دهد.
<tt>	متن را به صورت teletype نمایش می دهد.
<var>	متن را به صورت variable نمایش می دهد.
<pre>	متن را به صورت preformatted نمایش می دهد. (خطوط و فاصله های اضافه در نظر گرفته شده را حفظ می کند)

تگ های Citations ،Quotations و Definition در HTML

تگ	توضیحات
<abbr>	مخفف کلمه ای را تعریف می کند. با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.
<acronym>	سر نام کلمات را تعریف می کند. (در HTML5 پشتیبانی نمی شود) با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.
<address>	اطلاعات تماس برای نویسنده با مالک سند را مشخص می کند.
<bdo>	با استفاده از خصوصیت bdo می توان کلمات را برعکس کرد. (از آخر به اول یا برعکس)
<blockquote>	برای تعریف نقل قول های بلند استفاده می شود. مرورگر، بصورت پیشفرض قبل و بعد از عبارت نقل قول یک فضای اضافی قرار می دهد. همچنین برای آن Margin در نظر می گیرد.
<q>	برای تعریف نقل قول های کوتاه استفاده می شود. مرورگر، بصورت پیشفرض عبارت را داخل دابل کوتیشن قرار میدهد.
<cite>	جهت تعریف نقل قول (citation) در HTML5 تگ <cite> عنوان یک کار را مشخص می کند اما در HTML 4.01 تگ <cite> یک نقل قول را مشخص می کند.
<dfn>	یک عبارت تعریفی را مشخص می کند.

فونت ها در HTML

تگ <font> نباید استفاده شود
Wiki
تگ <font> در HTML 4 رایج نیست و در HTML 5 حذف شده است.
کنسرسیوم World Wide Web یا (w3c) تگ <font> را از دستوراتش حذف کرده است.
در HTML 4، باید از CSS (یا style sheetها) برای تعیین خصوصیات نمایش عناصر استفاده کرد.
مثال زیر نشان می دهد که چگونه HTML با تگ <font> کار می کند.
مثال (فونت ها در HTML)
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
خودتان امتحان کنید »

مثال - خودتان امتحان کنید
Wiki
راه درست قالب بندی - با Style ها
Set the font of text
این مثال نحوه تنظیم فونت متن را نشان می دهد.
Set the font size of text
این مثال نحوه تنظیم سایز فونت را نشان می دهد.
Set the font color of text
این مثال نحوه تنظیم رنگ متن را نشان می دهد.
Set the font, font size, and font color of text
این مثال نحوه تنظیم فونت، سایز و رنگ متن را نشان می دهد.

کاراکترهای رزرو شده در HTML

کاراکترهای رزرو شده در HTML باید با character entity ها جایگزین شوند.

HTML Entities

Wiki

بعضی کاراکترها در HTML رزرو شده هستند.

استفاده از علامت کوچکتر(<) و بزرگتر(>) در متن به دلیل اینکه مرورگر آنها را با تگ ها در هم می آمیزد امکان پذیر نیست.

برای اینکه بتوان کاراکترهای رزرو شده را نمایش داد، باید از character entity ها در کد منبع HTML استفاده کنیم.

یک character entity به این شکل می باشد:

&entity_name;
OR
&#entity_number;

برای نمایش علامت کوچکتر باید بنویسیم: lt& یا 60#& (که lt مخفف less than است)

نکته: مزیت استفاده از entity name به جای entity number این است که به یاد آوردن name راحت تر است. اما عیب آن این است که مرورگرها ممکن است همه entity name ها را پشتیبانی نکنند. (پشتیبانی از entity number ها خیلی بهتر است.)

فاصله (Non-breaking Space)

Wiki

یک character entity رایج در HTML کاراکتر non-breaking space (یا nbsp&) می باشد.

مرورگرها همیشه فاصله ها (space) را کوتاه می کنند. اگر 10 فاصله پشت سر هم در متن خود تایپ کنید، مرورگر 9 تای آن ها را برمی دارد. برای اینکه فاصله ها را به متن خود اضافه کنید، می توانید از کاراکتر nbsp& استفاده نمایید.

مثال

Wiki

character entity ها در HTML را تجربه کنید: Try it yourself
در مثال بالا، کاراکتر X را با یک نام یا عدد (عدد+#) جایگزین نمایید.

character entity های مفید در HTML

Wiki

نکته: نام Entityها حساس به کوچکی و بزرگی حروف هستند.

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
§	section	§	§
©	copyright	©	©
®	registered trademark	®	®
™	trademark	™	™

لیست ها در HTML

لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.

لیست ها در HTML

لیست های مرتب

The first list item
The second list item
The third list item

لیست های نامرتب

List item
List item
List item

مثال - خودتان امتحان کنید

Wiki

Unordered list
نحوه ایجاد لیست نامرتب در سند HTML.

Ordered list
نحوه ایجاد لیست مرتب در HTML.

(شما می توانید مثال های بیشتر را در پایین این صفحه مشاهده کنید.)

لیستهای نامرتب (Unorder List)

Wiki

یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)

آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

نحوه نمایش کد بالا در مرورگر:

Coffee
Milk

لیست های مرتب (Order List)

Wiki

یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.

آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

نحوه نمایش کد بالا در مرورگر:

Coffee
Milk

لیست های تعریفی (Description List)

Wiki

یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.

لیست های تعریفی با تگ <dl> نوشته می شوند.

تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

نحوه نمایش کد بالا در مرورگر:

Coffee: - black hot drink
Milk: - white cold drink

نکات مهم و اساسی

Wiki

نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.

مثال بیشتر - خودتان امتحان کنید

Different types of ordered lists
نمایش انواع دیگر لیست های ترتیبی.

Different types of unordered lists
نمایش انواع دیگر لیست های غیر ترتیبی.

Nested list
نمایش لیست های تو در تو.

Nested list 2
نمایش لیست های تو در توی پیچیده تر.

Description list
نمایش لیست تعریفی.

تگ های لیست در HTML

Tag	Description
<ol>	یک لیست ترتیبی تعریف می کند.
<ul>	یک لیست غیر ترتیبی تعریف می کند.
<li>	آیتم های یک لیست را تعریف می کند.
<dl>	برای ساخت یک لیست تعریفی استفاده می شود.
<dt>	برای ساخت یک آیتم در لیست تعریفی استفاده می شود.
<dd>	برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.

لینک ها در HTML
لینک ها در HTML
Wiki
لینک ها تقریبا در تمام صفحات وب پیدا می شوند. لینک ها به کاربران اجازه می دهند تا از صفحه ای به صفحه دیگر کلیک کنند.

مثال - خودتان امتحان کنید
HTML links
نحوه ایجاد لینک ها در سند HTML
می توانید مثال های بیشتری را در پایین این صفحه ببیند.
Hyperlink (یا Link ها) در HTML
Wiki
یک hyperlink یا link یک کلمه یا گروهی از کلمات یا عکس می باشد که شما می توانید با کلیک کردن روی آن به سند جدید یا بخشی از همان سند بروید.
هنگامی که شما موس را روی یک لینک در یک صفحه وب می برید، نشانگر به شکل یک دست کوچک در می آید.
لینک ها در HTML با تگ <a> مشخص می شوند.
تگ <a> به دو روش می تواند استفاده شود:
1. برای ایجاد لینک به سندی دیگر، با استفاده از خصوصیت href
2. برای ایجاد یک پیوند به دورن همان صفحه (bookmark)، با استفاده از خصوصیت name
نحوه نوشتن لینک در HTML:
<a href="/url">Link text</a>
خصوصیت href مقصد یک لینک را مشخص می کند.
مثال:
<a href="http://www.beyamooz.com/">Visit beyamooz</a>
که به این صورت نمایش داده می شود: Visit beyamooz
با کلیک روی لینک بالا، کاربر به صفحه اصلی سایت beyamooz ارجاع داده می شود.
نکته: Link text الزاما یک متن نیست. می تواند یک عکس یا هر عنصر دیگر HTML باشد.
خصوصیت target
Wiki
خصوصیت target مشخص می کند که صفحه لینک شده، چگونه باز شود.
مثال زیر، صفحه لینک شده را در یک پنجره جدید یا در یک تب جدید باز می کند:
مثال (لینک ها در HTML)
<a href="http://www.beyamooz.com/" target="_blank">Visit beyamooz!</a>
خودتان امتحان کنید »
خصوصیت name یا (id)
Wiki
با تنظیم یک نام منحصر به فرد برای یک عنصر با استفاده از خصوصیت name یا id، می توانید در CSS یا JavaScript به آن دسترسی داشته باشید.
البته از خصوصیت name یا id برای ایجاد یک bookmark یا پیوند به درون همان صفحه نیز می توان استفاده نمود.
نکته: استاندارد HTML5 خصوصیت id را بجای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد. خصوصیت id برای HTML4 در تمام مرورگرهای امروزی نیز عمل می کند.
مثال:تنظیم خصوصیت Name برای تگ <a> در سند HTML:
<a name="tips">Useful Tips Section</a>
ایجاد یک لینک به محل مشخصی درون صفحه جاری:
<a href="#tips">Visit the Useful Tips Section</a>
یا، ایجاد یک لینک به محل مشخصی در صفحه ای دیگر:
<a href="http://www.beyamooz.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
نکات اساسی و مفید
Wiki
نکته: اگر می خواهید یک فولدر در یک سایت را آدرس دهی نمایید، همیشه یک slash به انتهای آن اضافه کنید. مانند زیر:
http://beyamooz.com/html/
در غیر اینصورت، دو درخواست به سرور ارسال کرده اید، سرور ابتدا یک slash به انتهای آدرس اضافه می کند و سپس آدرس را بارگذاری می کند.

مثال - خودتان امتحان کنید
Wiki
An image as a link
نحوه ایجاد یک عکس به عنوان یک لینک
Link to a location on the same page
نحوه ایجاد یک پیوند درون همان صفحه. (این روش برای سندهایی که فهرست بندی شده اند کاربرد زیادی دارد)
Break out of a frame
چگونه از یک فریم بیرون بیاییم. (اگر سایت شما در یک فریم محصور است)
Create a mailto link 1
چگونه با یک لینک، متنی را ایمیل کنیم. (تنها زمانی کار می کند که نرم افزار مدیریت ایمیل مثل outlook نصب شده باشد)
Create a mailto link 2
مثالی دیگر از ارسال متن توسط لینک
تگ های لینک در HTML:

تگ توضیح

<a>
یک ancher را تعریف می کند.
محل قرارگیری کدهای JavaScript

محل قرارگیری کدهای JavaScript
Wiki
کدهای JavaScript در صفحه HTML باید بین تگهای <script> و <script/> قرار داده شود.
کدهای JavaScript را می توان در بدنه صفحه HTML (بین تگهای باز و بسته <body> و <body/>) و یا در قسمت <head> صفحه قرار داد.
تگ <script>
Wiki
از تگ <script>، برای وارد کردن کدهای JavaScript در صفحه HTML استفاده می شود.
تگهای باز و بسته <script> و <script/> می گوید، کدهای JavaScript کجا شروع و کجا پایان یافته است.
خطوط بین <script> و <script/> شامل کدهای JavaScript است:
<script>
alert("My First JavaScript");
</script>
مرورگر، کد JavaScript بین <script> و <script/> را ترجمه و اجرا می کند.
توجه:بدون تگ های باز و بسته <script> و <script/> ، مرورگر با دستورات بین آنها مانند یک متن معمولی برخورد می کند و آنها را عیناً در صفحه HTML نمایش می دهد. (خودتان امتحان کنید)
توجه: ممکن است برای تگ <script> خصوصیت type را تنظیم کنیم ("text/javascript"). نیاز به انجام این کار نیست، چون در تمام مرورگرها و در HTML5 زبان اسکریپت پیشفرض، JavaScript است.
کدهای JavaScript در بدنه صفحه HTML
Wiki
در مثال زیر، هنگام بارگذاری صفحه یا (onload)،خروجی HTML در قسمت <body> چاپ می شود:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
.
.
</body>
</html>
خودتان امتحان کنید »
همچنین در مثال زیر، تاریخ جاری سیستم، هنگام بارگذاری صفحه، داخل عنصر با شناسه "demo" نوشته می شود:
مثال (محل قرارگیری کدهای JavaScript)
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML=Date();
</script>
</body>
</html>
خودتان امتحان کنید »
توجه: برای اطمینان بیشتر، کد JavaScript در پایین صفحه HTML قرار داده شده است (نباید قبل از ایجاد عنصر <p> کدمان اجرا شود)
توابع و رویدادها در JavaScript
Wiki
کدهای JavaScript در صفحه HTML، زمانی که صفحه بارگذاری شود (onload) اجرا خواهند شد. اما این چیزی نیست که ما همیشه نیاز داریم.
بعضی مواقع می خواهیم زمانی که یک رویداد خاص اتفاق می افتد، کدمان اجرا شود، مانند زمانی که کاربر روی یک دکمه کلیک می کند. در این مورد می توانیم کدمان را داخل یک تابع قرار دهیم.
رویدادها در حالت عادی با توابع ترکیب می شوند، مانند صدا زدن یک تابع هنگامی که رویداد رخ می دهد.
در آموزش های بعدی درباره توابع و رویدادهای JavaScript بیشتر خواهید آموخت.
اسکریبت ها در دو قسمت <body> و <head>
Wiki
می توان به صورت نامحدود، هر تعداد خط اسکریبت را در صفحه HTML قرار داد، و همچنین می توانید اسکریبت ها را همزمان در دو قسمت <body> و <head> بیاورید.
در حالت کلی، تمام توابع را در قسمت <head> صفحه و یا در پایین صفحه قرار می گیرد. این روش باعث می شود که تداخلی با محتویات صفحه پیش نیاید.
کدهای JavaScript در قسمت <head>
Wiki
در مثال زیر، زمانی که روی دکمه کلیک شود یا به عبارتی رویداد onclick عنصر مورد نظر رخ دهد، تابع ()displayDate صدا زده می شود:
مثال (محل قرارگیری کدهای JavaScript)
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
خودتان امتحان کنید »
همچنین در مثال ساده زیر، هنگامی که روی دکمه "Try it" کلیک شود، محتوای عنصر با شناسه "demo" تغییر می کند:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
خودتان امتحان کنید »
یک تابع JavaScript در قسمت <body>
Wiki
در این مثال، تابع "myFunction" در انتهای <body> قرار داده شده است و وقتی کاربر روی دکمه "Try it" کلیک کند، myFunction صدا زده می شود:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
خودتان امتحان کنید »
استفاده از یک فایل JavaScript خارجی
Wiki
کدهای JavaScript را همچنین می توان در یک فایل خارجی قرار داد.
فایل های خارجی JavaScript اغلب شامل کدهایی است که در چندین صفحه HTML مختلف استفاده می شود.
این فایل ها را باید با فرمت "js." ذخیره نمود.
توجه: اسکریبت خارجی نمی تواند شامل تگ های باز و بسته <script> و <script/> باشد.
برای استفاه از یک فایل اسکریبت خارجی در صفحه HTML، باید خصوصیت "src" تگ <script> را با آدرس فایل، تنظیم کنید:
مثال (محل قرارگیری کدهای JavaScript)
<!DOCTYPE html>
<html>
<body>
<script src="/myScript.js"></script>
</body>
</html>
خودتان امتحان کنید »

تگ	توضیح
<a>	یک ancher را تعریف می کند.

مقدمه آموزش HTML

HTML

آموزش HTML (اچ تی ام ال) - مقدمه HTML (اچ تی ام ال)

Wiki

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

در این خود آموز، مطالبی را در مورد HTML (اچ تی ام ال) آموزش خواهید دید.

یاد گیری HTML (اچ تی ام ال) کار آسانی است و از آموزش آن لذت خواهید برد.

آموزش HTML (اچ تی ام ال) همراه با صدها مثال

Wiki

در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.

به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید.

مثال (مقدمه آموزش HTML)

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

خودتان امتحان کنید »

برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.

HTML چیست؟

Wiki

HTML یک زبان برای توصیف صفحات وب است.

HTML بترتیب سرنام واژگان Hyper Text Markup Language بحساب می آید. (زبان علامت گذاری ابر متن)
HTML یک زبان برنامه نویسی نیست بلکه زبان علامت گذاری است.
یک زبان علامت گذاری مجموعه ای از تگ ها می باشد.
HTML از تگ ها برای توصیف صفحات وب استفاده می کند.

آموزش تگ های HTML

Wiki

تگ های HTML، کلید واژه هایی هستند که داخل علامت کوچکتر بزرگتر هستند. مثل <HTML>
تگ های HTML معمولا به صورت جفت می آیند.
تگ اول همان تگ شروع می باشد و تگ دوم نیز همان تگ پایان است.
تگ های شروع و پایان، تگ باز و بسته نیز نامیده می شود.

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

Wiki

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

هدف یک مرورگر وب (مانند internet explorer یا firefox) این است که سندهای HTML را خوانده و آنها را به صورت صفحات وب نمایش دهد. مرورگر، تگ های HTML را نمایش نمی دهد، اما از تگ های HTML استفاده می کند تا محتوای صفحه را تفسیر کند.

مثال:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

توضیح مثال:

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

آموزش تصویری مطلب بالا (فیلم آموزش HTML)
درس شماره 1 (مقدمه آموزش HTML) زمان فیلم: 11:48
خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)

میزبانی وب سایت چیست؟

برای اینکه وب سایت خود را به جهانیان ارائه کنید، باید آنرا روی یک سرور وب قرار دهید.
میزبانی وب سایت (Hosting)
Wiki
یکی از انتخاب های شما برای میزبانی این است که وب سایتتان را روی سروری که متعلق به خودتان است قرار دهید. در اینجا چند نکته وجود دارد که باید در نظر بگیرید:
1- هزینه های سخت افزاری
برای اینکه یک وب سایت "واقعی" را راه اندازی کنید، باید مقداری از تجهیزات سروری قدرتمند را خریداری کنید. انتظار هزینه کمی را نداشته باشید. همچنین به یک ارتباط همیشگی (24 ساعته) و با سرعت بالا نیاز دارید.
2- هزینه های نرم افزاری
به یاد داشته باشید که server-licenses اغلب بالاتر از client-licenses می باشد. همچنین توجه داشته باشید که server-licenses ممکن است به چند کاربر محدود شوند.
3- هزینه نیروی کار
هزینه کمی را برای نیروی کار توقع نداشته باشید. شما باید سخت افزار و نرم افزارتان را نصب کنید. همچنین با ویروس ها و باگ ها نیز سروکار دارید. و باید سرورتان را همیشه در محیطی در حال کار نگه دارید که "هر چیزی ممکن است اتفاق بیفتد".
استفاده از یک تامین کننده سرویس اینترنتی(Internet Service Provider)
Wiki
اجاره کردن سرور از یک (Internet Service Provider (ISP گزینه ای متداول است.
بیشتر شرکت های کوچک وب سایت خود را بر روی سروری که توسط یک ISP ارائه می گردد ذخیره می کنند. این کار مزایایی دارد:
1- سرعت اتصال
بیشتر ISPها سرعت خوبی در اتصال به اینترنت دارند.
2- سخت افزار قوی
ISPها اغلب سرور های قدرتمندی دارند که می توان آنها را با چندین شرکت به اشتراک گذاشت. همچنین می توان توقع داشت که load balancing و سرور بک آپ گیری کارآمدی داشته باشند.
3- امنیت و پایداری
ISP ها مخصوص میزبانی از وب هستند. انتظار داشته باشید که سرورهای آن ها 99% زمان up باشند، جدیدترین بسته های نرم افزاری و بهترین امنیت در مقابل ویروس ها را داشته باشند.
مواردی که در کار با ISP باید در نظر بگیرید
Wiki
1- پشتیبانی 24 ساعته
مطمئن شوید که ISP، پشتیبانی 24 ساعته داشته باشد. خود را در شرایطی قرار ندهید که برای حل مشکلات بحرانی، منتظر رسیدن روز کاری بعد شوید.
2- بک آپ گیری روزانه
مطمئن شوید که ISP به صورت روزانه، بک آپ گیری می کند در غیر این صورت ممکن است داده های با ارزشی را از دست بدهید.
3- حجم ترافیکی
محدودیت حجم ترافیکی ISP را مورد مطالعه قرار دهید. مطمئن شوید که اگر سایت شما محبوب و پربیننده شد نباید هزینه اضافی بایت حجم ترافیکی بالا پرداخت کنید.
4- پهنای باند یا محدودیت های محتوا
پهنای باند و محدودیت های محتوایی ISP را مورد بررسی قرار دهید. اگر طرحی برای انتشار مجموعه ای از عکس ها و یا فایل های ویدئویی یا صوتی را دارید مطمئن شوید که محدودیتی در این زمینه وجود ندارد.
5- قابلیت های E-mail
مطمئن شوید ISP مورد نظرتان قابلیت های ایمیلی که نیاز دارید را پشتیبانی کند.
6- دسترسی به پایگاه داده
اگر قصد دارید از پایگاه داده ها در وب سایت خود استفاده کنید، مطمئن شوید که ISP مورد نظر، امکان دسترسی به پایگاه داده را پشتیبانی می کند.
نمایش ویدئوهای youtybe در HTML

اگر فیلترینگ را در نظر نگیرید، راحت ترین روش برای نمایش ویدئو در HTML استفاده از YouTube می باشد.
نمایش فایل های ویدئویی YouTybe در HTML
Wiki
اگر می خواهید ویدئویی را در صفحه وب نمایش دهید، می توانید فایل آنرا در YouTube قرار دهید (Upload) و از کد HTML زیر برای نمایش ویدئو در صفحه وبتان استفاده نمایید:
مثال - YouTube iFrame
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
خودتان امتحان کنید »
مثال - YouTube Embedded
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
خودتان امتحان کنید »

صفحه3 از3

تبلیغات

آموزش ASP.NET Core

آموزش برنامه نویسی

سرور اختصاص ایران سرور

دسته‌بندی‌ها

بیاموز SAP ERP

بیاموز طراحی وب

بیاموز برنامه‌نویسی

نرم‌افزارهای کاربردی

شبکه و سیستم‌عامل

دروس دانش‌آموزی

بیاموزهای متفرقه

html

چه چیزی نیاز دارید.

نگارش HTML

وب آزمایشی خود را ایجاد کنید.

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

پسوند HTM یا HTML

آموزش تصویری مطلب بالا (فیلم آموزش HTML)

HTML DOM Nodes

The Attr Object

The NamedNodeMap Object

پشتیبانی مرورگرها

خصوصیت ها و متدها

DOM 4 اخطار !!!

مولتی مدیا چیست؟

پشتیبانی مرورگرها از مولتی مدیا

فرمت های مولتی مدیا

فرمت های ویدئویی

فرمت های صوتی

از چه فرمتی استفاده کنیم؟

مثال - خودتان امتحان کنید

صفحه بندی وب سایت ها

صفحه بندی با استفاده از عناصر <div>

مثال (صفحه بندی در HTML)

Main Title of Web Page

مثال - خودتان امتحان کنید

صفحه بندی با استفاده از جداول

مثال (صفحه بندی در HTML)

Main Title of Web Page

نکات مهم

تگ های صفحه بندی در HTML

عناصر Block

عناصر Inline

عنصر <div>

عنصر <span>

تگ های گروه بندی

عنوان ها (Heading)

مثال (عناصر پایه ای در HTML)

پاراگراف (Paragraph)

مثال (عناصر پایه ای در HTML)

لینک ها (Link)

مثال (عناصر پایه ای در HTML)

تصاویر (Image)

مثال (عناصر پایه ای در HTML)

آموزش تصویری مطلب بالا (فیلم آموزش HTML)

عناصر (Element)

نحوه نوشتن یک عنصر در HTML

عناصر تو در تو در HTML

مثالی از یک سند HTML

1- عنصر <p>

2- عنصر <body>

3- عنصر <html>

تگ پایان را فراموش نکنید

عناصر تهی

نکته: تگ ها را با حروف کوچک بنویسید

مثال - خودتان امتحان کنید

عنصر <head> در HTML

عنصر <title> در HTML

یک سند ساده HTML

عنصر <base> در HTML

عنصر <link> در HTML

عنصر <style> در HTML

عنصر <meta> در HTML

کلمات کلیدی برای موتورهای جستجو

عنصر <script> در HTML

بخش Head

عنوان ها در HTML

مثال (عنوان یا سرتیتر در HTML)

سرتیترها عناصر مهمی هستند

ایجاد خطوط افقی در HTML

مثال (عنوان یا سرتیتر در HTML)

توضیحات (Comment ها) در HTML

مثال (عنوان یا سرتیتر در HTML)