آموزش رایگان طراحی سایت با HTML

آموزش رایگان HTML در 15 جلسه

1- چرا با html شروع کنیم؟؟؟

اگه قصد دارید برنامه نویسی رو شروع کنید خیلی مهمه که زبان خوبی رو انتخاب کنید، html زبان آسونیه و برای کسی که تازه وارد دنیای برنامه نویسی شده انتخاب خوبیه. html یه زبان نشانه گذاریه و زبان برنامه نویسی محسوب نمیشه، پس میتونه شمارو با کدنویسی آشنا کنه ولی درگیر منطق و محاسبات برنامه نویسی نشید. همچنین html یکی از ابزار های پایه برنامه نویسی سایته و اگر شما html رو یاد بگیرید میتونید در آینده به یک برنامه نویس front-end یا back-end تبدیل بشید. این دو حوزه برنامه نویسی بازار کار خوبی تو ایران و خارج دارن راه های زیادی برای کسب درآمد ازشون وجود داره.

چرا برنامه نویسی رو با HTML شروع کنیم

2- vs code چیست؟ آموزش کامل نصب vs code

VS Code یه برنامه کامپیوتریه که شما میتونید توی اون خیلی راحت تر کدهاتون رو بنویسید و اجرا کنید. این برنامه امکانات مفیدی مانند تکمیل خودکار کدها ، اشکال‌زدایی کد و تم های جذاب داره که به شما کمک می‌کنه کدنویسی راحت‌تری داشته باشید. همچنین می‌توانید با اضافه کردن پلاگین‌ها قابلیت‌های بیشتری به VS Code اضافه کنید مثلا با پلاگین prettier میتونید کدهاتون رو مرتب تر کنید.

قبل از اومدن vs code ادیتور های مختلفی استفاده میشد مثل php storm یا atom، اما اونا مشکلاتی مثل حجم بالا یا سنگینی نرم افزار داشتن. با اومدن vs code که یه برنامه سبک و رایگانه اکثر برنامه نویسا ادیتورشون رو تغییر دادن

برای دین این جلسه از دوره آموزش رایگان HTML از از لینک زیر استفاده کنید

آموزش نصب vs code

3- html چیه ؟ 

html که مخفف HyperText Markup Language هستش، به معنای زبان نشانه گذاری ابرمتن. درسته که html یک زبان برنامه نویسی نیست اما ما برای طراحی سایت ها به html نیاز داریم و هیچ سایتی بدون html وجود نداره. به زبان ساده html پایه وبسایت هارو تشکیل میده. اگه ما سایت هارو یک ساختمان در نظر بگیریم،html مثل اسکلت و قالب ساختمونه، css هم میشه ظاهر و زیبایی خونه.

توی html با استفاده از تگ های مختلف ما المان های اصلی سایتمون رو میسازیم بعد با css بهش استایل میدیم و با جاوااسکریپت هم منطق سایتمون رو مینویسیم.اگر میخواید بیشتر با مفهوم html آشنا بشید میتونید از صفحه زیر استفاده کنید

HTML چیست؟

4- یه صفحه وب چطوری کار میکنه

صفحات وب همون اطلاعات و محتواهایی هستن زمان باز کردن یک وبسایت می‌بینید. وقتی میخواید به یه سایت وارد شید، درخواست شما به سرور وبسایت ارسال می‌شه. این سرور اطلاعات مربوط به صفحه‌ای که دنبال اون هستید رو ارسال می‌کند. صفحات وب از زبان HTML برای ساخته شدن استفاده می‌کنن. این زبان برای تعریف ساختار صفحه وب و اضافه کردن متن، تصاویر و لینک‌ها استفاده می‌شه. زبان های دیگری هم مثل CSS برای زیبایی‌بخشی به صفحه و JavaScript برای تعامل با کاربر استفاده میشه.

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

یک وبسایت چگونه عمل میکند

5- ساختار اولیه HTML

• برای تعیین ورژن HTML از  DOCTYPE استفاده میکنیم
• تمام کدهامون رو باید داخل تگ باز و بسته بنویسیم. هر تگ یه حالت باز و بسته داره که محتوا مورد نظرمون رو بینشون میذاریم، اما بعضی تگ ها مثل تگ img استثناء هستن که تو جلسه های بعد توضیحشون میدم.
• هر سایت دوتا تگ اصلی body و head داره. تگ head برای بعضی کد هایی که باید نوشته بشن ولی در صفحه نمایش داده نمیشن استفاده میشه. تو تگ body هم هر چیزی که باید تو صفحه نمایش داده بشه رو میذاریم.
• توی لینک زیر توضیحات کامل این جلسه از دوره آموزش رایگان HTML به صورت متنی و ویدیویی براتون قرار داده شده

