آموزش HTML 5 - جلسه اولReviewed by قاسم محمدرضایی on Jan 18Rating: 5.0آموزش HTML 5 – جلسه اولHTML یک زبان نشانه گذاری است ، به این معنی که بخش های مختلف توسط اجزایی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . این تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود .

HTML 5 جلسه اول

قبل از شروع آموزش به نکات زیر توجه فرمایید.

  • با HTML می توانید وب سایت خود را ایجاد کنید.
  • این آموزش به شما چیزهایی را درباره HTML می آموزد.
  • HTML آسان برای یادگیری است .

مثالها در هر فصل
این سری آموزشی HTML 5 حاوی صدها مثالخواهد بود. پس نگران نباشید.

خب برای جلسه اول نیاز هست که یکسری اطلاعات اولیه رو بدونید.

HTML چیست؟

عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کلیه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهایت به کدهای HTML تبدیل شده و توسط مرورگر نمایش داده می شوند.به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد اچ تی ام ال تبدیل میکنند و برای مرورگر میفرستند تا به کاربران نمایش داده شود.

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

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

هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یابرقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین ، تصاویر ،فهرست‌ها ، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است که در بخش آموزش Css به طور کامل به آن خواهیم پرداخت.

امیدواریم در این سلسله آموزش های جامع Html  به درک درستی از اچ تی ام رسیده و پایه ی طراحی سایت را که همان کدهای Html می باشد را به طور درست فراگرفته و به کار ببرید.

حال لیستی از تگ های HTML را برای شما آماده کرده ایم.

تگ کاربرد
<!–…–> برای قرار دادن کامنت یا توضیح در کد می باشد
<!DOCTYPE> نوع سند را تعریف می کند
<a> یک لینک را تعریف می کند
<abbr> یک مخفف را تعریف میکند
<acronym> در HTML5 پشتیبانی نمی شود به جای آن از <abbr> استفاده کنید.
یک مخفف را تعریف می کند
<address> در بخش تماس با ما جهت آدرس میتوان استفاده کرد.
<applet> در HTML5 پشتیبانی نمی شود از <embed> یا <object> به جای آن استفاده کنید.
اپلت کد جاسازی شده را تعریف می کند
<area> یک منطقه را در یک نقشه تصویر تعریف می کند
<article> یک مقاله را تعریف می کند
<aside> مطالب را جدا از محتوای صفحه تعریف می کند ( برای نمایش ساید بار میتوان استفاده کرد )
<audio> برای پخش صدا در صفحه وب
<b> متن را تو پر میکند
<base> یک آدرس ( URL ) اصلی برای تمام آدرس های صفحه تعریف میکند
<basefont> در HTML5 پشتیبانی نمی شود به جای آن از CSS استفاده کنید.
رنگ پیش فرض، اندازه و فونت و… را برای تمام متن در یک سند مشخص می کند.
<bdi> بخشی از متن را که ممکن است در متن اصلی متفاوت از متن دیگر متنها باشد را از قالب بندی جدا می کند.
<bdo> جهت متن فعلی را تغییر می دهد
<big> در HTML5 پشتیبانی نمی شود به جای آن از CSS استفاده کنید.
متن را بزرگ می کند.
<blockquote> یک بخش را که از منبع دیگری نقل قول شده را تعریف میکند.
<body> تگ بدنه صفحه وب می باشد.
<br> یک خط خالی ایجاد میکند .
<button> یک دکمه ایجاد میکند.
<canvas> برای ایجاد گرافیک استفاده میشود همرا با جاوا اسکریپت
 <caption>  عنوان جدول را تعریف میکند
 <center>  در HTML5 پشتیبانی نمی شود به جای آن از CSS استفاده کنید.
متن را وسط چین می کند.
 <cite>  عنوان کار را مشخص میکند.
 <code>  برای قرار دادن کد
 <col>  خواص ستون را برای هر ستون  در  عنصر <colgroup> مشخص می کند
