HTML به زبانی اطلاق می شود که سنگ بنای صفحات وب سایت می باشد. عموما تمامی زبانهای برنامه نویسی تحت وب، به نوعی وابسته به زبان HTML می باشند. بعنوان مثال، PHP، جاوا اسکریپت و زبان برنامه نویسی دات نت، زبانهایی هستند که علاوه بر داشتن قوانین و استانداردهای خود، از زبان HTML کمک می گیرند بطوریکه کدهای نوشته شده در قالب خاصی، در بین کدهای HTML قرار داده می شود.
HTMLزبانی می باشد که از زبان XML مشتق شده است. به این معنی که می توان گفت HTML نوع بخصوصی از زبان XML می باشد . XML زبانی است که سنگ بنای آن، تگ می باشد. تگ، همانند پرانتزی می باشد که می توان آن را باز کرد، درون آن چیزی قرار داد و سپس آن را بست. این تگها، می توانند هر اسمی داشته باشند و زبان XML آزادی کاملی را در این خصوص به شما داده است.
همانطور که گفته شد، HTML زبانی است که از تگ ها تشکیل شده است. به این مفهوم که هر تگ در زبان HTML معنا و مفهوم خاص خود را دارد و اصطلاحا به این کار، نشانه گذاری گفته می شود.
بعنوان مثال در زبان HTML چنانچه بخواهید متنی را بولد نمایید از کد زیر استفاده می نمایید:
</br>این یک متن بولد است<br>
همانطور که ملاحظه می فرمایید، تگها با روش خاصی مشخص می شوند. تگ b در این مثال، در ابتدا باز می شود، درون آن چیزی قرار داده می شود، و سپس با "/" بسته می شود. درست همانند پرانتزها در یک عملیات ریاضی پیچیده که پرانتزها می توانند تو در تو باشند، تگها نیز می توانند به تعداد دلخواه تو در تو باشند. اصطلاحا به این عملیات indent گفته می شود.
آموزش ابتدایی HTML:
درس اول:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Doctype نوع را مشخص می کند. تگ صفحه وب را مشخص می کند. مشخص کننده قسمتی از صفحه است که نمایش داده می شود.<h1>تیتر یا heading را نمایش می دهد. و<p>یک پاراگراف را نمایش می دهد.
هر تگی در HTML باز می شود بایر حتما بسته شود.
<tagname>content</tagname>
محتوای بین دو تگ در صفحه وب نمایش داده می شود.
ورژن های مختلفی برایHTML در طی سال ها ایجاد شده است.
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
زمانی می توانیم یک صفحه وب را درست و به طور کامل ببینیم که ورژن HTML آن را بدانیم. به ما کمک می کند که وب سایتمان را درست ببینیم به عنوان مثال:
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
برای نوشتن HTML می توان از ادیتورهای حرفه ای مثل Adobe Dreamweaver ،Microsoft Expression Web و CoffeeCup HTML Editor اسفاده کرد. همچنین می توان از (Notepad(PC یا (TextEdit(Mac نیز استفاده کرد.
برای شروع می توانید از Notepad استفاده کنیدو آن را با پسوند html. یا htm. ذخیره کنید.
<!DOCTYPE html>
<html>
<body>
<h1>My first heading</h1>
<p>My first paragraph.</p>
</body>
</html>
درس دوم:
تیتر (heading) در HTML:
از <h1> تا <h6> تایین می شود.مانند مثال زیر:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
-از heading برای بزرگتر کردن یا بولد کردن متنتان استفاده نکنید.
-موتور های جستجو برای دانستن محتوای سایت شما از تیترheading سایتتان استفاده می کنند، پس تیتر بسیار مهم است.
تگ پاراگراف در HTML به این صورت تعریف می شود. مثال:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
لینک ها متن ها یا عکس هایی هستند که با کلیک روی آنها می توان به یک صفحه دیگر یا به یک قسمت از همان صفحه پرش نمود.
لینک ها در HTML با تک نمایش داده می شوند:
<a href="http://www.samagraph.com">This is a link</a>
آدرس لینک در صفت href نوشته می شود. دقت داشته باشید که آدرس سایت درون " " قرار گرفته است. در سایت
This is a link نمایش داده می شود و با کلیک روی آن صفحه به آدرس مورد نظر انتقال داده می شود.
صفت target مشخص می کند که صفحه مورد نظر در کجا باز شود. در مثال زیر صفحه جدید در یک tab جدید باز خواهد شد.
<a href="http://www.samagraph.com/" target="_blank">Visit Samagraph</a>
عکس ها در HTML با تگ <img> نمایش داده می شوند.
<img src="w3schools.jpg" width="104" height="142">
اسم فایل با صفت src و اندازه فایل با width و height مقداردهی می شود.
<a name="tips">Useful Tips Section</a>
معمولا تگ های HTML می توانند درون یه قرار بگیرند مانند مثال زیر:
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
تگ پاراگراف درون تگ body و این دو درون تگ html هستند.
تگ <br> محتوا ندارد و باعث می شود یک خط فاصله ایجاد شود. این تگ بسته نمی شود.
حروف کوچک و بزرگ در html معنا ندارد و یکی است. مثلا<p> با <P> فرقی ندارد.
در زیر تعدادی از صفات رایج لیست شده است:
| Attribute | Value | Description |
| class | classname | Specifies a classname for an element |
| id | id | Specifies a unique id for an element |
| style | style_definition | Specifies an inline style for an element |
| title | tooltip_text | Specifies extra information about an element (displayed as a tool tip) |
تگ<hr>یک خط افقی در صفحه html ایجاد می نماید که می تواند برای جدا سازی محتوای سایت به کار رود.
| درمثال روبرو بعد از هر پاراگراف یک خط افقی دیده می شود. | <p>This is a paragraph</p> <hr><p>This is a paragraph</p> </hr><p>This is a paragraph</p> |
توضیحات در html فقط برای گویاتر شدن کد هستند و در صفحه نمایش داده نمی شوند. توضیحات به این صورت نشان داده می شوند:
<!-- This is a comment -->
شما می توانید html یک سایت را با کلیک راست و انتخاب view source ببینید.
درس سوم:
مثالی برای تعدادی از صفات :
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
خروجی:
This text is bold
This text is big
This text is italic
This is computer output
This is subscript and superscript
| Tag | Description |
| <b> | Defines bold text |
| <big> | Defines big text |
| <em> | Defines emphasized text |
| <i> | Defines a part of text in an alternate voice or mood |
| <small> | Defines small text |
| <strong> | Defines strong text |
| <sub> | Defines subscripted text |
| <sup> | Defines superscripted text |
| <ins> | Defines inserted text |
| <del> | Defines deleted text |
| Tag | Description |
| <code> | Defines computer code text |
| <kbd> | Defines keyboard text |
| <samp> | Defines sample computer code |
| <tt> | Defines teletype text |
| <var> | Defines a variable |
| <pre> | Defines preformatted text |
| <abbr> | Defines an abbreviation |
| <acronym> | Defines an acronym |
| <address> | Defines contact information for the author/owner of a document |
| <bdo> | Defines the text direction |
| <blockquote> | Defines a section that is quoted from another source |
| <q> | Defines an inline (short) quotation |
| <cite> | Defines the title of a work |
| <dfn> | Defines a definition term |
تگ headمی تواند تگ های زیر را درونش داشته باشد:
<title>, <base>, <link>, <meta>, <script>,<style>
تگtitle در واقع جمله ای را که در بالای مرورگر نشان داده می شود را در خود دارد و این title است که در قسمت نتیجه موتورهای جستجو نمایش داده می شود.
تگbase آدرس پیش فرضی برای تمام لینک های صفحه ایجاد می کند:
<base href="http://www.samagraph/images/"><base target="_blank"></head>
تگ link ارتباط میان صفح با یک فایل خارجی را نشان می دهد. معمولا برای وصل کردن css خارجی به صفحه استفاده می شود.
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
درون تگ style می توان سبک نمایش محتویات صفحه را در مرورگر را قرار داد:
<head>
<style type=”text/css”>
{body {background-color:yellow
{p {color:blue
<style/>
<head/>
تگ meta اطلاعاتی در مورد صفحه در خود دارد. این اطلاعات در صفحه نمایش داده نمی شود ولی توسط موتورهای جستجو و وب سرویس ها قابل خواندن است. تگ meta شامل توضیحات، کلمات کلیدی، آخرین زمان به روز رسانی و اطلاعات دیگر است. این تگ حتما باید در تگ head تعریف شود.
برای نوشتن توضیحات:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML">
برای تعریف کلمات کلیدی:
<meta name="keywords" content="HTML, CSS, XML">
لیست آخرین مقالات سایت
18 دی 1391
:: هدف هکرها در سال 2013 چیست؟
ادامه ... 27 آذر 1391
:: بهترین شغل دنیای آی.تی در سال ۲۰۱۳
ادامه ... 27 آذر 1391
:: به زودی جستجو در اينترنت ۱۰۰ برابر سريعتر می‌شود.
ادامه ... 8 آذر 1391
:: دامین و هاست چیست؟
ادامه ... 8 آذر 1391
:: چرا از CMS استفاده می کنیم؟
ادامه ... 28 آبان 1391
:: امکانات جدید در جیمیل کار با جیمیل را راحت‌تر کرد.
ادامه ... 28 آبان 1391
:: نگاهی به نسخه دهم مرورگر Internet Explorer
ادامه ... 28 آبان 1391
:: مدیریت در مرز ایمیل و هرزنامه!
ادامه ... 28 آبان 1391
:: توضیحات مختصری در مورد windows 8
ادامه ... 28 آبان 1391
:: از مرورگر های قدیمی استفاده نکنید!
ادامه ... 28 آبان 1391
:: المپیک فناورانه متعلق به همه است.
ادامه ... 27 آبان 1391
:: HTML چیست؟
ادامه ... 22 آبان 1391
:: آیا ظرفیت اینترنت تمام می شود؟
ادامه ... 22 آبان 1391
:: CSS چیست؟
ادامه ... 21 آبان 1391
:: SEO چیست؟
ادامه ...