ناوی نادیار

گۆڕانکارییەکان

لە چاوگ
٨٬٩١٦ بایت زیاد کرا ،  ‏٠٠:١٣، ٢٦ی کانوونی دووەمی ٢٠١٧
ب
بەبێ کورتەی دەستکاری
ھێڵی ١: ھێڵی ١: −
[[Image:HTML_Sample_Gedit.gif|left|thumb|390px|نموونەیەکی سادە لە پەڕگەیەکی HTML]]
+
[[Image:HTML_Sample_Gedit.gif|left|thumb|390px|نموونەیەکی سادە لە کۆدی HTML]]
HTML کە کورتکراوەی HyperText Markup Language ـە زمانێکی پیشاندانی پەڕەکانی سەر وێبە کە بەکاردێت بۆ نووسینی هەر پەڕەیەک لەسەر وێب. پەڕگەی HTML تەنها پێکهاتووە لە دەق، کە ئەویش پێکهاتووە لە کۆمەڵێکی زۆر لە تاگ و توخم و نووسراوی ناو پەڕەکە. ئەم تاگانە بە وێبگەڕ دەڵێن کە چۆن نووسین و وێنەکان یان ناوەڕۆکی پەڕەکە دەربکەوێت.
+
'''HTML''' ('''ئێچ تی ئێم ئێڵ''' یان '''هتمڵ''') کە کورتکراوەی HyperText Markup Language ـە زمانێکی پیشاندانی پەڕەکانی سەر وێبە کە بەکاردێت بۆ نووسینی هەر پەڕەیەک لەسەر وێب. پەڕگەی HTML تەنها پێکهاتووە لە دەق، کە ئەویش پێکهاتووە لە کۆمەڵێکی زۆر لە تاگ و توخم و نووسراوی ناو پەڕەکە. ئەم تاگانە بە وێبگەڕ دەڵێن کە چۆن نووسین و وێنەکان یان ناوەڕۆکی پەڕەکە دەربکەوێت.
   −
HTML زۆر ئاسانە بۆ فێربوون بە ڕادەیەک کە کەسێکی دوور لە ئایتی ئەتوانێت لە ماوەیەکی کەمدا فێری HTML ببێت و بینووسێت و دەستکاری بکات. ئەوانەی  کە HTML دەنووسن پێیان ناوترێت [[پڕۆگرامنووس]] (Programmer) بەڵکو [[نووسەر]] (Author) لەبەرئەوەی کە زمانێکی پڕۆگرامین نییە بەڵکو زمانێکی پیشاندانە و لە هاوپۆلی [[Java]] و [[C]] و [[BASIC]] نییە.
+
HTML زۆر ئاسانە بۆ فێربوون بە ڕادەیەک کە کەسێکی دوور لە ئایتی ئەتوانێت لە ماوەیەکی کەمدا فێری HTML ببێت و بینووسێت و دەستکاری بکات. ئەوانەی  کە HTML دەنووسن پێیان ناوترێت [[پڕۆگرامنووس]] (Programmer) بەڵکو [[نووسەر]] (Author) لەبەرئەوەی کە زمانێکی داڕشتنی بەرنامە نییە، بەڵکو زمانێکی پیشاندانە و لە هاوپۆلی [[Java]] و [[C]] و [[BASIC]] نییە.
 +
<br />
 +
<br />
       
== مانای HTML ==
 
== مانای HTML ==
HyperText مەبەست لەوەیە کە تۆ بە ناو وێبدا دەگەڕێیت لە هەر کاتێکدا و بۆ هەر شوێنێک کە بتەوێت بە کرتەکردن لەو بەستەرانەی لە لاپەڕەکاندا دەیانبینیت نەک بە شێوەیەکی ڕێک و یەک لە دوای یەک.
+
* HyperText مەبەست لەوەیە کە تۆ بە ناو وێبدا دەگەڕێیت لە هەر کاتێکدا و بۆ هەر شوێنێک کە بتەوێت بە کرتەکردن لەو بەستەرانەی لە لاپەڕەکاندا دەیانبینیت نەک بە شێوەیەکی ڕێک و یەک لە دوای یەک.
 +
* Markup بریتییە لە کاری تاگەکان لەسەر نووسراوی ناو پەڕەکە وەک (تۆخکردن، لارکردن، هێڵبەژێرداهێنان، ...) ـی هەر دەقێک.
 +
* Language واتە زمان. HTML زمانە وەک هەموو زمانە جیاوازەکانی تر چونکە کۆد و ڕستەکاری هەیە.
 +
<br />
   −
Markup بریتییە لە کاری تاگەکان لەسەر نووسراوی ناو پەڕەکە وەک (تۆخکردن، لارکردن، هێڵبەژێرداهێنان، ...) ـی هەر دەقێک.
+
==توانای HTML==
 +
HTML بۆ دروستکردنی ماڵپەڕێکی سادە و تاکەکەسی دەست ئەدات یان بۆ هەر جۆرە ماڵپەڕێک کە نوێکردنەوەی زۆر نەبێت. ئەتوانرێت بە [[CSS]] ـەوە بلکێنرێت بۆ پێدانی شێوازێکی جوانتر و ئاسانتر لە ڕێکخستنیدا. بە پێچەوانەوە HTML بۆ ماڵپەڕێکی بزۆک، فراوان و بازرگانی دەست نادات کە ڕۆژانە نوێ دەکرێتەوە چونکە HTML زمانێکی جێگیرە. داڕشتن و نوێکردنەوەی ئەو ماڵپەڕە گەورانەی کە بە HTML دەنووسرێن کارێکی زۆر گران و کاتبەرە.
 +
