آشنایی با زبان نشانه گذاری HTML

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

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

زبان های برنامه نویسی وب

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

حال با یک مثال دو مفهوم سمت سرور (Back-End) و سمت سرویس گیرنده (Front-End) که شاید در گذشته آن را شنیده باشید را، برای شما عزیزان معرفی می‌کنم. کامپیوترها به صورت کلی برای برقراری ارتباط با یکدیگر به دو بخش سرویس دهنده (server) و سرویس گیرنده (client) تقسیم می‌شوند.

در دنیای وب نیز این ارتباط کاملا پا برجاست و به سیستم ها و فضاهایی که اطلاعات وبسایت بر روی آن ذخیره شده است سرور (server) گفته می شود. حال وقتی ما در محیط وب آدرس سایتی را جستجو می‌کنیم؛ یعنی درخواستی را به سرور ارسال می کنیم و سرور آنچه ما درخواست کرده ایم را به ما (client) نشان می دهد.

زبان های برنامه نویسی سمت سرور (Backend)

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

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

 زبان برنامه نویسی ASP.net

 زبان برنامه نویسی php ( رایج ترین زبان برنامه نویسی وب)

 زبان برنامه نویسی Java

 زبان برنامه نویسی Python

زبان های برنامه نویسی سمت کاربر (Frontend)

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

  زبان نشانه گذاری HTML

  زبان برنامه نویسی CSS

  زبان برنامه نویسی Java script

طراحی وب

حالا که با مفهوم برنامه نویسی وب آشنا شده اید وقت آن است که به طراحی وب بپردازیم؛ طراحی وب در اصل همان چیزی است که شما الان با آن مواجه اید و آن را در صفحه مانیتور خود ملاحظه می‌فرمایید.

قدم اول : HTML چیست؟

زبان HTML که مخفف واژه Hyper Text Markup Language (زبان نشانه گذاری ابرمتن) می‌باشد یک نوع نشانه گذاری استاندارد و البته اصولی برای ایجاد صفحات وبسایت و وب اپلیکیشن می‌باشد. زبان HTML به نوعی پایه و اساس صفحات یک وبسایت بوده و تمامی المان ها، متن ها، لینک ها و … با استفاده از نشانه های (تگ های) HTML در صفحه وب برای شما قرار گرفته است.

بسیاری از افراد تصور می‌کنند که HTML یک زبان برنامه نویسی است اما این موضوع کاملا غلط می‌باشد. چرا؟

زبان های برنامه نویسی در اصل راه ارتباطی ما با سیستم های کامپیوتری می‌باشند. ما با استفاده از این زبان ها با یک سیستم ارتباط برقرار کرده و به آن (برای حل یک مسئله و …) دستوراتی می‌دهیم.شاید این موضوع مهم ترین شاخصه یک زبان برنامه نویسی می‌باشد اما زبان HTML این ویژگی را ندارد و صرفا یک زبان نشانه گذاری است.

حال ممکن است برای شما سوال پیش بیاید که زبان نشانه گذاری چیست؟ زبان های نشانه گذاری (زبان شبه برنامه نویسی) در اصل نوعی زبان توصیفی بوده که اطلاعات مختلف را با استفاده از نشانه گذاری های خاص با هم مرتبط می کند.

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

متن زیر را در نظر بگیرید:

My cat is very grumpy

این یک متن ساده است، اگر بخواهیم آن را به صورت درست به مرورگر بشناسانیم، آن را داخل تگ پاراگراف قرار می دهیم. تگ p در HTML به پاراگراف اشاره می کند. مثال:

<p> My cat is very grumpy </p>

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

<p> My cat is very grumpy </p>  <!-- تگ پاراگراف با حروف کوچک -->

<P> My cat is very grumpy </P> <!-- تگ پاراگراف با حروف بزرگ -->

HTML چه زمانی وارد دنیای کامپیوترها شد؟

