مقدمه‌ای بر HTML: تگ‌ HTML و عملکرد آن به زبان ساده

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

راحت ترین راه برای یادگیری، استفاده از چند مثال است.

<h1>This is the title to my document</h1>

می توانید ببینید که <h1> و <h1/> متن this is the title to my document را احاطه کرده است. در واقع می بینید که HTML چگونه عمل می کند. می تواند تگ باز شونده داشته باشد که اطلاعاتی درون آن جای می گیرد یا تگ های بیشتری که داخل آن قرار می گیرند. در این مورد ما یک تگ h1 داریم که تگ تیتر محسوب می شود: برای بزرگترین عنوان صفحه یعنی عنوان به کار می رود.

ساختار سند HTML و معرفی بخش‌های اصلی آن

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

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

لینک‌های Absolute، لینک‌های Relative و لینک‌های ID

یک تگ، چه بازشونده و چه بسته شونده باشند با استفاده از براکت احاطه می شوند؛ < و >. تگ های بسته شونده HTML همیشه یک اسلش / دارند که پس از براکت بازشونده قرار می‌گیرند؛ بنابراین تگ بسته شونده h1 به شکل <h1/> می باشد.

مواردی هم وجود دارد که به عنوان تگ های خودبسته‌شونده یا تگ های void یا خالی طبقه‌بندی می شوند بدین معنا که خودشان هم باز و بسته شونده هستند. به عنوان نمونه می توانید این تگ را در نظر داشته باشید </ input>. این اسلش در انتها به معنای خودبسته‌شونده بودن آن است. دقت داشته باشید که وجود این اسلش نیز اختیاری است. بنابراین درج <input> نیز صحیح است.

تگ ها نیز به صورت مشخصی باز و بسته می شوند. جدیدترین تگ باز شده بایستی اولین مورد بسته شونده باشد. برای مثال، اگر یک h1 بعد از div داشته باشید، تگ h1 بایستی در ابتدا بسته شود.

<div>
  <h1> Hi </h1>
</div>

انواع تگ ها

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