<br />
   −
Language واتە زمان. HTML زمانە وەک هەموو زمانە جیاوازەکانی تر چونکە کۆد و ڕستەکاری هەیە.
+
== چیم پێویستە بۆ فێربوون؟ ==
 +
بۆ فێربوونی <tt>HTML</tt> تەنها پێویستت بە دەستکاریکەرێک (بۆ نووسینی کۆدەکان) و وێبگەڕێک (بۆ بینینی ئەنجام) دەبێت. هیچ ئامڕازێکی تر یان نەرمەکاڵایەکت پێویست نابێت. دەستکاریکەر لە ویندۆز وەک [[Notepad]] کە سادەترین دەستکاریکەری دەقە، بەڵام ئەوانەی کە ئامۆژگاریکراون وەک:
    +
*[http://notepad-plus.sourceforge.net Notepad++]
 +
*[http://www.vim.org VIM]
 +
*[http://projects.gnome.org/gedit Gedit]
 +
*[http://mooedit.sourceforge.net Medit]
 +
*[http://bluefish.openoffice.nl Bluefish]
 +
وێبگەڕیش وەک:
 +
*[http://www.mozilla.com/firefox Firefox]
 +
*[http://www.opera.com Opera]
 +
*[http://www.google.com/chrome Google Chrome]
 +
*[http://www.microsoft.com/windows/products/winfamily/ie/default.mspx Internet Explorer]
   −
==توانای HTML==
+
هەرچەندە چەند پڕۆگرامێک هەن بۆ دەستکاریکردن و داڕشتنی پەڕگەیەکی <tt>HTML</tt> لەوانە [http://www.adobe.com/products/dreamweaver DreamWeaver], [http://office.microsoft.com/en-us/frontpage/default.aspx Microsoft FrontPage], [http://www.microsoft.com/expression/products/overview.aspx?key=web Microsoft Web Expression] ئەم پڕۆگرامانە [[WYSIWYG]] ـن، خۆیان کۆدەکانت بۆ دەنووسن و تۆ ڕووە ئەنجامەکەی دەبینیت. شارەزابوون لەم پڕۆگرامانە مانای شارەزابوون نییە لە <tt>HTML</tt>، بەڵکو یاریدەدەرێکن بۆ ئەو کەسانەی کە دەیانەوێت ماڵپەڕێکیان هەبێت و لە هیچ زمانێکی وێبداڕشتن نازانن یان بۆ چەند کارێکی کەمیان پێویستە و لەبەرئەوە نایانەوێت کاتێک تەرخان بکەن بۆ فێربوونی زمانێک.
   −
HTML بۆ دروستکردنی ماڵپەڕێکی سادە و تاکەکەسی دەست ئەدات یان بۆ هەر جۆرە ماڵپەڕێک کە نوێکردنەوەی زۆر نەبێت. ئەتوانرێت بە [[CSS]] ـەوە بلکێنرێت بۆ پێدانی شێوازێکی جوانتر و ئاسانتر لە ڕێکخستنیدا. بە پێچەوانەوە HTML بۆ ماڵپەڕێکی بزۆک، فراوان و بازرگانی دەست نادات کە ڕۆژانە نوێ دەکرێتەوە چونکە HTML زمانێکی جێگیرە. داڕشتن و نوێکردنەوەی ئەو ماڵپەڕە گەورانەی کە بە HTML دەنووسرێن کارێکی زۆر گران و کاتبەرە.
+
== پاشگری htm یان html؟ ==
 +
بەکارهێنانی هەر کامێک لە پاشگری <code>.htm</code> یان <code>.html</code> بە گشتی وەک یەک وان و دروستن. لە سەرەتاوە کە سیستەمە کۆنەکان تەنها ڕێگەیان بە سێ نووسە ئەدا بۆ پاشگری پەڕگە، بەو شێوەیە بوو، بەڵام دوای ئەوەی ڕێگەدرا نووسەی زیاتر بەکارببرێت پاشگری <code>.html</code> ـیش پەیدا بوو. لە ئێستادا نووسینی هەر کامێکیان وەک پاشگر ئەکەوێتە سەر ئارەزووی نووسەر و هیچ کەشەیەک دروست ناکەن. کەواتە yekemin-perre.html = yekemin-pere.htm
    +
== نووسین و پاشەکەوتکردن ==
 +
[[Image:Notepad_save-as.gif|left|thumb|250px|پاشەکەوتکردن بە utf-8 لە Notepad]]
 +
لە سەرەتادا ئەوەی دەتەوێت لە دەستکاریکەرەکەدا دەینووسیت پاشان بچۆ بۆ <tt>File > Save as</tt> لە جێیەک پاشەکەوتی بکە بە هەر ناوێکەوە بەڵام ئەوەی گرنگە بە پاشگری <tt>html</tt> پاشەکەوتی بکەیت، بۆ نموونە: <tt>yekemin-perre.html</tt>
 +
خاڵێکی گرنگ پێش پاشەکەوتکردنی پەڕگەکە گۆڕینی <tt>Encoding</tt> ـی پەڕگەیەکە بۆ یونیکۆد. چۆنییەتی گۆڕینیش لە دەستکاریکەرێکەوە بۆ دەستکاریکەرێکی تر جیاوازە. لە <tt>Notepad++</tt> دەبێت بچیت بۆ <tt>Format > Encode in UTF-8 without BOM</tt> بەڵام لە <tt>Notepad</tt> لە کاتی پاشەکەوتکردن و کردنەوەی پەنجەرەی پاشەکەوتکردندا دەتوانیت پەڕگەکە بکەیت بە <tt>utf-8</tt> بەوەی کە لە ژێر نووسینی ناوە پەڕەکەدا.
    
== تاگەکان ==
 
== تاگەکان ==
ھێڵی ٢٩: ھێڵی ٥٢:     
تێبینی: لێرەدا دەبینیت پێش کەوانەی کۆتایی هێڵێکی لار دانراوە ئەمەش ئەوە ئەگەیەنێت کە دانانی وێنە لە یەک تاگ پێکهاتووە و تاگەکە خۆی خۆی دائەخاتەوە. ئەشتوانرێت ئەو هێڵێ لارە نەنووسرێت بەڵام لە وەشانی ٤.٠١ ـەوە وا ئامۆژگاریکراوە کە بنووسرێت و تاوەکو لەگەڵ بنەماکانی [[XHTML]] ـیشدا بگوونجێت.
 
تێبینی: لێرەدا دەبینیت پێش کەوانەی کۆتایی هێڵێکی لار دانراوە ئەمەش ئەوە ئەگەیەنێت کە دانانی وێنە لە یەک تاگ پێکهاتووە و تاگەکە خۆی خۆی دائەخاتەوە. ئەشتوانرێت ئەو هێڵێ لارە نەنووسرێت بەڵام لە وەشانی ٤.٠١ ـەوە وا ئامۆژگاریکراوە کە بنووسرێت و تاوەکو لەگەڵ بنەماکانی [[XHTML]] ـیشدا بگوونجێت.
   
[[Image:tuxmi_html.gif|left|thumb|280px|توخمی HTML پێکدێت لە (تاگی سەرەتا، تایبەتمەندی، ناوەڕۆکی توخم، تاگی کۆتایی)]]
 
[[Image:tuxmi_html.gif|left|thumb|280px|توخمی HTML پێکدێت لە (تاگی سەرەتا، تایبەتمەندی، ناوەڕۆکی توخم، تاگی کۆتایی)]]
   ھێڵی ٣٨: ھێڵی ٦٠:     
== تایبەتمەندییەکان ==
 
== تایبەتمەندییەکان ==
   
تایبەتمەندییەکان کە پێک هاتوون لە ناوی تایبەتمەندیی و نرخی تایبەتمەندی بە شێوەی <code>nawi-taybetmendi="nirxi-taybetmendi"</code> دەنووسرێن و دەکەونە نێو تاگی سەرەتای هەر توخمێکەوە ئەم تایبەتمەندییانە زانیاریی زیاتر لەسەر توخمەکە دابین دەکەن، کاریگەرییان لەسەر جێ دەهێڵن یان توخمەکان دیاری دەکەن تا بەهۆی CSS ـەوە کاریگەرییان بەسەردا بهێنرێن. هەندێک نموونە:
 
تایبەتمەندییەکان کە پێک هاتوون لە ناوی تایبەتمەندیی و نرخی تایبەتمەندی بە شێوەی <code>nawi-taybetmendi="nirxi-taybetmendi"</code> دەنووسرێن و دەکەونە نێو تاگی سەرەتای هەر توخمێکەوە ئەم تایبەتمەندییانە زانیاریی زیاتر لەسەر توخمەکە دابین دەکەن، کاریگەرییان لەسەر جێ دەهێڵن یان توخمەکان دیاری دەکەن تا بەهۆی CSS ـەوە کاریگەرییان بەسەردا بهێنرێن. هەندێک نموونە:
 
* تایبەتمەندی alt لە توخمی وێنەدا کە بە واتای دەقی جێگرەوە دێت (alternative text) بە کاردێت بۆ نووسینی دەقێک تا پیشان بدرێن لەو وێبگەڕانەی پاڵپشتی پیشاندانی وێنە ناکەن یان بەکارهێنەر پیشاندانی وێنەی ناچالاک کردووە.
 
* تایبەتمەندی alt لە توخمی وێنەدا کە بە واتای دەقی جێگرەوە دێت (alternative text) بە کاردێت بۆ نووسینی دەقێک تا پیشان بدرێن لەو وێبگەڕانەی پاڵپشتی پیشاندانی وێنە ناکەن یان بەکارهێنەر پیشاندانی وێنەی ناچالاک کردووە.
ھێڵی ٤٧: ھێڵی ٦٨:  
<source lang="html4strict"><div class="nawnishan">Min feri HTML debim.</div></source>
 
<source lang="html4strict"><div class="nawnishan">Min feri HTML debim.</div></source>
 
تێبینی: نرخی تایبەتمەندییەکان دەبێت لە نێوان تاک یان جووت کۆتەیشندا بنووسرێن لە XHTML، بەڵام لە HTML دەکرێت بە بێ کۆتەیشنیش بنووسرێن.
 
تێبینی: نرخی تایبەتمەندییەکان دەبێت لە نێوان تاک یان جووت کۆتەیشندا بنووسرێن لە XHTML، بەڵام لە HTML دەکرێت بە بێ کۆتەیشنیش بنووسرێن.
  −
== XHTML ==
  −
<tt>eXtensible HyperText Markup Language</tt> داڕشتنەوەی هەمان <tt>HTML</tt> ـە بە پابەندبوون بە بنەماکانی <tt>XML</tt> ـەوە کە دواتر بووە بە پەسەندکراوی W3C.
  −
  −
== جیاوازی نێوان HTML و XHTML ==
  −
ئەو جیاوازیانەی لە نێوان <tt>HTML</tt> و <tt>XHTML</tt> ـدا هەیە ئەوەیە کە ئەبێت بەڵگەنامەکانی <tt>XHTML</tt> بە درووستی لەسەر ڕێساکانی <tt>XML</tt> نووسرابن، ئەوانیش لەمانەدا خۆی دەگرێتەوە:
  −
*'''هەموو تاگ و توخمەکان داخرابنەوە.''' ئەو تاگانەی تاگی کردنەوە و داخستنەوەیان هەیە پێویستە هەردووکیان بوونیان هەبێت، بۆ نموونە:
  −
نادروست: <pre><h1>Eme headere<h2>Emesh headereki tir</pre>
  −
  −
دروست: <pre><h1>Eme headere</h1><h2>Emesh headereki tir</h2></pre>
  −
  −
* '''تاگە تاکەکان دابخرێنەوە.''' وەک پێشتر وتمان هەندێک لە تاگەکان تاکن و تاگی داخستنەوەیان نییە، بۆیە پێویستە تاگەکە لە ناو خۆیدا خۆی دابخاتەوە.
  −
نادروست: <pre><br></pre>
  −
  −
دروست: <pre><br /></pre>
  −
  −
*'''پاش و پێش نەخستنی تاگەکان.''' گەر چەند تاگێک بە دوای یەکدا هاتن، ئەو تاگەی یەکەم جار دەکرێتەوە لە کۆتایی هەموو تاگەکانی تر دابخرێتەوە.
  −
ناردوست: <pre><strong><em>blod and italic</strong></em></pre>
  −
  −
دروست: <pre><strong><em>blod and italic</em></strong></pre>
  −
  −
*'''لەو کاتەوەی کە XML هەستیارە بەرانبەر پیتی گەورە و بچوک (case-sensitive) پێویستە هەموو تاگ و توخمەکان بە پیتی بچوک بنووسرێن.'''
  −
نادروست: <pre><STRONG>em deqe toxe</STRONG></pre>
  −
  −
دروست: <pre><strong>em deqe toxe</strong></pre>
  −
  −
*'''نرخی هەموو تایبەتمەندییەکان پێویستە لە نێوان quotation ـێکدا بنووسرێن ("جووت" یان 'تاک').'''
  −
نادروست: <pre><p id=peregiraf>Eme peregirafe</p></pre>
  −
  −
دروست: <pre><p id="peregiraf">Eme peregirafe</p></pre>
  −
  −
*'''نووسینی هەردوو نرخ و تایبەتمەندییەکان.'''
  −
نادروست: <pre><input type="checkbox" checked></input></pre>
  −
  −
دروست: <pre><input type="checkbox" checked="checked"></input></pre>
  −
  −
== چیم پێویستە بۆ فێربوون؟ ==
  −
بۆ فێربوونی <tt>HTML</tt> تەنها پێویستت بە دەستکاریکەرێک (بۆ نووسینی کۆدەکان) و وێبگەڕێک (بۆ بینینی ئەنجام) دەبێت. هیچ ئامڕازێکی تر یان نەرمەکاڵایەکت پێویست نابێت. دەستکاریکەر لە ویندۆز وەک [[Notepad]] کە سادەترین دەستکاریکەری دەقە، بەڵام ئەوانەی کە ئامۆژگاریکراون وەک
  −
  −
*[http://notepad-plus.sourceforge.net Notepad++]
  −
*[http://www.vim.org VIM]
  −
*[http://projects.gnome.org/gedit Gedit]
  −
*[http://mooedit.sourceforge.net Medit]
  −
*[http://bluefish.openoffice.nl Bluefish]
  −
وێبگەڕیش وەک:
  −
*[http://www.mozilla.com/firefox Firefox]
  −
*[http://www.opera.com Opera]
  −
*[http://www.google.com/chrome Google Chrome]
  −
*[http://www.microsoft.com/windows/products/winfamily/ie/default.mspx Internet Explorer]
  −
  −
هەرچەندە چەند پڕۆگرامێک هەن بۆ دەستکاریکردن و داڕشتنی پەڕگەیەکی <tt>HTML</tt> لەوانە [http://www.adobe.com/products/dreamweaver DreamWeaver], [http://office.microsoft.com/en-us/frontpage/default.aspx Microsoft FrontPage], [http://www.microsoft.com/expression/products/overview.aspx?key=web Microsoft Web Expression] ئەم پڕۆگرامە [http://en.wikipedia.org/wiki/Graphical_user_interface GUI] ـیانە [http://en.wikipedia.org/wiki/WYSIWYG WYSIWYG] ـن واتە بە دیاریکردنی دەقێک و کرتکردن لە دوگمەی تۆخکردن ئەو دەقەت بۆ تۆخ دەکات و ڕاستەوخۆ لە کاتی دەستکاریکردندا دەرئەنجامی کارەکە دەبینیت. ئەم پڕۆگرامانە خۆیان کۆدەکانت بۆ دەنووسن و تۆ ڕووە ئەنجامەکەی دەبینیت. شارەزابوون لەم پڕۆگرامانە مانای شارەزابوون نییە لە <tt>HTML</tt>، بەڵکو یاریدەدەرێکن بۆ ئەو کەسانەی کە دەیانەوێت ماڵپەڕێکیان هەبێت و لە هیچ زمانێکی وێبداڕشتن نازانن یان بۆ چەند کارێکی کەمیان پێویستە و لەبەرئەوە نایانەوێت کاتێک تەرخان بکەن بۆ فێربوونی زمانێک.
  −
  −
[[Image:Notepad_save-as.gif|left|thumb|250px|پاشەکەوتکردن بە utf-8 لە Notepad]]
  −
  −
== نووسین و پاشەکەوتکردن ==
  −
لە سەرەتادا ئەوەی دەتەوێت لە دەستکاریکەرەکەدا دەینووسیت پاشان بچۆ بۆ <tt>File > Save as</tt> لە جێیەک پاشەکەوتی بکە بە هەر ناوێکەوە بەڵام ئەوەی گرنگە بە پاشگری <tt>html</tt> پاشەکەوتی بکەیت، بۆ نموونە: <tt>yekemin-perre.html</tt>
  −
خاڵێکی گرنگ پێش پاشەکەوتکردنی پەڕگەکە گۆڕینی <tt>Encoding</tt> ـی پەڕگەیەکە بۆ یونیکۆد. چۆنییەتی گۆڕینیش لە دەستکاریکەرێکەوە بۆ دەستکاریکەرێکی تر جیاوازە. لە <tt>Notepad++</tt> دەبێت بچیت بۆ <tt>Format > Encode in UTF-8 without BOM</tt> بەڵام لە <tt>Notepad</tt> لە کاتی پاشەکەوتکردن و کردنەوەی پەنجەرەی پاشەکەوتکردندا دەتوانیت پەڕگەکە بکەیت بە <tt>utf-8</tt> بەوەی کە لە ژێر نووسینی ناوە پەڕەکەدا
  −
  −
== پاشگری htm یان html؟ ==
  −
بەکارهێنانی هەر کامێک لە پاشگری <code>.htm</code> یان <code>.html</code> بە گشتی وەک یەک وان و دروستن. لە سەرەتاوە کە سیستەمە کۆنەکان تەنها ڕێگەیان بە سێ نووسە ئەدا بۆ پاشگری پەڕگە، بەو شێوەیە بوو، بەڵام دوای ئەوەی ڕێگەدرا نووسەی زیاتر بەکارببرێت پاشگری <code>.html</code> ـیش پەیدا بوو. لە ئێستادا نووسینی هەر کامێکیان وەک پاشگر ئەکەوێتە سەر ئارەزووی نووسەر و هیچ کەشەیەک دروست ناکەن. کەواتە yekemin-perre.html = yekemin-pere.htm
      
== پێکهاتەی پەڕەی HTML ==
 
== پێکهاتەی پەڕەی HTML ==
ھێڵی ٤١٤: ھێڵی ٣٧٥:       −
=== input ===
+
===تێکردن - input ===
 
input زۆرترین تاگی بەکاربراوی توخمی فۆڕمە. کە دەتوانین بەپێی نرخی تایبەتمەندیی <tt>type</tt> جۆری ئەو فۆڕمەکەی دیاری بکەین. نرخەکانی تایبەتمەندیی <tt>type</tt> کە جۆری فۆڕمەکە دیاری دەکەن، ئەمانەن: <tt>text</tt>, <tt>password</tt>, <tt>file</tt>, <tt>checkbox</tt>, <tt>radio</tt>, <tt>submit</tt>, <tt>reset</tt>, <tt>button</tt>, <tt>hidden</tt>, <tt>image</tt>
 
input زۆرترین تاگی بەکاربراوی توخمی فۆڕمە. کە دەتوانین بەپێی نرخی تایبەتمەندیی <tt>type</tt> جۆری ئەو فۆڕمەکەی دیاری بکەین. نرخەکانی تایبەتمەندیی <tt>type</tt> کە جۆری فۆڕمەکە دیاری دەکەن، ئەمانەن: <tt>text</tt>, <tt>password</tt>, <tt>file</tt>, <tt>checkbox</tt>, <tt>radio</tt>, <tt>submit</tt>, <tt>reset</tt>, <tt>button</tt>, <tt>hidden</tt>, <tt>image</tt>
    +
چۆنێتی بەکارهێنانیان (کۆدەکە لە پەڕگەیەکدا ڕوونووس بکە تا دەرەنجامەکانیان ببینیت):
 +
 +
<source lang="html4strict">
 +
<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" />
 +
</source>
   −
<source lang='html4strict'><input type="text" /></source>
+
* <tt>text</tt> - خانەیەکی تاک هێڵییە بەکاردێت لەکاتی داغڵکردنی ناو، تێپەڕەوشە، ئیمەیل...
شێوه‌ی ستانده‌ری '''textbox'''ـه‌،به‌كاردێت بۆ نوسین،سه‌ێری ئه‌م نموونه‌یه‌ بكه‌،
+
* <tt>password</tt> - بەهەمان شێوەی <tt>text</tt> بەڵام لەکاتی نووسینی تێپەڕەوشەدا بەکاردێت تا وشەکان بشاردرێنەوە.
 +
* <tt>file</tt> - بۆ بارکردنی پەڕگەیەک لە کۆمپیوتەری بەکارهێنەرەوە، وەک لە uploader ـەکاندا.
 +
* <tt>submit</tt> - دوگمەیەکە لە فۆڕمەکەدا بەکاردێت لە ناردنی زانیارییەکانی نێو فۆڕمەکە.
 +
* <tt>reset</tt> - بەکاردێت بۆ بەتاڵکردنەوەی ئەو زانیارییانەی بەکارهێنەر لەنێو فۆڕمەکەدا نووسیویەتی.
 +
* <tt>checkbox</tt> - بەکاردێت لە هەڵبژاردندا. کاتێک چەند هەڵبژاردنێک دیاری کراوە و بەکارهێنەر دەتوانێ زیاد لە دانەیەک هەڵبژێرێت.
 +
* <tt>radio</tt> - بەکاردێت لە هەڵبژاردندا. کاتێک چەند هەڵبژاردنێک دیاری کراوە و بەکارهێنەر دەتوانێ تەنها یەکێک هەڵبژێرێت.
 +
* <tt>button</tt> - دوگمەیەکە، بەڵام ئەم زانیاری نێو فۆڕمەکە نانێرێت بۆ ڕاژە، بەڵکو پێوسیتە بە سکریپتێکی وەک جاڤاسکریپتەوە ببەسرێتەوە بۆ کارپێکردنی ڕاستەوخۆی سکریپتەکە.
 +
* <tt>image</tt> - دوگمەیەکی ناردنە وەک <tt>submit</tt> بەڵام بە وێنە.
 +
* <tt>hidden</tt> - خانەیەکی شاراوەیە کە بەکارهێنەر نایبینێت. بەزۆری بەکاردێت کاتێک فۆڕم لە چەند پەڕەیەک پێکهاتووە و پێویستە زانیارییەکانی پەڕەی یەکەم پاشەکەوتبکرێن و هەڵبگیرێن بۆ پەڕەکانی تر.
   −
<source lang='html4strict'><form>
+
 
First name:  
+
بۆ نموونە لە دروستکردنی فۆڕمێکی چوونەژوورەوە، بەم شێوەیە فۆڕم بەکاردەهێنین:
<input type="text" name="firstname" />
+
 
 +
<source lang="html4strict">
 +
<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 />
 
<br />
Last name:
+
<input type="submit" name="submitit" value="Submit Data" />
<input type="text" name="lastname" />
+
</form>
</form></source>
+
</source>
   −
ئه‌نجامی ئه‌و كۆده‌ ته‌نها ئه‌توانی ناوی خۆت له‌گه‌ڵ ناوی باوكه‌ت بنوسیت،
+
===ڕووبەرى دەق - textarea===
 +
textarea خانەیەکی گەورەیە بۆ نووسینی دەقێکی زۆر بەکاردێت. بە پێچەوانەی توخمی input ـەوە، textarea تاگی سەرەتا و کۆتایی هەیە . وە پێوستە تایبەتمەندییەکانی <tt>rows</tt> و <tt>cols</tt> بنووسیت بۆ دیاریکردنی بەرزی و پانی خانەکە.
 +
<source lang="html4strict">
 +
<textarea name="postfield" rows="10" cols="50">Deqeket lere binuse</textarea>
 +
</source>
 +
* هەردوو تایبەتمەندیی readonly و disabled بەکاردێت بۆ ناچالاککردنی خانەکە و نەهێشتنی دەستکاریکردنی لەلایەن بەکارهێنەرەوە. وەک ئەم نموونەیە:
 +
<source lang="html4strict">
 +
<textarea name="postfield" rows="10" cols="50" readonly="readonly">Natiwanit destkari em deqe bikeyt</textarea>
 +
</source>
 +
 
 +
=== Drop Down ===
 +
Drop Down لیستێکە لە کۆمەڵێک هەڵبژاردن بۆ دیاریکردنی دانەیەک یان زیاتر، وەک radio و checkbox بەڵام بە شێوەیەکی کۆکراوە.
 +
 
 +
توخمی <tt>select</tt> بەکاردەهێنین بۆ دروستکردنی لیستەکە، لە نێو لیستەکەشدا بۆ هەر هەڵبژاردنێک توخمی <tt>option</tt>. بەم شێوەیە:
 +
 
 +
<source lang="html4strict">
 +
<select name="dropdownlist">
 +
<option value="ku">Kurd</option>
 +
<option value="en">English</option>
 +
<option value="fr">French</option>
 +
</select>
 +
</source>
 +
* تایبەتمەندی <code>multiple="multiple"</code> بەکاردێت بۆ دیاریکردنی زیاد لە هەڵبژاردنێک لە لیستەکە. هەروەها تایبەتمەندی <tt>disable</tt>یش بۆ ناچالاککردنی لیستەکە.
 +
* دەتوانین هەڵبژاردنەکان بکەینە دەستە دەستە بە بەکارهێنانی تاگی <tt>optgroup</tt>. بەم شێوەیە:
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 
 +
== div و span ==
 +
<tt>div</tt> و <tt>span</tt> بەکاردێن وەک لە پۆلپۆلکردنی کۆمەڵێک دەق و کاریگەری پێدانیان بەهۆی [[CSS]]. تاگی <tt>div</tt> وەک پەرەگراف کاتێک دەدرێت بە دەقێک، هێڵێک پێش خۆی و هێڵێک پاش خۆی جێ دەهێڵێت بەڵام <tt>span</tt> لەنێو هێڵدا. تایبەمەندییەکانیان بریتین لە <tt>class</tt>, <tt>id</tt>, <tt>style</tt>
   −
<source lang='html4strict'><input type="password" /></source>
+
نموونە:
ئه‌مه‌یش به‌ هه‌مان شێوه‌ وه‌ك textbox وایه‌،به‌ڵام ئه‌توانی هه‌رشتێك بنوسیت،به‌كاری بهێنیت،ده‌یشارێته‌وه‌،
+
<source lang="html4strict">
 +
<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>
 +
</source>
   −
<source lang='html4strict'><input type="checkbox" /></source>
+
بەڵام <tt>span</tt>:
هه‌روه‌ها checkbox به‌كاردێت بۆ دیاری كردنی چه‌ند شتێك بۆ نموونه‌ تۆ حه‌ز به‌ كۆمپیوته‌ر له‌گه‌ڵ یاری ده‌كه‌یت،وه‌ ئه‌توانی به‌ هۆی ئه‌م تاگه‌وه‌ هه‌ردووكیان دیاری بكه‌یت،به‌ ده‌ستی خۆته‌،
+
<source lang="html4strict">
 +
<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>
 +
</source>
 +
واتە کاتێک span بەکاردێنین، ئەگەر بمانەوێت کاریگەری بدەینە وشەیەک یان چەند وشەیەکی نێو دێڕێک.
   −
<source lang='html4strict'><input type="radio" /></source>
+
== توخمەکانی نێو head ==
ئه‌مه‌‌ وه‌ك '''checkbox''' وایه‌،به‌ڵام به‌كارهێنه‌ر ئه‌توانی یه‌ك شت دیاری بكات له‌ گرووپێك،بۆ نموونه‌:
+
توخمەکانی نێو head کۆمەڵێک توخمن لەنێو تاگی <tt><head></head></tt>دان. ئەم توخمانە بەکارهێنەر نایان بینێت بەڵام کاریگەری گرنگیان هەیە لەسەر پەڕەکە و وێبگەڕ و بزوێنەرەکانی گەڕان سوود لەم توخمانە وەردەگرن.
   −
<source lang='html4strict'><form>
+
=== توخمی meta ===
<input type="radio" name="sex" value="male" /> Male
+
توخمی <tt>meta</tt> بەکاردێت بۆ پێدانی زانیاری لەسەر جۆر، نووسەر، پەسن و  وشەکلیل...
<br />
+
* '''بەکارهێنانی تایبەتمەندیی <tt>http-equiv</tt> و <tt>content</tt>'''
<input type="radio" name="sex" value="female" /> Female
+
<source lang="html4strict">
</form></source>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
</source>
 +
تایبەتمەندی <tt>http-equiv</tt> بەکاردێت لە بوژاندنەوە (refresh)ی پەڕەکە یان ڕێکخستنی کاشکردن. لە تایبەتمەندی <tt>content</tt>یش چارسێت/ئینکۆدینی پەڕەکە دیاری دەکات. ئەو دێڕەی سەرەوە لە هەموو پەڕەیەکی ئاساییدا بەکار دەبرێت. شێوەیەکی تر ئەگەر بمانەوێت پەڕەکە refresh بکات چەند چرکە جارێک یان ئاڕاستەی بکەین بۆ پەڕەیەکی تر نرخی تایبەتمەندی <tt>http-equiv</tt> دەگۆڕین بۆ <tt>refresh</tt>  و نرخی <tt>content</tt>یش بۆ ژمارەی چرکەکان لەگەڵ ناونیشانی بەستەرەکە. بۆ نمونە:
 +
<source lang="html4strict">
 +
<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-->
 +
</source>
 +
 
 +
* '''بەکارهێنانی تایبەتمەندی وشەکلیل و پەسن'''
 +
وشەکلیل (<tt>keywords</tt>) بەکاردێت بۆ ناساندنی ماڵپەڕەکەت لە چەند وشەیەکدا کە بە کۆما لێک جیاکراونەتەوە، پەسنیش (<tt>description</tt>) بە هەمان شێوە بۆ ناساندنی ماڵپەڕ یان پەڕەیەک لە ماڵپەڕەکە بەکاردێت لە ڕستەیەکدا. بەم شێوەیە لەنێو <tt>head</tt> دا دەنووسرێن:
 +
<source lang="html4strict">
 +
<meta name="keywords" content="chawg, mallperri chawg, وێبداڕشتن, هتمڵ بە کوردی, سی ئێس ئێس بە کوردی, پی ئێچ پی بە کوردی" />
 +
<meta name="description" content="چاوگ ماڵپەڕێکی ئایتییە، گرنگی بە بوارەکانی سەچاوەکراوە و وێبداڕشتن دەدات" />
 +
</source>
 +
پێشتر بزوێنەرەکانی گەڕان ئەم دوو تایبەتمەندییەیان بەکاردەهێنا بۆ ڕیزکردنی ماڵپەڕەکان لە ئەنجامی گەڕانەکانیاندا. کاتێک بەکارهێنەرێک بۆ وشەیەک دەگەڕا بزوێنەرەکان ئەو ماڵپەڕانەیان دادەنا بە ئەنجامی گەڕان کە وشەکەی تیادابوو، بەڵام لەبەر خراپ بەکارهێنانی ئەو دوو تایبەتمەندییە، ئەمڕۆ زۆربەی بزوێنەری گەڕانەکان فەرامۆشیان کردوون.
 +
خراپ بەکارهێنان واتا نووسینی وشەیەک لە وشەکلیل و پەسندا کە ماڵپەڕەکەت تایبەت نەبێت پێی یان نووسینی دەیان وشە بۆ بۆ زۆرکردنی هەلی دەرکەوتنی ماڵپەڕەکەت لە بزوێنەرەکانی گەڕاندا کە ئەمەش کاریگەری نەرێنی دەبێت و دەبێتە هۆی ئەوەی ماڵپەڕێک لە گەڕانەکاندا دەربکەوێت کە هیچ پەیوەندی بەو بابەتەوە نەبێت کە بەکارهێنەر بۆی گەڕاوە.
 +
 
 +
=== توخمی link ===
 +
بەکاردێت بۆ بەستنەوە و تێهەڵکێشکردنی پەڕگەیەک بە پەڕە HTMLـەکەوە، وەک تێهەڵکێشکردنی [[CSS]] و [[Favicon]].
 +
* تێهەڵکێشکردنی ڕووخسار
 +
<source lang="html4strict">
 +
<link rel="stylesheet" type="text/css" href="http://www.mallperr.com/ruxsar.css" />
 +
</source>
 +
* تێهەڵکێشکردنی Favicon
 +
<source lang='html4strict'><link rel="Shortcut Icon" type="image/ico" href="PATH/TO/favicon.ico" /></source>
 +
 
 +
== XHTML ==
 +
<tt>eXtensible HyperText Markup Language</tt> داڕشتنەوەی هەمان <tt>HTML</tt> ـە بە پابەندبوون بە بنەماکانی <tt>XML</tt> ـەوە کە دواتر بووە بە پەسەندکراوی W3C.
 +
 
 +
== جیاوازی نێوان HTML و XHTML ==
 +
ئەو جیاوازیانەی لە نێوان <tt>HTML</tt> و <tt>XHTML</tt> ـدا هەیە ئەوەیە کە ئەبێت بەڵگەنامەکانی <tt>XHTML</tt> بە درووستی لەسەر ڕێساکانی <tt>XML</tt> نووسرابن، ئەوانیش لەمانەدا خۆی دەگرێتەوە:
 +
*'''هەموو تاگ و توخمەکان داخرابنەوە.''' ئەو تاگانەی تاگی کردنەوە و داخستنەوەیان هەیە پێویستە هەردووکیان بوونیان هەبێت، بۆ نموونە:
 +
نادروست: <source lang='html4strict'><h1>Eme headere<h2>Emesh headereki tir</source>
 +
 
 +
دروست: <source lang='html4strict'><h1>Eme headere</h1><h2>Emesh headereki tir</h2></source>
 +
 
 +
* '''تاگە تاکەکان دابخرێنەوە.''' وەک پێشتر وتمان هەندێک لە تاگەکان تاکن و تاگی داخستنەوەیان نییە، بۆیە پێویستە تاگەکە لە ناو خۆیدا خۆی دابخاتەوە.
 +
نادروست: <source lang='html4strict'><br></source>
 +
 
 +
دروست: <source lang='html4strict'><br /></source>
 +
 
 +
*'''پاش و پێش نەخستنی تاگەکان.''' گەر چەند تاگێک بە دوای یەکدا هاتن، ئەو تاگەی یەکەم جار دەکرێتەوە لە کۆتایی هەموو تاگەکانی تر دابخرێتەوە.
 +
ناردوست: <source lang='html4strict'><strong><em>blod and italic</strong></em></source>
 +
 
 +
دروست: <source lang='html4strict'><strong><em>blod and italic</em></strong></source>
 +
 
 +
*'''لەو کاتەوەی کە XML هەستیارە بەرانبەر پیتی گەورە و بچوک (case-sensitive) پێویستە هەموو تاگ و توخمەکان بە پیتی بچوک بنووسرێن.'''
 +
نادروست: <source lang='html4strict'><STRONG>em deqe toxe</STRONG></source>
 +
 
 +
دروست: <source lang='html4strict'><strong>em deqe toxe</strong></source>
 +
 
 +
*'''نرخی هەموو تایبەتمەندییەکان پێویستە لە نێوان quotation ـێکدا بنووسرێن ("جووت" یان 'تاک').'''
 +
نادروست: <source lang='html4strict'><p id=peregiraf>Eme peregirafe</p></source>
 +
 
 +
دروست: <source lang='html4strict'><p id="peregiraf">Eme peregirafe</p></source>
 +
 
 +
*'''نووسینی هەردوو نرخ و تایبەتمەندییەکان.'''
 +
نادروست: <source lang='html4strict'><input type="checkbox" checked></input></source>
 +
 
 +
دروست: <source lang='html4strict'><input type="checkbox" checked="checked"></input></source>
   −
ئه‌نجامی ئه‌و كۆده‌،ئه‌توانی ته‌نها male یان Female دیاری بكه‌یت،
     −
<source lang='html4strict'><input type="file" /></source>
  −
ئه‌توانی په‌ڕگه‌ێك ببینیت له‌ ناو كۆمپیوته‌ره‌كه‌ت،یان حه‌ز ده‌كه‌یت په‌ڕگه‌ێك سه‌ێری بكه‌یت یان پاشه‌كه‌وتی بكه‌یت،
     −
<source lang='html4strict'><input type="submit" /></source>
  −
به‌كاردێت بۆ دروستكردنی دوگمه‌ی ناردن،ئه‌توانی خۆت به‌ هه‌مان شێوه‌ دوگمه‌ی تر زۆر بكه‌یت،به‌ هه‌مان شێوه‌ ئه‌توانی دوگمه‌ی '''reset''' دروست بكه‌یت،ته‌نها له‌ جیاتی submit بنوسه‌ reset،
     −
*'''تێبینی''':تاگی input هه‌موو كات به‌م شێوه‌یه‌ داده‌خرێت<code> </</code>
     −
*textarea:وه‌ك textbox وایه‌ به‌ڵام ئه
   
[[Category:WebDesign]]
 
[[Category:WebDesign]]
  {{DISPLAYTITLE:فێربوونی زمانی HTML بەکوردی}}
+
  {{DISPLAYTITLE:فێربوونی زمانی HTML بە کوردی}}
Nuseran
١٥٦

دەستکاری