Веб-конструирование. основные понятия
Веб-конструирование. основные понятия
Создание веб-страниц
Создание веб-страниц
Embedded Files
Теги и атрибуты форматирования
Теги и атрибуты форматирования
Синтаксис языка HTML
Синтаксис языка HTML
Структура HTML-документа
<html>
<head bgcolor=#e6C0C0>
<!-- Заголовок -->
<title> Название страницы
</title>
<!-- установка кодовой таблицы utf-8-->
<meta charset = «utf-8»>
</head>
<body> <!-- тело -->
<h1>Заголовок статьи</h1>
<p>Абзац статьи</p>
</body>
</html>
Текст на веб-странице
Текст на веб-странице
Использование тега <p>
Html-код:
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
Отображение в браузере:
Горизонтальные линии в html-документе
Html-код:
<h1>Заголовок</h1>
<hr>
<p>Абзац</p>
Отображение в браузере:
Блоки в html-документе
Html-код:
<div align = "center">
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
</div>
Отображение в браузере:
Выравнивание абзацев в html-документе
Html-код:
<p align = "left">Текст по левому краю!
</p>
<p align = "center">Текст по центру!</p>
<p align = "right">Текст по правому
краю!</p>
<p align="justify">А этот текст браузер
выровняет по ширине, т. е. одновременно
по правому и левому краю. Для этого бу-
дет изменена величина пробела между
словами</p>
Отображение в браузере:
Локальные ссылки на веб-страницу
1. В одном каталоге:
<a href = "index.html"> Домой </a>
2. Во вложенном каталоге:
<a href = "sait/index.html"> Домой
</a>
3. В родительском каталоге:
<a href = "../index.html"> Домой </a>
4. В соседнем каталоге:
<a href = "../sait/index.html"> Домой </a>
Заголовки в тексте html-документа
Html-код:
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
Отображение в браузере:
Способы задания цвета в html-документе
1. По названию цвета:
<hr color = "red">
2. Шестнадцатеричным числовым кодом:
<hr color = "#ff0000">
Создание внутренней ссылки
Создадим ссылку в конце страницы на ее начало.
Сначала создадим якорь. Первый абзац, на который будет осуществлен переход, получает идентификатор top:
<p id = "top"> ... </p>
Имя ссылки в данном случае начинается с символа #:
<a href = "#top">Наверх</a>
Упражнения
Упражнения
Откройте html-документ. Выполните указанные действия.
Измените цвет фона и основного текста (значения атрибутов bgcolor и text тега body). Для задания нового цвета используйте шестнадцатеричные числовые коды (#f5f5f5 — фон, #4169e0 — текст)
Разместите на веб-странице несколько абзацев с различным выравниванием текста
Добавьте на страницу заголовок второго уровня и горизонтальную линию. Цвет заголовка выберите самостоятельно. Под горизонтальной линией (в нижнем колонтитуле) разместите абзац с персональными данными (фамилия, имя, класс)
Файлы из папки \\Serg-pc\задания\html\upr\ скопируйте в свою рабочую папку. Откройте файл index.html. Оформите абзацы этой веб-страницы как ссылки.
1-й абзац — ссылка на ресурс https://colorscheme.ru/
2-й абзац — ссылка на веб-страницу 2_2.html.
Добавьте на страницу 2_2.html текст «Вернуться назад» и оформите его как перекрестную ссылку на страницу index.html.
Создайте на странице 2_2.html внутреннюю гиперссылку. Для этого:
Создайте закладку в начале страницы.
Добавьте в конце страницы тег <br> и текст «Наверх» cо ссылкой на закладку.
Google Sites
Report abuse