مقدمه ای برای برنامه نویسی HTML – برنامه نویسی HTML بخش سوم
زبان HTML بر گرفته از عبارت Hyper Text Markup Language به معنای «زبان نشانه گذاری هایپرتکس» است. این زبان برای ساختاردهی به محتوای وب سایت ها با استفاده از عناصر (Elements) گوناگون که گاهی تگ (Tag) نیز نامیده می شوند، به کار می رود. این عناصر می توانند بخش های مختلفی از یک صفحه وب مانند عناوین، پاراگراف ها، لینک به صفحه های دیگر، لیست ها، تصاویر، جداول و غیره را مشخص کنید. این عناصر به مرورگر شما می گویند که چطور باید محتواها را در صفحه وب نمایش دهد و همچنین چطور باید آن ها را فرمت دهی کند.
در واقع زبان HTML ترکیبی از هایپرتکس + زبان نشانه گذاری است.
- بخش هایپرتکس (Hyper Text): اشاره به این دارد که صفحه هایی که در وب وجود دارند همگی به همدیگر مرتبط هستند. به همین خاطر شما می توانید به کمک لینک های مختلف به صفحه های دیگر بروید. مفهوم ارتباط یا لینک در زبان وب به صورت «Hypertext=» شناخته می شود.
- زبان نشانه گذاری (Markup Language): نیز به معنای نشانه گذاری بخش های مختلف یک نوشته در پرونده نوشتاری با استفاده از تگ ها است. این تگ ها به مرورگر وب می گویند که چطور صفحه های وب را باید نشان دهد.
یک عنصر HTML چیست؟
در زبان برنامه نویسی HTML عنصر (Element) شامل یک بلوک ساختاری پایه برای یک صفحه وب است و آن با یک تگ (Tag) شروع می شود و پس از آن محتوا (Content) عنصر قرار می گیرد و در نهایت نیز تگ بسته قرار می گیرد. در یک عنصر HTML محتوا همیشه بین تگ ابتدایی و انتهایی و گاهی تنها در تگ ابتدایی قرار می گیرد.
سینتکس نوشتاری عناصر در زبان HTML به شرح زیر هستند:
<tag_name>content</tag_name>
برای مثال در ادامه یک عنصر عنوان در پرونده HTML نمایش داده شده است:
<h1>It is top-level heading</h1>
در این مثال:
- تگ <h> تگ ابتدایی است.
• عبارت it is top-level heading محتوای این عنصر به شمار می رود که در میان دو تگ باز و بسته قرار گرفته است.
• تگ <h1/> نیز تگ بسته و انتهایی ما در این عنصر است.
ساختار صفحه HTML
ساختار صفحه HTML شامل تگ های الزامی است که برای ساخت یک صفحه HTML باید از آن ها استفاده کنید و با کمک این تگ ها، محتوای شما در مرورگر نمایش داده می شود.
در تصویری که در ادامه آماده است شما می توانید تصاویری از یک ساختار صفحه وب را مشاهده کنید:
صفحه وب شامل تگ هایی نظیر<!DOCTYPE html> ,<html> , <head> , <body> , <title> و تگ های دیگری است که در صفحه ابتدایی نمایش داده می شوند.
- عنصر
<!DOCTYPE html>: این عنصر نوع ورژن HTML به کار رفته برای صفحه را مشخص می کند. - عنصر
<html>: این عنصر اصلی ترین عنصر در یک صفحه HTML است. تمام عناصر بعدی باید در این عنصر قرار بگیرند. - عنصر
<head>: این عنصر شامل تمام کتابخانه های اسکریپت، استایل دهید و مشخصات کاربردی دیگری است که برای یک صفحه وب به آن نیاز دارید. تمام متا تگ ها (Meta tags) نیز در میانه این تگ ها قرار می گیرند. - عنصر
<title>: این عنصر عنوان صفحه وب شما را مشخص می کند.</p> - عنصر
<body>: هر آنچه که در میان این عنصر قرار بگیرد، در صفحه وب شما به نمایش در می آید. تمام عناصر محتوایی شما باید در میانه این عنصر قرار بگیرد. - عناصر <h1> و <p> : این عناصر برای تعیین عناوین و نوشته های پاراگراف های شما به کار می روند.
عناصر پایه ای در زبان HTML
در ادامه ما برخی از تگ ها و عناصر پایه ای در زبان HTML را بررسی می کنیم:
- عناصرعنوانی
<h1>تا<h6>: این عناصر برای تعیین عنوان های نوشتارها در صفحه ای وب به کار گرفته می شوند. تگ h1 نشان دهنده بالاترین سطح عنوان در یک نوشته است و هرچه مقدار عددی بیشتر باشد این رتبه کاهش می کند و تگ h6 کمترین سطح را نشان می دهد. - عنصر پاراگراف
<p>: این عنصر نشان دهنده نوشته های متنی ساده و پاراگرافی در یک صفحه وب است. - عنصر شکست خط
<b>: این عنصر به صورت تکی به کار می رود و به معنای شکست خط (break) و در هر جایی که به کار رود نشان می دهد که یک صفحه وب باید شکسته شود. - عناصر تقسیمات صفحه ای
<div>: این عنصر برای تقسیم کردن فضای صفحه های وب و ایجاد طرح بندی بین عناصر به کار می رود. شما با کمک این عنصر می توانید تقسیمات صفحه خودتان را انجام دهید. - عناصر لیست سازی
<ul>و<ol>: این دو عنصر برای ساخت لیست های منظم به کار می رود. تگ ol برای ساخت لیست های شماره دار و تگ ul برای ایجاد لیست های بولت دار یا بدون ترتیب به کار گرفته می شود. - عنصر
<img>: این تگ به صورت منفرد و برای نمایش تصاویر به کار می رود. - عنصر لینک
<a>: این عنصر برای نمایش لنگر (anchor) نوشته ها در صفحه های برای لینک کردن صفحه ها به هم به کار می رود. از این عنصر برای لینک دهی، منوسازی و اقدامات دیگر استفاده می شود. - عنصر
<pre>: این عنصر برای حفظ استایل نوشته ها به کار گرفته می شود.
نمونه ای ابتدای از یک صفحه وب HTML
برای شروع به کار ما می توانید از تگ های الزامی که در بالا گفته شده است استفاده کنیم. در مثالی که در بخش زیر می آید ما یک صفحه HTML را به سادگی ایجاد می کنیم. این صفحه شامل تمام تگ های مورد نیاز برای ساخت صفحه است. شما می توانید این کد را بر روی رایانه خودتان و یک نرم افزار ویرایش کد وارد کنید.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML First Example</title>
</head>
<body>
<h1>Welcome to Hostbaz.com</h1>
<p>A learning portal for students and professionals.</p>
<h2>About Hostbaz.com</h2>
<p>Hostbaz.com originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<h2>Our Web Tutorials</h2>
<ul>
<li><a href="https://hostbaz.com/html-programmin-toutrials">HTML</a></li>
<li><a href="https://hostbaz.com/css-programmin-toutrials">Css</a></li>
<li><a href="https://hostbaz.com/javascript-programmin-toutrials">JavaScript</a></li>
</ul>
</body>
</html>
نقش مرورگر وب
نقش مرورگر وب آن است که صفحه HTML را مطالعه کند و مستندات درخواست شده را از مسیرهای تهیه شده واکشی کند و سپس محتوای مورد نظر را در مرورگر نمایش دهد. تمام مرورگرها مانند Google Chrome، Safari، Firefox و غیره این اطلاعات را کامپایل می کنند تا بتوانند صفحه HTML نهایی را رندر کنند. شما می توانید از هر مرورگر وب برای نمایش پرونده های HTML خودتان در هر فرمتی استفاده کنید.
عبارت تعیین ورژن <!DOCTYPE>
عبارت تعین ورژن<!DOCTYPE> عنصری است که به مرورگر وب می گوید که در حال استفاده از چه ورژنی از HTML است. نسخه عمومی که اکنون برای توزیع صفحه های وب استفاده می شود نسخه HTML 5.0 است و به همین خاطر این عنصر به صورت زیر در ابتدای صفحه های وب قرار می گیرد:
<DOCTYPE html!>
در اینجا انواع نسخه های HTML دیگری نیز وجود دارند که شما می توانید از آن ها برای ساخت صفحه های وب خودتان استفاده کنید. البته ما درباره این نسخه ها آموزش های خاصی را برای شما منتشر خواهیم کرد.
تاریخچه تکامل زبان HTML
زبان HTML در ابتدا توسط آقای Tim Barners lee در سال ۱۹۹۱ میلادی ابداع شد. این زبان بعد ها تبدیل به زبان استاندارد برای توسعه صفحه های وب در کل دنیا (World Wide Web) گردید. اکنون تمام صفحه هایی که شما در دنیای وب شاهد آن هستید با استفاده از HTML نوشته می شود.
در تصویر زیر شما می توانید تکامل زبان HTML در طی سال های مختلف را مشاهده کنید.
تگ ها، عناصر و ویژگی های در زبان HTML
- عبارت (HTML Tag) یک عبارت کلیدی است که می تواند برای مفاهیم گوناگون به کار رود و هم شامل خود تگ، محتوای تگ و یا حتی ویژگی یک تگ در صفحه وب باشد.
- عنصر یا عناصر (HTML Element) یک بلوک ساختاری پایه ای است که با استفاده از تگ ها و محتوای آن ها ساخته می شود. یک عنصر HTML با استفاده از تگ ابتدایی، محتوا و تگ انتهایی ساخته می شود.
- ویژگی عنصر (HTML Attribute) می تواند اطلاعات اضافه تری را درباره عناصر HTML فراهم کند.
- عناصر می توانند رفتارهای عناصر و تگ ها را کنترل کنند. ویژگی ها همیشه در تگ های ابتدایی یا تگ باز (Opening tag) به کار گرفته می شوند.
حساسیت به حروف در تگ های HTML
تگ هایی که در زبان HTML به کار گرفته می شوند حساسیتی به حرف بزرگ و کوچک (case-sensitive) ندارند. شما می توانید تگ ها را هم با حروف کوچک و هم با حروف بزرگ بنویسید. اما بر اساس پیشنهاداتی که کنسرسیوم جهانی وب (W3C) ارائه می کند، بهتر است که تگ ها با حروف کوچک نوشته شوند.
اهمیت زبان HTML
زبان HTML زبان پایه ای برای ساخت تمام صفحه ها در دنیای وب است. هر صفحه ای که شما اکنون در دنیای وب مشاهده می کنید با استفاده از زبان HTML توسعه پیدا کرده است. زبان HTML از جنبه های مختلفی دارای ارزش است.
- زبان HTML می تواند ساختار صفحه های وب را تعریف کند و همچنین می توان با کمک آن طراحی صفحه های وب را تعریف کرد.
- با استفاده از زبان های دیگر نظیر CSS و JavaScript شما می توانید صفحه های تعاملی و زیبایی را خلق کنید.
- زبان HTML به موتورهای جستجو کمک می کند تا بتوانند عبارت های کلیدی هر صفحه را بهتر و دقیق تر تشخیص دهند.
- زبان HTML به مرورگرهای وب کمک می کند که بتوانند به صفحه های مختلف جابجا شوند و به هر جایی از اینترنت که می خواهید دسترسی داشته باشید.
- زبان HTML می تواند به کاربران برای وارد کردن اطلاعات کمک کند. شما می توانید در هرجای دنیا که باشید، اطلاعات کاربران را دریافت کرده و آن ها را وارد دیتابیس های خودتان بکنید. فرم ها و سایر عناصر این زبان در این زمینه به شما کمک می کنند.
- زبان HTML یک استاندارد باز سازمان کنسرسیوم جهانی وب (W3C) است. به همین خاطر در تمام مرورگرها و دیوایس ها پشتیبانی می شود. شما برای مشاهده صفحه های وب HTML نیازمند دیوایس و یا مرورگر ویژه ای نیستید.
برای یادگیری زبان HTML شما نیازمند آن هستید که درباره تگ های مختلف و رفتارهای آن ها مطالعه کنید، در عین حال شما باید با انواع روش های فرمت دهی نوشته ها در این زبان آشنا شوید. یادگیری HTML بسیار ساده است و شما می توانید به راحتی تگ های مختلف را در این سری از آموزش ها یاد بگیرید و به سرعت پیشرفت کنید.