Зертханалық жұмыс: Сайт мазмұнын вёрстка жасау

Мақсат: HTML және CSS қолдана отырып, құрылымдалған, бейімделетін және әдемі веб-бет жасауға үйрену.

Бағалау критерийлері:
• Сайт құрылымын жасау үшін вёрстка дағдыларын қолданады.
• CSS арқылы элементтерді стильдейді.
• Әртүрлі құрылғыларда дұрыс көрсетілетін бейімделген макет жасайды.

Жұмыс барысы:

1. Дайындық кезеңі
   HTML және CSS негіздерімен танысыңыз.
   • CSS негізгі қасиеттерін қолдануды үйреніңіз:
   o Қаріптер: font-family, font-size, color.
   o Ара қашықтықтар: margin, padding.
   o Өлшемдер: width, height.
   o Элементтердің орналасуы: display, flexbox, grid.
   • Мәтіндік редактор (мысалы, Visual Studio Code) және браузер дайындаңыз.

2. HTML құжатын жасау
   .html кеңейтімі бар жаңа файл жасаңыз.
   • HTML құрылымын қосыңыз:

<!DOCTYPE html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

<title>Сайт мазмұнын вёрстка жасау</title>

<link rel=»stylesheet» href=»styles.css»>

</head>

<body>

<!— Негізгі контент —>

</body>

</html>

3. HTML мазмұнын қосу: Бет құрылымын жасаңыз:

<header>

<h1>Менің алғашқы сайтым</h1>

<nav>

<ul>

<li><a href=»#about»>Өзім туралы</a></li>

<li><a href=»#portfolio»>Портфолио</a></li>

<li><a href=»#contact»>Байланыс</a></li>

</ul>

</nav>

</header>

<main>

<section id=»about»>

<h2>Өзім туралы</h2>

<p>Сәлем! Менің атым Алекс, мен веб-әзірлеушімін. Әдемі әрі ыңғайлы сайттар жасағанды ұнатамын.</p>

</section>

<section id=»portfolio»>

<h2>Менің жобаларым</h2>

<div class=»projects»>

<div class=»project»>

<h3>Жоба 1</h3>

<p>Жоба 1 сипаттамасы</p>

</div>

<div class=»project»>

<h3>Жоба 2</h3>

<p>Жоба 2 сипаттамасы</p>

</div>

</div>

</section>

</main>

<footer>

<p>&copy; 2024 Менің сайтым</p>

</footer>

4. CSS қосу (styles.css)

body {

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 0;

padding: 0;

background-color: #f9f9f9;

}

header {

background: #333;

color: #fff;

padding: 1rem 0;

text-align: center;

}

nav ul {

list-style: none;

padding: 0;

}

nav ul li {

display: inline;

margin: 0 10px;

}

nav ul li a {

color: #fff;

text-decoration: none;

}

main {

padding: 2rem;

}

.projects {

display: flex;

gap: 20px;

}

.project {

background: #fff;

padding: 1rem;

border: 1px solid #ddd;

border-radius: 5px;

flex: 1;

}

footer {

background: #333;

color: #fff;

text-align: center;

padding: 1rem 0;

}

5. Бейімделгішті қосу

@media (max-width: 768px) {

.projects {

flex-direction: column;

}

}

6. Жұмысты тексеру
   Файлдарды сақтап, браузерде ашыңыз.
   • Әртүрлі құрылғыларда немесе DevTools-та бейімделуін тексеріңіз.
7. Есепті рәсімдеу
   Қосыңыз:
   o Толық HTML және CSS код.
   o Нәтиженің скриншоты.
   o Жұмыс барысында жасалған қадамдардың қысқаша сипаттамасы.

Тапсырма үлгісі:
Жеке портфолио үшін веб-бет жасаңыз, оның ішінде:
• Тақырып және навигация мәзірі.
• Өзіңіз туралы қысқаша ақпарат.
• Жобалар блогы (екі-үш жоба).
• Төменгі колонтитул (копирайт).

Кеңестер:
• Элементтерді орналастыруды жеңілдету үшін Flexbox қолданыңыз.
• Қаріптер мен түстердің оқылымды болуына назар аударыңыз.
• Мобильді құрылғыларда бейімделуін тексеріңіз.

Күтілетін нәтиже:
• HTML және CSS арқылы жасалған дайын веб-құжат.
• Эстетикалық, құрылымды және бейімделетін веб-бет.