Chapterبەش 3 · Lectureوانە 3.1

HTML Basics: Documents, Links and Tablesبنەماکانی HTML: بەڵگەنامە، بەستەرەکان و خشتەکان

A complete review of the static HTML you need before PHP: tags, elements and attributes, the structure of a document, absolute, relative and mail links, and tables with colspan and rowspan — with every slide error corrected.

پێداچوونەوەیەکی تەواو بە HTMLـی نەگۆڕدا کە پێش PHP پێویستە: ، و ، پێکهاتەی بەڵگەنامە، ڕەها، ڕێژەیی و ئیمەیڵ و لەگەڵ colspan و rowspan؛ هەموو سلایدەکانیش ڕاستکراونەتەوە.

29 min read28 خولەک خوێندنەوە · 24 stepsهەنگاو

What you will learnچی فێر دەبیت

Explain what tags, elements and attributes are, and write them correctly.
Write a complete HTML5 document with DOCTYPE, html, head and body.
Choose between absolute, relative and mail links, and write relative paths with ../.
Build tables with th and td, and merge cells with colspan and rowspan.
Explain why table-based layouts are outdated and what replaces them.

ڕوونی بکەیتەوە ، و چین و بە دروستی بیاننووسیت.
بەڵگەنامەیەکی تەواوی ⁦HTML5⁩ بنووسیت لەگەڵ DOCTYPE، html، head و body.
لە نێوان ڕەها، ڕێژەیی و ئیمەیڵدا هەڵبژێریت و ڕێژەیی بە ../ بنووسیت.
بە th و td دروست بکەیت و بە colspan و rowspan یەک بخەیت.
ڕوونی بکەیتەوە بۆچی بە کۆن بووە و چی جێی دەگرێتەوە.

Why review HTML before PHP?بۆچی پێش PHP پێداچوونەوە بە HTMLـدا دەکەین؟

A understands only three languages: for the content, for the look and for behaviour in the browser. PHP is not one of them. A PHP page is a program that writes HTML on the server; the browser only ever receives that HTML. So every PHP page you build is mostly HTML, and you must be able to read and write HTML well.

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

HTML (HyperText Markup Language) is a : you mark parts of a text with , so the browser knows what each part is: a heading, a paragraph, a link, a table. It is not a programming language: it has no conditions or loops. A plain HTML file is a : every visitor sees the same content. This lecture is a review of the static web: documents, tags, links and tables. The next lecture reviews forms.

⁦HTML (HyperText Markup Language)⁩ : بەشەکانی دەقێک بە نیشان دەکەیت، تا بزانێت هەر بەشێک چییە: سەردێڕ، بڕگە، ، . نییە: و تێدا نییە. فایلێکی HTMLـی سادە : هەموو سەردانیکەرێک هەمان ناوەڕۆک دەبینێت. ئەم وانەیە پێداچوونەوەیەکە بە : بەڵگەنامە، ، و . وانەی داهاتوو پێداچوونەوە بە دەکات.

As the lab says, we will practise the most important HTML elements example by example. Type every example yourself, save it as an .html file, and open it in your browser.

وەک تاقیگەکە دەڵێت، گرنگترین HTML نموونە بە نموونە ڕادەهێنین. هەموو نموونەیەک خۆت بنووسە، وەک فایلێکی .html پاشەکەوتی بکە و لە بیکەرەوە.

Labels on boxesنووسراوی سەر سندووقەکان

When you move house, you write labels on the boxes: "kitchen", "books", "fragile". The label is not part of what is inside the box, but it tells the helpers what the box is and where it goes. HTML tags are labels like these: they tell the browser what each piece of content is, and the browser does not show the labels themselves.

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

Where the analogy stops workingسنووری ئەم نموونەیە

A box has one label, but an HTML element can sit inside another element, which sits inside another, like boxes inside boxes.

سندووقێک یەک نووسراوی هەیە، بەڵام HTML دەتوانێت لەناو تردا بێت، کە ئەویش لەناو یەکێکی تردایە، وەک سندووق لەناو سندووقدا.

Tags and elementsتاگەکان و توخمەکان

A is an element name inside angle brackets < >, for example <h1>. Most tags come in pairs: an opening tag <h1> and a closing tag </h1>, which has a slash / before the name. The text between them is the content. The opening tag, the content and the closing tag together make one .

ناوی لەناو کەوانەی گۆشەیی < >دا، بۆ نموونە <h1>. زۆربەی جووت جووتن: دەستپێک <h1> و کۆتایی </h1>، کە پێش ناوەکە هێمای /ی هەیە. ئەو دەقەی لە نێوانیاندایە ناوەڕۆکـە. دەستپێک، ناوەڕۆک و کۆتایی پێکەوە یەک دروست دەکەن.

The parts of an element. Tags give instructions; only the content is shown.بەشەکانی . فەرمان دەدەن؛ تەنها ناوەڕۆک پیشان دەدرێت.CêIT

The browser reads the tags as instructions and does not display them. It only shows the content, formatted the way the tags say. Try this example:

وەک فەرمان دەخوێنێتەوە و پیشانیان نادات. تەنها ناوەڕۆکەکە پیشان دەدات، بەو شێوەیەی دەڵێن. ئەم نموونەیە تاقی بکەرەوە:

Tags are instructions, not contentتاگەکان فەرمانن، نەک ناوەڕۆکHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<h1>Hello</h1>
<p>This is a <b>short</b> paragraph.<br>
The second line starts after the line break.</p>
<hr>
<p>The tags are hidden. Only the content is shown.</p>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<h1>Hello</h1>
<p>This is a <b>short</b> paragraph.<br>
The second line starts after the line break.</p>
<hr>
<p>The tags are hidden. Only the content is shown.</p>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1

<h1> makes a top-level heading.

<h1> سەردێڕێکی ئاستی یەکەم دروست دەکات.

Lineدێڕی 2

<p> is a paragraph; <b> makes text bold; <br> is a line break.

<p> بڕگەیەکە؛ <b> دەق تۆخ دەکات؛ <br> دێڕ دەشکێنێت.

Lineدێڕی 4

<hr> draws a horizontal line.

<hr> هێڵێکی ئاسۆیی دەکێشێت.

Only a valid tag is hiddenتەنها تاگێکی دروست دەشاردرێتەوە

The lecture says that "the browsers know that any text within brackets is hidden and not displayed". More exactly: the browser treats a valid tag as an instruction. If the brackets do not form a valid tag, the text is shown. For example the slides write links as < a href=…> with a space after <. That is not a tag, so the browser prints it as plain text and no link appears. Write <a with no space.

وانەکە دەڵێت « دەزانن هەر دەقێک لەناو کەوانەکاندا بێت شاراوەیە و پیشان نادرێت». بە وردی: دروست وەک فەرمان دادەنێت. ئەگەر کەوانەکان دروست پێک نەهێنن، دەقەکە پیشان دەدرێت. بۆ نموونە سلایدەکان وەک < a href=…> دەنووسن، بە دوای <. ئەمە نییە، بۆیە وەک دەقێکی سادە چاپی دەکات و هیچ دەرناکەوێت. <a بەبێ بنووسە.

Tags and elementsتاگەکان و توخمەکان

Attributesخەسڵەتەکان

An opening tag can carry extra information called . Each attribute is written as name="value" inside the opening tag, for example <a href="home.html">. Always put the value between straight quotes "…". You will use attributes all the time: href for links, colspan for tables, name and type for forms.

دەستپێک دەتوانێت زانیاریی زیادە هەڵبگرێت کە پێیان دەوترێت . هەر وەک name="value" لەناو دەستپێکدا دەنووسرێت، بۆ نموونە <a href="home.html">. هەمیشە بخە نێوان جووتە ڕاست "…". هەمیشە بەکاردەهێنیت: href بۆ ، colspan بۆ ، name و type بۆ .

Quick checkپشکنینی خێراWhich link is written correctly?کام بە دروستی نووسراوە؟< a href="home.html">Home</a>< a href="home.html">Home</a><a "home.html"=href>Home</a><a "home.html"=href>Home</a><a href=“home.html”>Home</a><a href=“home.html”>Home</a><a href="home.html">Home</a><a href="home.html">Home</a>

Tags and elementsتاگەکان و توخمەکان

Elements without a closing tagتوخمەکانی بێ تاگی کۆتایی

