Зертханалық жұмыс: Семантикалық тегтер

Мақсат: HTML семантикалық тегтерін қолдануды үйрену, веб-бет құрылымын жақсарту, мазмұнды пайдаланушылар мен іздеу жүйелеріне ыңғайлы ету.

Бағалау критерийлері:
• HTML семантикалық тегтерін біледі.
• Оларды құрылымдалған бет құру үшін қолданады.
• Оқылымдылығы мен логикалық ұйымдастырылуы жақсартылған веб-бет жасайды.

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

1. Дайындық кезеңі:
   HTML5 семантикалық тегтерімен танысыңыз:
   <header> бет немесе бөлімнің тақырыбы.
   <nav> навигация мәзірі.
   <main> негізгі контент.
   <section> логикалық бөлім.
   <article> дербес мазмұн блогы.
   <aside> қосымша ақпарат немесе ескертулер.
   <footer> төменгі колонтитул.
   Семантикалық және семантикалық емес тегтердің айырмашылығын түсініңіз (мысалы, <div> және <span>).

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>

</head>

<body>

<!— Бет контенті —>

</body>

</html>

3. Семантикалық құрылымды қосу:
   Тақырып және мәзір:

<header>

<h1>Менің семантикалық веб-бетім</h1>

<nav>

<ul>

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

<li><a href=»#services»>Қызметтер</a></li>

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

</ul>

</nav>

</header>

Негізгі контент:

<main>

<section id=»about»>

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

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

</section>

<section id=»services»>

<h2>Менің қызметтерім</h2>

<article>

<h3>Сайт әзірлеу</h3>

<p>Мен бірегей дизайн мен функционалдығы бар сайттар жасаймын.</p>

</article>

<article>

<h3>SEO-оптимизация</h3>

<p>Сайттардың іздеу жүйелерінде көрінуін жақсартамын.</p>

</article>

</section>

</main>

Бүйірлік ақпарат:

<aside>

<h3>Пайдалы сілтемелер</h3>

<ul>

<li><a href=»https://example.com»>Портфолио</a></li>

<li><a href=»https://example.com»>Блог</a></li>

</ul>

</aside>

Төменгі колонтитул:

<footer>

<p>&copy; 2024 Менің сайтым. Барлық құқықтар қорғалған.</p>

<p>Байланысу: <a href=»mailto:example@example.com»>example@example.com</a></p>

</footer>

4. Жұмысты тексеру:
   o Файлды сақтап, браузерде ашыңыз.
   o Құрылымның дұрыс көрсетілуін тексеріңіз.
5. Есепті рәсімдеу:
   Қосыңыз:
   Толық HTML құжат коды.
   Нәтиженің браузердегі скриншоты.
   Әр семантикалық тегтің қолданылуын қысқаша түсіндіру.

Тапсырма үлгісі:
Әзірлеушінің портфолиосы үшін келесі бөлімдермен веб-бет жасаңыз:
• Тақырып: Әзірлеушінің аты және навигация мәзірі.
• Өзім туралы: Қысқаша биография.
• Жобалар: Әр жобаны сипаттау үшін <article> қолданыңыз.
• Байланыс: Email және әлеуметтік желі сілтемелері.

Кеңестер:
• Мүмкіндігінше <div> орнына семантикалық тегтерді қолданыңыз.
• Бет құрылымының логикалық және ыңғайлы болуына назар аударыңыз.
• Қолжетімділікті тексеріңіз (мысалы, мәзір үшін <nav> дұрыс қолданылғанын).

Күтілетін нәтиже:
• Семантикалық құрылымы бар веб-бет.
• Барлық негізгі семантикалық тегтердің қолданылуы.
• HTML5 стандарттарына сәйкес, оқылымды және функционалды құжат.