تگ های اولیه html

6- نوشتن متن در HTML

نوشتن متن تو HTML یه کار خیلی رایجه. برای نوشتن متن‌ها تو HTML میتونیم از تگ‌های P و H استفاده کنیم. تگ P برای نشون دادن پاراگراف‌ها به کار میره و متن‌های مختلف داخل خودش قرار می‌ده، هر بار که از تگ P جدیدی استفاده کنید، یه پاراگراف جدید شروع می‌شه. از طرف دیگه، تگ H رو داریم که برای عنوان‌ها یا سرفصل‌های متن استفاده می‌شه. با تگ های H1 تا H6 می‌تونید عنوان‌های مختلف را ایجاد کنید، که هر کدام دارای سایز و قلم متفاوتی هستن. با استفاده از این تگ‌ها، می‌تونید متن‌های خودتون رو برای کاربر سایتتون راحت‌تر و قابل فهم تر کنید.تگ های H روی سئو سایت هم تاثیر زیادی دارن. برای یادگیری کامل متن ها تو HTML میتونید از صفحه زیر دیدن کنید

نوشتن متن در HTML

7- ساخت لینک در HTML

لینک ها یکی از ویژگی های مهم توی html هستن. ما با لینک ها میتونیم کاربر رو از صفحه ای به صفحه دیگه منتقل کنیم. تگ a کار ساخت لینک رو برای ما تو html انجام میده.این تگ از ما یه لینک و یه متن دریافت میکنه و متن رو تو صفحه نمایش میده. وقتی که روی متن کلیک شد کاربر رو به صفحه ای که آدرسش رو گرفته میفرسته.

لینک ها میتونن علاوه بر هدایت کاربر به صفحه های دیگه کارهایی مثل جابجا کردن کاربر در همون صفحه رو هم انجام بدن. شما میتونید توی لینک زیر کامل تگ a در html رو یاد بگیرید

لینک ها در HTML

8-عکس ها در html

عکس ها توی یه وبسایت المان های خیلی مهمی هستن..توی HTML، عکس‌ها با استفاده از تگ <img> نمایش داده می‌شن. این تگ ویژگی هایی هم داره مثل src که برای مشخص کردن مسیر عکس استفاده میشه یا alt که یه متن جایگزین برای تصویر تعریف میکنه و اگر عکس لود نشد اون متن رو نشون میده.

بعضی عکس ها هم هستن که سایز و ابعادشون با چیزی که ما میخوایم فرق میکنه، ما میتونیم با استفاده از ویژگی های width (طول) و height (ارتفاع) ابعاد اونها رو تغییر بدیم و به اندازه های مختلف تبدیلشون کنیم. مثلا اگر بخوایم یه عکس مربعی بسازیم اما یه عکس مسطتیلی داریم میتونیم width و height عکس رو مساوی بذاریم ( مثلا هر دو 200px).

این تگ جزو معدود تگ هایی هست که تگ بسته ندارن یا به اصطلاح Single tag هستن. برای یادگیری کامل تگ img و نحوه نوشتن single tag ها میتونید از لینک زیر استفاده کنید.

اگه میخواید این مبحث از آموزش رایگان HTML رو به صورت ویدیویی و متنی و کامل یاد بگیرید روی لینک زیر کلیک کنید

عکس ها در HTML

9-چگونه به صفحمون ویدیو اضافه کنیم؟؟؟

توی خیلی از وبسایت ها از ویدیو استفاده میشه،حتی بعضی سایت ها مانند یوتیوب و آپارات تمام محتواشون ویدیو هست. پس ما به عنوان یک طراح سایت حتما نیاز پیدا خواهیم کرد که یه ویدیو رو به سایتمون اضافه کنیم.برای اضافه کردن ویدیو به سایت ما باید از تگ video و اتریبیوت هاش استفاده کنیم. برای دیدن این جلسه از آموزش رایگان html میتونید از لینک زیر استفاده کنید:

گذاشتن ویدیو در HTML

10-چجوری توی سایت موسیقی قرار بدیم؟؟؟

مطمئنا هممون تا حالا از سایت های موزیک توی گوگل استفاده کردیم. ما به عنوان یک طراح سایت باید برای ساختن این نوع صفحات، قرار دادن موزیک رو توی سایتمون بلد باشیم.

