همراهان عزیز برای دریافت اطلاع رسانی های سایت در کانال تلگرام (@rayawpir) عضو شوید.

پیوستن به کانال تلگرام

بروزرسانی

سبد خرید

ویژه

جلسه 3 آموزش HTML: بررسی ساختار کلی یک سند HTML

آخرین بروزرسانی: 21 بهمن 1403
8 دیدگاه
زمان مطالعه: 4 دقیقه

ادیتور کد آنلاین رایاوردپرس

کدهای این مقاله را می‌توانید در ادیتور آنلاین ما تست کنید تا مفاهیم را بهتر یاد بگیرید!

امتحان کن

سلام رفیق عزیز! خوش اومدی به سومین جلسه آموزش HTML از سایت رایا وردپرس 👋

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

اگه آماده‌ای، بریم سراغش! 😎🔥

📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

سند HTML چیست؟ 🤔

یک سند HTML فایلیه که شامل کدهای HTML می‌شه و مرورگر اون رو تفسیر می‌کنه تا محتوای صفحه وب رو نمایش بده. هر سند HTML یه ساختار مشخص داره که از تگ‌های مختلف تشکیل شده. این تگ‌ها به مرورگر می‌گن که هر بخش از صفحه چطوری نمایش داده بشه. 📄🔍

ساختار کلی یک سند HTML 🏗️

هر سند HTML شامل چند بخش اصلیه که باید رعایت بشه تا صفحه به درستی اجرا بشه. این بخش‌ها عبارتند از:

1️⃣ اعلام نوع سند با تگ <!DOCTYPE html> – این تگ به مرورگر اعلام می‌کنه که این فایل یک سند HTML هست و از نسخه‌ی HTML5 استفاده می‌کنه. این دستور باید همیشه در اولین خط کدهات قرار بگیره تا مرورگر بتونه صفحه رو به درستی تفسیر کنه.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

2️⃣ تگ <html> 🌐 – این تگ ریشه‌ی اصلی سند HTML هست و تمام محتوای صفحه وب داخل اون قرار می‌گیره. مرورگر با دیدن این تگ متوجه می‌شه که اینجا شروع سند HTML شماست.

همچنین، می‌تونید در تگ <html> از ویژگی lang برای مشخص کردن زبان صفحه استفاده کنی. مثلاً:

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

3️⃣ تگ <head> – مثل پشت‌صحنه‌ی یک فیلمه! 🎬 – اطلاعات و مواردی که کاربر نمی‌بینه، ولی برای مرورگر و موتورهای جستجو خیلی مهمه، در اینجا قرار می‌گیره. این اطلاعات شامل موارد زیر می‌شه:

عنوان صفحه <title> (که در تب مرورگر نشون داده می‌شه)
متاتگ‌ها <meta> (مثل توضیحات صفحه برای موتورهای جستجو)
لینک <link> به فایل‌های CSS برای استایل‌دهی
لینک به اسکریپت‌ها <script> و منابع دیگه مثل فونت‌ها، آیکون‌ها، و…

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

4️⃣ تگ <body> – اینجا جاییه که تمام متن‌ها، عکس‌ها، لینک‌ها، ویدیوها و هر چیزی که قراره کاربر ببینه، قرار داده می‌شه.

اجزای مهم <body>:

<h1> تا <h6> → برای عناوین مختلف.
<p> → برای پاراگراف‌ها.
<a> → برای لینک دادن به صفحات دیگه.
<img> → برای نمایش تصاویر.

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

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

 ____                      __        __ ____  
