НТМL и CSS

21/08/2024 НТМL , CSS и UML Leave a comment 589 Views

Курс основи на програмирането с НТМL и CSS

СЪДЪРЖАНИЕ НА УЧЕБНАТА ПРОГРАМА

Общо часове: 60

  1. Ресурси и основни правила
  • Часове: 8
  • Съдържание:
    • Запознаване с наличните ресурси за курса
    • Основни правила за работа и сътрудничество
    • Въведение в (HTML)
    • Практическа работа: създаване на първоначален HTML документ
  1. Структура на (HTML)
  • Часове: 8
  • Съдържание:
    • Запознаване със структурата на HTML документ
    • Практическа работа с HTML елементи:
      • Основни тагове (<html>, <head>, <body>, <title>)
      • Заглавия (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
      • Параграфи (<p>)
      • Списъци (неподредени, подредени)
      • Линкове и изображения
  1. Въведение в CSS
  • Часове: 8
  • Съдържание:
    • Основни принципи на CSS
    • Структура на CSS файл
    • Връзка между HTML и CSS
    • Практическа работа: стилове и селектори, правила за стил
  1. Самостоятелна работа, въпроси и упражнение
  • Часове: 8
  • Съдържание:
    • Задаване на задачи за самостоятелна работа
    • Практическо приложение
    • Въпроси и дискусия
  1. CSS Бокс модел
  • Часове: 8
  • Съдържание:
    • Въведение в бокс модела на CSS
    • Практическа работа:
      • Работа с margin, padding, border и content
      • Използване на ширина и височина
      • Примери и реализация на CSS layout
  1. Резолюции и медийни заявки
  • Часове: 8
  • Съдържание:
    • Въведение в медийните заявки и responsive design
    • Практическа работа:
      • Създаване на адаптивни дизайни
      • Работа с резолюции и различни устройства
      • Преглед на CSS Flexbox и Grid
  1. Самостоятелна работа, въпроси и упражнение
  • Часове: 8
  • Съдържание:
    • Самостоятелна работа по зададените теми
    • Разширяване и прилагане на знанията по практическа задача
    • Въпроси и обратна връзка
  1. Указания за бъдеща работа, обратна връзка и задаване на курсова работа
  • Часове: 4
  • Съдържание:
    • Инструкции за финализиране на курсова работа
    • Обратна връзка за цялостния курс
    • Задаване на финална задача и изисквания за представяне

КУРСОВА РАБОТА

  • Описание: Да се разработи статичен уебсайт, като се използват HTML, елементите на CSS, топографията, както и бокс модела на CSS.
  • Изисквания:
    • Уебсайтът трябва да съдържа 5 страници.
    • Страниците трябва да бъдат свързани чрез общо меню, достъпно от всяка страница.
    • Използване на медийни заявки за адаптивност на дизайна.
  • Предаване: Работата да бъде предадена във формат, готов за хостване на уеб сървър.

 

Ресурси и основни правила

Урок 1: Въведение в  (HTML)

Теоретична част:

  1. Въведение в HTML:
    • Какво е HTML?
    • История на HTML и неговата еволюция.
    • Как работи HTML в уеб браузъри.
  2. Основни правила за работа:
    • Как да използваме редактори за код (например VS Code).
    • Организация на файлове и директории.
    • Най-добри практики за писане на чист и подреден код.

Практическа задача:

  • Задача 1: Създайте прост HTML документ:
    • Включете базови тагове като <html>, <head>, <body>, и <title>.
    • Добавете заглавие на страницата и един параграф с текст.
    • Запишете и отворете HTML файла в браузъра, за да видите резултата.

Урок 2: Структура на HTML

Теоретична част:

  1. Елементи и тагове в HTML:
    • Какво са HTML елементи и тагове?
    • Структура на типичен HTML документ.
  2. Работа с различни елементи:
    • Заглавия (<h1> – <h6>).
    • Параграфи (<p>).
    • Линкове (<a>).
    • Списъци (неподредени <ul>, подредени <ol>).
    • Изображения (<img>).

Практическа задача:

  • Задача 2: Създайте HTML страница със следната структура:
    • Заглавие на страницата.
    • Главен заглавие (<h1>) и подзаглавия (<h2>).
    • Два параграфа текст.
    • Неподреден списък с минимум 3 елемента.
    • Подреден списък с минимум 3 елемента.
    • Добавете изображение с атрибути src и alt.
    • Включете линк към друга страница или уебсайт.

Урок 3: Въведение в CSS

Теоретична част:

  1. Какво е CSS?
    • Цел на CSS в уеб дизайна.
    • Как се свързва HTML с CSS.
  2. Структура на CSS файл:
    • Селектори, свойства и стойности.
    • Вътрешни, външни и вградени стилове.
    • Приоритет на стилове (Cascading).

Практическа задача:

  • Задача 3: Създайте външен CSS файл и го свържете с HTML страница:
    • Променете цвета на текста, фона на страницата и стила на заглавията.
    • Променете стила на списъците и линковете.
    • Използвайте външен стилов файл, за да организирате кода.

Урок 4: Самостоятелна работа, въпроси и упражнение

Теоретична част:

  1. Обобщение на наученото:
    • Преглед на HTML и CSS до момента.
    • Основни концепции и примери.
  2. Въпроси и отговори:
    • Обсъждане на затруднения и въпроси.

Практическа задача:

  • Задача 4: Разработете малък HTML/CSS проект по избор:
    • Създайте структурата на сайта и приложете основни CSS стилове.
    • Включете заглавия, параграфи, списъци и линкове.
    • Оформете страницата с цветове и шрифтове.

Урок 5: CSS Бокс модел

Теоретична част:

  1. Какво е бокс модел?
    • Обяснение на концепцията на бокс модела.
    • Компоненти на бокс модела: margin, border, padding, content.
  2. Работа с ширини, височини и граници:
    • Как да контролираме размера на елементи.
    • Примери и практическо приложение.

Практическа задача:

  • Задача 5: Създайте HTML/CSS страница, демонстрираща бокс модела:
    • Създайте блокове с различни margin, padding и border стойности.
    • Настройте ширина и височина на блоковете.
    • Проверете как тези стойности се отразяват на общия размер на елементите.

Урок 6: Резолюции и медийни заявки

Теоретична част:

  1. Въведение в медийните заявки:
    • Какво са медийни заявки и защо са важни за responsive design.
    • Примери за медийни заявки за различни устройства.
  2. Работа с различни резолюции:
    • Как да създадем адаптивни уебсайтове.
    • Използване на Flexbox и Grid за layout.

Практическа задача:

  • Задача 6: Създайте адаптивен дизайн с медийни заявки:
    • Използвайте Flexbox или Grid за създаване на layout.
    • Настройте различни стилове за различни резолюции (мобилни устройства, таблети, десктопи).
    • Тествайте сайта на различни екрани и резолюции.

Урок 7: Самостоятелна работа, въпроси и упражнение

Теоретична част:

  1. Обобщение на наученото:
    • Преглед на концепции от предишни уроци.
    • Допълнителни въпроси и отговори.
  2. Финални инструкции:
    • Как да завършим проектите и да подготвим курсовата работа.

Практическа задача:

  • Задача 7: Финализирайте вашия HTML/CSS проект:
    • Уверете се, че всички стилове са правилно приложени.
    • Приложете responsive дизайн към страниците.
    • Подгответе проекта за предаване.

Урок 8: Указания за бъдеща работа, обратна връзка и задаване на курсова работа

Теоретична част:

  1. Инструкции за курсовата работа:
    • Детайли за изискванията и очакванията.
    • Какво да включите в курсовата работа.
  2. Обратна връзка:
    • Обсъждане на общото представяне в курса.
    • Подсказки и съвети за подобряване.

Практическа задача:

  • Задача 8: Започнете работа по курсовата задача:
    • Създайте концепция и структура на сайта.
    • Определете кои страници ще включва сайтът и как ще се свързват.
    • Започнете работа по дизайна и оформлението на страниците.

Ресурси

Урок 1: Въведение в НТМПТ (HTML)

Цели на урока:

  • Да запознае студентите с HTML и основните принципи на уеб разработката.
  • Да демонстрира как се създава прост HTML документ.
  • Да установи правила за организация на работата и файловете.
  1. Въведение в HTML:
  • Какво е HTML?
    • HTML (HyperText Markup Language) е основният език за създаване на уеб страници. Той определя структурата и съдържанието на уеб страниците.
    • HTML използва тагове (елементи), за да маркира различни части от съдържанието, като заглавия, параграфи, изображения и линкове.
  • История на HTML:
    • HTML е създаден през 1991 г. от Тим Бърнърс-Лий, за да улесни обмена на информация в интернет. С времето HTML еволюира и се разширява, като последната му версия е HTML5.
  • Как работи HTML:
    • Браузърите (като Chrome, Firefox, Safari) интерпретират HTML кода и го преобразуват в уеб страница, която потребителите могат да видят и с която могат да взаимодействат.
  1. Основни правила за работа:
  • Избор на текстов редактор:
    • Препоръчителни текстови редактори са Visual Studio Code, Sublime Text, и Notepad++. Те предоставят удобства като цветно кодиране, допълване на кода и поддръжка на различни програмни езици.
  • Организация на файлове и директории:
    • Създаване на главна папка за проекта.
    • Вътре в папката може да има поддиректории като images (за изображения), css (за стилове) и js (за скриптове).
    • Главният HTML файл обикновено се нарича index.html.
  • Най-добри практики:
    • Използване на ясни и описателни имена за файловете.
    • Редовно съхраняване и архивиране на работата.
    • Писане на коментари в кода, за да се обяснят по-сложни части.
  1. Практическа задача:
  • Задача: Създайте първия си HTML документ:
    • Отворете текстовия редактор и създайте нов файл с името index.html.
    • Въведете следния код:

html

Копиране на код

<!DOCTYPE html>

<html lang=“bg“>

<head>

<meta charset=“UTF-8″>

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

<title>Моята първа уеб страница</title>

</head>

<body>

<h1>Здравей свят!</h1>

<p>Това е моят първи параграф на HTML.</p>

</body>

</html>

    • Запазете файла и го отворете в браузъра, за да видите резултата.
  1. Домашна работа:
  • Задача: Опитайте се да добавите още параграфи и заглавия в HTML документа. Експериментирайте с различни тагове като <h2>, <p>, <a> (за линкове) и <img> (за изображения).

Урок 2: Структура на HTML

Цели на урока:

  • Да запознае студентите със структурата на HTML документ.
  • Да покаже как да използват основни HTML елементи.
  • Да развие уменията за създаване на добре структурирани HTML страници.
  1. Елементи и тагове в HTML:
  • Какво са HTML елементи и тагове?
    • HTML елементите се състоят от отварящ и затварящ таг, като текстът между тях се счита за съдържание на елемента.
    • Пример: <h1>Заглавие</h1> – тук <h1> е отварящ таг, Заглавие е съдържание, и </h1> е затварящ таг.
  • Структура на типичен HTML документ:
    • Всеки HTML документ има три основни части:
      • <!DOCTYPE html>: Декларира типа на документа като HTML5.
      • <html>: Обгражда целия HTML код.
      • <head>: Съдържа метаданни като заглавието на страницата, връзки към стилове и скриптове.
      • <body>: Съдържа видимото съдържание на страницата.
  1. Работа с различни елементи:
  • Заглавия (<h1> – <h6>):
    • HTML има шест нива на заглавия, като <h1> е най-голямото и най-важното, а <h6> е най-малкото.
    • Пример: <h1>Главно заглавие</h1> и <h2>Подзаглавие</h2>.
  • Параграфи (<p>):
    • Параграфите се използват за основния текст на страницата.
    • Пример: <p>Това е примерен параграф.</p>.
  • Линкове (<a>):
    • Линковете позволяват навигация към други страници или ресурси.
    • Пример: <a href=“https://example.com“>Посетете Example.com</a>.
  • Списъци:
    • Неподредени списъци (<ul>):
      • Използват се за списъци без определен ред.
      • Пример:

html

Копиране на код

<ul>

<li>Елемент 1</li>

<li>Елемент 2</li>

<li>Елемент 3</li>

</ul>

    • Подредени списъци (<ol>):
      • Използват се за списъци с определен ред.
      • Пример:

html

Копиране на код

<ol>

<li>Първи елемент</li>

<li>Втори елемент</li>

<li>Трети елемент</li>

</ol>

  • Изображения (<img>):
    • Изображенията се добавят с <img> тага, който има задължителни атрибути src (за пътя до файла) и alt (за алтернативен текст).
    • Пример: <img src=“image.jpg“ alt=“Описание на изображението“>.
  1. Практическа задача:
  • Задача: Създайте HTML страница със следната структура:
    • Главно заглавие (<h1>).
    • Подзаглавие (<h2>).
    • Два параграфа с текст.
    • Неподреден списък с минимум 3 елемента.
    • Подреден списък с минимум 3 елемента.
    • Добавете изображение с src и alt.
    • Включете линк към друга страница или уебсайт.

Примерен код:

html

Копиране на код

<!DOCTYPE html>

<html lang=“bg“>

<head>

<meta charset=“UTF-8″>

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

<title>Примерна HTML страница</title>

</head>

<body>

<h1>Главно заглавие</h1>

<h2>Подзаглавие</h2>

<p>Това е първият параграф с текст.</p>

<p>Това е вторият параграф с текст.</p>

<ul>

<li>Първи елемент</li>

<li>Втори елемент</li>

<li>Трети елемент</li>

</ul>

<ol>

<li>Първи подреден елемент</li>

<li>Втори подреден елемент</li>

<li>Трети подреден елемент</li>

</ol>

<img src=“example.jpg“ alt=“Примерно изображение“>

<a href=“https://example.com“>Посетете Example.com</a>

</body>

</html>

  1. Домашна работа:
  • Задача: Разширете HTML страницата, като добавите още изображения, линкове и списъци. Експериментирайте с различни заглавия и параграфи.

Урок 3: Въведение в CSS

Цели на урока:

  • Да запознае студентите с основите на CSS.
  • Да покаже как се използва CSS за стил и оформление на HTML страници.
  • Да демонстрира различни начини за свързване на CSS с HTML.
  1. Какво е CSS?
  • CSS (Cascading Style Sheets) е език, който се използва за описване на външния вид и оформлението на HTML документи.
  • Ролята на CSS:
    • Разделяне на съдържанието (HTML) от външния вид (CSS).
    • Улесняване на поддържането и промяната на стила на множество страници едновременно.
  1. Свързване на CSS с HTML:
  • Вградени стилове (Inline CSS):
    • CSS може да се прилага директно върху HTML елемент чрез атрибута style.
    • Пример: <p style=“color: red;“>Този текст е червен.</p>.
  • Вътрешни стилове (Internal CSS):
    • CSS кодът се пише в <style> таг вътре в <head> на HTML документа.
    • Пример:

html

Копиране на код

<style>

body {

background-color: lightblue;

}

h1 {

color: navy;

}

</style>

  • Външни стилове (External CSS):
    • CSS се записва в отделен файл (обикновено с разширение .css), който се свързва с HTML документа чрез <link> таг в <head>.
    • Пример:

html

Копиране на код

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

    • Примерен външен CSS файл:

css

Копиране на код

body {

background-color: lightblue;

}

h1 {

color: navy;

font-family: Arial, sans-serif;

}

p {

color: darkgray;

}

  1. Структура на CSS файл:
  • Селектори:
    • Селекторите в CSS определят кои HTML елементи ще бъдат стилизирани.
    • Примери за селектори:
      • Елементи: h1, p, div
      • Класове: .classname (приложими към елементи с атрибут class)
      • Идентификатори: #idname (приложими към елементи с атрибут id)
  • Свойства и стойности:
    • CSS дефинира стила чрез двойки свойство: стойност.
    • Примери:
      • color: red; – определя цвета на текста.
      • font-size: 20px; – определя размера на шрифта.
  • Каскадност и приоритети:
    • CSS стои за „Cascading Style Sheets“, защото стиловете могат да се наследяват и комбинират.
    • Вътрешни, външни и вградени стилове имат различни приоритети, като вградените стилове имат най-висок приоритет.
  1. Практическа задача:
  • Задача: Създайте HTML страница с външен CSS файл:
    • Създайте HTML файл с основна структура.
    • Създайте CSS файл с правила за стилизиране на различни HTML елементи като body, h1, p, и a.
    • Свържете CSS файла с HTML файла.

Примерен код:

    • HTML файл (index.html):

html

Копиране на код

<!DOCTYPE html>

<html lang=“bg“>

<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>

<h1>Добре дошли на моята страница!</h1>

<p>Това е параграф, който е стилизиран с външен CSS.</p>

<a href=“https://example.com“>Кликнете тук за повече информация.</a>

</body>

</html>

    • CSS файл (styles.css):

css

Копиране на код

body {

background-color: #f0f0f0;

font-family: ‘Arial’, sans-serif;

}

h1 {

color: #333333;

text-align: center;

}

p {

color: #666666;

font-size: 16px;

line-height: 1.5;

}

a {

color: #007acc;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

  1. Домашна работа:
  • Задача: Опитайте се да добавите още стилове в CSS файла, като например фон за различни елементи, граници, или промяна на шрифтове. Експериментирайте с различни цветове и размери.

Урок 4: Самостоятелна работа, въпроси и упражнение

Цели на урока:

  • Да прегледа наученото до момента.
  • Да даде възможност на студентите да зададат въпроси и да затвърдят знанията си.
  • Да предостави време за практическо приложение на наученото.
  1. Обобщение на наученото:
  • Преглед на HTML:
    • Структура на HTML документ.
    • Основни тагове и елементи.
  • Преглед на CSS:
    • Свързване на HTML с CSS.
    • Основни селектори и свойства.
  1. Въпроси и отговори:
  • Време за обсъждане на затрудненията и въпросите, които студентите може да имат.
  • Разяснения по неясните моменти или концепции.
  1. Практическа задача:
  • Задача: Разработете малък проект, включващ HTML и CSS:
    • Създайте HTML страница, която съдържа:
      • Главно заглавие.
      • Няколко параграфа с текст.
      • Списък с поне три елемента.
      • Линкове към други страници или външни сайтове.
      • Изображение с подходящо описание.
    • Използвайте CSS, за да стилизирате страницата, като приложите:
      • Фонова цветова схема.
      • Различни шрифтове и размери на текста.
      • Стилизиране на списъци и линкове.
  1. Обратна връзка и самостоятелна работа:
  • Време за работа по поставените задачи.
  • Индивидуални въпроси и помощ.
  • След завършване на задачата – обсъждане на резултатите и предостаяне на обратна връзка.
  1. Домашна работа:
  • Задача: Разширете проекта, като добавите още страници, които са свързани помежду си чрез навигационно меню. Създайте стилове, които се прилагат за всички страници, използвайки външен CSS файл.

Урок 5: CSS Бокс модел

Цели на урока:

  • Да обясни концепцията на бокс модела в CSS.
  • Да покаже как бокс моделът влияе на размера и разположението на HTML елементи.
  • Да демонстрира как да се контролира padding, margin, и border на елементи.
  1. Какво е бокс модел?
  • CSS Бокс модел е концепция, която описва как се изчислява пространството, заемано от HTML елемент. Всеки елемент в HTML може да се разглежда като правоъгълна кутия, състояща се от следните компоненти:
    • Content: Съдържанието на елемента (текст, изображение и т.н.).
    • Padding: Пространството между съдържанието и границата (border) на елемента.
    • Border: Границата, която обгръща padding и content.
    • Margin: Пространството извън границата на елемента, което го отделя от други елементи.
  • Изчисляване на размера на елемента:
    • Общата ширина на елемента се изчислява като: width = content width + padding + border + margin.
    • Общата височина на елемента се изчислява по аналогичен начин.
  1. Контролиране на бокс модела с CSS:
  • Свойства на бокс модела:
    • width и height: Определят размерите на съдържанието.
    • padding: Определя вътрешното отстояние на елемента.
    • border: Определя ширината, стила и цвета на границата.
    • margin: Определя външното отстояние на елемента.
  • Пример:

css

Копиране на код

.box {

width: 300px;

padding: 20px;

border: 5px solid black;

margin: 10px;

}

  • Визуализация на бокс модела:
    • Елемент с клас .box ще има обща ширина от 300px (съдържание) + 20px (padding) + 5px (border) + 10px (margin) = 340px.
  1. Практическа задача:
  • Задача: Създайте HTML елемент и приложете бокс модела:
    • Създайте <div> елемент с клас box.
    • Приложете CSS правила за ширина, padding, border и margin.

Примерен код:

    • HTML:

html

Копиране на код

<div class=“box“>

Това е съдържание в кутия с бокс модел.

</div>

    • CSS:

css

Копиране на код

.box {

width: 200px;

padding: 15px;

border: 3px solid blue;

margin: 20px;

background-color: lightgray;

}

  1. Домашна работа:
  • Задача: Експериментирайте с различни стойности на padding, border, и margin, за да видите как те влияят на външния вид и размера на елементите. Създайте няколко кутии с различни стилове и ги подредете една до друга на страницата.

Урок 6: CSS Flexbox модел

Цели на урока:

  • Да въведе концепцията за Flexbox модел в CSS.
  • Да покаже как да се използва Flexbox за подреждане на елементи в контейнер.
  • Да демонстрира основните свойства на Flexbox и техните възможности.
  1. Какво е Flexbox?
  • Flexbox (Flexible Box Layout) е CSS модул, който улеснява подреждането и подравняването на елементи в контейнер, дори когато размерите на тези елементи са динамични или неизвестни.
  • Flexbox е особено полезен за създаване на адаптивни и динамични оформления, без да се налага използването на float или позициониране.
  1. Основни концепции и термини:
  • Flex контейнер: Елементът, върху който се прилага display: flex;.
  • Flex елементи: Директните деца на flex контейнера.
  • Главна ос (Main axis): Основната ос на подреждане на flex елементите. Тя може да бъде хоризонтална или вертикална в зависимост от свойството flex-direction.
  • Перпендикулярна ос (Cross axis): Оста, която е перпендикулярна на главната ос.
  1. Свойства на Flexbox контейнера:
  • display: flex; – Активира Flexbox модела върху контейнера.
  • flex-direction:
    • Определя посоката на подреждане на елементите:
      • row (по подразбиране): Подрежда елементите хоризонтално.
      • column: Подрежда елементите вертикално.
      • row-reverse и column-reverse: Подреждат елементите в обратна посока.
  • justify-content:
    • Определя как се разпределя свободното пространство по главната ос:
      • flex-start: Елементите се подравняват в началото на контейнера.
      • flex-end: Елементите се подравняват в края.
      • center: Елементите се центрират по главната ос.
      • space-between: Разстоянието между елементите е равно, без разстояние от краищата.
      • space-around: Разстоянието между елементите е равно, с полета от краищата.
  • align-items:
    • Определя подравняването на елементите по перпендикулярната ос:
      • flex-start: Елементите се подравняват в началото на перпендикулярната ос.
      • flex-end: Елементите се подравняват в края.
      • center: Елементите се центрират по перпендикулярната ос.
      • stretch: Елементите се разпъват, за да запълнят контейнера.
  • flex-wrap:
    • Позволява елементите да прехвърлят на нов ред, ако не се побират на един ред:
      • nowrap (по подразбиране): Всички елементи остават на един ред.
      • wrap: Елементите се пренасят на нов ред, ако няма достатъчно място.
  1. Свойства на Flexbox елементите:
  • flex-grow:
    • Определя как елементите растат спрямо останалите елементи в контейнера.
    • Пример: Ако два елемента имат flex-grow: 1, те ще заемат равно място. Ако един елемент има flex-grow: 2, а другият flex-grow: 1, първият ще заеме два пъти повече място.
  • flex-shrink:
    • Определя как елементите се свиват, когато няма достатъчно място в контейнера.
  • flex-basis:
    • Определя началния размер на елемента преди разпределянето на свободното пространство.
  • align-self:
    • Позволява да се зададе различно подравняване за отделен елемент по перпендикулярната ос, независимо от align-items на контейнера.
  1. Практическа задача:
  • Задача: Създайте адаптивно меню с помощта на Flexbox.
    • Създайте HTML контейнер за меню с няколко елемента (div или li).
    • Използвайте Flexbox за да подредите елементите хоризонтално и центрирано.

Примерен код:

    • HTML:

html

Копиране на код

<nav class=“navbar“>

<div class=“nav-item“>Начало</div>

<div class=“nav-item“>За нас</div>

<div class=“nav-item“>Услуги</div>

<div class=“nav-item“>Контакти</div>

</nav>

    • CSS:

css

Копиране на код

.navbar {

display: flex;

justify-content: center;

align-items: center;

background-color: #333;

}

.nav-item {

margin: 10px;

padding: 10px 20px;

color: white;

background-color: #444;

border-radius: 5px;

}

  1. Домашна работа:
  • Задача: Опитайте се да създадете галерия от изображения, подредена с Flexbox. Използвайте flex-wrap, за да пренесете изображенията на нов ред, ако не се побират в един ред. Експериментирайте с различни стойности за justify-content и align-items, за да видите как се променя подравняването на изображенията.

Урок 7: Самостоятелна работа, въпроси и упражнение

Цели на урока:

  • Да даде възможност на студентите да преговорят и затвърдят знанията си за Flexbox.
  • Да предостави време за практика и работа по зададените домашни задачи.
  • Да насърчи студентите да задават въпроси и да обсъждат предизвикателствата, с които са се сблъскали.
  1. Преглед на наученото:
  • Преглед на Flexbox:
    • Основни свойства на flex контейнера (flex-direction, justify-content, align-items).
    • Свойства на flex елементите (flex-grow, flex-shrink, align-self).
  1. Въпроси и отговори:
  • Студентите задават въпроси по темите, които са им били трудни.
  • Разясняване и показване на допълнителни примери (при нужда).
  1. Практическа задача:
  • Задача: Работете по проект, който комбинира използването на Flexbox за създаване на адаптивен уебсайт:
    • Създайте HTML структура с няколко секции (например: хедър, съдържание, футър).
    • Използвайте Flexbox за да подредите елементите във всяка секция.
    • Подредете елементи така, че те да се адаптират към различни размери на екрана.
  1. Обратна връзка и самостоятелна работа:
  • Студентите работят по задачата самостоятелно или в групи.
  • Инструкторът предоставя индивидуална помощ и обратна връзка при нужда.
  1. Домашна работа:
  • Задача: Разширете съществуващ проект, като добавите адаптивно оформление с Flexbox, което променя подредбата на елементите в зависимост от размера на екрана (мобилни устройства, таблети, десктопи).

Урок 8: Указания за бъдеща работа, обратна връзка и задаване на курсова работа

Цели на урока:

  • Да обобщи наученото и да даде насоки за по-нататъшна работа и развитие.
  • Да даде подробни указания за курсовата работа.
  • Да предостави обратна връзка и препоръки на студентите.
  1. Обобщение на учебната програма:
  • Преглед на основните теми, които бяха разгледани по време на курса:
    • Основи на HTML и CSS.
    • Използване на Flexbox за създаване на адаптивни оформления.
    • Работа с бокс модел и различни CSS свойства.
  1. Обратна връзка:
  • Инструкторът предоставя обща обратна връзка за напредъка на групата.
  • Студентите могат да споделят своите впечатления и предложения за подобрение на курса.
  1. Указания за курсовата работа:
  • Задача: Да се разработи статичен уебсайт, като се използват научените техники и технологии.
    • Сайтът трябва да съдържа 5 страници, които са свързани в общо меню и да бъдат достъпни от всяка една страница.
    • Използвайте HTML за структурата, CSS за стиловете и Flexbox за адаптивното оформление.
    • Сайтът трябва да бъде функционален и естетически издържан, като показва усвоените знания по време на курса.
  1. Въпроси и отговори:
  • Студентите могат да задават въпроси относно курсовата работа и да получат допълнителни разяснения.
  1. Финални препоръки:
  • Инструкторът дава съвети за ресурси и материали, които могат да бъдат полезни за по-нататъшно изучаване на HTML, CSS и уеб разработката като цяло.
  1. Самостоятелна работа:
  • Студентите започват работа по своите курсови проекти, като при нужда могат да се обърнат към инструктора за помощ и насоки.

Структура на проекта

  • index.html – Начална страница
  • about.html – Страница „За нас“
  • services.html – Страница с услуги
  • contact.html – Страница за контакти
  • gallery.html – Галерия със снимки
  • styles.css – Външен CSS файл за стиловете

Ръководство за изпълнение

  1. Създаване на файловете:
    • Създайте нова папка за проекта и запазете файловете index.html, about.html, services.html, contact.html, gallery.html и styles.css в тази папка.
    • Създайте няколко изображения (например image1.jpg, image2.jpg, и т.н.) и ги поставете в същата папка или в поддиректория images.
  2. Отваряне на сайта:
    • Отворете index.html във вашия браузър, за да видите началната страница. Можете да навигирате към другите страници чрез менюто.
  3. Тестване на адаптивността:
    • Използвайте инструментите за разработчици на браузъра, за да тествате как страниците изглеждат на различни размери на екрана.
  4. Добавяне на съдържание:
    • Можете да добавяте ново съдържание и стилове, като редактирате HTML и CSS файловете.
  5. Добавете изображения
    1. За gallery.html, добавете изображения с имената image1.jpg, image2.jpg, image3.jpg, image4.jpg, и image5.jpg в същата папка или в поддиректория images, и актуализирайте пътищата в gallery.html, ако е необходимо.
    1. Отворете проекта
    1. Отидете в папката website и отворете index.html с вашия браузър. Можете да навигирате между страниците с помощта на менюто.

    Тази структура и код предоставят основен пример за статичен уебсайт, който използва HTML и CSS, с акцент на Flexbox за адаптивно оформление.

    Създаване на файл чрез File Explorer:

    1. Отворете File Explorer.
    2. Отидете до папката, в която искате да създадете файла.
    3. Щракнете с десния бутон в празното пространство вътре в папката.
    4. Изберете New (Нов) от контекстното меню.
    5. Изберете Text Document (Текстов документ) или HTML Document (HTML документ), ако е налично.
    6. Въведете името на файла (например index.html) и натиснете Enter.

    Създаване на файл чрез командния ред (CMD):

    1. Отворете Command Prompt (Команден ред).
    2. Използвайте командата cd (Change Directory) за навигация до папката. Например:

    cmd

    Копиране на код

    cd C:\Users\Вашето_име\Desktop\website

    1. За да създадете нов текстов файл, напишете:

    cmd

    Копиране на код

    echo. > index.html

    Това ще създаде файл с име index.html. Можете да го отворите с текстов редактор, за да добавите съдържание.

    1. macOS

    Създаване на файл чрез Finder:

    1. Отворете Finder.
    2. Отидете до папката, в която искате да създадете файла.
    3. Щракнете с десния бутон в празното пространство вътре в папката.
    4. Изберете New Document (Нов документ) от контекстното меню, ако е налично. Ако не е, можете да използвате приложение като TextEdit:
      • Отворете TextEdit.
      • Въведете текста или код.
      • Изберете File (Файл) > Save (Запази).
      • Въведете името на файла и изберете папката, в която искате да го запазите. Уверете се, че разширението е правилно (например index.html).

    Създаване на файл чрез Terminal:

    1. Отворете Terminal.
    2. Използвайте командата cd за навигация до папката. Например:

    bash

    Копиране на код

    cd ~/Desktop/website

    1. За да създадете нов текстов файл, напишете:

    bash

    Копиране на код

    touch index.html

    Това ще създаде файл с име index.html. Можете да го отворите с текстов редактор, за да добавите съдържание.

    1. Linux

    Създаване на файл чрез файлов мениджър:

    1. Отворете файловия мениджър на вашата система (например Nautilus, Dolphin и др.).
    2. Отидете до папката, в която искате да създадете файла.
    3. Щракнете с десния бутон в празното пространство.
    4. Изберете New Document (Нов документ) и след това Empty Document (Празен документ) или Text Document (Текстов документ).
    5. Въведете името на файла и натиснете Enter.

    Създаване на файл чрез терминал:

    1. Отворете Terminal.
    2. Използвайте командата cd за навигация до папката. Например:

    bash

    Копиране на код

    cd ~/Desktop/website

    1. За да създадете нов текстов файл, напишете:

    bash

    Копиране на код

    touch index.html

    Това ще създаде файл с име index.html. Можете да го отворите с текстов редактор (като nano, vim или gedit) и да добавите съдържание.

    1. Визуални редактори на код

    Ако използвате редактор на код като Visual Studio Code, Sublime Text или Atom, можете да създадете файлове директно от тях:

    1. Отворете редактора.
    2. Отидете на File (Файл) > New File (Нов файл).
    3. Напишете съдържание, ако е необходимо.
    4. Изберете File (Файл) > Save As (Запази като) и изберете папката, в която искате да запазите файла, и посочете името на файла (например index.html).

    Отваряне чрез File Explorer:

    1. Отворете File Explorer и отидете до папката, в която се намира вашият файл index.html.
    2. Намерете файла index.html.
    3. Щракнете с десния бутон на мишката върху файла.
    4. Изберете Open with (Отвори с) и след това изберете Вашия браузър (например Google Chrome, Mozilla Firefox, Microsoft Edge).

    Отваряне чрез браузър:

    1. Отворете вашия браузър.
    2. Придърпайте и пуснете файла index.html в прозореца на браузъра. Или използвайте Drag and Drop метода.
    3. Можете също така да използвате менюто на браузъра: изберете File (Файл) > Open File (Отвори файл) и след това намерете и изберете index.html.
    1. macOS

    Отваряне чрез Finder:

    1. Отворете Finder и отидете до папката, където се намира вашият файл index.html.
    2. Намерете файла index.html.
    3. Щракнете с десния бутон на мишката върху файла.
    4. Изберете Open With (Отвори с) и след това изберете Вашия браузър (например Safari, Google Chrome, Mozilla Firefox).

    Отваряне чрез браузър:

    1. Отворете вашия браузър.
    2. Придърпайте и пуснете файла index.html в прозореца на браузъра. Или използвайте Drag and Drop метода.
    3. Можете също така да използвате менюто на браузъра: изберете File (Файл) > Open File (Отвори файл) и след това намерете и изберете index.html.
    1. Linux

    Отваряне чрез файлов мениджър:

    1. Отворете файловия мениджър на вашата система (например Nautilus, Dolphin и др.).
    2. Отидете до папката, където се намира вашият файл index.html.
    3. Намерете файла index.html.
    4. Щракнете с десния бутон на мишката върху файла.
    5. Изберете Open With (Отвори с) и след това изберете Вашия браузър (например Firefox, Chromium, Google Chrome).

    Отваряне чрез браузър:

    1. Отворете вашия браузър.
    2. Придърпайте и пуснете файла index.html в прозореца на браузъра. Или използвайте Drag and Drop метода.
    3. Можете също така да използвате менюто на браузъра: изберете File (Файл) > Open File (Отвори файл) и след това намерете и изберете index.html.
    1. Визуални редактори на код

    Много редактори на код предлагат опция за предварителен преглед на HTML файлове директно в браузъра:

    1. Отворете вашия редактор на код (например Visual Studio Code).
    2. Отворете файла index.html в редактора.
    3. В някои редактори има опция Open in Browser (Отвори в браузър), която можете да намерите в менюто с опции или чрез разширение на редактора.
    1. Използване на командния ред (Terminal/Command Prompt)

    Windows:

    1. Отворете Command Prompt.
    2. Използвайте командата cd, за да навигирате до папката с index.html. Например:

    cmd

    Копиране на код

    cd C:\Users\Вашето_име\Desktop\website

    1. Въведете:

    cmd

    Копиране на код

    start index.html

    Това ще отвори файла index.html в подразбиращия се браузър.

    macOS/Linux:

    1. Отворете Terminal.
    2. Използвайте командата cd, за да навигирате до папката с index.html. Например:

    bash

    Копиране на код

    cd ~/Desktop/website

    1. Въведете:

    bash

    Копиране на код

    open index.html

    или за Linux:

    bash

    Копиране на код

    xdg-open index.html

    Това ще отвори файла index.html в подразбиращия се браузър.

    След като отворите index.html с браузър, ще можете да видите съдържанието на вашия уебсайт и да проверите как изглежда.

    http://127.0.0.1:5500/index.html

    ЛИТЕРАТУРА ЗА ПОДГОТОВКА
    Задължителна
    1. Jon duckett, „HTML and CSS: Design and Build Websites“
    2. Маrк Myers, „A Smarter Way to Learn HTML & CSS“

Tags

Check Also

Проектиране с UML – Упражнения и Ролеви игри

1 Use Case Диаграми Изисквания и указания: Идентифицирайте всички актьори, които взаимодействат със системата. Определете …

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

diagnosticsandrepair.com
© Copyright 2025, All Rights Reserved