آموزش html5 (بخش سوم)

تگ ruby

این تگ حاوی حاشیه نویسی ruby ​​است. حاشیه نویسی روبی برای نمایش تلفظ کاراکترها و نشان دادن اشعار شخصیت های شرق آسیا مانند چینی ها و ژاپنی ها استفاده می شود

تگ ruby با تگ rt برای ایجاد حاشیه نویسی یا راهنمای تلفظ برای کلمات و عبارات استفاده می شود. متن پایه باید در برچسب ruby قرار گیرد حاشیه نویسی، محصور در برچسب rt، به عنوان متن کوچکتر بالای متن پایه ظاهر می شود.

<ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
(Kan)(ji)

تگ wbr

این تگ (Word Break Opportunity) یک موقعیت را درون متن مشخص می کند که در آن مرورگر ممکن است به صورت اختیاری یک خط را شکست دهد. هنگامی که یک کلمه بیش از حد طولانی باشد یا شما می ترسید که مرورگر ادامه آن کلمه را در خط بعد نمایش دهد می توانید از تگ استفاده کنید.

<p>The XML<wbr>Http<wbr>Request object is the key to AJAX.</p>

تگ audio

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

<audio controls="controls">
   <source src="birds.mp3" type="audio/mpeg">
   <source src="birds.ogg" type="audio/ogg">
   Your browser does not support the HTML5 Audio element.
</audio>

خصوصیت های تگ audio :

خصوصیتمقدارتوضیحات
controlscontrolsمشخص می کند که کنترل های صوتی نمایش داده شوند. (مانند دکمه play ،pause و غیره)
autoplayautoplayمشخص می کند که فایل صوتی مورد نظر به محض آماده شدن اجرا شود.
mutedmutedمشخص می کند که خروجی صدا خاموش باشد.
looploopمشخص می کند که فایل صوتی هر بار پس از اتمام، دوباره اجرا شود.
preloadauto – metadata – noneمشخص می کند که فایل صوتی در صورت نیاز چگونه بارگذاری شود.
srcURLURL مربوط به فایل صوتی را مشخص می کند.

تگ video

این تگ برای جاسازی محتوای ویدئویی در یک سند HTML بدون نیاز به هیچ پلاگین دیگری مانند فلش پلیر استفاده می شود. پشتیبانی از تگ video در مرورگرهای مختلف متفاوت است. در حال حاضر، سه فرمت ویدیویی اصلی وجود دارد که برای عنصر ویدیو پشتیبانی می شود: MP4، Ogg و WebM

<video controls="controls">
   <source src="shuttle.mp4" type="video/mp4">
   <source src="shuttle.ogv" type="video/ogg">
   Your browser does not support the HTML5 Video element.
</video>

خصوصیت های تگ video :

خصوصیتمقدارتوضیحات
widthpixelsپهنای پخش کننده ویدئو را تنظیم می کند.
heightpixelsارتفاع پخش کننده ویدئو را تنظیم می کند.
controlscontrolsبرای افزودن کنترل های play ،pause و صدا بکار برده می شود.
autoplayautoplayدر صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود.
looploopدر صورت وجود پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود.
mutedmutedمشخص کننده قطع صدا به طور پیش فرض برای ویدئو است.
posterURLمشخص کننده تصویری است که به عنوان پیش نمایش ویدئو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.
preloadauto – metadata – noneدر صورت وجود ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.

srcURLآدرس ویدئویی که باید پخش شود.

تگ source

این تگ برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند video و audio استفاده می شود.

تگ canvas

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

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
   window.onload = function(){
   var canvas = document.getElementById("myCanvas");
   var context = canvas.getContext("2d");
   context.moveTo(50, 150);
   context.lineTo(250, 50);
   context.stroke();
};
</script>

تگ embed

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

<embed src="blur.swf" width="400px" height="200px">

خصوصیت های تگ embed :

خصوصیتمقدارتوضیحات
width
pixels
مشخص کننده عرض موجود در تگ embed
heightpixelsمشخص کننده طول موجود در تگ embed
typemedia_typeمشخص کننده media type موجود در تگ
srcURLمشخص کننده آدرس فایل خارجی در تگ embed


تگ figure

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

<figure>
   <img src="designestan.png" alt="Designestan">
   <figcaption>Designestan Website</figcaption>
</figure>
designestan
Designestan Website

تگ figcaption

این تگ یک عنوان یا caption برای عنصر figure تعریف می کند.

<figure>
   <img src="discovery.jpg" alt="Space Shuttle">
   <figcaption>NASA - Space Shuttle Discovery</figcaption>
</figure>

آموزش html5 (بخش دوم)

تگ keygen

این تگ یک کلید رمزگذاری برای انتقال داده های رمز شده به یک سرور ایجاد می کند و برای فراهم کردن یک راه ایمن برای تایید هویت کاربران در فرم‌هایی نظیر ورود و ثبت نام می‌باشد. هنگامی که کاربر فیلد را پر می کند و ارسال می کند دو کلید یک کلید خصوصی و یک کلید عمومی ایجاد می شود. وقتی یک فرم HTML ارسال می شود، مرورگر یک جفت کلید ایجاد می کند و کلید خصوصی را در ذخیره سازی کلید محلی مرورگر ذخیره می کند و کلید عمومی را به سرور ارسال می کند.

<form action="process-key.php" method="post">
   <label>Username: <input type="text" name="username"></label>
   <label>Encryption: <keygen name="key"></label>
   <input type="submit" value="Submit">
</form>

تگ meter

این تگ برای اندازه گیری عددی یا مقدار کسری در محدوده شناخته شده تعریف می شود. این تگ به عنوان مقیاس نیز شناخته می شود.

<p>Disk Usage: <meter value="0.8">80%</meter></p>
<p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter
</p>
<p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>

Disk Usage: 80%

Total Score: 6 out of 10

Pollution Level: Very High

خصوصیت های تگ meter :