<colgroup> یک گروه از یک یا چند ستون را در یک جدول برای قالب بندی مشخص می کند
<datalist> لیستی از گزینه های از پیش تعیین شده برای کنترل های ورودی را مشخص می کند
<dd> یک توضیح را برای یک عبارت در یک لیست تعریف می کند
<del> متنی را تعریف می کند که از یک سند حذف شده است
<details> مشخصات اضافی را که کاربر می تواند مشاهده یا پنهان کند تعریف می کند
<dfn> نشان دهنده نمونه تعریف یک اصطلاح است
<dialog> یک کادر محاوره یا پنجره را تعریف می کند
<dir> در HTML5 پشتیبانی نمی شود به جای آن از <ul> استفاده کنید.
یک لیست فهرست را تعریف می کند
<div> یک بخش را در یک صفحه وب تعریف می کند.
<dl> یک لیست توضیح را تعریف می کند.
<dt> یک اصطلاح / نام را در یک لیست توضیح تعریف می کند.
<em> متن را برجسته  می کند.
<embed> یک محدوده برای یک برنامه خارجی (غیر HTML) تعریف می کند.
<fieldset> عناصر را در یک گروه در یک فرم گروه بندی میکند.
<figcaption> یک عنوان را برای عنصر <figure> تعریف می کند
<figure> محتوای خوددار را مشخص می کند
<font> در HTML5 پشتیبانی نمی شود به جای آن از CSS استفاده کنید.
فونت، رنگ و اندازه متن را تعریف می کند
<footer> بخش فوتر صفحه وب را تعریف می کند
<form> یک فرم برای دریافت اطلاعات از کاربر ایجاد میکند
<frame> در HTML5 پشتیبانی نمی شود.
یک پنجره (یک قاب) را در یک مجموعه فریم تعریف می کند.
<frameset> در HTML5 پشتیبانی نمی شود.
مجموعه ای از فریم ها را تعریف می کند.
<h1> to <h6> عنوان های HTML را تعریف می کند.
<head> اطلاعات مربوط به یک صفحه وب یا بخش را تعریف می کند.
<header> هدر یک صفحه وب را تعریف می کند.
<hr> یک خط افقی ایجاد میکند.
<html> ریشه یک سند HTML را تعریف می کند.
<i> بخشی از متن را در صدا یا حالت متناوب تعریف می کند.
 <iframe>  یک قاب درونی را تعریف می کند.
 <img>  برای نمایش عکس استفاده میشود.
 <input>  یک کنترل دریافتی از کاربر ایجاد میکند مانند جعبه متن و…
 <ins>  یک متن را که در یک سند قرار داده شده تعریف می کند.
 <kbd>  ورودی صفحه کلید را تعریف می کند.
 <label>  یک برچسب برای عنصر <input> تعریف می کند
 <legend>  یک عنوان را برای عنصر <fieldset> تعریف می کند
<li> یک آیتم برای لیست تعریف می کند
<link> رابطه بین یک سند و یک منبع خارجی را تعریف می کند (بیشترین استفاده را برای ایجاد ارتباط با صفحه ما و فایل های استایل دهی و جاوا اسکریپت دارد.)
<main> محتوای اصلی یک صفحه وب را مشخص می کند.
<map> نقشه تصویری سمت کاربر را تعریف می کند.
<mark> متن را مشخص / برجسته تعریف می کند.
<menu> لیستی از دستورات را تعریف می کند.
<menuitem> یک آیتم فرمان / منوی را که کاربر می تواند از یک منوی پنجره فراخوانی کند تعریف می کند
<meta> متادیتا را در مورد یک سند HTML تعریف می کند
 <meter>  اندازه گیری اسکالر را با یک محدوده شناخته شده تعریف میکند (برای نمایش یک مقیاس)
