Top Banner
یی زها فێربىوHTML بە کىردی لە کۆدیکی سادەەیەىوو HTML HTML ( ئێچ تی ئێن ئێڵ یاى هتوڵتکراوەی کە کىر) HyperText Markup Language یذا پیطاێکی ـە زهاەک لەسەر وێب. پەڕگەیڕەیی هەر پەىوسی ە کە بەکاردێت بۆی سەر وێبڕەکا پەHTML ق، کە دە لەها پێکهاتىوە تەىوسیي و ڵێي کە چۆىڕ دەە وێبگەە بکە. ئەم تاگاڕەاو پە ىوسراوی هەڵێکی زۆر لە تاگ و تىخن و لە کۆویص پێکهاتىوە ئەربکەوێت. دەکەڕەڕۆکی پەاوە ەکاى یاى وێHTML کەهذا فێریەکی هاوەیێت لەی ئەتىا دوور لە ئایتەسێکی کە کیەک ڕادەوى بەە بۆ فێربى زۆر ئاساHTML بێت بەی کەت. ئەوا و دەستکاری بکاىوسێت و بیHTML رێتاوت وسي پێیاىى دەىوش پڕۆگراه( Programmer بەڵکى) ىوسەر ( Author ە و لە هاوپۆلیذا پیطاێکیییە بەڵکى زها پڕۆگراهیيێکیی کە زهاوە لەبەرئە) Java وC وASIC ییە. اوەڕۆک ١ ای هاHTML ٢ ای تىاHTML ٣ ن پێىیستە بۆ چیوى؟ فێربى ٤ پاضگریhtm یاىhtml ؟ ٥ ىوسیي و ەوتکردى پاضەک ٦ تاگەکاى ٧ خوەکاى تى ٨ یەکاىذی تایبەتوە ٩ ڕەی پێکهاتەی پەHTML ١١ DTD ١١ ذی/تىخن ـە بێ تاگ/تایبەتوە بایەخەکاى
25

Learn HTML in Kurdish

Mar 09, 2016

Download

Documents

Samrand Haji

Learn HTML in Kurdish
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Learn HTML in Kurdish

بە کىردی HTMLفێربىوی زهای

HTMLوىوەیەکی سادە لە کۆدی

HTML (کە کىرتکراوەی هتوڵیاى ئێچ تی ئێن ئێڵ )HyperText Markup Language ـە زهاێکی پیطاذای

تەها پێکهاتىوە لە دەق، کە HTMLپەڕەکای سەر وێبە کە بەکاردێت بۆ ىوسیی هەر پەڕەیەک لەسەر وێب. پەڕگەی

ئەویص پێکهاتىوە لە کۆهەڵێکی زۆر لە تاگ و تىخن و ىوسراوی او پەڕەکە. ئەم تاگاە بە وێبگەڕ دەڵێي کە چۆى ىوسیي و

وێەکاى یاى اوەڕۆکی پەڕەکە دەربکەوێت.

HTML زۆر ئاساە بۆ فێربىوى بە ڕادەیەک کە کەسێکی دوور لە ئایتی ئەتىاێت لە هاوەیەکی کەهذا فێریHTML ببێت

( بەڵکى Programmer) پڕۆگراهىوشدەىوسي پێیاى اوترێت HTMLو بیىوسێت و دەستکاری بکات. ئەواەی کە

ASICو Cو Java( لەبەرئەوەی کە زهاێکی پڕۆگراهیي ییە بەڵکى زهاێکی پیطاذاە و لە هاوپۆلی Author) ىوسەر

ییە.

اوەڕۆک

هاای ١ HTML

تىاای ٢ HTML

فێربىوى؟ چین پێىیستە بۆ ٣

پاضگری ٤ htm یاى html؟

پاضەکەوتکردى ىوسیي و ٥

تاگەکاى ٦

تىخوەکاى ٧

تایبەتوەذییەکاى ٨

پێکهاتەی پەڕەی ٩ HTML

١١ DTD

بایەخەکاى تاگ/تایبەتوەذی/تىخن ـە بێ ١١

Page 2: Learn HTML in Kurdish

پەرەگراف ١٢ – Paragraph

ەردێڕس ١٣ – Heading

بەستەر ١٤ - Link

o بەستەر ىخویت ١٤.١

o دیاریکراو کردەوە لە ضىێێکی ١٤.٢

o هەهاى پەڕەدا بەستەر بۆ دەقێک لە ١٤.٣

وێە ١٥ – Image

o تایبەتوەذی ١٥.١ src

o تایبەتوەذییەکای ١٥.٢ alt و title

o تایبەتوەذییەکای ١٥.٣ Height و Width

لیست ١٦ – List

o لیستی ڕیسکراو ١٦.١ - Ordered List

o لیستی ڕیسەکراو ١٦.٢ - Unordered List

o لیستی پێاسە ١٦.٣ – Definition List

خطتە ١٧ - Table

o خطتە تایبەتوەذییەکای ١٧.١

فۆرم ١٨ - Form

o تێکردى ١٨.١ - input

o ڕووبەري دەق ١٨.٢ - textarea

o ١٨.٣ Drop Down

١٩ div و span

تىخوەکای ێى ٢١ head

o تىخوی ٢١.١ meta

o تىخوی ٢١.٢ link

٢١ XHTML

جیاوازی ێىاى ٢٢ HTML و XHTML

HTMLهاای

HyperText ۆ هەر ضىێێک کە بتەوێت بە هەبەست لەوەیە کە تۆ بە او وێبذا دەگەڕێیت لە هەر کاتێکذا و ب

کرتەکردى لەو بەستەراەی لە الپەڕەکاذا دەیابییت ەک بە ضێىەیەکی ڕێک و یەک لە دوای یەک.

Markup ،بریتییە لە کاری تاگەکاى لەسەر ىوسراوی او پەڕەکە وەک )تۆخکردى، الرکردى، هێڵبەژێرداهێاى

