Структура html-документа (основные блоки)
|
<HTML> <HEAD> служебная информация <TITLE> информация об имени страницы (информации, которая будет отображаться в строке заголовка обозревателя) </TITLE> </HEAD>
<BODY> основная часть документа </BODY> </HTML> |
Как правильно создать и сохранить html страницы.
1) Создаём папку электронный учебник, для того, чтобы уроки были структурированы и содержались в одном месте.
Если необходимые для ЭУ изображения будут сохранены в этой же папке, то прописывать полный путь к ним не нужно, указывается только название файла. 2) Создаём файл с кодом в текстовом редакторе, например в Блокноте (NotePad).
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
</html>
DOCTYPE (Document Type Definition) указывает тип документа. Это необходимо, чтобы браузер понимал, согласно какому стандарту отображать текущую страницу. Ведь существует много версий (X)HTML и как раз с помощью DOCTYPE мы сообщаем браузеру, какая именно версия использовалась при написание нашей страницы.
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо установить параметр <meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">. Для операционной системы Windows и кириллицы charset обычно принимает значение utf - 8 или windows-1251
Далее Сохранить как.
Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например primer.html
Пример создания титульной страницы
Откройте primer.html через блокнот. Исправьте содержимое на: <!DOCTYPE html>
<html>
<head>
<title>Главная страница</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<font face="Book Antiqua" color="Blue" size="5">
<br><br> <b> <p align="center"> <br><img src="logo.png" width="150" height="120">
<br> Новокузнецкий институт (филиал)<br>
федерального государственного бюджетного<br>
образовательного учреждения высшего профессионального образования<br>
“Кемеровский государственный университет” </b> </font> <br>
<font color=" Navy " size="5">
<b><p align="center"><br>Физико-математический факультет</b>
<br><img src="fizmat.png" width="109" height="80"> <br> <br> <br> </font>
<br>
<font color=" Navy " size="6">Электронный учебник по программированию
<br> <a href="содержание.html"><img src="button.jpg"><br> <font color=" Navy " size="5">
<p align="right"> Выполнил студент группы ИН-11<br>Иванов И.И.</p>
<br><br><p align="center"> Новокузнецк 2016
</body>
Сохраните документ с именем Обложка.html
Просмотрите документ в окне браузера и оцените результат. При необходимости внесите коррективы, вернувшись в Блокнот.
Форматирование текста
<HN> </HN> – изменение размера шрифта / отмена выбранного размера шрифта NÎ[1…6]
<B> </B> – полужирный шрифт / отмена полужирного шрифта
<I> </I> – курсив / отмена курсива
<U> </U> – подчёркивание / отмена подчёркивания
<EM> </EM> – выделение (аналогично тэгу <I>) / отмена выделения
<STRONG> </STRONG> – полужирный шрифт / отмена полужирного шрифта
<BIG> </BIG> – увеличение шрифта относительно текущего / отмена увеличения шрифта относительно текущего
<SMALL> </SMALL> – уменьшение шрифта относительно текущего / отмена уменьшение шрифта относительно текущего
<BR> – переход на следующую строку
<PRE> </PRE> – отображение без изменения форматирования / отмена отображения без изменения форматирования
<SUP> </SUP> – текст сдвигается вверх (верхний индекс) / отмена сдвига
<SUB> </SUB> – текст сдвигается вниз (нижний индекс) / отмена сдвига
<FONT> </FONT> – изменение шрифта / отмена действия шрифта
Атрибуты тэга <FONT>
COLOR= название цвета или его шестнадцатеричный код
изменение цвет текста
Например:
<FONT СOLOR= red> текст </FONT>
приведёт к выводу текста красным цветом.
FACE = название шрифта –изменение гарнитуры (начертания) шрифта
Например:
<FONT FACE = Arial> текст </FONT>
приведёт к выводу текста шрифтом Arial.
SIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку.
Например:
<FONT SIZE = 4> текст </FONT>
Атрибуты могут перечисляться через пробел в произвольном порядке.
Например:
<FONT SIZE = 4 FACE = Times New Roman
СOLOR= Black > текст </FONT>
Абзац
<P> </P> – абзац / конец абзаца
Атрибуты тэга <P> для выравнивания текста
Атрибуту ALIGN может быть присвоено одно из 4-значений:
LEFT
ALIGN = RIGHT
CENTER
JUSTIFY
Позволяет выравнивать текст по левому, правому краю по центру или по ширине.
Например:
<P ALIGN = CENTER> текст </P>
Фон
Фон страницы задается в начале основной части документа, т.е. атрибутами тэга <BODY>
Атрибуты тэга <BODY> для изменения цвета текста и фона
TEXT= цвет или его код
Задает цвет текста
Например:
<BODY TEXT =7EA3B8>
BGCOLOR=цвет или его код
Например:
<BODY BGCOLOR =Black>
BACKGROUND= имя файла
использование в качестве фона изображение из файла. Изображение-текстуру можно создать в графическом редакторе или PowerPoint
BGPROPERTIES=FIXED
создание фона – “водяного знака”(фона, который не перемещается вместе с текстом)
