دوره آموزش رایگان html و css همراه با تمرین – جلسه دوم
سلام به کاربران عزیز ویرا وردپرس ، سامان اعطاسی هستم جلسه دوم از دوره آموزش رایگان html و css همراهتون هستم خب بریم سراغ جلسه دوم بدون از بین بردن وقت شما عزیزان….
تو جلسه دوم میخواهم با برخی از مفاهیم پیشرفته HTML آشناتون کنم و قدرت طراحی سایت و html که پایه اساس دنیای وب هست بهتر بشناسیم و درک کنیم.
HTML معنایی
HTML معنایی به استفاده از تگ های HTML برای انتقال معنا و ساختار به محتوای یک صفحه وب اشاره دارد. این باعث می شود تا صفحه برای کاربران دارای معلولیت بیشتر در دسترس باشد و همچنین به موتورهای جستجو کمک می کند تا محتوای صفحه را بهتر درک کنند.
در اینجا چند نمونه از تگ های HTML معنایی آورده شده است:
- <header>: برای نشان دادن بالای صفحه یا بخش استفاده می شود
- <nav>: برای حاوی پیوندهای ناوبری استفاده می شود
- <main>: برای حاوی محتوای اصلی یک صفحه استفاده می شود
- <article>: برای حاوی محتوای مستقل، مانند پست های وبلاگ یا مقالات خبری استفاده می شود
- <section>: برای گروه بندی مطالب مرتبط با هم استفاده می شود
- <aside>: برای حاوی محتوایی استفاده می‌شود که مستقیماً به محتوای اصلی مرتبط نیست، مانند نوار کناری یا کادر فراخوانی
Metadata
Metadata اطلاعات بیشتری در مورد یک صفحه وب ارائه می دهد که در پنجره مرورگر نمایش داده نمی شود. این اطلاعات توسط موتورهای جستجو، پلتفرم های رسانه های اجتماعی و سایر ابزارها برای درک و نمایش صفحه استفاده می شود.
برخی از تگ های متادیتا رایج عبارتند از:
- <meta>: برای تعیین عنوان صفحه، توضیحات و کلمات کلیدی استفاده می شود
- <link>: برای پیوند دادن به شیوه نامه های خارجی یا منابع دیگر استفاده می شود
- <script>: برای پیوند دادن به فایل های جاوا اسکریپت خارجی استفاده می شود
در اینجا مثالی از نحوه استفاده از برخی از این برچسب ها آورده شده است:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Web Page</title>
<meta name="description" content="This is a description of my web page">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Welcome to my web page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>This is some content for section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<p>This is some content for section 2.</p>
</section>
<aside>
<h3>Related Content</h3>
<ul>
<li><a href="#">Related Link 1</a></li>
<li><a href="#">Related Link 2</a></li>
<li><a href="#">Related Link 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 My Web Page</p>
</footer>
</body>
</html>
در این مثال، ما از HTML معنایی برای نشان دادن ساختار و معنای محتوا و همچنین از تگ های metadata برای ارائه اطلاعات اضافی در مورد صفحه استفاده می کنیم.
نکته مهم : دوستان عزیز لطفا و حتما مثال های بالارو دستی کد نویسی کنید و خروجی html بگیرید و داخل مرورگر نگاه کنید که درک بهتری داشته باشید
خبببب حالا که خوب تمرین کردید قسمت بالارو بریم سمت مسائل پیشرفته تر html
بیایید به برخی از مفاهیم پیشرفته HTML شیرجه بزنیم.
فرم‌ها
فرم‌های HTML به کاربران اجازه می‌دهند داده‌هایی را وارد کنند که می‌توانند برای پردازش به سرور ارسال شوند. در اینجا برخی از عناصر و ویژگی های رایج فرم آورده شده است:
- <form>: برای ایجاد یک فرم و مشخص کردن عملکرد آن (محل ارسال داده‌های فرم) و روش (نحوه ارسال داده‌های فرم، به عنوان درخواست GET یا POST) استفاده می‌شود.
- <input>: برای ایجاد انواع مختلف عناصر فرم، مانند فیلدهای متنی، چک باکس ها، دکمه های رادیویی و دکمه ها استفاده می شود.
- ویژگی name: برای نام گذاری یک عنصر فرم استفاده می شود که برای شناسایی داده ها هنگام ارسال فرم استفاده می شود.
- ویژگی value: برای تعیین مقدار پیش فرض یک عنصر فرم استفاده می شود.
- خصیصه type: برای تعیین نوع عنصر فرم، مانند متن، چک باکس، رادیو، ارسال، بازنشانی و موارد دیگر استفاده می شود.
در اینجا مثالی از یک فرم ساده آورده شده است
<form action="/submit-form" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="Submit"> </form>
در این مثال، ما از یک عنصر فرم استفاده می‌کنیم که ویژگی action روی “/submit-form” و ویژگی متد روی “POST” تنظیم شده است. ما همچنین از عناصر ورودی برای ایجاد فیلدهای متنی برای نام، ایمیل و رمز عبور کاربر و همچنین دکمه ارسال استفاده می‌کنیم.
چند رسانه ای Multimedia :
HTML به شما امکان می دهد محتوای چندرسانه ای مانند تصاویر، صدا و ویدئو را در صفحات وب خود جاسازی کنید.
در اینجا برخی از عناصر و ویژگی های چند رسانه ای رایج آورده شده است:
- <img>: برای جاسازی تصاویر در یک صفحه وب استفاده می شود، با ویژگی src که نشانی اینترنتی تصویر را مشخص می کند و ویژگی alt متن جایگزین را برای خوانندگان صفحه نمایش می دهد.
- <audio>: برای جاسازی فایل‌های صوتی در یک صفحه وب، با ویژگی src که نشانی اینترنتی فایل صوتی را مشخص می‌کند و عنصر <source> برای ارائه گزینه‌های بازگشتی در صورتی که مرورگر از فرمت صوتی مشخص شده پشتیبانی نمی‌کند استفاده می‌شود.
- <video>: برای جاسازی فایل‌های ویدیویی در یک صفحه وب، با ویژگی src که نشانی اینترنتی فایل ویدیویی را مشخص می‌کند و عنصر <source> برای ارائه گزینه‌های بازگشتی در صورتی که مرورگر از فرمت ویدیویی مشخص شده پشتیبانی نمی‌کند استفاده می‌شود.
- صفات یا ( attributes) عرض width و ارتفاع height : برای تعیین ابعاد یک تصویر یا عنصر چند رسانه ای استفاده می شود.
در اینجا مثالی از نحوه استفاده از برخی از این عناصر آورده شده است:
<img src="image.jpg" alt="An image of a cat"> <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio tag. </audio> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video>
در این مثال، ما از عنصر <img> برای جاسازی تصویر یک گربه، عنصر <audio> برای جاسازی یک فایل صوتی با گزینه های بازگشتی، و عنصر <video> برای جاسازی یک فایل ویدئویی با گزینه های بازگشتی و بازگشت استفاده می کنیم. ابعاد مشخص شده
خب موارد بالارو خوب تمرین کنید کامل مسلط شدین برین سراغ جلسه سوم خواهشا چندین بار کدهارو بنویسید درکشون کنید تا بتونید جلسات بعدی بهتر درک کنید. امیدوارم از این آموزش لذت برده باشید و کلی دانشتون افزایش پیدا کرده باشه
موفق و پیروز باشید تا جلسه بعدی
