متن‌آرایی و تگ‌های معنایی

۱. انتخاب قلم

body {
    font-family: Tahoma, sans-serif;
}

h1, h2 {
    font-family: 'Times New Roman', serif;
}

.code-sample {
    font-family: Consolas, monospace;
}

انتخاب قلم: نمونه 01-font-family

شرح مثال

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

به همین دلیل، آخرین مورد فهرست همیشه یک خانواده عمومی است. این‌ها نام قلم نیستند، بلکه دسته‌بندی‌اند و هر سیستمی حتماً یکی از هر دسته دارد:

اگر نام قلم فاصله داشته باشد، مانند Times New Roman، باید داخل گیومه نوشته شود.

۲. وزن و شیب حروف

.bold {
    font-weight: bold;
}

.light {
    font-weight: normal;
}

.heavy {
    font-weight: 700;
}

.italic {
    font-style: italic;
}

.no-italic {
    font-style: normal;
}

وزن و شیب: نمونه 02-font-weight-style

شرح مثال

font-weight ضخامت حروف است. دو راه برای نوشتنش هست:

• با کلمه: normal برای حالت عادی و bold برای پررنگ.
• با عدد: از ۱۰۰ تا ۹۰۰ و در گام‌های صدتایی. عدد ۴۰۰ برابر normal و عدد ۷۰۰ برابر bold است. البته قلم باید آن وزن را داشته باشد؛ تهوما تنها دو وزن دارد، پس نوشتن ۳۰۰ یا ۵۰۰ روی آن تفاوتی ایجاد نمی‌کند.

font-style: italic حروف را کج می‌کند. نکته مهم برای ما این است که حروف فارسی حالت کج استاندارد ندارند و مرورگر آنها را به زور می‌خواباند، که معمولاً زشت می‌شود. پس italic را برای متن فارسی توصیه نمی‌کنیم.

۳. فاصله خطوط و حروف

این دو ویژگی کمتر شناخته‌شده‌اند اما تأثیرشان بر خوانایی متن از هر چیز دیگری بیشتر است.

body {
    line-height: 1.8;
}

.tight {
    line-height: 1.2;
}

h1 {
    letter-spacing: 1px;
}

.spaced-title {
    letter-spacing: 3px;
}

.compact {
    letter-spacing: -0.5px;
}

فاصله خطوط و حروف: نمونه 03-line-height-letter-spacing

شرح مثال

line-height فاصله عمودی بین خطوط یک پاراگراف است. بهترین راه نوشتنش، عدد بدون واحد است. عدد ۱.۸ یعنی «ارتفاع هر خط، ۱.۸ برابر اندازه قلم باشد». مزیت عدد بدون واحد این است که اگر بعداً اندازه قلم را عوض کنید، فاصله خطوط خودش متناسب تنظیم می‌شود.

letter-spacing فاصله افقی بین حروف است. عدد مثبت حروف را از هم دور و عدد منفی آنها را به هم نزدیک می‌کند.

۴. تزیین و تبدیل متن

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.deleted {
    text-decoration: line-through;
}

.upper {
    text-transform: uppercase;
}

.lower {
    text-transform: lowercase;
}

.capital {
    text-transform: capitalize;
}

تزیین و تبدیل متن: نمونه 04-text-decoration-transform

شرح مثال

text-decoration خط‌های تزیینی روی متن را کنترل می‌کند:

• none برداشتن خط. پرکاربردترین حالت، برای برداشتن خط زیر لینک‌ها.
• underline خط زیر متن.
• line-through خط روی متن. برای نمایش قیمت قدیمی در تخفیف‌ها عالی است.

لینک‌ها به طور پیش‌فرض آبی و زیرخط‌دار هستند. در طراحی امروزی معمولاً خط را برمی‌داریم و به جایش رنگ متفاوت و یک hover: می‌گذاریم، دقیقاً همان کاری که در فصل قبل کردیم.

text-transform بزرگی و کوچکی حروف را عوض می‌کند بدون اینکه متن اصلی شما تغییر کند:

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

۵. تگ‌های معنایی

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

<body>

    <header>
        <h1>دبیرستان دانش</h1>
        <nav>
            <a href="#">خانه</a>
            <a href="#">درباره ما</a>
        </nav>
    </header>

    <main>
        <section>
            <h2>معرفی مدرسه</h2>
            <p>متن معرفی...</p>
        </section>

        <article>
            <h2>خبر جدید</h2>
            <p>متن خبر...</p>
        </article>
    </main>

    <aside>
        <h3>لینک‌های مفید</h3>
    </aside>

    <footer>
        <p>تمام حقوق محفوظ است</p>
    </footer>

</body>

تگ‌های معنایی: نمونه 05-semantic-tags

شرح مثال

نکته‌ای که همه را غافلگیر می‌کند: این تگ‌ها هیچ ظاهر خاصی ندارند. اگر header را با یک div عوض کنید، صفحه دقیقاً همان‌طور نمایش داده می‌شود. پس چرا از آنها استفاده کنیم؟

