طراحی سایت شرکتی با کنترل پنل اختصاصی تحویل فوری - 250 هزار تومان اطلاعات بیشتر

شروع طراحی سایت با Html

آموزش Html

آموزش Html,HTML,TAG,تگ,HTML5,ساختار HTML

شروع طراحی سایت با Html

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

ویژگیهای جدید HTML5

جالب ترین عناصر HTML5 جدید عبارتند از:
عناصر معنایی جدید مانند <header>، <footer>، <article>، و <section>.
ویژگی های جدید عناصر فرم مانند شماره، تاریخ، زمان، تقویم و محدوده.
عناصر گرافیکی جدید: <svg> و <canvas>.
عناصر چند رسانه ای جدید: <audio> و <video>.

شروع کار با HTML

برای شروع نیاز به نرم افزار خاصی ندارید و تنها کافی است کدها را در NotePadیادداشت کنید البته در نرم افزارهای زیادی مثل DreamWeaver,Visual Studio.Net, Bracketهم میتوانید از این کدها بهره ببرید. اما در ابتدای آموزش با همان NotePadآغاز می کنیم.

ساختار کلی زبان HTML

ساختار اولیه به شکل زیر می باشد.

<!Document html>
<html>
<head>
</head>
<body>
</body>
</html>


هر عنصر در زبان html را تگ (tag)می گویند. تگها در <>قرار می گیرند که به اصطلاح به Opening Tag معروفند و با </>بسته می شود که به Closing Tagمعروفند. یعنی هر تگ یکبار باز و یکبار بسته می شود. به جز تعداد محدودی از تگ ها مانند <hr> و <img/> که نیاز به Closing Tag ندارند تگ hr یک خط افقی می اندازد و تگ img  تصویر مد نظر را نمایش می دهد.
حال به توضیح ساختار بالا می پردازیم.
Document html! مشخص می کند که سندی که ایجاد می کنیم سند htmlاست.
html مشخص می کنیم کدهای نوشته شده به زبان html است.
head در این بخش اطلاعات اولیه سایت اعم از نام نویسنده، توضیح مختصر در مورد موضوع اصلی سایت، عنوان سایت و غیره را ذکر میکنیم.
Body به معنای بدنه سایت است هر چه را بخواهید به کاربر نمایش دهید در این بخش قرار می دهید.
 لیست کامل از تگ های HTML
<a>
برای ايجاد يک لنگر به کار می رود
<abbr>
برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود
<acronym>
برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود
در HTML5 پشتیبانی نمی‌شود. از تگ <abbr> استفاده کنید
<address>
برای نوشتن يک آدرس در متن به کار می رود
<applet>
برای فراخوانی برنامه های کوچک جاوا که سمت کاربر اجرا می شود کاربرد دارد
در HTML5 پشتیبانی نمی‌شود. از تگ‌های <embed> یا <object> استفاده کنید
<area>
مشخص کننده يک ناحيه در نقشه های تصويری است
<article>
برای تعیین یک هدر یا عنوان (متن مجزا از سایر محتویات صفحه) کاربرد دارد
<aside>
محتوایی جدا از محتوایی که در آن قرار داده شده تعریف می کند
<audio>
برای قرار دادن و اجرای فایل های صوتی در صفحات وب کاربرد دارد
<b>
برای توپر کردن نوشته ( Bold ) به کار می رود
<base>
برای تعيين خواص پايه در يک صفحه به کار می رود
<basefont>
رنگ، سایز و فونت را به تمام متون سند اختصاص می‌دهد
در HTML5 پشتیبانی نمی‌شود. از CSS استفاده کنید
<bdi>
بخشی از متن که جهتش با مابقی متن متفاوت است را جدا می‌کند
<bdo>
قلم نوشته را به صورت نوشته های محيط های کدنويسی کامپيوتر در می آورد
<big>
باعث بزرگتر نمايش داده شدن نوشته در يک متن می شود
در HTML5 پشتیبانی نمی‌شود. از CSS استفاده کنید