چیزی که ما امروز تحت عنوان زبان نشانه گذاری ابرمتن می شناسیم اولین بار در سال ۱۹۹۱ و با تعریف ۱۸ عنصر اساسی و مهم به دنیای وب وارد شد. حدود ۵ سال بعد این نشانه ها تحت عنوان HTML 2.0 تکمیل و به شکل یک ساختار استاندارد معرفی شد. اما این پایان بازی نبود و تا الان که شما در حال مطالعه این مقاله هستید ۵ ورژن دیگر از زبان نشانه گذاری HTML در دسترس توسعه دهندگان قرار گرفت که مهم ترین و البته جامع ترین این تحول ها مربوط به HTML5 بود که در سال ۲۰۱۲ ارائه شد.

  نکته: لازم به ذکر است که آخرین نسخه HTML تحت عنوان xhtml5 در سال ۲۰۱۴ ارائه شد که به نقش موثری در بالابردن کیفیت تجربه کاربری کاربران ایفا کرد چراکه طراحی سایت به ساختار منظم و ایده آل خودش نزدیک شد و برخی مفاهیم قدیمی نیز به حاشیه رانده شد.

ساختار عناصر HTML

بیایید عنصر پاراگرافی که در قسمت قبل نوشتیم را بیشتر بررسی کنیم:

ساختار قطعه کد بالا به شرح زیر است:

  تگ آغازین

تگ آغازین شامل نام المان است که داخل < > قرار میگیرد. در این مثال یک المان پاراگراف داریم که با p نشان می دهیم.

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

  محتوا

این قسمت محتوایی است که قصد داریم آن را منتشر کنیم.

در این مثال یک جمله با مضمون “My cat is very grumpy” داریم.

  تگ پایانی

این تگ مانند تگ آغازین است با این تفاوت که قبل از نام المان، علامت / را به کار می بریم، این یعنی المان مورد نظر در این نقطه به پایان می رسد و عبارات بعد از این تگ، دیگر جزو محتوای المان پاراگراف ما نخواهد بود.

یک المان HTML شامل تگ آغازین، محتوا و تگ پایانی است.

المان های تو در تو (Nesting elements)

المان های HTML می توانند در داخل یکدیگر قرار گیرند که به این حالت المان های تو در تو (Nesting Elements) می گویند.

برای مثال اگر بخواهیم در جمله ی My cat is very grumpy کلمه ی very را پررنگ تر نمایش دهیم از تگ strong برای این واژه استفاده میکنیم:

<p> My cat is <strong> very </strong> grumpy </p> 

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

<p> My cat is <strong> very grumpy </p> </strong> 

المان های بلوکی (Block Elements) در مقابل المان های درون خطی (Inline Elements)

دو دسته بندی اصلی در المان های HTML داریم: Block-level Elements و Inline Elements

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

  المان های درون خطی (Inline) در داخل المان های بلاک-لول استفاده میشوند و فقط بخش های کوچکی از محتوای سند ما را احاطه میکنند ( نه کل پاراگراف یا گروه محتوای ما را).

المان های Inline بر خلاف المان های Block-level، در سطر جدید ایجاد نمیشوند بلکه از همان نقطه ای که قرار می گیرند شروع میشوند. برای مثال در قسمت قبل پاراگراف p از نوع Block و المان strong از نوع inline بوده اند.

  نکته : المان های Block نباید در داخل المان های Inline استفاده شوند ولی می توان از آن ها در داخل المان های Block دیگر استفاده کرد.

مثال زیر را در نظر بگیرید:

<em>First</em> <em>Second</em> <em>Third</em>

<p>Fourth</p> <p>Fifth</p> <p>Sixth</p>

خروجی کد بالا:

First Second Third

Fourth

Fifth

Sixth

em یک المان Inline است، پس همانطور که در خروجی کد میبینید هر سه واژه در کنار هم قرار گرفتند، از سوی دیگر p یک المان Block است و همانطور که مشاهده میکنید سه واژه ای که در المان p قرار گرفتند، زیر یکدیگر نمایش داده شدند.

اگر میخواهید بیشتر با عناصر Block و Inline آشنا شوید ، لینک های زیر مرجع خوبی به حساب می آیند :

Block-level elements - Inline elements

المان های خالی (Empty elements / Void elements)

همه ی المان های HTML از قاعده ی (تگ آغازین، محتوا، تگ پایانی) پیروی نمیکنند. بعضی از المان ها تنها از یک تگ تشکیل شده اند که معمولا برای وارد کردن فایل، عکس و … در سند ما به کار می روند.

برای مثال ، المان img برای وارد کردن تصویر به صفحه استفاده می شود:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

