وانەی 1 لە 67
وانەی یەکەم: دروستکردنی یەکەم دۆکیومێنتی HTML
ماوە: نزیکەی ٤ تا ٥ خولەک (درێژترین وانەی خولەکەیە، چونکە بنەمای هەموو شتێکی تر دادەنێت). فایلی دەستپێک: نییە. فێرخواز index.html دروست دەکات.
ناوەڕۆکی ئەم وانەیە
بەشی یەک: دروستکردنی فایلی HTML (نزیکەی ١.٥ خولەک) بەشی دوو: تاگ و توخم (Element) بەشی سێ: توخمی سەرەکیبەشی یەک: دروستکردنی فایلی HTML (نزیکەی ١.٥ خولەک)
ئایا فایلێکی تێکستی ئاسایی دەتوانێت ببێت بە لاپەڕەی وێب؟ با بزانین.
فایلی HTML تەنها فایلێکی تێکستی ئاساییە. جیاوازییەکەی ئەوەیە کە ناوەکەی بە html. کۆتایی دێت. ئەم کۆتاییە بە وێبگەڕ دەڵێت: «ئەم فایلە وەک لاپەڕەی وێب پیشان بدە.»
بۆ دەستپێکردن، دوو شتمان پێویستە: کۆدنوس بۆ نووسینی کۆد، و وێبگەڕ بۆ بینینی ئەنجامەکە.
- کۆدنوس: بۆ نووسینی کۆدهەر کۆدنوسێک بەکار بهێنی بەڵام باوترین کۆدنوس VS Code, لەم بەستەرە دایبەزێنە https://code.visualstudio.com/download وە دەتوانی سەیری ئەم ڤیدیۆیە بکەیت بۆ چۆنیەتی دابەزاندنی https://www.youtube.com/watch?v=SNIQ0Iw-sPc
- وێبگەڕ: وەک گوگڵ کڕوم، مایکرۆسۆفت ئیج، سەفاری، یان مۆزێلا فایەرفۆکس
١. کۆدنوسێکەت بکەرەوە.
٢. فۆڵدەرێکی نوێ دروست بکە بە ناوی yakam-malpary-mn.
٣. لەناو فۆڵدەرەکەدا فایلێکی نوێ دروست بکە بە ناوی index.html.
index.html ناوی باوی لاپەڕەی سەرەکی ماڵپەڕە، بۆیە ئێمەش هەمان ناو بەکاردەهێنین.
تێبینی: لە ناوی فایلەکاندا پیتی بچووک بەکاربهێنە و بۆشایی مەهێڵەرەوە.
هەڵەیەکی باو: هەندێک کۆمپیوتەر کۆتایی فایلەکان (extension) دەشارنەوە. ئەگەر فایلەکەت بە نهێنی ناوی first-page.html.txt بێت، وێبگەڕ کۆدەکەت وەک تێکستی ئاسایی پیشان دەدات نەک وەک لاپەڕە. دڵنیابەرەوە ناوەکە بەڕاستی بە html. کۆتایی دێت.
بەشی دوو: تاگ و توخم (Element)
HTML بە وشەی تایبەت دەنووسرێت کە لەنێوان دوو کەوانەی<> تیژدان: هێمای «کەمتر لە» و «زیاتر لە» لەسەر کیبۆردەکەت. وشەیەک لەنێو ئەم کەوانانەدا پێی دەگوترێت تاگ (Tag). تاگ ڕێنمایییە بۆ وێبگەڕ.
زۆربەی تاگەکان بە جووت دێن: تاگی دەستپێک، و تاگی کۆتایی کە پێش ناوەکەی هێمای / هەیە.
<p>Hello!</p><p>تاگی دەستپێکە.</p>تاگی کۆتاییە.- Hello! ئەو تێکستەی لەنێوانیان تەگەکانە "Hello!" بریتییە لە ناوەڕۆکە.
تاگی دەستپێک، ناوەڕۆک و تاگی کۆتایی پێکەوە دەبنە توخم (Element). کەواتە
<p> تاگە، و هەموو شتەکە، لە تاگی دەستپێکەوە تا تاگی کۆتایی، توخم(Element)ی پەرەگرافە.بەشی سێ: توخمی سەرەکی
هەموو لاپەڕەیەکی HTML لە سێ توخمی سەرەکی دروست دەبێت. یەک بە یەک زیادیان دەکەین.
یەکەم،
<html>. هەموو شتێکی تری لاپەڕەکە لەخۆ دەگرێت.<html>
</html>وەک ئەوە بیر بکەرەوە: توخمی <html> وەک تەواوی خانووەکەیە.لەناو
<html> دوو بەش هەیە. یەکەم:
<head>ـە. زانیاری دەربارەی لاپەڕەکە لەخۆ دەگرێت و لەسەر خودی لاپەڕەکە پیشان نادرێت. ئێستا یەک شتی تێدا دەنووسین: <title>، ئەو تێکستەی لەسەر تابی وێبگەڕ دەردەکەوێت.<html>
<head>
<title>یەکەم ماڵپەڕی من</title>
</head>
</html>دووەم: <body>ـە. هەموو ئەو شتانەی سەردانیکەر لە لاپەڕەکەدا دەیبینێت لێرە دادەنرێن. با سەردێڕێک و پەرەگرافێک زیاد بکەین.
<html>
<head>
<title>یەکەم ماڵپەڕی من</title>
</head>
<body>
<h1>ئەمە سەردێڕە</h1>
<p>یەکەم پەرەگراف</p>
</body>
</html>سەرنج بدە، <head> و <body> لەناو <html>ـدان، و <title> لەناو <head>ـە. کۆدەکە بە بۆشایی ڕێک دەخەین بۆ ئەوەی ببینین چی لەناو چیدایە.
ئەم توخمانە ناوەڕۆکەکەمان بۆ وێبگەڕ دیاری دەکەن: «ئەمە سەردێڕە»، «ئەمە پەرەگرافە».
<h1>یەکەم سەردێڕ</h1><p>یەکەم پەرەگراف.</p>کۆدەکان لە فایلەکەتدا بنووسە، فایلەکە بە Ctrl+S پاشەکەوت بکە، پاشان لە ناو فۆڵدەرەکە فایلەکە بکەرەوە لە وێبگەڕدا.
پێش ئەوەی بیکەیتەوە، پێشبینی بکە: وشەکانی «یەکەم ماڵپەڕی من» لە کوێ دەردەکەون؟
ناونیشانەکە لەسەر تابی وێبگەڕەکەیە. سەردێڕ و پەرەگرافەکە لەسەر لاپەڕەکەن، چونکە لە
<body>دان.پوختە
- فایلی HTML تێکستێکی ئاساییە و بە html. کۆتایی دێت.
- > و < تاگ دەگرنە خۆیان. تاگ ڕێنمایییە بۆ وێبگەڕ.
- توخم(Element) بریتییە لە تاگی دەستپێک، ناوەڕۆک و تاگی کۆتایی.
<html>تەواوی لاپەڕەکە دەگرێتە خۆی،<head>زانیاری دەربارەی لاپەڕەکە لەخۆ دەگرێت، و<body>ئەوەی سەردانیکەر دەیبینێت.
ڕاهێنان
تێکستی
<title>، <h1> و <p> بگۆڕە. پاشەکەوتی بکە، وێبگەڕەکە نوێ بکەرەوە و ببینە چی گۆڕا.نموونە
html<html>
<head>
<title>یەکەم ماڵپەڕی من</title>
</head>
<body>
<h1>ئەمە سەردێڕە</h1>
<p>یەکەم پەرەگراف</p>
</body>
</html>خۆت تاقی بکەرەوە ↗
ئەنجام
چوونەژوورەوە بۆ پاشەکەوتکردنی پێشکەوتنت لە فێربووندا.