HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی

۱۴۱۸ بازدید

آخرین به‌روزرسانی: ۲۴ اردیبهشت ۱۴۰۲

زمان مطالعه: ۶ دقیقه

HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی

«اچ تی ام ال» [+] قدمتی بسیار طولانی دارد و مدت‌ها است که مورد استفاده قرار می‌گیرد؛ لذا شاید از همین رو زمان آن فرا رسیده باشد که اصول اولیه این زبان را یاد بگیرید. بیاموزید که چگونه کار می‌کند و چطور می‌توان برخی از عناصر ساده را به کمک آن کدنویسی و خلق کرد.

فهرست مطالب این نوشته

اچ تی ام ال چیست؟

ظاهر اچ تی ام ال چگونه است؟

مفهوم «Attributes‌» در تگ‌ها چیست؟

اچ تی ام ال5 چیست؟

چگونه «کامنت گذاری» کنیم؟

نحوه‌ی وارد کردن تصاویر در اچ تی ام ال

تغییر فونت

اضافه کردن لینک

ایجاد جدول در اچ تی ام ال

کاربرد CSS در اچ تی ام ال

چگونه با اچ تی ام ال یک وب‌سایت بسازیم؟

اچ تی ام ال چیست؟

اچ تی ام ال به بیان ساده یک زبان کاربردی برای ایجاد صفحات وب است. این کلمه از کنار هم گذاردن اول حروف «Hypertext Markup Language» تشکیل می‌شود. این زبان متشکل از سری دستوراتی برای مرورگر وب مورد استفاده شما است. به زبان ساده‌تر، با بهره‌گیری از این دستورات، مرورگر در می‌یابد که یک صفحه‌ی وب را باید به چه صورت به کاربر نمایش دهد.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

بسیار مهم است که تفاوت بین یک «زبان برنامه‌نویسی» (Programming language) و یک «زبان نشانه‌گذاری» (Markup) را بدانید. در یک زبان برنامه‌نویسی، امکان حل مسائلی مانند معادلات ریاضی، کار با داده‌ها یا تعریف حرکت برای یک کاراکتر ویدئویی وجود دارد. اما در زبانی مانند اچ تی ام ال، چنین قابلیت‌هایی دیده نشده و این ابزار به نوعی تنها مختص صفحه آرایی است.

ظاهر اچ تی ام ال چگونه است؟

این زبان از عناصری با نام «تگ» (tags) تشکیل می‌شود. تگ‌ها در حقیقت دستوراتی برای شکل‌دهی به بخش‌های خاصی از صفحه‌ی وب هستند. در مثال ساخت یک خانه، اچ تی ام ال به عنوان نقشه و تگ‌ها به عنوان اجزایی مانند در و پنجره در نظر گرفته می‌شود.

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

1<اچ تی ام ال>
2  <head>
3    <title>MUO Website</title>
4  </head>
5  <body>
6
7
8  </body>
9</اچ تی ام ال>

تگ‌ها و عملکردشان از پیش تعریف شده هستند و نماینده‌ی اجزائی از صفحه مانند تصاویر، لینک به دیگر صفحات، دکمه‌ها و... به حساب می‌آیند. بیشتر تگ‌ها باید «باز» (open) و سپس «بسته» (closed) شوند تا بوسیله‌ی آنها ویژگی‌هایی مانند وضعیت متون، تصاویر و... در صفحه تعریف گردد؛ حتی ممکن است در میان دو تگ تگ‌های دیگری قرار گیرند و از این طریق جزئیات بیشتری در رابطه با ساختار صفحه معین شود. باز به مثال ساخت یک خانه برگردیم. باز کردن یک تگ مانند آن است که یک پنجره را از یک نقطه‌ی خاص شروع کنیم. به همین شکل بستن یک تگ به معنای خاتمه دادن به آن پنجره در نقطه‌ی مورد نظر است.

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

مفهوم «Attributes‌» در تگ‌ها چیست؟

آخرین چیزی که در مورد تگ‌ها باید بدانید، «attribute» است. attribute ویژگی‌های خاص تگ‌ها را تعریف می‌کند. اگر تگ‌ها را مانند در یا پنجره فرض کنیم، attribute جزئیاتی مانند عرض و ارتفاع را در یک پنجره باز یا یک در مجهز به قفل، مشخص می‌کنند. attribute درون تگ‌های شروع کننده دستورات یا در اصطلاح همان تگ‌های «Opening» قرار می‌گیرد:

1<p width="123" height="567"></p>

البته امکان تعریف تگ‌ها یا attributeهای جدید وجود ندارد. این مفاهیم در «World Wide Web Consortium» یا به اختصار «W3C» تبیین شده‌اند و به صورت یک استاندارد قطعی مورد قبول همگان هستند.

اچ تی ام ال5 چیست؟

آخرین نسخه‌ی این زبان کاربردی، اچ تی ام ال5 است و بسیاری از تگ‌ها، attributeها و ویژگی‌های جدید را شامل می‌شود.

HTML

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

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

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

چگونه «کامنت گذاری» کنیم؟

مانند دیگر زبان‌ها، نشانه‌گذاری یا برنامه‌نویسی، امکان «comment out» کردن - یا درج توضیحات راجع به - اجزای مختلف کدها وجود دارد. این commentها - یا همان توضیحات - به عنوان دستور اجرایی در نظر گرفته نمی‌شوند. یکی از کاربردهای این کار این است که می‌دانید یک بخش از کدها را با چه هدفی نوشته‌اید. به بیان ساده‌تر، درج توضیحات سبب خواهد شد وقتی در آینده به کدهای خود رجوع کردید راحت‌تر به یاد آورید هر قطعه کد چه کاری را انجام می‌داده است.

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

هنگامی که یک مرورگر به یک comment می‌رسد، دستور مربوطه را اجرا نمی‌کند. comment‌ها شامل یک «آغازگر» (opening) و یک «پایان‌بخش» (closing) درست مانند تگ‌ها هستند. به مثال زیر توجه کنید.

1<!-- Don't forget to add the XYZ here! -->
2<p width="123" height="567"></p>

comment out کردن یک کد یا تگ دقیقا به شکل مشابه انجام می‌پذیرد:

1<!-- <p width="123" height="567"></p> -->

به این منظور، علاوه بر یک نکته یا پیام برای یادآوری، دستور مورد نظر را بین تگ‌های comment قرار دهید.

نحوه‌ی وارد کردن تصاویر در اچ تی ام ال

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

1<img src="MUO_logo.jpg" alt="MakeUseOf Logo">

دقت کنید که نام تگ img است و دو نوع attribute برای آن وجود دارد. src آدرس تصویر در سرور میزبان و alt متن جایگزین تصویر را (در صورتی که به هر دلیلی بارگیری نشود) نشان می‌دهند.

البته تگ تصویر بر خلاف دیگر تگ‌ها نیاز به بستن ندارد.

تغییر فونت

فونت‌ها را با تگ font و attributeی با نام face تغییر می‌دهند.

1<font face="arial">MUO Arial Text</font>

HTML

از size به راحتی می‌توان برای تغییر اندازه‌ی فونت استفاده کرد.

1<font size="12">MUO Big Text</font>

HTML

به علاوه، color رنگ فونت را مانند دستور زیر تغییر می‌دهد.

1<font color="red">MUO Red Text</font>

HTML

این attributeها منحصر به تگ font هستند؛ ولی اگر می‌خواهید از خواص آنها برای تگ دیگری بهره‌مند شوید، می‌توانید تگ فونت را در درون تگ مورد نظر جاسازی کنید.

1<p><font color="red">MUO Red Text</font></p>

اضافه کردن لینک

با استفاده از تگ a امکان اضافه کردن لینک وجود دارد.

1<a href="//www.makeuseof.com">MakeUseOf.com</a>

href نشان‌ دهنده‌ی مقصد لینک مورد نظر است.

ایجاد جدول در اچ تی ام ال

برای چنین کاری در این زبان باید تگ‌های متفاوتی را درون یکدیگر جایگذاری نمایید.

فیلم آموزش طراحی وب با HTML اچ تی ام ال – تکمیلی در فرادرس

کلیک کنید

در ابتدا باید با تگ table شروع کرد.

1<table>
2
3</table>

حال با استفاده از تگ tr ردیف‌ها را اضافه می‌کنیم.

1<table>
2  <tr>
3
4  </tr>
5  <tr>
6
7  </tr>
8  <tr>
9
10  </tr>
11</table>

در نهایت از تگ td برای ایجاد سلو‌ل‌ها (ستون‌ها خود به خود اضافه می‌شوند) استفاده می‌نماییم.

1<table>
2  <tr>
3    <td></td>
4    <td></td>
5    <td></td>
6  </tr>
7  <tr>
8    <td></td>
9    <td></td>
10    <td></td>
11  </tr>
12  <tr>
13    <td></td>
14    <td></td>
15    <td></td>
16  </tr>
17</table>

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

کاربرد CSS در اچ تی ام ال

مثال‌هایی که در بالا آوردیم اصول اولیه‌ی زبان اچ تی ام ال را توضیح دادند، اما اگر می‌خواهید به شکلی حرفه‌ای صفحات وب را طراحی کنید باید به CSS نیز مسلط باشید. «CSS» مخفف عبارت «Cascading Style Sheets» است که به فارسی «شیوه‌نامه آبشاری» ترجمه می‌شود و به طراحان وب کنترل بیشتری را روی اجزا و جزئیات صفحاتی می‌دهد که مشغول پیاده‌سازی‌شان هستند. به کمک CSS قادر خواهید بود حجم زیادی از کدها را به راحتی در میان کدهای اچ تی ام ال خود فراخوانی کنید.

HTML

شما می‌توانید کدهای CSS موردنیاز خود را در لابه‌لای کدهای اچ تی ام ال تان بیاورید؛ به زبان ساده با استفاده از attributeی به نام «style» قادر خواهید بود کدهای CSSی که می‌خواهید را بر یک تگ معین اعمال کنید.

1<p ></p>

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

در چنین مواقعی که زیاد هم با آن مواجه خواهید شد راه بهتر، استفاده از تگ style در داخل تگ head است. به شکل زیر می‌توانید CSS را برای کل یک صفحه‌ی وب تعریف کنید.

1<اچ تی ام ال>
2  <head>
3    <style type="text/css">
4      MANY CSS RULES
5    </style>
6  </head>
7</اچ تی ام ال>

این تگ، attributeی با نام text/css دارد که به مرورگر می‌گوید دقیقا چه نوع استیلی در تگ قرار است معرفی شود.

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

1<link rel="stylesheet" type="text/css" href="muostyle.css">

تعدادی زیادی attribute برای استفاده در این بخش وجود دارد. rel لینک شما را به عنوان یک styles heet تعریف می‌کند. type نوع «text/css» و href محل فایل خارجی که کدهای CSS در آن ذخیره شده‌اند را معرفی می‌نماید.

چگونه با اچ تی ام ال یک وب‌سایت بسازیم؟

همان‌طور که دیدید، کار با این زبان خیلی سخت نیست. با استفاده از تگ‌ها و attributeهای ساده می‌توانید به سرعت یک صفحه‌ی وب دست و پا کنید؛ حتی اگر تا به حال از اچ تی ام ال استفاده نکرده‌اید.

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