آموزش برنامه نویسی وب🌐: بخش html قسمت چهارم

در این قسمت از آموزش به سراغ کمی css برای تغییر ظاهر وبسایتمون میریم همچنین فونت ها رو کمی کار میکنیم.

مقدمه

سری آموزش برنامه نویسی وب در وبلاگ آزادی، سعی میکند تمام مهارت هایی که یک برنامه‌نویس یا طراح وب نیاز دارد را آموزش دهد.

در این قسمت (چهارم) css درون خطی و داخلی رو کمی یاد میگیریم و به سراغ ساختن جدول هم میریم.

ساخت جدول در html

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

ساختار پایه جدول

برای ایجاد یک جدول در HTML، از تگ‌های زیر استفاده می‌شود:

<table>: برای شروع جدول، تمامی تگ های مربوط به جدول داخل این تگ نوشته میشوند.
<tr> : برای ایجاد یک ردیف در جدول.
<td>: برای ایجاد یک سلول داده.
<th>: برای ایجاد یک سلول عنوان (سرفصل).

مثال ساده از یک جدول

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


    <table border="1">

        <tr>

            <th>نام</th>

            <th>سن</th>

            <th>شهر</th>

        </tr>

        <tr>

            <td>علی</td>

            <td>25</td>

            <td>تهران</td>

        </tr>

        <tr>

            <td>سارا</td>

            <td>30</td>

            <td>اصفهان</td>

        </tr>

    </table>

ادغام سلول‌ها

HTML به شما این امکان را می‌دهد که سلول‌ها را ادغام کنید تا نمایش بهتری داشته باشید. این کار با استفاده از صفت های colspan و rowspan انجام می‌شود.

برای ادغام ردیف ها از rowspan و برای ادغام ستون ها از colspan استفاده میکنیم.

هر مقداری که به این صفات در تگ th , td بدید به همون اندازه با سلول های جلویی در جهت جدول ادغام خواهد شد. به مثال زیر دقت کنید:

مثال ادغام سلول‌ها


    <table border="1">

        <tr>

            <th>نام</th>

            <th colspan="2">جزئیات</th>

        </tr>

        <tr>

            <td>علی</td>

            <td>سن: 25</td>

            <td>شهر: تهران</td>

        </tr>

        <tr>

            <td>سارا</td>

            <td rowspan="2">سن: 30</td>

            <td>شهر: اصفهان</td>

        </tr>

        <tr>

            <td>حمید</td>

            <td>شهر: مشهد</td>

        </tr>

    </table>

اضافه کردن عنوان به جدول

شما می‌توانید با استفاده از تگ <caption>یک عنوان به جدول اضافه کنید:

مثال جدول با عنوان


    <table border="1">

        <caption>اطلاعات کاربران</caption>

        <tr>

            <th>نام</th>

            <th>سن</th>

            <th>شهر</th>

        </tr>

        <tr>

            <td>علی</td>

            <td>25</td>

            <td>تهران</td>

        </tr>

        <tr>

            <td>سارا</td>

            <td>30</td>

            <td>اصفهان</td>

        </tr>

    </table>

مثال جدول


    <table>

        <tr>

            <th>نام</th>

            <th>سن</th>

            <th>شهر</th>

        </tr>

        <tr>

            <td>علی</td>

            <td>25</td>

            <td>تهران</td>

        </tr>

        <tr>

            <td>سارا</td>

            <td>30</td>

            <td>اصفهان</td>

        </tr>

    </table>

نتیجه‌گیری بخش جدول

جدول‌ها در HTML ابزاری قدرتمند برای نمایش داده‌ها به صورت منظم هستند. با استفاده از تگ‌های مناسب و استایل‌دهی می‌توانید جداول زیبا و کاربردی بسازید.

ویژگی‌های قلم (Font) در CSS

CSS (Cascading Style Sheets) ابزاری قدرتمند برای طراحی و استایل‌دهی به صفحات وب است. یکی از عناصر مهم در طراحی وب، قلم (Font) است. در این مقاله به بررسی ویژگی‌های مختلف قلم در CSS می‌پردازیم.

۱. ویژگی font-family

این ویژگی برای تعیین نوع قلم استفاده می‌شود. با استفاده از font-family می‌توانیم یک یا چند قلم را مشخص کنیم. مرورگرها به ترتیب از قلم‌هایی که معرفی شده‌اند استفاده می‌کنند.

نکته: همیشه بهتر است از چندین قلم به عنوان گزینه پشتیبان استفاده کنید.

مثال:


    p {

        font-family: 'Times New Roman', Verdana, Courier;

    }

۲. ویژگی font-size

این ویژگی برای تعیین اندازه قلم (سایز فونت) استفاده می‌شود. اندازه فونت می‌تواند به واحدهای مختلفی نظیر پیکسل px، em و درصد % مشخص شود.

px: واحد ثابت است.
em: واحدی نسبی است که به اندازه فونت پیش‌فرض مرورگر (معمولاً ۱۶ پیکسل) وابسته است.
%: درصدی از اندازه فونت والد خود را نشان می‌دهد.

مثال:


    h1 {

        font-size: 24px;

    }

    

    p {

        font-size: 1.5em;

    }

    

    .small-text {

        font-size: 80%;

    }

۳. ویژگی font-weight

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

normal: حالت عادی
bold: توپر
bolder: توپرتر از bold
lighter: نازک‌تر از normal
عدد: مقادیر عددی از ۱۰۰ تا ۹۰۰

مثال:


    strong {

        font-weight: bold;

    }

    

    h2 {

        font-weight: 700;

    }

    

    .light {

        font-weight: 300;

    }

۴. ویژگی text-align

این ویژگی برای ترازبندی متن درون عناصر استفاده می‌شود. مقادیر قابل قبول عبارتند از:

left: تراز از سمت چپ
center: تراز وسط
right: تراز از سمت راست
justify: تراز متقارن

مثال:


    h1 {

        text-align: center;

    }

    

    p {

        text-align: left;

    }

    

    .right-align {

        text-align: right;

    }

۵. ویژگی line-height

این ویژگی برای تعیین فاصله بین خطوط متن استفاده می‌شود. استفاده از line-height می‌تواند به خوانایی متن کمک کند.

مثال:


    p {

        line-height: 1.5;

    }

۶. ویژگی text-transform

این ویژگی برای تغییر حالت حروف (حروف بزرگ، کوچک، و ...) استفاده می‌شود.

uppercase: همه حروف را به بزرگ تبدیل می‌کند.
lowercase: همه حروف را به کوچک تبدیل می‌کند.
capitalize: حرف اول هر کلمه را بزرگ می‌کند.

مثال:


    .title {

        text-transform: uppercase;

    }

نتیجه‌گیری بخش فونت

با استفاده از ویژگی‌های مختلف CSS برای قلم، می‌توانید طراحی متنی زیبا و کاربرپسند در وبسایت خود داشته باشید. این ویژگی‌ها به شما کمک می‌کند تا متن‌ها را با توجه به نیاز خود استایل‌دهی کنید و تجربه کاربری بهتری را برای بازدیدکنندگان سایت خود فراهم آورید. به یاد داشته باشید که انتخاب قلم مناسب و سایز آن تأثیر زیادی بر روی زیبایی و خوانایی صفحات وب دارد.

پایان قسمت قبلی قسمت بعدی