خصوصیتمقدارتوضیحات
formform-idیک یه چند فرم که تگ meter به آنها تعلق دارد را مشخص می کند.
lownumberرنجی که به عنوان یک مقدار کم مطرح شده است را مشخص می کند.
highnumberرنجی که به عنوان یک مقدارزیاد مطرح شده است را مشخص می کند.
minnumberرنجی برای مشخص کردن مقدار minimum
maxnumberرنجی برای مشخص کردن مقدار maximum
valuenumberاین خصوصیت الزامی است. مقدار رایج اندازه گیری را مشخص می کند.
optimumnumberمشخص می کند که برای اندازه گیری چه مقداری بهینه است.

تگ bdi

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

<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>

This arabic word ARABIC_PLACEHOLDER is automatically displayed right-to-left.

تگ mark

این تگ برای برجسته نشان دادن قسمتی از متن و highlight کرده آن قسمت مورد استفاده قرار می گیرد.

<p>This is some <mark>highlighted</mark> text.</p>
<p>Here are <mark>some more highlighted</mark> text.</p>

This is some highlighted text.

Here are some more highlighted text.

تگ output

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

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
   <input type="range" id="a" value="50"> +
   <input type="number" id="b" value="100"> =
   <output name="result" for="a b"></output>
</form>
+ =

تگ progress

این تگ نشان دهنده تکمیل پیشرفت یک کار است. این تگ به طور معمول برای نشان دادن اینکه چه مقدار از یک کار تکمیل شده است، مانند بارگذاری چیزی در یک صفحه یا روند ثبت نام استفاده می شود. به طور معمول به عنوان یک نوار پیشرفت نمایش داده می شود و اغلب به عنوان یک درصد از ۰ تا ۱۰۰٪ مشخص می شود.

<progress value="22" max="100"></progress>

تگ rp

این تگ تعریف می کند که چه چیزی نشان داده شود، اگر مرورگر از حاشیه نویسی ruby پشتیبانی نکند. حاشیه نویسی روبی برای نشان دادن تلفظ کاراکترهای شرق آسیا، مانند کاراکترهای چینی یا ژاپنی استفاده می شود.

<ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
(Kan)(ji)

تگ rt

این تگ برای توضیح یا تلفظ صحیح حروف (برای تایپوگراف شرق آسیا) در حاشیه نویسی ruby را مشخص می کند. تگ rt همراه با تگ rp و تگ ruby بکار برده می شود، تگ ruby شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ rt برای دادن اطلاعات و اختیار به تگ rp که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.

<ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
(Kan)(ji)

آموزش HTML5

HTML5 چیست؟

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

لیست تگ های حذف شده در html5 :

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

لیست تگ های اضافه شده در html5 :

<article>
<header>
<hgroup>
<footer>
<nav>
<section>
<summary>
<datalist>
<keygen>
<meter>
<bdi>
<mark>
<output>
<progress>
<rp>
<rt>
<ruby>
<wbr>
<video>
<audio>
<canvas>
<embed>
<figure>
<figcaption> 
<source>
<time>

تگ article

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

<article>
   <h1>Introduction to HTML</h1>
   <p>HTML is a markup language that is used for creating web pages.</p>
</article>

تگ aside

این تگ برای تعریف یک بخش از صفحه وب استفاده می شود که حاوی محتوا است که باید به با محتوای اطراف خود مرتبط باشد. از این تگ برای نمایش ستون های سمت راست و چپ استفاده می شود.

<aside>
   <h1>Apollo 13 Facts</h1>
   <p>Apollo 13 was the seventh manned mission in the American Apollo space program and the third intended to land on the Moon.</p>
</aside>

تگ header

این تگ به یک بخش یا سند، یک هدر اختصاص می دهد.هدر باید حاوی اطلاعات عنوان و اطلاعات مربوط به محتوای مربوط به آن بخش باشد.

<header>
   <h1>Tutorial Republic</h1>
   <nav>
      <p>
         <a href="/home">Home</a>
         <a href="/about-us">About Us</a>
         <a href="contact-us">Contact Us</a>
      </p>
   </nav>
</header>

تگ nav

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

<nav>
   <ul>
      <li><a href="/Home">Home</a></li>
      <li><a href="/about-us">About Us</a></li>
      <li><a href="contact-us">Contact Us</a></li>
   </ul>
</nav>

تگ section

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

نکته: وقتی از این تگ استفاده می کنیم که حتما بتوان برای آن محتوا عنوان تعریف کرد (بتوان از تگ های h1 تا h6 در آن استفاده کرد).

<section>
   <h1>Welcome to Our Website</h1>
   <p>Welcome and thank you for taking the time to visit our website.</p>
</section>

تگ footer

این تگ نشان دهنده پاورقی یک سند یا بخش است. یک پاورقی معمولا حاوی اطلاعاتی درباره نویسنده سند، اطلاعات کپی رایت، پیوندهایی به اسناد مربوطه و غیره است.

<footer>
   <nav>
      <p><a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a></p>
   </nav>
   <p>Copyright © ۲۰۱۴ Tutorial Republic</p>
</footer>

تگ های بالا ، برای تعیین ساختار اصلی سایت مورد استفاده قرار می گیرند.

ساختار اصلی سایت در html5

تگ details

این تگ برای ارائه یک ویژگی “تکمیل خودکار” برای عنصر استفاده می شود. بدین صورت که کاربران یک لیست کشویی از گزینه های از پیش تعریف شده در هنگام تکمیل فیلد، مشاهده می کنند و نشان دهنده یک کنترل است که کاربر می تواند اطلاعات اضافی را بر اساس تقاضا دریافت کند.

تگ summary

این تگ همراه با تگ details برای ارائه یک خلاصه قابل مشاهده برای کاربر استفاده می شود. هنگامی که کاربر روی خلاصه کلیک می کند، اطلاعات اضافی یا محتویات داخل عنصر details که قبلا پنهان شده اند قابل مشاهده می شود.

<details>
   <summary>What is HTML?</summary>
   <p>HTML is a markup language for describing the structure of web pages.</p>
</details>
What is HTML?

HTML is a markup language for describing the structure of web pages.

تگ hgroup

