دوره «آموزش رایگان HTML برای طراحی سایت گردشگری» یک مسیر کاملاً عملی و کاربردی است که با هدف آموزش پایهایترین مهارت لازم برای ورود به دنیای طراحی وب تهیه شده است. در این دوره، شما با صفر مطلق شروع میکنید و قدم به قدم یاد میگیرید چگونه ساختار یک وبسایت حرفهای – با نمونه سایت گردشگری – را با زبان HTML طراحی کنید.
این دوره بهعنوان اولین قدم در مسیر طراحی سایت، به شکلی کاملاً ساده، گویا و پروژه محور، شما را از سطح مبتدی تا سطح نیمهپیشرفته هدایت میکند.
درضمن هدیه آمورشگاه پایگاه دانش به شما کارآموز عزیز، پشتیبانی رایگان مستقیم با مدرس دوره آقای مهندس علیرضا مهدیان است. این پشتیبانی از طریق پیامرسان روبیکا و با شناسه @mahdian انجام میشود.
در این دوره چه چیزی یاد میگیرید؟
در طول این دوره با مفاهیم زیر آشنا میشوید:
- ساختار صفحات وب و اصول کار HTML
- نوشتن متنها، سرعنوانها و پاراگرافهای مناسب برای معرفی جاذبهها و تورها
- افزودن تصاویر سایت گردشگری
- ساخت منوی ناوبری برای دستهبندی مقاصد و تورها
- ساخت لینکهای داخلی و خارجی برای معرفی شهرها، کشورها و مطالب مرتبط
- ایجاد جداول برای نمایش قیمتها، تورها و زمانبندی
- کار با فرمها برای دریافت ثبتنام، رزرو تور و درخواست اطلاعات
- کار با تگهای معنایی (Semantic Tags) جهت بهبود سئو
- استاندارد سازی ساختار صفحات برای جستجوگرها و تجربه کاربری بهتر
- ساخت یک پروژه نهایی: یک سایت گردشگری حرفهای
دوره آموزش رایگان HTML برای طراحی سایت گردشگری برای چه کسانی مناسب است؟
این دوره بهطور ویژه برای افراد زیر طراحی شده است:
- افرادی که هیچ تجربه قبلی در کدنویسی ندارند
- کسانی که قصد دارند طراحی سایت را بهعنوان یک مهارت درآمدزا یاد بگیرند
- علاقهمندان به ورود به مسیر طراحی وب (Front-end)
- علاقهمندان به گردشگری که میخواهند وبسایت گردشگری خود را بسازند
- دانشجویان و فعالان حوزه گردشگری، مهماننوازی، سفر و تور
ویژگیهای کلیدی دوره آموزش رایگان HTML برای طراحی سایت گردشگری
- آموزش از صفر با زبان ساده
- مناسب برای افراد غیرتکنیکال
- مثالها و پروژههای مرتبط با صنعت گردشگری
- کاملاً کاربردی و قابل پیادهسازی در کسبوکار واقعی
- همراه با تمرینات عملی پس از هر جلسه
- مناسب برای ادامه مسیر به دوره CSS و سپس JavaScript
پروژه نهایی دوره آموزش رایگان HTML برای طراحی سایت گردشگری
در پایان دوره آموزش رایگان HTML برای طراحی سایت گردشگری، با استفاده از مهارتهای بهدستآمده، یک بستر برای وبسایت گردشگری خواهید ساخت که شامل:
- هدر و منوی اصلی
- معرفی تورها
- بخش مقاصد محبوب
- گالری تصاویر
- بخش ثبتنام و ارتباط با ما
این پروژه پایه و اساس ادامه مسیر شما در CSS و JavaScript خواهد بود.
پیشنیاز دوره آموزش رایگان HTML برای طراحی سایت گردشگری
هیچ پیشنیازی لازم نیست.
فقط کافی است علاقه داشته باشید و به دنیای سفر و وب علاقهمند باشید.
1. مقدمه
1) سرفصلهای این جلسه
در این درس با مفاهیم پایهای زیر آشنا میشوید:
- وب چیست؟ و چگونه کار میکند
- وبسایت و صفحه وب چه تفاوتی دارند
- HTML چیست؟
- مرورگر چگونه HTML را نمایش میدهد
وب چیست؟
وب (World Wide Web) مجموعهای از صفحات متصل به هم در اینترنت است که از طریق مرورگر قابل مشاهده هستند.
برای مثال وقتی شما وارد یک سایت گردشگری میشوید و اطلاعاتی درباره شهرهای مختلف میبینید، در واقع در حال مشاهده صفحات وب هستید.
هر صفحه وب از کدهایی ساخته شده است که مرورگر آنها را میخواند و به شکل متن، تصویر و دکمه نمایش میدهد.
وبسایت چیست؟
یک وبسایت مجموعهای از چندین صفحه وب است که به هم لینک شدهاند.
مثال: یک سایت گردشگری ممکن است شامل این صفحات باشد:
- صفحه اصلی
- صفحه معرفی مقصدها
- صفحه تورها
- صفحه تماس
هر کدام از اینها یک صفحه وب (Web Page) هستند.
HTML چیست؟
HTML مخفف عبارت زیر است:
Hyper Text Markup Language
HTML یک زبان نشانهگذاری است که برای ساخت ساختار صفحات وب استفاده میشود.
با HTML میتوانیم مشخص کنیم:
- عنوان صفحه چیست
- متنها چگونه نمایش داده شوند
- تصاویر کجا قرار بگیرند
- لینکها چگونه باشند
به عبارت ساده:
HTML اسکلت یا ساختار اصلی یک صفحه وب را میسازد.
مرورگر چگونه HTML را نمایش میدهد؟
مرورگرهایی مثل Chrome، Firefox، Edge و Safari کد HTML را میخوانند و آن را به صفحه قابل مشاهده برای کاربر تبدیل میکنند.
یعنی کاربر کدها را نمیبیند؛ بلکه نتیجه آن را میبیند.
مثلاً این کد:
<h1>به سایت گردشگری خوش آمدید</h1>
در مرورگر به صورت یک عنوان بزرگ به شکل زیر نمایش داده میشود.
به سایت گردشگری خوش آمدید
۲) ساخت اولین صفحه HTML
مراحل کار:
1. یک فایل جدید بسازید
2. نام آن را بگذارید: index.html
3. فایل را با یک ویرایشگر باز کنید (مثل VS Code یا Notepad)
کد زیر را داخل فایل بنویسید:
“`
به سایت گردشگری من خوش آمدید
در این سایت با بهترین مقاصد گردشگری آشنا میشوید.
“`
حالا فایل را ذخیره کنید و آن را در مرورگر باز کنید.
نتیجه:
- یک عنوان بزرگ
- یک متن توضیحی
نمایش داده میشود.
توضیح بخشهای کد
<DOCTYPE html!>
این خط به مرورگر میگوید که این فایل یک صفحه HTML5 است.
بخش دوم
<html>
</html>
تمام محتوای صفحه داخل این تگ قرار میگیرد.
بخش سوم
<head>
</head>
این قسمت شامل اطلاعات صفحه است، مثل:
- عنوان صفحه
- لینک فایلهای CSS
- متادیتا
عنوان صفحه
<title>سایت گردشگری من</title>
این عنوان در تب مرورگر نمایش داده میشود.
بدنه صفحه
<body>
</body>
هر چیزی که کاربر در صفحه میبیند داخل این بخش قرار میگیرد.
مثل متن، تصویر، لینک، دکمه و …
۳) مثال واقعی در سایت گردشگری
کد نمونه:
“`
<!DOCTYPE html>
<html>
<head>
<title>سفر به اصفهان</title>
</head>
<body>
<h1>اصفهان، نصف جهان</h1>
<p>
اصفهان یکی از زیباترین شهرهای ایران است و جاذبههایی مانند
میدان نقش جهان، سی و سه پل و پل خواجو دارد.
</p>
</body>
</html>
۴) تمرین عملی
معرفی یک شهر گردشگری
مراحل:
- یک فایل به نام زیر بسازید travel.html
- در صفحه موارد زیر را بنویسید:
-
- عنوان صفحه: نام شهر
- یک عنوان بزرگ برای شهر
- یک پاراگراف درباره آن شهر
۵) آزمون کوتاه
الف) Hyper Text Markup Language
ب) High Transfer Machine Language
ج) Hyper Tool Mark Language
د) Home Tool Mark Language
سوال 2) کدام تگ ساختار اصلی صفحه HTML را مشخص میکند؟
الف) body
ب) html
ج) head
د) title
سوال 3) عنوانی که در تب مرورگر نمایش داده میشود در کدام تگ قرار میگیرد؟
الف) header
ب) body
ج) title
د) h1
سوال 4) محتوای قابل مشاهده برای کاربر داخل کدام بخش قرار میگیرد؟
الف) head
ب) body
ج) html
د) meta
سوال 5) مرورگر چه کاری با کد HTML انجام میدهد؟
الف) آن را به تصویر تبدیل میکند
ب) آن را اجرا میکند و نمایش میدهد
ج) آن را حذف میکند
د) آن را به CSS تبدیل میکند
جواب آزمون را میتوانید با اعلام شماره جلسه و شماره سوال به آیدی زیر در روبیکا بفرستید:
نم نم
خیلی خوب بود.
نم نم
خیلی خوب بود. آفرین. لطفا ازین مطالب بیشتر بگذارید.