Бесплатный курс по Java: от основ до продвинутого уровня
Теги структуры страницы. Семантические теги
Все видели классическую структуру страницы:
Верхняя часть страницы на которой панель навигации по сайту, логотип и другое, часть страницы с основным контентом, секции справа и слева, где может быть какая-то доп информация, меню, реклама и т.д и нижняя часть страницы где обычно ссылки на соцсети, поддержку и т.д.
Для этих частей есть специальные теги, которые называются семантическими:
<section> – основной контент,
<aside> – это боковые секции,
<header> – это верхняя часть,
<footer> – нижняя часть,
<nav> – панель навигации.
Сами по себе эти теги ничего не делают. Но их названия уже говорят много о структуре страницы человеку, который в первый раз смотрит на html код страницы. То есть они типа div только со специальными названиями.
Эти теги тоже нужно настраивать с помощью css.
header {
/* сделаем отступы внутри секции header. */
padding: 10px;
/* зададим цвет секции header. */
background: #aaf6a1;
}
nav {
/* делаем отступы секции навигации */
margin: 10px;
padding: 10px;
/* зададим цвет секции nav */
background: #f1f1a1;
}
section {
/* Делаем чтобы section и aside были в ряд.
То есть чтобы было обтекание section справа */
float: left;
/* задаем ширину section */
width: 75%;
/* задаем высоту section */
height: 600px;
/* зададим цвет секции section */
background: #b99999;
}
aside {
/* то же самое здесь */
float: left;
/* задаем ширину aside */
width: 25%;
/* задаем высоту aside */
height: 600px;
/* зададим цвет секции aside */
background: #c1f1e1;
}
footer {
/* Предыдущие два блока обтекали друг друга.
На footer нужно остановить обтекание.
both значит запрет обтекания footer секции
другими элементами с обеих сторон. */
clear: both;
/* зададим цвет секции footer */
background: #d11777;
}
/* ниже из прошлых уроков */
.divblock {
/* Основные параметры div-блока */
width: 410px;
height: 300px;
background: #f1f1f1;
float: left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
.imagePropsClass {
/* Определяем размеры изображений */
width: 400px;
height: 170px;
}
h1, h2 {
/* Стиль заголовков */
font-weight: 600;
font-family: ‘Brush Script MT’, cursive;
}
h3 {
/* Шрифт заголовков h3 */
font-weight: 600;
font-family: ‘Courier New’, monospace;
}
img {
/* Стилизация изображений */
border-style: dashed;
border-color: red;
border-radius: 15px;
}
Вот и сама страница с тегами структуры, к которым будут применены только что определенные стили.
HTML Basics
header часть страницы.
В ней может быть логотип панель навигации
section часть. здесь основной
контент страницы
Давайте откроем только что написанную страницу в браузере.
Видим всем знакомую структуру страницы. Таким образом с помощью структурных тегов можно выстраивать структуру страницы
Структура страницы с помощью div.
Но зачастую специальные теги секций не используются(хотя лучше использовать) , а используются просто div вместо них.
Для каждого div отвечающего за какую-либо секцию создаются классы с соответствующими названиями.
.header {
/* Делаем отступы внутри
блока div, на который будет
применен класс header. */
padding: 10px;
/* Зададим цвет этому div. */
background:#aaf6a1;
}
.nav {
/* Делаем отступы блоку div,
на который будет применен
класс header nav. */
margin: 10px;
padding: 10px;
/* Зададим цвет этому div. */
background:#f1f1a1;
}
.mainSection {
/* Делаем так, чтобы блоки div, на которые
будут применены классы mainSection и
aside, были в ряд. То есть чтобы было
обтекание блока div
с классом mainSection. */
float: left;
/* Задаем ширину этому div. */
width: 75%;
/* Задаем высоту этому div. */
height: 600px;
/* Зададим цвет этому div. */
background:#b99999;
}
.aside {
/* Все то же самое здесь с блоком div,
на который будет применен класс aside. */
float: left;
width: 25%;
height: 600px;
/* Зададим цвет этому div. */
background:#f1fee1;
}
.footer {
/* Предыдущие два блока обтекали
друг друга. На div, к которому будет
применен класс footer, нужно остановить
обтекание. Both значит запрет
обтекания этого div другими
элементами с обеих сторон. */
clear: both;
/* Зададим цвет этому div. */
background:#d11777;
}
/* Ниже из прошлых уроков */
.header {
padding: 10px;
background:#aaf6a1;
}
.nav {
margin: 10px;
padding: 10px;
background:#f1f1a1;
}
.mainSection {
float: left;
width: 75%;
height: 600px;
background:#b99999;
}
.aside {
float: left;
width: 25%;
height: 600px;
background:#f1fee1;
}
.footer {
clear: both;
background:#d11777;
}
.divblock {
width: 410px;
height: 300px;
background:#f1f1f1;
float: left;
margin: 0 15px 15px 0;
text-align: center;
padding: 5px 15px 15px 5px;
box-shadow: 5px 10px #888888;
}
.imagePropsClass {
width: 400px;
height: 170px;
}
h1, h2 {
font-weight: 600;
font-family:’Brush Script MT’, cursive;
}
h3 {
font-weight: 600;
font-family: ‘Courier New’, monospace;
}
img {
border-style: dashed;
border-color: red;
border-radius: 15px;
}
Видим подобную страницу, что и раньше, но вместо тегов структуры используются div-ы, к которым применены созданные классы.
HTML Basics
header часть страницы.
В ней должен быть логотип, панель навигации
nav часть страницы. здесь элементы навигации по сайту
section часть. здесь основной контент страницы
aside часть. здесь может быть меню, реклама и т.д.
Давайте откроем только что написанную страницу в браузере.
Как видим, был получен тот же самый результат.
Можете использовать тот вариант, который вам нравиться. Чаще всё-таки используются div-ы, но семантические теги предпочтительнее.
Изучите CSS-селекторы: контекстные, дочерние и псевдоклассы. Уменьшайте количество классов в верстке с помощью правильного выбора селектора.
Time to read: 17
Тестирование в Java с помощью JUnit
Руководство по JUnit тестированию в Java: создание тестовых классов, использование assertEquals, assertTrue и других методов для проверки корректности работы кода.
Time to read: 17
Аннотации в JUnit тестах
Изучите основные аннотации JUnit: @Test, @Ignore, @Before, @After. Узнайте, как тестировать производительность методов и управлять выполнением тестов в Java.
