0

مجله آموزشی

کمپین آموزشی بی لرن > مجله آموزشی > مطالب طراحی سایت > مطالب html و css > HTML چیست و چه کاربردی دارد؟ آشنایی کامل با زبان html

HTML چیست و چه کاربردی دارد؟ آشنایی کامل با زبان html

4 شهریور 1399
ارسال شده توسط
مطالب html و css ، مطالب طراحی سایت
3.83k بازدید
HTML چیست | بی لرن
شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم

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

HTML چیست؟

HTML | بی لرن

 

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

 

تاریخچه زبان HTML

زبان html برای انتقال اطلاعات از روش رمزنگاری شده در دنیای اینترنت مورد استفاده قرار می گیرد. این زبان برای اولین بار در سال 1989 میلادی توسط تیم برنرز-لی (Sir Timothy John Berners-Lee) منتشر شد که باعث اختراع شبکه جهانی وب گردید. HTML با گذشت زمان تغییرات بسیاری در شیوه های کد نویسی پیدا کرده است که نسخه های زیادی از آن را معرفی شده است.

نسخه های زبان HTML

  • HTML1

اولین نسخهHTML می باشد که در سال 1991 به بازار معرفی شد و  دارای 18 برچسب است. عملکرد آن بصورت نوشتاری و ارائه مطالب بسیار محدود می باشد.

  • HTML 2

این نسخه به عنوان دومین نسخه HTML در سال 1995 روانه بازار شد که علاوه بر پشتیبانی از ویژگی های نسخه قبلی خود از ویژگی های جدیدی نیز برخوددار می باشد.

  • HTML 3.2

این نسخه همراه با CSS در سال 1997 در بازار معرفی شد، که باعث ایجاد انقلاب در دنیای HTML گردید. 

  • HTML 4.01

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

  • XHTML

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

  • HTML5

HTML5 در سال 2014 به عنوان آخرین و جدید ترین نسخه html به کاربران و برنامه نویسان معرفی شد. به دلیل داشتن عناصر و ویژگی های جذاب و باورنکردنی در خود، روز به روز در حال پیشرفت می باشد. 

 

کاربرد های HTML 

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

  • ایجاد و توسعه صفحات وب
  • تاثیرگذاری بر سئو سایت
  • استفاده در توسعه بازی

 

html چطور کار می کند؟

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

 

ویرایشگر های html

برای کدنویسی و ویرایش فایل های اچ تی ام ال باید از یک نرم افزار استفاده کنید. نرم افزارهای بسیاری برای انجام این کار وجود دارد از جمله ++Notepad و Dreamweaver و webstorm که شما برای راحتی کدنویسی می توانید از یکی از آن ها استفاده نمایید.

 

پیاده‌سازی عناصر در html

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

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

 

<html>
<body>
 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
 
</body>
</html>

 

ساختار سند html

ساختار تشکیل دهنده سند در زبانHTML به صورت زیر می باشد:

  • ساختار سند

  1. تگ <DOCTYPE html!>
  2. تگ <html></html>
  3. تگ <body></body>

  • تگ ها (برچسب ها)

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

  • ویژگی (Attribute)

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

 

بنر آموزش رایگان html و css | بی لرن

 

انواع تگ های HTML

html نیز تگ های مختلفی دارد که هرکدام کاربرد متفاوتی دارند.

تگ سرتیتر

این تگ ها از <h1> تا <h6>تشکیل شده اند که از بزرگترین تا کوچکترین تیتر محتوا را نمایش می دهند.

 

<h1>بزرگتر</h1>
 <h2>بزرگ</h2>
 <h3>کمی کوچک</h3>
 <h4>کوچک</h4>
 <h5>ریز</h5>
 <h6>بسیار ریز</h6>

پاراگراف‌ها

<p/>  این برچسب محتوای پاراگراف می باشد. <p>

enter (پرش به خط بعد)

تگ <br> در html برای رفتن به خط بعدی استفاده می شود.

ایجاد لینک

تگ <a> با ویژگی href  برای لینک دهی استفاده می شود.

 

<a href=“https://www.wikipedia.org/”>A link to Wikipedia!</a>

کامنت ‌ها

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

 

<!– This is a comment –>

تگ div

این به برنامه نویس این امکان را می دهد که یک یا چندین  عنصر یا بخش را در صفحه وب ایجاد نماید. 

 

<div>
<h2>بزرگ</h2>
<p>Salam</p>
</div>

 

دسترسی یکجا به لیست کامل تگ‌ هایHTML

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

 

تگ ها توضیحات
<!–…–>   برای قراردادن کامنت یا توضیحات در میان تگ ها استفاده می شود.
<!DOCTYPE> نوع سند را تعریف می کند.
<a> لینک را تعریف می کند.
<abbr> مخفف اختصاری یا مخفف را تعریف می کند.
<blockquote> بخشی را تعریف می کند که از منبع دیگری نقل شده است.
<address> اطلاعات تماس را برای نویسنده / صاحب یک سند تعریف می کند.
<applet> در HTML5 پشتیبانی نمی شود. به جای آن از <embed> یا <object> استفاده کنید.
<area> منطقه ای را در داخل نقشه تصویر تعریف می کند.
<article> مقاله ای را تعریف می کند.
<aside> برای تعریف sidebar استفاده می شود.
<audio> محتوای صدا را تعریف می کند.
<b> متن را برجسته (bold) تعریف می کند.
<button> یک دکمه قابل کلیک را تعریف می کند.
<br> enter یا رفتن به خط بعد را تعریف می کند.
<bdo> جهت متن فعلی را نادیده می گیرد.
<body> بدنه اصلی html برای نمایش دیگر تگ ها می باشد.

 

مشاهده گر HTML چیست و چگونه به آموزش ما کمک می‌کند؟

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

 

نمونه‌ای از یک سند HTML

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

 

<!DOCTYPE html>
<html>
  <head>
    <title>کمپین آموزشی بی لرن</title>
  </head>
  <body>
    <p>به کمپین آموزشی بی لرن خوش آمدید</p>
  </body>
</html>

 

تگ head مخفف header به معنی سربرگ می باشد که سومین تگ ساختار html به حساب می آید. این تگ به وسیله تگ title نام وب سایت را نمایش می دهد که در کد بالا نمایش دهنده عنوان “کمپین آموزشی بی لرن” می باشد.

تگ body بدنه html می باشد و برنامه نویس تمام کد های مورد نظر خود را در این قسمت می نویسد و ما در این سند متن “به کمپین آموزشی بی لرن خوش آمدید” را به عنوان متن نمایش داده شده در وب انتخاب نموده ایم.

 

زبان HTML چه رابطه‌ای با زبان های CSS و JavaScript دارد؟

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

 

مزایا و معایب HTML

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

مزایایHTML

  • یادگیری راحت و لذت بخش
  • قابلیت اجرا در تمام مرورگرها
  • کد باز و رایگان بودن
  • ادغام پذیری آسان با زبان‌های تحت سرور همانند php

معایبHTML

  • وابسته بودن به زبان‌های تحت سرور برای ارتباط با برنامه نویس
  • پشتیبانی کردن مرورگرهای قدیمی
  • نداشتن قواعد منطقی برنامه نویسی
  • طراحی هر صفحه به صورت جداگانه 

 

چرا HTML یک زبان برنامه نویسی نیست؟

زبان برنامه نویس به زبانی گفته می شود که از دستورات شرطی، حلقه ها و دیگر دستورات این سبکی استفاده نماید. چون در html و css، این قوانین وجود ندارد جزء زبان های برنامه نویسی به حساب نمی آیند. از این رو به آن یک زبان نشانه گذاری گفته می شود.

 

سخن پایانی

هرآنچیز که لازم است تا از html بدانید را در این مقاله از صفر تا ۱۰۰ توضیح دادیم و شما به راحتی می توانید با مفاهیم اولیه اچ تی ام ال آشنا شده و به دنیای برنامه نویسی و طراحی سایت وارد شوید.

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید.
شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم
اشتراک گذاری:
برچسب ها:

مطالب زیر را حتما مطالعه کنید

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

شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم