Создание html страницы в блокноте: разъяснения для чайников. HTML-теги html, head, body. Теги, которые есть в любой страничке интернета

Задание 1. Создание простейших файлов HTML

Чтобы создать свой файл HTML, сделайте следующее:

    Создайте папку HTML , в которой мы будем сохранять созданные Web-страницы.

    Запустите стандартную программу Блокнот (Notepad).

    Наберите в окне редактора простейший текст файла HTML:

Учебный файл HTML

Расписание занятий на вторник

    Сохраните файл под именем RASP.HTM.

    Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.

    Откройте в меню броузера Файл (File) , Открыть (Open) , Просмотр (Обзор - Browse ) и найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.

Задание 2. Управление расположением текста на экране

Информация.

При отображении HTML-документов броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущие подряд пробелов.

    При необходимости выполните п.п. 5-6 задания 1.

    Откройте первоисточник Web-страницы – в меню броузера Вид (View) , Источник (В виде HTML) откроется окно со стандартной программой Блокнот (Notepad), в котором ваша Web-страница представлена в командах HTML.

    Внесите изменения в текст файла HTML, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

Учебный файл HTML

Расписание

занятий

на вторник

    Сохраните внесенные изменения в файле RASP.HTM, с помощью командФайл (File) , Сохранить (Save) . Закройте программу Блокнот (Notepad).

    Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу используя клавишуF5 или с помощью командВид (View) , Обновить (Refresh). Изменилось ли изображение текста на экране?

Примечание

В дальнейшем после внесения изменений в Web-страницу всегда выполняйте п.п.4-5.

Задание 3. Тэги перевода строки и абзаца

Информация.

Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.

Тэг перевода строки
отделяет строку от последующего текста или графики. Тэг абзаца

Тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзаца. Оба тэга являются одноэлементными.

    Внесите изменения в текст файла HTML:

Учебный файл HTML

Расписание

занятий

на вторник

    4. Сохраните внесенные изменения в файлеRASP.HTM.

    Просмотрите с помощью броузераMicrosoft Internet Explorerновую полученнуюWeb-страницу.Как изменилось изображение текста на экране?

Задание 4. Выделение фрагментов текста

Информация.

Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тэга выделения фрагментов текста:

… для выделения полужирным ,

… для выделения курсивом,

… для выделения подчеркиванием .

Учебный файл HTML

Расписание занятий на вторник

2. Посмотрите новую полученную Web-страницу.

Возможно использование комбинированных шрифтов:

Расписание занятий на вторник

Но при этом необходимо помнить следующее правило записи комбинированных тэгов:

<Тэг-1> <Тэг-2> … Тэг-2 >

ошибочная запись

Задание 5. Использование стилей заголовка

Информация.

Существует два способа управления размером текста, изображаемого броузером:

    использование стилей заголовка,

    задание размера основного документа или размера текущего шрифта.

Используется шесть тэгов заголовков (от Н1 до Н6). Каждому тэгу соответствует конкретный стиль, заданный в параметрах настройки броузера. Стиль Н1 – самый крупный.

    Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание

занятий на вторник

    Посмотрите новую полученную Web-страницу.

Задание 5. Задание размера текущего шрифта.

Информация.

Тэг шрифта позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.

    Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание

занятий на вторник

    Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тэг .

    Измените текст HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.

Задание 6. Гарнитура и цвет шрифта

Информация.

Тэг предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать .

Для изменения цвета шрифта в тэге можно использовать атрибут COLOR="X" .

Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие:

красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.

Примеры записи цвета в формате RGB приведены в таблице:

Таблица 1

Цвет

Цвет

фиолетовый

коричневый

оранжевый

бирюзовый

    Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание >

занятий на вторник

    Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

Задание 7. Выравнивание текста по горизонтали

Информация.

С помощью тэгов HTML можно управлять горизонтальным выравниванием текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле (см. Рис.2).

Современные броузеры для выравнивания текста используется атрибут ALIGN= , который встраивается в теги абзаца или заголовка.

    Внесите изменения в файл RASP.HTM:

Учебный файл HTML

Расписание>

занятий на вторник

Задание 8. Задание цвета фона и текста

Информация.

При изображении фона, текста броузеры используют цвета, установленные по умолчанию, - они заданы параметрами настройки броузера. Эти цвета устанавливаются в начале файла HTML в тэге . Запись цвета аналогична цвету шрифта (см. таблицу 1 п.12). Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK=и VLINK=определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).

    Внесите изменения в файл RASP.HTM:

Учебный файл HTML

BGCOLOR="#FFFFCC" TEXT="#330066 ">

Расписание>

занятий на вторник

Задание 9.

    Проведите экспериментальную работу с созданным документом. Меняя размеры окна, посмотрите, как броузер показывает текст с принудительным разрывом строк. Что происходит, когда окно уменьшается настолько, что в нем не может поместиться целиком даже одно слово?

    Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.

Основы языка гипертекстовой разметки документов

Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из Web-страниц.

Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.

Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницы в том виде, который задается тэгами.

Основными достоинствами HTML-документов являются:

· малый информационный объем;

· возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер». Сначала необходимо разработать проект сайта, то есть определить, какова будет их тематика и как они будут связаны между собой.

Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:

· страницу «Программы», содержащую классификацию программного обеспечения;

· страницу «Словарь», содержащую словарь компьютерных терминов;

· страницу «Комплектующие» с ценами на устройства компьютера;

· страницу «Анкета», содержащую анкету для посетителей сайта.



Форматирование текста и размещение графики

1. Открыть окно текстового редактора Блокнот.

Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером ). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут обозначаться как прописными, так и строчными буквами.

Тэги и атрибуты Обозначения
HTML-код страницы помещается внутрь данного контейнера без них браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок Web-страницы заключается в данный контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.
Название Web-страницы содержится в данном контейнере и отражается в строке заголовка браузера при просмотре страницы.
Основное содержание страницы помещается в данный контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и так далее.
Назовем нашу Web-страницу «Компьютер» и поместим для начала на страницу текст «Все о компьютере». Компьютер Все о компьютере
Созданную Web-страницу сохранить в виде файла в своей папке. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. Для этого в поле Имя файла вместо * набрать имя index, а после точки расширение txt заменит на htm или html. Значок файла будет содержать значок браузера Internet Explorer. Не закрывать.
Загрузить файл index.htm в окно браузера для просмотра (для этого открыть файл с помощью программы Internet Explorer). Не закрывать. Для удобства работы можно окна уменьшить и расположить их рядом.
Теперь научимся форматировать текст.

Размер шрифта задается с помощью данных тэгов (от

(самый крупный) до

(самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом. Компьютер

Все о компьютере

Отредактировать текст в Блокноте, сохранить и просмотреть в Internet Explorer, для этого не забудьте обновить окно командой Вид - Обновить. (данные команды повторяйте после каждого этапа редактирования)
ALIGN Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания для тэга заголовка позволяет заданный атрибут, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN=”right”, а по центру - ALIGN=”center ”. Компьютер

Все о компьютере

С помощью данного тэга и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=”Arial”), атрибут SIZE – размер шрифта (например, SIZE=4), атрибут COLOR – цвет шрифта (например, COLOR=”blue”). Значение атрибута COLOR можно задать либо названием цвета (например, “red”, “green” и т.д.). либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат “#RRGGBB”, где первые цифры задают интенсивность красного (red), две последние – интенсивность зеленого (green) и две последние - интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, максимальная – FF. Следовательно, синий цвет имеет код “#0000FF”. Зададим заголовку синий цвет. Компьютер

Все о компьютере

Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью указанного одиночного тэга. Компьютер

Все о компьютере

Разделение текста на абзацы производится с помощью заданного контейнера. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания. На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим текст, разбитый на абзацы с различным выравниваем: Компьютер

Все о компьютере

Вставим изображение компьютера в текст с правой стороны. На Web-страницах могут размещаться графические файлы трех форматов – GIF, JPG и PNG. Если рисунок сохранен в другом формате, его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора (Photo Editor, Paint). Для вставки изображения используется указанный тэг с атрибутом SCR, который указывает на место хранения файла на локальном компьютере или в Интернете. Нужно указать путь файла. Иллюстрации на web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графического файла и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст с помощью атрибута ALT, поясняющий, что должен был бы увидеть пользователь на рисунке: . Для вставки рисунка с правой стороны текста тэг должен иметь следующий вид: Компьютер

Все о компьютере

На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

Можно найти рисунок компьютера в коллекции ClipArt, которую обычно используют в текстовом редакторе Word. Вставить его в текст word-ского документа, скопировать, затем вставить в документ графического редактора и сохранить в той же папке, что и Web-страница в формате GIF.

В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )
Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
1) для Windows
NotePad++ (скачать или )
Intype (скачать)

