آموزش HTML بصورت کامل همراه با مثال عملی

آموزش HTML

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

فهرست مطالب آموزش HTML

  • HTML چیست؟
  • نشانه گذاری
  • مفهوم تگ Tag
  • شروع  برنامه نویسی و اولین صفحه HTML
  • توضیحات تگ ها
      • تگ DOCTYPE
    • تگ html
    • تگ head
    • تگ title
    • تگ body
    • تگ های Heading
    • تگ p
    • خاصیت style استایل
    • تگ i
    • تگ em
    • تگ b و تگ strong
      • تقاوت تگ b و تگ strong
    • تگ hr
    • تگ small
    • تگ sub
    • تگ sup
    • کامنت نویسی در HTML
    • تگ a
      • خاصیت href در تگ a
      • خاصیت target در تگ a
      • انواع مقصد در لینک دهی
        • به صفحات داخلی سایت
        • به یک بخش از صفحه فعلی
        • به آدرس خارجی
    • تگ img
      • خاصیت alt برای تگ img
      • خاصیت title
      • تنظیم طول و عرض تصویر در تگ img
      • قرار دادن تگ img در داخل تگ a
    • تگ video
      • خاصیت controls
      • خاصیت loop
      • تنظیم طول و عرض تگ video
      • نکته مهم درمورد تگ video
    • تگ iframe
      • خاصیت src در تگ iframe
      • خاصیت width و height و تنظیم ابعاد تگ iframe
      • خاصیت name
      • حذف border از تگ iframe
    • اضافه نمودن ویدیوی آپارات
    • نمایش ویدیوهای یوتیوب در سایت
    • لیست در HTML
      • تگ ul
        • خاصیت type
      • تگ ol و لیست مرتب
        • خاصیت type
        • خاصیت reversed
        • خاصیت start
    • تگ div
    • تگ span
    • تگ table و ایجاد جدول در HTML
      • تگ tr
      • تگ td
      • تگ th
      • تگ caption
      • تگ tbody و تگ tfoot
    • تگ meta
      • مشاهده متا تگ های هر صفحه
      • متا تگ charset
      • متا تگ viewport
      • متا تگ keywords یا متای کلمات کلیدی
      • متا تگ Author
      • متا تگ Description یا توضیحات
    • نتیجه گیری

آموزش HTML |HTML چیست؟

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

به این معنی که همه مرورگر ها فقط کدهای HTML را می شناسند و هیچ مرورگری کد های زبان PHP و یا ASP و … را درک نمی کنند. در نهایت کدهای هر زبان برنامه نویسی به کد های قابل فهم HTML تبدیل یا کامپایل شده و به مرورگر فرستاده می شود که برای مرورگر قابل فهم و درک است.

نشانه گذاری در آموزش HTML

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

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

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

مفهوم تگ Tag در آموزش HTML

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

انواع  تگ ها در آموزش HTML

تگ ها انواع گوناگونی دارند. هر کدام از آنها برای نمایش یک نوع از المان یا بخش به کار می رود. به عبارتی وظیفه هر تگ مشخص و مجزا بوده و هر کدام مسئولیتی دارند. مثلا برای نمایش یک پاراگراف نیاز به تگ p داریم اما برای نمایش عکس ها باید از تگ img استفاده کنیم. شما نمی توانید برای نمایش متن از تگ img استفاده کنید.

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

شروع برنامه نویسی و اولین صفحه HTML

در ادامه آموزش HTML می خواهیم با همدیگر شروع به برنامه نویسی با HTML کنیم. اجرای فایل های اچ تی ام ال نیاز به سرور و هیچ فن آوری یا غول شاخداری ندارد. تنها چیزی که شما نیاز دارید یک مرورگر یا Internet Explorer است و یک ادیتور editor شما میتوانید از مرورگر های زیر استفاده کنید:

  • گوگل کروم
  • موزیلا فایرفاکس
  • سافاری

و برای ادیتور هم می توان از همه این ها استفاده کرد:

  • Notepad
  • ++Notepad
  • io
  • Sublime Text

و…

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

روش اول:

 ابتدا ++Notepad را باز کرده و کدهای زیر را در آن قرار دهید:

آموزش HTML

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

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

آموزش اچ تی ام ال

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

روش دوم:

در یکی از درایو ها یک دایرکتوری یا همان فولدر با هر نامی که خواستید ایجاد کنید. بنده در درایو E دایرکتوری به نام HTMLProject ساختم. در داخل دایرکتوری در بالا سربرگ یا منوی view را کلیک کنید. سپس در قسمت راست گزینه options را بزنید. در پنجره باز شده منوی View را بزنید و تیک گزینه Hide extensions for known file types را بردارید تا غیر فعال شود.

در داخل دایرکتوری کلیک سمت راست کنید و از گزینه New گزینه Text Document  را کلیک کنید و یک نام دلخواه و پسوند html. با حروف کوچک وارد کنید تا فایل برایتان ساخته شود.