...( ـی هەر دەقێک.

Language .واتە زهاىHTML .زهاە وەک هەهىو زهاە جیاوازەکای تر چىکە کۆد و ڕستەکاری هەیە

HTMLتىاای

HTML بۆ دروستکردی هاڵپەڕێکی سادە و تاکەکەسی دەست ئەدات یاى بۆ هەر جۆرە هاڵپەڕێک کە ىێکردەوەی زۆر

بۆ HTMLـەوە بلکێرێت بۆ پێذای ضێىازێکی جىاتر و ئاساتر لە ڕێکخستیذا. بە پێچەواەوە CSSەبێت. ئەتىارێت بە

زهاێکی جێگیرە. داڕضتي و HTMLهاڵپەڕێکی بسۆک، فراواى و بازرگای دەست ادات کە ڕۆژاە ىێ دەکرێتەوە چىکە

ۆر گراى و کاتبەرە. دەىوسرێي کارێکی ز HTMLىێکردەوەی ئەو هاڵپەڕە گەوراەی کە بە

Page 3: Learn HTML in Kurdish

چین پێىیستە بۆ فێربىوى؟

تەها پێىیستت بە دەستکاریکەرێک )بۆ ىوسیی کۆدەکاى( و وێبگەڕێک )بۆ بییی ئەجام( دەبێت. هیچ HTMLبۆ فێربىوی

کە سادەتریي دەستکاریکەری Notepadئاهڕازێکی تر یاى ەرهەکااڵیەکت پێىیست ابێت. دەستکاریکەر لە ویذۆز وەک

دەقە، بەاڵم ئەواەی کە ئاهۆژگاریکراوى وەک:

Notepad++

VIM

Gedit

Medit

Bluefish

وێبگەڕیص وەک:

Firefox

Opera

Google Chrome

Internet Explorer

DreamWeaver ,Microsoftلەواە HTMLهەرچەذە چەذ پڕۆگراهێک هەى بۆ دەستکاریکردى و داڕضتی پەڕگەیەکی

FrontPage ,Microsoft Web Expression ە ئەم پڕۆگراهاWYSIWYG ـي، خۆیاى کۆدەکات بۆ دەىوسي و تۆ

، بەڵکى یاریذەدەرێکي بۆ ئەو HTMLڕووە ئەجاهەکەی دەبییت. ضارەزابىوى لەم پڕۆگراهاە هاای ضارەزابىوى ییە لە

و لە هیچ زهاێکی وێبذاڕضتي ازاي یاى بۆ چەذ کارێکی کەهیاى پێىیستە و کەساەی کە دەیاەوێت هاڵپەڕێکیاى هەبێت

لەبەرئەوە ایاەوێت کاتێک تەرخاى بکەى بۆ فێربىوی زهاێک.

؟htmlیاى htmپاضگری

بە گطتی وەک یەک واى و دروستي. لە سەرەتاوە کە سیستەهە html.یاى htm.بەکارهێای هەر کاهێک لە پاضگری

اى تەها ڕێگەیاى بە سێ ىوسە ئەدا بۆ پاضگری پەڕگە، بەو ضێىەیە بىو، بەاڵم دوای ئەوەی ڕێگەدرا ىوسەی زیاتر کۆەک

ـیص پەیذا بىو. لە ئێستادا ىوسیی هەر کاهێکیاى وەک پاضگر ئەکەوێتە سەر ئارەزووی html.بەکارببرێت پاضگری

yekemin-perre.html = yekemin-pere.htmىوسەر و هیچ کەضەیەک دروست اکەى. کەواتە

ىوسیي و پاضەکەوتکردى

Page 4: Learn HTML in Kurdish

Notepadلە utf-8پاضەکەوتکردى بە

لە جێیەک پاضەکەوتی File > Save asلە سەرەتادا ئەوەی دەتەوێت لە دەستکاریکەرەکەدا دەیىوسیت پاضاى بچۆ بۆ

perre.html-yekeminپاضەکەوتی بکەیت، بۆ وىوە: htmlبکە بە هەر اوێکەوە بەاڵم ئەوەی گرگە بە پاضگری

ـی پەڕگەیەکە بۆ یىیکۆد. چۆییەتی گۆڕییص لە Encodingکی گرگ پێص پاضەکەوتکردی پەڕگەکە گۆڕیی خاڵێ

Format > Encode inدەبێت بچیت بۆ ++Notepadدەستکاریکەرێکەوە بۆ دەستکاریکەرێکی تر جیاوازە. لە

8 without BOM-UTF بەاڵم لەNotepad ەجەرەی پاضەکەوتکردذا دەتىایت لە کاتی پاضەکەوتکردى و کردەوەی پ

بەوەی کە لە ژێر ىوسیی اوە پەڕەکەدا. utf-8پەڕگەکە بکەیت بە

تاگەکاى

HTML لە ڕێی تاگەکاەوە ضێىازی دەرکەوتي و ىوسیي لە پەڕەکەدا ڕێک دەخات. ئەو دەقەی دەهاەوێت گۆڕاکارییەکی

پەرەگراف و بەستەر( دەیکەیە ێىاى دوو تاگەوە. تاگەکایص پێکهاتىوى بەسەردا بهێیي لە )تۆخکردى، الرکردى، کردى بە

لە دوو کەواەی تیژی داخراو کە لە ێى کەواەکاذا پیتێک یاى وضەیەک دەىوسرێت تا دەقی دیاریکراو گۆڕاکاری

ەی تىخوەکە و کۆتایی هێاە ویسیترای بەسەردابێت. وە لە تاگی دووەهذا هێڵێکی الر )/( دادەرێت کە هەبەست لێی داخستەو

بەو ضێىازی دەرکەوتە. بۆ وىوە گەر بواەوێت دەقێک بە ضێىازێکی تۆخ بىوسیي، بەم ضێىەیە دەبێت:

<strong> خەۆئەم نووسراوە ت </strong>

ىێ یاى بەاڵم ژهارەیەکی کەم لە تىخوەکاى پێکهاتىوى لە یەکێک و تاگی داخستەوەیاى ییە وەک تاگی چىوەسەر دێڕی

تاگی وێە:

<img src="http://www.domain.com/wene.jpg" />

تێبیی: لێرەدا دەبییت پێص کەواەی کۆتایی هێڵێکی الر داراوە ئەهەش ئەوە ئەگەیەێت کە داای وێە لە یەک تاگ

ـەوە وا ٤.١١وەضای پێکهاتىوە و تاگەکە خۆی خۆی دائەخاتەوە. ئەضتىارێت ئەو هێڵێ الرە ەىوسرێت بەاڵم لە

ـیطذا بگىوجێت. XHTMLئاهۆژگاریکراوە کە بىوسرێت و تاوەکى لەگەڵ بەهاکای

پێکذێت لە )تاگی سەرەتا، تایبەتوەذی، اوەڕۆکی تىخن، تاگی کۆتایی( HTMLتىخوی

Page 5: Learn HTML in Kurdish

تىخوەکاى

تىخوەکاى لە تاگی سەرەتاوە دەستپێذەکەى هەتا تاگی کۆتایی کە لە اویاذا لەواەیە اوەڕۆک و/یاى تایبەتوەذی هەبي.

ۆکي وەک تىخوی وێە. دەضێت هەذێک لە تىخوەکاى سەرەڕای اوەڕۆک تایبەتوەذیطیاى هەذێک لە تىخوەکاى بێ اوەڕ

ەبێت کە بەهاەش دەوترێت تىخوە بەتاڵەکاى، وەک تىخوی چىوەسەر دێڕی ىێ و تىخوی هێڵی ئاسۆیی )کە تەها لە