این تگ برای عناصر گروه heading (عنوان) استفاده می شود(برای گروه بندی تگ های h1 تا h6).

<hgroup>
   <h1>This is a main heading</h1>
   <h2>This is sub-heading</h2>
</hgroup>

تگ datalis

این تگ یک مجموعه از گزینه های از پیش تعیین شده برای یک تگ input را مشخص می کند. این تگ می تواند برای ارائه گزینه های سریع برای یک فیلد ورودی مانند یک ویژگی “تکمیل خودکار” مورد استفاده قرار گیرد که نه تنها موجب صرفه جویی در زمان کاربر می شود، بلکه خطاها را نیز کاهش می دهد، زیرا کاربر احتمال اشتباه املایی کمتری دارد.

<p>Enter your favorite browser name:</p>
<input type="text" list="browsers">
<datalist id="browsers">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Internet Explorer">
   <option value="Opera">
   <option value="Safari">
</datalist>

Enter your favorite browser name:

آموزش Html(بخش هفتم)

فرم ها در html

تگ form

تگ فرم برای ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و…) و برای دریافت ورودی از سمت کاربر در صفحات html استفاده می شود. تگ form به تنهایی کاربردی ندارد و با خصوصیاتی مانند action و تگ های input داخل آن بکار برده می شود.

خاصیت action در form :

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

خاصیت method در form :

خاصیت method شیوه ارسال اطلاعات را مشخص می کند. که به یکی از دو شکل post یا get (حالت پیش فرض) می باشد، در متد post، اطلاعات به صورت پنهانی در پس زمینه به سرور ارسال می شوند اما در متد get، اطلاعات در نوار آدرس مرورگر قابل مشاهده هستند و به صورت پارامترهایی به همراه مقادیر به سرور ارسال می شوند. متد post برای ارسال مقادیر طولانی، اطلاعات حساس کاربری، آپلود فایل و… کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه ، جستجو و اطلاعاتی با حساسیت کمتر به کار می رود.

همان طور که گفته شد، تگ form به تنهایی قابلیت خاصی در اختیار کاربران قرار نمی دهد و با تگ های input ، select ،text area و .. که زیر مجموعه های این تگ می باشند کارایی پیدا می کند.

  • تگ input: ای تگ شامل خاصیت هایی می شود که برای ایجاد دکمه های رادیویی، دکمه ارسال، فیلدهای متنی (متن کوتاه) ، فیلدهای مربوط به رمز عبور، فیلد آپلود فایل و… کاربرد دارد.
  • تگ select: این تگ در کنار تگ option برای ایجاد منوهای بازشونده و انتخاب یک یا چند مورد استفاده می شود.
  • تگ textarea: این تگ برای دریافت متن های طولانی بکار برده می شود.

تگ input

این تگ با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات از قبیل فیلد متنی (text)، فیلد رمز عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و … را ایجاد کرد.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

نوع text

بیشترین و رایج ترین نوع مورد استفاده نوع trxt می باشد که یک فیلد تک خطی است که کاربر می تواند داخل آن اطلاعات وارد کند.

<form action="users/get.php" method="get">
   <input type="text" name="firstname">
</form>

نوع password

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

<form action="users/get.php" method="get">
   <input type="password" name="password" />
</form>

نوع button

برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد.

<form action="users/get.php" method="get">
   <input type="button" value="دکمه" onclick="alert('دکمه در تگ فرم باید با دستورات جاوا اسکریپت تکمیل شود')" />
</form>

نوع submit

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

<form action="users/get.php" method="get">
   <input type="submit" value="ارسال" />
</form>

نوع reset

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

<form action="users/get.php" method="get">
   <input type="reset" value="نوشتن از نو" />
</form>

نوع checkbox

از این نوع به همراه تگ input برای ایجاد چک باکس بکار برده می شود.

<form action="users/get.php" method="get">
   <input type="checkbox" checked="checked" name="choose" value="1"/>
</form>

نوع file

برای آپلود یک فایل به سرور استفاده می شود.

<form action="users/get.php" method="get" enctype="multipart/form-data">
   <input type="file" name="file-name" accept="image/gif,image/jpg,application/pdf" />
</form>

برای اینکه این نوع به درستی عمل کند، باید خاصیت enctype را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند. لیست کامل از فرمت ها و معادل آنها در استاندارد MIME

نوع hidden

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

<form action="users/get.php" method="get">
   <input type="hidden" name="hidden-name" value="13" />
</form>

نوع radio

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

<form action="users/get.php" method="get">
   <input type="radio" name="radio-box" value="1" />
</form>

تگ select در form

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

<form action="users/get.php" method="get">
   <select name="select-option">
      <option value="0" selected="selected">انتخاب کنید</option>
      <option value="1">html</option>
      <option value="2">css</option>
      <option value="3">java script</option>
   </select>
</form>

در حالت عادی در هر تگ select کاربران مجاز به ارسال تنها یک مقدار می باشند، برای اجازه ارسال چندین مقداردر این تگ، باید خاصیت multiple را به آن اضافه کنیم.

<form action="users/get.php" method="get">
   <select name="select-option[]" multiple="multiple">
      <option value="0" selected="selected">انتخاب کنید</option>
      <option value="1">html</option>
      <option value="2">css</option>
      <option value="3">java script</option>
   </select>
</form>

تگ textarea در form

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

<form action="users/get.php" method="get">
   <textarea name="your-text" cols="50" rows="8">
</textarea>
</form>

از خاصیت cols برای تعیین عرض(اندازه ستون ها) و از خاصیت rows برای تعیین ارتفاع(تعداد سطرها) استفاده می شود.

استفاده از label در form

برای ایجاد برچسب های استاندارد در فرم ها از تگی با نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای تگ های فرم ایفا می کند.

<form action="users/get.php" method="get">
   <label for="your-text">یادداشت:</label>
      <textarea name="your-text" cols="50" rows="8" id="your-text"
</textarea>
</form>

برای هر فیلدی که قصد تعریف برچسب داریم، یک id تعریف کرده و با خاصیت for برچسب را به آن نسبت می دهیم.