قاعدتا باید شکل و شمایل فایل ساخته شده شبیه آیکون مرورگر شما شود که اگر این چنین نشد باید rename کرده و مجددا در درستی پسوند دقت نمایید. حال باید در ادیتورتان فایل را باز کرده و داخل آن کدهای بالا را قرار دهید سپس اگر فایلتان در مرورگر باز است رفرش کنید یا اگر باز نیست فایل را اجرا کنید. دقت کنید که بعد از هر بار تغییرات در ادیتور، باید فایل را ذخیره و مرورگر را رفرش کنید Ctrl + F5.

بیشتر بدانید


فیلم آموزش HTML برای سایت نویسی

فیلم آموزش لاراول LARAVEL به زبان ساده

پروژه سیستم نوبت دهی آنلاین پزشک با PHP


آموزش HTML | توضیحات تگ ها

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

آموزش HTML |تگ DOCTYPE

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

<DOCTYPE html!>

آموزش HTML |تگ html

این تگ ستون اصلی صفحه شماست. این تگ همانند یک کاسه یا ظرف است که تمامی تگ های دیگر باید داخل آن قرار بگیرند. تنها تگی که نباید داخل این ظرف قرار بگیرد تگ <DOCTYPE html!>  است.

تگ <html> با تگ پایانی <html/> بسته می شود. فضای داخل این دو عبارت ، ظرف یا محدوده کدهای html شما را تعیین می کند به عبارتی کد های HTML شما باید داخل این دو تگ آغاز و پایان قرار بگیرند. در ادامه آموزش HTML تگ هد را بررسی خواهیم کرد.

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

آموزش HTML |تگ head

به هیچ عنوان نگران اصطلاحات و تگ های توضیح داده شده در آموزش HTML نباشید. به مرور همه آنها توضیح داده خواهد شد.

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

تگ هایی که اجازه درج در داخل این تگ را دارند به صورت زیر می باشند: (از توضیحات تگ ها نترسید، به مرور در آموزش HTML توضیح داده خواهند شد)

  • تگ <title> برای مشخص نمودن عنوان صفحه
  • تگ <style> برای اضافه کردن دستورات CSS یا همان زیباسازی
  • تگ <link> برای اضافه کردن فایل های خارجی
  • تگ <meta> ارائه اطلاعاتی خاص برای مرورگر ها و ربات ها و خزنده های موتورهای جستجو
  • تگ <script> برای اضافه کردن فایل ها یا دستورات جاوااسکریپت
  • تگ <base> برای مشخص کردن یک لینک پایه برای تمام لینک های موجود
  • تگ <noscript> برای کاربرانی که script مرورگر آنها غیر فعال است متنی جایگزین تعریف می نماید.

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

آموزش HTML |تگ title

این تگ عنوان صفحه شما را مشخص خواهد نمود. در مثال قبل چناچه به عکس دقت کنید در بالاترین قسمت صفحه عنوان Page Title را مشاهده خواهید نمود. این عبارت همان است که ما با تگ title نوشتیم :

<title>Page Title</title>

این تگ الزاما باید داخل تگ head نوشته شود. وجود این تگ برای سئو نیز الزامی است.

تگ body در آموزش HTML

تمامی چیزهایی که می خواهید به کاربر نمایش داده شود، باید داخل این تگ باشند. دقت کنید که این با تعریف تگ <html> متفاوت است. در معرفی تگ html گفتیم که باید تمامی تگ ها داخل آن قرار بگیرند اما حال در تعریف تگ body می گوییم که هر چیزی که در داخل این تگ باشد نمایش داده خواهد شد.

این تگ بدنه هر صفحه ای است و هرچیزی که بیرون آن باشد نمایش داده نخواهد شد. این تگ به تگ بدنه هم معروف است. این تگ بعد از بسته شدن تگ head ، باز شده و قبل از بسته شدن تگ html ، با تگ پایانی <body/> بسته می شود.

آموزش HTML |طبقه بندی تگ ها :

  • تگ های Inline Level

این نوع از تگ ها، به اندازه محتوای داخل خود جا می گیرند نه بیشتر. تگ های img  ، span ، a ، em و …  جزو تگ های Inline Level  هستند. فضای اشغالی توسط این تگ ها به اندازه محتوای داخل آنهاست.

  • تگ های Block Level

برخلاف تگ های inline level این نوع از تگ ها، یک سطر از صفحه را اشغال می کنند. مانند تگ های div ، p  ، form و … این تگ ها حتی اگر محتوای داخل شان کمتر از یک سطر باشد باز به اندازه یک سطر فضا اشغال می کنند.

آموزش HTML |تگ های Heading

پس از تگ بدنه در آموزش HTML به تگ هدینگ می رسیم. تگ های heading برای نوشتن عنوان ها یا تیتر های صفحه شما به کار می روند. این تگ ها در 6 سایز (h1 و h2 و  h3 و h4 و h5 و h6) در دسترس هستند. سایز بندی این تگ ها بر اساس درجه اهمیت است. به این صورت که تگ h1 بیشترین درجه اهمیت را دارد پس باید مهم ترین تیتر صفحه در آن نوشته شود و تگ h6 دارای کمترین اهمیت است. علاوه بر درجه اهمیت، هر چقدر از تگ h1 به تگ h6 میرویم سایز فونت نیز کوچکتر می شود. به مثال زیر دقت کنید:

