کدیکس – مرجع کد و پلاگین
خانه  برنامه نویسی  HTML  آموزش کد محور HTML – جلسه دهم

آموزش کد محور HTML – جلسه دهم

HTML, برنامه نویسی, برنامه نویسی وب
0


جلسه دهم آموزش کد محور زبان برنامه نویسی HTML،

این کد HTML شامل اطلاعات تماس و آیکون‌های شبکه‌های اجتماعی است. آیکون‌ها از کتابخانه Font Awesome استفاده می‌کنند. برای استفاده از این کتابخانه، شما باید لینک آن را در قسمت <head> از صفحه HTML خود اضافه کنید.

کد HTML زیر را کپی و اجرا کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه وب ساده</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-VtK99xlYb1+aC4d0koC5g4fgPFg2EWrOYkrSuydrD5ejy1nHK4yM2WVMjyMAzRbP5SDXw2BX5Fq3gguoKTsE2g==" crossorigin="anonymous" />
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f8f8;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }
        section {
            padding: 20px;
        }
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        li {
            margin-bottom: 10px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        form {
            margin-top: 20px;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        input[type="submit"] {
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
        .gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
        }
        .gallery img {
            margin: 10px;
            max-width: 100%;
            height: auto;
        }
        .contact-info {
            margin-top: 20px;
            text-align: center;
        }
        .social-icons {
            margin-top: 20px;
            text-align: center;
        }
        .social-icons a {
            display: inline-block;
            margin: 0 10px;
            color: #333;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <header>
        <h1>صفحه وب ساده</h1>
    </header>

    <section>
        <h2>بخش اصلی</h2>
        <p>اینجا محتوای اصلی صفحه وب قرار دارد. می‌توانید متن، تصاویر و لینک‌ها را در اینجا قرار دهید.</p>

        <h3>لیست نمونه:</h3>
        <ul>
            <li>مورد ۱</li>
            <li>مورد ۲</li>
            <li>مورد ۳</li>
        </ul>

        <h3>تصویر نمونه:</h3>
        <img src="https://via.placeholder.com/300" alt="تصویر نمونه">

        <h3>لینک نمونه:</h3>
        <p><a href="https://www.example.com">لینک به سایت دیگر</a></p>

        <h3>فرم نمونه:</h3>
        <form action="/submit" method="post">
            <label for="name">نام:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">ایمیل:</label>
            <input type="email" id="email" name="email" required>

            <label for="message">پیام:</label>
            <textarea id="message" name="message" rows="4" required></textarea>

            <input type="submit" value="ارسال">
        </form>

        <h3>گالری تصاویر:</h3>
        <div class="gallery">
            <img src="https://via.placeholder.com/150" alt="تصویر ۱">
            <img src="https://via.placeholder.com/150" alt="تصویر ۲">
            <img src="https://via.placeholder.com/150" alt="تصویر ۳">
        </div>
    </section>

    <div class="contact-info">
        <h2>اطلاعات تماس</h2>
        <p>آدرس: تهران، خیابان مثال، کوچه نمونه</p>
        <p>تلفن: ۰۲۱-۲۲۲۲۲۲۲</p>
        <p>ایمیل: info@example.com</p>
    </div>

    <div class="social-icons">
        <h2>شبکه‌های اجتماعی</h2>
        <a href="https://www.facebook.com"><i class="fab fa-facebook"></i></a>
        <a href="https://www.twitter.com"><i class="fab fa-twitter"></i></a>
        <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
        <a href="https://www.linkedin.com"><i class="fab fa-linkedin"></i></a>
    </div>

    <footer>
        <p>© ۲۰۲۴ تمامی حقوق محفوظ است.</p>
    </footer>
</body>
</html>
  • توضیحات :
    • <!DOCTYPE html>: این تگ مشخص می‌کند که از نسخه HTML کدام استاندارد استفاده می‌شود. در اینجا از HTML5 استفاده شده است.
    • <html lang="fa" dir="rtl">: تگ اصلی HTML که زبان صفحه را به فارسی (fa) و جهت نوشتار را به راست به چپ (rtl) تعیین می‌کند.
    • <head>: این بخش شامل اطلاعات مربوط به سربرگ صفحه است، از جمله متا تگها، عنوان صفحه، و لینک به فایل‌های استایل (CSS).
    • <meta charset="UTF-8">: تعیین کدنویسی صفحه به UTF-8 برای پشتیبانی از کاراکترهای چندزبانه.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: تنظیمات نمایش برای بهینه سازی صفحه برای دستگاه‌های مختلف.
    • <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-VtK99xlYb1+aC4d0koC5g4fgPFg2EWrOYkrSuydrD5ejy1nHK4yM2WVMjyMAzRbP5SDXw2BX5Fq3gguoKTsE2g==" crossorigin="anonymous" />: لینک به فایل CSS از کتابخانه Font Awesome برای استفاده از آیکون‌ها.

  • تنظیمات عمومی (CSS):
    • body: تنظیمات مربوط به بدنه صفحه، از جمله فونت، رنگ پس‌زمینه، حاشیه و فاصله‌ها.
    • header: استایل هدر صفحه که شامل رنگ زمینه و رنگ متن است.
    • section: تنظیمات بخش اصلی صفحه.
    • ul, li: استایل لیست‌های نمونه در صفحه.
    • img: تنظیمات تصاویر برای جلوگیری از خروج از حاشیه.
    • footer: استایل فوتر صفحه.
    • form: تنظیمات فرم ارسال پیام.
    • .gallery: استایل گالری تصاویر با استفاده از Flexbox.
    • .contact-info: تنظیمات بخش اطلاعات تماس.
    • .social-icons: تنظیمات بخش آیکون‌های شبکه‌های اجتماعی.

  • آیکون‌های شبکه‌های اجتماعی:
    • fab fa-facebook, fab fa-twitter, fab fa-instagram, fab fa-linkedin: از کلاس‌های Font Awesome برای نمایش آیکون‌های مربوط به شبکه‌های اجتماعی استفاده شده است.

در ادامه، به برخی از عناصر HTML پرکاربرد دیگر می‌پردازیم.

لینک‌ها (Links):

  • a: این تگ برای ایجاد لینک‌ها به صفحات دیگر یا منابع خارجی استفاده می‌شود. مثال:
<a href="https://www.example.com">لینک به سایت دیگر</a>

تصاویر (Images):

  • img: این تگ برای قرار دادن تصاویر در صفحه استفاده می‌شود. مثال:
<img src="path/to/image.jpg" alt="توضیح تصویر">

alt: متن توضیحی که در صورت عدم بارگذاری تصویر به نمایش در می‌آید.

فرم‌ها (Forms):

  • form: برای ایجاد فرم‌های ورود اطلاعات تعریف می‌شود. مثال:
<form action="/submit" method="post">
    <!-- المان‌های فرم اینجا قرار می‌گیرند -->
</form>

input: برای ایجاد فیلدهای ورود، تکست، رمزنگاری شده و… استفاده می‌شود. مثال:

<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username">

textarea: برای ایجاد فیلد متن بلند (مثلاً برای نظرات) استفاده می‌شود. مثال:

<label for="message">پیام:</label>
<textarea id="message" name="message" rows="4"></textarea>

select و option: برای ایجاد فیلد انتخاب (dropdown) استفاده می‌شود. مثال:

<label for="country">کشور:</label>
<select id="country" name="country">
    <option value="iran">ایران</option>
    <option value="usa">آمریکا</option>
    <!-- سایر گزینه‌ها -->
</select>

button: برای ایجاد دکمه‌ها در فرم‌ها استفاده می‌شود. مثال:

<button type="submit">ارسال</button>

جداول (Tables):

  • table: برای ایجاد جداول در صفحه وب استفاده می‌شود. مثال:
<table>
    <tr>
        <th>سرستون ۱</th>
        <th>سرستون ۲</th>
    </tr>
    <tr>
        <td>سلول ۱-۱</td>
        <td>سلول ۱-۲</td>
    </tr>
    <tr>
        <td>سلول ۲-۱</td>
        <td>سلول ۲-۲</td>
    </tr>
</table>
  • tr: نشان‌دهنده یک ردیف در جدول است.
  • th: نشان‌دهنده هدر یک ستون در جدول است.
  • td: نشان‌دهنده یک سلول در جدول است.

لیست‌ها (Lists):

  • ul: برای ایجاد لیست نامرتب استفاده می‌شود. مثال:
<ul>
    <li>مورد ۱</li>
    <li>مورد ۲</li>
    <li>مورد ۳</li>
</ul>

ol: برای ایجاد لیست مرتب (شماره دار) استفاده می‌شود. مثال:

<ol>
    <li>مورد ۱</li>
    <li>مورد ۲</li>
    <li>مورد ۳</li>
</ol>

li: نشان‌دهنده هر مورد در لیست است.

این عناصر اساسی HTML هستند و می‌توانید با ترکیب آن‌ها صفحات وب متنوعی ایجاد کنید.

برچسب‌ها:
https://codix.ir/?p=714
امین طاحونه

نوشته‌های مرتبط

قوانین ارسال دیدگاه

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.
دیدگاه‌ها