فێربوونی بەرنامەسازی ماڵپەڕ A-2

وانەی دووەم: فێربوونی HTML لە سفرەوە - تاگە پێشکەوتووەکان و خشتەکان

دیزاینی ماڵپەڕ

January 30, 2025

وانەی دووەم: فێربوونی HTML لە سفرەوە - تاگە پێشکەوتووەکان و خشتەکان

بەخێربێیت بۆ وانەی دووەم لە زنجیرەی "فێربوونی HTML لە سفرەوە بۆ شارەزایی!" لەم وانەیەدا، ئێمە قوڵتر دەچینە ناو HTML و فێر دەبین کە چۆن تاگە پێشکەوتووەکان وەک خشتەکان و فۆرمەکان بەکاربهێنین. هەروەها، کەمێک ناساندنی ستایلکردن بە بەکارهێنانی CSS دەکەین.

1. خشتەکان (Tables)

خشتەکان بۆ پیشاندانی داتا بە شێوازێکی ڕێک و پێک بە ڕیز و ستوون بەکاردەهێنرێن. لە HTMLدا، ئێمە ئەم تاگانە بەکاردەهێنین بۆ دروستکردنی خشتە:

<table>: دەستپێک و کۆتایی خشتە دیاری دەکات.
<tr>: ڕیزێک لە خشتەکە دیاری دەکات.
<th>: سەرۆکی ستوون دیاری دەکات (Header Cell).
<td>: خانەیەک لە خشتەکە دیاری دەکات (Data Cell).

نمونەی سادەی خشتە:

<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>

ڕوونکردنەوەی کۆد:

border="1": سنوور بۆ خشتەکە زیاد دەکات (دەتوانرێت لاببرێت یان بە بەکارهێنانی CSS دەستکاری بکرێت).
<th>: بۆ سەرۆکی ستوونەکان بەکاردەهێنرێت.
<td>: بۆ داتاکانی خشتە بەکاردەهێنرێت.

2. فۆرمەکان (Forms)

فۆرمەکان بۆ کۆکردنەوەی داتا لە بەکارهێنەران بەکاردەهێنرێن، وەک زانیاری تۆمارکردن یان گەڕان. لە HTMLدا، ئێمە ئەم تاگانە بەکاردەهێنین بۆ دروستکردنی فۆرم:

<form>: دەستپێک و کۆتایی فۆرمەکە دیاری دەکات.
<input>: بۆ داخڵکردنی داتا بەکاردەهێنرێت (دەق، ئیمەیل، پاسوۆرد، هتد).
<label>: دەق بە خانەی داخڵکردنەوە دەبەستێتەوە.
<button>: بۆ دروستکردنی دوگمە وەک دوگمەی ناردن بەکاردەهێنرێت.

نمونەی فۆرمی تۆمارکردنی سادە:

<form action="/submit" method="post">
    <label for="name">ناو:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">ئیمەیل:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <label for="password">پاسوۆرد:</label>
    <input type="password" id="password" name="password"><br><br>
    
    <button type="submit">تۆمارکردن</button>
</form>

ڕوونکردنەوەی کۆد:

action="/submit": دیاری دەکات داتاکە بۆ کوێ دەنێردرێت.
method="post": شێوازی ناردنی داتا دیاری دەکات.
<input type="text">: بۆ داخڵکردنی دەق بەکاردەهێنرێت.
<input type="email">: بۆ داخڵکردنی ئیمەیل بەکاردەهێنرێت.
<input type="password">: بۆ داخڵکردنی پاسوۆرد بەکاردەهێنرێت.

3. تاگە واتادارەکان (Semantic Tags)

تاگە واتادارەکان بۆ ئەوە بەکاردەهێنرێن کە واتا بە پێکهاتەی پەڕەکە ببەخشن، ئەمەش وای دەکات پەڕەکە زیاتر خوێندنەوەی بکات بۆ وێبگەڕەکان و موتۆڕەکانی گەڕان. هەندێک لەم تاگانە بریتین لە:

<header>: بۆ سەرۆکی پەڕە بەکاردەهێنرێت.
<nav>: بۆ بەشی ڕێنوێنی بەکاردەهێنرێت.
<section>: بۆ بەشێک لە پەڕە بەکاردەهێنرێت.
<article>: بۆ ناوەڕۆکی سەربەخۆ بەکاردەهێنرێت.
<footer>: بۆ پێنووسی پەڕە بەکاردەهێنرێت.

نمونە بە بەکارهێنانی تاگە واتادارەکان:

<header>
    <h1>ماڵپەڕی کەسی من</h1>
    <nav>
        <a href="#about">دەربارەی من</a> |
        <a href="#contact">پەیوەندی بە منەوە</a>
    </nav>
