Понятная теория и эффективные тренажеры с объяснением! Вы успеете подготовиться к экзамену! Начните занятия прямо сейчас!
Верстка сайта
Сейчас верстка сайта – один из основных рабочих вариантов заявить о себе во Всемирной сети. Сайт представляет собой код, написанный в особом виде – при помощи специальных тегов. Они, по сути своей, являются правилами, которые позволяют интерпретировать текст в том или ином виде. Например, обернутый тегом <p> текст рассматривается, как абзац и демонстрируется единым куском независимо от его объема.
Кроме того, язык разметки включает в себя более сотни различных тегов. Некоторые из них мы можем увидеть на примере ниже:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Привет, мир</title>
</head>
<body>
<h1>Привет, мир</h1>
</body>
</html>
Можно выделить обязательные теги, в число которых входит head, html, body и title.
-
HEAD обозначает головную часть странички. Сюда входит не только заголовок страницы, который отображается непосредственно на вкладке браузера, но также и блок style . Кратко этот блок можно описать, как дополнительные параметры к имеющимся тегам и правилам.
-
HTML – обертка всего документа. Этот тег позволяет интерпретатору читать имеющийся текст именно как основу будущей-веб страницы. Если этого тега не будет, то и страница примет вид обычного текстового документа, не более.
-
BODY – основное тело страницы, другими словами – видимая его часть. Или то, что отображается пользователю в браузере. Здесь располагается большая часть тегов, а также вся информация, которая будет доступна пользователю, что придет на сайт.
-
TITLE – заголовок. Не обязан иметь уникальное содержание, но его лучше сделать максимально информативным, чтобы люди видели сразу – туда они попали или нет.
Кроме обязательных тегов, без которых HTML-документ – не документ, есть еще и другие. Один из важных тегов мы обнаружили уже в этом коротком примере и имя ему - <H>. Это тег заголовка.
Имеется шесть уровней заголовков, что значительно облегчает процесс разделения информации на страницы. Есть заголовки и подзаголовки от первого до шестого уровня. Помимо непосредственного разделения информации это также позволяет соответствовать запросам, иными словами, делает веб-страницу релевантной.
Давайте теперь посмотрим на более сложный пример верстки сайта. Здесь язык разметки включает в себя уже куда большее число тегов. Кстати, одним из заданий ЕГЭ может оказаться написание собственной простой веб-страницы!
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример странички</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}
table {
border-collapse: collapse;
width: 50%;
margin: 20px 0;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Добро пожаловать на мою страничку</h1>
<img src="https://via.placeholder.com/600x300" alt="Пример изображения">
<table>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</table>
<p>
Это пример текста с <a href="https://example.com" target="_blank">ссылкой</a> на внешний ресурс.
</p>
</body>
</html>
В данном примере имеется большое количество дополнительных тегов. Давайте кратко выделим их и охарактеризуем, чтобы впоследствии более подробно рассмотреть в отдельных материалах.
-
Table – основной тег таблицы, который заставляет интерпретатор смотреть на содержимое внутри этого тега, как на таблицу. Он выбирает TR – строки, в которых есть TD – ячейки. И на основании этого составляет решетку с некоторым содержимым. В нашем случае содержимое это «заголовки» и «ячейки»
-
Href – ссылка на другую страницу, которая находится в открытом доступе. Причем страница может находиться и на персональном компьютере, но тогда доступ к ней будет только в том случае, если страничка открыта на нем или в локальной сети.
-
Img – заставляет интерпретатор смотреть на содержимое тега, как на ссылку на картинку. Буквально – это и есть ссылка, только от HREF тег отличается преобразованием. Если IMG создает блок графики под изображение, то HREF создает активную ссылку.
-
Style – большой блок, внутри которого находятся таблицы стилей. Сделано это для того, чтобы не повторять одни и те же параметры для одного и того же тега много раз. Например, если на странице тег абзаца встречается десять раз, то задать для него стиль можно единожды в таблицах стилей.
-
P – собственно, тег абзаца. Язык разметки может и без этого тега воспринимать текст в виде текста, однако именно P делает его структурированным.
В рамках подготовки к ЕГЭ можно сделать самопроверку и ответить на вопросы, данные ниже:
1. Что обозначает тег <html>?
a.Основное тело страницы, отображаемое пользователю
b.Головную часть страницы, содержащую заголовок и стили
c.Обертку всего документа, позволяющую интерпретатору считать текст основой веб-страницы
d. Разделение текста на абзацы
2. Какой тег используется для создания заголовков в HTML?
. <h>
a. <title>
b. <head>
c. <p>
3. Для чего предназначен тег <title>?
. Для задания заголовков внутри тела страницы
a. Для указания заголовка, отображаемого на вкладке браузера
b. Для добавления таблицы на страницу
c. Для создания гиперссылок
4. Какая информация содержится внутри тега <head>?
. Только таблицы стилей
a.Основное содержимое страницы, видимое пользователю
b. Метаданные страницы, такие как заголовок и стили
c. Таблицы и изображения
5. Что делает атрибут href в HTML?
. Создает блок для изображения
a. Определяет ссылку на внешний или локальный ресурс
b. Задает шрифт для текста
c. Добавляет таблицу стилей
6. Какой тег используется для создания таблицы?
. <div>
a. <table>
b. <form>
c. <section>
7. Какую функцию выполняет тег <img>?
. Создает гиперссылку на другой ресурс
a. Создает структуру таблицы
b. Добавляет изображение на страницу
c. Определяет стиль текста
8. Что позволяет сделать блок <style>?
. Добавить изображения на страницу
a. Указать метаданные страницы
b. Задать стили для элементов на странице
c. Разбить текст на абзацы