A few elements have no content, so they have no closing tag. They are called void (empty) elements. The most common are <br> (line break), <hr> (horizontal line), <img> (image), <input> (form field), <meta> and <link>. You may also see them written with a slash, like <br />: this older style (used in the lecture's form example) is allowed, but not needed.

چەند ناوەڕۆکیان نییە، بۆیە کۆتاییان نییە. بە ئینگلیزی پێیان دەوترێت void (بەتاڵ). باوترینیان <br> (شکاندنی دێڕ)، <hr> (هێڵی ئاسۆیی)، <img> (وێنە)، <input> ()، <meta> و <link>ن. لەوانەیە بە هێمای /یشەوە بیانبینیت، وەک <br />: ئەم شێوازە کۆنە (کە لە نموونەی وانەکەدا بەکارهاتووە) ڕێگەپێدراوە، بەڵام پێویست نییە.

That slash comes from XHTML (first published in 2000): HTML written with the strict rules of XML, where every element is closed and every attribute is lowercase and quoted. People often used the two names as if they meant the same thing. The slash is still allowed, but today's standard is the HTML Living Standard (what people call HTML5), which does not need it.

ئەو هێمایە لە XHTMLـەوە هاتووە (یەکەم جار لە ساڵی ٢٠٠٠ بڵاو کرایەوە): کە بە یاسا توندەکانی XML نووسراوە، کە تێیدا هەموو دادەخرێت و هەموو بە پیتی بچووک و لەناو دەنووسرێت. خەڵک زۆرجار هەردوو ناوەکەیان وەک یەک شت بەکار دەهێنا. ئەو هێمایە هێشتا ڕێگەپێدراوە، بەڵام ستانداردی ئەمڕۆ ⁦HTML Living Standard⁩ـە (ئەوەی خەڵک پێی دەڵێن ⁦HTML5⁩)، کە پێویستی پێی نییە.

Tags and elementsتاگەکان و توخمەکان

Nesting elementsیەک لەناو یەکدا

Elements can sit inside other elements. Close them in the reverse order you opened them: the element opened last is closed first.

دەتوانن لەناو تردا بن. بە پێچەوانەی ڕیزبەندیی کردنەوەیان دایانبخە: ئەو دوایین جار کرایەوە، یەکەم جار دادەخرێت.

Wrong and right nestingیەک لەناو یەکدا: نادروست و دروستHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!-- Wrong: closed in the wrong order -->
<p><b>Important</p></b>

<!-- Right: the element opened last is closed first -->
<p><b>Important</b></p>

The structure of an HTML documentپێکهاتەی بەڵگەنامەیەکی HTML

Every HTML page has the same skeleton. Here is the lecture's first document, corrected and completed:

هەموو HTML هەمان ئێسکەپەیکەری هەیە. ئەمە یەکەم بەڵگەنامەی وانەکەیە، ڕاستکراوە و تەواوکراو:

A complete minimal HTML documentبەڵگەنامەیەکی HTMLـی تەواو و کەمینەindex.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>This is index page</title>
  </head>
  <body>
    <h1>Kurdistan Technical Institute</h1>
    <h2>CS Department</h2>
    <h3>Dynamic Web</h3>
  </body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>This is index page</title>
  </head>
  <body>
    <h1>Kurdistan Technical Institute</h1>
    <h2>CS Department</h2>
    <h3>Dynamic Web</h3>
  </body>
</html>

The <title> is shown on the tab, so it does not appear in this preview.

<title> لەسەر تاب پیشان دەدرێت، بۆیە لەم پێشبینینەدا دەرناکەوێت.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1

The DOCTYPE declaration: "this is a modern HTML5 page".

: «ئەمە نوێی ⁦HTML5⁩ـە».

Lineدێڕی 2

<html> is the root element. lang="en" says the page is in English.

<html> . lang="en" دەڵێت بە ئینگلیزییە.

Lineدێڕی 4

<meta charset="UTF-8"> sets the . Without it, Kurdish letters can turn into strange symbols.

<meta charset="UTF-8"> دیاری دەکات. بەبێ ئەم دێڕە، لەوانەیە پیتە کوردییەکان ببنە هێمای سەیر.

Lineدێڕی 5

The title appears on the browser tab, not inside the page.

ناونیشانەکە لەسەر تابی دەردەکەوێت، نەک لەناو .

Lineدێڕی 8-10

Headings from the most important (<h1>) to less important (<h3>).

سەردێڕەکان لە گرنگترینەوە (<h1>) بۆ کەمتر گرنگ (<h3>).

The <!DOCTYPE html> is not an HTML tag. It is an instruction to the web browser about which version of HTML the page is written in. In HTML5 it is simply <!DOCTYPE html>, and it tells the browser to use its modern standards mode.
The html element is the , because it contains all the other elements in the document.
Inside html, the document is divided into a head and a body.
The contains descriptive information about the document: the title, style sheets (), scripts and other meta information such as the character set. It is not shown inside the page.
The contains everything that we want to show up in the browser window.

<!DOCTYPE html> HTML نییە. ڕێنماییەکە بۆ دەربارەی ئەوەی بە کام وەشانی HTML نووسراوە. لە ⁦HTML5⁩دا تەنها <!DOCTYPE html>ـە و بە دەڵێت ⁦standards mode⁩ـی نوێی خۆی بەکاربهێنێت.
html ، چونکە هەموو تری ناو بەڵگەنامەکە لەخۆ دەگرێت.
لەناو htmlدا، بەڵگەنامەکە دابەش دەبێت بۆ head و body.
زانیاریی وەسفکەر دەربارەی بەڵگەنامەکە لەخۆ دەگرێت: ناونیشان، فایلەکانی شێواز ()، و زانیاریی metaی تر وەک کۆمەڵەی پیتەکان. لەناو پیشان نادرێت.
هەموو ئەو شتانە لەخۆ دەگرێت کە دەمانەوێت لە پەنجەرەی دەربکەون.

The skeleton of every page: DOCTYPE, then html containing head and body.ئێسکەپەیکەری هەموو : DOCTYPE، پاشان html کە head و body لەخۆ دەگرێت.CêIT

The structure of an HTML documentپێکهاتەی بەڵگەنامەیەکی HTML

Mistakes in the lecture's examplesهەڵەکانی نموونەکانی وانەکە

What was wrong in the lecture's examplesچی نادروست بوو لە نموونەکانی وانەکەدا

The slide title says "HTML Documnet"; it should be Document.
The first example has no <!DOCTYPE html> (it is taught two slides later), no <meta charset="UTF-8"> (needed for Kurdish text) and no lang attribute. Without a DOCTYPE, browsers switch to an old quirks mode and may draw the page differently.
It uses two <h1> headings. That is allowed, but one main heading per page is clearer, so the corrected version uses <h1>, <h2> and <h3>.
The structure diagram writes <!DOCTYPE (incomplete) and ends with <html>. It must be <!DOCTYPE html> at the top and the closing tag </html> at the end.
The DOCTYPE no longer names a version number in HTML5. Older pages used long DOCTYPEs (see below).

ناونیشانی سلایدەکە دەڵێت «⁦HTML Documnet⁩»؛ دەبێت Document بێت.
نموونەی یەکەم <!DOCTYPE html>ـی نییە (دوو سلاید دواتر فێر دەکرێت)، <meta charset="UTF-8">ـی نییە (بۆ دەقی کوردی پێویستە) و langـی نییە. بەبێ DOCTYPE، دەچنە ⁦quirks mode⁩ـی کۆن و لەوانەیە بە شێوەیەکی جیاواز بکێشن.
دوو سەردێڕی <h1> بەکاردەهێنێت. ئەمە ڕێگەپێدراوە، بەڵام یەک سەردێڕی سەرەکی بۆ هەر ڕوونترە، بۆیە وەشانە ڕاستکراوەکە <h1>، <h2> و <h3> بەکاردەهێنێت.
وێنەی پێکهاتەکە <!DOCTYPE (ناتەواو) دەنووسێت و بە <html> کۆتایی دێت. دەبێت لە سەرەوە <!DOCTYPE html> بێت و لە کۆتاییدا کۆتایی </html>.
لە ⁦HTML5⁩دا DOCTYPE ئیتر ژمارەی وەشان ناو نابات. کۆنەکان DOCTYPEـی درێژیان بەکاردەهێنا (لە خوارەوە ببینە).

A new and an old DOCTYPEDOCTYPEـێکی نوێ و کۆنHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!-- HTML5: short and simple -->
<!DOCTYPE html>

<!-- HTML 4.01 Strict (old): you may meet it in old pages -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The structure of an HTML documentپێکهاتەی بەڵگەنامەیەکی HTML

A page in Kurdishلاپەڕەتۆڕێکی کوردی

A Kurdish pageلاپەڕەتۆڕێکی کوردی

For a page in Kurdish (Sorani), set the language and the writing direction on the root element: <html lang="ckb" dir="rtl">. ckb is the code for Central Kurdish, and rtl means right-to-left. Together with UTF-8, the page then shows Kurdish text correctly, starting from the right.

بۆ بە کوردیی سۆرانی، زمان و ئاڕاستەی نووسین لەسەر دابنێ: <html lang="ckb" dir="rtl">. ckb کۆدی کوردیی ناوەندییە و rtl واتە لە ڕاستەوە بۆ چەپ. لەگەڵ ⁦UTF-8⁩، دەقی کوردی بە دروستی و لە ڕاستەوە پیشان دەدات.

kurdish.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

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

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

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

The structure of an HTML documentپێکهاتەی بەڵگەنامەیەکی HTML

Where does a script go?دەسنووس لە کوێ دادەنرێت؟

JavaScript is written inside a <script> element, and HTML allows it in the <head> and in the <body>. Many pages put it at the end of the <body>, so the browser shows the content first. In the <head>, give a script that loads from a file the defer attribute: it then runs only after the whole page has been read.

لەناو <script>دا دەنووسرێت و ڕێگەی پێدەدات هەم لە <head> و هەم لە <body>دا بێت. زۆر لاپەڕە لە کۆتایی <body>دا دایدەنێن، بۆ ئەوەی سەرەتا ناوەڕۆکەکە پیشان بدات. لە <head>دا، defer بدە بەو لە فایلێکەوە بار دەکرێت: ئەو کاتە تەنها دوای ئەوە کار دەکات کە هەموو لاپەڕەکە خوێندرایەوە.

scripts.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scripts</title>
  <script src="menu.js" defer></script>
</head>
<body>
  <h1>Welcome</h1>
  <script>
    document.querySelector("h1").textContent = "Welcome, Aram!";
  </script>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 6

A script file in the head: defer waits until the page has been read.

فایلێکی لە <head>دا: defer چاوەڕێ دەکات تا لاپەڕەکە دەخوێندرێتەوە.

Lineدێڕی 10-12

A script at the end of the body: the <h1> above it already exists, so the script can change its text.

لە کۆتایی <body>دا: <h1>ـی سەرەوەی پێشتر هەیە، بۆیە دەتوانێت دەقەکەی بگۆڕێت.

Quick checkپشکنینی خێراFill the blank: "…… can contain the <script></script> tags."بۆشاییەکە پڕ بکەرەوە: «…… دەتوانێت تاگەکانی <script></script>ـی تێدا بێت.»Only the <head>تەنها <head>Only the <body>تەنها <body>Both the <head> and the <body>هەم <head> و هەم <body>Only the <title>تەنها <title>

Hyperlinksبەستەرەکان

A (link) takes the visitor to another page, another place or another program when they click it. It is made with the <a> element. The href attribute holds the destination, and the content between <a> and </a> is the clickable text. HTML has three kinds of hyperlinks:

کاتێک کرتەی لێدەکرێت، سەردانیکەر دەبات بۆ تر، شوێنێکی تر یان تر. بە <a> دروست دەکرێت. href شوێنی مەبەست هەڵدەگرێت و ئەو ناوەڕۆکەی لە نێوان <a> و </a>دایە دەقە کرتەپێکراوەکەیە. HTML سێ جۆر هەیە:

: the full , with the (https://), the and maybe a . Example: https://www.google.com. Use them to link to other websites.
: only a path, counted from the folder of the current page. Example: home.html. Use them for pages of your own site.
: start with mailto: and open the visitor's email program with the address filled in. Example: mailto:info@example.com.

: تەواو، لەگەڵ (https://)، و لەوانەیە . نموونە: https://www.google.com. بۆ بەستنەوە بە تر بەکاریان بهێنە.
: تەنها ، کە لە ئێستاوە دەژمێردرێت. نموونە: home.html. بۆ خۆت بەکاریان بهێنە.
: بە mailto: دەست پێدەکەن و ئیمەیڵی سەردانیکەر دەکەنەوە، ناونیشانەکەشی تێدا نووسراوە. نموونە: mailto:info@example.com.

The three kinds of hyperlinksسێ جۆرەکەی بەستەرHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<p>Absolute link: <a href="https://www.google.com">Google</a></p>
<p>Relative link: <a href="home.html">Home</a></p>
<p>Relative link into a folder: <a href="pages/about.html">About us</a></p>
<p>Mail link: <a href="mailto:info@example.com">Send email</a></p>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<p>Absolute link: <a href="https://www.google.com">Google</a></p>
<p>Relative link: <a href="home.html">Home</a></p>
<p>Relative link into a folder: <a href="pages/about.html">About us</a></p>
<p>Mail link: <a href="mailto:info@example.com">Send email</a></p>

In this preview the relative links lead nowhere, because home.html and about.html do not exist here.

لەم پێشبینینەدا بۆ هیچ کوێ ناچن، چونکە home.html و about.html لێرە بوونیان نییە.

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 1

Absolute: protocol + domain. It works from any page.

ڕەها: + دۆمەین. لە هەر کار دەکات.

Lineدێڕی 2

Relative: home.html in the same folder as this page.

ڕێژەیی: home.html لە هەمان ی ئەم .

Lineدێڕی 3

Relative: go into the pages folder, then open about.html.

ڕێژەیی: بچۆ ناو pages، پاشان about.html بکەرەوە.

Lineدێڕی 4

Mail: opens the email program; nothing is sent until the visitor presses Send.

ئیمەیڵ: ئیمەیڵ دەکاتەوە؛ هیچ شتێک نانێردرێت تا سەردانیکەر خۆی Send دابگرێت.

www… is not an absolute linkwww… بەستەری ڕەها نییە

A link without a protocol is relative, even if it looks like a website. <a href="www.example.com"> on the page http://localhost/mysite/index.html leads to http://localhost/mysite/www.example.com, a file that does not exist. For other websites always write the full address: href="https://www.example.com".

بێ ڕێژەییـە، تەنانەت ئەگەر لە بچێت. <a href="www.example.com"> لەسەر http://localhost/mysite/index.html دەچێت بۆ http://localhost/mysite/www.example.com، کە فایلێکە بوونی نییە. بۆ تر هەمیشە ناونیشانی تەواو بنووسە: href="https://www.example.com".

Errors in the slide's link codeهەڵەکان لە کۆدی بەستەرەکانی سلایدەکەدا

The lecture's link examples have several errors. Do not copy them:

نموونەکانی لە وانەکەدا چەند تێدایە. کۆپییان مەکە:

< a href=…> and </ a> have a space after <, so they are not tags at all. Write <a and </a>.
href=“home.html” uses curly quotes “ ”. The browser does not see them as quotes, so they become part of the address and the link breaks. Use straight quotes " ".
The mail link href=“mailto:… opens a quote but never closes it.
href=http://www.google.com has no quotes. HTML allows this for simple values, but always quoting is safer.
"Absulate links" should be absolute links, and the example www.spu.edu.iq is not absolute (see the warning above). The mail example used a real, misspelled address; we use info@example.com.

< a href=…> و </ a> دوای < تێدایە، بۆیە هەرگیز نین. <a و </a> بنووسە.
href=“home.html” جووتە خوار “ ” بەکاردەهێنێت. وەک نایانبینێت، بۆیە دەبنە بەشێک لە ناونیشانەکە و تێکدەچێت. ڕاست " " بەکاربهێنە.
href=“mailto:… دەکاتەوە بەڵام هەرگیز دای ناخات.
href=http://www.google.com نییە. HTML بۆ سادە ڕێگەی پێدەدات، بەڵام هەمیشە نووسینی سەلامەتترە.
«⁦Absulate links⁩» دەبێت absolute links بێت و نموونەی www.spu.edu.iq ڕەها نییە (ئاگادارکردنەوەکەی سەرەوە ببینە). نموونەی ئیمەیڵەکە ناونیشانێکی ڕاستەقینە و بە نادروستی نووسراوی بەکارهێنابوو؛ ئێمە info@example.com بەکاردەهێنین.

HTML Tutorial for Beginners: HTML Crash CourseProgramming with Mosh · Englishئینگلیزی · 11.2M viewsبینین · 241K likesلایک · Partبەشی 53:42–1:03:12 (ofلە 1:09:33)
Shows how to link to other pages of your own site with relative paths, and how to link to other websites.
نیشان دەدات چۆن بە بچیتە تری خۆت و چۆن بۆ تر دابنێیت.
Watch 53:42 to 1:03:12, the Hyperlinks chapter
لە ⁦53:42⁩ تا ⁦1:03:12⁩ سەیر بکە، بەشی .

Hyperlinksبەستەرەکان

How a relative link finds its fileبەستەرێکی ڕێژەیی چۆن فایلەکەی دەدۆزێتەوە

A relative link starts from the folder of the page you are on. Look at this small site:

لە ئەو دەست پێدەکات کە تێیدایت. سەیری ئەم بچووکە بکە:

Relative links are counted from the folder of the current page; ../ goes up one folder. لە ئێستاوە دەژمێردرێن؛ ../ یەک دەچێتە سەرەوە.CêIT

Relative links in the example site لە نموونەکەدا
Written inنووسراو لە	href	Opensدەیکاتەوە
`index.html`	`home.html`	`mysite/home.html`
`index.html`	`pages/about.html`	`mysite/pages/about.html`
`pages/about.html`	`../index.html`	`mysite/index.html`
`pages/about.html`	`contact.html`	`mysite/pages/contact.html` (same folder as about.html)`mysite/pages/contact.html` (هەمان ⁦about.html⁩)

Tablesخشتەکان

A shows data in rows and columns, like a timetable or a list of students. The table is one of the important HTML elements; you will need it in many situations, for example to show rows from a database with PHP. Four main tags create a table:

دراوە بە و پیشان دەدات، وەک وانەکان یان لیستی خوێندکاران. یەکێکە لە گرنگەکانی HTML؛ لە زۆر حاڵەتدا پێویستت پێی دەبێت، بۆ نموونە بۆ پیشاندانی بە PHP. چوار سەرەکی دروست دەکەن:

The main table tags سەرەکییەکانی
Tag	Meaningواتا
`<table> … </table>`	Creates the table: all its rows and columns. دروست دەکات: هەموو و .
`<tr> … </tr>`	Creates one table row.یەک دروست دەکات (table row).
`<th> … </th>`	Creates one table header cell: bold and centred by default.یەک دروست دەکات (table header): بە شێوەی بنەڕەتی تۆخ و لە ناوەڕاستە.
`<td> … </td>`	Creates one table data cell: a normal cell.یەک دراوە دروست دەکات (table data): ئاسایی.

A table is made of rows, and rows are made of cells. لە پێکدێت و لە .CêIT

Learn HTML – Full Tutorial for BeginnersfreeCodeCamp.org · Englishئینگلیزی · 4.6M viewsبینین · 79K likesلایک · Partبەشی 2:24:53–2:40:42 (ofلە 4:07:29)
Dave Gray builds an HTML5 data table step by step: rows, header and data cells, caption, thead/tbody/tfoot, rowspan and colspan, styled with CSS.
⁦Dave Gray⁩ هەنگاو بە هەنگاو دروست دەکات: ، و ، `caption`، `thead`/`tbody`/`tfoot`، و ، پاشان بە جوانی دەکات.
Watch 2:24:53 to 2:40:42, Chapter 8: Create Tables
لە ⁦2:24:53⁩ تا ⁦2:40:42⁩ سەیر بکە، بەشی هەشتەم: Create Tables.

Tablesخشتەکان

Example one: a simple data table (Lab 1)نموونەی یەکەم: خشتەیەکی سادەی دراوە (تاقیگەی ١)

This is the lab's table code (with neutral names). It uses the old attributes border, cellpadding (space inside each cell) and cellspacing (space between the cells). Browsers still understand them:

ئەمە کۆدی تاقیگەکەیە (بە ناوی بێلایەن). کۆنەکانی border، cellpadding ( لەناو هەر ) و cellspacing ( لە نێوان ) بەکاردەهێنێت. هێشتا لێیان تێدەگەن:

The lab's table (old attributes)خشتەی تاقیگە (خەسڵەتەکانی کۆن)students.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
</head>
<body>
  <table border="1" cellpadding="6" cellspacing="6">
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>Aram</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
    <tr>
      <td>Shilan</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
</head>
<body>
  <table border="1" cellpadding="6" cellspacing="6">
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>Aram</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
    <tr>
      <td>Shilan</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
  </table>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 8

border="1" draws borders; cellpadding and cellspacing add space inside and between cells.

border="1" هێڵی دەوروبەر دەکێشێت؛ cellpadding و cellspacing لەناو و لە نێوان زیاد دەکەن.

Lineدێڕی 9-13

The first row uses <th>: header cells.

یەکەم <th> بەکاردەهێنێت: .

Lineدێڕی 14-23

Each further <tr> is one student, with one <td> per column.

هەر <tr>ـێکی تر یەک خوێندکارە، بە یەک <td> بۆ هەر .

Changes to the lab's tableگۆڕانکارییەکان لە خشتەی تاقیگەکەدا

The lab sheet uses other personal names; we use neutral example names (Aram, Shilan). It writes the college as "Informatic"; the correct name is Informatics. Its indentation of <tr> and </tr> is uneven, which does not change the result but makes the code hard to read.

پەڕەی تاقیگەکە ناوی کەسانی تر بەکاردەهێنێت؛ ئێمە ناوی نموونەی بێلایەن بەکاردەهێنین (Aram، Shilan). ناوی کۆلێژەکە بە «Informatic» دەنووسێت؛ ناوە دروستەکە Informaticsـە. چوونەناوەوەی ⁦(indentation)⁩ دێڕەکانی <tr> و </tr> ڕێک نییە، کە ئەنجامەکە ناگۆڕێت بەڵام خوێندنەوەی کۆدەکە قورس دەکات.

Tablesخشتەکان

The same table with CSSهەمان خشتە بە CSS

border, cellpadding and cellspacing are obsolete: the HTML standard asks you to style tables with instead. Here is the same table with CSS. It looks almost the same, and the content is no longer mixed with the design:

border، cellpadding و cellspacing ن: ستانداردی HTML داوا دەکات لەبری ئەوانە بە ڕازێنیتەوە. ئەمە هەمان بە CSS. نزیکەی هەمان شێوەی هەیە و ناوەڕۆک ئیتر لەگەڵ دیزاین تێکەڵ نییە:

The same table styled with CSSهەمان خشتە بە CSSstudents.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <style>
    table { border: 1px solid #333; border-spacing: 6px; }
    th, td { border: 1px solid #333; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>Aram</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
    <tr>
      <td>Shilan</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <style>
    table { border: 1px solid #333; border-spacing: 6px; }
    th, td { border: 1px solid #333; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>Aram</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
    <tr>
      <td>Shilan</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
  </table>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 7

border on the table and border-spacing replace border and cellspacing.

border لەسەر و border-spacing جێگەی border و cellspacing دەگرنەوە.

Lineدێڕی 8

padding replaces cellpadding.

padding جێگەی cellpadding دەگرێتەوە.

Old table attributes and their CSS replacements کۆنی و جێگرەوەکانیان لە CSSـدا
Old attribute کۆن	CSS insteadلەبری ئەوە بە CSS
`border="1"`	`border: 1px solid #333;`
`cellpadding="6"`	`padding: 6px;` (on `th, td`)`padding: 6px;` (لەسەر `th, td`)
`cellspacing="6"`	`border-spacing: 6px;` (on `table`)`border-spacing: 6px;` (لەسەر `table`)
`width="70%"`	`width: 70%;`
`align="center"` on a cell (`td`, `th`)`align="center"` لەسەر (`td`، `th`)	`text-align: center;` (centres the text)`text-align: center;` (دەقەکە دەخاتە ناوەڕاست)
`align="center"` on the `tablealign="center"` لەسەر `table`	`margin-inline: auto;` (centres the table itself)`margin-inline: auto;` (خودی دەخاتە ناوەڕاست)
`height="250"`	`height: 250px;`
`valign="top"` on a cell or row`valign="top"` لەسەر یان	`vertical-align: top;` (on `th, td`)`vertical-align: top;` (لەسەر `th, td`)
`bordercolor="red"` (never part of the HTML 4 standard)`bordercolor="red"` (هەرگیز بەشێک نەبوو لە ستانداردی ⁦HTML 4⁩)	`border-color: red;`

Two old attributes, cellspacing and cellpadding, are easy to mix up: the next screen shows them side by side. All the table styles (single borders, zebra rows, hover) are taught in Styling tables.

دوو کۆن، cellspacing و cellpadding، بە ئاسانی تێکەڵ دەکرێن: شاشەی داهاتوو لە تەنیشت یەکتر پیشانیان دەدات. هەموو شێوەکانی ڕازاندنەوەی (هێڵی تاک، ڕیزی ڕەنگاوڕەنگ، hover) لە ڕازاندنەوەی خشتەکاندا فێر دەکرێن.

Creating Html Table in Kurdish - چۆنێتی دروستکردنی تەیبڵK97 Media · Kurdish (Sorani)کوردی (سۆرانی) · 6.1K viewsبینین · 224 likesلایک
In Kurdish: build a simple table with tr, th and td, then style its borders and header row with CSS.
بە کوردی: سادە بە `<tr>`، `<th>` و `<td>` دروست دەکات، پاشان بە چوارچێوە و سەردێڕەکەی دەڕازێنێتەوە.
Whole video: Kurdish, a simple table styled with CSS
هەموو ڤیدیۆکە، بە کوردی: سادە کە بە ڕازێنراوەتەوە.

Tablesخشتەکان

Cell spacing or cell padding?cellspacing یان cellpadding؟

Cell spacing is the empty space between the cells (and between the cells and the table's edge). Cell padding is the empty space inside each cell, between its border and its text. In CSS, spacing is border-spacing on the table, and padding is padding on th and td.

Cellspacing بۆشایی نێوان (و نێوان و لێواری ). Cellpadding بۆشایی ناو هەر ، لە نێوان چوارچێوەکەی و دەقەکەیدا. لە CSSـدا، spacing border-spacingـە لەسەر table و padding paddingـە لەسەر th و td.

Spacing is outside the cells; padding is inside them.spacing لە دەرەوەی ؛ padding لە ناویاندایە.CêIT

ExerciseڕاهێنانExam question: spacing and paddingپرسیاری تاقیکردنەوە: spacing و padding

What is the difference between cell spacing and cell padding? Give an example.

جیاوازیی نێوان cellspacing و cellpadding چییە؟ نموونەیەک بهێنەوە.

Show answerوەڵامەکە پیشان بدە

Cell spacing is the space between neighbouring cells; cell padding is the space between a cell's border and its content. Old HTML: <table cellspacing="10" cellpadding="4">. Today, with CSS:

Cellspacing بۆشایی نێوان ؛ cellpadding بۆشایی نێوان چوارچێوەی و ناوەڕۆکەکەیەتی. HTMLـی کۆن: <table cellspacing="10" cellpadding="4">. ئەمڕۆ بە CSS:

CSS

table  { border-spacing: 10px; }  /* between the cells */
th, td { padding: 4px; }          /* inside each cell  */

border-spacing has no effect when the table uses border-collapse: collapse, because then neighbouring cells share one border.

border-spacing هیچ کارێک ناکات کاتێک border-collapse: collapse بەکار دەهێنێت، چونکە ئەو کاتە یەک چوارچێوە بەش دەکەن.

Quick checkپشکنینی خێراYou want more room between the text and the border of every cell. Which CSS do you write?دەتەوێت بۆشایی زیاتر لە نێوان دەق و چوارچێوەی هەموو هەبێت. کام CSS دەنووسیت؟table { margin: 10px; }table { margin: 10px; }table { border-spacing: 10px; }table { border-spacing: 10px; }th, td { padding: 10px; }th, td { padding: 10px; }

Tablesخشتەکان

Merging cells: colspan and rowspanیەکخستنی خانەکان: colspan و rowspan

Column spans are created with the attribute on a td or th element. They merge two or more columns into one wide cell. Row spans are created with the attribute. They work just like column spans, but the cell spans downward over several rows.

⁦Column span⁩ بە لەسەر td یان th دروست دەکرێت. دوو یان زیاتر دەکاتە یەک پان. ⁦Row span⁩ بە دروست دەکرێت. هەروەک ⁦column span⁩ کار دەکات، بەڵام بەرەو خوارەوە بەسەر چەند درێژ دەبێتەوە.

colspan widens a cell to the right; rowspan stretches it down.colspan بەرەو تەنیشت پان دەکاتەوە؛ rowspan بەرەو خوارەوە درێژی دەکاتەوە.CêIT

colspan: one header over two columnscolspan: یەک سەردێڕ بەسەر دوو ستوونداcolspan.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Column span</title>
  <style>
    table, th, td { border: 2px solid #333; }
    th, td { padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th colspan="2">colspan</th>
    </tr>
    <tr>
      <td>second row, first data</td>
      <td>second row, second data</td>
    </tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Column span</title>
  <style>
    table, th, td { border: 2px solid #333; }
    th, td { padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th colspan="2">colspan</th>
    </tr>
    <tr>
      <td>second row, first data</td>
      <td>second row, second data</td>
    </tr>
  </table>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 14

colspan="2": this header cell covers two columns, so row 1 needs no second cell.

colspan="2": ئەم دوو دادەپۆشێت، بۆیە یەکەم پێویستی بە دووەم نییە.

Lineدێڕی 16-19

Row 2 has two normal cells.

دووەم دوو ئاسایی هەیە.

rowspan: one header over three rowsrowspan: یەک سەردێڕ بەسەر سێ ڕیزداrowspan.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Row span</title>
  <style>
    table, th, td { border: 2px solid #333; }
    th, td { padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th rowspan="3">Work families:</th>
      <td>Work</td>
    </tr>
    <tr>
      <td>Job</td>
    </tr>
    <tr>
      <td>Career</td>
    </tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Row span</title>
  <style>
    table, th, td { border: 2px solid #333; }
    th, td { padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th rowspan="3">Work families:</th>
      <td>Work</td>
    </tr>
    <tr>
      <td>Job</td>
    </tr>
    <tr>
      <td>Career</td>
    </tr>
  </table>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 14

rowspan="3": this cell reaches down through three rows.

rowspan="3": ئەم تا سێ بەرەو خوارەوە درێژ دەبێتەوە.

Lineدێڕی 17-22

Rows 2 and 3 have only one <td>, because the first column is already filled by the tall cell.

٢ و ٣ تەنها یەک <td>یان هەیە، چونکە یەکەم پێشتر بە بەرزەکە پڕکراوەتەوە.

Why the slide's span examples would not workبۆچی نموونەکانی span لە سلایدەکەدا کار ناکەن

The slides write colspan=”2” and rowspan=”3” with curly quotes. The browser reads the value as ”2”, which is not a number, so it falls back to 1: the cells would not merge. Use straight quotes: colspan="2".
border=”2” and border=”1” have the same quote problem. The corrected versions above use CSS for the borders.
The text says "rst data" because the letters "fi" were lost when the slide was converted; it means "first data".
"Column spans, created the colspan attribute" is missing the word with; the summary also misspells "tage" for tag.

سلایدەکان colspan=”2” و rowspan=”3” بە خوار دەنووسن. وەک ”2” دەخوێنێتەوە، کە ژمارە نییە، بۆیە دەگەڕێتەوە بۆ 1: یەک ناخرێن. ڕاست بەکاربهێنە: colspan="2".
border=”2” و border=”1” هەمان کێشەی هەیە. وەشانە ڕاستکراوەکانی سەرەوە بۆ هێڵەکان CSS بەکاردەهێنن.
دەقەکە دەڵێت «⁦rst data⁩» چونکە پیتەکانی «fi» لە کاتی گۆڕینی سلایدەکەدا ونبوون؛ مەبەست «⁦first data⁩»ـیە.
«⁦Column spans, created the colspan attribute⁩» وشەی withـی تێدا نییە؛ کورتەکەش «tage»ـی بە نادروستی بۆ tag نووسیوە.

Tablesخشتەکان

Table sections: caption, colgroup, thead, tbody and tfootبەشەکانی خشتە: caption، colgroup، thead، tbody و tfoot

A longer table can be split into parts that say what each group of rows is for:

درێژتر دەتوانرێت بکرێتە چەند بەشێک کە دەڵێن هەر کۆمەڵە بۆ چییە:

<caption>: the table's title, written first inside <table>.
<colgroup> with <col>: describes the columns, for example their width: <col style="width: 200px">.
<thead>: the header row or rows, with <th> cells.
<tbody>: the data rows. A table may have several.
<tfoot>: the footer rows, such as a total. It is always shown at the bottom.

<caption>: ناونیشانی ، یەکەم شت لەناو <table>دا دەنووسرێت.
<colgroup> لەگەڵ <col>: وەسف دەکات، بۆ نموونە پانییان: <col style="width: 200px">.
<thead>: سەرەوە، بە (<th>).
<tbody>: . دەتوانێت چەندانی هەبێت.
<tfoot>: خوارەوە، وەک کۆی گشتی. هەمیشە لە خوارەوە پیشان دەدرێت.

Why bother? can read the right header with each cell, a long printed table can repeat its header on every page, and CSS can style each part on its own (tfoot { font-weight: bold; }).

بۆچی؟ دەتوانن لەگەڵ هەر سەردێڕە دروستەکەی بخوێننەوە، درێژی چاپکراو دەتوانێت سەردێڕەکەی لە هەموو پەڕەیەکدا دووبارە بکاتەوە و CSS دەتوانێت هەر بەشێک بە جیا بڕازێنێتەوە (tfoot { font-weight: bold; }).

Tablesخشتەکان

A complete table, in today's orderخشتەیەکی تەواو، بە ڕیزبەندیی ئەمڕۆ

books.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Books ordered</title>
  <style>
    table, th, td { border: 1px solid #333; border-collapse: collapse; }
    th, td { padding: 6px; }
    tfoot { font-weight: bold; }
  </style>
</head>
<body>
  <table>
    <caption>Books ordered by Shilan</caption>
    <colgroup>
      <col style="width: 200px">
      <col>
    </colgroup>
    <thead>
      <tr><th>Book</th><th>Price (IQD)</th></tr>
    </thead>
    <tbody>
      <tr><td>Web Programming</td><td>15,000</td></tr>
      <tr><td>Databases</td><td>12,000</td></tr>
    </tbody>
    <tfoot>
      <tr><td>Total</td><td>27,000</td></tr>
    </tfoot>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

  <table>
    <caption>Books ordered by Shilan</caption>
    <colgroup>
      <col style="width: 200px">
      <col>
    </colgroup>
    <thead>
      <tr><th>Book</th><th>Price (IQD)</th></tr>
    </thead>
    <tbody>
      <tr><td>Web Programming</td><td>15,000</td></tr>
      <tr><td>Databases</td><td>12,000</td></tr>
    </tbody>
    <tfoot>
      <tr><td>Total</td><td>27,000</td></tr>
    </tfoot>
  </table>

The footer row "Total" is shown at the bottom, under the data.

«Total» لە خوارەوە، لە ژێر پیشان دەدرێت.

<tfoot> now comes last<tfoot> ئێستا کۆتایی دێت

The lecture writes <tfoot> before <tbody> and explains that the browser still shows the footer last. That was the rule of HTML 4. In today's HTML, <tfoot> must come after <caption>, <colgroup>, <thead> and <tbody> (MDN: "Originally, in HTML4, the opposite was true"). Browsers still draw a footer written too early at the bottom, but write it last.

وانەکە <tfoot> پێش <tbody> دەنووسێت و ڕوون دەکاتەوە کە هێشتا خوارەوەکە لە کۆتاییدا پیشان دەدات. ئەمە یاسای ⁦HTML 4⁩ بوو. لە HTMLـی ئەمڕۆدا <tfoot> دەبێت دوای <caption>، <colgroup>، <thead> و <tbody> بێت (MDN: لە ⁦HTML4⁩دا پێچەوانەکەی ڕاست بوو). هێشتا خوارەوەیەک کە زوو نووسرابێت لە کۆتاییدا دەکێشن، بەڵام لە کۆتاییدا بینووسە.

Page layout with a table (the old way)ڕێکخستنی لاپەڕە بە خشتە (ڕێگای کۆن)

Before CSS was strong, people built the whole with one big table: a header row, a menu row, a tall main area and a footer, with empty columns on the left and right. The lecture and Lab 1 (Exercise two) show this. Here is the lab's full code, with the quotes corrected:

پێش ئەوەی CSS بەهێز بێت، خەڵک هەموو بە یەک گەورە دروست دەکرد: بۆ header، بۆ menu، ناوچەیەکی بەرزی main و footer، لەگەڵ بەتاڵ لە چەپ و ڕاست. وانەکە و تاقیگەی ١ (ڕاهێنانی دووەم) ئەمە پیشان دەدەن. ئەمە کۆدی تەواوی تاقیگەکەیە، بە ڕاستکراوە:

Exercise two: page layout with a tableڕاهێنانی دووەم: ڕێکخستنی لاپەڕە بە خشتەlayout.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table layout</title>
</head>
<body>
  <table width="100%" border="1">
    <tr>
      <td width="15%"></td>
      <td width="70%" align="center" style="background-color:#FFC">Header</td>
      <td width="15%"></td>
    </tr>
    <tr>
      <td></td>
      <td align="center" style="background-color:#CCC">Menu &nbsp;&nbsp; Menu</td>
      <td></td>
    </tr>
    <tr height="200">
      <td></td>
      <td style="background-color:#CCF">Main</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td style="background-color:#CCC" align="center">Footer</td>
      <td></td>
    </tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Table layout</title>
</head>
<body>
  <table width="100%" border="1">
    <tr>
      <td width="15%"></td>
      <td width="70%" align="center" style="background-color:#FFC">Header</td>
      <td width="15%"></td>
    </tr>
    <tr>
      <td></td>
      <td align="center" style="background-color:#CCC">Menu &nbsp;&nbsp; Menu</td>
      <td></td>
    </tr>
    <tr height="200">
      <td></td>
      <td style="background-color:#CCF">Main</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td style="background-color:#CCC" align="center">Footer</td>
      <td></td>
    </tr>
  </table>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 8

The table fills the whole width; border="1" shows the grid.

هەموو پانییەکە پڕ دەکاتەوە؛ border="1" تۆڕەکە پیشان دەدات.

Lineدێڕی 9-13

Row 1: three columns of 15%, 70% and 15%. Only the middle cell (the header) has content and a pale yellow background #FFC.

١: سێ ⁦15%⁩، ⁦70%⁩ و ⁦15%⁩. تەنها ناوەڕاست ⁦(header)⁩ ناوەڕۆک و باکگراوندی زەردی کاڵی #FFCـی هەیە.

Lineدێڕی 16

  is an : a non-breaking space. Browsers squeeze many normal spaces into one;   keeps each space, so the two words stay apart.

  یەکێکە لە : نەشکاوە. چەند ئاسایی دەکەنە یەک ؛   هەموو دەهێڵێتەوە، بۆیە دوو وشەکە لێک دوور دەمێننەوە.

Lineدێڕی 19-23

A tall row (height="200") for the main content, in lavender #CCF.

بەرز (height="200") بۆ ناوەڕۆکی سەرەکی، بە ڕەنگی مۆری کاڵ #CCF.

Lineدێڕی 26

The footer, in light grey #CCC, centred.

footer، بە خۆڵەمێشیی کاڵ #CCC، لە ناوەڕاست.

Colours like #FFC are short hexadecimal codes: #FFC means #FFFFCC (pale yellow), #CCC is light grey and #CCF is pale lavender. They go inside the style attribute, which holds CSS for one element.

ڕەنگەکانی وەک #FFC کۆدی کورتی : #FFC واتە #FFFFCC (زەردی کاڵ)، #CCC خۆڵەمێشیی کاڵە و #CCF مۆری کاڵە. دەچنە ناو style، کە CSS بۆ یەک هەڵدەگرێت.

Problems in the lecture and lab versionsکێشەکانی وەشانی وانە و تاقیگەکە

In the lab sheet every attribute uses curly quotes (width=”70%”, style=”background-color:#FFC”). The browser then ignores the widths, the alignment and the colours, so you would not get the layout in the picture. The code above uses straight quotes.
The lecture slide shows only the first row, its last cell has a mixed quote ("15%”), and it writes background-color:yellow, while the picture shows pale yellow (#FFC in the lab).
height="200px" should be height="200": HTML size attributes take a plain number.
width, align, height and border on tables are obsolete; CSS does the same job.
The lab calls it "Example one" and then "Exercise two"; both are exercises.

لە پەڕەی تاقیگەکەدا هەموو خوار بەکاردەهێنێت (width=”70%”، style=”background-color:#FFC”). ئەو کاتە پانییەکان، شوێنی دەقەکان و ڕەنگەکان فەرامۆش دەکات، بۆیە ئەو ناو وێنەکە بەدەست ناهێنیت. کۆدەکەی سەرەوە ڕاست بەکاردەهێنێت.
سلایدی وانەکە تەنها یەکەم پیشان دەدات، دوا تێکەڵی هەیە ("15%”) و background-color:yellow دەنووسێت، لە کاتێکدا وێنەکە زەردی کاڵ پیشان دەدات (#FFC لە تاقیگەدا).
height="200px" دەبێت height="200" بێت: قەبارەی HTML تەنها ژمارەی سادە وەردەگرن.
width، align، height و border لەسەر ؛ CSS هەمان کار دەکات.
تاقیگەکە پێی دەڵێت «⁦Example one⁩» پاشان «⁦Exercise two⁩»؛ هەردووکیان ڕاهێنانن.

After tables, designers used floats for page layout, which was not much easier: see Why floats are the old way.

دوای ، دیزاینەران float ـیان بۆ بەکار هێنا، کە زۆر ئاسانتر نەبوو: بڕوانە بۆچی float ڕێگا کۆنەکەیە.

Page layout with a table (the old way)ڕێکخستنی لاپەڕە بە خشتە (ڕێگای کۆن)

The modern way: header, nav, main and footerڕێگای نوێ: header، nav، main و footer

Tables are for data, not for layoutخشتە بۆ دراوەیە، نەک بۆ ڕێکخستنی لاپەڕە

Use tables only for tabular data (timetables, lists of students, prices). For the layout of a page, use the meaning-based elements <header>, <nav>, <main> and <footer> with CSS. Table layouts are hard for screen readers (used by blind visitors), do not fit small phone screens, and mix content with design.

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

The same layout the modern wayهەمان ڕێکخستنی لاپەڕە بە ڕێگای نوێlayout-modern.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern layout</title>
  <style>
    body   { margin: 0; font-family: sans-serif; }
    .page  { display: grid; grid-template-columns: 15% 70% 15%; }
    header, nav, main, footer { grid-column: 2; padding: 8px; }
    header { background: #FFC; text-align: center; }
    nav    { background: #CCC; text-align: center; }
    main   { background: #CCF; min-height: 200px; }
    footer { background: #CCC; text-align: center; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <nav><a href="#">Menu</a> <a href="#">Menu</a></nav>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern layout</title>
  <style>
    body   { margin: 0; font-family: sans-serif; }
    .page  { display: grid; grid-template-columns: 15% 70% 15%; }
    header, nav, main, footer { grid-column: 2; padding: 8px; }
    header { background: #FFC; text-align: center; }
    nav    { background: #CCC; text-align: center; }
    main   { background: #CCF; min-height: 200px; }
    footer { background: #CCC; text-align: center; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <nav><a href="#">Menu</a> <a href="#">Menu</a></nav>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Explain the codeڕوونکردنەوەی کۆدەکە

Lineدێڕی 8

A CSS grid with three columns of 15%, 70% and 15%, like the table.

تۆڕێکی CSS بە سێ ⁦15%⁩، ⁦70%⁩ و ⁦15%⁩، وەک .

Lineدێڕی 9

Every part is placed in the middle column.

هەموو بەشێک لە ناوەڕاستدا دادەنرێت.

Lineدێڕی 18-21

Each part has an element that says what it is: header, navigation menu, main content, footer.

هەر بەشێک هەیە کە دەڵێت چییە: header، لیستی گەشتکردن ⁦(menu)⁩، ناوەڕۆکی سەرەکی، footer.

This page uses CSS grid with three columns. How a grid is drawn as a map with named areas is taught in The three-column page, rebuilt with grid.

ئەم لاپەڕەیە grid ـی CSS بە سێ بەکار دەهێنێت. چۆنیەتیی کێشانی grid وەک نەخشەیەک بە ناوچەی ناونراو لە لاپەڕەی سێ ستوونی، بە grid دووبارە دروستکراوەدا فێر دەکرێت.

Quick checkپشکنینی خێراWhat should you use for the layout of a modern page (header, menu, content, footer)?بۆ نوێ (header، menu، ناوەڕۆک، footer) چی بەکاربهێنیت؟<header>, <nav>, <main> and <footer> with CSS<header>، <nav>، <main> و <footer> لەگەڵ CSSOne big table with empty side columnsخشتەیەکی گەورە بە ستوونی بەتاڵی لاتەنیشتMany <br> tagsزۆر تاگی <br>  between the parts  لە نێوان بەشەکاندا

Common mistakesهەڵەکانی باو

Mistakes to avoid کە دەبێت خۆتیان لێ بپارێزیت
Mistake	What happensچی ڕوودەدات	Fixچارەسەر
Curly quotes `“ ”` from Word or slides خوار `“ ”` لە Word یان سلایدەوە	Attribute values break: links fail, `colspan` does nothing, colours disappear. تێکدەچن: کار ناکەن، `colspan` هیچ ناکات، ڕەنگەکان ون دەبن.	Type code in a code editor; use straight quotes `"`.کۆد لە دەستکاریکەری کۆددا بنووسە؛ ڕاست `"` بەکاربهێنە.
Writing HTML in Word or WordPadنووسینی HTML لە Word یان WordPad	A word processor saves fonts and formatting (a `.docx` or `.rtf` file), not plain text. It also turns quotes into curly quotes. فۆنت و شێوەکاری پاشەکەوت دەکات (فایلی `.docx` یان `.rtf`)، نەک دەقی سادە. هەروەها دەکات بە خوار.	Use a code editor such as VS Code or Notepad++ (editors). وەک ⁦VS Code⁩ یان ⁦Notepad++⁩ بەکار بهێنە (دەستکاریکەرەکان).
`< a href=…>`	Not a tag; shown as text. نییە؛ وەک دەق پیشان دەدرێت.	`<a href=…>`
Missing or wrong closing tag (`<html>` instead of `</html>`) کۆتایی نییە یان هەڵەیە (`<html>` لەبری `</html>`)	The page may still show, but parts can end up in the wrong place.لەوانەیە هەر پیشان بدرێت، بەڵام هەندێک بەش دەچنە شوێنی نادروست.	Close every element, in reverse order.هەموو دابخە، بە ڕیزبەندیی پێچەوانە.
`href="www.site.com"`	Treated as a relative path; 404.وەک ڕێژەیی دادەنرێت؛ ⁦404⁩.	`href="https://www.site.com"`
No `<meta charset="UTF-8"><meta charset="UTF-8">` نییە	Kurdish letters look broken.پیتە کوردییەکان تێکچوو دەردەکەون.	Add it as the first line in `<head>`.وەک یەکەم دێڕ لە `<head>`دا زیادی بکە.
Table for page layout بۆ	Hard to read on phones and screen readers.لەسەر مۆبایل و خوێندنەوەی قورسە.	Use `<header>`, `<nav>`, `<main>`, `<footer>` and CSS.`<header>`، `<nav>`، `<main>`، `<footer>` و CSS بەکاربهێنە.
Saving as `page.html.txt`پاشەکەوتکردنی فایلەکە بە ناوی `page.html.txt`	The browser shows the code as text. کۆدەکە وەک دەق پیشان دەدات.	Show file extensions in Windows and save as `.html`.لە ویندۆزدا پیشان بدە و وەک `.html` پاشەکەوتی بکە.

Exercisesڕاهێنانەکان

ExerciseڕاهێنانExample one (Lab 1): a data tableنموونەی یەکەم (تاقیگەی ١): خشتەیەکی دراوە

Create the table below: a header row with Name, College and Department, then two students. Use <th> for the headers and <td> for the data. Give the table borders and some space inside the cells.

ئەم خوارەوە دروست بکە: سەردێڕ بە Name، College و Department، پاشان دوو خوێندکار. <th> بۆ سەردێڕەکان و <td> بۆ دراوەکان بەکاربهێنە. هێڵی دەوروبەر و کەمێک لەناو بدە .

Name	College	Department
Aram	Informatics	Network Management
Shilan	Informatics	Network Management

Hintئاماژە

One <tr> per row; three cells in every row.

یەک <tr> بۆ هەر ؛ سێ لە هەموو .

Show answerوەڵامەکە پیشان بدە

students.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <style>
    table { border: 1px solid #333; border-spacing: 6px; }
    th, td { border: 1px solid #333; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>Aram</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
    <tr>
      <td>Shilan</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Students</title>
  <style>
    table { border: 1px solid #333; border-spacing: 6px; }
    th, td { border: 1px solid #333; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>Department</th>
    </tr>
    <tr>
      <td>Aram</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
    <tr>
      <td>Shilan</td>
      <td>Informatics</td>
      <td>Network Management</td>
    </tr>
  </table>
</body>
</html>

ExerciseڕاهێنانExercise two (Lab 1): page layoutڕاهێنانی دووەم (تاقیگەی ١): ڕێکخستنی لاپەڕە

Build the page layout from Exercise two: a header (pale yellow), a menu row with two "Menu" words (grey), a tall main area (lavender) and a footer (grey), all in the middle 70% of the page. First do it with a table, as in the lab. Then, as an extra step, do it with <header>, <nav>, <main> and <footer>.

ڕاهێنانی دووەم دروست بکە: header (زەردی کاڵ)، menu بە دوو وشەی «Menu» (خۆڵەمێشی)، ناوچەیەکی بەرزی main (مۆری کاڵ) و footer (خۆڵەمێشی)، هەمووی لە ٧٠%ـی ناوەڕاستی . سەرەتا بە بیکە، وەک تاقیگەکە. پاشان، وەک هەنگاوێکی زیادە، بە <header>، <nav>، <main> و <footer> بیکە.

Hintئاماژە

Four rows and three columns (15% + 70% + 15%). Only the middle cells have content. Use   between the two Menu words.

چوار و سێ ⁦(15% + 70% + 15%)⁩. تەنها ناوەڕاست ناوەڕۆکیان هەیە. لە نێوان دوو وشەی Menu   بەکاربهێنە.

Show answerوەڵامەکە پیشان بدە

The table version is the corrected lab code in Page layout with a table. The modern version:

وەشانی کۆدی ڕاستکراوەی تاقیگەکەیە لە ڕێکخستنی لاپەڕە بە خشتە. وەشانی نوێ:

layout-modern.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern layout</title>
  <style>
    body   { margin: 0; font-family: sans-serif; }
    .page  { display: grid; grid-template-columns: 15% 70% 15%; }
    header, nav, main, footer { grid-column: 2; padding: 8px; }
    header { background: #FFC; text-align: center; }
    nav    { background: #CCC; text-align: center; }
    main   { background: #CCF; min-height: 200px; }
    footer { background: #CCC; text-align: center; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <nav><a href="#">Menu</a> <a href="#">Menu</a></nav>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern layout</title>
  <style>
    body   { margin: 0; font-family: sans-serif; }
    .page  { display: grid; grid-template-columns: 15% 70% 15%; }
    header, nav, main, footer { grid-column: 2; padding: 8px; }
    header { background: #FFC; text-align: center; }
    nav    { background: #CCC; text-align: center; }
    main   { background: #CCF; min-height: 200px; }
    footer { background: #CCC; text-align: center; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <nav><a href="#">Menu</a> <a href="#">Menu</a></nav>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

ExerciseڕاهێنانExercise: three kinds of linksڕاهێنان: سێ جۆری بەستەر

Make two pages. index.html has a list of three links: a relative link to pages/about.html, an absolute link to https://www.php.net and a mail link to aram@example.com. pages/about.html has a short text and a relative link back to index.html.

دوو دروست بکە. index.html لیستێکی سێ هەیە: بۆ pages/about.html، بۆ https://www.php.net و بۆ aram@example.com. pages/about.html دەقێکی کورت و هەیە بۆ گەڕانەوە بۆ index.html.

Hintئاماژە

From inside pages/, the home page is one folder up: ../.

لەناو pages/ـەوە، یەک لە سەرەوەیە: ../.

Show answerوەڵامەکە پیشان بدە

index.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
<body>
  <h1>My site</h1>
  <ul>
    <li><a href="pages/about.html">About me</a></li>
    <li><a href="https://www.php.net">The PHP website</a></li>
    <li><a href="mailto:aram@example.com">Email me</a></li>
  </ul>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
<body>
  <h1>My site</h1>
  <ul>
    <li><a href="pages/about.html">About me</a></li>
    <li><a href="https://www.php.net">The PHP website</a></li>
    <li><a href="mailto:aram@example.com">Email me</a></li>
  </ul>
</body>
</html>

pages/about.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About me</title>
</head>
<body>
  <h1>About me</h1>
  <p>My name is Aram. I study web programming.</p>
  <p><a href="../index.html">Back to the home page</a></p>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About me</title>
</head>
<body>
  <h1>About me</h1>
  <p>My name is Aram. I study web programming.</p>
  <p><a href="../index.html">Back to the home page</a></p>
</body>
</html>

ExerciseڕاهێنانExercise: colspan and rowspanڕاهێنان: colspan و rowspan

Write a class timetable with three columns (Day, 8:30 - 10:00, 10:15 - 11:45). On Sunday, the Web Programming lab fills both time slots. Databases is at 10:15 on both Monday and Tuesday, in one tall cell. Monday 8:30 is Networks and Tuesday 8:30 is English.

وانەکان بە سێ بنووسە (Day، ⁦8:30 - 10:00⁩، ⁦10:15 - 11:45⁩). ڕۆژی یەکشەممە ⁦Web Programming lab⁩ هەردوو کاتەکە پڕ دەکاتەوە. Databases لە کاتژمێر ⁦10:15⁩ی دووشەممە و سێشەممەدایە، لە یەک بەرزدا. دووشەممە ⁦8:30⁩ Networksە و سێشەممە ⁦8:30⁩ Englishە.

Hintئاماژە

Sunday needs colspan="2". The Databases cell needs rowspan="2", so Tuesday's row has only one <td>.

یەکشەممە پێویستی بە colspan="2" هەیە. Databases پێویستی بە rowspan="2" هەیە، بۆیە سێشەممە تەنها یەک <td>ـی هەیە.

Show answerوەڵامەکە پیشان بدە

timetable.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Timetable</title>
  <style>
    table, th, td { border: 1px solid #333; }
    th, td { padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Day</th>
      <th>8:30 - 10:00</th>
      <th>10:15 - 11:45</th>
    </tr>
    <tr>
      <th>Sunday</th>
      <td colspan="2">Web Programming lab</td>
    </tr>
    <tr>
      <th>Monday</th>
      <td>Networks</td>
      <td rowspan="2">Databases</td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td>English</td>
    </tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Timetable</title>
  <style>
    table, th, td { border: 1px solid #333; }
    th, td { padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Day</th>
      <th>8:30 - 10:00</th>
      <th>10:15 - 11:45</th>
    </tr>
    <tr>
      <th>Sunday</th>
      <td colspan="2">Web Programming lab</td>
    </tr>
    <tr>
      <th>Monday</th>
      <td>Networks</td>
      <td rowspan="2">Databases</td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td>English</td>
    </tr>
  </table>
</body>
</html>

ExerciseڕاهێنانExercise: find the bugsڕاهێنان: هەڵەکان بدۆزەوە

This code was copied from slides and has many errors. Find them all and write a correct version.

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

links.htmlTEXT

<html>
<head><title>My links</title></head>
<body>
< a href=“home.html”> Home</ a>
<a href="www.example.com">Example</a>
<table border=”1”>
  <tr><th colspan=”2”>Students</th></tr>
  <tr><td>Aram</td><td>Hana</td></tr>
</table>
<html>

Show answerوەڵامەکە پیشان بدە

No <!DOCTYPE html>, no lang and no <meta charset="UTF-8">.
< a and </ a> have spaces, so they are not tags.
Curly quotes in href, border and colspan.
www.example.com without https:// is a relative link.
The last line is <html>; it must be </html>. And border is better done with CSS.

<!DOCTYPE html>، lang و <meta charset="UTF-8"> نییە.
< a و </ a> تێدایە، بۆیە نین.
خوار لە href، border و colspanدا.
www.example.com بەبێ https:// .
دوا دێڕ <html>ـە؛ دەبێت </html> بێت. هەروەها border باشترە بە CSS بکرێت.

links.htmlHTMLRuns in the browserلە ناو تۆڕگەڕ کار دەکات

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My links</title>
  <style>
    table, th, td { border: 1px solid #333; }
  </style>
</head>
<body>
  <a href="home.html">Home</a>
  <a href="https://www.example.com">Example</a>
  <table>
    <tr><th colspan="2">Students</th></tr>
    <tr><td>Aram</td><td>Hana</td></tr>
  </table>
</body>
</html>

What the browser showsئەوەی تۆڕگەڕ پیشانی دەدات

HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My links</title>
  <style>
    table, th, td { border: 1px solid #333; }
  </style>
</head>
<body>
  <a href="home.html">Home</a>
  <a href="https://www.example.com">Example</a>
  <table>
    <tr><th colspan="2">Students</th></tr>
    <tr><td>Aram</td><td>Hana</td></tr>
  </table>
</body>
</html>

ExerciseڕاهێنانExercise: the merged-cells gridڕاهێنان: تۆڕی خانەکانی یەکخراو

Build this table with one <table>. Count the columns first.

ئەم بە یەک <table> دروست بکە. سەرەتا بژمێرە.

CêIT

Hintئاماژە

Five columns. 'Title goes here' has colspan="3"; C has rowspan="3", so rows 3 and 4 need one cell less. The same homework also asked for a 'Fresh Fruits' page with a picture beside the text built from a table: today that is page layout, so use CSS instead (the modern way).

پێنج . «ناونیشان لێرە دێت» colspan="3"ـی هەیە؛ C rowspan="3"ـی هەیە، بۆیە ٣ و ٤ یەک کەمتریان دەوێت. هەمان ئەرکی ماڵەوە داوای لاپەڕەیەکی «⁦Fresh Fruits⁩»ـیشی دەکرد کە وێنەیەک لە تەنیشت دەقەکە بە دابنرێت: ئەمڕۆ ئەمە ، بۆیە لە جیاتی ئەوە CSS بەکار بهێنە (ڕێگا نوێیەکە).

Show answerوەڵامەکە پیشان بدە

HTML

<table>
  <tr><td colspan="3">Title goes here</td><td>A</td><td>B</td></tr>
  <tr><td rowspan="3">C</td><td>D</td><td>E</td><td>F</td><td>G</td></tr>
  <tr><td>H</td><td colspan="2">I</td><td rowspan="2">J</td></tr>
  <tr><td>K</td><td>L</td><td>M</td></tr>
  <tr><td>N</td><td colspan="4">O</td></tr>
</table>

Check every row: 3 + 1 + 1, then 1 + 4, then (C) + 1 + 2 + 1, then (C) + 3 + (J), then 1 + 4: always five columns.

هەموو بپشکنە: ٣ + ١ + ١، پاشان ١ + ٤، پاشان ⁦(C) +⁩ ١ + ٢ + ١، پاشان ⁦(C) +⁩ ٣ + ⁦(J)⁩، پاشان ١ + ٤: هەمیشە پێنج .

ExerciseڕاهێنانExercise: a phone shop price listڕاهێنان: لیستی نرخی دوکانی مۆبایل

Write the HTML for this price list: caption "Mobile shop prices"; columns Id, Name, List price and Discount; three phones with list prices $600, $400 and $800; and one Discount cell, "15% of the list price", that covers all three phone rows. Give every phone its own id.

HTMLـی ئەم لیستی نرخە بنووسە: ناونیشانی «⁦Mobile shop prices⁩»؛ Id، Name، ⁦List price⁩ و Discount؛ سێ مۆبایل بە نرخی ⁦$600⁩، ⁦$400⁩ و ⁦$800⁩؛ و یەک Discount، «⁦15% of the list price⁩»، کە هەر سێ مۆبایلەکان دادەپۆشێت. بە هەر مۆبایلێک ناسنامەیەکی ⁦(id)⁩ تایبەت بدە.

Hintئاماژە

The Discount cell is in the first phone row only, with rowspan="3"; the next two rows have three cells each.

Discount تەنها لە یەکەم مۆبایلدایە، بە rowspan="3"؛ دوو دواتر هەر یەکەیان سێ هەیە.

Show answerوەڵامەکە پیشان بدە

HTML

<table>
  <caption>Mobile shop prices</caption>
  <thead>
    <tr><th>Id</th><th>Name</th><th>List price</th><th>Discount</th></tr>
  </thead>
  <tbody>
    <tr><td>2026001</td><td>iPhone 16e</td><td>$600</td><td rowspan="3">15% of the list price</td></tr>
    <tr><td>2026002</td><td>Galaxy A56</td><td>$400</td></tr>
    <tr><td>2026003</td><td>Galaxy S25</td><td>$800</td></tr>
  </tbody>
</table>

The exam sheet this comes from gives two phones the same id. Ids must be unique, so each phone here has its own.

ئەو پەڕەی تاقیکردنەوەیەی ئەمەی لێوە هاتووە هەمان id دەداتە دوو مۆبایل. idـیەکان دەبێت جیاواز بن، بۆیە لێرەدا هەر مۆبایلێک هی خۆی هەیە.

Summary and reviewکورتە و پێداچوونەوە

HTML marks up content with tags. The browser hides the tags and shows the content.
An element = opening tag + content + closing tag. Attributes (name="value") go in the opening tag, with straight quotes.
Every page: <!DOCTYPE html>, then <html> with <head> (information) and <body> (what is shown). Add <meta charset="UTF-8">.
Links: absolute (https://…), relative (home.html, ../index.html) and mail (mailto:).
Tables: <table>, <tr>, <th>, <td>; colspan merges columns, rowspan merges rows.
Tables are for data. Lay out pages with <header>, <nav>, <main>, <footer> and CSS.

HTML ناوەڕۆک بە نیشان دەکات. دەشارێتەوە و ناوەڕۆکەکە پیشان دەدات.
= دەستپێک + ناوەڕۆک + کۆتایی. (name="value") دەچنە ناو دەستپێک، بە ڕاست.
هەموو : <!DOCTYPE html>، پاشان <html> لەگەڵ <head> (زانیاری) و <body> (ئەوەی پیشان دەدرێت). <meta charset="UTF-8"> زیاد بکە.
: ڕەها (https://…)، ڕێژەیی (home.html، ../index.html) و ئیمەیڵ (mailto:).
: <table>، <tr>، <th>، <td>؛ colspan یەک دەخات، rowspan یەک دەخات.
بۆ دراوەن. بە <header>، <nav>، <main>، <footer> و CSS دروست بکە.

Review questionsپرسیارەکانی پێداچوونەوە

What is the difference between a tag and an element?جیاوازیی نێوان تاگ و توخم چییە؟

A tag is the name in angle brackets, such as <p> or </p>. An element is the whole thing: opening tag, content and closing tag.

ئەو ناوەیە کە لەناو کەوانەی گۆشەییدایە، وەک <p> یان </p>. هەموو شتەکەیە: دەستپێک، ناوەڕۆک و کۆتایی.

What goes in the head, and what goes in the body?چی دەچێتە ناو head و چی دەچێتە ناو body؟

The head holds information about the page (title, character set, style sheets, scripts). The body holds everything shown in the browser window.

head زانیاری دەربارەی هەڵدەگرێت (ناونیشان، کۆمەڵەی پیتەکان، فایلەکانی شێواز، ). body هەموو ئەو شتانە هەڵدەگرێت کە لە پەنجەرەی پیشان دەدرێن.

Name the three kinds of hyperlinks, with an example of each.سێ جۆرەکەی بەستەر ناو بهێنە، بە نموونەیەک بۆ هەریەکەیان.

Absolute: <a href="https://www.google.com">Google</a>. Relative: <a href="home.html">Home</a>. Mail: <a href="mailto:info@example.com">Send email</a>.

ڕەها: <a href="https://www.google.com">Google</a>. ڕێژەیی: <a href="home.html">Home</a>. ئیمەیڵ: <a href="mailto:info@example.com">Send email</a>.

What do <th> and <td> create, and how do they look by default?<th> و <td> چی دروست دەکەن و بە شێوەی بنەڕەتی چۆنن؟

<th> creates a header cell, bold and centred. <td> creates a normal data cell.

<th> دروست دەکات، تۆخ و لە ناوەڕاست. <td> ئاسایی دراوە دروست دەکات.

Why did colspan=”2” on the slide not merge the cells?بۆچی colspan=”2” لە سلایدەکەدا خانەکانی یەک نەخست؟

Because of the curly quotes: the value ”2” is not a number, so the browser uses the default value 1.

بەهۆی خوارەوە: ”2” ژمارە نییە، بۆیە بنەڕەتی 1 بەکاردەهێنێت.

Is it a good idea to lay out a whole page with a table? Why?ئایا بیرۆکەیەکی باشە هەموو لاپەڕەتۆڕێک بە خشتەیەک ڕێکبخەیت؟ بۆچی؟

No. Tables are for tabular data. Table layouts are hard for screen readers, do not adapt to phones and mix content with design. Use semantic elements and CSS.

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

Videoڤیدیۆ

Watch a videoسەیری ڤیدیۆیەک بکە

A video that viewers liked a lot and praised in their comments, chosen for this lesson.ڤیدیۆیەک کە بینەران زۆریان پێ خۆش بووە و لە کۆمێنتەکانیاندا ستایشیان کردووە، بۆ ئەم وانەیە هەڵبژێردراوە.

Html and Css for beginners in Kurdish - [2] - بۆ ئاستی سەرەتای بە کوردی HTML + CSSK97 Media · Kurdish (Sorani)کوردی (سۆرانی) · 30K viewsبینین · 1K likesلایک
A calm Kurdish review of HTML: what HTML is, the main tags (headings, paragraphs, links, lists, images, nav, footer, div), class and id.
پێداچوونەوەیەکی ئارام بە کوردی: چییە، گرنگترین وەک سەردێڕ، پەرەگراف، ، لیست، وێنە، `nav`، `footer` و `div`، لەگەڵ `class` و `id`.
Whole video: Kurdish overview of basic HTML tags
هەموو ڤیدیۆکە: بە کوردی گرنگترین دەناسێنێت.

Lesson complete!وانەکە تەواو بوو!

Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.

Key termsزاراوە سەرەکییەکان

Next lessonوانەی داهاتوو

HTML Text, Images and Listsدەق، وێنە و لیست لە HTMLـدا

Related lecturesوانە پەیوەندیدارەکان

References and further readingسەرچاوەکان و خوێندنەوەی زیاتر

This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.