Владимир Молочков

Уроки создания сайта на HTML, CSS и DIV

ГЛАВА 1. Создаем веб документ в Блокноте

«Твой первый сайт в Интернет»Практикум по созданию HTML сайта и его размещению в Интернет

Учебных курсов по изучению HTML довольно много. Данный курс отличается от аналогичных простотой изложения материала и своей практической направленность. Пользователь за несколько занятий сможет не только изучить основы HTML, но, также – создать свой многостраничный сайт и разместить его бесплатно в Интернет. Данный практикум не требует от учащихся каких – либо особых знаний: школьного курса информатики для старта будет вполне достаточно. Учебный материал рассчитан на возраст от 12 лет до 65+.

Краткая история HTML

Язык HTML был создан Тимом Бернерсом-Ли в 90-х годах прошлого века. Изначально главной функцией первой версии HTML было корректное, без каких-либо структурных искажений, воспроизведение текста на различных устройствах вывода информации. За прошедшее время HTML претерпел существенные изменения и значительно расширил возможности верстки документов. Язык имеет несколько версий:

HTML 1.0 — начало 90-х годов. Единого официального стандарта языка на тот момент не было. Язык был ориентирован только на обработку текста и применение к нему атрибутов — жирный текст, курсив etc.HTML 2.0 — появилась поддержка форм.HTML 3.2 — появилась возможность создания таблиц, отображение математических формул, эффект обтекания изображений.HTML 4.0 — были отменены некоторые элементы HTML, взамен которых было предложено использовать таблицы стилей CSS. Была добавлена поддержка скриптов и фреймов.HTML 5 — 2010-й год — нынешнее время. Современная (на сегодня – последняя) версия этого языка.Создаем веб документ в Блокноте

Далее мы научимся создавать простейшие текстовые веб документы (сайты), используя программу Блокнот, входящую во все версии ОС Windows.

Для справки

«Блокнот» (Notepad) — текстовый редактор, входящий в операционные системы Windows, начиная с 1985 года. На протяжении многих лет Microsoft не обновляла свою программу, несмотря на существование бесплатных и более функциональных решений, заменяющих стандартный «Блокнот» (например, Notepad++ ).

Чтобы открыть Блокнот через меню «Пуск» в Windows 10 следует открыть основное меню «Пуск» на вкладке «Все приложения», то есть, щелкаем мышкой на значке логотипа Windows в нижней левой части экрана ПК и открываем «Все приложения» - рис. 1.

Рис. 1. Открываем мышкой меню Пуск

Далее нужно найти папку «Стандартные-Winsdows», а в ней – открыть программу «Блокнот» - рис. 2.

Рис. 2. Программа Блокнот находится в папке Стандартные-Windows программы

Пример 1. Наш первый текстовый веб документ

В программе Блокнот (или аналогичной, например, Notepad++) создайте любой текст, например, напишите текст «Мой сайт». Сохраните документ командой Файл-Сохранить на Рабочий стол Windows и дайте этому документу название index.html. Тип файла – Все файлы (это важно) – рис. 3.

Рис. 3. Сохраняем текстовый документ, задаем Имя и Тип файла

Далее мы откроем сохраненный документ с помощью любого браузера (Yandex, Opera, Google Chrome и др.) – рис. 4.

Рис. 4. Веб документ открыт в браузере

Так создается простейший веб документ для Интернет. Однако, это документ неграмотный, выполненный с ошибками и не по стандарту HTML5.

Новый термин

HTML5 (англ. HyperText Markup Language, version 5) — язык для представления информации для всемирной паутины.

В HTML5 существуют правила, по которым следует делать веб документы для Интернет. Например, тип документа (что это сайт, а не, например, видео) задается в HTML5 так:

<!DOCTYPE html>

А кодировка языка документа (язык документа может быть английский, русский и любой другой) задается в HTML5 так:

Поэтому, грамотная структура описанного выше документа Мой сайт в в HTML5 будет выглядеть так:

<!DOCTYPE html>

<html>

<head>