<nav> لینک های ناوبری را تعریف می کند.
<noframes> در HTML5 پشتیبانی نمی شود
یک محتوای جایگزین را برای کاربرانی که فریم را پشتیبانی نمی کنند تعریف می کند
<noscript> یک محتوای جایگزین برای کاربرانی که از اسکریپت های سمت سرویس پشتیبانی نمی کنند، تعریف می کند.
<object> یک شی را تعریف می کند.
<ol> یک لیست مرتب شده را تعریف می کند.
<optgroup> یک گروه از گزینه های مرتبط را در لیست کشویی تعریف می کند.
<option> یک گزینه را در لیست کشویی تعریف می کند.
<output> نتیجه محاسبات را تعریف می کند.
<p> یک پاراگراف تعریف میکند.
<param> یک پارامتر را برای یک شی تعریف می کند.
<picture> یک فضا را برای عکس ها با منابع چندگانه تعریف می کند.
<pre> متن را همانطور که هست نمایش میدهد . ( برای نمایش کد ها استفاده بیشتری دارد )
<progress> نشان دهنده پیشرفت یک کار است.
<q> یک نقل قول کوتاه را تعریف می کند
<rp> آنچه را که در مرورگرهایی که تفسیر ruby را پشتیبانی نمی کنند تعریف می کند
<rt> توضیح / تلفظ شخصیت ها را تعریف می کند (برای تایپوگرافی شرق آسیا)
<ruby> تفسیر ruby (برای تایپوگرافی شرق آسیا) را تعریف می کند
<s> متنی را تعریف می کند که دیگر درست نیست ( متن را خط میزند )
<samp> خروجی نمونه را از یک برنامه کامپیوتری تعریف می کند
<script> یک اسکریپت را تعریف میکند.
<section> یک بخش را در صفحه وب تعریف میکند.
<select> یک لیست کشویی را تعریف می کند.
<small> متن را کوچک میکند.
<source> منابع رسانه را به صورت چندگانه برای عناصری مانند (<ویدیو> و <صوتی>) تعریف می کند.
<span> یک بخش را در یک سند تعریف می کند.
<strike> در HTML5 پشتیبانی نمی شود  از <del> یا <s> استفاده کنید. روی متن خط میزند.
<strong> متن را مهم جلوه میدهد ( برای موتور های جستوجو مانند گوگل )
<style> میتوان یک استایل برای یک بخش یا کنترل در صفحه وب بصورت داخلی نوشت.
<sub> متن توصیفی را تعریف می کند ( برای نوشتن فرمول های ریاضی )
<summary> یک عنوان قابل مشاهده برای عنصر <جزئیات> را تعریف می کند
<sup> متن فوق متن را تعریف می کند ( برای نوشتن فرمول های ریاضی )
<table> یک جدول ایجاد میکند.
<tbody> محتویات بدنه یک جدول را در خود جای میدهد
<td> یک سلول در جدول ایجاد میکند.
<template> یک قالب را تعریف می کند.
 <textarea>  یک کنترل ورودی چند خطی (جعبه متن) را تعریف می کند.
 <tfoot>  محتویات فوتر یک جدول را در خود جای میدهد .
<th> یک سلول هدر را در یک جدول تعریف می کند
<thead> محتویات فوقانی یک جدول را در خود جای میدهد .
<time> برای نمایش ساعت استفاده میشود. ( مثلا برای باز بودن محل کار از ساعت ۸:۰۰ تا ۵:۰۰ عصر )
<title> عنوان صفحه وب را تعریف میکند.
<tr> یک سطر در جدول ایجاد میکند.
<track> برای نمایش متن مثل زیرنویس یا عنوان آهنگ یا متن آهنگ.
<tt> در HTML5 پشتیبانی نمی شود از CSS استفاده کنید.
متن را به صورت تایپ ماشینی نمایش میدهد.
<u> متن را زیرخط دار میکند.
<ul> یک لیست را تعریف می کند.
<var> یک متغییر ایجاد میکند.
<video> یک فیلم یا ویدئو را نمایش میدهد.
<wbr> خط را میشکند.
There are no products