موزیک ها با استفاده از تگ  <audio> توی html قرار میگیرن.برای اضافه کردن یه فایل صوتی به صفحه وب، کافیه که آدرس فایل صوتی موردنظرمون رو به عنوان مقدار src تو تگ <source> قرار بدیم ( تگ <source> داخل تگ <audio> قرار میگیره) به این ترتیب، کاربران می‌تونن فایل صوتی رو گوش کنن. از این تگ میشه برای پخش موسیقی، پادکست‌ها و هر فایل صوتی ای استفاده کرد. اگر نیاز داشتید حالت و ظاهر موزیک پلیرتون رو عوض کنید، میتونید این کارو با استفاده از css و javascript انجام بدید.

گذاشتن موسیقی در HTML

11- ساخت لیست در HTML

لیست ها کاربرد زیادی توی HTML دارن مثلا ما تو منو سایت یا فهرست محصولات و مقاله ها و یا نمایش کامنت ها از لیست ها استفاده میکنیم. توی این جلسه از آموزش رایگان html به لیست ها میپردازیم.

برای ساخت یه لیست html ابتدا باید یه تگ دور اعضای لیستمون قرار بدیم تا مشخص بشه لیست ما چه حالتی داره ( مرتبه یا نامرتب ) . معمولا اینجا از تگ ul یا ol استفاده میکنیم.تگ ol با اعداد اعضای لیستمون رو طبقه بندی میکنه اما تگ ul اینطور نیست. بعد از نوشتن این تگ میتونیم با استفاده از تگ li هر کدوم از عضوهای لیست رو درون صفحه قرار بدیم.

توی لینک زیر آموزش این مبحث از HTML به صورت متنی و ویدیویی برای شما قرار داده شده.

لیست ها در html

12- ساخت جدول

ساختن جدول یکی از بهترین راه های نمایش اطلاعات تو سایته.با جدول ها میتونیم اطلاعاتمون رو به صورت منظم به کاربر نشون بدیم. البته این تنها دلیل ساخت جدول نیست، ما با ساخت جدول میتونیم اطلاعات رو بهتر به ربات های گوگل بدیم و سایت ما بازدید بیشتری داشته باشه.

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

ساخت جدول در HTML

13- بخش بندی سایت در HTML

در هر صفحه وب بخش های مختلفی مثل هدر، منو یا محصولات داره، حتی داخل این ها هم میتونه چندتا بخش دیگه باشه. ما باید این بخش ها رو از هم جدا کنیم. این کار با استفاده از تگ div انجام میشه، به عبارتی تگ div مثل یه ظرف نگهدارنده میمونه. برای استفاده از تگ div، اول تگ باز و بسته ش رو مینویسم بعد بینشون محتوایی که نیاز داریم رو مینویسیم. ( <div> محتوا </div> )

تگ span هم برای جدا کردن بخش هایی از متن استفاده میشه. برای یادگیری کامل تگ div و span از لینک زیر استفاده کنید.

بخش بندی سایت در HTML

14- تگ های مفهومی

با اومدن نسخه جدید html تگ های جدیدی به وجود اومدن به نام تگ های مفهومی تا بتونیم وبسایت رو بهتر بخش بندی کنیم. با استفاده از تگ های مفهومی مانند تگ header یا تگ nav میتونیم بخش های مختلف صفحه را بهتر تقسیم بندی کنیم و در نتیجه این کار آپدیت کردن کد ها در آینده برامون راحت تر میشود.همچنین این تگ ها تاثیر مثبتی توی سئو دارن.

در اینجا اسم چندتا از این تگ ها رو مشاهده میکنید:

• <header>
• <main>
• <nav>
• <aside>
• <article>
• <footer>

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

تگ های معنایی در HTML

15- ساختار یه وبسایت واقعی چجوریه

شاید براتون سوال پیش بیاد که من این دوره رو دیدم اما چرا نمیتونم یه سایت کامل مثل دیجیکالا رو طراحی کنم.یه وبسایت واقعی فقط با html ساخته نمیشه و از زبان های دیگه ای مثل css و javascript و حتی کتابخونه ای مثل ری اکت هم استفاده میشه.پس شما الان قدم اول طراح سایت شدن رو برداشتید.

توی لینک زیر که قسمت آخر از دوره آموزش HTML هست، براتون یه تمرین قرار دادم  بهتون گفتم که ساختار یه وبسایت واقعی چجوریه

ساختار وبسایت واقعی با HTML