و اما خروجی :

HTML به زبان ساده

تمامی تگ های Heading جرو تگ های Block Level هستند.

  • تگ h1

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

  • تگ h2

از این تگ برای نوشتن زیر عنوان ها یا تیتر های کوچک استفاده می شود. اهمین آن از h1 کم و از h3 زیاد است.

  • از سایر تگ های heading می توان در تیتر های کوچکتر استفاده کرد.

آموزش HTML |تگ p

به این تگ، تگ پاراگراف نیز گفته می شود. برای نمایش یک یا چندین پاراگراف از تگ P استفاده می شود. این تگ توسط تگ پایانی <p/> باید بسته شود و نیز جزو تگ های Block Level می باشد.

 وقتی شما یک متن را با تگ p ننمایش می دهید مرورگر ها بلافاصله پاراگراف را تشخیص داده و یک خط خالی به اول و آخر آن به عنوان حاشیه  یا margin  اضافه می کنند که این فاصله می تواند با دستورات CSS حذف شود.

نمونه استفاده از تگ p در آموزش HTML :

و خروجی :

آموزش HTML تگ P

آموزش HTML |خاصیت style استایل

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

  • روش خطی
  • روش داخلی
  • روش خارجی

ما در آموزش HTML به توضیح روش اول خواهیم پرداخت و شما در طول مقاله و آموزش با بقیه روش ها به خوبی آشنا خواهید شد.

در روش خطی ما می توانیم برای تگ هایمان یک خاصیت به نام style تعریف کنیم و سپس دستورات css مربوط به آن تگ را در داخل این خصوصیت بنویسیم. مثلا:

و در خروجی روی مرورگر داریم :

استایل در HTML

توجه نمایید که هر تگ p یک سطر را اشغال کرده و این همان خاصیت Block Level بودن آن است.

  • خاصیت منسوخ align برای تگ p

در HTML 4 و نسخه های قبل از آن خاصیتی به نام align به تگ p اختصاص داده بودند که به پاراگراف و متن جهت می داد. مثلا راست چین یا چپ چین و غیره . اما در HTML5 این خصوصیت منسوخ اعلام گردید و حال می توان این خصوصیت را به صورت یک دستور css در داخل خاصیت style تعریف کرد :

و در خروجی داریم:

آموزش HTML align برای تگ p

آموزش HTML |تگ i

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

این تگ باید با تگ پایانی <i/> بسته شود و جزو تگ های Inline Level است.

آموزش HTML |تگ em

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

این تگ باید با تگ پایانی <em/> بسته شود و جزو تگ های Inline Level است.

آموزش HTML |تگ b و تگ strong

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

می توانید تیتر های مهم را با تگ های  Heading که قبلا اشاره شد نشان دهید از قبیل h1 و h2 و … .و یا متن هایی که می خواهید روی آنها تاکید کنید باید داخل تگ <em> بنویسد و متن های مهم در داخل <strong> باشند اما تگ <b> را به همین راحتی استفاده نکنید. شما می توانید به جای این تگ از تگ <strong> استفاده کنید.

هر دو تگ جزو گروه Inline Level بوده و باید با تگ پایانی بسته شوند.

آموزش HTML |تقاوت تگ b و تگ strong

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

در مثال زیر به خروجی هر چهار تگ i و b و  em و strong و ترکیب آنها در آموزش HTML پرداخته ایم :

آموزش HTML |تگ br

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

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

br  یک تگ باز است به این معنی که دیگر نیاز نیست آن را ببندید اما اگر در آینده قصد داشتید با فرمت های XHTML کار کنید باید از الان و در این آموزش HTML به نوشتن این تگ به صورت <br /> عادت کنید.

مثال :

توجه: اگر دقت کنید در پاراگراف اول ما از دکمه Enter برای ایجاد خط جدید اضافه کرده ایم و در پاراگراف دوم از تگ <br /> اما این نکته که کدام یک عملا سطر جدید ایجاد خواهد کرد باید در خروجی مشاهده کنیم و خروجی :

آموزش HTML تگ br

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

آموزش HTML |تگ hr

در ادامه آموزش HTML به تگ hr می رسیم. از این تگ برای ترسیم خط افقی استفاده می کنیم. ما میتوانید در هر جای سایت که نیاز به یک خط افقی دارید از این تگ استفاده کنید اما در سئو توصیه می شود زمانی این خط را بکشید که می خواهید دو موضوع متفاوت را از هم جدا سازید.

این تگ جز تگ های Block Level بوده و نیز تگ پایانی ندارد، به عبارتی تگ باز است. در نسخه های قبل به صورت <hr> از این تگ استفاده می کردند که امروز هم در بین بعضی برنامه نویس ها رایج است.