2) для Mac и Linux
Bluefish Editor (скачать)

Их отличие от обычных текстовых редакторов заключается в основном в том, что они делают автоматические отступы, ! дают возможность пересохранить файл в другой кодировке (обратите внимание, в будущем столкнётесь), окрашивают теги в различные цвета как, например, код внизу урока. В обычном редакторе он будет одного цвета.

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить . Готово!

Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

так НЕ должно выглядеть: photo, текстовой документ, game
так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

Смотрим настройки файлов и папок:

Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить

Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить

Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

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



<br>


Заголовок моей странички


4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:


Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:



<br> Название Вашей первой странички <br>

Заголовок моей странички

Это моя первая web-страничка!

В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.



Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете



<br> Название страницы <br>


Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы


<br> Название страницы <br>

Любой заголовок


Просто текст

Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом


Другой текст



Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).



<br> Название страницы <br>



В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:



<br>

Хочу выделить текст жирным, а этот уже курсивом



Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

Хочу выделить текст жирным, а этот уже курсивом

Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.

В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении - будем вставлять изображения, делать ссылки и много другого интересного)

Мои поздравления!
Несложно же?)

Практическое руководство по HTML

© Николай Чувахин, 1997

Глава 2. Наш первый HTML-документ

Как устроен HTML-документ

HTML-документ - это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:

Пример 1

Привет!

Это простейший пример HTML-документа.

Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.

Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:

Пример 1

Привет!

Это простейший пример HTML-документа.

Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, ) называется меткой (по-английски - tag, читается "тэг"). Большинство HTML-меток - парные, то есть на каждую открывающую метку вида есть закрывающая метка вида с тем же именем, но с добавлением "/". Метки можно вводить как большими, так и маленькими буквами. Например, метки , и будут восприняты браузером одинаково. Многие метки, помимо имени, могут содержать атрибуты - элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные метки

...

Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.

...

Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.</p> <h3><title> ...

Все, что находится между метками и , толкуется браузером как название документа. Netscape Navigator , например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

...

Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.

...

-
...

Метки вида (где i - цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня - самый крупный, шестого уровня, естественно - самый мелкий.

Такая пара меток описывает абзац. Все, что заключено между , воспринимается как один абзац. Метки и

Могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:

Выравнивание заголовка по центру

Образец абзаца с выравниванием по правому краю

Подытожим все, что мы знаем, с помощью примера 2:

Пример 2

Привет!

Это чуть более сложный пример HTML-документа

Теперь мы знаем, что абзац можно выравнивать не только влево,

но и по центру

или по правому краю.

С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого - с абзаца.

Разработка Web-сайтов с использованием языка разметки гипертекста HTML

Web-страницы и Web-сайты

Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.

Основными достоинствами Web-страниц являются:
- малый информационный объем;
- возможность просмотра в различных операционных системах.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.

Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").

Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.

Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.

Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.

Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).