تگ span

تگ span برای متن های خیلی کوتاه استفاده می شود. در وا قع استفاده از عنصر span برای متمایز کردن قسمتی از متن توسط CSS بکار برده می شود. برای مثال فرض کنید که می خواهید در یک پاراگراف متنی بنویسید که هر بخش از آن یک رنگ متفاوت داشته باشد برای این کار می‌توانید همه را در یک تگ p بنویسید و بخش های متفاوت آن را با تگ span جدا کرده و به هر بخش استایل مربوط به خود را بدهید.

<p>تمام رنگ ها از سه رنگ اصلی <span style="color:red">قرمز</span><span style="color:green">سبز</span><span style="color:blue">آبی</span>تشکیل شده است.</p>

تمام رنگ ها از سه رنگ اصلی قرمزسبزآبیتشکیل شده است.


تگ div

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

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

از این تگ در طراحی سایت برای تعیین ساختار اصلی صفحات استفاده می شود. هنگامی که شما میخواهید به گروهی از تگ ها یک style بخصوص در css بدید می توانید تمام این تگ ها را در داخل یک تگ div قرار دهید و سپس به آن تگ div استایل مورد نظر را اعمال کنید تا استایل مورد نظر را برای تگ های داخل این تگ div را با بقیه سایت متمایز کنید(تگ div والد تگ های داخل خود می شود و تگ های داخل آن فرزندان آن می شوند).

<p>این یک متن آزمایشی می باشد</p>
<div style="color:green">
   <h3>متن آزمایشی هدر</h3>
   <p>این یک متن آزمایشی می باشد</p>
</div>

این یک متن آزمایشی می باشد

متن آزمایشی هدر

این یک متن آزمایشی می باشد


تگ ul

از تگ ul و ترکیب آن با تگ li که گزینه های لیست در آن قرار می گیرد برای ایجاد لیست هایی که ترتیب برایمان اهمیتی ندارد استفاده می کنیم.