توجه فرمایید که ما دو مطلب با موضوعات متفاوت داریم پس از تگ </ hr>  برای ایجاد خط استفاده نمودیم و خروجی :

آموزش HTML تگ hr

آموزش HTML |تگ small

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

این تگ با تگ پایانی <small/> بسته شده و جزو تگ های Inline Element است.

مثال:

و خروجی :

آموزش HTML تگ small

آموزش HTML |تگ sub

اسم این تگ از سه حرف ابتدایی کلمه subscript  به معنای زیرنویس گرفته شده است. از این تگ برای نوشتن پایین نویس ها استفاده می شود.  این تگ محتوای داخل خود را با سایز نیم یا 50 درصد و زیر خط فعلی نشان می دهد. از این تگ برای نوشتن فرمول های شیمیایی نیز استفاده می شود. مثال:

آموزش HTML تگ sub

این تگ با تگ پایانی <sub/> بسته شده و جزو تگ های Inline Element است.

آموزش HTML |تگ sup

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

این تگ با تگ پایانی <sup/> بسته شده و جزو تگ های Inline Element است.

آموزش HTML | کامنت نویسی در HTML

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

برای این کار کافیست یادداشت ها و کامنت های خود را در داخل این عبارت <–   –!> تایپ کنید. به مثال زیر دقت کنید:

پس از اجرای کد مشاهده می کنید که متن داخل کامنت در مرورگر نمایش داده نمی شود اما شما به محض دیدن آن، می فهمید که پاراگراف درمورد سایت آموزشی ProgramStore.ir است.

آموزش HTML |تگ a

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

خاصیت href در تگ a

هنگام استفاده از این تگ، لازم است آدرس مقصد لینک را در داخل خصوصیت href قرار دهید. به فرض چنانچه بخواهیم لینکی بسازیم که کاربر با کلیک روی “پی استور” به آدرس https://programstore.ir/ باید چنین عمل کنیم:

چنانچه مشاهده می کنید آدرس url در داخل href نوشته شد و کلمه نمایشی مابین تگ آغازی و پایانی.

خاصیت target در تگ a

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

  • blank_ : با قرار دادن این مقدار در خصوصیت target به مرورگر اعلام می کنید که لینک را در یک تب جدید باز کن
  • self_ : این مقدار به مرورگر اعلام می کند که آدرس لینک را در این تب باز کن. این مقدار همان مقدار default یا دایمی تگ a است. چنانچه شما خصوصیت target را برای لینک ننویسید این مقدار به صورت پیش فرض تنظیم خواهد شد.

تگ a  جزو تگ های Inline Level است و باید با تگ پایانی </a> بسته شود.

آموزش HTML و انواع مقصد در لینک دهی

  • به صفحات داخلی سایت

    • اگر فایل ما و مقصد برادر باشند

آموزش HTML تگ a

index.html فایل ماست و همانطور که در شکل بالا سمت چپ دیده می شود این فایل فرزند دایرکتوری HTMLProject  و ما می خواهیم در فایلمان لینکی بسازیم با نام HOME که وقتی کلیک  می شود به فایل home.html که در همان پوشه است و در واقع او هم فرزند دایرکتوری HTMLProject است، هدایت شود. به href تگ a دقت فرمایید که تنها نام فایل و پسوندش را درج کردیم. زیرا هر دو فایل برادر هستند.

    • مقصد و فایل ما عمو و برادرزاده باشند

آموزش HTML آموزش HTML تگ a آدرس دهی

مشاهده می کنید که فایل ما همان فایل index.html  و برادر دایرکتوری views  است. اما فایل مقصد یا  home.html فرزند دایرکتوری views است. به عبارتی index عموی فایل home است. پس در آدرس دهی در فایل عمو ابتدا نام پدر فایل مقصد سپس / و سپس نام فایل مقصد آورده می شود.

اما اگر بخواهیم از فایل برادرزاده به فایل عمو لینک بدهیم باید مطابق شکل زیر عمل کنیم:

آموزش HTML آموزش تگ a

همانطور که مشاهده می کنید ابتدا با علامت /.. به یک مرحله قبل یا به یک دایرکتوری قبل باز میگردیم و سپس اسم فایل مقصد را می نویسیم. به عبارتی وقتی علامت /.. را تایپ می کنیم می گوییم  از دایرکتوری views خارج شو و برو به دایرکتوری HTMLProject  و فایل index آنجاست.

حال فرض کنید  ترتیب فایل ها و دایرکتوری به صورت زیر باشد:

تگ a آدرس دهی

حال اگر بخواهیم داخل فایل index به فایل home  لینک بدهیم باید href تگ a  را اینگونه بنویسیم. اما اگر بخواهیم در داخل فایل home به فایل  index لینک بدهیم چه؟

آموزش HTML تگ a و آدرس دهی و لینک href

