فێربوونی HTML به زمانی كوردی سۆرانی
سەرچاوەی فێربوونی هتمل بە زمانی کوردی سۆرانی بۆ داڕشتنی ماڵپەڕ بە درووست
بەکاربردنی کۆد
ناوەڕۆکی بابەت
هتمل HTML چییە؟
HTML کورتکراوەی Hyper Text Markup Language ـە کە بریتییە لە زمانێک
بۆ داڕشتنی پەڕەکانی وێب. HTML زمانێکی بنیادنانە و بە بەکاربردنی دەتوانرێت بناغەی
پەڕەیەکی وێب بچیندرێت. هەروەها پێکهاتەکانی پەڕەیەک پێناس بکرێن. بە بەکاربردنی
HTML دەتوانرێت جگە داڕشتنی پەڕەیەکی ئاسایی ناوەڕۆکی دیکەی وەک وێنە، دەنگ، ڤیدیۆ
یان چەندین جۆرە ناوەڕۆکی دیکە بۆ پەڕەیەک زۆر بکرێت بە بەکاربردنی کۆد/تاگی
پەیوەندیدار.
لە HTML هەر پێكهاتەیەکی پەڕەیەک بە کۆد/تاگی تایبەت بە خۆی پێناس دەکرێت، بۆ
نموونە ئەگەر دەقێک لە نێو پەڕە
یەک وەک سەردێڕ پێناس بکرێت ، بە تاگی Header پێناس
دەکرێت . لەو کاتەدا دەقی ناوبراو وەک سەردێڕێک لە وێبگەڕدا مامەڵەی لەگەڵ دەکرێت.
HTML زمانێکی Static ـە کە بزۆک نییە وەک نموونە PHP. پەڕەیەکی داڕێژراو بە
زمانی HTML تەنیا پێویستی بە ڕاژەکارێکی وێب هەیە وەک Apache HTTP Server. هتمل
زمانێکی پرۆگرامکردن نییە! بەڵکوو زمانێکی بنیادنانی پەڕەیەکی وێبە Markup
Language.
پەڕەیەکی HTML دەکرێت بە پەڕەیەکی وێب ناوببرێت. پەڕەیەکی وێبی HTML
تاگ/کۆد و ناوەڕۆکی وەک دەقی ئاسایی یان وێنە لە خۆ دەگرێت.
هەموو کۆد و تاگەکانی HTML بە پیتی بچووک بنووسە، <head>
باشترە لە <HEAD>.
داڕشتنی پەڕەیەکی HTML چۆن دەست پێبکەم؟
لە پێشدا پێویست بە پرۆگرامێک دەکات کە توانای مامەڵە کردنی هەبێت لەگەڵ
کۆد، لە ڕاستیدا ئاسانترین پرۆگرامەکانی وەک Notepad لە ویندۆز، یان TextEdit
لە سیستەمی Mac. لە نێو سیستەمەکانی دیکەی وەک لینوکس دەتوانرێت پرۆگرامێکی
سادەی وەک gedit بەکار ببرێت. هەموو پرۆگرامەکانی سەرەوە پێداویستی نووسینی
کۆدی هتمل جێبەجێ دەکەن، لە هەندێکیان توانای ڕەنگ کردن و دەستنیشان کردنی
تاگیان هەیە بۆ ئاسانتر کارکردن لەگەڵ کۆدەکانی هتمل لە کاتی نووسینیان.
ئەگەر پێت وایە پرۆگرامی ئاسایی نێو سیستەمەکەت ئامرازێکی باش و درووست نییە
بۆ نووسینی کۆدەکانی هتمل، دەتوانی کرتە لە هەر یەکێک لە بەستەرەکانی خوارەوە
بکەیت و بەپێی جۆری سیستەمەکەت پرۆگرامی دیکەی هاوشێوە دابمەزرێنیت.
لیستەی بەناوبانگترین پرۆگرامەکانی دەقنووس
http://en.wikipedia.org/wiki/List_of_text_editors
پەڕەیەکی هتمل وەک هەر جۆرە پەڕەیەکی دیکە لەسەر وێب بە چەند دێڕ کۆدێک پێناس
دەکرێت بۆ ئەوەی لە کاتی کردنەوەی لە وێبگەڕدا وەک HTML پێناس بکرێت و وێبگەڕ بە
درووستی پیشانی بدات.
یەکەم هەنگاو لە پێناس کردنی پەڕەیەکی HTML بریتییە لە
Declare کردنی پەڕەی ناوبراو، بە Declare کردن مەبەستمان ئەوەیە کە بە وێبگەڕ
ڕادەگەیەنین کە پەڕەکەمان بریتییە لە پەڕەیەکی داڕێژراو بە زمانی HTML. چۆنیەتی
ناساندنی پەڕە لە وەشانەکانی HTML دا جیاوازیی بەسەردا هاتووە، بەربڵاوترین
وەشانەکانی HTML لەسەر وێب وەشانی HTML4.1,XHTML و HTML5 ـن. لە خوارەوە نموونەی
Declare کردن لە نێو هەر یەکێک لەو وەشانانە نموونە کراون.
پەڕەیەکی HTML بە شێوەیەکی ئاسایی لە کۆمەڵێک یەکە / Elements
پێکدێت، هەر Element ـێک لە خۆیدا لە تاگ Tag و تایبەتمەندی Attributes پێکهاتووە.
بەردەوامبە لە خوێندنەوە بۆ ڕوونکردنەوەی زۆرتر…
هەموو نموونە گشتییەکانی کۆدەکانی ئەم زنجیرە بابەتە لەسەر بنەمای وەشانی
نوێی HTML5 دەنووسرێن. ئەو کاتانەی کە پێویست بە نموونە کردنی کۆدی وەشانی بکات،
کۆدی وەشانەکانی دیکە دەنووسین لەگەڵ ئاماژە دان بە وەشانی بەکاربراو.
پێناس کردنی پەڕەیەکی هتمل
XHTML/HTML،
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ناوی پەڕە</title> </head> <body> </body> </html>
HTML5
<!DOCTYPE html> <html> <head> <title>ناوی پەڕە</title> </head> <body> </body> </html>
شیکردنەوەی نموونەکانی سەرەوە،
هەردوو نموونەی وەشانەکانی XHTML و HTML5 لە
دێڕی یەکەمدا پەڕە پێناس دەکەن وەک پەڕەیەکی HTML، لە وەشانی نوێدا تاگی پێناس کردن
ئاسانتر و کورتر کراوەتەوە. هەر پەڕەیەکی وێبی داڕێژراوە بە HTML لە بەشی سەرەوە و
بەشی ناوەڕۆک پێکدێت.
بەشی سەرەوە head
لە بەشی head دا کە بە تاگی <head> دەکرێتەوە و بە تاگی
</head> دادەخرێت ئەو کۆد و ڕێکخستنانە دەردەکەون کە زۆرتر بۆ وێبگەڕ گرینگن و
دەقێک نابن کە خوێنەری پەڕە بیبینێت. لە بەشی head دا دەکرێت ڕێنمایی وێبگەڕ بکرێت
کە چۆن بەشی <body> کە ناوەڕۆکی پەڕە لە خۆ دەگرێت چۆن پیشان بدرێت. بۆ
نموونە لە بەشی head دا دەکرێت ناوی پەڕە بنووسرێت، هەروەها ئەگەر پەڕگەی تایبەت بە
CSS هەبێت لە بەشی head دا بە پەڕەی ناوبراوی HTML دەبەسترێتەوە.
لە بەشی head دا تاگەکانی meta یان Meta Tags دادەنرێن. Meta Tags زانیاریی لە
خۆ دەگرن سەبارەت بە پێکهاتەی پەڕە کە زۆرتر بۆ وێبگەڕ گرینگرە بۆ ئەوەی بە درووستی
پەڕە پیشان بدات. لە Meta Tags دا زانیاریی وەک، نووسەری پەڕە/بابەت، ڕێکەوتی
درووستکردن، وشە گرینگەکان/ کلیلەوشە، پێناسەیەکی پەڕە و چەندین جۆرە زانیاریی دیکە
بنووسرێت. لیستەی تەواوی Meta Tags لە خوارەوەی ئەم پەڕەیە هەیە.
کرتە لە ئێرە بکە بۆ خوێندنەوەی.
بەشی ناوەڕۆک body
بەشی body هەموو ناوەڕۆکی پەڕە لە خۆ دەگرێت، وەک دەقی ئاسایی، وێنە، ڤیدیۆ
و هەر شتێکی دیکە کە بویسترێت لە پەڕەدا ببینرێت. ئەم بابەتەی کە
دەیخوێنیتەوە لە نێوان تاگی کردنەوەی <body> و تاگی داخستن دا </body> نووسراوە.
پێکهاتە سەرەتاییەکانی پەڕەیەکی HTML
پێکهاتەکانی پەڕەیەکی HTML زۆر جارێک بریتی دەبن لە وێنە، دەقی ئاسایی، دەقی
سەردێڕ، فۆرم و هتد… لە خوارەوە نموونەی هەر یەک لەو پێکهاتانە نووسراون و
شێوازی نووسینیان فێربە.
تێبینی ئەوە بکە کە مەرجە لەگەڵ نووسینی و کردنەوەی هەر
تاگێک دەبێت تاگێکی دیکە هەبێت بۆ داخستنی. هەندێک تاگی تایبەتی وەک <img> تاگی
داخستنیان نییە وەک <h1> و </h1>. لە خوارەوە زۆرتر ڕوونکراوەتەوە
Heading / دەقی سەردێڕ
دەقێک کە بە تاگی Heading پێناسە بکرێت بە دەقێکی گرینگتر دەژمێردرێت و وەک
سەردێڕی بەشێک لە نێو پەڕە مامەڵەی لەگەڵ دەگرێت. Heading لە نێو HTML ـدا لە ٦ پلە
پێکدێت، h1 تا h6. بۆ نموونە
<h1>سەردێڕی بەشێک</h1>
نووسراوەی سەردێڕی بەشێک گەورەتر لە نووسراوەکانی دیکە
دەردەکەوێت و بە دەقێکی گرینگتر دەژمێردرێت.
Image / وێنە
پێکهاتەیەکی دیکەی پەڕەیەکی HTML بریتییە لە وێنە، بۆ دانانی وێنە لە نێو
پەڕەیەکی HTML کۆد و تاگی خوارەوە بەکار دەبەین.
<img alt="وێنەکەم" height="85" src="wene.jpg" width="425" />
لە نموونەی سەرەوە تاگی <img> کۆمەڵێک زانیاریی دیکەی لە خۆ گرتووە، بۆ نموونە
پانی و بەرزیی وێنە، هەروەها ئەو دەقەی کە دەربکەوێت وەک پێناسەی وێنە. دەقی
ناوبراو لە کاتێکدا دەردەکەوێت کە وێنە لە بەر هەر هۆکارێک دەرنەکەوێت یان کاتێک
بەکارهێنەر دەستنیشانکەری مشکی کۆمپیوتەرەکەی بەسەر وێنەکەدا بجووڵێنێت. دەقی
ناوبراو دەبێت وێنە پێناس بکات.
src کە کورتکراوەی Source ـە، بەستەری درووستی
وێنە لە خۆ دەگرێت. لە کۆتاییدا تاگی وێنە بە لارەهێڵ داخراوە.
Paragraph / بڕگە
Paragraph کە لە کاتی نووسیندا لە نێو HTML تەنیا بە <p> دەنووسرێت، بەکاردەبریت
بۆ پێکەوە بەستنەوەی کۆمەڵێک دەق وەک بڕگەیەکی هاوبەش، پەرەگراف. نموونە،
<p>من کوردم و وانەی فێربوونی هتمل لە وێبچن دەخوێنم بۆ ئەوەی بتوانم لە داهاتوودا ماڵپەڕی خۆم بە درووستی دابڕێژم</p>
لە نموونەی سەرەوەدا دەقی نووسراو وەک پەرەگرافێکی هاوبەش لە وێبگەڕدا پیشان
دەدرێت.
Link / بەستەری وێب
وێب بەبێ Link بەستەر بوونی نەدەبوو، بەستەر کردنی پەڕەیەکی وێب تایبەتمەندییەکی
گرینگ و یەکێک لە بناغەکانی وێبی ئەمڕۆیە. کاتێک کۆمەڵێک پەڕەی HTML داڕێژین
لەوانەیە پیویست بکات لە پەڕەیەکەوە بەستەر بکەین بۆ پەڕەیەکی دیکە بۆ ئەوەی
بەکارهێنەر بتوانێت پەڕەکانی ماڵپەڕ بدۆزێتەوە. بەستەرکردن کاری پێکەوە بەستنەوەی
پەڕەکانی وێب جێبەجێ دەکات. نموونەی بەستەر درووستکردن،
<a href="http://www.webchin.org" target="_blank">وێبچن</a>
لە نموونەی سەرەوە تایبەتمەندی بەستەرکردن بە a و دواتر href دەست پێدەکات، نرخی
href بریتییە لە بەستەری ئەو پەڕەیەی کە بەستەری بۆ دەکرێت، Target بۆ وێبگەڕ پێناس
دەکات کە بەستەری ناوبراو لە پەنجەرەیەکی نوێ بکرێتەوە یان لە هەمان پەنجەرە. پێش
داخستنی تاگی a بۆ بەستەرکردن، ئەو دەقە نووسراوە کە دەردەکەوێت و کرتەی لێدەکرێت.
ئەنجامی نموونەی سەرەوە دەبێتە:
وێبچن.
Target لێرەدا Attribute ـێکی تایبەت بە Element ی A ـە.
هەروەها href بریتییە لە Attribute ـێکی دیکەی A بۆ بەستەرکردن.
کۆکردنەوەی نموونەکانی سەرەوە لە پەڕەیەکی HTML دا
هەموو نموونەکانی سەرەوە پاش کۆکردنەوە لە نێو یەک پەڕەدا بە شێوازی خوارەوە
دەنووسرێن.
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>ناوی پەڕە</title> </head> <body> <h1>سەردێڕی بەشێک</h1> <img alt="وێنەکەم" height="85" src="wene.jpg" width="425"> <p>من کوردم و وانەی فێربوونی هتمل لە وێبچن دەخوێنم بۆ ئەوەی بتوانم لە داهاتوودا ماڵپەڕی خۆم بە درووستی دابڕێژم</p> <p><a href="http://www.webchin.org" target="_blank">وێبچن</a></p> </body> </html>
کۆدی سەرەوە نموونەی پەڕەیەکی درووست و تەواوی وێبە کە بە HTML داڕێژراوە.
نموونەیەکی سادەیە و دەکرێت زۆرتر پەرەی پێبدرێت.
Meta Tags
تاگی <meta> تاگێکی تایبەتە بە لە خۆگرتنی زانیاریی سەبارەت بە پەڕەیەکی HTML،
زانیاریی وەک ناوی نووسەر، ڕێکەوتی درووستکردنی پەڕە یان کلیلەوشە و زانیاریی
دیکەش. بە چەند نموونەیەک درێژە بە بەشی Meta Tags دەدەین.
نموونەی ژمارە ١،
نووسینی وشە گرینگەکانی پەڕە لە نێو تاگی <meta>
<meta name="keywords" content="HTML, XHTML, HTML5, HTML4.1" />
تاگی ناوبراو بە وشەی meta دەست پێدەکات، دواتر Attribute ـێکی هەیە بە ناوی
name کە پێناس دەکات Meta Tag ی ناوبراو چییە، لەم نموونەدا تایبەتە بە لە خۆ گرتنی
کلیلەوشەکانی پەڕە. content کە Attribute ـێکی دیکەیە کلیلەوشەکانی لە خۆ گرتووە/
Keywords / کلیلەوشە پێکهاتەیەکی گرینگی پەڕەیەکی HTML ـە،
هەموو کات لە نێو هەموو پەڕەکانی ماڵپەڕت بەکاری ببە بە شێوەیەک کە Meta Keywords
گرینگ ترین و سەرەکی ترین وشەکانی پەیوەندیدار بە پەڕە لە خۆ بگرێت. تایبەتمەندی
ناوبراو سوودی دیکەی هەیە بۆ نموونە بۆ گەڕۆکی وێب وەک Google بۆ ئەوەی باشتر
ناوەڕۆکی ماڵپەڕەکەت Index بکات. بەکاربردنی Meta Keywords گرینگە!
<meta name="description" content="خوولی فێربوونی هتمل بە کوردی سۆرانی لە وێبچن" />
Meta Tag ی سەرەوە بریتییە لە پێناسەکردنی پەڕەیەکی HTML،
وەک لە نموونەی سەرەوە هاتووە چەند وشەیەک لە خۆ دەگرێت کە درووست نییە لە ٥٠ وشە
زۆرتر بێت. وشە بەکاربراوەکان بۆ description دەبێت پەیوەندیدار بن بە ناوەڕۆکی
پەڕەی پەیوەندیداری HTML بۆ ئەوەی کاریگەریی درووستی هەبێت. وەک Meta Keywords
گرینگە بۆ گەڕۆکی وێب وەک Google. بەکارهێنانی گرینگە!
Eelements / پێکهاتەکان
وەک لە سەرەوە ئاماژەی پێ دراوە، هەر پەڕەیەکی HTML لە کۆمەڵێک پێکهاتە Element
درووست دەبێت.
نموونەیەکی پێکهاتە / Element، نموونەی خوارەوە بە
شێوەیەکی وردتر پێکهاتەیەک و تایبەتمەندییە پەیوەندیدارەکانی ڕوون دەکاتەوە.
<p>ئەمە دەقی پەرەگرافێکە بۆ تاقیکردنەوە نووسیومانە</p>
ئەگەر پێکهاتەی سەرەوە خشتەبەندی بکەین و بەشەکانی شی بکەینەوە بە شێوەی خوارەوە
دەبێت،
| تاگی دەستپێکردن | دەقی پێکهاتە | تاگی داخستن |
| <p> | ئەمە دەقی پەرەگرافێکە بۆ تاقیکردنەوە نووسیومانە | </p> |
Element Attributes / تایبەتمەندییەکانی پێکهاتە
هەر پێکهاتەیەک دەکرێت یەک یان
زۆرتر تایبەتمەندی هەبێت، هەر تایبەتمەندییەک کارێکی تایبەت جێبەجێ دەکات و لە
ئەنجامدا کاریگەرییان دەبێت لە ئەوەی کە پێکهاتەی پەیوەندیدار چۆن دەربکەوێت / چۆن
کار بکات، لە خوارەوە هەمان نموونەی پێکهاتەی سەرەوە دەنووسینەوە لەگەڵ تایبەتمەندی
Attribute.
<p class="info">ئەمە دەقی پەرەگرافێکە بۆ تاقیکردنەوە نووسیومانە</p>
| تاگی دەستپێکردن | دەقی پێکهاتە | ناوی تایبەتمەندی | نرخی تایبەتمەندی | پێناسەیەکی کورتی تایبەتمەندی | تاگی داخستن |
| <p> | ئەمە دەقی پەرەگرافێکە بۆ تاقیکردنەوە نووسیومانە | class | info | تایبەتمەندی Class تایبەتە بە گۆڕینی ڕوومەتی <p> بە بەکاربردنی CSS |
</p> |
تایبەتمەندییەکانی پێکهاتە لە بەشی یەکەمی پێکهاتە دەنووسرێت، پاش تاگی دەستپێکردن.
دەق و شێوازی دەرکەوتن
HTML زمانێکی بنیادنانە، بە ئەو مانایەی کە بەکاردەبرێت بۆ داڕشتنی بنچینەی
پەڕەیەکی وێب و دواتر بە بەکاربردنی زمانێکی دیکەی وەک CSS دەتوانرێت ڕوومەتی پەڕەی
داڕێژراو بە HTML زۆرتر پەرە پێبدرێت. سەرەڕای ئەوە لە HTML دا هەندێک تاگی بنەڕەتی
هەن کە دەتوانرێت ڕاستەوخۆ بەکار ببرێن، نموونەکانی خوارەوە هەندێک تاگ
دەخاتە ڕوو.
<p><strong>ئەمە دەقی پەرەگرافێکە بۆ تاقیکردنەوە نووسیومانە</strong></p>
لە نموونەی سەرەوەدا تاگی <strong> بەکار براوە بۆ قەڵەوکردنی دەقی نێو
پەرەگراف. ئەنجامی دەبێتە: ئەمە دەقی پەرەگرافێکە بۆ تاقیکردنەوە
نووسیومانە.
جگە لە تاگی قەڵەوکردن کۆمەڵێک تاگی دیکە هەن بۆ وەدەستهێنانی ئەنجامی هاوشێوە،
تاگەکان لە لیستەی خوارەوە ڕیزکراون.
<b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del>
Table/ خشتە
خشتە پێکهاتەیەکی دیکەی تایبەت بە پەڕەیەکی هتمل ـە، خشتە دەکرێت لە هەر شوێنک
لە نێو پەڕەیەکی وێب بەکار ببرێت. دەتوانرێت لە نێو خشتەیەک دەق، وێنە، ڤیدیۆ و
هەر جۆرە ناوەڕۆکێکی دیکە دابنرێت کە دەتوانرێت بە شێوەیەکی ئاسایی لە نێو
پەڕەیەکی وێب دادەنرێت.
تاگی Table وەک هەموو تاگەکانی دیکەی HTML بە تاگی کردنەوە و داخستن دەست
پێدەکات و دادەخرێت. کۆدی خوارەوە نموونەی پێکهاتەی خشتەیەکی سادە بە
دوور لە هەموو جۆرە کۆدێکی تایبەت کردن.
<table> <tr> <td>خانەی ١</td> <td>خانەی ٢</td> </tr> <tr> <td>خانەی ٣</td> <td>خانەی ٤</td> </tr> </table>
نموونەی سەرەوە بە تاگی table دەست پێدەکات، پاشان بە tr کە کورترکراوەی
Table Row ـە، هەر ڕیزێکی خشتەیەک دەکرێت یەک یان زۆرتر td کە کورتکراوەی Table
Data ـەیە لە خۆ بگرێت. ناوەڕۆکی خشتە هەموو کات لە نێو بەشی <td> دەنووسرێت کە
تایبەتە بە ناوەڕۆک لە خۆ گرتن. ئەنجامی بەشە کۆدی سەرەوە وەک خوارەوە
دەردەکەوێت،
| خانەی ١ | خانەی ٢ |
| خانەی ٣ | خانەی ٤ |
List لیست
لیست یەکەیەکی دیکەیە کە بەشێکە لە پێکهاتەکانی پەڕەیەکی وێب، وەک لە ناوی
ڕوونە List بەکار دەبرێت بۆ لیست/ڕیز کردنی دەق. پێکهاتەی لیست بە <li> دەست
پێدەکات و هەروەها بە <li/> دادەخرێت. لە نموونە کۆدی خوارەوە لیستێکی ئاسایی
پێکهێنراوە کە چەند زانیاریی تێدا ڕیزکراوە.
<ul> <li>ئەمە دێڕە بە بەکابردنی پێکهاتەی لیست کردن لە هتمل پیشان دەدرێت</li> <li>ئەمە دێڕی دووەمە</li> <li>ئەمە دێڕی سێیەمە</li> </ul>
ئەنجامی نموونە کۆدی سەرەوە وەک خوارەوە دەبێت،
- ئەمە دێڕە بە بەکابردنی پێکهاتەی لیست کردن لە هتمل پیشان دەدرێت
- ئەمە دێڕی دووەمە
- ئەمە دێڕی سێیەمە
لیستی سەرەوە بە <ul> دەست پێدەکات کە Unsorted List دەگەیەنێت. بە واتایەکی
دیکە ڕیزبەندی سەرەوە لەسەر هیچ بنەمایەکی ڕوون پێکنەهێنراوە و لە تەنیشت هەر
ڕیزبەندییەک خاڵێکی بازنەیی دەردەکەوێت. جگە لە <ul> دەتوانرێت تاگی دیکەی وەک
<ol> بەکار ببرێت کە کورتکراوەی Ordered List ـە، ڕێزبەندی لەسەر بنەمای ژمارە
جێبەجێ دەکرێت و ئەنجامی وەک خوارەوە دەبێت،
- ئەمە دێڕە بە بەکابردنی پێکهاتەی لیست کردن لە هتمل پیشان دەدرێت
- ئەمە دێڕی دووەمە
- ئەمە دێڕی سێیەمە
بۆ ڕیزکردن لەسەر بنەماکانی دیکە دەتوانرێت یەکێک لە تاگەکانی خوارەوە بەکارببرێت
بۆ تایبەت تر کردنی ڕێزکردن.
| تاگ | پێناسە |
| <ul> | Unsorted List ڕیزکردن بەبێ بنەما. |
| <ol> | Ordered List ڕێزکردن و ژمارە دان بە هەر خاڵێکی ڕیزکراو. |
| <li> | List Item ناوەڕۆکی ڕیزبەندی لە خۆ دەگرێت. |
Forms فۆرم
فۆرمێک بریتییە لە ئامرازێک بۆ ناردنی زانیاریی بۆ وێبگەڕ، لە هەر فۆرمێک دا
دەکرێت یەک خانە یان زۆرتر هەبێت کە بەکارهێنەر دەتوانێت زانیاری لە نێویاندا
بنووسێت. پاش پڕکردنەوەی هەر فۆرمێک دەکرێت ئەنجامی ناردنی ئەو زانیارییانە و
چۆنیەتی مامەڵە لەگەڵ کردنیان جیاواز بێت و تایبەت بێت بە شێوازی کارکردنی
ماڵپەڕی پەیوەندیدارەوە. فۆرم لە HTML دا بە شێوەیەکی ئاسایی تەنیا خانەکان لە
خۆ دەگرن کە بەکارهێنەر دەتوانرێت زانیاری لە نێویاندا بنووسێت و توانای
هەڵسەنگاندنی ئەو زانیارییانەیان نییە بۆ نموونە وەک ناردنی بۆ ئیمەیلێک یان
هتد… لێرەدا ڕۆڵی زمانێکی بزۆکی وەک PHP دێتە ئاراوە کە ئەو بەشەی
هەڵسەنگاندن جێبەجێ دەکات و زانیارییەکان دەنێرێت بۆ شوێنی درووست. لە خوارەوە
زانیاری زۆرتر هەیە، بەردەوام بە لە خوێندنەوە….
تاگی فۆرم، چۆنیەتی دەستپێکردنی درووستکردنی فۆرمێکی هتمل
تاگی فۆرم وەک هەموو جۆرە پێکهاتەکانی دیکەی هتمل، بە هێما/تاگی کردنەوە دەست
پێدەکات و لە کۆتاییدا بە تاگی داخستن دادەرخرێت.
<form name="formek"></form>
کۆدی سەرەوە نموونەیەکی زۆر سادەی فۆرمێکە کە تەنیا زانیارییەکی لە خۆ
گرتووە ئەوەش ناوی فۆرمەکەیە، کۆدی سەرەوە بنەمای درووستکردنی هەر فۆرمێکی هتمل
ـە کە بتوانرێت بە درووستی بەکار ببرێت لە نێو پەڕەکانی وێب و گرینگە کە تاگی
کردنەوە و داخستن بە درووستی بنووسرێن و لە شوێنی درووست دا دابنرێن. لە
نموونەی خوارەوەدا خانەیەک بۆ فۆرمی سەرەوە زۆر دەکەین کە بەکارهێنەر بتوانێت
ناوی خۆی لە نێو ئەو خانەیە بنووسێت، لە کۆتایی فۆرمەکەدا دووگمەیەک دەبێت کە
بەکارهێنەر بتوانێت کرتەی لێبکات بۆ ناردنی ناوی خۆی بۆ وێبگەڕ.
<form name="formek"> <label id="nawi-xane">ناو:</label><input name="naw" type="text"> <input name="submit" type="submit" value="ناردن" /> </form>
کۆدی سەرەوە لە وێبگەڕدا بە شێوازی خوارەوە دەردەکەوێت
نموونەی سەرەوە لە ئەو بەشانەی خوارەوە پێکهاتوون،
١، تاگی کردنەوەی فۆرم
و ناوی فۆرم.
٢، <label> کە پێناسەیەک/ناوێکی لە خۆ گرتووە بۆ ئەوەی بۆ
بەکارهێنەر ڕوون بێت کە لە خانەی پەیوەندیداردا چی بنووسێت. لە هەمان دێڕدا
خانەیەک Input هەیە لە جۆری دەق Text کە بەکارهێنەر دەتوانێت دەقی ئاسایی لە
نێویدا بنووسێت.
٣، لە پێش داخستنی فۆرم دا Input ـێکی دیکە هەیە بەڵام لە
جۆری Submit کە کاری ناردنی ئەو زانیارییانە دەکات بەکارهێنەر لە نێو خانەکانی
دیکەی تایبەت بە فۆرم دەیاننووسێت. هەمان پێکهاتە ناو لەگەڵ نرخی هەیە،
نووسراوی نێو تایبەتمەندی پێکهاتە کە لێرەدا Value ـە، ئەوەیە کە بەکارهێنەر
لەسەر دووگمەی ناوبراوی دەیبینێت و دەتوانێت کرتەی لێبکات.
٤، لە کۆتاییدا
فۆرمی ناوبراو داخراوە.
جگە لە جۆرە خانەکانی نێو فۆرمی سەرەوە دەتوانرێت لە نێو فۆرمێکی HTML دا
کۆمەڵێکی دیکە خانە و پێکهاتەی دیکە بەکار ببرێت کە بە شێوازی جیاواز
بەکاردەبرێن بۆ ناردنی زانیاریی بۆ وێبگەڕ. لە خوارەوە چەند نموونەیەک دانراوە
و لە کۆتایی ئەم بەشەدا لیستەی تەواوی جۆرەکانی Input و پێکهاتەی فۆرمێکی هتمل
دانراون.
Radio Buttons
<form name="formek"> <input name="wellam" type="radio" value="yes">بەڵێ <input name="wellam" type="radio" value="no">نەخێر </form>
بریتین لە هەڵبژاردە کە بەکارهێنەر دەتوانێت لە هەمان کاتدا تەنیا یەک خاڵ
هەڵبژێرێت، زۆر جارێک بۆ درووستکردنی دەنگدان لە نێو ماڵپەڕەکان دا بەکار
دەبرێت.
Checkboxes
<form name="formek"> <input name="wellam" type="checkbox" value="yes" />بەڵێ <input name="wellam" type="checkbox" value="no" />نەخێر </form>
کارێکی هاوشێوەی Radio Buttons جێبەجێ دەکات، بەڵام بەکارهێنەر توانای
هەڵبژاردنی زۆرتر لە یەک هەڵبژاردەی دەبێت لە هەمان کاتدا.
دووگمەی ناردنی Submit
پاش پێکهێنانی فۆرمێک لە خانەی جیاواز بۆ پڕکردنەوەیان بە زانیاریی،
دەتوانرێت دووگمەیەکی ناردنی درووست بکرێت بە مەبەستی ناردنی ئەو زانیارییە
نووسراوانە، بۆ ئەو مەبەستە دەکرێت دووگمەی جۆری Submit بەکار ببرێت.
<input type="submit" value="ناردن" />
کە لە ئەنجامدا دووگەمەیەکی درووست دەکات بە کرتە لێکردنی زانیارییە
نووسراوەکانی نێو فۆرم ڕادەپەڕێندرێت. نموونەی کۆدی دووگمەی Submit لەگەڵ بەشە
کۆدێک نووسراو لە سەرەوە ئەنجامی لە وێبگەڕدا وەک لە خوارەوە دەبێت.
پێکهاتەکانی دیکەی فۆرمێکی HTML
جگە لە پێکهاتە ناوبراوەکانی سەرەوە فۆرمێکی HTML دەکرێت چەند خانە و پێکهاتەی
دیکە لە خۆ بگرێت، بۆ نموونە خانەی تایبەت بە هەڵبژاردنی پەڕگە/وێنە، خانەی
تایبەت بە نووسینی ئیمەیل و هتد… لە خوارەوەی ئەم پەڕە زانیاری زۆرتر
هەیە سەبارەت بە پێکهاتەکانی دیکەی فۆرم لە HTML.
بۆ بەردەوامبوون لەگەڵ ئەم بابەتە تکایە کرتە لە بەستەری خوارەوە بکە
ئەم بابەتە بە بەردەوامی نوێ دەکرێتەوە و تەواوتر دەکرێت
_________________________________
