تگ های اولیه HTML
توی این قسمت از دوره آموزش رایگان HTML در 3 ساعت میخوایم کدنویسی رو شروع کنیم. اول شما با child ها و parent آشنا میشید و بعد ساختار و تگ های اولیه html مثل body و head رو یاد میگیرید.
پیشنهاد میشه برای یادگیری بهتر، ابتدا ویدیوی بالا صفحه که قسمتی از دوره آموزش رایگان HTML از وبسایت MEGA JS هست رو مشاهده کنید و بعد به مطالعه متن بپردازید.
DOCTYPE چیکار میکنه؟
همیشه بالای تمام کدهای HTML یه دستور DOCTYPE مشاهده میشه. DOCTYPE یه فقط یه دستوره و تگ HTML نیست. این تیکه کد کارش مشخص کردن نوع و ورژن کدهاس. با این تیکه کد میتونید به گوگل بگید که دارید با ورژن 5 HTML کار میکنید.
<!DOCTYPE html>
برای ورژن های قبلی html هم میتونید از حالت های دیگه این دستور استفاده کنید اما پیشنهاد میشه که از html5 استفاده کنید.
CHILD و PARENT
توی HTML هر تگی میتونه یک یا چند تا PARENT یا والد داشته باشه. تگ های والد دور تگ های فرزندشون قرار میگیرن. برای مثال در تیکه کد زیر تگ HTML والد تگ های head و body هستش و DOCTYPE هم هیچ والدی نداره. تگ هایی که داخل تگ دیگه قرار میگیرن تگ فرزند یا child گفته میشن(توی این مثال body و head فرزند html محسوب میشن).
<!DOCTYPE html> <html> <head></head> <body></body> </html>
تگ HTML
توی عکس بالا خط 4 میتونید تگ html رو مشاهده کنید. این تگ والد تمام تگ های اولیه html و سایتتونه. شما باید تمام کدهای سایت رو داخل این تگ بنویسید. این تگ مشخص کننده شروع و پایان کدهای صفحتونه و محتوای داخل اون به مرورگر تحویل داده میشه.
تگ head
تگ head اولین تگیه که داخل تگ html قرار میگیره و یکسری محتوایی رو بین تگ های باز و بسته ش مینویسیم که توی سایت نمایش داده نمیشه. مثل لینک کدهای css یا چیزهایی که مربوط به سئو و موتور های جستجوی گوگله.
تگ title یکی از مهم ترین تگ های فرزند این تگه. ما با استفاده از تگ title میتونیم عنوان صفحه مون که بالای مرورگر نمایش داده میشه رو مشخص کنیم. توی عکس زیر یه نمونه از این تگ رو میبینید. این تگ برای سئوی سایت خیلی مهمه و اصلا نباید فراموش بشه.
تگ هایی که میتونن فرزند head باشن:
- <style> برای کدنویسی css داخل فایل html
- <script> برای کدنویسی javascript
- <meta> این تگ به صورت کلی برای سئو سایته و میتونید چیزهایی مثل کلمات کلیدی رو داخلش بنویسید
- <title> برای نوشتن عنوان سایته که بالاتر توضیح دادیم
- <link> کاربرد هایی مثل استفاده از کدهای css یا گذاشتن آیکون برای سایت داره
<!DOCTYPE html> <html> <head> <title>test</title> </head> </html>
تگ BODY در HTML
بعد از تگ head باید تگ body رو بنویسیم. body بدنه کدهامونه و برعکس تگ head هرچیزی که توی سایت میبینیم رو باید داخل تگ های باز و بسته ی body قرار بدیم. میشه گفت این تگ جزء مهمترین تگ های این زبانه و در عین حال که خیلی مهمه راحت هم هست. شما فقط باید حالت باز و بسته رو بنویسید و داخلش المان های مورد نطرتون مثل متن، عکس، ویدیو، جدول و… رو بذارید.
نکاتی برای شروع برنامه نویسی
حالا که به این جلسه رسیدید و شروع به کدنویسی کردید وقتشه این نکات رو بدونید تا بتونید کدهای بهتری بنویسید
- فاصله ها و enter ها توی html اهمیتی نداره پس سعی منید با استفاده از این فاصله ها کدهاتون رو مرتب کنید تا برنامه نویس بهتری باشید. توی مقاله نصب ویرایشگر vs code مرتب کردن کدها رو کامل توضیح دادم.
- اگر کدهاتون ظاهر خوبی نداشت نگران نباشید. بعدا با css بهش استایل میدیم.
- وقتی به مشکلی توی کدهاتون خوردید اونو سرچ کنید و دنبال جواب بگردید و نگران هم نباشید این باگ ها برای تمام برنامه نویس ها پیش میاد.
الان شما میتونید قالب و ساختار کلی یه وبسایت رو بنویسید. توی جلسه بعد شروع میکنیم داخل صفحمون محتوای متنی بذاریم. هرجایی از مسیر یادگیری html مشکل یا سوالی داشتید میتونید توی کامنت های مربوط به اون قسمت سوالتون رو بپرسید. برای تماشای قسمت بعد میتونید از لینک زیر استفاده کنید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.