کۆرسی بەخۆڕایی

HTML

پێشەکی خولەکە (نزیکەی ٢ خولەک)

HTML لە سفرەوە فێربە: یەکەم هەنگاوت بۆ پەرەپێدانی وێب

ئایا هەرگیز بیرت لەوە کردووەتەوە ماڵپەڕەکان چۆن دروست دەکرێن؟

بیر لەو ماڵپەڕانە بکەرەوە کە ڕۆژانە سەردانیان دەکەیت. ڤیدیۆ دەبینیت، بەدوای وەڵامدا دەگەڕێیت و وتار دەخوێنیتەوە. بەڵام ئایا هەرگیز پرسیارت کردووە لەپشت شاشەکەوە چی ڕوو دەدات؟ وێبگەڕ چۆن دەزانێت سەردێڕ، پەرەگراف، وێنە یان دوگمەیەک لە کوێ دابنێت؟

وەڵامەکە بە شتێکی سەرسوڕهێنەرو سادە دەست پێدەکات: HTML.

HTML کورتکراوەی HyperText Markup Language ە و بنەمای نزیکەی هەموو ماڵپەڕێکی ئینتەرنێتە. باشترین بەشەکەی ئەوەیە کە پێویست ناکات شارەزا بیت، یان تەنانەت بزانیت پڕۆگرامسازی چییە، بۆ ئەوەی فێری ببیت. تەنها کۆمپیوتەرێک و کەمێک ئارەزووی فێربوونت پێویستە.

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

هەنگاو بە هەنگاو فێری تێکست، لینک، وێنە، لیست، پێکهاتەی لاپەڕە، فۆرم، خشتە، دەنگ و ڤیدیۆ دەبیت، و بەشە شاراوەکەی هەر لاپەڕەیەک، واتە سەر (head).

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

لە کۆتایی خولەکەدا ماڵپەڕەکان وەک جاران نابینیت. ئەو توخمانە دەبینیت کە لەپشتیانەوەن، تێدەگەیت ناوەڕۆکیان چۆن دروست کراوە، و دەزانیت کام کار هی HTMLـە و کامیان هی CSS و JavaScriptـە، و دەزانیت خۆت ئەو پێکهاتەیە چۆن دروست بکەیت.

ئەمڕۆ نۆرەی تۆیە. با دەست پێبکەین.

پێویستیەکانی کۆرس: تەنها یەکێک لە بەرنامەکانی کۆد نوسینت پێویستە، نمونە VS Code , دەتوانی شیوازی دابەزانی VS Code لەم ڤیدیۆیە ببینی https://www.youtube.com/watch?v=SNIQ0Iw-sPc
دەست بە فێربوون بکە ←

وانەکانی کۆرس

بنەماکانی دۆکیومێنتی HTML 5 وانە

  1. وانەی یەکەم: دروستکردنی یەکەم دۆکیومێنتی HTML
  2. وانەی ٢: DOCTYPE، lang، dir و charset
  3. وانەی ٣: سەردێڕەکان (Headings)
  4. وانەی ٤: پەرەگرافەکان (Paragraphs)
  5. وانەی ٥: دێڕی نوێ و هێڵی ئاسۆیی <br> و <hr>

تایبەتمەندییەکان و پشکنینی ناوەوەی لاپەڕە 2 وانە

  1. وانەی ٦: تایبەتمەندی (Attribute) چییە؟
  2. وانەی ٧: سەیرکردنی ناو لاپەڕە: View Source و DevTools

لینک و ڕێڕەوی فایلەکان 6 وانە

  1. وانەی ٨: توخمی a و href
  2. وانەی ٩: کردنەوەی لینک لە تابێکی نوێدا: target و rel
  3. وانەی ١٠: URLی تەواو(absolute) و URLی ڕێژەیی(Relative)
  4. وانەی ١١: فۆڵدەر و ڕێڕەوی فۆڵدەری سەرەوە
  5. وانەی ١٢: لینکی بازدان بە id
  6. وانەی ١٣: لینکی ئیمەیڵ و تەلەفۆن

وێنە و دەقی ڕوونکەرەوە 4 وانە

  1. وانەی ١٤: توخمی img: src و alt
  2. وانەی ١٥: پانی و بەرزی وێنە (width و height)
  3. وانەی ١٦: figure و figcaption
  4. وانەی ١٧: وێنە وەک لینک