|  _ \  __ _ _   _  __ _   \ \      / /|  _ \ 
| |_) |/ _` | | | |/ _` |   \ \ /\ / / | |_) |
|  _ <| (_| | |_| | (_| |    \ V  V /  |  __/ 
|_| \_\\__,_|\__, |\__,_|     \_/\_/   |_|    
             |___/                            

       [🔒 Code Locked - Please Login to Access]

توضیحات سند HTML بالا:

خط ۱: به مرورگر میگیم این سند HTML5 هست.
خط ۲: شروع سند HTML و تنظیم زبان به فارسی.
خط ۳: شروع بخش head که اطلاعات مهم رو داره.
خط ۴: تنظیم کدگذاری به UTF-8 (برای پشتیبانی از فارسی).
خط ۵: عنوان صفحه که تو تب مرورگر میاد.
خط ۷: شروع بخش body که محتوای اصلی اینجاست.
خط ۸: یک عنوان بزرگ (h1) با متن خوشآمدگویی.
خط ۹ و ۱۰: دو پاراگراف ساده.

چطور یک سند HTML رو اجرا کنیم؟ 🖥️

حالا که اولین سند HTML خودتو نوشتی، باید ببینی که توی مرورگر چطوری اجرا می‌شه. مراحل:

1️⃣ یه فایل متنی جدید باز کن و کدت رو توش بنویس.

2️⃣ فایل رو با پسوند .html ذخیره کن (مثلاً index.html)

3️⃣ روش کلیک کن یا اون رو با مرورگر باز کن (Chrome، Firefox، Edge و …)

4️⃣ نتیجه رو ببین و کیف کن! 😍

جمع بندی 🎯

خب، حالا که ساختار اصلی یه سند HTML رو یاد گرفتی، تمرین کن! یه فایل جدید بساز، کدهای بالا رو کپی کن و تغییرات دلخواهت رو اعمال کن. ببین چطوری مرورگر محتوا رو نمایش میده. 🚀

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

به پایان جلسه سوم رسیدیم. خسته نباشی، الان میتونی یه صفحه وب ساده اما استاندارد بسازی! 🥳

تا جلسه بعدی فعلن خدانگهدات 🙂

5/5 - (3 امتیاز)

محتوای سایت برات مفید بود؟ 👋

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

❤️ حمایت می‌کنم

ارسال نظر ( 8 نظر تایید شده )

آریا جلالی - 1 سال پیش

پاسخ

ایدی گروه تلگرام رو لطف کنین

لینک کپی شد
1. سعید مدیر سایت - 1 سال پیش
  
  پاسخ
  
  بله خدمت شما 👇
  https://t.me/RayawpGP
  
  لینک کپی شد
آریا جلالی - 1 سال پیش

پاسخ

جسارتا دلیل ارسال نشدنش رو میگین فک کنم وقتی این < علامت رو میزارم ارسال نمیشه

مرسی

لینک کپی شد
1. سعید مدیر سایت - 1 سال پیش
  
  پاسخ
  
  داخل گروه تلگرام این مورد رو مطرح کنید چون تو کامنت امکان درج بعضی کاراکترها نیست دلیلش اینه !
  
  لینک کپی شد
آریا جلالی - 1 سال پیش

پاسخ

سلام خسته نباشین

دلیل اینکه تگ meta دومی ( meta name …) نوشته نشده چیه ؟

لینک کپی شد
1. سعید مدیر سایت - 1 سال پیش
  
  پاسخ
  
  سلام و درود
  متوجه منظورتون نشدم! کدوم متا تگ؟!
  
  لینک کپی شد
الهام افتخاری - 1 سال پیش

پاسخ

از نرم افزار دریم ویور نمیشه استفاده کرد؟!

لینک کپی شد
1. سعید مدیر سایت - 1 سال پیش
  
  پاسخ
  
  درود به شما
  محبوب ترین نرم افزار در زمینه کدنویسی VS CODE هست اما خب شما میتونید از نرم افزارهای دیگه هم استفاده کنید. نرم افزاری که نامبردین یعنی دریم ویور هم نرم افزار خوبیه میتونید برای ویرایش کدها از اون استفاده کنید 🙂
  
  لینک کپی شد

36نفر در حال مطالعه

633بازدید اخیر

15نفر این پست رو بوکمارک کردن

4دقیقه مطالعه

8دیدگاه

به قـــلم: ســــعید

زندگی من همیشه یک پروژه در حال توسعه بود... پر از کدهای ناقص، باگ‌های غیرمنتظره و آپدیت‌های بی‌پایان؛ اما با هر دیباگ، هر تجربه و هر خطا، نسخه‌ای بهتر از خودم ساختم. ⚡

+۹۰

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

۴۰۰

مقاله منتشر شده

مشاهده همه مقالات

خانه
آموزش‌ها

پرامپت هوش مصنوعی آموزش HTML آموزش CSS
ابزارهای برنامه نویسی
دانلود قالب و افزونه

قالب وردپرس افزونه وردپرس
لینک‌های مفید

تماس با ما درباره ما حمایت از ما

خرید اشتراک ویژه