ویرا وردپرس ویرا وردپرس
جستجو
سبد خرید

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

 

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

 

HTML معنایی

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

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

Metadata

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

 

برخی از تگ های متادیتا رایج عبارتند از:

در اینجا مثالی از نحوه استفاده از برخی از این برچسب ها آورده شده است:

<!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>&copy; 2023 My Web Page</p>
    </footer>
  </body>
</html>

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

 

نکته مهم : دوستان عزیز لطفا و حتما مثال های بالارو دستی کد نویسی کنید و خروجی  html بگیرید و داخل مرورگر نگاه کنید که درک بهتری داشته باشید

 

 

خبببب حالا که خوب تمرین کردید قسمت بالارو بریم سمت مسائل پیشرفته تر html

بیایید به برخی از مفاهیم پیشرفته HTML شیرجه بزنیم.

فرم‌ها

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

 

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

<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="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> برای جاسازی یک فایل ویدئویی با گزینه های بازگشتی و بازگشت استفاده می کنیم. ابعاد مشخص شده

 

خب موارد بالارو خوب تمرین کنید کامل مسلط شدین برین سراغ جلسه سوم خواهشا چندین بار کدهارو بنویسید درکشون کنید تا بتونید جلسات بعدی بهتر درک کنید. امیدوارم از این آموزش لذت برده باشید و کلی دانشتون افزایش پیدا کرده باشه

موفق و پیروز باشید تا جلسه بعدی

 

question