تێکست و لیستەکان 9 وانە

  1. وانەی ١٨: گرنگی و جەختکردنەوە: strong و em
  2. وانەی ١٩: وتە: blockquote و q
  3. وانەی ٢٠: هێما تایبەتەکان: Entity و ئیمۆجی
  4. وانەی ٢١: پیشاندانی کۆد: pre و code
  5. وانەی ٢٢: کۆمێنتەکان (Comments)
  6. وانەی ٢٣: لیستی ڕیزنەکراو: ul و li
  7. وانەی ٢٤: لیستی ڕیزکراو: ol
  8. وانەی ٢٥: لیستی لەناو لیست (Nested)
  9. وانەی ٢٦: پێداچوونەوە: تێکست، لیست، لینک و وێنە

پێکهاتەی لاپەڕە 6 وانە

  1. وانەی ٢٧: بەشەکانی لاپەڕە: header، nav، main و footer
  2. وانەی ٢٨: هەڵبژاردنی section، article یان aside
  3. وانەی ٢٩: کۆکردنەوەی ناوەڕۆک بە div و span
  4. وانەی ٣٠: تایبەتمەندییەکانی class و id
  5. وانەی ٣١: پیشاندان و شاردنەوەی ناوەڕۆک: details و summary
  6. وانەی ٣٢: پێداچوونەوە: پێکهاتەی لاپەڕە Page Structure

بنەماکانی فۆرم و ناردنی داتا 7 وانە

  1. وانەی ٣٣: توخمی input و خانەی تێکست
  2. وانەی ٣٤: چێکبۆکس (Checkbox)
  3. وانەی ٣٥: لیستی دابەزین: select و option
  4. وانەی ٣٦: توخمی form: ناردنی داتا
  5. وانەی ٣٧: تایبەتمەندی name
  6. وانەی ٣٨: label لەگەڵ for و id
  7. وانەی ٣٩: placeholder و value

خانەکانی نووسین و هەڵبژاردن 8 وانە

  1. وانەی ٤٠: خانەی ئیمەیڵ
  2. وانەی ٤١: خانەی وشەی نهێنی password
  3. وانەی ٤٢: خانەی تەلەفۆن و URL: tel و url
  4. وانەی ٤٣: خانەی گەڕان
  5. وانەی ٤٤: تایبەتمەندی autocomplete
  6. وانەی ٤٥: textarea
  7. وانەی ٤٦: دوگمەکانی ڕادیۆ (Radio Buttons)
  8. وانەی ٤٧: گروپی چێکبۆکس: ناردنی چەند بەهایەک

خانەکانی ژمارە، ڕێکەوت، ڕەنگ و فایل 6 وانە

  1. وانەی ٤٨: خانەی ژمارە: min، max و step
  2. وانەی ٤٩: خانەی مەودا: range
  3. وانەی ٥٠: خانەی ڕێکەوت "بەروار" Date
  4. وانەی ٥١: خانەی ڕەنگ
  5. وانەی ٥٢: خانەی فایل
  6. وانەی ٥٣: خانەی شاراوە: hidden

پشکنین و ڕێکخستنی فۆرمەکان 7 وانە

  1. وانەی ٥٤: تایبەتمەندی required
  2. وانەی ٥٥: minlength و maxlength
  3. وانەی ٥٦: تایبەتمەندی pattern
  4. وانەی ٥٧: disabled و readonly
  5. وانەی ٥٨: fieldset و legend
  6. وانەی ٥٩: جۆرەکانی دوگمە
  7. وانەی ٦٠: پێداچوونەوە: هەڵبژاردنی کۆنترۆڵی گونجاوی فۆرم

خشتەکان 6 وانە

  1. وانەی ٦١: table، tr و td
  2. وانەی ٦٢: سەردێڕەکانی خشتە: th و scope
  3. وانەی ٦٣: توخمی caption
  4. وانەی ٦٤: گروپی ڕیزەکان: thead، tbody و tfoot
  5. وانەی ٦٥: یەکخستنی خانەکان: colspan و rowspan
  6. وانەی ٦٦: پێداچوونەوە: خشتەکان

دەنگ، ڤیدیۆ و ناوەڕۆکی دەرەکی 1 وانە

  1. وانەی ٦٧: دەنگ: audio