دوره آموزش رایگان html و css همراه با تمرین – جلسه اول
سلام به کاربران عزیز ویرا وردپرس ، من سامان اعطاسی تصمیم گرفتم دوره مقدماتی html و css بهتون آموزش بدم و همراه با تمرین و از همه مهم تر این دوره آموزشی رایگان می باشد. این دوره کاملا به صورت متنی و همراه با حل تمرین می باشد ولی سعی میکنم به صورت ویدیویی هم آموزش هارو رکورد کنم و آپلود کنم داخل هر جلسه ولیییی قولللل نمیدممممم :)))) ، خب دیگه بریم سراغ آموزش و مقدمات آموزش شما برای اینکه html و css یاد بگیرید کاربران ویندوزی برای شروع فقط نیاز به notepad خود ویندوز دارن (الان میتونم بهتون بگم از ادیتور های مختلف استفاده کنید ولی خواهشا اینکارو نکنید چون باید انگشت هاتون عادت کنند به کد نویسی و سرعت کدنویسیتون بالا بره از چند جلسه بعد حتما میگم از چه ادیتوری نصب کنید ) حتما تمرینات کامل حل کنید من جواب تمرین هارو در جلسه بعدی هر تمرین براتون قرار میدم بزن بریم….
HTML (Hypertext Markup Language) زبان نشانه گذاری استانداردی است که برای ایجاد صفحات وب استفاده می شود. این پایه و اساس وب است و برای هر کسی که می خواهد وب سایت یا برنامه های کاربردی وب بسازد، دانش ضروری است.
در اینجا یک مرور سریع از برخی از اصول اولیه HTML آورده شده است:
برچسب ها: HTML از برچسب هایی تشکیل شده است که برای علامت گذاری محتوای یک صفحه وب استفاده می شود. برچسب ها در پرانتزهای زاویه ای نوشته می شوند، مانند این: <tagname>. تگ های مختلفی در HTML وجود دارد که هر کدام هدف خاص خود را دارند.
عناصر: تگ های HTML اغلب به صورت جفت، با یک تگ باز و یک تگ بسته استفاده می شوند. محتوای بین تگ های باز و بسته شدن عنصر نامیده می شود. برای مثال، یک عنصر پاراگراف به این شکل است: <p>متنی در اینجا</p>.
ویژگی ها: تگ های HTML همچنین می توانند دارای ویژگی هایی باشند که اطلاعات بیشتری در مورد عنصر ارائه می دهند. ویژگی ها به تگ افتتاحیه اضافه می شوند و در قالب ویژگی = “value” نوشته می شوند. به عنوان مثال، ویژگی href برای تعیین URL یک لینک استفاده می شود.
ساختار: اسناد HTML یک ساختار اساسی دارند که شامل یک اعلان نوع، یک بخش سر و یک بخش بدنه است. اعلان doctype به مرورگر می‌گوید که سند از کدام نسخه HTML استفاده می‌کند، و بخش head حاوی ابرداده‌های مربوط به سند (مانند عنوان صفحه) است. بخش بدنه حاوی محتوای واقعی صفحه وب است.
Semantics: HTML به عنوان یک زبان معنایی طراحی شده است، به این معنی که از برچسب ها و عناصر برای ارائه معنا و ساختار به محتوای یک صفحه وب استفاده می شود. این برای دسترسی و بهینه سازی موتورهای جستجو (SEO) مهم است.
اینها تنها تعدادی از اصول اولیه HTML هستند. چیزهای بیشتری برای یادگیری وجود دارد، اما امیدواریم این نقطه شروع خوبی به شما بدهد.
خب اجازه دهید با برخی از تگ ها و عناصر اولیه HTML شروع کنیم. در اینجا چند برچسب وجود دارد که اغلب از آنها استفاده خواهید کرد:
- <html> – این تگ شروع یک سند HTML را نشان می دهد. همیشه اولین تگ در یک فایل HTML است.
- <head> – این تگ حاوی ابرداده در مورد سند است، مانند عنوان صفحه، پیوندها به شیوه نامه ها و اسکریپت ها. این اطلاعات در پنجره مرورگر نمایش داده نمی شود، اما توسط مرورگر و موتورهای جستجو استفاده می شود.
- <body> – این تگ حاوی محتوای واقعی صفحه وب مانند متن، تصاویر و ویدیوها است. این بخشی از سند است که در پنجره مرورگر نمایش داده می شود.
- <h1> تا <h6> – این تگ ها برای ایجاد عناوین با اندازه های مختلف استفاده می شوند. <h1> بزرگترین عنوان و <h6> کوچکترین عنوان است.
- <p> – این تگ برای ایجاد پاراگراف های متن استفاده می شود.
- <a> – این تگ برای ایجاد لینک استفاده می شود. ویژگی href برای مشخص کردن URL که پیوند باید به آن برود استفاده می شود.
- <img> – این تگ برای درج تصاویر در صفحه وب استفاده می شود. ویژگی src برای تعیین آدرس فایل تصویری استفاده می شود.
در اینجا یک مثال از یک سند HTML اساسی است که از این برچسب ها استفاده می کند:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is my first attempt at creating a web page. I hope you enjoy it!</p>
<img src="myimage.jpg" alt="A picture of my cat">
<p>Check out my <a href="blog.html">blog</a> for more great content!</p>
</body>
</html>
در این مثال، ما یک سند اولیه HTML داریم که شامل عنوان صفحه، عنوان، پاراگراف متن، تصویر و پیوند به صفحه دیگر است. می توانید این کد را در فایلی با پسوند html ذخیره کنید و آن را در مرورگر وب خود باز کنید تا ببینید چه شکلی است.
خب تبریک میگم بهتون شما اولین صفحه وب تونستید کد نویسی کنید این دست آورد بزرگی هست به امید اینکه بتونید کلی پول در بیارید و دلار پارو کنید 🙂 بریم ادامه درسسسس
مطمئنا، اجازه دهید به برخی از مفاهیم پیشرفته تر HTML برویم.
۱- لیست ها
HTML دو نوع لیست دارد: لیست های مرتب شده (<ol>) و لیست های نامرتب (<ul>). لیست های مرتب شده شماره گذاری می شوند، در حالی که لیست های نامرتب دارای گلوله هستند. هر دو نوع لیست از تگ <li> برای نشان دادن هر آیتم لیست استفاده می کنند. در اینجا یک مثال است:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
۲-جداول
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
۳- فرم ها
فرم‌های HTML به کاربران اجازه می‌دهند داده‌ها را وارد کرده و آنها را به سرور وب ارسال کنند. فرم‌ها با استفاده از تگ <form> ایجاد می‌شوند و هر عنصر فرم (مانند فیلدهای ورودی متن، چک باکس‌ها و دکمه‌ها) با تگ خودش مشخص می‌شود. در اینجا یک مثال است:
<form action="/submit-form" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message"></textarea> <input type="submit" value="Send"> </form>
در این مثال، یک فرم با سه فیلد ورودی (یک فیلد متنی برای نام کاربر، یک قسمت ایمیل و یک قسمت متنی برای پیام کاربر) و یک دکمه ارسال داریم. هنگامی که کاربر فرم را ارسال می کند، داده ها به URL مشخص شده در ویژگی action ارسال می شوند.
اینها تنها چند نمونه از مفاهیم پیشرفته تر HTML هستند. بچه ها هر سوالی داشتید می تونید تو کامنت ها بپرسید.
خب موارد بالارو خوب تمرین کنید کامل مسلط شدین برین سراغ جلسه دوم خواهشا چندین بار کدهارو بنویسید درکشون کنید تا بتونید جلسات بعدی بهتر درک کنید.
موفق و پیروز باشید تا جلسه بعدی