به href دقت کنید. می بینید که ما از /../.. استفاده کردیم که می شود گفت دو بار از /.. استفاده کرده ایم. این به این معنی است که گفته ایم از دایرکتوری views خارج شو و برو به دایرکتوری pages و سپس از دایرکتوری pages هم خارج شو و برو به دایرکتوری HTMLProjest و آنجا فایل index را خواهی یافت.

  • به یک بخش از صفحه فعلی

اگر صفحه فعلی شما طولانی است و می خواهید با قرار دادن یک لینک و کلیک کردن آن، کاربر به قسمتی در میانه ها یا اواخر صفحه هدایت شود، می توانید آیتم مبدا را با id اسم گذاری کنید و سپس در href تگ a  آدرس آن آی دی را بدهید.

فرض کنید مقاله ای داریم درمورد آموزش HTML که بسیار طولانی است. می خواهیم در انتهای مقاله لینکی قرار دهیم که کاربر با کلیک روی آن به ابتدای مقاله برود. پس ابتدا، جایی که قرار است کاربر هدایت شود را با id نامگذاری می کنیم:

سپس باید این لینک را آخر صفحه بگذاریم :

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

  • به آدرس خارجی

اگر بخواهیم یک صفحه از صفحات یک سایت دیگر را لینک دهی کنیم، باید آدرس آن صفحه را در قسمت href بیاوریم. به عنوان مثال می خواهیم وقتی کاربر روی کلمه “آپارات”  کلیک کرد به سایت آپارات برود :

    • شماره تلفن

می توان در قسمت href تگ a شماره تماس هم درج کرد :

    • آدرس ایمیل :

تگ img در آموزش HTML

تگ img همان مخفف کلمه image به معنی تصویر است پس بدیهی است که برای نمایش عکس ها و تصاویر از آنها استفاده می کنیم. این تگ با خصوصیت src آن قابل استفاده است. src مخفف کلمه  source به معنی منبع است. در این خصوصیت باید آدرس تصویر درج شود.

مثال:

آموزش HTML تگ img

خاصیت alt برای تگ img

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

پر کردن قسمت alt کمک بزرگی به سئوی سایت شما خواهد کرد.

خاصیت title

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

تنظیم طول و عرض تصویر در تگ img

می توان با خصوصیت های height  و width  به ترتیب ارتفاع و عرض تصویر را تعیین کرد :

پس از اجرای برنامه حتماً متوجه شدید که چه تغییراتی روی تصویر اتفاق افتاد و خروجی عجیبی برایتان رقم زد. فکر کنم به خوبی متوجه شدید که width و height کدام مقادیر هستند.

توجه : بهتر است شما فقط یک طرف تصویر را تغییر دهید به عبارتی یا width را تغییر دهید و یا height را. بعد دیگر تصویر به صورت اتوماتیک و متناسب با بعد تغییر یافته تغییر خواهد یافت. لازم به ذکر است که مقادیر width و height بر حسب پیکسل است.

قرار دادن تگ img در داخل تگ a

شاید شما بخواهید وقتی کاربر روی عکس کلیک می کند فایل عکس باز شود یا اصلا به سایت مربوط به آن عکس برود:

آموزش HTML تگ img در داخل تگ a

با این دستور با کلیک روی عکس فایل flower.jpg که در کنار آن است باز خواهد شد. خودتان امتحان کنید:

تگ img  جزو تگ های Inline Level بوده و نیز لازم نیست با تگ پایانی بسته شود.

آموزش HTML |تگ video

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

استفاده از این تگ بدون <source> امکان پذیر نیست:

آموزش HTML تگ video

 همانطور که مشاهده می کنید ابتدا تگ video را تشکیل دادیم و سپس داخل این تگ از تگ source استفاده کردیم. همانند تگ img گزینه src در تگ source نشانگر آدرس فایل ویدیویی است  و نیز باید مقدار type را متناسب با نوع فایل تنظیم کنید:

فرمت یا پسوند فایل ویدویینوع فایل
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

 باز یادآور می شویم که تمام روابط پدر و پسر و فلان وفلان در تگ a  در این src هم حاکم است. و اما درمورد پشتیبانی مرورگر های مختلف از انواع فرمت های ویدیویی داریم :

BrowserMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYES
from Firefox 21
from Firefox 30 for Linux
YESYES
SafariYESNONO
OperaYES
From Opera 25
YESYES

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

اگر ویدیو لود نشد:

آموزش HTML مشکل تگ video

اگر در شکل بالا دقت کنید عبارت “Your browser does not support the video tag.”  را نیز می بینید. این عبارت بین تگ آغاز و پایان video و پس از source نوشته شده است اما این عبارتی تنها زمانی قابل مشاهده است که فایل ویدیویی شما به هر دلیلی بالا نیاید و لود نشود. پس شما می توانید از عبارت هایی نظیر این در هنگام لود نشدن ویدیو استفاده کنید.

توجه: لازم به ذکر است که خصوصیت های زیر متعلق به تگ video  است نه تگ source

خاصیت controls

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

خاصیت loop

این خصوصیت برای آنست که ویدیو بعد از اتمام دوباره اتوماتیک وار پخش شود. به نوعی همان auto repeat است.

