به رایــــــــا وردپـــــرس خوش اومدین

آموزش HTML

https://rayawp.ir/?p=21658

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

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

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

💻

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

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

امتحان کن ⟶

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

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

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

سند HTML چیست؟ 🤔

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

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

جلسه 20 آموزش HTML: آموزش رمزگذاری یا انکود کاراکترها

جلسه 20 آموزش HTML: آموزش رمزگذاری یا انکود کاراکترها

جلسه 16 آموزش HTML: عناصر Block و Inline در html

جلسه 16 آموزش HTML: عناصر Block و Inline در html

جلسه 4 آموزش HTML: بررسی تگ های هدینگ (h1 تا h6)

جلسه 4 آموزش HTML: بررسی تگ های هدینگ (h1 تا h6)

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

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

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|

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

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|

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

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|

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

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

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|

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

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|

توضیحات سند 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 نظر تایید شده )

آریا جلالی عضو رایا وردپرس

پاسخ

4 ماه پیش

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

سعید مدیر سایت

پاسخ

4 ماه پیش
@ در پاسخ به آریا جلالی

بله خدمت شما 👇
https://t.me/RayawpGP

آریا جلالی عضو رایا وردپرس

پاسخ

4 ماه پیش

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

مرسی

سعید مدیر سایت

پاسخ

4 ماه پیش
@ در پاسخ به آریا جلالی

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

آریا جلالی عضو رایا وردپرس

پاسخ

4 ماه پیش

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

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

سعید مدیر سایت

پاسخ

4 ماه پیش
@ در پاسخ به آریا جلالی

سلام و درود
متوجه منظورتون نشدم! کدوم متا تگ؟!

الهام افتخاری عضو رایا وردپرس

پاسخ

4 ماه پیش

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

سعید مدیر سایت

پاسخ

4 ماه پیش
@ در پاسخ به الهام افتخاری

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

📖 آنچه خواهید خواند

Toggle

👓

4 نفر در حال مطالعه این مقاله

📊

1936 بازدید در 24 ساعت اخیر

🔖

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

⏱️

4 دقیقه زمان مطالعه این مطلب

💬

8 دیدگاه برای این مقاله ثبت شده

ما رو در شبکه های اجتماعی دنبال کن 😉❤️

سعید

300 مقاله

عاشق یادگیری و پیشرفت در برنامه نویسی و ارتقا مهارت هام هستم. سعی میکنم دانش و تجربیات ارزشمندم رو در رایا وردپرس باهاتون به اشتراک بزارم :)

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