در کد بالا از ویژگی src برای آدرس دهی فایل تصویر استفاده شد.

  نکته : در HTML نیازی نیست که در پایان تگ المان های خالی، علامت / قرار دهیم. برای مثال :

<img src="images/cat.jpg" alt="cat" />

هرچند که استفاده از / در پایان تگ موردی ندارد، اما زمانی که بخواهیم از سند HTML خود به عنوان یک سند XML استفاده کنیم، باید در پایان هر تگ از / استفاده نماییم.

XML چیست ؟

ویژگی ها (Attributes)

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

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

در نوشتن Attribute ها باید موارد زیر را رعایت کنیم:

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

مقدار Attribute را با علامت مساوی = به نام آن (در این مثال class) میچسبانیم.

مقدار Attribute باید بین دو علامت " " و یا ' ' قرار می دهیم.

ساخت لینک

لینک ها با استفاده از تگ <a> که به اول واژه Anchor اشاره میکند ساخته میشوند. عنصر لینک به ما کمک میکند تا یک متن را به یک پیوند به محتوای خارجی تبدیل کنیم. عنصر <a> ویژگی های مختلفی را می پذیرد که مهمترینشان را بررسی میکنیم:

href : این Attribute آدرس مقصد لینک ما را می پذیرد، یعنی آدرسی که میخواهیم کاربر با کلیک بر روی متن به آن هدایت شود. مثال :

<a href="https://www.google.com/"> برو به سایت گوگل </a>

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

<a href="https://www.google.com/" target="_blank"> برو به سایت گوگل </a>

ویژگی های یک کلمه ای (Boolean Attributes)

اصولا در برنامه نویسی به عملگرهایی که دو مقدار درست/غلط یا روشن/خاموش و بله/خیر و … بولیَن (Boolean) می گویند.

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

یکی از این ویژگی ها، disabled است که در مثال زیر یک نمونه از کاربرد آن را در فرم های ورودی مشاهده میکنید:

<input type="text">

<input type="text" disabled>

خروجی کد بالا:

همانطور که مشاهده می کنید در فرم بالا، ما با استفاده از المان <input> دو فیلد برای ورود اطلاعات از طرف کاربر ساخته ایم.

شما با کلیک بر روی فیلد اول میتوانید متن دلخواه خود را وارد کنید اما در فیلد دوم که به آن ویژگی disabled داده ایم، کلیک کردن شما تغییری در آن ایجاد نمی کند. در واقع با ویژگی disabled آن را غیر فعال کرده ایم.

ساختار سند HTML

خب، تا اینجا با المان ها، تگ ها و ویژگی ها که از مفاهیم بنیادین HTML هستند آشنا شدیم اما المان های HTML به تنهایی کاربرد ندارند، بلکه باید در یک سند HTML قرار گیرند تا خروجی موردنظر ما را داشته باشند.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

در کد بالا چه داریم :

<!DOCTYPE html>
DOCTYPE که مخفف Document Type است و در مقابل آن واژه ی HTML
در واقع با این کد که در اولین خط فایل خود مینویسیم، به کامپیوتر اعلام میکنیم که این فایل یک سند HTML5 است.

<html></html>
المان <html> . این المان همه عناصر موجود در صفحه را در بر می گیرد. در واقع همه کد های ما در داخل این تگ قرار میگیرند.

<head></head>
المان <head> . همه فایل ها و تنظیماتی که میخواهیم به سند خود اضافه کنیم در این المان قرار می گیرد. توجه کنید که محتویات این المان در صفحه مرورگر نمایش داده نمیشود بلکه تنها تنظیمات ما در آن گنجانده می شود.

<meta>
المان <meta> . اطلاعات اضافی که در سایر المان های HTML مانند (<base>, <link>, <script>, <style>, <title>) جای نمی گیرند و در کل همه ی اطلاعات متادیتا، توسط این المان کنترل می شوند.

<title>
المان <title> . با استفاده از این المان، نام سند خود را که مایلیم در بالای نوار وضعیت مرورگر نمایش دهد، مشخص میکنیم.

<body>
المان <body> ، شامل همه محتواهایی می شود که می خواهیم در مرورگر به کاربر نمایش دهیم، محتوا هایی شامل متن، تصویر، ویدیو، آهنگ ، بازی و ...

---

راهنمای تگ های HTML

