HTML_Основы языка разметки гипертекста (1005869)
Текст из файла
Основы языка разметки гипертекста
Web-сайты и Web-страницы
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт посвящен какой-либо теме или проблеме и состоит из компьютерных Web-страниц.
Сайт является интерактивным средством представления информации. Он имеет титульную страницу, на которой имеются гиперссылки на его основные разделы (Web-страницы).
Гиперссылки также имеются на других Web-страницах сайта, что позволяет свободно перемещаться по сайту.
Гиперссылки могут связывать не только Web-страницы в пределах одного сайта, но и любые документы, размещенные в Интернете, независимо от того, где они находятся.
Щелчком по гиперссылке можно:
-
запустить почтовую программу для отправки сообщения разработчикам сайта,
-
вызвать программы для воспроизведения звуковых и видео файлов,
-
начать «скачивать» файлы на свой компьютер и т.д.
Интерактивность сайта обеспечивают также различные формы, с помощью которых посетитель сайта может регистрироваться на сайте, заполнять анкеты и т.д.
Web-сайты обычно являются мультимедийными, т.к. кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Web-страницы сайта могут содержать динамические объекты, (исполняемые модули), созданные с использованием Java-апплетов или элементов управления ActiveX.
Web-сайт состоит из Web-страниц, объединенных гиперссылками, содержащих мультимедиа и динамические объекты.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
Основные достоинства HTML-документов:
-
малый информационный объем;
-
возможность просмотра на персональных компьютерах, оснащенных различными операционными системами;
-
интерактивность.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста (Блокнот).
Пример разработки тематического сайта «Компьютер».
1. Разработка проекта сайта, т.е. определить сколько Web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой.
Состав сайта:
-
титульная страница «Компьютер»;
-
страница «Программы», содержащая классификацию программного обеспечения;
-
страница «Словарь», содержащая словарь компьютерных терминов;
-
страница «Комплектующие» с ценами на устройства компьютера;
-
страница «Анкета», содержащая анкету для посетителей сайта.
2. Форматирование текста и размещение графики
Используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот.
2.1. Открыть окно текстового редактора Блокнот.
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки.
Тэги могут быть парными, т.е. обязательно наличие открывающего и закрывающего тэгов (такая пара тегов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением.
Тэги могут быть и одиночными.
HTML-код страницы помещается внутрь контейнера <HTML></HTML>.
Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Web-страница разделяется на две логические части:
-
заголовок и
-
содержание.
Заголовок Web-страницы заключается в контейнер <headx/head> и содержит справочную информацию о странице, которая не отображается браузером, а также название документа.
Название Web-страницы содержится в контейнере <Т1Т-LE></TITLE> и отображается в строке заголовка браузера.
Назовем нашу Web-страницу «Компьютер»:
<HEAD>
<Т1ТЬЕЖомпьютер</Т1ТЬЕ>
</HEAD>
Основное содержание страницы помещается в контейнер <body></body> и может содержать:
-
текст,
-
графические изображения,
-
таблицы,
-
бегущие строки,
-
звуковые файлы и т.д.
Поместим на страницу текст «Давайте знакомиться - компьютер» :
<BODY>
Давайте знакомиться - Компьютер
</BODY>
Созданную Web-страницу необходимо сохранить в виде файла. Принято называть титульный файл сайта под именем index.htm.
В качестве расширения файла Web-страницы можно также использовать .html.
Создать специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, т.е. имя под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Компьютер», которая высвечивается в верхней строке окна браузера и, в первую очередь, анализируется поисковыми системами. Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.
2.2. В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.htm в папку сайта. Загрузить этот файл в окно браузера для просмотра.
<html>
<head>
<title>Koмпьютep</title>
</head>
<body>
Давайте знакомиться - Компьютер
</body>
</html>
Пока страница выглядит не слишком привлекательно. Мелкий шрифт, черный текст на белом фоне почти не обращают на себя внимание. С помощью HTML-тэгов можно задать различные параметры форматирования текста.
Некоторые тэги имеют атрибуты, определяющие свойства тега.
Атрибут является именем свойства, которое может принимать определенные значения.
Заголовок страницы целесообразно выделить крупным шрифтом. Размер шрифта заголовка задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий).
Без специального указания текст всегда выровнен по левому краю страницы. Однако заголовок обычно принято размещать по центру страницы (в данном случае — окна браузера). Сделать это нам позволяет атрибут ALIGN тэга заголовка:
<Н1 ALIGN="center">
Выравнивание по правой границе окна реализуется с помощью ALIGN=" right", по левой границе — ALIGN="left" (по умолчанию).
Изменить цвет заголовка, например на синий, можно с помощью тэга задающего шрифт с атрибутом цвета:
<FONT COLOR="blue">
Значение атрибута COLOR можно задать либо названием цвета ("blue", "red", "yellow" и т.д.), либо его кодом (например, "#FFOOOO").
3. В окне приложения Блокнот в контейнер <BODY> вставить последовательность тэгов и просмотреть результат в браузере.
<Н1 ALIGN="center">
<FONT COLOR="blue">
Давайте знакомиться
компьютер
</FONT>
</Н1>
<HR>
Первая или титульная страница является своего рода «визитной карточкой» вашего сайта.
Очевидно, что без графических изображений нам не обойтись. Однако они достаточно велики по объему и, следовательно, дольше передаются по сети. Поэтому не надо перегружать свои страницы графикой.
В Web-сайтах. могут использоваться три графических формата — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в вышеуказанные форматы с помощью графического редактора (Photo Editor).
Рисунок можно создать в графическом редакторе, преобразовать в электронный вид с помощью сканера и т.д.
На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт (в нашем случае — компьютера).
4. Получить изображение компьютера и сохранить в файле с именем computer.gif в каталоге сайта.
Для вставки изображения используется тэг <img> с атрибутом SRС="имя файла":
<IMG SRC="computer.gif">
Если графический файл находится в другом каталоге, то должен быть указан полный путь к файлу, если файл находится на сервере Интернета, то должен быть указан Интернет-адрес этого файла (URL).
Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
Тэг <IMG> имеет еще один атрибут ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC=" computer.gif" ALT="Компьютер">
На титульной странице должен быть какой-то поясняющий текст, например:
«Страницы этого сайта позволят вам больше узнать о компьютере и его программном обеспечении, терминологический словарь познакомит с компьютерными терминами, вы получите информацию о ценах на компьютерные комплектующие, а также можете заполнить анкету».
Расположить данный текст относительно рисунка различным образом позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
Если мы хотим, чтобы текст «обтекал» рисунок по правому краю, тэг вставки изображения примет следующий вид:
<IMG SRC="computer.gif" АЬТ="Компьютер" ALIGN="right">
5. В окне приложения Блокнот в контейнер <BODY> вставить тэг вставки изображения и «обтекающий» его текст, просмотреть результат в браузере.
<IMG SRC="computer.gif" АLТ="Компыотер" ALIGN="right"> Страницы этого сайта позволят вам больше узнать о компьютере и его программном обеспечении . . .
Гиперссылки на Web-страницах
Первая титульная страница должна обеспечивать посетителю Web-сайта возможность начать «путешествие» по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.
Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимы заготовки Web-страниц. «Пустые» страницы должны иметь заголовок, но могут пока не иметь содержания.
Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет содержать следующий HTML-код:
<HTML>
<HEAD>
<ТIТLЕ>Заголовок страницы</Т1ТЬЕ>
</HEAD>
<BODY>
</BODY>
</HTML>
6. Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anke-ta.htm в каталоге сайта.
Гиперссылка на Web-странице внешне представляет собой объект (текст или рисунок), выделенный цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.
Прежде всего, необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, поэтому разместим гиперссылки под введенным текстом, в новом абзаце, в одну строку, разделенные несколькими пробелами. Такое размещение гиперссылок часто называют панелью навигации.
Панель навигации будет представлять собой абзац, выровненный по центру. Абзацы помещаются в контейнер <р></р>, а пробелы обозначаются специальными символами:  .
Код, обеспечивающий вставку в титульную Web-страницу текста гиперссылок, выглядит следующим образом:
<Р ALIGH= "center">
[Программы]   [Словарь]  
[Комплектующие]   [Анкета]
</Р>
Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки <а></а> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Контейнер должен также содержать текст гиперссылки:
<A HREF="URL">Teкст гиперссылки</А>
URL-адрес документа может быть абсолютным и относительным.
Абсолютный URL-адрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ.
Абсолютный адрес документа, находящегося на локальном компьютере:
Характеристики
Тип файла документ
Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.
Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.
Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
