Понятная теория и эффективные тренажеры с объяснением! Вы успеете подготовиться к экзамену! Начните занятия прямо сейчас!
Разработка сайтов
Разработка сайтов начинается с создания структуры, стиля и логики. О том, что нужно предусмотреть перед тем, как начать создавать собственный сайт, мы уже поговорили в материале. Но мы до сих пор не брали в пример ничего, что могло бы показать нам, как работает полноценный, пусть и небольшой сайт.
Можно сказать, что разработка сайтов представляет собой длительный процесс. Но верстка сайта всегда ведется при помощи типовых языков. Это HTML, CSS, PHP. Мы еще не брали бэк-енд в рассмотрение, а потому примеры сайтов, которые мы изучаем, не содержат никакого серверного кода.
Главное сейчас, понять основные аспекты веб-дизайна. Здесь все рассказано более подробно, но, если кратко и для начинающих: самое простое в дизайне – это внешний вид, сами странички.
Для примера давайте рассмотрим, как создать простой сайт с основной страницей, второстепенной страницей и CSS-файлом для стилизации.
Основная страница (HTML)
Любая страница начинается с типовых тегов. Здесь имеются все основные – это и html, и head, и title. Полный их перечень можно найти здесь. Для простоты мы используем классический вариант HTML5.
<!DOCTYPE html>
<html lang="en">
<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>
<header>
<h1>Добро пожаловать на наш сайт!</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О нас</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Основной контент</h2>
<p>Это пример главной страницы сайта.</p>
</section>
</main>
<footer>
<p>© 2024 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>
Можно заметить, что на этой странице имеются специальные сегменты, которые образуют сетку сайта. Это шапка, основное тело, подвал, которые называются header, main, footer соответственно. Внутри тега main также вложен еще и тег section, который обеспечивает деление центральной части на блоки.
Раньше это можно было сделать при помощи тега div. Разработка сайтов раньше велась при помощи большей зависимости от CSS, однако огромное количество блоков использовалось для плюс-минус одинаковой структуры. И оттого семантические теги стали логическим продолжением развития 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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>О нашей компании</h1>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О нас</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Кто мы?</h2>
<p>Мы — команда профессионалов, занимающихся разработкой сайтов.</p>
</section>
</main>
<footer>
<p>© 2024 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>
CSS файл (styles.css)
Здесь мы впервые сталкиваемся с подробным описанием хорошего CSS файла. Ранее в теме «Языки стилей» мы обсуждали основные принципы работы. Здесь же стоит обратить внимание на комментарии. Это очень важный элемент – понимание собственного кода необходимо, так как через некоторое время сложно вспомнить без подсказок, что к чему относится.
/* Стили для всего сайта */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
/* Стили для заголовков */
header {
background: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
header h1 {
margin: 0;
}
/* Стили для навигации */
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
/* Основной контент */
main {
padding: 20px;
background: #fff;
margin: 20px auto;
max-width: 800px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Стили для подвала */
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
margin-top: 20px;
}
Как это работает
-
Основная страница: содержит базовую информацию и ссылки на другие страницы.
-
Второстепенная страница: структурно похожа, но содержит уникальный контент.
-
CSS файл: определяет стиль для обеих страниц, включая цветовую схему, отступы, шрифты и оформление навигации.
С таким набором можно создать простой, но функциональный сайт. Для его улучшения можно добавить JavaScript для интерактивности, подключить шрифты Google или использовать фреймворки, такие как Bootstrap.
Если же не использовать фреймворки, получить хороший результат все равно реально. Можно попрактиковаться в изменении имеющегося кода или написать свой. Также при подготовке к ЕГЭ можно ответить на теоретические вопросы ниже.
Также в заданиях ЕГЭ могут попасться и «творческие» задачи. Но практики с составлением кода было уже довольно много. Поэтому попробуем разобраться с вопросами по теме.
Вопросы и ответы по разработке сайтов
1. Какой тег используется для создания гиперссылки в HTML?
-
<link>
-
<a>
-
<href>
-
<hyperlink>
2. Какой атрибут HTML используется для подключения CSS?
-
connect
-
style
-
rel
-
src
3. Какой метод в CSS позволяет применить стиль к нескольким элементам одновременно?
-
Использование идентификатора (id)
-
Использование класса (class)
-
Использование атрибута
-
Использование комментариев
4. Какая структура правильна для базового HTML-документа?
-
<html><head><body></body></html>
-
<html><title></title></html>
-
<html><head></head><body></body></html>
-
<html><body><head></head></html>
5. Какой из следующих селекторов применяется к классу в CSS?
-
#class
-
.class
-
class:
-
@class
6. Какой элемент отвечает за отображение ссылок в меню навигации?
-
a) <li>
-
b) <ul>
-
c) <nav>
-
d) <div>
7. Какой атрибут указывается для ссылок, чтобы открыть их в новой вкладке?
-
rel="newtab"
-
href="_blank"
-
target="_blank"
-
open="newtab"
8. Какой формат используется для стилизации сайтов?
-
JavaScript
-
HTML
-
CSS
-
PHP