- Глава 2. Наш первый HTML-документ
- Привет!
- Привет!
- Обязательные метки
- Выравнивание заголовка по центру
- Привет! Это чуть более сложный пример HTML-документа Теперь мы знаем, что абзац можно выравнивать не только влево, но и по центру или по правому краю.
- Это чуть более сложный пример HTML-документа
- Создаем первую html страницу.
- Теперь нужно сохранить наш файл в формате html.
- Создание простейшего html-документа
- Форматирование текста
- Теги логического форматирования
- Заголовок 1
- Заголовок 2
- Заголовок 3
- Заголовок 4
Глава 2. Наш первый HTML-документ
HTML-документ — это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:
Привет!
Это простейший пример HTML-документа.
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
Привет!
Это простейший пример HTML-документа.
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «». Такой фрагмент (например, ) называется меткой (по-английски — tag, читается "тэг"). Большинство HTML-меток — парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами. Например, метки , и будут восприняты браузером одинаково. Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки
Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
Все, что находится между метками и , толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
Метки вида (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
Такая пара меток описывает абзац. Все, что заключено между и , воспринимается как один абзац. Метки и могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
Выравнивание заголовка по центру
Образец абзаца с выравниванием по правому краю
Подытожим все, что мы знаем, с помощью примера 2:
Привет!
Это чуть более сложный пример HTML-документа
Теперь мы знаем, что абзац можно выравнивать не только влево,
но и по центру
или по правому краю.
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
Создаем первую html страницу.
В этом уроке, Вы по моей инструкции создадите свою первую веб-страницу. Пока что Вам не надо вникать что за непонятные символы придется использовать. В этом уроке мы создаем страницу, а в следующих двух уроках мы полностью разберемся в каждом написанном символе.
Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.
Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке здесь). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:
<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
Здравствуйте! Это моя первая веб-страница!
</body>
</html>
Далее, нажимаем в верхнем меню кнопку "Кодировки" и выбираем "Кодировать в UTF-8"
Большинство сайтов рунета состоят из страниц html написанных на кодировке UTF-8. Для того чтобы наши страницы корректно отображались в браузере, мы тоже будем использовать данную кодировку.
Теперь нужно сохранить наш файл в формате html.
Не забываем, что Notepad++, это текстовый редактор, а это значит, что на данный момент мы имеем обычный текстовый файл с набором символов. Для того чтобы наш браузер отображал созданную нами текстовую страницу как веб-страницу, нам нужно сделать из нее файл с расширением html.
Для этого нажимаем в верхнем меню кнопку "Файл", затем "Сохранить как", выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).
Поздравляю Вас! Вы только что создали свою первую веб-страницу! Теперь Вы можете зайти в папку "Сайт" и запустить созданный файл. Страница откроется с помощью браузера, и Вы увидите, что вместо непонятных символов которые мы вставляли, браузер выводит на экран вполне понятную информацию.
Как это все работает, мы разберем в следующих уроках.
* Когда нам нужно будет открывать файл для редактирования, будем нажимать правой кнопкой мыши на файл и выбирать "Edit with Notepad++" (открыть с помощью Notepad++).
Вы что-то не поняли из этого урока? Спрашивайте!
- vadimgreb@yandex.ru
Создание простейшего html-документа
Мы рассмотрели основные разделы любого HTML-документа. Теперь попробуем создать свой первый документ. Для этого откроем текстовый редактор Блокнот (Пуск → Программы → Стандартные → Блокнот) и наберем в нем следующий HTML-код:
Это мой первый HTML-документ!
Теперь сохраним данный документ под любым именем, присвоив файлу расширение html. Закроем Блокнот и попробуем заново открыть ваш файл. Должно получиться следующее:
ЗАНЯТИЕ 2. Логическое и физическое форматирование текста.
Форматирование текста
Область работы с текстом в HTML включает в себя большое количество всевозможных тегов, составляющих две основные группы – теги логического форматирования и теги физического форматирования.
В группу тегов логического форматирования входят теги, отображающие на экране монитора элементы документа таким образом, как установлено по умолчанию в спецификации языка разметки HTML. Результат действия разных тегов логического форматирования визуально может совпадать, ибо основное их предназначение заключается в логическом выделении отдельных элементов HTML.
Теги логического форматирования
Тег ACRONYM> используется для расшифровки аббревиатур. Реализуется через параметр TITLE (не путайте с тегом TITLE>!) и отображается в браузере при наведении курсора на слово-аббревиатуру.
Задание 1. Наберите в текстовом редакторе Блокнот следующий HTML-код:
HTML - один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания WEB-сайтов.
Сохраните документ под любым именем с расширением html или htm, закройте Блокнот и снова откройте этот файл.
При наведении курсора мыши на аббревиатуру HTML появится надпись-расшифровка.
Тег CITE> призван выделять различные цитаты и высказывания, названия библиографических источников и пр. Текст, помещенный между тегами и , браузером выделяется курсивом.
Тег DEL> используется для обозначения удаленного текста. В браузере текст между тегами отображается зачеркнутым.
Тег STRONG> используется для выделения фрагментов текста, на которых необходимо акцентировать внимание пользователя. Браузерами результат такого форматирования отображается жирным начертанием.
Задание 2. Посмотрите, что произойдет с текстом, если к нему применить описанные выше теги. Для этого наберите следующий HTML-код в редакторе Блокнот:
Тег CITE выделяет текст курсивом. Тег DEL отображает текст зачеркнутым. Тег STRONG отображает текстжирным начертанием.
Теперь откройте ваш документ с помощью браузера:
Теги H1>, H2>, …, H6> – тег с указанием одной из цифр (от 1 до 6) задает определенный размер заголовка всего текста целиком или его конкретного фрагмента. Соответственно, заголовок будет минимальным, а - самым большим. Особенностью тегов является то, что они уже подразумевают отступ от текстовой части и разработчикам HTML-документов не приходится делать отступ самостоятельно.
Задание 3. Наберите следующий HTML-код в редакторе Блокнот:
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Просмотрите полученный результат через браузер.
Задание 4. Создайте собственный HTML-документ, в котором бы использовались все вышеописанные теги логического форматирования.