تاگێکی تاک پێکهاتىوى(.

<br />

<hr />

تایبەتوەذییەکاى

-nawi-taybetmendi="nirxiپێک هاتىوى لە اوی تایبەتوەذیی و رخی تایبەتوەذی بە ضێىەی تایبەتوەذییەکاى کە

taybetmendi" دەىوسرێي و دەکەوە ێى تاگی سەرەتای هەر تىخوێکەوە ئەم تایبەتوەذییاە زایاریی زیاتر لەسەر

ـەوە کاریگەرییاى CSSدەکەى تا بەهۆی تىخوەکە دابیي دەکەى، کاریگەرییاى لەسەر جێ دەهێڵي یاى تىخوەکاى دیاری

بەسەردا بهێرێي. هەذێک وىوە:

تایبەتوەذیalt ( لە تىخوی وێەدا کە بە واتای دەقی جێگرەوە دێتalternative text بە کاردێت بۆ ىوسیی )

ذای وێەی اچاالک دەقێک تا پیطاى بذرێي لەو وێبگەڕاەی پاڵپطتی پیطاذای وێە اکەى یاى بەکارهێەر پیطا

کردووە.

<img src="http://chawg.org/img/opensuse.png" alt="OpenSUSE leser computeri

Dell mini 9" />

تایبەتوەذیstyle کە بە ضێىەیinline CSS .دەتىایت کاریگەرییەک بهێیت بەسەر اوەڕۆکی تىخوەکەدا

<p style="color:#ff0000;">Eme deqeke ke be rengi sur nusrawe.</p>

بە هۆیclass وid ـیەوە دەتىایت دەقێک دیاری بکەیت تا بە هۆی ستایڵ ضیتەوە گۆڕاکارییەکیاى بەسەردا

بهێیت.

<div class="nawnishan">Min feri HTML debim.</div>

Page 6: Learn HTML in Kurdish

HTML، بەاڵم لە XHTMLتێبیی: رخی تایبەتوەذییەکاى دەبێت لە ێىاى تاک یاى جىوت کۆتەیطذا بىوسرێي لە

دەکرێت بە بێ کۆتەیطیص بىوسرێي.

HTMLپێکهاتەی پەڕەی

HTML بەضی( بە ضێىەیەکی سادە پێکهاتىوە لە سێ بەضی سەرەکیDOCTYPE بەضی ،head بەضی ،body سادەتریي )

ىوسرابێت بەم ضێىەیەیە: HTMLەیەک کە بە پەڕگ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Ferbuni HTML</title>

</head>

<body>

<p>Yekem babet le ferbuni HTML.</p>

</body>

</html>

دێڕی یەکەم کە پێی دەوترێتDocument Type Definition بریتییە لە اساذی پەڕەکە کە ئاهاژە بە جۆری

پێىیستە لە دێڕی یەکەم لە سەرەتای هەهىو کۆدەکاذا ـە. HTMLئەو بەڵگەاهەیە ئەکات کە سەر بە چ جۆرێکی

بێت.

هەردوو تاگی کردەوە و داخستیhtml لە سەرەتا و کۆتایی هەهىو کۆدەکاى دەىوسرێي. ئەم تاگە بە وێبگەڕ

ـە. HTMLدەڵێت کە ئەم پەڕەیە

هەردوو تاگیhead ـیص لە دوای تاگیhtml اگەدا دەىوسرێي لە ێى ـەوە دێت. هەرچی لە ێىاى ئەم دوو ت

پەڕەکەدا دەراکەوى بەڵکى لە ێىاى ئەم دوو تاگەدا تەها زایاری دەربارەی ئەو پەڕەیە تیادا دەىوسرێت.

تاگەکایtitle اویطای پەڕەکە دیاری دەکەى، هەرچی لە ێىاى ئەو دوو تاگەدا بىوسرێي دواتر لەTitle

bar ە گەر ئەو پارچە کۆدەی سەرەوە لە پەڕگەیەکذا بىوسیي، دواتر کە بە ـی وێبگەڕ دەردەکەوێت. بۆ وىو

. Ferbuni HTMLىوسراوە Title barوێبگەڕێک ئەو پەرگەیەهاى کردەوە دەبییت لە

لە ێىاى تاگەکایbody ـذا ئەوە دەىوسیي کە دەهاەوێت لە ێى پەڕەکەدا دەربکەوێت، وەک دیارە لە سەرەوە لە

". Yekem babet le ferbuni HTMLپەرەگرافذا ىوسیىهاە "ێىاى تاگی

DTD

Document Type Definition :کە لە سەرەتای هەهىو کۆدەکاذا دێت سێ جۆری هەیە

XHTML 4 Strict وەضاێکی داهاڵڕاویHTML ـە لەو تایبەتوەذییاەی کە لە وەضای چىاریHTML ـذا

وە ەهاوى و لە بایەخیاى کەهکراوەتە

Page 7: Learn HTML in Kurdish

ـەوە و اتەوێت CSSئەم جۆرە بەکارببە گەر ئەتەوێت بۆ دەرکەوتي و ڕووخساری هاڵپەڕەکەت بە تەواوی پەیىەست بیت بە

بەم ضێىەیەیە: XHTML 1.0 Strictبۆ DTDسىود لە تاگە بێ بایەخەکاى وەربگریت.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 4 Transitional بەرباڵوتریي جۆریاە کە ىوسەر دەتىاێت سەرەڕایCSS ـیص تاگە بێ

ى بەکار ببات. بایەخەکا

و تاگەبێ بایەخەکاى CSSئەم جۆرە بەکارببە گەر ئەتەوێت بۆ دەرکەوتي و ڕووخساری هاڵپەڕەکەت سىود لە هەردوو

بەم ضێىەیەیە: XHTML 1.0 Transitionalبۆ DTDوەربگریت.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 4 FRAMESET وەک هەهاى جۆریTransitional ـە لەم جۆرەدا تاگیframeset جێگەی

دەگرێتەوە. bodyتاگی

XHTML 1.0 FRAMESETبۆ DTDىارچێىەیەک. ئەم جۆرە بەکارببە گەر دەتەوێت پەڕەکە دابەش بکەیت بۆ سەر چەذ چ

بەم ضێىەیەیە:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

تاگ/تایبەتوەذی/تىخن ـە بێ بایەخەکاى

ـەوە ەهاوى لەبەر بێ بایەخییاى یاى لەبەر تىایی ئەجاهذای هەهاى HTML 4.01ئەو تاگ/تایبەتوەذی/تىخن ـاەى کە لە

ئەو تاگاە ئەکەى، بەاڵم ـەوە. لە جێگەیاى تاگی ىێتر داراوى. کە تا ئێستا وێبگەڕەکاى پطتگیری CSSکاریگەری بە هۆی

لە داهاتىودا لەواەیە بە تەواوەتی ەهێي و هیچ کاریگەرییەکی پیطاذایاى ەهێێت لەسەر پەڕەکاى. بۆیە وا باضترە

بەرابەرەکایاى بەکارببرێي. هەذێک لەواە:

البردی تىخویfont البرا بە هۆی بىویfamily, color-size, font-font لەCSS .

تایبەتوەذیalign کە بۆ اوەذکردى یاى کردە الی ڕاست و چەپی دەقێک بەکاردێت. رخەکایright,

center, left, justify ـە لە بری ئەوە دەبێتalign-text .لە ستایڵ ضیت بەکار ببرێت

تىخویu ە ستایڵ ضیت بۆ هێڵبەژێرداهێاى لdecoration:underline-text; .ئەو کارە دەکات

Page 8: Learn HTML in Kurdish

تاگیapplet کە بۆ کارپێکردی پڕۆگراهۆکەکای جاڤا بىو گۆڕدرا بەobject .

Paragraph –پەرەگراف

بەکاردێت بۆ دیاریکردی دەقێک وەک پەرەگراف و اوەڕۆکی تىخن وەک پەرەگراف دەاسێێت. لەبەر ئەوەی ئەم pتىخوی

تىخوە کاریگەرییەکی دیاری ییە لەسەر دەق، هەذێک لە ىوسەراى بیریاى ئەچێت ئەم تىخوە بەکاربەرى بۆ پەرەگراف یاى

تاگی کۆتایی دابخەى. وىوە:

<p>Em deqe peregirafe boye le new tuxmi p nusrawe.</p>

<p>Min etwanim bichme ser

helli nwe u chend derreki tir

l peregirafekem binusim u le

kotayida tagi kotayi dabixemewe</p>

<p class="sereki" dir="rtl"> لەم پەرەگرافەدا ئەتوامن بە پیتی عەرەبی

<p/>بنووسم

ستایڵ تا بە serekiـواى داوەتێ و اساذووهاە بە classلە وىوە سێیەهذا دوو تایبەتوەذیواى داوەتە تىخوەکە، تایبەتوەذی

ـی پەرەگرافەکە. تایبەتوەذی دووەهیص بۆ … ضیت گۆڕاکاری بەسەردا بهێیي، وەک گۆڕیی ڕەگ، قەبارە، فۆت،

ئاڕاستەی ىوسیواى گۆڕیىە بە لە ڕاستەوە بۆ چەپ.

Heading –سەردێڕ

اویطای بابەت یاى پەڕەیەک ( بەکاردێت بۆ ىوسیی سەردێڕ/h1, h2, h3, h4, h5, h6تىخن پێک هاتىوە ) ٦سەردێڕ لە

و CSSچىکە کاتێک وێبگەڕ ئەم تىخوە دەبیێت هەڵذەستێت بە تۆخکردى و گەورەکردی قەبارەی اوەڕۆکی تىخن واتە بێ

بچىکترییاە. h6گەورەتریي و h1هیچ تایبەتوەذییەک.

<h1>Mallperri Chawg</h1>

<h2 class="nawnishan">Ferbuni HTML</h2>

: هەردوو تىخوی سەردێڕ و پەرەگراف لە پەڕەیەکذا: ١وىوە

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Ferbuni HTML le mallperri chawg</title>

</head>

<body>

Page 9: Learn HTML in Kurdish

<h1>Mallperri Chawg</h1>

<h2 class="nawnishan">Ferbuni HTML</h2>

<h3>Waney yekem</h3>

<p>Serderr le 6 tuxim pekhatun h1 gewretiriniyane u h6 bichuktiriniyane,

bekardet

bo nusini nawnishani babet u perre. Tuxmekani header gorrankari toxi u

gewreyi

qebare edat be nawerroki tuxim.</p>

</body>

</html>

ئەم کۆدەی سەرەوە لە دەستکاریکەرێکذا بىوسە و بە وێبگەڕ پەڕەکە بکەرەوە تا ئەجاهەکەی ببییت. بیىوسە! ڕووىوسی

هەکە تا فێربیت!

Link -بەستەر

تىخوی بەستەر

گرگتریي و زۆرتریي تىخوی بەکاربراوە کە بریتییە لە بە اویطاکردی دەقێک کە بە کرتەکردى لێی بەکارهێەر ڕەواە

دەکرێت بۆ ئەو اویطاەی تیایذا ىوسراوە. بە ضێىەیەکی سادە تىخوەکە بریتییە لە:

<a href="http://www.chawg.org/wiki/chawg">Chawg</a>

تىخویa /لەگەر(anchor .بەکاردێت بۆ دروستکردی بەستەر )

اوی تایبەتوەذیhref ( واتەHypertext reference( دەبێت رخەکەی اویطای ئەو بەستەر )URL ـە بێت )

hrefکە دەتەوێت بەکارهێەری بۆ ڕەواە بکەیت. بەستەر دروست ابێت بە بێ تایبەتوەذی

" اوەڕۆکی تىخن ئەو دەقە دەبێت کە وەک بەستەر دەردەکەوێت کە لێرەداMallperri Chawg .ـە "

کردەوە لە ضىێێکی دیاریکراو

ـە کە بەکاردێت بۆ پێذای ضىێێکی دیاریکراو بۆ کراەوەی target تایبەتوەذی hrefگرگتریي تایبەتوەذی لە پاش

بەستەر تیایذا وەک کراەوە لە پەجەرەیەکی ىێذا یاى لە چىارچێىەیەک لە هەهاى پەڕە و پەجەرەدا )کاتێک پەڕەکە