Контрольные вопросы

1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?

2. Каким образом Web-страницы объединяются в Web-сайты?

Структура Web-страницы

HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.

Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.

Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером ).

Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.

Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.

Отображаемое в браузере содержание страницы помещается в контейнер (рис. 6.26):


<ТITLE>Компьютер


Компьютер и ПО
Рис. 6.26. Заготовка Web-страницы "Компьютер"

Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.

Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.

Контрольные вопросы

1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?

6.10. Практическое задание. Создать заготовку Web-страницы "Компьютер" и просмотреть ее в браузере.

Форматирование текста на Web-странице

Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.

Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1> (самый крупный) до <Н6> (самый мелкий).

Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).

Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.

Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".

Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".

Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:


<Н1 ALIGN="center">Компьютер и ПО

Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга

.

Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.

Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Компьютер" текст, разбитый на абзацы с различным выравниванием:

<Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
<Р ALIGN= "right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

Таким образом, домашняя страница сайта "Компьютер" будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):


<Н1 ALIGN="center">
Компьютер и ПО



<Р ALIGN="left">Ha этом сайте...
<Р ALIGN ="right"> Терминологический словарь
...
Рис. 6.27. Web-страница "Компьютер" с отформатированным текстом

Контрольные вопросы

1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?

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

6.11. Практическое задание. Создать Web-страницу "Компьютер" с отформатированным текстом и просмотреть ее в браузере.

Вставка изображений в Web-страницы

На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.

Вставка изображений. Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:

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

Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:

Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).

На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):
Рис. 6.28. Вставка изображения в Web-страницу "Компьютер"

Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.

Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

Контрольные вопросы

1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?

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

6.12. Практическое задание. Вставить в Web-страницу "Компьютер" изображение и просмотреть ее в браузере.

Гиперссылки на Web-страницах

Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:

Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:

<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки

Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.

  • к просмотру изображения в браузере:
    <А HREF="picture.jpg">Изображение
  • к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
    <А HREF="sound.wav">Звук
  • к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
    <А HREF="Apxив.ziр">Скачать файл

Панель навигации по сайту. Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:



<ТITLЕ>Заголовок страницы


На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.

Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.

Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:

<Р ALIGN="center">
[<А HREF="software . htm">Программы]  
[Словарь]  
[Комплектующие] 
[Aнкетa]

Гиперссылка на адрес электронной почты. Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер

, который задает стиль абзаца, принятый для указания адреса:


<А HREF="mailto:[email protected]">E-mail:
[email protected]

Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес.

Итак, созданная домашняя страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).
Рис. 6.29. Готовая домашняя страница сайта "Компьютер"

Контрольные вопросы

1. Какой тэг и его атрибуты используются для создания гиперссылок?

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

6.13. Практическое задание. Создать Web-страницу "Компьютер", содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.

Списки на Web-страницах

Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:

  • нумерованные списки, когда элементы списка идентифицируются с помощью чисел;

  • маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);

  • списки определений, позволяющие составлять перечни определений в так называемой словарной форме.

Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.

Нумерованные списки. Нумерованный список располагается внутри контейнера

    • можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.:


        < LI >Системные программы
        < LI >Прикладные программы
        < LI >Системы программирования

      Маркированные списки. Маркированный список располагается внутри контейнера , а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга

        можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):


          < LI >текстовые редакторы;
          < LI >графические редакторы;
          < LI >электронные таблицы;
          < LI >системы управления базами- данных.

        На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.

        Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).

        Список определений. Список определений располагается внутри контейнера

        /
        . Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами
        и определений, которые следуют за одинарными тэгами
        .

        Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):


        Процессор
        Центральное устройство компьютера, производящее обработку информации в двоичном коде.
        Оперативная память
        Устройство, в котором хранятся программы и данные.

        Контрольные вопросы

        1. Какие тэги используются для создания нумерованных списков? Маркированных списков?

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

        6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.

        6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.

    • Похожие публикации