13 KiB

Raw Blame History Unescape Escape

HTML Практична вежба: Направите макету блога

Циљеви учења

Примените своје знање HTML-а кроз дизајнирање и кодирање комплетне структуре почетне странице блога. Ова практична вежба ће ојачати концепте семантичког HTML-а, најбоље праксе приступачности и вештине професионалне организације кода које ћете користити током свог пута у веб развоју.

Завршетком ове вежбе, научићете:

Планирање изгледа веб странице пре кодирања
Правилну примену семантичких HTML елемената
Креирање приступачног и добро структурираног кода
Развијање професионалних навика кодирања уз коментаре и организацију

Захтеви пројекта

Део 1: Планирање дизајна (визуелна макета)

Направите визуелну макету почетне странице вашег блога која укључује:

Заглавље са називом сајта и навигацијом
Главни садржај са најмање 2-3 прегледа блог постова
Бочну траку са додатним информацијама (секција о аутору, недавни постови, категорије)
Подножје са контакт информацијама или линковима

Опције за креирање макете:

Ручно цртање: Користите папир и оловку, а затим фотографишите или скенирајте свој дизајн
Дигитални алати: Figma, Adobe XD, Canva, PowerPoint или било која апликација за цртање
Алатке за израду жичаних модела: Balsamiq, MockFlow или сличан софтвер за жичане моделе

Означите секције своје макете HTML елементима које планирате да користите (нпр. "Заглавље - <header>", "Блог постови - <article>").

Део 2: Планирање HTML елемената

Направите списак који повезује сваку секцију ваше макете са одређеним HTML елементима:

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

Обавезни елементи које треба укључити: Ваш HTML мора садржати најмање 10 различитих семантичких елемената са ове листе:

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <a>
<img>, <time>, <blockquote>, <strong>, <em>

Део 3: Имплементација HTML-а

Кодирајте почетну страницу блога пратећи ове стандарде:

Структура документа: Укључите исправан DOCTYPE, html, head и body елементе
Семантички код: Користите HTML елементе за њихову предвиђену намену
Приступачност: Укључите исправан alt текст за слике и смислен текст за линкове
Квалитет кода: Користите доследно увлачење и смислене коментаре
Садржај: Укључите реалистичан садржај блога (можете користити текст као привремени садржај)

Пример HTML структуре:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Део 4: Рефлексија

Напишите кратку рефлексију (3-5 реченица) која одговара на следећа питања:

Које HTML елементе сте најсигурније користили?
Са којим изазовима сте се сусрели током планирања или кодирања?
Како вам је семантички HTML помогао да организујете свој садржај?
Шта бисте урадили другачије у вашем следећем HTML пројекту?

Контролна листа за предају

Пре предаје, уверите се да сте:

Направили визуелну макету са означеним HTML елементима
Завршили HTML датотеку са исправном структуром документа
Укључили најмање 10 различитих семантичких HTML елемената на одговарајући начин
Додали смислене коментаре који објашњавају структуру вашег кода
Проверили исправност HTML синтаксе (тестирајте у претраживачу)
Написали рефлексију која одговара на постављена питања

Рубрика за процену

Критеријум	Изузетно (4)	Добро (3)	У развоју (2)	Почетно (1)
Планирање и дизајн	Детаљна, добро означена макета која показује јасно разумевање изгледа и семантичке HTML структуре	Јасна макета са већином секција правилно означених	Основна макета са неким означеним деловима, показује опште разумевање	Минимална или нејасна макета, недостаје правилна идентификација секција
Употреба семантичког HTML-а	Користи 10+ семантичких елемената на одговарајући начин, показује дубоко разумевање HTML структуре и приступачности	Користи 8-9 семантичких елемената правилно, показује добро разумевање семантичког кода	Користи 6-7 семантичких елемената, нека конфузија око правилне употребе	Користи мање од 6 елемената или погрешно примењује семантичке елементе
Квалитет и организација кода	Изузетно добро организован, правилно увучен код са свеобухватним коментарима и савршеном HTML синтаксом	Добро организован код са добрим увлачењем, корисним коментарима и исправном синтаксом	Углавном организован код са неким коментарима, мањим проблемима у синтакси	Лоша организација, минимални коментари, више грешака у синтакси
Приступачност и најбоље праксе	Одлично разматрање приступачности, смислен alt текст, правилна хијерархија заглавља, прати све савремене HTML најбоље праксе	Добре карактеристике приступачности, одговарајућа употреба заглавља и alt текста, прати већину најбољих пракси	Неке разматране приступачности, основни alt текст и структура заглавља	Ограничене карактеристике приступачности, лоша структура заглавља, не прати најбоље праксе
Рефлексија и учење	Инсипирајућа рефлексија која показује дубоко разумевање HTML концепата и промишљену анализу процеса учења	Добра рефлексија која показује разумевање кључних концепата и неку самосвест о учењу	Основна рефлексија са ограниченим увидом у HTML концепте или процес учења	Минимална или недостајућа рефлексија, показује мало разумевања научених концепата

Ресурси за учење

Основни референци:

MDN HTML Elements Reference - Комплетан водич за све HTML елементе
HTML5 Semantic Elements - Разумевање семантичког кода
Web Accessibility Guidelines - Креирање приступачног веб садржаја
HTML Validator - Провера синтаксе HTML-а

Савети за успех:

Почните са макетом пре него што напишете било какав код
Користите алатке за програмере у претраживачу да бисте прегледали структуру HTML-а
Тестирајте своју страницу на различитим величинама екрана (чак и без CSS-а)
Читајте свој HTML наглас да проверите да ли структура има логичан смисао
Размислите како би читач екрана интерпретирао структуру ваше странице

💡 Запамтите: Ова вежба се фокусира на структуру и семантику HTML-а. Не брините о визуелном стилу – за то служи CSS! Ваша страница може изгледати једноставно, али треба да буде добро структуирана и смислена.

Одрицање од одговорности:
Овај документ је преведен помоћу услуге за превођење вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

13 KiB Raw Blame History Unescape Escape