این تگ دارای خصوصیتی با نام type می باشد که علامت و نشانه های ما را در قسمت مورد نظر در طراحی سایت نمایش می دهد(Disk: برای نمایش دایره ی توپر کنار آیتم های لیست مورد نظر می شود – Circle: برای نمایش یک دایره توخالی کنار آیتم های لیست مورد نظر می شود – Square: برای نمایش مربع توپر کنار آیتم های لیست مورد نظر می شود – None: این خصوصیت باعث می شود هیچ علامتی در کنار لیست ما نشان داده نشود.

برای ایجاد لیست های ترتیبی بجای استفاده از ul از ol استفاده می کنیم .

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>Java script</li>
</ul>
  • HTML
  • CSS
  • Java script

تگ table

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

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

  • سربرگ جداول که شامل عنوان مربوط به هر ستون می باشد را با تگ th مشخص میکنیم.
  • هر سطر(ردیف) را در جدول ها با tr مشخص می کنیم.
  • سلول های اطلاعات یا همان خانه های جدول را با td مشخص میکنیم.
<table width="100%" border="1">
   <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
   </tr>
   <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>23</td>
   </tr>
   <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>37</td>
   </tr>
</table>
First nameLast nameAge
JillSmith۲۳
EveJackson۳۷

خاصیت width برای تعیین عرض جدول و خاصیت border برای تعیین اندازه مرز بین خانه های جدول استفاده می شود.

تگ iframe

عبارت iframe مخفف inline frame است و کاربرد این تگ نمایش یک صفحه وب درون یک صفحه وب دیگراست وحکم یک تب را دارد ولی در قسمتی از صفحه جاری سایت به نمایش در می آید.

<iframe src="URL"></iframe>
<iframe src="https://www.designestan.com"></iframe>

آموزش Html(بخش پنجم)

تگ گروه بندی Fieldset , Legend

تگ fieldset برای دسته بندی چندین کنترل و برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد. تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد.

<fieldset>
   <legend>عنوان گروه</legend>
   <p>متن آزمایشی شماره یک</p>
   <p>متن آزمایشی شماره دو</p>
</fieldset>
عنوان گروه

متن آزمایشی شماره یک

متن آزمایشی شماره دو

مهم ترین خصوصیت Legend خصوصیت Align یا تراز می باشد که محل قرار گیری عنوان را مشخص میکند.

مقدار هایی که این خصوصیت می پذیرد عبارتند از : Top , Bottom , Left , Right

<fieldset>
   <legend align="left">عنوان گروه</legend>
   <p>متن آزمایشی شماره یک</p>
   <p>متن آزمایشی شماره دو</p>
</fieldset>

تگ img

برای استفاده از تصاویر در برگه‌های وب شما باید از تگ img در HTML استفاده کنید که این تگ یک تگ Self Closing است(تگ پایانی برای بسته شدن ندارد).

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

این تگ دارای خاصیتی تحت عنوان src می باشد که این خاصیت در واقع مخفف کلمه source است و مقدار ورودی آن تعیین کننده عکسی است که می‌خواهید آن را نمایش دهید.

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

بصورت پیش فرض تگ img نمایش عکس ها را به اندازه ی اصلی و پیش فرض عکس و بدون خط حاشیه نمایش میدهد. در صورتی که بخواهید تصویر را در سایز دلخواه و با خط حاشیه نمایش دهید از خصوصیات width , height , border استفاده می کنیم.

<img src="UploadFile/images/pic1.jpg" alt="عنوان عکس"  width="100"    height="100" border="2" />

تگ لینک (a)

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

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

  • href : مشخص می کند در صورت کلیک شدن بر روی لینک چه صفحه ای باز شود
  • title : برای ایجاد توضیحی که با بردن موس روی لینک به نمایش در می آید و برای آن به کار می رود که کاربر قبل از کلیک بداند به کجا هدایت خواهد شد
  • target : که طریقه ی باز شدن لینک در مرورگر را مشخص می کند و در آن مشخص می کنیم که صفحه ای که به آن لینک کردیم می خواهیم که در همین صفحه باز شود(self_) یا در تب جدیدی یا پنجره جدیدی در مرورگر(blank_) باز شود.
<a href="http://www.google.com" target="_blank" title="موتور جستجوی گوگل"></a>

سیستم رنگ‌بندی در HTML

در HTML راه‌های مختلفی برای استفاده از رنگ‌ها وجود دارد :

  1. نام رنگ‌ها
  2. استفاده از سیستم Hexadecimal
  3. استفاده از RGB

نام رنگ‌ها

استفاده از نام رنگ ها یک روش ساده اما محدود برای سیستم رنگ‌بندی است. به این صورت که اگر شما به رنگ آبی نیاز داشته باشید کافی‌ است نام آن را بنویسید(blue).

 <h1 style="color:blue;">Simple Text</h1>

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

استفاده از سیستم Hexadecimal

در این مدل، اعداد به ما این قابلیت را می‌دهد تا کمی بیشتر از ۶ میلیون رنگ را استفاده کنیم. استفاده از این سیستم بسیار آسان است. در یک سیستم ۱۶تایی از اعداد ما با اعداد ۰ تا ۹ و a تا f سر و کار داریم. ما در این مدل قابلیت ترکیب رنگی سه رنگ اصلی یعنی Red Green Blue یا قرمز سبز آبی را داریم.

برای مقدار دهی به میزان هرکدام از این رنگ‌ها ما می‌توانیم از اعداد سیستم ۱۶ تایی استفاده بکنیم. مقدار f یعنی حداکثر میزان از آن رنگ و مقدار ۰ یعنی خالی از آن رنگ در ترکیب رنگ بندی مورد نظر ما است.

 <h1 style="color:#5547ff;">Simple Text</h1>

در سیستم رنگ‌دهی هگزادسیمال ۶ عدد وجود دارد که هر دو عدد از سمت چپ نمایانگر یک رنگ از سه رنگ اصلی(قرمز ، سبز ، آبی) هستند. از سمت چپ به راست، دو عدد اول قرمز، دو عدد میانی سبز و دو عدد آخر آبی هستند. وقتی که مقدار دو عدد اول ۰۰ باشد به این معناست که رنگ قرمز وجود ندارد، برای دو عدد میانی نیز به همین صورت، اما وقتی دو عدد آخر برابر ff (حالت حداکثر) باشد به این معنی است که رنگ برابر با آبی می باشد.

استفاده از RGB

در سیستم رنگ‌بندی RGB دقیقا همان فلسفه مورد قبلی پیاده‌سازی می‌شود، با این تفاوت که سیستم عدد گذاری در این حالت متفاوت است. در این سیستم ما از اعداد بین ۰ تا ۲۵۵ استفاده می‌کنیم.

 <h1 style="color:rgb(13,23,255);">Simple Text</h1>

در برخی سیستم‌های رنگ‌بندی ما می‌توانیم یک گزینه یا پارامتر دیگر را نیز تنظیم کنید. این پارامتر میزان شفافیت یا Opaciy است. این مقدار عددی بین ۰ تا ۱ است. این مقدار به صورت پیشفرض برابر با ۱ است اما می‌توانید آن را تا حدی کاهش دهید که کاملا المان شما محو شود. برای مثال اگر این مقدار برابر ۰ باشد هیچ چیزی در صفحه مشاهده نمی‌شود. برای اینکار نیاز است که حرف a را به انتهای rgb اضافه کنید و همچنین یک مقدار چهارم در پرانتز قرار دهید.

  <h1 style="color:rgba(13,23,255,0.5);">Simple Text</h1>

آموزش Html(بخش چهارم)

تگ توضیحات :

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

< !-- متن توضیحات مورد نظر -- >

ساختار تگ‌های HTML

تگ‌های HTML دو حالت دارند:

  • تگ‌هایی که تگ بسته منحصر به فرد دارند
<TagName> محتوا </TagName>

تگ باز شدن با استفاده از علامت بزرگ و کوچک ریاضی <> و نام تگ پیاده‌سازی می‌شود، همچنین تگ بستن با استفاده از همان موارد به اضافه یک علامت Forward Slash قبل از نام تگ پیاده‌سازی می‌شود. در بین باز و بسته شدن تگ نیز محتوا قرار می‌گیرد.

تگ‌هایی که خودشان، خودشان را می‌بندند.

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

تگ‌های عنوان (Heading)

تگ های هدر یا تگ های عنوان از مهم ترین تگ ها برای موتورهای جستجوگر وب می باشد و توجه ویژه ای به عناوین داخل آنها دارند(معمولا کلمات کلیدی وب سایت درون آنها قرار می گیرد).

تگ های عنوان شامل شش تگ با عنوان های H1 تا H6 می باشد که به ترتیب از H1 بزرگترین سایز و H6 کوچکترین سایز را دارا می باشد، درجه ی اهمیت آنها هم به همین میزان است.

<h1>عنوان شماره ۱</h1>
<h2>عنوان شماره ۲</h2>
<h3>عنوان شماره ۳</h3>
<h4>عنوان شماره ۴</h4>
<h5>عنوان شماره ۵</h5>
<h6>عنوان شماره ۶</h6>

عنوان شماره ۱

عنوان شماره ۲

عنوان شماره ۳

عنوان شماره ۴

عنوان شماره ۵
عنوان شماره ۶

تگ P یا پاراگراف

تگ p از مجموعه تگ‌هایی است که درون تگ Body قرار می گیرد. از این تگ برای تعریف یک پاراگراف در HTML استفاده می‌شود و متن داخل این تگ بصورت یک پاراگراف در نظر گرفته می شود. در صورت ایجاد یک پاراگراف یا تگ P جدید ، پاراگراف بعدی به سطر بعد می رود.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
</head>
<body>
   <p>This is a new Paragraph</p>
</body>
</html>

همانطور که می‌ بینید تگ p دارای تگی برای بسته شدن است که بین ای دو تگ مرز پاراگراف ما می باشد و محتوای پاراگراف ما در آن قرار می‌گیرد.

تگ Br

تگ Br خط جدیدی درون پاراگراف ایجاد میکند و بعد از این تگ محتوا به خط بعدی میرود.

تگ hr

از تگ hr برای کشیدن یک خط افقی استفاده می‌شود. این تگ یک تگ Self Closing است و تگ بسته ندارد.

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

تگ Center

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

<center> متن تست با تراز وسط چین </center>

تگ B و تگ strong

متن داخل این تگ ها بصورت توپر و ضخیم (Bold) نمایش داده می شود(برای مهم نشان دادن متن داخل آن ها). این تگ ها نیز تگ های منسوخ شده ای هستند.
و بجای آن از استایل دهی CSS استفاده می شود.

<b> محتوای آزمایشی </b>
<strong> محتوای آزمایشی </strong>

تگ های Sub و Sup

متن داخل تگ sub بصورت زیرنویس و تگ sup بصورت بالا نویس نمایش داده می شود.

<p> این یک متن <sub>آزمایشی</sub> می باشد </p>
<p> این یک متن <sup>آزمایشی</sup> می باشد </p>

این یک متن آزمایشی می باشد



این یک متن آزمایشی می باشد


تگ های i و em

متن داخل این تگ ها بصورت کج نمایش داده می شوند(برای تاکید روی متن داخل آن ها).

<p> این یک متن <i>آزمایشی</i> می باشد </p>
<p> این یک متن <em>آزمایشی</em> می باشد </p>

تگ mark

متن داخل این تگ بصورت یک متن هایلایت شده نمایش داده می شود.

<p> این یک متن <mark>آزمایشی</mark> می باشد </p>

این یک متن آزمایشی می باشد


تگ del

محتوای متنی داخل این تگ یک خط روی آن ها کشیده می شود.

<del> متن آزمایشی </del>
متن آزمایشی

متا تگ ها (Meta tags)

متا تگ ها نوعی متا دیتا(اطلاعاتی که در توصیف اطلاعات دیگر مورد استفاده قرار می گیرد) هستند.

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

استفاده ی درست از این متاتگ ها تاثیر بسیار زیادی بر ایندکس شدن صفحات و شناخت بهتر موتور های جستجو از سایت ما دارد. تگ های Meta در بین تگهای Head قرار میگیرند:

<html>
<head>
   <title>عنوان صفحه </title>
   <meta tag 1 />
   <meta tag 2 />
   <meta tag 3 />
   …
</head>
<body>
   محتوای صفحه
</body>
</html>

مهمترین متا تگ ها :

متا تگ description که برای شرح وب سایت شما در ۳ از ۴ جمله مورد استفاده قرار می گیرد و محتوای خلاصه صفحه را به نمایش می گذارد، این توضیح برای گوگل نباید بیشتر از ۱۵۰ کارکتر (حرف) باشد.

<meta name="description" content="text">

متا تگ keywords که مهم ترین کلمات کلیدی که در یک صفحه خاص مد نظر ما هستند در آن قرار می گیرند.

<meta name="keywords" content="words">

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

< meta name="viewport" content="width=device-width, initial-scale=1" >

متاتگ فارسی سازی صفحه (Utf-8) برای تعیین نوع رمزنگاری صفحه یا encoding صفحه از این متاتگ استفاده میشود و در صورت استفاده نکردن از این متاتگ ، در بعضی از مرورگرها ی کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند.

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

متا تگ زبان مورد استفاده (Content-Language) این متا تگ برای دسته بندی زبانی برای موتورهای جستجوگر می باشد و توصیه می شود استفاده گردد.

<meta http-equiv="Content-Language" content="Fa">

در حالت کلی بیش از ۳۰ نوع متا تگ وجود دارد که شما می توانید لیست کامل انواع متاتگ ها را ببینید و با آنها آشنا شوید.

تگ اسکریپت (Script)

از تگ اسکریپت در طراحی سایت برای قرار دادن اسکریپت (مانند java script) درون صفحات html استفاده می شود. دستورات باید بین تگ های باز و بسته script قرار گیرد.

<script  type="text/javascript" >

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

</script>

خصوصیت type در HTML 4 الزامی است، اما در HTML5 اختیاری است.

تگ استایل ( Style )

یکی از روش های تعریف استایل نویسی(CSS)، استفاده از تگ استایل در بخش head صفحات html است، که با تعریف آن می توان در تمام صفحه برای ظاهر سایت استفاده نماییم.

<style   type="text/css" >
   
  محل کدهای CSS

</style>

تگ لینک ( Link )

از تگ link برای برقرای ارتباط و لینک دادن به سایر صفحات وب استفاده می شود. مهم ترین کاربرد این تگ تعریف استایل (Style) خارجی حاوی کدهای Css می باشد.

برای تعریف Style خارجی فایل حاوی Css از کد زیر استفاده نمایید :

<link rel="Stylesheet" type="text/css" href="آدرس فایل سی اس اس" />

تگ Html

در زبان HTML کدهای وب بین تگ های html و body قرار میگیرند و تگ html مشخص کننده ی شروع و پایان یک سند Html میباشد.

تگ Head

تگ head نخستین تگ در بدنه تگ html است که شامل یک سری اطلاعات برای مرورگر و نیز جستجوگر های وب می باشد.

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

تگ title

یکی از مهمترین تگ ها برای جستجوگرهای وب تگ عنوان ( Title ) می باشد . متنی که داخل این تگ قرار میگیرد عنوان صفحه را مشخص میکند که در title bar مرورگر به کاربران نشان داده می شود، این تگ در همه سندهای HTML الزامی است.

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

ویژگی های مشترک در بین تگ ها در HTML

یک سری از ویژگی ها هستند که در بین تگ های html مشترک هستند و در همه آنها کار مشترکی را انجام میدهند.

این ویژگی ها به شرح زیر میباشند:

  • – class
  • – style
  • – id
  • – dir
  • – hidden
  • – title
  • – lang
  • – tabindex
  • – translate
  • – Event Attributes
  • – accesskey
  • – contenteditable
  • – contextmenuelement
  • – dropzone
  • – draggable
  • – spellcheck

خاصیت Style:

تگ های html می توانند با استفاده از این خصوصیت از دیگر تگ های مشابه متمایز گردند. این خاصیت درون تگ های html قرار میگیرد و با استفاده از آن میتوان شکل ظاهری یک تگ را تعیین کرد.

<p style=”background-color:#ccc; color:red; font-size:14px; text-align:center; “> متن پاراگراف </p>

ویژگی های رویداد(Event) در HTML:

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

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

ویژگی های رویداد در HTML به چند قسمت تقسم می شوند:

  • رویدادهای پنجره
  • رویدادهای عناصر فرم
  • رویدادهای موس
  • رویدادهای صفحه کلید
  • رویدادهای حافظه کلیپ بورد (Clipboard)
  • رویدادهای پرینت
  • رویدادهای مربوط به مدیا
  • رویدادهای مربوط به سمت سرور

کلیه رویدادهای مربوط به موس

رویدادتوضیحات
onclickاین رویداد، زمانی که کاربر روی عنصر کلیک می کند، اتفاق می افتد.
oncontextmenuاین رویداد، زمانی روی می دهد که، کاربر برای باز کردن منوی زمینه، روی یک عنصر راست کلیک می کند.
ondblclickاین رویداد، زمانی روی می دهد که، کاربر روی یک عنصر دبل-کلیک کند .
onmousedownاین رویداد، زمانی روی می دهد که، کاربر دکمه ی موس را روی یک عنصر فشار دهد.
onmouseenterاین رویداد، زمانی روی می دهد که،  کاربر نشانگر ماوس را به روی یک عنصر وارد کند.
onmouseleaveاین رویداد، زمانی روی می دهد که،  نشانگر موس از روی یک عنصر خارج شود.
onmousemoveاین رویداد،زمانی روی می دهد که، اشاره گر موس بر روی یک عنصر، حرکت کند.
onmouseoverاین رویداد، زمانی روی می دهد که،کاربر اشاره گر ماوس را  بر روی یک عنصر یا فرزندان آن عنصر وارد کند.
onmouseoutاین رویداد، زمانی روی می دهد که، کاربر اشاره گر ماوس را از روی یک عنصر یا فرزندان آن عنصر بیرون ببرد.
onmouseupاین رویداد، زمانی روی می دهد که کاربر،دکمه ی ماوس را بر روی یک عنصر رها کند.

کلیه رویدادهای مربوط به کیبورد (keyboard)

رویدادتوضیحات
onkeydownاین رویداد زمانی روی می دهد که، کاربر در حال فشار دادن یک دکمه است.
onkeypressاین رویداد زمانی روی می دهد که، کاربر یک دکمه را فشار دهد.
onkeyupاین رویداد زمانی روی می دهد که، کاربر یک دکمه را رها کند. 

کلیه رویدادهای مربوط به فرم (form)

رویدادتوضیحات
onblurاین رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را از دست می دهد.
onchangeاین رویداد زمانی روی می دهد که، مقدار یک عنصر تغییر کند. این عنصر می تواند <input> یا <keygen> یا <textarea> باشد.
onfocusاین رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را به دست آورد.
onfocusinاین رویداد زمانی روی می دهد که، یک عنصر در آستانه ی گرفتن focus(فوکس)می باشد.
onfocusout این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی از دست دادن focus(فوکس)می باشد.
oninput این رویداد زمانی روی می دهد که، یک عنصر ورودی را از کاربر دریافت می کند
oninvalid این رویداد زمانی روی می دهد که، یک عنصر نامعتبر است.
onreset این رویداد زمانی روی می دهد که، یک فرم reset شود.
onsearch این رویداد زمانی روی می دهد که، یک کاربر در فیلد search چیزی را بنویسد.
onselect این رویداد زمانی روی می دهد که، کاربر مقداری از یک متن را انتخاب کند(select کند).
onsubmit این رویداد زمانی روی می دهد که، یک فرم submit شود.

کلیه رویدادهای مربوط به حافظه کلیپ بورد (Clipboard)

رویدادتوضیحات
oncopyاین رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را کپی می کند.
oncutاین رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را cut می کند.
onpasteاین رویداد زمانی روی می دهد که، یک کاربر محتوایی را در یک عنصر paste(الصاق) می کند.

کلیه رویدادهای مربوط به پرینت (Print )

رویدادتوضیحات
onafterprintاین رویداد زمانی روی می دهد که، یک صفحه شروع به print می کند یا اینکه پنجره مربوط به print بسته می شود.
onbeforeprintاین رویداد زمانی روی می دهد که، یک صفحه در آستانه ی پرینت شدن است.

کلیه رویدادهای مربوط به مدیا (Media )

رویدادتوضیحات
onabortاین رویداد زمانی روی می دهد که لود شدن یک مدیا بی نتیجه باشد.
oncanplayاین رویداد زمانی روی می دهد که، مرورگر بتواند نمایش مدیا را شروع کند. 
oncanplaythroughاین رویداد زمانی روی می دهد که، مرورگر بتواند بدون توقف برای لود کردن، مدیا را نمایش دهد.
ondurationchangeاین رویداد زمانی روی می دهد که، مدت یک مدیا تغییر کند.
onemptiedاین رویداد زمانی روی می دهد که به علت یک اتفاق بد، فایل مدیا ناگهان از دسترس خارج می شود.
onendedاین رویداد زمانی روی می دهد که، مدیا به پایان می رسد (قابل استفاده برای پیام اتمام  مدیا).
onerrorاین رویداد زمانی روی می دهد که، یک error در طول لود شدن فایل مدیا رخ دهد.
onloadeddataاین رویداد زمانی روی می دهد که، داده های مدیا، لود شده اند.
onloadedmetadata این رویداد زمانی روی می دهد که، داده های متا، لود شوند.
onloadstart این رویداد زمانی روی می دهد که، مرورگر شروع به جستجوی مدیای مورد نظر می کند.
onpause این رویداد زمانی روی می دهد که، مدیا متوقف شود، خواه توسط کاربر یا بصورت برنامه نویسی.
onplay این رویداد زمانی روی می دهد که، پخش مدیا شروع شود or is no longer paused
onplaying این رویداد زمانی روی می دهد که، مدیا بعد از متوقف شدن(pause) یا توقف برای دانلود ادامه(buffering)، شروع به پخش کند.
onprogress این رویداد زمانی روی می دهد که، مرورگر در پروسه ی گرفتن داده های مدیا می باشد(دانلود کردن مدیا).
onratechange این رویداد زمانی روی می دهد که، سرعت پخش مدیا تغییر کند.
onseeked این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را به پایان ببرد.
onseeking این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را شروع می کند.
onstalled این رویداد زمانی روی می دهد که، مرورگر در حال تلاش برای دریافت داده های مدیا می باشد اما این داده ها غیر قابل دسترس می باشند.
onsuspend این رویداد زمانی روی می دهد که، مرورگر به طور عمدی داده های مدیا را دریافت نمی کند.
ontimeupdate این رویداد زمانی روی می دهد که، مکان پخش تغییر کند(درست مانند زمانی که کاربر به سرعت مدیا را از نقطه ای به نقطه ی دیگر می برد)
onvolumechange این رویداد زمانی روی می دهد که، میزان صدای مدیا تغییر کند(همچنین هنگامی که صدا در حالت mute قرار دارد)
onwaiting این رویداد زمانی روی می دهد که، مدیا برای دانلود فریم بعدی متوقف شده است و در حالت(resume)قرار دارد.

کلیه رویدادهای مربوط به سمت سرور (Server-Sent)

رویدادتوضیحات
onerror این رویداد زمانی روی می دهد که یک error در منبع رویداد(event source) ایجاد شود.
onmessage این رویداد زمانی روی می دهدکه، یک پیام از منبع رویداد(event source)دریافت شود.
onopen این رویداد زمانی روی می دهد که، یک اتصال با منبع رویداد(event source) باز شود.

سایر رویدادها

رویدادتوضیحات
onmessageاین رویداد زمانی روی می دهد که، یک پیام از منبع رویداد(event source) دریافت شود.
onmousewheelغیر قابل استفاده. به جای آن از رویداد onwheel استفاده کنید.
ononlineاین رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آنلاین می کند.
onofflineاین رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آفلاین می کند.
onpopstateاین رویداد زمانی روی می دهد که، تاریخچه ی(history) پنجره تغییر می کند.
onshow این رویداد زمانی روی می دهد که، یک عنصر <menu> بصورت منوی محتوا(context menu)، نشان داده شود.
onstorageاین رویداد زمانی روی می دهد که، یک منطقه ی ذخیره سازی وب بروز رسانی شود.
ontoggleاین رویداد زمانی روی می دهد که، یک کاربر عنصر <details> را باز کند یا ببندد.
onwheelاین رویداد زمانی روی می دهد که، دکمه ی چرخان ماوس، بر روی یک عنصر به سمت بالا یا پایین بچرخد.

HTML چیست ؟

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

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

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

برای نوشتن کدهای HTML ، تنها یک ادیتور متن مانند Notepad ویندوز و یا نرم افزار هایی که برای این کار طراحی شده اند مانند Adobe Dreamweaver یا Visual studio استفاده کرد. برای یادگیری HTML توصیه می کنیم از ویرایشگر متن ++Notepad استفاده کنیدکه یک ویرایشگر متن ساده و کم حجم با امکانات لازم برای یادگیری HTML است.

یک عنصر HTML با یک تگ آغاز <html> شروع می شود و با یک تگ پایان <html/> تمام می شود. محتوای عنصر همه چیزی است که بین تگ آغاز و پایان قرار می گیرد. محتوای برخی از عناصر HTML خالی می باشد. عناصر خالی در همان تگ آغاز ، بسته می شوند. اکثر عناصر HTML میتوانند دارای صفات (attributes) باشند.

نمونه ای از ساختار کلی html :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Page Title</title>
</head>
<body>
   <h1>This is a Heading</h1>
   <p>This is a paragraph.</p>
</body>
</html>

نمایش کدها و شکل خروجی آنها بعضا در مرورگرهای مختلف یکسان نمی باشد و یکی از هنرهای برنامه نویسان وب ، نوشتن کدهایی با اجرای یکسان در مرورگر های مختلف است. هر تگ HTML ، باید حتما توسط یک تگ پایانی بسته شود . عناصر html شامل تگ شروع و تگ پایان می شود( <tagname>محتوا در اینجا قرار می گیرد</tagname> )

خواص تگ های HTML :

هر تگ html دارای مجموعه از خواص است که ویژگی های مختلف آنها را تعیین می کند. هر یک از این خاصیت ها را می توان در درون تگ ابتدایی تعیین کرد . خواص تگ ها را با علامت = مقدار دهی می کنیم و مقدار آن خاصیت را داخل ” ” قرار داده میشود. مثال:

<a href="https://www.designestan.com">DESIGNESTAN</a>
<img src="img.jpg" width="500" height="600">
<p style="color:red">paragraph</p> 

خصوصیات استاندارد تگ های HTML :

در پایین خصوصیات استاندارد تگ های HTML معرفی شده اند . این خصوصیات در اکثر تگ های HTML مشترک هستند و دارای کاربرد یکسانی هستند .

نام خاصیتشرح
classمشخص کننده کلاس تگ در کد نویسی برنامه است . این کلاس در کدنویسی CSS و زبان های اسکریپتی کاربرد دارد .
idمشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنویسی CSS و زبان های اسکرپیتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست یافت .
styleیک خاصیت چند مفدارِی است که خصوصیات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند .

title
متنی است که به صورت tooltip در یک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمایش داده می شود .

DOCTYPE چیست؟


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

از آنجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از HTML را ارائه کرده است که هر کدام از آنها در مقایسه با هم دارای تفاوت هایی هرچند جزئی از هم هستند ولی این مسئله موجب می شود که مرورگرها در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند.

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