HTML менен ишти баштоо
HTML-баракчаларын түзүп баштоо үчүн сизге болгону эки курал керек:
1
Тексттик редактор
Текстти түзөтүү үчүн каалаган программа:
- VS Code (сунушталат) — кодду өзгөчөлөп көрсөтүүчү акысыз редактор
- Notepad++ — Windows үчүн жеңил редактор
- Sublime Text — тез жана кубаттуу редактор
- Блокнот — эң жөнөкөй вариант
2
Браузер
Натыйжаларды көрүү үчүн:
- Google Chrome — иштеп чыгуучунун куралдары менен
- Mozilla Firefox — мыкты иштеп чыгуу каражаттары
- Microsoft Edge — Chromium негизиндеги заманбап браузер
💡 Кеңеш: VS Code программасын орнотуп алыңыз — бул кодду автоматтык түрдө толуктоочу жана көптөгөн кошумчалары бар веб-иштеп чыгуу үчүн эң мыкты акысыз редактор.
Биринчи HTML-баракчаны түзүү
1
Файл түзүңүз
Тексттик редакторду ачып, жаңы файл түзүңүз. Аны index.html деп сактаңыз
2
Базалык кодду жазыңыз
Бул кодду көчүрүп, файлыңызга чаптаңыз:
<!DOCTYPE html>
<html lang="ky">
<head>
<meta charset="UTF-8">
<title>Менин биринчи баракчам</title>
</head>
<body>
<h1>Салам, дүйнө!</h1>
<p>Бул менин биринчи HTML-баракчам.</p>
</body>
</html>
3
Браузерде ачыңыз
index.html файлын таап, аны эки жолу чыкылдатуу менен ачыңыз. Сиз биринчи веб-баракчаңызды көрөсүз!
Натыйжанын мисалы:
Салам, дүйнө!
Бул менин биринчи HTML-баракчам.
Негизги HTML-элементтери жана алардын колдонулушу
| Элемент |
Синтаксис |
Колдонуу мисалы |
| Аталыштар |
<h1>...</h1> |
Барактын негизги аталыштары (h1 эң маанилүү, h6 эң кичине) |
| Абзацтар |
<p>...</p> |
Негизги мазмун үчүн тексттик абзацтар |
| Шилтемелер |
<a href="url">...</a> |
Башка баракчаларга же сайттарга гипершилтемелерди түзүү |
| Сүрөттөр |
<img src="img.jpg" alt="сүрөттөмө"> |
Баракчага сүрөттөрдү кошуу |
| Тизмелер |
<ul><li>...</li></ul> |
Маркерленген (ul) жана номерленген (ol) тизмелер |
| Таблицалар |
<table><tr><td>...</td></tr></table> |
Маалыматтар үчүн таблицаларды түзүү |
| Формалар |
<form><input type="text"></form> |
Маалымат киргизүү үчүн формаларды түзүү |
Практикалык тапшырма: Жөнөкөй баракча түзүңүз
Тапшырма
Төмөнкү түзүмдөгү HTML-баракчаны түзүңүз:
- "Менин биринчи сайтым" деген аталыш
- Өзүңүз жөнүндө бир нече абзац текст
- Сиздин хоббилериңиздин тизмеси
- Жакшы көргөн сайтыңызга шилтеме
- Сүрөт (интернеттен тапсаңыз болот)
<!DOCTYPE html>
<html lang="ky">
<head>
<title>Менин биринчи сайтым</title>
</head>
<body>
<h1>Менин биринчи сайтым</h1>
<p>Салам! Менин атым...</p>
<h2>Менин хоббилерим:</h2>
<ul>
<li>Программалоо</li>
<li>Китеп окуу</li>
<li>Спорт</li>
</ul>
<a href="https://example.com">Менин сүйүктүү сайтым</a>
<img src="https://picsum.photos/300/200" alt="Сүрөт мисалы">
</body>
</html>
Баштапкылар үчүн пайдалуу кеңештер
✅ Тегдерди дайыма жабыңыз
Көпчүлүк тегдерди жабуу керек: <p>текст</p>
✅ Туура атрибуттарды колдонуңуз
Сүрөттөр үчүн дайыма alt көрсөтүңүз: <img src="photo.jpg" alt="Сүрөттөмө">
✅ Иерархияны байкаңыз
Тегдер бири-биринин ичине туура жайгашуусу керек: <ul><li>элемент</li></ul>
⚠️ Бул каталардан алыс болуңуз:
- Файлдын башында
<!DOCTYPE html> жазууну унутпаңыз
- UTF-8 коддоосун колдонуңуз:
<meta charset="UTF-8">
<font> же <center> сыяктуу эскирген тегдерди колдонбоңуз
Кодду текшерүүчү куралдар
- W3C Валидатору — HTMLдеги каталарды текшерет (validator.w3.org)
- Иштеп чыгуучу куралдары браузерде (F12)
- HTML Formatter — кодду автоматтык түрдө иреттейт