دابەضکرابێت بۆ چەذ چىارچێىەیەک(

:کردەوە لە پەڕەیەکی ىێذا

Page 10: Learn HTML in Kurdish

<a target="_blank" href="http://www.chawg.org">Chawg</a>

:کردەوە لە چىارچێىەیەکذا

<a target="rightframe" href="http://www.chawg.org">Chawg</a>

rightframe .اوی ئەو چىارچێىەیە دەبێت کە لە پەڕەکەدا هەیە

بەستەر بۆ دەقێک لە هەهاى پەڕەدا

چىارچێىەیەک لە سەرەوە دەبییت ىوسراوە "اوەڕۆک" بە کرتەکردى لە هەر بەستەرێکی او چىارچێىەکە دەگەیتە

ضىێێک لە هەهاى ئەم پەڕەیەدا. ئەهە بریتییە لە بەستەرکردى بۆ دەقێک کە لە هەهاى پەڕەی بەستەرەکەدا هەیە. بۆ وىوە

ە بکە" دەهەوێت بیکەهە بەستەر و ڕەواەی ئەو دەقەی سەرەوەی بکەم کرتە لێر DTDهي دەىوسن "بۆ خىێذەوە لەسەر

کە بەم ضێىەیە دەبێت:

:ئەبێت اویطاێک بذەم بەو دەقەی ئەهەوێت بەستەری بۆ بکرێت

<a name="DTD">DTD</a>

ی رخی ـ DTD. وضەی nameئەهە کۆدی ئەو ىوسراوەیە کە لە سەرەوە ىوسراوە ئەویص بە پێذای تایبەتوەذی

اوەڕۆکی تىخن ا(. DTDتایبەتوەذییەکەش، اویطاەکەیە )

:بەستەر بەم ضێىەیە دەىوسرێت

<a href="#DTD"> لەسەر ندنەوەێخو ۆب DTD بکە رەێکرتە ل </a>

Image –وێە

تىخوی وێە یەکێکە لەو تىخواەی کە لە تاگێک پێکهاتىوە و خۆی خۆی دائەخاتەوە. تىخوەکە پێکهاتىوە لە:

<img src="http://domain.com/image.png" />

srcتایبەتوەذی

Page 11: Learn HTML in Kurdish

( ـی وێەکە بێت. ئەگەر pathەتوەذی پێىیستە ڕێڕەو )تایبەتوەذی بەڕەتی تىخوی وێەیە. رخی تایب srcتایبەتوەذی

. لەاو بىخچەی imagesو ئەوی تر filesلە اویذا دوو بىخچەی تر بە اوەکای mywebبىخچەیەکواى هەبێت بە اوی

files ـیطذا بىخچەیەکی ترهاى هەبێت بە اویthumbs :بەم ضێىەیە .

/wene1.jpg

/myweb/wene2.jpg

/myweb/files/perre.html

/myweb/files/thumbs/wene3.jpg

/myweb/images/wene4.jpg

. دەبێت wene3.jpgـەوە بەستەر بکەیي بۆ perre.htmlگەر پێکهاتە پەڕگەکاواى وەک ئەوەی سەرەوە بێت و بواەوێت لە

بەم ضێىەیە ڕێڕەوەکە بىوسیي:

<img src="thumbs/wene3.jpg" />

، بەم ضێىەیە دەبێت: wene2.jpgبەاڵم ئەگەر بواەوێت بەستەر بکەیي بۆ

<img src="../wene2.jpg" />

ـذایە کە بىخچەیەک سەرووترە بۆیە دەبێت mywebـذایە وێەکە و لە بىخچەی filesلەبەر ئەوەی پەڕگەکە لە بىخچەی

، ئەوە دوو جار خاڵەکاى دا wene1.jpgسەرووتر بىو وەک وێەی دوو خاڵ دابێیي لەپێطی. ئەگەر وێەکە دوو بىخچە

دەێیي، وەک:

<img src="../../wene1.jpg" />

بەم ضێىەیە دەبێت: wene4.jpgوە بەستەر بۆ

<img src="../images/wene4.jpg" />

دەضتىایي لە ڕێڕەوی بەستەرەکە اویطاێکی تەواوەتی بىوسیي، وەک:

Page 12: Learn HTML in Kurdish

<img src="http://domain.com/uploads/images/wene5.jpg" />

ـی تىخوی وێە altو titleتایبەتوەذییەکای

titleو altتایبەتوەذییەکای

لەیەکەوە. هەهیطە بەکارهێەر لێی تێک دەچێت کە کاهیاى بەکار دوو تایبەتوەذی سیکي titleو altتایبەتوەذییەکای

کە چیتر بىوەتە تایبەتوەذییەکی گرگ و پێىیست. پیطاى دەدرێت، کاتێک وێبگەڕ altببات لە تىخوەکەدا. تایبەتوەذی

لە چەذ وضەیەکی کەم پاڵپطتی پیطاذای وێە اکات یاى بەکارهێەر وای کردووە کە وێە پیطاى ەدرێت. ئەویص بریتییە

وەک دەقێکی جێگرەوە بۆ وێەکە تا بەکارهێەر لە اوەڕۆکی وێەکە تێ بگات.

<img src="http://domain.org/ferbunihtml.png" alt=" هتمل ربوونیێف " />

کە بەکارهێەر کاتێک پیطاى دەدرێت title. رخی تایبەتوەذی altتایبەتوەذییەکی جیایە لە titleبەاڵم تایبەتوەذی

یطاذەری هطکەکە دەباتە سەر وێەکە. دەتىایت هەردوو تایبەتوەذییەکە لە هەهاى تىخوی وێەدا دابێیت، بەاڵم ضارەزایاى

ـیص کاتێک بەکارببرێت کە titleبەکارببرێت بۆ هەهىو وێەیەک و تایبەتوەذی altوا ئاهۆژگاری دەکەى کە تایبەتوەذی

اویطای پەرە بەستەربۆکراوەکە بىوسیي. titleبۆ الپەڕەیەک و لە رخی تایبەتوەذی وێە بەستەر بێت

<a href="http://www.chawg.org/wiki/index.php?title=HTML">

<img src="http://chawg.org/images/html_wiki_chawg.png" alt=" ربوونیێف

"=title "هتمل کوردی بە هتمل زمانی ربوونیێف " /></a>

تێبیی: لەم وىوەیەی سەرەوە تىخوی وێە بىوەتە اوەڕۆکی تىخوی بەستەر کە لێرەدا وێەکە دەبێتە بەستەر.

Widthو Heightتایبەتوەذییەکای

Page 13: Learn HTML in Kurdish

ـیص بەرزی و پای وێەکە دیاری دەکەى کە دەتىایت قەبارەی وێەکەی پێ زیاد widthو heightهەردوو تایبەتوەذی

ـی پەرەکە کاتێک پەڕەکە خەریکە layoutیت. دیاریکردی پای و بەرزی وێەکاى دەبە هۆی تێک ەچىوی یاى کەم بکە

ەبىوى. وىوەیەک کە هەهىو تایبەتوەذییەکای لەخۆ گرتىوە: loadدەکرێتەوە و وێەکاى بەتەواوی

<img src="http://domain.org/ferbunihtml.png" alt=" هتمل ربوونیێف "

title=" بەکوردی هتمل زمانی بوونیێف " height="100" width="140"/>

List –لیست

HTMLجۆرەکای لیستی

ـذا سێ جۆر لیستواى هەیە. یەکەم، لیستی ڕیسکراو. دووەم، لیستی ڕیسەکراو. سێیەم، لیستی پێاسە. HTMLلە

Ordered List -لیستی ڕیسکراو

ێت بۆ دیاریکردی ئەم جۆرە لیستە. بەکاردەبر olلەم لیستەدا داەکای لیست بە ژهارە یاخىد پیت ڕێکذەخرێي تىخوی

ـیەوە. وىوە: liداەکای هەردوو لیستی ڕیسکراو و ڕیسەکراو دەخرێە ێى تىخوی

<ol type="a">

<li> ١ یسکراویڕ </li>

<li> ٢ یسکراویڕ </li>

<li> ٣ یسکراویڕ </li>

</ol>

Page 14: Learn HTML in Kurdish

بۆ ڕیسکردی ڕۆهای Iبۆ پیت گەورە، Aبچىک، بۆ ڕیسکردى بە پیتی aدابێیي. لەواە typeدەتىایي چەذ رخێک بۆ

بەکاردێت بۆ دیاریکردی دەستپێکردی لیستەکە لە ژهارەیەکەوە. رخی startـیص بۆ بچىک. تایبەتوەذی iگەورە و

تایبەتوەذی هەهیطە دەبێت ژهارەی ئیگلیسی بێت ئەگەر چیص جۆری ڕیسکردەکە پیت یاى ژهارەی ڕۆهای بێت، وەک:

<ol type="a" start="4">

<li> ١ یسکراویڕ </li>

<li> ٢ یسکراویڕ </li>

<li> ٣ یسکراویڕ </li>

</ol>

"start="d. هەڵەیە ئەگەر بىوسیي Eـیەوە دەستپێذەکات هەتاوەکى Dلێرەدا ڕیسکردەکە لە پیتی

Unordered List -لیستی ڕیسەکراو

ulلەم لیستەدا داەکاى ڕیسەکراوى و لە پێص هەر داەیەک خاڵێک، بازەیەک یاى دیسکێک دادەرێت. تىخوی

بەکاردەبرێت بۆ دیاریکردی لیستەکە. وىوە:

<ul>

<li> ١ یسنەکراویڕ </li>

<li> ٢ یسنەکراویڕ </li>

<li> ٣ یسنەکراویڕ </li>

<li> ٤ یسنەکراویڕ </li>

</ul>

لە لیستی ڕیسەکراودا بەکاردێت بۆ دیاریکردی ئەوەی کە چ هێوایەک لە پێص داەکای لیستەکەدا بێت. typeتایبەتوەذی

وىوە:

<ul type="circle">

<li> ١ یسنەکراویڕ </li>

<li> ٢ یسنەکراویڕ </li>

</ul>

لە تایبەتوەذییە البراوەکاي. startو typeتێبیی: هەردوو تایبەتوەذی

Definition List –اسە لیستی پێ

Page 15: Learn HTML in Kurdish

ـیەوە و پێاسەی دەستەواژەکەش لە dtئەم لیستە پێکذێت لە دەستەواژەیەک و پێاسەکەی. دەستەواژە دەکرێتە ێى تىخوی

= dt =definition Term, ddـەوە. dlـذا. هەردووکیطیاى پێکەوە دەکرێە ێى تىخوی ddدوای ئەو دێت لە ێى تىخوی

Definition Description, dl = Definition List

وىوە:

<dl>

<dt> زۆنەور </dt>

<dd> کوردییە یڵیەکەمین مانگی سا .</dd>

<dt>سەگ</dt>

<dd> بەوەفایە کیێگیاندار .</dd>

</dl>

Table -خطتە

وەک لە تىخوەکای تر، بەاڵم پاش تێگەیطتی دەبییي تاگ و تىخوەکاى لە پێکهێای تىخوی سەرەکی خطتە کەهێک چڕترى

هیچ ئاڵۆزییەکی تیادا ییە.

<table border="1" >

<tr>

<td> ١ یسیڕ، ١خانەی </td>

<td> ١ یسیڕ، ٢خانەی </td>

<td> ١ یسیڕ، ٣خانەی </td>

</tr>

<tr>

<td> ٢ یسیڕ، ١خانەی </td>

<td> ٢ یسیڕ، ٢خانەی </td>

<td> ٢ یسیڕ، ٣خانەی </td>

</tr>

<tr>

<td> ٣ یسیڕ، ١خانەی </td>

<td> ٣ یسیڕ، ٢خانەی </td>

<td> ٣ یسیڕ، ٣خانەی </td>

</tr>

<table>

ئاسۆ. کە ئەم تىخواەی تیا دەبییي: ٣و ستىوى ٣خاەیی دروست دەکات، پێک هاتىوە لە ٩وىوەکەی سەرەوە خطتەیەکی

Page 16: Learn HTML in Kurdish

تىخویtable .تىخوی سەرەکییە لە پێکهێای خطتەکە :

تىخویtr( واتە هەر ئاسۆیەکی خطتەکە :ableT owR کە بەکاردێت بۆ پێکهێای هەر دێڕێک یاى ئاسۆیەک لە )

ـەوە.( table)دەکەوە ێى تىخوی tableاوەڕۆکی تىخوی خطتەکە. ئەم تىخواە بریتیي لە

تىخویtd( واتە هەر تاکە خاەیەک :ableT ataD کە بەضذاری دەکەى لە پێکهێای سەراپای خطتەکە. ئەم )

ـەوە.( tr)دەکەوە ێى تىخوی trتىخواە بریتیي لە اوەڕۆکی تىخوی

تێبیی:

تایبەتوەذیborder رێت تا چىارچێىەی خطتەکە دیاری بکات. پێىیستە بىوس

هەذێک جار وا پێىیست دەکات ئاسۆی یەکەهی خطتە وەک سەردێڕ لێ بکەیت. ئەهەش ئەجام دەدرێت بە داای

ـیەکاى. کە کاریگەری تۆخکردى و اوەذکردى دەداتە دەقی ێى خاەکە. وەک لە وىوەی tdلە بری thتىخوی

داهاتىودا بەکاربراوە.

ەایبەتوەذییەکای خطتت

HTMLزۆریەی ئەو تایبەتوەذییاەی پاڵپطتی لە تىخوەکای خطتە ئەکەى، لە بێ بایەخەکاي یاى چیتر لە وەضاە ىێیەکای

)کە لەو . تایبەتوەذییە گرگەکای خطتە ئەهاەىheight ,bgcolor, nowrap, Alignیي. لەواەش وەک: Validـذا