در تمام این سال ها به یک باور مشترک بین برنامه نویسان و البته طراحان سایت پی بردم: ما برنامه نویس شدیم تا چیزی را حفظ نکنیم! البته که این موضوع به نظر کاملا درست است و یک برنامه نویس نباید هیچ کد یا روش خاصی را حفظ کند (مگر اینکه با تکرار زیاد آن را فرا بگیرد) برای شما هم که در شروع مسیر یادگیری طراحی و برنامه نویسی سایت هستید این موضوع صدق می‌کند. برای همین در ادامه به توضیح لیستی از تگ های HTML میپردازم .

  تگ های اصلی سند

<html> ... </html>

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

همه تگ های HTML باید داخل این تگ قرار گیرند.

<head> ... </head>

این تگ اطلاعات اضافه و کلیه اطلاعاتی که در صفحه نمایش داده نمی شود را دربر میگیرد.

<title> ... </title>

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

<body> ... </body>

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

مثال

<html>
    <head>
        <title>سایت من</title>
    </head>
    <body>
    </body>
</html>

---

  اطلاعات سند

کلیه تگ های این قسمت در داخل تگ HEAD قرار می گیرند و یک سری اطلاعات اضافه را در این قسمت تعریف میکنیم.

<base />

این تگ آدرس URL سایت خود را مینویسیم.

<meta />

تگ مِتا برای وارد کردن اطلاعاتی مانند تاریخ ایجاد سند. نام نویسنده سند. واژه های کلید و … استفاده می شود.

<link href="آدرس فایل" />

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

<style> ... </style>

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

<script> ... </script>

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

مثال

<html>
    <head>
        <meta charset="utf-8">
        <base href="http://mysite.com" target="_blank" />
        <title>سایت من</title>
        <link rel="stylesheet" href="./css/style.css">
        <script type="text/javascript">
            var dummy = 0;  /* این یک خط کد به زبان جاوا اسکریپت است */
        </script>
    </head>
    <body>
        <!-- محتویات سند -->
    </body>
</html>

---

  ساختار سند

<h1> ... </h1>
.
.
<h6> ... </h6>

6 سایز مختلف برای نوشتن عنوان ها در حالی که h1 بزرگترین و h6 کوچکترین سایز است.

<div> ... </div>

محتویات اسناد HTML معمولا در داخل بلاک ها نگهداری می شوند. تگ div مشخصا برای همین منظور است.

<span> ... </span>

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

<p> ... </p>

متن های ساده در این تگ قرار می گیرند .

<br>

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

<hr>

مانند تگ بالا، یک سطر جدید می سازد با این تفادت که یک خط افقی نیز ایجاد می کند.

مثال

<div>
  <h1>Top 5 Greatest Films</h1>
  <p>These are considered the greatest <span>reel-icon</span> of all time </p>
  <hr>
  <h2>1. The Godfather</h2>
  <p>This 1972 classic stars Marlon Brando and Al Pacino.</p>
</div>

---

  استایل دهی متن

<strong> ... </strong>

این تگ برای پررنگ کردن متن یا به اصطلاح Bold کردن متن استفاده می شود.

<b> ... </b>

مانند تگ بالا، متن را پررنگ می کند .

<em> ... </em>

برای متن های پر اهمیت به کار میرود و متن را به اصطلاح Italic میکند .

<i> ... </i>

مانند تگ قبلی، متن را Italic می کند اما مانند تگ بالا روی آن تاکید نمی کند.

<cite> ... </cite>

این تگ برای استناد کردن یک متن به نویسنده آن به کار می رود .

<blockquote> ... </blockquote>

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

<q> ... </q>

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

<abbr> ... </abbr>

برای نشان دادن اختصارات به کار می رود.

<address> ... </address>

برای وارد کردن اطلاعات تماس نویسنده استفاده می شود.

<code> ... </code>

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

<sub> ... </sub>

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

<sup> ... </sup>

برای نوشتن توضیحات متن که با سایز کوچکتر و بالای متن پاراگراف، قرار می گیرد.

<p><strong>Bold text</strong> Regular text <em>some words in italics</em> regular text once again.</p>
<blockquote>
  Anyone who has never made a mistake has never
  tried anything new.<cite>- Albert Einstein</cite>
</blockquote>
<pre>
Some pre-formatted text
</pre>
<p>A code snippet: <code>some code</code></p>

---

---

دانلود مرجع تگ های HTML