html چیست ؟

img
img
img
img
shape
shape
blog-details
08
شهریور
html چیست ؟
نویسنده : علی قربانی
دسته بندی : Html
سطح مقاله : مقدماتی
زمان مطالعه : 10 دقیقه

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

فهرست محتوای مقاله

  • مقدمه
  • تاریخچه
  • آیا اچ تی ام ال برنامه نویسی است ؟
  • قالب کد Html چه شکلی است ؟
  • Html 5 چیست ؟
  • قطعه کدی ساده از Html
  • چه پسوندهایی را در Html می توان استفاده کرد.

تاریخچه

برای شروع داستان Html می بایست به حدود 30 سال پیش بازگردیم به سرن جایی که پایه و اساس علم نوین خود بوده است. به زمانی که فیزیکدان Tim Berners-Lee تمرکز کار خود را بر روی Tag 18 گذاشت و اولین نسخه از صفحه Html را ایجاد کرد. هدف اولیه مهندس Lee صرفا به اشتراک گذاشتن پرونده های الکترونیکی متنی موجود در مرکز فناوری CERN جهت دسترسی هر چه آسانتر محققان و همکاران خود بوده است و بر همین مبنا نیز در دوسال بعد از پایه ریزی این طرح موفق به تولید اولین مرورگر وب شده است. اولین سری از نسخه Html بر اساس 18 تگ پیشنهادی آقای لی بوده است که بعد ها در نسخه های جدیدتر بر اساس توسعه و پیشرفت شبکه جهانی وب برخی از این تگ ها دیگر پشتیبانی نشده و یا با مفهومی جدید تر جایگزین شده است. مراحل توسعه زمانی اچ تی ام ال عبارتند از:

  • Html 2 در تاریخ 24 نوامبر 1995
  • Html 3 در تاریخ 14 ژانویه 1997
  • Html 4 در تاریخ 18 دسامبر 1997
  • Html 5 در تاریخ 28 اکتبر 2014

آیا Html زبان برنامه نویسی است ؟

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

قالب کد Html چه شکلی است

عکس فوق نمایشی از یک تگ لینک باز و بسته است که در صفحات اچ تی ام ال بسیار کاربردی است. در واقع این لینک از اجزا و یا Component های فراوانی تشکیل شده است. در اینجا مانند تمامی تگ های دیگر اچ تی ام ال در تگ باز <a> یک صفت نام (attribute name) قرار دارد که لینک در درون آن نوشته می شود و در انتهای تگ بسته نیز همواره یک “/” جهت بستن تگ قرار می گیرد. البته می بایست این موضوع مد نظر قرار گیرد که در تمامی tag های اچ تی ام ال برای تگ های تکی مانند img این موضوع صادق نیست. اغلب تگ های اچ تی ام ال با علامت بزرگتر و کوچکتر نشانه گذاری می شوند و در واقع می توان گفت که مروگر ها تنها بین این دو تگ و یا به عبارتی برچسب را خوانده و در صورتی که نقصی در درون آن ها وجود داشته باشد آن را به صورت متن به نمایش در می آورند.

تکنولوژی Html 5

اچ تی ام ال 5 خیلی شبیه به html 4 است تنها تفاوت آن اضافه شدن برخی تگ های متنی و مالتی مدیا است. به عنوان می توان به اضافه شدن tag اجرای ویدئو یا انتقال کششی (drag & drop) است که البته قبلا توسط کد نویسی های جاوا اسکریپت امکان آن وجود داشت. از نظر پشتیبانی تمامی مرورگرهای فعلی از جمله فایرفاکس، کروم، اوپرا و حتی ورژن های به روز اینترنت اکسپلورر چه نسخه های موبایلی آن و چه نسخه های کامپیوتر پشتیبانی کامل از ویژگی های Html 5 را در خود دارند.

قطعه کدی ساده از Html

جهت آشنایی هر چه بهتر کاربرانی که تازه وارد دنیای بزرگ طراحی وب شده اند به توضیح قسمتی از کدهای Html می پردازیم.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Example page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is an <b>example</b> of a basic HTML page.</p>
 </body>
</html>

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

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

اگر بخواهیم یک پله به داخل رویم بعد از تگ اصلی شاخه بندی های بدنه سند اچ تی ام ال شروع می شود در اولین قدم با تگ head مواجه می شویم. در این تگ کلیه اطلاعات سند قرار می گیرد که برای کاربر قابل مشاده نیست و تنها مرورگرها قابلیت دسترسی به آن را دارند. در این قسمت اطلاعاتی همچون مسیر فایل های css و js پروژه، نام طراح پروژه، سرتیتر یا title پروژه، توضیحات سئو و کلمات کلیدی قرار می گیرد. در قدم بعد با قسمت body مواجه می شویم در این تگ کلیه متون، عکس ها و لینک ها در قالب بندی قسمت های مختلف یا همان div قرار می گیرند. که قابل مشاهده برای کاربران در مرورگر است. جهت آشنایی با تگ های که در این بخش قرار می گیرد این مقاله مراجعه نمائید.

چه پسوندهایی را می توان در html استفاده کرد.

عکس

  • Png
  • Jpg
  • Jpeg
  • SVG

مالتی مدیا

  • Mp4
  • Mp3
  • Ogg
  • Webm
  • Flv
  • Swf

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