تنظیم طول و عرض تگ video

مانند تگ img شما در تگ video نیز قادر به تغییر ارتفاع و عرض ویدیو می باشید که به ترتیب با خصوصیت های height و width با واحد پیکسل تعیین می شوند:

آموزش HTML تنظیم طول و عرض تگ video

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

خصوصیتمقدارتوضیح
autoplayبدون مقداردر صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود
controlsبدون مقدارافزودن دکمه کنترل ویدیو مثل استارت، استاپ، تنظیم صدا و …
heightپیکسلتنظیم ارتفاع ویدیو
widthپیکسلتنظیم پهنای ویدیو
loopبدون مقداردر صورت وجود پس از اتمام ویدیو دوباره پخش خواهد شد
mutedبدون مقداربی صدا کردن ویدیو به صورت پیش فرض
posterآدرسآدرس تصویری که می خواهید به عنوان پیش نمایش ویدیو باشد
Preloadبدون مقدارویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay تنظیم شده باشد این خاصیت نادیده گرفته می شود.
srcآدرسآدرس فایل ویدیویی که باید پخش کنیم

نکته مهم درمورد تگ video

این مطلب به عنوان یک مطلب تکمیلی و حرفه ای است. می توانیم تگ video را به صورت زیر هم استفاده کنیم:

آموزش HTML نکته مهم درمورد تگ video

اما اشکال کار چیست و چرا اغلب تگ ویدیو اینگونه به کار برده نمی شود؟

در جدول فرمت ها دیدیم که پسوند ogg در مرورگر های کروم و فایرفاکس پشتیبانی می شود اما برای مرورگر های سافاری و Internet Explorer بدون مفهوم است. پس کروم و فایرفاکس ویدیو را لود خواهند کرد اما سافاری و Internet Explorer خیر.

تگ source به شما این امکان را میدهد که شما به چندین فایل لینک بدهید. پس میتوانید ویدیوی موردنظر را در دو پسوند mp4 و یکی از پسوند های دیگر مثلا ogg تهیه نموده و با استفاده از تگ source  به هردوی آنها اشاره کنید. مرورگر اولین فایلی که می شناسد را انتخاب خواهد کرد. اگر به هر دلیلی مرورگر فایل اول را نشناسد، آنگاه به سراغ فایل دوم رفته و آن را اجرا خواهد کرد. پس می توانید مطمئن باشید که ویدیوی شما لود خواهد شد :

آموزش HTML پشتیبانی در تگ video

آموزش HTML |تگ iframe

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

Iframe یک پنجره یا قاب در صفحه شما ایجاد می کند که موارد ذکر شده در آن نمایش داده می شوند. مثال :

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

خاصیت src در تگ iframe

src مهمترین خصوصیت iframe است. همانگونه که در تگ img از src استفاده کردیم در این خصوصیت نیز باید آدرس عکس، ویدیو و یا صفحه سایت مورد نظر را وارد کنیم. ابتدا می خواهیم یک عکس که در دایرکتوری خود پروژه است (کنار فایل index.html) وارد کنیم:

آموزش HTML خاصیت src در تگ iframe

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

مشاهده می کنید که عکس مورد نظر وارد شد اما با طول و عرض کم که در بحث های بعدی به تنظیم طول و عرض آن نیز خواهیم پرداخت. می توانیم یک فایل ویدیویی هم که در همان دایرکتوری کارمان هست را وارد کنیم:

آموزش HTML تگ iframe برای ویدئو

اینجا نیز آدرس فایل ویدیویی را در src وارد کردیم. ویدئوی video.mp4 یک فایل هست که قبلاً در دایرکوتری قرار دادیم. برای مشاهده اجرای برنامه زیر را ببینید.

خاصیت width و height و تنظیم ابعاد تگ iframe

می توان عرض و ارتفاع پنجره تگ iframe را با این خصوصیت تغییر داد. می خواهیم در همان عکس تصویر را کمی بزرگتر کنیم:

آموزش HTML طول و عرض iframe

توجه داشته باشید که مقادیر width و height هر دو بر اساس پیکسل می باشند. در خروجی می توانید نتیجه را پس از اجرای برنامه مشاهده کنید.

خاصیت name

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

در آموزش HTML مشاهده می کنید که ابتدا یک iframe تعریف کردیم که عکس یک گل را نشان خواهد داد و نیز یک نام با خصوصیت name به آن اختصاص دادیم تا در بتوان در لینک زیرش استفاده کنیم. اما در پایین لینکی تعریف کردیم که خصوصیت target آن همان نام iframe بالایی است. به عبارتی وقتی روی کلمه PStore کلیک شود، سایت programstore در قاب بالایی نشان داده خواهد شد:

حذف border از تگ iframe

اگر در مثال های بالا به خروجی ها دقت کنید، یک خط یا همان border در اطراف قاب یا پنجره مشاهده خواهید نمود. و شاید بخواهید این خط و خطوط را از اطراف قاب حذف کنید. اینجاست که خصوصیت style به کارتان خواهد آمد :

بدین ترتیب حاشیه خط مانند از اطراف قاب حذف خواهد شد.

آموزش HTML |اضافه نمودن ویدیوی آپارات

برای اضافه کردن یکی از ویدیوهای سایت آپارات می توان از تگ iframe استفاده کنیم:

ابتدا یک تگ iframe  ایجاد کنید ولی قسمت src آن را خالی بگذارید.

یکی از ویدیوهای سایت آپارات را باز می کنیم:

آموزش HTML اضافه نمودن ویدیوی آپارات

در شکل بالا قسمت سه نقطه که دورش خط مشکی کشیده شده است را کلیک کرده و سپس دریافت کد امبد را انتخاب می کنیم:

آموزش HTML اضافه نمودن ویدیوی آپارات

سپس مطابق شکل زیر گزینه “کد آی فریم” را فعال کرده(مرحله 1) و سپس کلید کپی را کلیک می کنیم(مرحله2) :

آموزش HTML اضافه نمودن ویدیوی آپارات

کد کپی شده را در جایی paste  می کنیم و از از میان کد ها src را پیدا کرده و مقدارش را در iframe ای که خودمان قبلا ایجاد کرده ایم می گذاریم. نهایتا در مرورگر ویدیوی انتخابی شما نمایش داده خواهد شد. در این حالت می توانیم حتی طول و عرض و سایر استایل ها را به ویدیو اضافه نماییم.

آموزش HTML |نمایش ویدیوهای یوتیوب در سایت

در ادامه آموزش HTML می رسیم به نمایش ویدئوها یوتیوب در سایت. جهت نمایش هر یک از ویدیو های youtube مراحل زیر را دنبال کنید:

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

مطابق شکل بالا گزینه share را کلیک کنید. از پنجره باز شده گزینه Embed را انتخاب نمایید:

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

مطمئنا پنجره زیر باز خواهد شد که شما باید گزینه copy را کلیک بفرمایید :

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

حال می توانید در هر قسمتی از کد هایتان، چیزی را که کپی کرده اید، paste کنید. مشاهده خواهید کرد که شما در واقع یک تگ iframe با یک src و استایل های خاص کپی کرده بودید. و در مرورگر نیز خواهید داشت :

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

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

آموزش HTML | لیست در HTML و تگ ul و li

ul مخفف عبارت Unordered List به معنای لیست نامرتب است. تگ ul و li برای ایجاد لیست هایی به کار می رود که ترتیبی بر اساس شماره گذاری ندارد. در کنار همه آیتم های لیست شما، تنها یک داریره توپر مشکی خواهد افتاد.

در آموزش HTML برای ایجاد این لیست، ابتدا یک تگ ul باز  کرده و مابین تگ آغازی و پایانی ul ، تگ li را ایجاد می کنیم. سپس موارد لیست داخل تگ li نوشته خواهد شد:

خاصیت type

با استفاده از این خصوصیت می توان شکل مربوط به دایره های توپر را تغییر داد. مثلا اگر بخواهیم این دایره ها به صورت مربع درآید از مقدار square  برای type استفاده کنیم:

در زیر مقادیری که می توان برای خصوصیت type  اختصاص داد و عملکرد هر مقدار توضیح داده شده است:

مقدارتوضیح مقدار
diskاین مقدار پیش فرض است و باعث نمایش دایره توپر می شود.
circleاین مقدار به جای دایره توپر، دایره توخالی نمایش خواهد داد.
squareاین مقدار به جای دایره توپر، مربع توپر نمایش خواهد داد.
noneاین مقدار هیچ علامتی را نشان نخواهد داد.

لازم به ذکر است که خصوصیت type در HTML5 دیگر پشتیبانی نمی شود اما باز می توانیم تمامی مقادیر بالا را در خصوصیت style بدین ترتیب وارد کنیم :

آموزش HTML |تگ ol و لیست مرتب در HTML

ol مخفف عبارت Ordered List و به معنای لیست مرتب است. زیرا لیست هایی که با این تگ ساخته می شوند می توانند بر اساس اعداد، حروف انگلیسی و یونانی مرتب سازی شوند. لازم به ذکر است که استفاده ار این تگ نیز مستلزم استفاده از تگ li است. در زیر می توانید مثال کوچکی از کاربرد این تگ را از آموزش HTML ببینید:

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

خاصیت type

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

در جدول زیر مقادیری که می توان برای type انتخاب نمود، توضیح داده می شوند:

مقدارتوضیح مقدار
1این مقدار لیست را با اعداد مرتب خواهد کرد.
aاین مقدار لیست را با حروف کوچک انگلیسی مرتب خواهد کرد.
Aاین مقدار لیست را با حروف بزرگ انگلیسی مرتب خواهد کرد.
iاین مقدار لیست را با حروف کوچک رومی مرتب خواهد کرد.
Iاین مقدار لیست را با حروف بزرگ رومی مرتب خواهد کرد.

خاصیت reversed

