HTML مقدماتی: آشنایی اولیه با HTML

مفاهیم آموزش HTML، مقدمه ای بر زبان نشانه گذاری

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

یک نمونه سند ساده HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

اگر به این سند (Document) توجه کنید می‌بینید که از چند تگ با علامت <> تشکیل شده است که هر کدام بخش‌هایی از سند HTML را برای مرورگرها توضیح می‌دهند. حالا به توضیح هر قسمت از این سند می پردازیم تا ببینیم هر تکه کد چه معنایی در بر دارد و چه دستوری به مرورگر برای نمایش محتوا می‌دهد:

– عبارت <DOCTYPE  html!> مشخص می‌کند که این سند یک سند HTML5 است.

– عنصر <html> عنصر ریشه یک صفحه HTML است.

– عنصر <head> حاوی اطلاعات متا در مورد سند است.

– عنصر <title> عنوان سند را مشخص می‌کند.

– عنصر <body> حاوی محتوای قابل دیدن صفحه است.

– عنصر <h1> یک عنوان درشت را تعریف می‌کند.

– عنصر <p1> پاراگراف را تعیین می‌کند.

تگ HTML

تگ‌ها در واقع نام عناصر هستند که درون پرانتز‌های شکسته قرار می‌گیرند. تگ‌های HTML معمولا به حالت جفت می‌آیند مثل <p> و <p/> . تگ اول در جفت را تگ آغازین و تگ دوم را تگ پایانی می‌نامند. تگ پایانی درست به شکل تگ آغازین نوشته شده اما یک اسلش ( / ) هم قبل نام تگ قرار داده می‌شود.

مرورگرهای وب

آموزش HTML

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

ساختار صفحات HTML

در زیر نمایی از ساختار یک صفحه HTML آمده است:

آموزش HTML

نکته: فقط محتوای درون بخش <body> در مرورگر نمایش داده می‌شود.

عبارت <!DOCTYPE> در  HTML

این عبارت نشان‌دهنده نوع سند است و به مرورگرها کمک می‌کند تا صفحات سایت را به درستی نمایش دهند. این عبارت باید فقط یک‌ بار و در بالای صفحه (قبل از هرگونه تگ HTML) قرار بگیرد. این عبارت برای HTML به صورت <!DOCTYPE  html> نوشته می‌شود.

نوشتن HTML با استفاده از Notepad یا TextEdit

می‌توان صفحات وب را با استفاده از ویرایشگرهای حرفه‌ای HTML ایجاد کرده و تغییر داد. البته ما در دوره آموزش HTML در لیداوب، توصیه می‌کنیم برای یادگیری HTML از یک ویراشگر متنی ساده مانند نوت پد (PC) یا تکست ادیت (Mac) استفاده کنید. به نظر می‌رسد استفاده از یک ویرایشگر ساده روش خوبی برای یادگیری HTML باشد. با دنبال کردن چهار مرحله زیر می‌توانید اولین صفحه وب خود را با نوت پد یا تکست ادیت ایجاد کنید. البته اگر دوست داشته باشید از امکانات بیشتری بهره ببرید، می‌توانید روی سیستم عامل ویندوز از ++Notepad هم استفاده کنید.

مرحله اول: استفاده از نوت پد برای ایجاد سند HTML (ویندوز)

در ویندوز ۸ و نسخه‌های بعدی ابتدا منوی استارت را باز کرده و عبارت Notepad را تایپ کنید. در ویندوز ۷ و نسخه‌های قبلی، منوی استارت را باز کرده، وارد قسمت Programs شده و Accessories را انتخاب کرده و سپس Notepad را پیدا و باز کنید.

مرحله اول: استفاده از تکست ادیت برای HTML در Mac

قسمت Finder را باز کرده، از منوی اپلیکیشن گزینه TextEdit را انتخاب کنید. همچنین باید برخی از preferenceها را تغییر دهید تا فایل‌ها به درستی ذخیره شوند. در قسمت Preference، گزینه Format و سپس Plain Text را انتخاب کنید. سپس باکسی «Ignore rich text commands in HTML files» که در زیر گزینه «Open and Save» قرار دارد را تیک بزنید. سپس یک سند جدید باز کرده تا کدهای خود را در آن قرار دهید.

مرحله دوم: نوشتن کدهای HTML

داخل نوت پد کدهای HTML را نوشته یا کپی کنید.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

 

آموزش HTML

مرحله سوم: ذخیره کردن صفحه HTML

فایل را روی کامپیوتر ذخیره کنید. گزینه File و سپس Save as را در منوی نوت پد انتخاب کنید. فایل را به نام «index.htm» نام‌گذاری کرده و حالت encoding را روی UTF-8 (که حالت encoding مطلوب برای فایل‌های HTML است) تنظیم کنید.

آموزش HTML

پسوند فایل می‌تواند .htm یا .html باشد که هیچ فرقی هم با هم ندارند و به سلیقه شما بستگی دارد.

مرحله چهارم: صفحه HTML را در مرورگر خود مشاهده کنید

فایل HTML ذخیره شده را روی مرورگر مورد نظر خود باز کنید (روی فایل دابل کلیک کنید). نتایج به شکل زیر خواهد بود:

آموزش HTML

در این جلسه ساختار اولیه کدنویسی در HTML توضیح داده شد و در جلسات بعد سایر المان های موردنیاز برای طراحی سایت با HTML را توضیح خواهم داد.

منبع: lydaweb

local_offerevent_note خرداد ۱۳, ۱۳۹۷

account_box hamed


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *