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

HTML چیست

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

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

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

<open>data</close>

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

انواع تگ در HTML

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

1. تگ‌های که تگ پایانی ندارند.
2. تگ‌هایی که تگ پایانی دارند.

در جدول زیر لیست برخی از تگ‌های HTML و کاربرد آنها ذکر شده است :

تگ‌های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند، يعنی تگ‌های <b> با <B> برابر هستند. HTML فضاهای خالی را نادیده می‌گیرد، بنابراین به جای نوشتن یک فایل در یک خط می‌توانید آن را در چند خط بنویسید تا خوانایی آن بالاتر رود. بین عناصر HTML ممکن است رابطه پدر-فرزندی وجود داشته باشد:

<table>
   <tr>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
   </tr>
</table>

در کد بالا تگ table پدر همه تگ‌های tr و td و همچنین تگ tr پدر تگ‌های td است که در داخل آن قرار دارند. همین کد بالا یک جدول با دو سطر و دو ستون ایجاد می‌کند. لیست کامل تگ های HTML در لینک زیر آمده است :

تگ‌های بلاکی و غیر بلاکی

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

<address>		<article>		<aside>			<blockquote>		<canvas>
<dd>			<div>			<dl>			<dt>			<fieldset>
<figcaption>		<figure>		<footer>		<form>			<h1>-<h6>
<header>		<hr>			<li>			<main>			<nav>
<noscript>		<ol>			<output>		<p>			<pre>
<section>		<table>			<tfoot>			<ul>			<video>

و تگ‌های غیر بلاکی هم عبارتند از :

<a>			<abbr>			<acronym>		<b>			<bdo>
<big>			<br>			<button>		<cite>			<code>
<dfn>			<em>			<i>			<img>			<input>
<kbd>			<label>			<map>			<object>		<q>
<samp>			<script>		<select>		<small>			<span>
<strong>		<sub>			<sup>			<textarea>		<time>
<tt>			<var>

خواص تگ‌های HTML

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

<tag attribute = "value" > Content </tag>

برخی از خاصیت‌های بین اکثر تگ‌ها مشترک هستند و لیست آنها در جدول زیر آمده است:

برخی دیگر از خاصیت‌ها مختص به یک تگ خاص هستند. مثلاً تگ a دارای یک خاصیت به نام href است که مقدار آن یک لینک می‌باشد :

<a href = "http://www.google.com"> Google </a>

رویدادهای تگ‌های HTML

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

<tag event = "value" > Content </tag>

رویدادها به چند دسته زیر تقسیم می‌شوند :

• رويدادهای پنجره در HTML
• رويدادهای عناصر فرم در HTML
• رويدادهای ماوس در HTML
• رويدادهای صفحه کليد در HTML

در جدول زیر لیست برخی از رویدادهای پرکاربرد ذکر شده است:

در لینک زیر خواص عمومی و خصوصی و همچنین رویدادهای تگ‌های HTML آمده است :

 
در همین حد به توضیح HTML بسنده می‌کنیم و در ادامه با یک توضیح ساده کاربرد موارد گفته شده را در عمل به شما آموزش می‌دهیم.

ایجاد یک فایل HTML

به کد زیر توجه کنید :

  1: <!DOCTYPE html>
  2: <html>
  3: <head>
  4:   <title>Title of page</title>
  5: </head>
  6: <body>
  7: 
  8: </body>
  9: </html>

کد بالا ساختار استاندارد یک فایل HTML را نشان می‌دهد. در خط 1، از DOCTYPE برای تعیین نسخه HTML استفاده شده است. DOCTYPE یک تگ نیست و فقط مسئول تعیین نسخه HTML است. در خط 2 تگ html آمده و در خط 9 بسته شده است. این تگ در واقع برای ایجاد یک سند HTML به کار می‌رود و همه تگ‌های دیگر فرزند آن محسوب می‌شوند.

تگ head یک تگ بسیار مهم است. اگر چیزی در داخل این تگ بنویسید در صفحه نمایش داده نمی‌شود. در داخل این تگ، تگ‌های مهمی قرار می‌گیرند که از آنها برای عنوان صفحه و اطلاعاتی در مورد کد گذاری صفحه استفاده می‌شود. همانطور که در خط 4 مشاهده می‌کنید تگ title در داخل تگ head قرار دارد و وظیفه آن اختصاص یک عنوان به سند HTML است.

در خط 6 و 8 تگ‌های باز و بسته body آمده‌اند. هر چیزی که بین تگ body قرار بگیرد در مرورگر مشاهده می‌شود. یعنی اگر می‌خواهید محتوایی را به کاربران نشان دهید باید آن را در داخل این تگ بنویسید. برنامه NotePad ویندوز را باز کرده و کدهای بالا را در داخل آن بنویسید :

حل نوبت به ذخیره این فایل می‌رسد. فایل‌های HTML را باید با پسوند html. یا htm. ذخیره کنید. برای منظور فایل بالا را با نام sample.html در درایو D به صورت زیر ذخیره نمایید :

حال به درایو D رفته و بر روی فایل sample.thml دو بار کلیک کنید تا در مرورگر نمایش داده شود :

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

<!DOCTYPE html>
<html>
<head>
  <title>Title of page</title>
</head>
<body bgcolor="#E6E6FA">
<h1>What is HTML?</h1>
<p>HTML stands for <span onclick="alert('Welcome to HTML tutorials!');">Hyper Text Markup Language</span>.</p>
</body>
</html>

در کد بالا ما برای تگ body یک خاصیت تعریف کرده‌ایم. در ضمن دو تگ بلاکی h1 و p را هم در داخل این تگ قرار داده‌ایم. همانطور که مشاهده می‌کنید این دو تگ از از خط جدید شروع شده‌اند. حال به تگ span که در داخل تگ p قرار دارد توجه کنید. برای این تگ یک رویداد تعریف کرده‌ایم. همانطور که قبلاً ذکر شد این تگ جز تگ‌های غیر بلاکی بوده و به اندازه محتوایی که در داخلش قرار می‌گیرد تغییر اندازه می‌دهد. حال برنامه را اجرا کنید :

همانطور که در شکل بالا مشاهده می‌کنید خاصیت bgcolor باعث تغییر رنگ پس زمینه کل سند می‌شود. حال بر روی متن Hyper Text Markup Language کنید:

با کلیک بر روی این متن رویداد onclick به وقوع می‌پیوندد و باعث نمایش پیغام Welcome to HTML tutorials می‌شود. لازم نیست که بدانید alert چیست. این مثال را برای این ذکر کردیم که با موارد گفته شده از ابتدای درس آشنا شوید.