</header>

<section id="about">
    <h2>دەربارەی من</h2>
    <p>من گەشەپێدەری وێبێکی سەرەتاییم و حەزم لە فێربوونی تەکنەلۆژیای نوێیە.</p>
</section>

<footer>
    <p>هەموو مافەکان پارێزراون &copy; 2023</p>
</footer>

4. ناساندنی CSS

CSS (Cascading Style Sheets) زمانێکە بۆ ستایلکردنی پەڕەکانی HTML. دەتوانرێت CSS بە چەند شێوازێک بۆ HTML زیاد بکرێت:

Inline CSS:

<p style="color: blue; font-size: 20px;">ئەم دەقە شینە.</p>

Internal CSS:

<head>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>

External CSS:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

نمونەی ستایلکردنی دەق:

<head>
    <style>
        h1 {
            color: green;
            text-align: center;
        }
        p {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>سڵاو، جیهان!</h1>
    <p>ئەم دەقە بە بەکارهێنانی CSS ستایل کراوە.</p>
</body>

5. ڕاهێنانی کرداری

هەوڵ بدە پەڕەیەکی HTML دروست بکەیت کە ئەم ئەمانە لەخۆ بگرێت:

خشتەیەک کە خشتەی کاتەکانی هەفتەکەت پیشان بدات (ڕۆژەکان، چالاکیەکان).
فۆرمێکی تۆمارکردنی سادە کە خانەکانی ناو، ئیمەیل، و پاسوۆردی تێدا بێت.
بەکارهێنانی تاگە واتادارەکان وەک <header> و <footer> بۆ ڕێکخستنی پەڕەکە.
زیادکردنی ستایلکردنی سادە بە بەکارهێنانی CSS بۆ گۆڕینی ڕەنگی دەق و قەبارەی فۆنت.

دواتر چی؟

لە وانەی داهاتوودا، ئێمە قوڵتر دەچینە ناو CSS و فێر دەبین کە چۆن پەڕەکان بە شێوازێکی پیشەگەر ستایل بکەین. ئێمە بابەتەکانی وەک ڕەنگەکان، فۆنتەکان، مارجینەکان، و کۆنتەینەرەکان دەخوێنین. ئامادە بە بە کارەکردنێکی کرداری چێژبەخش!

📌 ئامۆژگاری: بێ گوێدانە تاقیکردنەوەی کۆدەکان بکە و دەستکارییان بکە بۆ بینینی ئەنجامەکان. ڕاهێنان کلیلی شارەزایییە! 🚀

کۆمێنتەکان

هیچ کۆمێنتێک نییە

تکایە بچۆرە ژوورەوە بۆ ئەوەی کۆمێنتێک بنوسیت

فێربوونی بەرنامەسازی ماڵپەڕ A-0

لە سفرەوە بۆ پڕۆ: گەشتی تەواوی پەرەپێدانی وێب

بینینی بابەت
جیاوازی نێوان ئەندرۆید و ئای ئۆ ئێس

بەرنامەسازی ئەپی مۆبایل: جیاوازی نێوان ئەندرۆید و ئای ئۆ ئێس و باشترین پراکتیزەکان

بینینی بابەت
پەرەپێدانی یاری بە بەکارهێنانی یونیتی

پەرەپێدانی یاری لەگەڵ یونیتی: لە بیرۆکەوە بۆ بەرهەمی تەواو

بینینی بابەت
شارەزایی لە بەرنامەسازی بە بەکارهێنانی پایتۆن

شارەزابوون لە بەرنامەسازی بە پایتۆن: پڕۆژە و ئامۆژگاری دەستی

بینینی بابەت
سوودەکانی ماڵپەڕەکان چین؟

سوودەکانی ماڵپەڕی کۆمپانیاکان

بینینی بابەت
فێربوونی بەرنامەسازی ماڵپەڕ A-1

وانەی یەکەم: فێربوونی HTML لە سفرەوە - پێشەکییەکی گشتگیر لەگەڵ ڕێکخستنی ئامرازەکان

بینینی بابەت
ئینتەلیکەنی ئارەزویی Qwen AI

Qwen AI مۆدێلی زانستی ئارەزویییە چەندکارەیە کە زمانەکان پشتگیری دەکات و کارە خەیاڵی و کاراکەرەکان دەڕێژێت

بینینی بابەت
ئاواتی پڕۆگرامسازان لەگەڵ ئینتەلیکەنی ئارەزویی

چۆن دەبێت ڕۆڵی پڕۆگرامسازان بگۆڕدرێت لە ئەندامەکانی توێژینەوەکانی ئینتەلیکەنی ئارەزویی؟

بینینی بابەت