وانەی 29 لە 67

وانەی ٢٩: کۆکردنەوەی ناوەڕۆک بە div و span

ماوە: نزیکەی ٣ خولەک، لە ٣ بەشی کورت.

فایلی دەستپێک: lesson-29-start.html

<!DOCTYPE html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>چایخانە</title>
  </head>
  <body>
    <h1>چایخانە</h1>
    <p>چای ئێمە زۆر تازەیە.</p>
    <p>هەموو بەیانییەک دروست دەکرێت.</p>
  </body>
</html>

ناوەڕۆکی ئەم وانەیە

بەشی ١: توخمی div بەشی ٢: توخمی span بەشی ٣: کەی بەکاریان بهێنین

بەشی ١: توخمی div

هەندێک جار پێویستمان بە گروپکردنی ناوەڕۆکە، بەڵام هیچ یەکێک لەو توخمانەی دەیانناسین ناگونجێت. بۆ ئەوە <div> هەیە. توخمێکە بۆ کۆکردنەوەی ناوەڕۆک، بەبێ ئەوەی مانایەکی تایبەت بەو ناوەڕۆکە بدات.

دوو پەرەگرافەکە لەناو <div> بپێچەرەوە:

<div>
  <p>چای ئێمە زۆر تازەیە.</p>
  <p>هەموو بەیانییەک دروست دەکرێت.</p>
</div>

هیچ لە شیوازی نیشاندان ناگۆڕێت.

بە شێوەی بنەڕەتی <div> توخمێکی بلۆک (Block)ـە. لە دێڕێکی نوێوە دەست پێدەکات، و هەموو پانییە بەردەستەکە دەگرێت.

بەشی ٢: توخمی span

توخمی دووەم <span>ـە. ئەویش توخمێکە بۆ کۆکردنەوەی ناوەڕۆکی ناو دێڕ، وەک وشەیەک یان دەستەواژەیەک. یەک وشەی پەرەگرافی یەکەم بپێچەرەوە:

<p>چای ئێمە <span>زۆر</span> تازەیە.</p>

ئەمەش هیچ لە شیوازی دەرکەوتنی ناگۆڕێت.

دەقی دەنگ: بە شێوەی بنەڕەتی <span> توخمێکی ناو دێڕ (Inline)ـە. لەناو دێڕی تێکستەکەدا دەمێنێتەوە، و دێڕێکی نوێ دەست پێناکات.

بەشی ٣: کەی بەکاریان بهێنین

نە <div> و نە <span> مانایەکی تایبەت زیاد ناکەن. لەم نموونەیەدا، دانانی پەرەگرافەکان لەناو <div> و وشەکە لەناو <span> گۆڕانێکی دیار لە ڕووخساری لاپەڕەکەدا دروست ناکات. بەڵام ناوەڕۆکەکان گروپ دەکەین، بۆ ئەوەی دواتر بە CSS شێوەیان بگۆڕین یان بە JavaScript کاریان لەسەر بکەین.

بۆیە تەنها کاتێک بەکاریان بهێنە کە هیچ توخمێکی تر ناگونجێت. ئەگەر توخمێک هەبێت کە ناوەڕۆکەکە وەسف بکات، وەک <nav> یان <article>، ئەوە بەکاربهێنە.

هەڵەیەکی باو: <div> بەکاربهێنیت لەو شوێنەی توخمێکی بەواتا پێشتر هەیە، وەک <nav>، <header> یان <article>.

پوختە

<div> بە شێوەی بنەڕەتی توخمێکی گشتیی بلۆکە بۆ کۆکردنەوەی ناوەڕۆک. لە دێڕێکی نوێوە دەست پێدەکات.
<span> بە شێوەی بنەڕەتی توخمێکی گشتیی ناو دێڕە. لەناو دێڕی تێکستێکدا دەمێنێتەوە.
هیچیان مانایەکی تایبەت زیاد ناکەن.
تەنها کاتێک بەکاریان بهێنە کە هیچ توخمێکی بەواتاتر ناگونجێت.

ڕاهێنان

١. وێنەیەک و پەرەگرافێکی ناساندنی چایخانەکە پێکەوە لەناو <div> دابنێ. پەرەگرافەکە دەربارەی چایخانەکە بێت، نەک دەقی ڕوونکەرەوەی وێنەکە.

٢. یەک وشە لەناو <span> بپێچەرەوە.

٣. پشکنەر بەکاربهێنە بۆ بینینی ئەو سندوقەی هەریەکێکیان دروستی دەکات.

نموونە

html

<!doctype html>
<html lang="ckb" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <title>چایخانە</title>
  </head>
  <body>
    <h1>چایخانە</h1>
    <div>
      <p>چای ئێمە <span>زۆر</span> تازەیە.</p>
      <p>هەموو بەیانییەک دروست دەکرێت.</p>
    </div>
  </body>
</html>

خۆت تاقی بکەرەوە ↗

دەستکاری HTML بکە

ئەنجام

چوونەژوورەوە بۆ پاشەکەوتکردنی پێشکەوتنت لە فێربووندا.