<blockquote>
برای ايجاد يک نقل قول به کار می رود
<br>
برای ايجاد يک خط جديد به کار می رود
<button>
برای ايجاد دکمه های وب به کار می رود
<canvas>
رسم گرافیک‌های شناور از طریق برنامه نویسی (معمولا زبان JavaScript)
<caption>
برای تعيين عنوان يک جدول به کار می رود
<center>
متن را در وسط تراز می کند
در HTML5 پشتیبانی نمی‌شود. از CSS استفاده کنید
<cite>
برای نمايش نوشته به صورت کج به کار می رود
<code>
برای نمايش متن همانند محيط های برنامه نويسی به کار می رود
<col>
برای دسته بندی گروهی از ستون های يک جدول به کار می رود
<colgroup>
برای دسته بندی گروهی از ستون های يک جدول به کار می رود
<datalist>
یک لیست از چند آیتم را برای یک کنترل <input> تعیین می‌کند
<dd>
برای ايجاد ليست های معنی دار به کار می رود
<del>
برای نمايش متن حذف شده درصفحه به کار می رود
<details>
جزئیات اضافی که کاربر می تواند مشاهده یا مخفی نماید
<dfn>
یک برچسب که عبارت است و یک اصطلاح تعریفی را مشخص می‌کند
<dialog>
یک باکس یا کادر محاوره ای تعریف می کند
<dir>
برای لیست کردن عناوین directory (راهنما) استفاده می شود
<div>
برای تقسيم فضا در صفحات وب به کار می رود
<dl>
برای ايجاد ليست های معنی به کار می رود
<dt>
برای ايجاد ليست های معنی به کار می رود
<em>
برای نمايش نوشته های مهم و به صورت کج به کار می رود
<embed>
یک قالب برای برنامه خارجی و یا محتوای تعاملی را تعریف می‌کند
<fieldset>
برای ايجاد يک کادر به دور محتويات خود به کار می رود
<figcaption>
برای تعیین عنوان یا توضیح برای تگ <fiqure> استفاده می‌شود
<figure>
برای تعیین یک محتوی مجزا مثل عکس، لیست ها و… کاربرد دارد
<font>
فونت، رنگ و اندازه برای متن تعریف می‌کند
<footer>
یک پانویس برای یک سند یا یک بخش تعریف می کند
<form>
برای ايجاد يک فرم در صفحه به کار می رود
<frame>
یک پنجره (قاب) در یک frameset را تعریف می کند
<frameset>
صفحات وب متعددی را می تواند در پنجره مرورگر نمایش دهد
<h1>
تگ هدینگ سطح 1
<h2>
تگ هدینگ سطح 2
<h3>
تگ هدینگ سطح 3
<h4>
تگ هدینگ سطح 4
<h5>
تگ هدینگ سطح 5
<h6>
تگ هدینگ سطح 6
<header>
به یک بخش یا سند، یک هدر اختصاص می دهد
<hr>
برای ايجاد يک خط در عرض صفحه به کار می رود
<i>
برای نمايش نوشته به صورت کج به کار می رود
<iframe>
برای نمایش صفحه وب، درون یک صفحه وب دیگر استفاده می‌شود
<img>
برای قرار دادن تصوير در صفحه به کار می رود
<input>
برای ساختن انواع کتنرل های HTML به کار می رود
<ins>
برای مشخص کردن متن های جديد وارد شده در يک صفحه به کار می‌رود
<kbd>
برای نمايش متن همانند محيط های برنامه نويسی به کار می رود
<keygen>
یک مولد کلیدی جفت، مورد استفاده برای فرم ها ایجاد می کند
<label>
برای ايجاد يک عنوان ( نماد متنی ) در صفحه به کار می رود
<legend>
برای ايجاد عنوان يک کادر fieldset به کار می رود
<li>
برای تعريف يک آيتم در ليست به کار می رود
<link>
برای برقراری ارتباط بين صفحه با يک فايل خارجي به کار می‌رود
<main>
جهت تعیین بدنه اصلی محتوا مورد استفاده قرار می گیرد
<map>
برای ايجاد يک نقشه تصويری به کار می رود
<mark>
متن علامت گذاری شده را مشخص می کند
<menu>
یک لیست یا منو از دستورات تعریف می کند
<menuitem>
معرفی یک آیتم دستوری یا آیتم منو که کاربر میتواند از منوی popup آن را فراخوانی کند
<meta>
در بر گيرنده اطلاعات کلی درباره محتويات يک صفحه جهت استفاده موتورهای جستجو است
<meter>
یک اندازه گیری یا مقدار اعشاری را در بازه‌ای مشخص تعریف می‌کند
<nav>
مجموعه ای از لینک های ناوبری را تعریف می کند
<noframes>
جایگزین برای مرورگرهایی است که از تگ <frame> پشتیبانی نمی‌کنند
<noscript>
برای تعيين جايگزين يک اسکريپت در يک صفحه به کار می رود
<object>
برای پيوند يک شی خارجی با صفحه به کار می رود
<ol>
برای ايجاد ليست های ترتيبی به کار می رود
<optgroup>
برای دسته بندی گزينه های يک ليست به کار می رود
<option>
برای ايجاد يک ليست در صفحه به کار می رود
<output>
نتیجه یک محاسبه را نمایش می دهد
<p>
برای ايجاد يک پاراگراف در صفحه به کار می رود
<param>
برای تعيين تنظيمات، زمان اجرای يک شی خارجی در صفحه به کار می رود
<pre>
برای نمايش متن به همان صورت اوليه به کار می رود
<progress>
نشان دهنده پیشرفت یک پروسه یا کار است
<q>
برای ايجاد يک نقل قول به کار می رود
<ruby>
حاشیه نویسی ruby را مشخص می‌کند
<samp>
برای نمايش متن همانند محيط های برنامه نويسی به کار می رود
<script>
برای تعيين يک اسکريپت در صفحه به کار می رود
<section>
برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می‌شود
<select>
برای ايجاد يک ليست باز شو به کار می رود
<small>
برای نمايش متن به صورت کوچکتر به کار می رود
<source>
برای مشخص کردن منابع گوناگون برای عناصر مدیا بکار می‌رود
<span>
برای تقسيم متن به کار می رود
<strong>
برای نمايش درشتر متن به کار می رود
<style>
برای قالب بندی تگ های HTML و صفحات به کار می رود
<sub>
برای ايجاد يک زير نويس به کار می رود
<sup>
برای ايجاد يک انديس به کار می رود
<table>
برای ايجاد جداول به کار می رود
<tbody>
شامل محتويات و بدنه اصلی يک جدول می شود
<td>
برای ايجاد يک خانه جدول به کار می رود
<textarea>
برای ايجاد يک کادر متن به کار می رود
<tfoot>
برای تعيين عنوان انتهای يک جدول به کار می رود
<th>
برای ايجاد يک سر عنوان برای جدول به کار می رود
<thead>
برای ايجاد يک سر عنوان برای جدول به کار می رود
<time>
تاریخ / زمان قابل خواندن برای انسان تعریف می کند
<title>
برای ايجاد متن tooltip درباره عناصر به کار می رود
<tr>
برای ايجاد يک سطر جدول به کار می رود
<track>
آهنگ های متن برای عناصر رسانه ای را مشخص می کند
<tt>
باعث نمايش متن به صورت نوشته های تلگراف می شود
<u>
برای خط زيردار کردن نوشته به کار می رود
<ul>
برای ايجاد ليست های نشانه ای به کار می رود
<var>
برای نمايش متن همانند محيط های برنامه نويسی به کار می رود
<video>
مشخص کننده ویدئو مانند کلیپ فیلم و یا دیگر جریان های ویدئویی است
<wbr>
مشخص می کند که در کجای متن خوب است یک line-break اضافه کنیم( جلوگیری از شکستن کلمه)

 

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود