تاریخچه زبان نشانه گذاریhtml در طراحی سایت
در این مقاله به تشریح زبان برنامه نویسی html میپردازیم . html یا Hyper Text Mark up Language یک زبان برنامه نویسی هست که برنامه نویسان از ابزارهای آن برای طراحی وب سایت استفاده میکنند .
اولین ورژن این زبان برنامه نویسی، ابتدا در سال 1993 توسط Tim Berner Lee نوشته شد که بعد از آن هم نسخه های دیگری از آن در سال های بعد منتشر شد . در نهایت html 4.01 در سال 1999 به عنوان نسخه رسمی منتشر شد . در گذشته افزونه هایی هم برای html استفاده میشد که اصطلاحا به xhtml معروف است این زبان مشابه با html 4.01 است ودر سال 2002 از یک زبان xml یا extensive mark-up language نوشته شده که قوانین آن مشابه اما محدودتر از خود html میباشد و محتوای آن قابلیت share در اپلیکیشن ها را هم دارا است. امروزه از آخرین نسخه ی این زبان کد نویسی معروف به html5 که در سال 2014 منتشر شد استفاده می شود .
Hyper Text در اصل به معنی لینک هایست که با کلیک بر روی آنها به یک صفحه ی وب سایت منتقل می شویم و Mark-up Language به معنی مجموعه ای ازابزارها است که میتواند بخش های مختلف یک وبسایت نظیر header, footer و المان های دیگر layout ، وبسایت را مشخص کرد . این طراحی توسط المان های html که در درون تگ ها قرار میگیرند به دست می آید .
اگر طراحی یک وبسایت را نظیر ساختن یک آپارتمان فرض کنید ، انگاه متوجه خواهید شد که html مانند سازه ی آهنین ساختمان ،نقش ریشه و شالوده ی یک وبسایت را بازی میکند . web browser شما با هر سرچی که انجام میدهید فایل های html را از فضای ذخیره ای سرور درخواست میکند تا بتواند سایت مورد نظر شما را فراخوانی کند . به طور کلی این زبان برنامه نویسی با سایر زبان ها نظیر CSS و JavaScript گره خورده است و برای طراحی یک وب سایت میبایست از هر 3 آن ها استفاده نمود . CSS شکل و رنگ و نمای یک وب سایت یا به عبارتی نمای یک ساختمان مدل پنجره های آن ،رنگ دیوارها و غیره را نشان میدهد . JavaScript نیز عملکرد و دستور را برای کد های دستوری html فراهم میکند که این امکان را به شما میدهد که هر چیزی که در این وبسایت طراحی کرده اید ، کاربرد خاصی را برای شما انجام دهد.
تگ های html اصطلاحا همان دستورهای برنامه نویسی هستند که درعلامت های کوچک تر و بزرگتر قرار میگیرند و هر کدام از این تگ ها کاری را برای ما انجام میدهند . هر تگ دستوری که در این زبان برنامه نویسی نوشته میشود باید بسته شود . به مثال زیر دقت کنید:
<p>This is the symbol of Paragraph element.</p>
برای نوشتن یک کد با html نیاز به editor های مخصوص به آن دارید ، این editor ها میتواند شامل یک فایل notepad یا نرم افزار Visual Studio باشد که میتوانید با آن ها برنامه های خود را به اجرا درآورده و نتایج آن را مشاهده کنید.
برای نوشتن یک کد html یک فایل notepad بازکنید و آن را با پسوند .html یا .htm ذخیره کنید . آنگاه با راست کلیک برروی آن و زدن open with میتوانید google chrome را انتخاب کرده و حاصل کد خود را ببینید . همچنین میتوانید بعد از ذخیره فایل یاد شده آن را در برنامه visual studio فراخوانی کرده آنجا کد نویسی را انجام دهید و سپس می توانید نتیجه کار خود را ببینید
برای نوشتن کدبرنامه نویسی html نیاز به یک ساختار مشخص دارید :
- DTD
- Root Element
- head
- body
این ها ،عواملی هستند که معمولا یک چارچوب کد html را تشکیل میدهند .
Document type declaration (DTD):
این بخش به ما نشان میدهد که وبسایت مورد نظر ما با چه ورژنی از html نوشته شده است . این بخش با تگ <DOCTYPE html> نمایش داده میشود که در ابتدای کد قرار میگیرد .
Root Element :
این قسمت محفظه ی اصلی ما برای نوشتن کد های دستوری این زبان برنامه نویسی میباشد در این قسمت شما حتی میتوانید زبان وب سایت خود را مشخص کنید . به فرم زیر دقت کنید :
<html lang="en">
.
.
.
</html>
Head:
المان <head> به طور کلی میان html و body قرار میگیرد و حاوی اطلاعات توصیفی وبسایت مسلط به metadata میباشد . به طور کلی تگ های زیر میتواند نقشی اساسی در بیان اطلاعات توصیفی وبسایت باشند
<title> : بیان عنوان وبسایت
<style>: استایل وبسایت نظیر نوع خط و رنگ و پشت زمینه و ... را مشخص میکند.
<link>: آدرس منابعی که در طراحی سایت استفاده میکنیم را به جستجوگر میدهد .
<meta>: کیوورد ها ، نام نویسندگان و ... را برای ما مشخص میکند .
<base> : ما را به default URL ارجاع میدهد .
Body:
قسمت اصلی هر کد html مربوط به body آن میباشد که در این قسمت تمامی اطلاعاتی که بر روی وبسایت نمایش داده میشود نوشته خواهد شد . به طور کلی این قسمت تمامی آیتم های layout یک وبسایت که شامل Header , Footer, Main Content , Side bar به اضافه ی محتوای قابل نمایش در هرکدام از آن ها را نمایش میدهد .
مثال زیر به خوبی ساختار کدهای ساده برنامه نویسی html را به ما نشان دهد
فارسی
(1) پیام
بارانا کوثری
چقدر مختصر و عالی بود برای من که هنوز با دنیای وب آشنا نشدم ممنونم
مدیر
خیلی م عالی سوالی بود درخدمتیم