Одностраничный сайт
Одностраничный сайт, это сайт состоящий из одной страницы. Обычно такие сайты делают в виде лендингов, посадочных страниц. Наша тема не назначение этого сайта, а его создание.
Рассмотрим основные элементы одностраничного сайта, такие как показ изображений на сайте, форматирование текста, использование символов и таблицы.
Так как у нас сайт будет маленьким, создадим одну (корневую) папку, а в ней файл index.html. Также, в эту папку, поместим эти изображения.
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Одностраничный сайт</title>
<link type="image/png" sizes="32x32" rel="icon" href="favicon-32x32.png">
<meta name="description" content="Пример создания одностраничного сайта">
<style>
p{
color: #55D52B;
text-decoration: underline;
font-size: 20px;
}
</style>
</head>
<body style="background-image: url(bg.jpg)">
<header>
<img src="logo.png" alt="Одностраничный сайт" title="Одностраничный сайт">
</header>
<hr/>
<main>
<h1>Пример одностраничного сайта</h1>
<p>Эта страница сделана на языке гипертекстовой разметки <b>HTML5</b>.</p>
<img src="html5.jpg" alt="html5" title="html5">
<table border=1>
<tr><td>1 ячейка</td><td>2 ячейка</td><td>1 ячейка</td></tr>
<tr><td>2 строка</td><td>2 столбец</td><td>3 столбец</td></tr>
</table>
</main>
<hr/>
<footer>
<p>Сайт cwmax.ru © 2023 </p>
</footer>
</body>
</html>
Скопируйте этот код в свой файл, сохраните и откройте в браузере.
Должно получиться так.
Синим цветом окрашены элементы которые не описаны здесь, о их назначении я расскажу.
link type="image/png"Устанавливает иконку для сайта, которая видна в поиске и на вкладке страницы браузера.
meta name="description"
Описание содержимого страницы, нужно поисковику. Он может на его основе создать снипет в выдачи, но не оябязательно.
style
Для примера я задал в стилях атрибуты текста внутри параграфа P. P, h1, hr относятся к форматированию текста.
body style="background-image: url(bg.jpg)"
Устанавливает фон страницы, может быть изображением или цветом, по умолчанию – белый.
img src="logo.png"
Загружает и показывает изображение с логотипом сайта.
hr/
Черта, просто отделил шапку и подвал от основного контента (тела страницы).
table
Простенькая таблица.
©
Использование кода символова копирайт.