1. موتورهای جست‌وجو. گوگل با دیدن nav می‌فهمد آن قسمت منوست و با دیدن article می‌فهمد آنجا محتوای اصلی است. این روی رتبه سایت شما اثر دارد.
2. دسترس‌پذیری. برنامه‌های صفحه‌خوان که برای نابینایان صفحه را می‌خوانند، با این تگ‌ها می‌توانند مستقیم به محتوای اصلی بپرند و منو را رد کنند.
3. خوانایی کد. در یک صفحه با پنجاه div، پیدا کردن پاورقی سخت است. با footer فوراً پیدا می‌شود.

۶. div و span

این دو تگ هیچ معنی خاصی ندارند و دقیقاً به همین دلیل ساخته شده‌اند: وقتی می‌خواهید چیزی را تنها برای استایل دادن گروه‌بندی کنید.

<div class="card">
    <h3>دوره طراحی وب</h3>
    <p>
        قیمت:
        <span class="old-price">۸۰۰,۰۰۰</span>
        <span class="new-price">۵۰۰,۰۰۰</span>
        تومان
    </p>
</div>

.card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

.old-price {
    text-decoration: line-through;
    color: gray;
}

.new-price {
    color: #ff6347;
    font-weight: bold;
}

div و span: نمونه 06-div-span

شرح مثال

تفاوت این دو دقیقاً همان تفاوت بلوکی و درون‌خطی است که در فصل دوم دیدیم:

• div یک عنصر بلوکی است. تمام عرض را می‌گیرد و از خط جدید شروع می‌شود. برای گروه‌بندی قسمت‌های صفحه از آن استفاده می‌کنیم.
• span یک عنصر درون‌خطی است. تنها به اندازه محتوایش جا می‌گیرد و متن را نمی‌شکند. برای گرفتن چند کلمه از وسط یک متن به کار می‌رود.

در مثال بالا، دو عدد قیمت وسط یک جمله هستند. اگر آنها را در div می‌گذاشتیم، هر کدام به خط جداگانه می‌رفتند و جمله به هم می‌ریخت. span این مشکل را ندارد.

۷. نمونه نهایی فصل

<body>

    <header>
        <h1>مجله وب</h1>
        <nav>
            <a href="#">HOME</a>
            <a href="#">ABOUT</a>
            <a href="#">CONTACT</a>
        </nav>
    </header>

    <main>
        <article>
            <h2>چرا طراحی وب یاد بگیریم</h2>
            <p class="meta">
                نویسنده: <span class="author">سارا احمدی</span>
            </p>
            <p>
                طراحی وب یکی از مهارت‌هایی است که با یک کامپیوتر ساده
                هم می‌شود یادش گرفت و خیلی زود به کار گرفت.
            </p>
        </article>
    </main>

    <footer>
        <p>مؤسسه فنی و آموزشی کادوس</p>
    </footer>

</body>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Tahoma, sans-serif;
    line-height: 1.9;
    color: #333333;
    background-color: #f5f5f5;
}

header {
    background-color: #2f4f4f;
    color: white;
    padding: 25px 40px;
}

header h1 {
    font-weight: normal;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

nav a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 13px;
    margin-left: 20px;
}

nav a:hover {
    color: #ff6347;
}

main {
    padding: 40px;
}

article h2 {
    color: #2f4f4f;
    line-height: 1.5;
    margin-bottom: 8px;
}

.meta {
    color: gray;
    font-size: 14px;
    margin-bottom: 18px;
}

.author {
    color: #ff6347;
    font-weight: bold;
}

footer {
    background-color: #2f4f4f;
    color: white;
    text-align: center;
    padding: 20px;
}

نمونه نهایی فصل: نمونه 07-final-example

شرح مثال

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

در CSS هم دقت کنید که چگونه می‌شود بدون هیچ کلاسی به عنصرها استایل داد. header و nav a و footer همه انتخابگر تگ هستند و چون این تگ‌ها در صفحه یکتا هستند، نیازی به کلاس نداریم. کلاس را تنها جایی گذاشته‌ایم که واقعاً لازم بود: meta. و author.

ویژگی‌های این فصل هم اینجا نقش دارند:

• line-height: 1.9 روی body که به کل متن صفحه ارث می‌رسد و خواندن را آسان می‌کند.
• font-weight: normal روی عنوان اصلی، برای ظاهری سبک‌تر و مدرن‌تر.
• text-transform: uppercase به‌علاوه letter-spacing: 2px روی لینک‌های منو، که ترکیب کلاسیک منوهای انگلیسی است. توجه کنید که این ترکیب را روی منوی فارسی نباید به کار برد.
• text-decoration: none برای برداشتن خط زیر لینک‌ها.
• line-height: 1.5 روی عنوان مقاله، چون عنوان‌ها به فاصله کمتری نسبت به متن نیاز دارند.

خلاصه فصل