Reversed به معنای معکوس شد است. پس طبیعی است که با وارد کردن این خصوصیت لیست معکوس خواهد شد.

خاصیت start

حتی می توان تعیین کرد که لیست شما از کدام شماره شروع  شود.

آموزش HTML | تگ div

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

در بحث آموزش HTML می توان گفت تگ div به تنهایی استفاده نمی شود بلکه باید داخلش از تگ های دیگر نیز استفاده کرد. مثال:

مشاهده می کنید که این تگ باید با تگ پایانی <div/> بسته شود.

این تگ می تواند با خصوصیت های class و id تعریف شود تا بتوان در فایل های css و js به آنها استایل داده شده و مورد استفاده قرار گیرند. در واقع class و id  نام تگ برای شناسایی است. بهتر است برای بخش های مختلف صفحه یک div با کلاس جداگانه تعریف کرد.

آموزش HTML |تگ span

از این تگ برای ایجاد تغییرات inline در بعضی از المان ها استفاده می شود. اگر این تعریف برایتان اندکی نامفهوم است شما را به مشاهده مثال زیر دعوت می کنم :

مثال : در آموزش HTML فرض کنید می خواهیم در مرورگر عبارت ProgramStore را تایپ کنیم اما با این وصف که  رنگ کلمه Program آبی باشد ولی رنگ کلمه Store قرمز، اما به شرطی که کل کلمه ProgramStore در یک خط و بهم پیوسته باشد بعبارتی Inline  باشند.

راه حل : اگر هر یک از کلمات را در یک تگ p  یا h قرار دهیم به جهت BlockLevel  بودن این تگ ها Program و Store در یک سطر نخواهند افتاد. پس راه حل واقعی استفاده از span است :

تگ span جزو تگ های Inline Level  است و باید با تگ پایانی </span> بسته شود.

آموزش HTML | تگ table برای ایجاد جدول در HTML

در ادامه آموزش HTML با نحوه ایجاد جدول آشنا می شویم. تگ table جهت ایجاد جدول ها در HTML استفاده می شود. به کاربردن این تگ مستلزم استفاده از تگ های دیگری است در زیر به آنها می پردازیم:

تگ tr

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

تگ td

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

توضیح: در جدول بالا ابتدا اقدام به تعریف سطر با استفاده از tr می کنیم سپس سلول های داخل هر سطر را برای افزودن اطلاعات با تگ td ایجاد کردیم. پس از اجرا مشاهده می کنیم که در جدول بالا نام، نام خانوادگی و سن هستند. اما این تیتر ها در جدول موجو نیستند. برای افزودن سرتیتر ها از تگ th استفاده می کنیم.

تگ th

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

می توانید با استفاده از خصوصیت  style به جدول border اضافه کنید:

می توان طول و عرض جدول را هم تغییر داد:

تگ caption

همچنین می توانیم برای جدول عنوان بنویسیم. این کار توسط تگ caption داخل تگ table  صورت می گیرد. قبلا گفته بودم که تگ table به تنهایی قدرتی ندارد.

تگ tbody و تگ tfoot

حال در بحث آموزش HTML نوبت تگ tbody و تگ tfoot است. علی رغم اینکه جدول های بالا به خوبی کار خواهند، با این حال نیاز داریم جدول های حرفه ای تری بنویسیم. به طور مثال فرض کنید می خواهیم دخل و خرج هر ماه را به صورت یک جدول در بیاوریم. مطمئنا ما هم در هر ستون نیاز به تیتر و نهایتا نیاز به جمع هر ستون داریم. به صورت واضح تر، ما باید میزان دخل هر سال و خرج آن سال را در یک سطر ایجاد کنیم. اینجاست که ما نیاز به تگ های tbody و tfoot پیدا خواهیم کرد:

تگ meta جزو مهمترین بخش های آموزش HTML

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

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

مشاهده متا تگ های هر صفحه

 البته می توان این متا ها را از طریق inspect گرفتن از صفحه مشاهده نمود. برای ان کار کافیست روی صفحه کلیک راست کرده و گزینه Inspect را بزنید:

آموزش HTML متا تگ ها

 متا تگ ها را می توان با source گرفتن از صفحه نیز مشاهده کرد . برای ان کار کافیست روی صفحه کلیک راست کرده و گزینه View page source را بزنید:

آموزش HTML متا تگ

آموزش HTML | متا تگ charset

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

آموزش HTML |متا تگ viewport

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

آموزش HTML |متا تگ keywords یا متای کلمات کلیدی

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

در مثال بالا کلمات کلیدی ما، HTML و CSS و JavaScript است.

آموزش HTML |متا تگ Author

این متا تگ به معرفی نویسنده یا گردآورنده صفحه می پردازد. روش استفاده از این تگ به این صورت است که در خصوصیت name حتما باید عبارت author تایپ شود اما در خصوصیت content نام خود یا نویسنده را می نویسید.

آموزش HTML |متا تگ Description یا توضیحات

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

نتیجه گیری

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

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

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

مطالب زیر را حتما بخوانید

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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