HTML толық тапсырмалар жинағы
Тақырып: «Веб парақшаларды құрудың негіздері»
Деңгейі: Бастауыш → Орташа
Формат: Қадаммен үйрену + практикалық жұмыстар + кеңейту идеялары
«Мен туралы» парақ
Мақсаты:
- HTML құрылымымен танысу
- Мәтін, тақырып және сурет енгізу
Тапсырма:
- HTML парақ жасаңыз
- Тақырып ретінде атыңызды жазыңыз
- Өз атыңыз туралы 2-3 сөйлем жазыңыз
- Сурет (жеке фото немесе аватар) қойыңыз
Код үлгісі:
<!DOCTYPE html>
<html>
<head>
<title>Мен туралы</title>
</head>
<body>
<h1>Сәлем, мен – Айбек!</h1>
<p>Мен веб-программалау саласына қызығамын. Болашақта IT саласында жұмыс істегім келеді.</p>
<img src="aybek.jpg" alt="Менің суретім" width="200">
</body>
</html>
Кеңейту идеясы:
- Өз қызығушылықтарыңыздың тізімін жасаңыз (
<ul>) - Бөлімдерге бөлу үшін
<hr>тэгін қолданыңыз
Реттелген және реттелмеген тізімдер
Мақсаты:
<ul>,<ol>,<li>тэгтерін қолдану
Тапсырма:
- Сүйікті тағамдарыңыздың тізімін құрыңыз (реттелмеген)
- Күн тәртібіңіздің ретін көрсетіңіз (реттелген)
Код үлгісі:
<h2>Сүйікті тағамдарым</h2>
<ul>
<li>Бешбармақ</li>
<li>Манты</li>
<li>Лағман</li>
</ul>
<h2>Күн тәртібім</h2>
<ol>
<li>Ояну</li>
<li>Сабақ оқу</li>
<li>Спортпен шұғылдану</li>
</ol>
Сілтеме мен суретпен жұмыс
Мақсаты:
<a>және<img>тэгтерін меңгеру
Тапсырма:
- Google, YouTube және Instagram-ға сілтеме қойыңыз
- Әр сілтеменің қасына белгіше (иконка) ретінде сурет қойыңыз
Код үлгісі:
<h2>Менің сүйікті сайттарым</h2>
<a href="https://google.com" target="_blank">
<img src="google.png" width="20"> Google
</a><br>
<a href="https://youtube.com" target="_blank">
<img src="youtube.png" width="20"> YouTube
</a><br>
<a href="https://instagram.com" target="_blank">
<img src="instagram.png" width="20"> Instagram
</a>
Жаңалық беті (кіші жоба)
Мақсаты:
- Веб-парақ құрылымын құру
- Бірнеше бөлім қосу
Тапсырма:
- 3 жаңалық жасаңыз
- Әр жаңалыққа сурет және қысқаша мәтін қосыңыз
Код үлгісі:
<h1>Жаңалықтар</h1>
<h2> 1. Айти курстар ашылды</h2>
<p>Жаңа бағдарлама бойынша жастар тегін білім алады</p>
<img src="kurs.jpg" width="300">
<h2> 2. Роботтар байқауы өтті</h2>
<p>Мектеп оқушылары өз жобаларын ұсынды</p>
<img src="robot.jpg" width="300">
Байланыс формасы
Мақсаты:
- Формалармен жұмыс (input, textarea, button)
Тапсырма:
- Пайдаланушыдан аты, поштасы және хабарламасы сұралсын
- «Жіберу» батырмасы болсын
Код үлгісі:
<h2>Байланыс</h2>
<form>
Атыңыз:<br><input type="text"><br><br>
Email:<br><input type="email"><br><br>
Хабарлама:<br><textarea rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Жіберу">
</form>