• h1 تا h6 – سرآیندها. اینها شش رده از تیترها و زیرتیترهایی هستند که می توانیم در یک صفحه html از آنها استفاده کنیم. در واقع h2 یک زیرتیتر برای تیتر h1 محسوب می شود. یک h3 نیز زیرتیتر برای تیتر h2 است. برخی متخصصین بر این معتقدند که هر صفحه بایستی تنها یک تگ h1 داشته باشد. البته اینها قراردادی هستند و قانونی برای محدودیت در این زمینه وجود ندارد.
• p – پاراگراف. متن داخل سند html را بایستی داخل تگ p قرار داد. تنها متن داخل تگ p جای می گیرد. هر یک از این پاراگراف ها یک تگ p محسوب می شوند. مثلا: <p>test is test.</p>
• a – لینک. تگ a در واقع لینک به جایی دیگر است. هر تگ a نیازمند مقدار مقصدی است که لینک شما را به آنها هدایت می کند.
• div – مخفف بخش یا division. در حقیقت div عامل تقسیم بندی صفحه است. به خودی خود کاری انجام نمی دهد و تگ div، نگهدارنده کلی برای دسته بندی دیگر عناصر با هم است. در یک سند HTML تعداد زیادی تگ div می بینید. همراه با CSS بسیار مفید هستند. به صورت کلی، اگر می خواهید وبسایتی داشته باشید که لیستی از پست های وبلاگ دارد که هریک پاراگراف، عنوان، تصویر و … دارد بایستی هر پست را در یک div یا دیگر نوع تگ نگهدارنده قرار دهید.
• span – نگهدارنده تکه های کوچک متن. اگر یک div تقسیم‌کننده و نگهدارنده صفحه است، span نگهدارنده بخش‌ها محسوب می شود. این تگِ شیوه نمایش چیزی را تغییر نمی دهد اما به شما اجازه می دهد تا با کمک CSS و جاوااسکریپت متن را به شکلی متفاوت از نسخه ابتدایی اش نشان دهید.
• ol، ul و li – هر دوی ol و ul لیست را نشان می دهند. ul لیستی نامرتب است: لیستی است که می تواند بهم بخورد و هنوز هم همان معنای ابتدایی را داشته باشد. مثلا برای لیست کردن بازیگران سینما می توانید از این تگ استفاده کنید. تگ ol لیست سازماندهی شده و مرتب است: موردی که در ابتدا ظاهر می شود از اهمیت برخوردار است. مثلا برای لیست کردن 10 شهر پرجمعیت ایران بایستی از این تگ استفاده کنید و تغییر ترتیب باعث بهم خوردن لیست می شود.
• button – دکمه. دکمه را می توان در جاوااسکریپت مورد استفاده قرار داد تا با کلیک کاربر بر روی آن باعث اتفاقی شود مثلا در هنگام پر کردن فرم اطلاعات، دکمه درون صفحه می تواند باعث اخطار اشتباه در پر کردن فیلدها شود.
• img – تصویر. از این تگ برای بارگزاری تصاویر در صفحه استفاده می شود. این تگ می تواند اندکی گیچ کننده باشد چرا که می توانید از CSS نیز برای نمایش تصاویر استفاده کنید. تفاوت کلیدی در این است که وقتی که تصویر جدای از محتوا می شود، مانند یک دیاگرام که داده هایی که درباره آن صحبت می کنید را نشان می دهد یا تصویری که چیزی از مقاله شما را به نمایش می گذارد، بایستی از img استفاده کنید.
  اگر تصویر پس زمینه جذاب یا چیزی برای زیبایی وبسایت تان است، از CSS استفاده کنید. یک تگ img بایستی src داشته باشد که می گوید آن تصویر از کجا می آید و خصوصیت alt که به صفحه خوان ها می گوید این تصویر در چه رابطه است تا از این طریق تصویر همچنان برای نابینایان یا کم بینایان مفید باشد و البته همینطور برای موتورهای جستجو مانند گوگل و بینگ. img همواره تگ خودبسته‌شونده است. مثلا:

  <img src="http://www.placepuppy.net/100/100" alt="an adorable puppy" />

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

  <select>
    <option value="seattle">Seattle</option>
    <option value="portland">Portland</option>
    <option value="san-francisco">San Francisco</option>
  </select>

   

• form – گروهی از تگ های html که داده هایی را از یک کاربر جمع آوری می کنند. این فرم ترکیبی از تگ های input، textarea و select است. سپس می توانید از این عنصر form برای ارسال داده ها به سرورتان استفاده کنید. تگ form خودش چیزی را به نمایش نمی گذارد؛ تنها یک نگهدارنده برای تگ های دیگر است. مثلا:

  <form>
    <input />
    <textarea></textarea>
  </form>

   

• table، tr و td – کاربرد آن به مانند ساخت جدول در اکسل و ورد است. اگر جدولی از داده دارید، بهترین روش نمایش آن به این طریق است. table نگهدارنده ای برای کل جدول است، tr نمایانگر ردیف و td نمایانگر یک سلول در جدول است.

  <table>
    <tr>
      <td>(0,0)</td>
      <td>(1,0)</td>
    </tr>
    <tr>
      <td>(0,1)</td>
      <td>(1,1)</td>
    </tr>
  </table>

توضیحات

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

7 اشتباه رایج برنامه‌نویسان در نوشتن کد HTML و CSS

اینجا جایی است که توضیح نویسی وارد صحنه می شود. می توانید توضیحات کوتاهی برجای گذارید که کامپیوتر شما کاری به کار آنها ندارد و نادیده شان می گیرد. در HTML روشی که توضیح نویسی را انجام می دهیم به این صورت است:

<– your comments go here –!>. توضیحاتتان را بین دو علامت <– و –!> قرار دهید تا بعدا متوجه دلیل نگارش این بخش از کدتان شوید. البته در نوشتن توضیحات زیاده روی نکنید.