<title>Мой первый текстовый документ (это название нашей, то есть, заголовок нашей веб страницы</title>

</head>

<body>

<p>Мой первый сайт (Текст оформлен как параграф. Это тело нашего документа)</p>

</body>

</html>

Как видим, создание веб документа на языке HTML сопровождаются специальными скобками:

< (открывающая скобка) ставится в начало тега, > (закрывающая скобка) отмечает конец тега.

Новый термин

Любой документ на языке HTML представляет собой набор команд для браузера, причём начало и конец каждой команды обозначается специальными метками, называемыми тегами. HTML-теги это элементы компьютерной html верстки сайта. Каждый тег заключён в треугольные скобки (<…>). Писать любой тег можно в любом регистре (не важно - большими или маленькими буквами). Теги в HTML файле выполняются по порядку, столбиком: сверху - вниз.

В веб документе всегда присутствует заголовок и тело:

То, что между тегами <head> </head> - это заголовок документа.

То, что между тегами <body> </body> - это тело документа.

Внутри заголовка <head> </head>, обычно используя теги <title> </title>, в которых можно прописать название документа.

Вроде, все понятно. Однако, если вы сохраните наш грамотный документ и откроете его в браузере, то, возникнет такая картина (рис. 5).

Рис. 5. Кодировка UTF-8 не задана

Правильно сохранять в блокноте нужно так (рис. 6).

Рис. 6. Пример правильного сохранения веб документа в Блокноте

Новый термин

UTF-8 - стандарт кодирования символов. Кодировка UTF-8 является сегодня основной во всех веб-документах.

Внимание

В примере мы сохраняли веб документ как index.html и это не случайно. index.html — это файл главной страницы сайта, ее традиционное название (индексный файл). Этот файл ищется по умолчанию веб-сервером и это страница по умолчанию, которую первой видит посетитель веб-сайта, которую часто называют «домашней страницей».

Резюме

Итак, создать одностраничный текстовый веб документ очень просто. У текстового файла, созданного в программе Блокнот и имеющего по умолчанию расширение для файлов *.txt необходимо изменить расширение для сохраненных на диск файлов на *.html. Имя такого файла для главной страницы сайта принято писать, как index и, таким образом, здесь и далее сохраняем все наши веб документы как index.html.

Что такое DOCTYPE в HTML5?

Веб документ обычно начинается с записи

<!DOCTYPE HTML>

Подобная запись указывает на тип документа, то есть, что перед нами веб документ. Это необходимо делать для того, чтобы браузер понимал, согласно какому стандарту отображать текущую веб страницу. В интернет есть специальные сервисы – валидаторы, которые следят за сайтами, проверяя их на наличие ошибок в структуре веб документов. Этот процесс называется валидацией сайта, то есть, проверкой сайта на ошибки кода. Естественно, что отсутствие элемента <! DOCTYPE> - это ошибка в коде сайта, требующая ее исправления. При наличии подобных ошибок браузер может не понять, согласно какому стандарту отображать веб-страницу.

Новый термин

Сайт перед публикацией в Сеть стоит проверить на валидность, то есть на его соответствие нормам, принятым Консорциумом Всемирной Паутины (W3C). Это единые технические стандарты, по которым должны быть созданы программы и документы, которые внедряются в Сеть Интернет. Если говорить простым языком, то в сайте не должно быть ошибок в коде, а валидность сайта можно с помощью валидаторов. Например, на https://tools.icoder.uz/json-validator.php.

Еще раз приведем пример грамотного написания элементарной веб страницы с наиболее популярной сегодня кодировкой "utf-8":

<! DOCTYPE html>

<html>

<head>

<title>Это заголовок</title>

</head>

<body>

Это основное содержимое страницы.

</body>

</html>

Элементы форматирования веб текста

Форматирование текста – это изменение его цвета, размера, применение к нему анимации и так далее.

Заголовки

В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию их размера:

<H1> </H1> (самый крупный текст заголовка)

<H6> </H6> (самый мелкий текст заголовка)

Весь текст внутри таких скобок считается заголовком.

Пример 2. Меняем кегль (размер) шрифта

Вот пример документа с использованием заголовков первого (H1) и второго (H2) уровней:

…

<BODY>

<H1> Заголовок первого уровня</H1>

<H2> Заголовок второго уровня</H2>

</BODY>

…

Абзацы (=параграфы)

Одним из основных элементов страницы являются абзацы или, что тоже самое – параграфы. Абзацами в компьютерном наборе текста статьи или книги считается текст, размещенный между нажатиями на клавишу Enter. Поэтому каждый абзац начинается с новой строки. Абзац в веб тексте создается с помощью тега <p> таким образом:

…

<body>

<p>

Это абзац.

</p>

<p>

Это еще один абзац.

</p>

</body>

…

Так код будет выглядеть в браузере так (рис. 7).

Рис. 7. Пример задания абзацев

Разрыв строк, наподобие абзаца, можно задать записью вида <BR> (этот тег задает переход на новую строку). При этом задавать закрывающие скобки </BR> нет необходимости. Но, если закрывающий тег задан, то это не считается ошибкой. Вот пример использования <BR> (рис. 8).

Рис. 8. Листинг с применением тега <BR>

Данный код в браузере будет выглядеть так (рис. 9).

Рис. 9. Пример отображения нескольких тегов <BR> в браузере

Примечание

Здесь также применен пока новый для нас тег выравнивания

Выравнивание текста

С помощью параграфов можно организовать выравнивание текста по центру, по левому или правому краю и по ширине.

<p align="center">123</p> текст 123 выровнен по центру. <p align="left">123</p> текст 123 выровнен по левому краю. <p align="right">123</p> текст 123 выровнен по правому краю.

<p align="justify»> текст</p> текст 123 выровнен по ширине (то есть, по обоим краям – левому и правому).

Пример 2. Выравнивание текста документа

…

<body>

<H1 ALIGN=CENTER>Текст по центру</H1>

<BR>

<P ALIGN=RIGHT> Текст по правому краю</P>

</body>

…

Как видим, здесь имеется два выравнивания: по центру и по правому краю (рис. 10).

Рис. 10. Так отображается листинг с выравниванием в браузере

Задаем цвет фона

Цвет фона и текста можно определить шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета (Red), вторая - для зеленого (Green), и третья пара - для синего цвета (Blue). #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Для понимания термина «насыщенность цвета» пример изменения насыщенности красного цвета приведен на рисунке (рис. 11).

Рис. 11. Пример четырех цветов красного цвета разной насыщенности

Подобрать нужную насыщенность цвета вы можете с помощью таблиц кода цвета HTML (см. Таблицу 1).

Таблица 1. Примеры задания цвета шестнадцатеричным кодом и английскими словами

Рис. 12. HTML цвета

Помимо чисел вида #hhhhhh на веб страницах можно также использовать текстовое определение цвета, используя обозначения цвета на английском языке. Например, чтобы сделать цвет фона страницы серым, можно написать:

или

Эти записи равноценны.

Задаем цвет и размер текста

Мы знаем, как менять размер шрифта с помощью шести тегов заголовков. Но, также, для определения цвета и размера шрифта используется теги:

Эти теги имеют атрибуты:

COLOR (цвет шрифта);SIZE="n" (размер шрифта равный величине «n»);FACE="имя_шрифта" (имя шрифта – это его семейство, например, если выбраны шрифты семейства arial (тонкие, жирные, наклонные и другие). Тогда запись будет вида FACE="arial".Новый термин

Термин «Атрибут тега» используется для определения расширенных характеристик тега. Например, тег с абзаца <p> может содержать атрибут align, который используется для выравнивания абзаца на странице.

Пример 3. Использование тега <FONT> с атрибутами SIZE, COLOR и FACE

Ниже дан пример кода, где мы меняем цвет фона, цвет текста и задаем размер и семейство шрифта:

…

<body>

12345

</body>

…

Как видим по тегам, здесь фон задан серым цветом и крупным шрифтом красного цвета шрифтом семейства SANS0SERIF написаны цифры 12345 (рис. 13).

Рис. 13. Так отображается приведенный выше листинг в браузере

На рис. 14 изображено, как правильно нужно задавать размер шрифта в пикселах.

Рис. 14. Пример задания размера шрифта в пикселах

ЗАДАНИЕ ДЛЯ САМОПРОВЕРКИ

Создайте в Блокноте правильный (грамотный) одностраничный html-документ с любым веб текстом про своего домашнего питомца (кошку, собаку, рыбок в аквариуме или хомячка…). Можно написать про своего друга-приятеля (или про подругу). Документ должен иметь следующие параметры своего форматирования:

Фон (тег BGCOLOR) - серый,Шрифт (тег COLOR) - синий,Текст выровнять (тег ALIGN) по центру,Размер шрифта (тег size) – 9,Семья шрифта (тег face) – ARIAL,Название документа (title) – МОЙ КОТ (собака, хомяк и др…). Или, «Мой приятель Вася, одноклассница Маша».Кодировка - UTF-8ВОПРОСЫ ДЛЯ САМОПРОВЕРКИ

Что такое:

HTML?Опишите HTML элементы форматирования веб текста (Заголовки, Абзацы, Параграфы).Какими командами можно произвести выравнивание HTML текста?Как задать цвет фона и цвет текста?Какой это цвет #000000?Для чего нужна запись вида <!DOCTYPE HTML>?Какое правильное название имени и расширения при сохранении веб документа на диск?Как задать размер и семейство шрифта?В чем отличие заголовка документа от его названия (<head> </head> от <title> </title>)?Как вы понимаете термин «валидация»? Валидный сайт – это какой?Что такое «атрибут тега», приведите примеры тегов с атрибутами.

Спасибо за чтение

Вернуться к книге