کۆدەی خىارەوە هەهىویاى بەکاربراوى(: پارچە

تایبەتوەذیborder .بۆ دیاریکردی قەبارەی سىورەکای خطتەکە :

تایبەتوەذیwidth .بۆ دیاریکردی قەبارەی خطتە و خاەکاى :

تایبەتوەذیpadding-cell بۆ دوورخستەوە ىوسراوی ێى خاەکاى لە لێىاری خاەکای خطتەکە. ئەگەر :

خاڵ )پیکسڵ( دادەرێت ١تایبەتوەذییە ەىسرێت بە ضەوەیەکی بەڕەت رخەکەی بە ئەم

تایبەتوەذیspacing-cell بۆ کەهکردى و زیادکردی بۆضایی ێىاى لێىاری خاەکاى. بۆ دوورخستەوە :

وەیەکی بەڕەت ىوسراوی ێى خاەکاى لە لێىاری خاەکای خطتەکە. ئەگەر ئەم تایبەتوەذییە ەىسرێت بە ضە

خاڵ )پیکسڵ( دادەرێت. ٢رخەکەی بە

تایبەتوەذیcolspan بەکار دێت بۆ درێژکردەوەی خاەیەکی ئاسۆیی بەدرێژایی چەذ خاەیەکی دیاریکراوی :

ستىوی.

تایبەتوەذیrowspan بەکار دێت بۆ درێژکردەوەی خاەیەکی ستىوی بەدرێژایی چەذ خاەیەکی دیاریکراوی :

اسۆیی. ئ

<table border="1" width="800" cellpadding="3" cellspacing="0">

<tr>

<th colspan="2"> ١ یسیڕ، ٢و ١خانەی </th>

<th> ١ یسیڕ، ٣خانەی </th>

</tr>

Page 17: Learn HTML in Kurdish

<tr>

<td rowspan="2"> ٣ و ١ یسیڕ، ١خانەی </td>

<td width="15%"> ٢ یسیڕ، ٢خانەی </td>

<td> ٢ یسیڕ، ٣خانەی </td>

</tr>

<tr>

<td> ٣ یسیڕ، ٢خانەی </td>

<td> ٣ یسیڕ، ٣خانەی </td>

</tr>

<table>

بەکاردێت بۆ ضاردەوە و بەدیارخستی rules. تایبەتوەذی frameو rulesدوو تایبەتوەذی تریص هەى، ئەوایص

ـیص بۆ هێڵەکای frame. تایبەتوەذی rows ,cols ,all ,noneهێڵەکای ێىاى خاەکاى کە ئەم رخاە وەردەگرێت:

. above ,below ,lhs ,rhs ,hsides ,vsides ,borderچىارچێىەی خطتەکە، ئەم تایبەتوەییاە وەردەگرێت:

box ,viod :وىوە .

<table rules="all" frame="hsides">

<tr>

<td> ١ یسیڕ، ١خانەی </td>

<td> ١ یسیڕ، ٢خانەی </td>

<td> ١ یسیڕ، ٣خانەی </td>

</tr>

<tr>

<td> ٢ یسیڕ، ١خانەی </td>

<td> ٢ یسیڕ، ٢خانەی </td>

<td> ٢ یسیڕ، ٣خانەی </td>

</tr>

<table>

ئەجام بذرێي. CSSتێبیی: کاریگەرییەکای وەک گۆڕیی قەبارە، جۆر و ڕەگی فۆت، خطتە و خاەکاى دەبێت بە

Form -فۆرم

ۆڕهی پەیىەذی، فۆڕهی چىوەژوورەوە... فۆڕم بەکاردێت بۆ داغڵکردى و اردی زایاری لەالیەى بەکارهێەرەوە، وەک ف

... ـي. textarea ,input ,selectلەاو فۆڕهذا، تىخوەکای فۆڕم دەىوسیي، کە ئەوایص

Page 18: Learn HTML in Kurdish

<form action="contact.php" method="get">

</form>

دەبێت بۆ کارپێکردی فۆڕهەکە. وەک زهاێکی بسۆکـذا اکارایە و تەها پیطاذاە، بۆیە پێىیستواى بە HTMLفۆرڕم لە

ـیص کە methodهاە بسۆکەکەوە. تایبەتوەذی فۆڕهەکەی پەیىەست کردووە بە ز actionلەسەرەوە دەبییت تایبەتوەذی

ـذا. URLبۆ پیطاذای زایارییەکاى بەکاردێت لە getبۆ ضاردەوە و postـی هەیە، postو getهەردوو رخی

input -تێکردى

input زۆرتریي تاگی بەکاربراوی تىخوی فۆڕهە. کە دەتىایي بەپێی رخی تایبەتوەذییtype جۆری ئەو فۆڕهەکەی

, text ,password ,fileکە جۆری فۆڕهەکە دیاری دەکەى، ئەهاەى: typeدیاری بکەیي. رخەکای تایبەتوەذیی

checkbox ,radio ,submit ,reset ,button ,hidden ,image

چۆێتی بەکارهێایاى )کۆدەکە لە پەڕگەیەکذا ڕووىوش بکە تا دەرەجاهەکایاى ببییت(:

<input type="text" name="username" /><br />

<input type="password" name="pass" /><br />

<input type="file" name="uploader" /><br />

<input type="submit" name="submitbtn" value="Send" />

<input type="reset" name="resetfields" value="Clean Fields" /><br />

<input type="checkbox" checked="checked" name="remembermechbx" /><br />

<input type="radio" name="radiobtn" value="Male" />

<input type="radio" name="radiobtn" value="Female" /><br />

<input type="button" name="custombtn" value="A Custom Button" /><br />

<input type="image" name="img" value="sent" src="images/send.png"

alt="Send (image button)" /><br />

<input type="hidden" name="hiddenfld" value="usr955" />

text - ...خاەیەکی تاک هێڵییە بەکاردێت لەکاتی داغڵکردی او، تێپەڕەوضە، ئیوەیل

password - ێىەی بەهەهاى ضtext .بەاڵم لەکاتی ىوسیی تێپەڕەوضەدا بەکاردێت تا وضەکاى بطاردرێەوە

file - بۆ بارکردی پەڕگەیەک لە کۆهپیىتەری بەکارهێەرەوە، وەک لەuploader .ـەکاذا

submit - .دوگوەیەکە لە فۆڕهەکەدا بەکاردێت لە اردی زایارییەکای ێى فۆڕهەکە

reset - ۆ بەتاڵکردەوەی ئەو زایارییاەی بەکارهێەر لەێى فۆڕهەکەدا ىوسیىیەتی. بەکاردێت ب

checkbox - بەکاردێت لە هەڵبژاردذا. کاتێک چەذ هەڵبژاردێک دیاری کراوە و بەکارهێەر دەتىاێ زیاد لە

داەیەک هەڵبژێرێت.

Page 19: Learn HTML in Kurdish

radio - راوە و بەکارهێەر دەتىاێ تەها یەکێک بەکاردێت لە هەڵبژاردذا. کاتێک چەذ هەڵبژاردێک دیاری ک

هەڵبژێرێت.

button - دوگوەیەکە، بەاڵم ئەم زایاری ێى فۆڕهەکە اێرێت بۆ ڕاژە، بەڵکى پێىسیتە بە سکریپتێکی وەک

جاڤاسکریپتەوە ببەسرێتەوە بۆ کارپێکردی ڕاستەوخۆی سکریپتەکە.

image - دوگوەیەکی اردە وەکsubmit ە. بەاڵم بە وێ

hidden - خاەیەکی ضاراوەیە کە بەکارهێەر ایبیێت. بەزۆری بەکاردێت کاتێک فۆڕم لە چەذ پەڕەیەک

پێکهاتىوە و پێىیستە زایارییەکای پەڕەی یەکەم پاضەکەوتبکرێي و هەڵبگیرێي بۆ پەڕەکای تر.

بەکاردەهێیي: بۆ وىوە لە دروستکردی فۆڕهێکی چىوەژوورەوە، بەم ضێىەیە فۆڕم

<form action="login.php" method="post">

Username: <input type="text" name="username" /><br />

Password: <input type="password" name="password" /><br />

<input type="checkbox" name="rememberchkbox" value="autologin"

/>Automatically log me in every time I visit.

<br />

<input type="submit" name="submitit" value="Submit Data" />

</form>

textarea -ڕووبەري دەق

textarea خاەیەکی گەورەیە بۆ ىوسیی دەقێکی زۆر بەکاردێت. بە پێچەواەی تىخویinput ،ـەوەtextarea تاگی

بىوسیت بۆ دیاریکردی بەرزی و پای خاەکە. colsو rowsسەرەتا و کۆتایی هەیە . وە پێىستە تایبەتوەذییەکای

<textarea name="postfield" rows="10" cols="50">Deqeket lere

binuse</textarea>

هەردوو تایبەتوەذییreadonly وdisabled دێت بۆ اچاالککردی خاەکە و ەهێطتی دەستکاریکردی بەکار

لەالیەى بەکارهێەرەوە. وەک ئەم وىوەیە:

<textarea name="postfield" rows="10" cols="50"

readonly="readonly">Natiwanit destkari em deqe bikeyt</textarea>

Drop Down

Page 20: Learn HTML in Kurdish

Drop Down بۆ دیاریکردی داەیەک یاى زیاتر، وەک لیستێکە لە کۆهەڵێک هەڵبژاردىradio وcheckbox بەاڵم بە

ضێىەیەکی کۆکراوە.

. بەم optionبەکاردەهێیي بۆ دروستکردی لیستەکە، لە ێى لیستەکەضذا بۆ هەر هەڵبژاردێک تىخوی selectتىخوی

ضێىەیە:

<select name="dropdownlist">

<option value="ku">Kurd</option>

<option value="en">English</option>

<option value="fr">French</option>

</select>

تایبەتوەذیmultiple="multiple" بەکاردێت بۆ دیاریکردی زیاد لە هەڵبژاردێک لە لیستەکە. هەروەها

یص بۆ اچاالککردی لیستەکە. disableتایبەتوەذی

دەتىایي هەڵبژاردەکاى بکەیە دەستە دەستە بە بەکارهێای تاگیoptgroup :بەم ضێىەیە .

<select name="countrieslist">

<optgroup label="Middle East">

<option value="ir">Iran</option>

<option value="iq">Iraq</option>

<option value="jo">Jordan</option>

<option value="sa">KSA</option>

</optgroup>

<optgroup label="Europe">

<option value="es">Spain</option>

<option value="fr">France</option>

<option value="de">Germany</option>

<option value="it">Italy</option>

</optgroup>

<optgroup label="Asia">

<option value="jp">Japan</option>

<option value="cn">China</option>

<option value="in">India</option>

<option value="id">Indonesia</option>

</optgroup>

</select>

div وspan

Page 21: Learn HTML in Kurdish

div وspan بەکاردێي وەک لە پۆلپۆلکردی کۆهەڵێک دەق و کاریگەری پێذایاى بەهۆیCSS تاگی .div وەک

لەێى هێڵذا. spanپەرەگراف کاتێک دەدرێت بە دەقێک، هێڵێک پێص خۆی و هێڵێک پاش خۆی جێ دەهێڵێت بەاڵم

class ,id ,styleتایبەهەذییەکایاى بریتیي لە

وىوە:

<div class="honrawenus">

Qani' nawi Mihemmed Kabuliye. le salli 1905 le gundi shiler ledayk buwe u

salli 1965 be nexoshimirduwe. pallpishti chini cutiyar u hejaran buwe her

boye nasrawe be sha'iri chewsawekani Kurdistan

</div>

: spanبەاڵم

<p>Kotiri <span style="color:#ffffff">sipi</span> hemay ashtiye.</p>

<p>Zanisteki <span style="font-weight:bold;">dirisht</span> u <span

style="text-decoration:underline;">kirawe</span>.</p>

بەکاردێیي، ئەگەر بواەوێت کاریگەری بذەیە وضەیەک یاى چەذ وضەیەکی ێى دێڕێک. spanواتە کاتێک

headێى تىخوەکای

داى. ئەم تىخواە بەکارهێەر ایاى بیێت بەاڵم <head></head>کۆهەڵێک تىخوي لەێى تاگی headتىخوەکای ێى

کاریگەری گرگیاى هەیە لەسەر پەڕەکە و وێبگەڕ و بسوێەرەکای گەڕاى سىود لەم تىخواە وەردەگرى.

metaتىخوی

ەسەر جۆر، ىوسەر، پەسي و وضەکلیل... بەکاردێت بۆ پێذای زایاری ل metaتىخوی

بەکارهێای تایبەتوەذییequiv-http وcontent

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

(ی پەڕەکە یاى ڕێکخستی کاضکردى. لە تایبەتوەذی refreshبەکاردێت لە بىژاذەوە ) equiv-httpتایبەتوەذی

content .یص چارسێت/ئیکۆدیی پەڕەکە دیاری دەکات. ئەو دێڕەی سەرەوە لە هەهىو پەڕەیەکی ئاساییذا بەکار دەبرێت

بکات چەذ چرکە جارێک یاى ئاڕاستەی بکەیي بۆ پەڕەیەکی تر رخی refreshضێىەیەکی تر ئەگەر بواەوێت پەڕەکە

Page 22: Learn HTML in Kurdish

یص بۆ ژهارەی چرکەکاى لەگەڵ اویطای contentو رخی refreshدەگۆڕیي بۆ equiv-httpتایبەتوەذی

بەستەرەکە. بۆ وىە:

<meta http-equiv="refresh" content="60" /> <!-- 60 chirke carek perreke

refresh ekat-->

<meta http-equiv="refresh" content="10;http://chawg.org/meko" /> <!-- le

diway 10 chirke perreke arraste dekret bo besteri chawg.org/meko-->

بەکارهێای تایبەتوەذی وضەکلیل و پەسي

( بەکاردێت بۆ اساذی هاڵپەڕەکەت لە چەذ وضەیەکذا کە بە کۆها لێک جیاکراوەتەوە، پەسیص keywordsوضەکلیل )

(description بە هەهاى ضێىە بۆ اساذی هاڵپەڕ یاى پەڕەیەک لە هاڵپەڕەکە ) بەکاردێت لە ڕستەیەکذا. بەم ضێىەیە لەێى

head :دا دەىوسرێي

<meta name="keywords" content="chawg, mallperri chawg, بە ڵهتم, شنتڕبداێو

کوردی بە پی چێئ پی, کوردی بە شێئ شێئ سی, کوردی " />

<meta name="description" content=" بە گرنگی ئایتییە، کیڕێپەڵچاوگ ما

دەدات شنتڕبداێو و سەچاوەکراوە بوارەکانی " />

پێطتر بسوێەرەکای گەڕاى ئەم دوو تایبەتوەذییەیاى بەکاردەهێا بۆ ڕیسکردی هاڵپەڕەکاى لە ئەجاهی گەڕاەکایاذا. کاتێک

بسوێەرەکاى ئەو هاڵپەڕاەیاى دادەا بە ئەجاهی گەڕاى کە وضەکەی تیادابىو، بەاڵم بەکارهێەرێک بۆ وضەیەک دەگەڕا

لەبەر خراپ بەکارهێای ئەو دوو تایبەتوەذییە، ئەهڕۆ زۆربەی بسوێەری گەڕاەکاى فەراهۆضیاى کردووى. خراپ

ێت پێی یاى ىوسیی دەیاى وضە بۆ بۆ بەکارهێاى واتا ىوسیی وضەیەک لە وضەکلیل و پەسذا کە هاڵپەڕەکەت تایبەت ەب

زۆرکردی هەلی دەرکەوتی هاڵپەڕەکەت لە بسوێەرەکای گەڕاذا کە ئەهەش کاریگەری ەرێی دەبێت و دەبێتە هۆی

ئەوەی هاڵپەڕێک لە گەڕاەکاذا دەربکەوێت کە هیچ پەیىەذی بەو بابەتەوە ەبێت کە بەکارهێەر بۆی گەڕاوە.

linkتىخوی

. Faviconو CSSـەکەوە، وەک تێهەڵکێطکردی HTMLردێت بۆ بەستەوە و تێهەڵکێطکردی پەڕگەیەک بە پەڕە بەکا

تێهەڵکێطکردی ڕووخسار

<link rel="stylesheet" type="text/css"

href="http://www.mallperr.com/ruxsar.css" />

تێهەڵکێطکردیFavicon

Page 23: Learn HTML in Kurdish

<link rel="Shortcut Icon" type="image/ico" href="PATH/TO/favicon.ico" />

XHTML

eeXtensible HyperText Markup Languag داڕضتەوەی هەهاىHTML ـە بە پابەذبىوى بە بەهاکایXML

. W3Cـەوە کە دواتر بىوە بە پەسەذکراوی

XHTMLو HTMLجیاوازی ێىاى

بە درووستی لەسەر ڕێساکای XHTMLـذا هەیە ئەوەیە کە ئەبێت بەڵگەاهەکای XHTMLو HTMLئەو جیاوازیاەی لە ێىاى

XML :ىوسرابي، ئەوایص لەهاەدا خۆی دەگرێتەوە

.ئەو تاگاەی تاگی کردەوە و داخستەوەیاى هەیە پێىیستە هەردووکیاى هەهىو تاگ و تىخوەکاى داخرابەوە

بىویاى هەبێت، بۆ وىوە:

ادروست:

<h1>Eme headere<h2>Emesh headereki tir

دروست:

<h1>Eme headere</h1><h2>Emesh headereki tir</h2>

.وەک پێطتر وتواى هەذێک لە تاگەکاى تاکي و تاگی داخستەوەیاى ییە، بۆیە پێىیستە تاگە تاکەکاى دابخرێەوە

تاگەکە لە او خۆیذا خۆی دابخاتەوە.

ادروست:

<br>

دروست:

<br />

.ئەو تاگەی یەکەم جار دەکرێتەوە لە کۆتایی گەر چەذ تاگێک بە دوای یەکذا هاتي، پاش و پێص ەخستی تاگەکاى

هەهىو تاگەکای تر دابخرێتەوە.

اردوست:

Page 24: Learn HTML in Kurdish

<strong><em>blod and italic</strong></em>

دروست:

<strong><em>blod and italic</em></strong>

لەو کاتەوەی کەXML ( هەستیارە بەرابەر پیتی گەورە و بچىکcase-sensitiveپێىیستە هەه ) ىو تاگ و

تىخوەکاى بە پیتی بچىک بىوسرێي.

ادروست:

<STRONG>em deqe toxe</STRONG>

دروست:

<strong>em deqe toxe</strong>

رخی هەهىو تایبەتوەذییەکاى پێىیستە لە ێىاىquotation .)'ـێکذا بىوسرێي )"جىوت" یاى 'تاک

ادروست:

<p id=peregiraf>Eme peregirafe</p>

دروست:

<p id="peregiraf">Eme peregirafe</p>

.ىوسیی هەردوو رخ و تایبەتوەذییەکاى

ادروست:

<input type="checkbox" checked></input>

دروست:

<input type="checkbox" checked="checked"></input>

.GNU Free Documentation License 2.1اوەڕۆک ئاهادەیە لە ژێر

Page 25: Learn HTML in Kurdish

www.chawg.orgوەرگیراوە لە سایتی :

ساهڕەذ حاجیچاک کردى: