در مقاله ای جدا به طور مفصل درباره ی این که ” HTML چیست و چه کاربردهایی دارد ” صحبت کرده ایم. پیشنهاد میکنم قبل از شروع آموزش این مقاله را نیز مطالعه نمایید.
تگ ها و ویژگی های HTML چیست؟
تگ ها و ویژگی ها اساس HTML هستند. آنها با هم کار می کنند اما عملکردهای متفاوتی را انجام می دهند . در ادامه متوجه تفاوت این دو می شوید.
تگ های HTML چیست؟
تگ ها برای علامت گذاری شروع یک عنصر HTML استفاده می شوند . نمونه ای از تگ ها عبارتند از: <h1>.
بیشتر تگ ها باید باز <h1>و بسته <h1/>شوند تا کار کنند.
ویژگی های HTML چیست؟
ویژگی ها حاوی اطلاعات اضافی هستند . ویژگی ها به شکل یک تگ باز است و اطلاعات اضافی در داخل آن قرار می گیرد .
نمونه ای از یک ویژگی است:
<img src="mydog.jpg" alt="این عکس یک سگ است.">
در این مثال، منبع تصویر (src) و متن جایگزین (alt) ویژگی‌های تگ <img> هستند.
قوانین طلایی به یاد داشته باشید.
1 ) اکثریت قریب به اتفاق تگ ها باید باز شوند ( <tag>) و بسته شوند<tag/> و اطلاعات عنصر مانند عنوان یا متن بین تگ ها قرار گیرد.
2 ) هنگام استفاده از چندین تگ، تگ ها باید به ترتیبی که باز شده اند بسته شوند. مثلا:
<p><strong> .این خیلی مهم است</strong></p>
ویرایشگرهای HTML
حال زمان آن رسیده است که یاد بگیریم چگونه اولین صفحه وب سایت خود را بسازیم .
اول از همه، ما به یک ویرایشگر HTML نیاز داریم ، ما باید مطمئن شویم که ابزار مناسبی داریم .
انتخاب های زیادی در بازار وجود دارد. در اینجا تعدادی از محبوب ترین ها را به شما معرفی میکنم.
Notepad ++
یکی از گزینه های رایج برای کدنویس های HTML و زبان های دیگر Notepad ++ است. این یک برنامه کوچک برای دانلود و انجام عملکردهای مورد نیاز برای نوشتن کد تمیز است.
تصویر بالا نمای ویرایشگر Notepad ++ است. به دور از زرق و برق اما کار را انجام می دهد.
Visual Studio Code
Visual Studio Code (معروف به VS Code) ویرایشگر کد منبع متن‌باز و رایگان است که توسط شرکت مایکروسافت ارائه شده است. VS Code به برنامه‌نویسان و توسعه‌دهندگان کمک می‌کند تا اشکال زدایی و اصلاح کد را با استفاده از روش‌های هوشمند انجام دهند. VS Code در ویندوز، لینوکس و macOS قابل استفاده است.
اگرچه، VS Code ویرایشگری نسبتاً سبک به حساب می‌آید، اما برخی ویژگی‌های قدرتمندش آن را به یکی از محبوب‌ترین ابزارهای توسعه تبدیل کرده است.
ایجاد اولین صفحه وب شما با HTML
ابتدا باید ویرایشگر HTML خود را باز کنید، که در آن کد خود را بنویسید.حال باید صفحه خود را با تگ های زیر بچینید.
ساخت پایه یک صفحه HTML
<!doctype html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>طراحی سایت و سئو متاوبز</title>
</head>
</html>
بیایید بخش های جداگانه کد بالا را توضیح دهیم:
- <doctype html!> : اظهارنامه اولیه سند html ما است که بالا نیز توضیح دادم.
- <“html dir=”rtl” lang=”fa-IR> : می گوید که آنچه در آینده خواهد آمد یک سند HTML است که به فارسی نوشته شده است و چیدمان آن از راست به چپ باشد.
- <head> : شروع بخش head را نشان می دهد . بخش head جایی است که تمام پارامترهای اصلی صفحه در آن قرار می گیرند. بیشتر آنها روی صفحه نمایش داده نمی شوند.
- <“meta charset=”UTF-8> : تعریف می کند که چه مجموعه کاراکتری برای نوشتن سند استفاده می شود. نیازی به صرف زمان زیاد برای این نیست؛ فقط از این اعلان همانطور که هست استفاده کنید.
- <title/>طراحی سایت و سئو متاوبز <title> : متنی که در تگ <title> قرار می گیرد همان نام صفحه استکه در بالای پنجره مرورگر یا برگه ظاهر می شود. مانند:
<meta> : در این تگ اطلاعات مربوط به سند ذخیره می شودمانند: رمزگذاری کاراکتر، نام (زمینه صفحه)، توضیحات.
میتوانید کد بالا را بردارید، آن را کپی کرده و در یک فایل جدید جای‌گذاری کنید، سند را با نام index.html ذخیره کنید و این یک صفحه HTML کاملا معتبر خواهد بود. باید توجه کنید که میتوانید نام دلخواه خود را به جای index قرار دهید ولی حتما باید پسوند سند شما html. باشد.
اگر کدها رو درست وارد کنید شما باید این صفحه را مشاهده کنید.
تبریک می گویم ! حال شما می توانید یک صفحه ساده با HTML را در مرورگر بالا بیاورید.گام به گام همراه ما باشید تا HTML را به صورت حرفه ای فرابگیرید.
اگر سوالی یا نظری دارید خوش حال میشیم تا با ما در میان بگذارید.
