Методическая разработка на тему:

advertisement
Министерство образования и науки
Астраханской области
ГБОУ АО НПО «Профессиональный лицей № 8»
Методическая разработка на тему:
Создание Web-страницы с помощью языка HTML
Выполнила мастер
производственного обучения
А.П. Есина
Астрахань, 2011 г.
2
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
К наиболее интенсивно развивающимся и популярным средствам
Интернета относится Всемирная паутина - World Wide Web, в которой
сосредоточена
основная
часть
информации
сети.
Данные
в
паутине
представлены в виде связанных между собой документов, которые называются
Web-страницами. Каждая Web-страница может содержать текст, рисунки, видео,
звукозаписи и прочее. Такие страницы могут размещаться на компьютерах в
любой точке планеты. Компьютер, который предоставляет в Интернете услуги
WWW, называется Web-сервером.
Кроме
основного
текста,
Web-страницы
обычно
содержат
слова,
подчеркнутые или выделенные другим цветом, и активные изображения, на
которых указатель мыши изменяется и обычно принимает вид
. Это -
гипертекстовые ссылки, обеспечивающие связь с другими страницами.
Щелкнув мышью на такой ссылке, вы перейдете на другую Web-страницу.
Просмотреть любую Web-страницу можно с помощью специальных программ браузеров, наиболее популярные из которых - Microsoft Internet Explorer.
Один из способов подготовки Web-страниц заключается в «ручном»
создании кода документов Всемирной паутины на языке HTML (Язык разметки гипертекста). Данный язык представляет собой довольно простой набор
команд описывающих структуру документа. Язык HTML позволяет выделять в
документе отдельные элементы - заголовки, абзацы, таблицы и т.д. В данном
пособии будет рассказано и показано,
как создавать Web-страницы на
практическом
Профессионального лицея № 8 с
примере
помощью языка HTML.
Web-страницы
3
1. КАК УСТРОЕНЫ WEB-СТРАНИЦЫ
В этом разделе на примере главной страницы сайта Эрмитажа я расскажу, как
устроены Web-документы.
Сначала загрузим страницу сайта Эрмитажа.

Установите связь с Интернетом.

Нажмите кнопку Пуск на Панели задач операционной системы Windows.
Откроется основное меню Windows.

Выберите команду Программы ♦ Internet Explorer из основного меню, чтобы
запустить программу Microsoft Internet Explorer.

В поле ввода Адрес рабочего окна программы введите электронный адрес сайта
Эрмитажа http://www.hermitagemuseum.org/ и нажмите клавишу ENTER . После загрузки в
окне программы появится главная страница сайта Эрмитажа.
Рис.1. Главная страница сайта Эрмитажа

Разорвите связь с Интернетом.
Теперь отобразите на экране исходный код загруженной Web-страницы.

Выберите команду меню Вид ♦ В виде HTML. Будет запущена программа
Блокнот, в окне которой появится исходный код главной страницы сайта Эрмитажа (Рис. 2.).
Рис. 2. Исходный код страницы сайта Эрмитаж
Файлы с текстом кода на языке HTML имеют расширение .html или .htm. В документе
HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки
< и >, например, <html>, <head>, <title>. Такие элементы разметки называются тегами.
Теги управляют отображением информации и при этом сами не выводятся на экран. Теги
бывают одиночными, открывающими и закрывающими. Кроме угловых скобок тег содержит
свое
имя
и
необязательные
атрибуты,
т.е.
параметры
тега,
напри м ер,
l an gu a ge s = "J a v aS cr i pt ".
Если в тег включается символ слеш /, то тег является конечным тегом, закрывающим
некоторую структуру, например, </script>. Обратите внимание, что в начале документа
расположен тег <html>. Данный тег означает начало документа. В свою очередь, тег </html >
4
указывает на конец документа.
В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов - любые символы. Если в качестве значений атрибута используются, например, русские
символы, то они должны быть заключены в кавычки, например, name="Название".
Язык HTML не различает большие и малые буквы, так что теги <TITLE>, <title> и
<Title> эквивалентны.
Многие теги являются парными: за открывающим тегом следует закрывающий его,
а между ними содержится текст или другие теги, например:
<title>The State Hermitage Museum, St. Petersburg, Russia -Po w e r e d b y I B M < / t i tl e >
В подобных случаях два тега и часть документа, заключенная между ними, образует
блок, называемый элементом HTML. Некоторые теги, например, <hr>, являются одиночными,
и для них нет закрывающего тега. Данные теги сами по себе являются элементами HTML.
Как уже упоминалось, теги могут иметь атрибуты - параметры с дополнительной информацией о том, как браузер должен обрабатывать текущий тег, например, можно указать цвет
текста. Атрибут тега состоит из имени, например, language, знака равенства = и значения,
которое задается строкой символов, например, languages="JavaScript". Значение атрибута
может записываться как в кавычках, так и без них. Если эти значения используют только
символы латинского алфавита, цифры и дефисы, то кавычки иногда опускают. Атрибуты в теге
отделяются друг от друга пробелами, при этом их порядок следования произволен.
Каждый HTML-документ имеет определенную структуру:
<html>
<head>
</head>
<body>
</body>
</html>
HTML-документ содержит теги <html> и </html>, отмечающие начало и конец документа, заголовок, ограниченный тегами <head> и </head>, а также тело или содержательную часть документа, заключенную между тегами <body>… </body>.
В заголовке, ограниченном тегами <head> и </head>, теги <title>….</title>
определяют название документа, которое должно описывать его содержимое. Название
документа обычно содержит несколько слов. Это название отображается браузерами в строке
заголовка рабочего окна программы. При создании названия документа следует помнить о
том, что останется от имени после минимизации окна браузера. Тег <title> нельзя путать с
названием файла документа. Важность названия документа заключается еще и в том, что имя
страницы загружается из Интернета в первую очередь, а получение остальной части документа
может занять продолжительное время.
Задачей заголовка документа является представление необходимой информации для
браузеров. Заголовок может включать элементы <meta>….</meta>, чтобы указать
сведения о документе. Данная информация не имеет отношения к языку HTML, но может
использоваться браузером. Открывающий тег <meta> включает пары имя = значение,
описывающие свойства документа, например, авторство, список ключевых слов и т.д.
Например, данный тег может выглядеть так:
<meta contents="The State Hermitage Museum: Language
S e l e c t i o n name=DESCRIPTION>.
Тег <script> позволяет включать в документ программу (скрипт), который будет
запущен на вашем компьютере после загрузки Web-страницы. Скрипты можно
использовать, например, для анимации изображения. Атрибут тега с именем language
указывает
на
используемый
для
скрипта
язык,
например,
атрибут
languages="JavaScript" показывает браузеру, что программа написана на языке JavaScript.
Документ HTML может содержать комментарии для пояснения HTML-кода.
Комментарии обычно используются авторами документа для заметок, предназначенных для
собственного применения. Комментарии игнорируются браузером и не влияют на отобра-
5
жение Web-страницы на экране. Следует помнить, что комментарии являются частью файла,
передаются по сети вместе с документом и могут приводить к увеличению времени загрузки.
Комментарии могут состоять из произвольного числа строк, они начинаются с
последовательности < ! - - и завершаются символами -- >. Например, на сайте Эрмитажа
используется следующий комментарий:
< ! - - saved from url=(0024)http://www.hermitage.ru/ -->
Другие теги языка HTML будут рассмотрены в следующих главах.
2. СОЗДАНИЕ Web-СТРАНИЦЫ
Рассмотрим основные приемы создания Web-страниц на языке HTML, такие как ввод
заголовков и текста документа, установка цвета текста и фона. В качестве примера будем
создавать страницы для сайта Профессионального лицея № 8. Сайт обеспечит рекламу его
деятельности, упростит выбор профессии, привлечет новых учащихся.
Создавать HTML-код лучше в простом текстовом редакторе, например, в программе
Блокнот. Введите код, который содержится практически в каждой Web-странице и
определяет структуру HTML-документа.

Щелкните мышью на кнопке программы Блокнот на Панели задач
операционной системы Windows, чтобы перейти к окну данной программы.

Выберите команду меню Файл ♦ Создать для создания нового документа в
редакторе Блокнот.

В новый документ редактора введите код, содержащий основные теги для
определения структуры HTML-документа:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Теперь введите в HTML-документ название Web-страницы и краткую информацию
о Лицее.

Между тегами <title> и </title> наберите на клавиатуре название
Web-страницы Профессиональный лицей №8. Между тегами <body> и </body> вставьте
новую строку с информацией о лицее: Профессиональный лицей № 8. Цвета фона и текста
можно задавать в цифровом или символьном виде. Словесное указание цвета более удобно
использовать, зато численное обозначение позволяет задавать любой оттенок. Атрибуты
bgcolor и text обеспечивают установку цвета фона и текста Web-страницы. Давайте
установим синий (blue) цвет для фона Web-страницы, и красный (red) цвет для текста.

Вместо тега <body> введите фрагмент HTML-кода:
<body bgcolor=blue text= red> (Рис. 3).
<html>
<head>
<title> Профессиональный лицей № 8</title>
</head>
<body bgcolor=blue text= red>
Профессиональный лицей № 8
</body>
</html>
Рис.3. HTML-код создаваемой Web-страницы
Чтобы сохранить документ на диске, выполните следующие шаги.

Выберите команду меню Файл ♦ Сохранить. На экране появится диалог
6
Сохранить как.
Рис. 4. Диалог Сохранить как

В открывающемся списке Папка выберите диск для документа.

В списке папок и файлов выберите каталог, в котором будет храниться HTMLдокумент.

В поле ввода Имя файла введите имя файла атлант.html для хранения
страницы.

Нажмите кнопку Сохранить, чтобы закрыть диалог Сохранить как. Документ
будет сохранен на диске.
Осталось просмотреть созданную Web-страницу в браузере.
 Щелкните мышью на кнопке программы Microsoft Internet Explorer на Панели задач
операционной системы Windows, чтобы перейти к окну браузера.
 В поле ввода Адрес окна программы введите полный путь к созданному файлу с
HTML-кодом Лицей.html.
Нажмите клавишу ENTER. В окне браузера появится созданная Web-страница (Рис. 5).
Рис. 5. Созданная Web-страница.
Обратите внимание, что текст на странице отображается красным цветом на синем
фоне.
3. ФОРМАТИРОВАНИЕ ТЕКСТА НА СТРАНИЦЕ
Форматирование текста на странице позволяет красиво оформить Web-документ. В этом
разделе мы рассмотрим, как устанавливать размер и начертание шрифта, выравнивать текст.
Мы будем по-разному форматировать отдельные фрагменты текста, поэтому включим в
НTML-документ новое предложение.

Щелкните мышью на кнопке программы Блокнот на Панели задач
операционной системы Windows, чтобы перейти к окну редактора.
 Вставьте новую строку, которая должна быть расположена ниже тега <body>, с текстом
Профессиональный лицей № 8 готовит профессии служащих! (Рис. 6).
На Web-странице могут использоваться заголовки разделов документа. Заголовки
объявляются парой тегов: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>,
<h5></h5> или <h6></h6>. Символы в заголовке имеют большую толщину и размер по
7
сравнению с обычным текстом. Заголовок с тегом <hl> является самым крупным, а с тегом
<h6> - самым мелким. Номер в названии тега указывает на уровень заголовка, что позволяет естественным образом включать в разделы документа подразделы. Необходимо отличать
заголовок раздела от заголовка документа, определяемого тегом <head>.
Рис. 6. HTML-документ
Создадим заголовок раздела в нашем HTML-документе.

В документе первое предложение Профессиональный лицей № 8 замените
на фрагмент кода <h1> Профессиональный лицей № 8</h1>, чтобы данная строка стала
заголовком первого уровня.
Для просмотра документа в браузере, его нужно сохранить на диске.

Выберите команду меню Файл ♦ Сохранить. HTML-документ будет
сохранен на диске.

Щелкните мышью на кнопке программы Microsoft Internet Explorer на Панели
задач операционной системы Windows, чтобы перейти к окну браузера.

Нажмите кнопку
с надписью Обновить на панели инструментов. Файл
Лицей.html с нашим HTML-документом будет перезагружен, а на Web-странице появится
заголовок (Рис.7).
Рис.7. Заголовок первого уровня
По умолчанию заголовок раздела выравнивается по левому краю страницы. Атрибут
align позволяет выровнять заголовок по правому краю или центрировать. Значение right данного атрибута обеспечивает выравнивание текста по правому краю, а значение center центрирование. Давайте выровняем заголовок раздела по центру Web-страницы.

Нажмите кнопку программы Блокнот на Панели задач операционной системы
Windows, чтобы перейти к окну редактора.

Добавьте в тег <h1> атрибут align=center, чтобы центрировать заголовок.
Данный элемент будет выглядеть так:
<h1 align=center> Профессиональный лицей № 8</h1>

Выберите команду меню Файл ♦ Сохранить для сохранения

Щелкните мышью на кнопке программы Microsoft Internet Explorer на Панели
задач операционной системы Windows, чтобы перейти к окну браузера.
8

Нажмите кнопку
с надписью Обновить на панели инструментов. Файл
атлант.html будет перезагружен, а на Web-странице заголовок будет центрирован (Рис. 8).
Рис. 8. Центрированный заголовок раздела
Теперь установим наклонное начертание остального текста Web-страницы,
воспользовавшись парными тегами <i></i>.

Перейдите к редактору Блокнот с помощью Панели задач операционной
системы Windows.

Добавьте в начало и конец второго предложения текста HTML-документа
открывающий <i> и закрывающий </i> теги. Элемент с данными тегами примет вид:
<i> Профессиональный лицей № 8< /i>

Сохраните HTML-документ на диске с помощью команды меню Файл ♦
Сохранить.

Перейдите к программе Microsoft Internet Explorer, воспользовавшись Панелью
задач операционной системы Windows.

Перезагрузите файл с HTML-документом Лицей.html, используя кнопку
с надписью Обновить на панели инструментов, и на Web-странице текст примет наклонное
начертание (Рис.9).
Отметим, что пара тегов <b></b> позволяет установить полужирное начертание
текст, пара <u></u> - подчеркнутое начертание символов.
Рис. 9. Наклонное начертание текста
HTML поддерживает несколько способов изменения размера шрифта. Но, мы
рассмотрим наиболее удобный часто используемый способ, он заключается в
использовании пары тегов <font></font>. Атрибут тега size позволяет устанавливать
размеры шрифта в условных единицах от 1 до 7: значение 1 соответствует минимальному
размеру шрифта величина 7 - максимальному. Другой атрибут рассматриваемого тега - face
позволяет указать название шрифта, например, Arial, которым браузер будет отображать
текст. Еще один атрибут - color - способен дать цвет шрифта. Значением данного атрибута
являются те же значения, что и для описанных ранее атрибутов для установки цвета фона и
текста.
Итак, изменим размер шрифта с помощью тега <font>.
9

Перейдите к редактору Блокнот.

Добавьте в начало и конец второго предложения текста HTML-документа
открывающий <font size=5> и закрывающий </font> теги, чтобы установить размер
шрифта в 5 условных единиц. Фрагмент кода будет выглядеть так:
<font size=5><i> Профессиональный лицей № 8 готовит профессии
служащих!</ i ></ f on t >
Теперь выровняем данный фрагмент текста по центру с помощью тегов
<center></center>.

Добавьте в начало и конец второго предложения текста HTML-документа
открывающий <center> и закрывающий </center> теги

Сохраните HTML-документ на диске.

Перейдите к программе Microsoft Internet Explorer.

Перезагрузите файл Лицей.html. На Web-странице основной текст будет
центрирован.
4. ВСТАВКА ИЗОБРАЖЕНИЯ
Рисунки позволяют существенно повысить привлекательность Web-страницы, лучше
передать содержание документа. В этом разделе я расскажу и покажу, как вставлять изображение в Web-документ.
Рисунки на Web-странице должны быть созданы в таком графическом формате,
который поддерживается браузером. К стандартным форматам Web-графики относятся GIF,
JPG и PNG. Эти форматы обеспечивают эффективное сжатие изображений и минимальный
размер файлов, что значительно сокращает время загрузки из сети.
Сначала подготовим необходимые графические файлы для вставки в Web-документ.

Скопируйте файлы 2.GIF и licem.GIF в папку, в которой хранится файл с
HTML-кодом Лицей.html.
Дело в том, что в HTML-документе должно быть указано имя графического файла или
полный путь к нему. Чтобы ваша Web-страница была независима от возможных изменений на
диске, все файлы, относящиеся к создаваемому Web-документу или сайту, лучше хранить в
одной папке.
Для вставки изображения в Web-документ используется одиночный тег <img>.
Единственный обязательный атрибут данного тега srс определяет имя вставляемого файла
или его электронный адрес в Интернете. С помощью необязательного атрибута <border>
можно включить отображение рамки вокруг рисунка. Значение атрибута определяет толщину
рамки в пикселах.
Вставим скопированный рисунок в Web-документ.

Перейдите к редактору Блокнот.

После элемента заголовка раздела <h1 align=center>Профессиональный
лицей №8</h1> вставьте новую строку с кодом, который обеспечивает включение рисунка
с рамкой в Web-документ:
<img src=licem.GIF border=1>

Сохраните HTML-документ на диске.

Перейдите к программе Microsoft Internet Explorer и перезагрузите файл
Лицей.html. На Web-странице появится рисунок здания лицея.
По умолчанию вставленное изображение выравнивается по левому краю страницы.
Давайте отцентрируем вставленный рисунок.

Перейдите к редактору Блокнот.

Добавьте в элемент встраивания изображения открывающий <center> и
закрывающий </center> теги, чтобы выровнять рисунок по центру. Указанный фрагмент
HTML-кода примет вид:
<center><img src=licem.GIF></center>

Сохраните HTML - документ на диске.

Перейдите к программе Microsoft Internet Explorer и перезагрузите файл
10
Лицей.html. На Web-странице рисунок будет выровнен по центру (Рис. 10).
Рис.10. Центрированный рисунок
Для установки фонового рисунка применяется атрибут background тега <body>.
В качестве значения атрибута следует указать имя графического файла с изображением.
Установим фоновый рисунок на Web-страницу.

Перейдите к редактору Блокнот.

Добавьте в элемент с тегом <body> атрибут background=2. GIF, чтобы данный
фрагмент HTML-кода выглядел так:
<body bgcolor=blue text=red background=2.GIF>

Сохраните документ на диске.
Перейдите к программе Microsoft Internet Explorer и перезагрузите файл Лицей.html.
На Web-странице появится фоновый рисунок (Рис. 11).
Обратите внимание, что имя графических файлов в HTML-документе набрано
строчными буквами. Операционная система Windows не различает регистр букв в названиях
файлов. Однако операционная система Unix, в которой в дальнейшем может функционировать
ваш сайт или Web-страница, отличает строчные и прописные буквы, поэтому имя
графического файла в теге следует указывать с соблюдением регистра.
Рис.11. Фоновый рисунок.
11
5. СОЗДАНИЕ СПИСКОВ ПЕРЕЧИСЛЕНИЯ
Список является удобной формой представления данных. Например, с помощью списков
полезно объединять фрагменты информации в единую структуру, описывать многошаговые
процессы, представлять оглавления документов. Язык HTML поддерживает нумерованные и
ненумерованные списки. В ненумерованных или маркированных списках для выделения
элементов используются специальные символы, которые называют маркерами списка. В
нумерованных или упорядоченных списках перед элементом отображается его порядковый
номер. Рассмотрим, как создавать маркированный список на Web-странице.

В элемент <title></title> введите заголовок документа Здесь вы получите
специальности: чтобы данный фрагмент HTML-кода выглядел так:
<title>Здесь вы получите специальности: </title>

Ниже тега <body> введите новую строку с элементом HTML-кода, который определяет центрированный заголовок раздела документа:
<h2 align=center>:</h2>
Для создания маркированного списка следует использовать пару тегов <ul></ul>, которая
ограничивает список. Каждый элемент списка должен начинаться тегом <li> причем нет
необходимости в закрывающем теге элемента. Давайте создадим ненумерованный список
профессий. Ниже элемента <h2 align=center> Здесь вы получите специальности:</h2>
введите код для списка:
<ul>
<li>Оператор ЭВМ
<li>Оператор связи
<li>Электромонтер ЛКС
<li>Секретарь - референт
<li>Бухгалтер
</ul>
Полный HTML-код представлен на Рис. 12.
Рис. 12. HTML - код списка
Осталось сохранить документ на диске и просмотреть его в браузере.

Выберите команду меню Файл ♦ Сохранить.

В открывающемся списке Папка выберите диск, в котором расположен файл с HTML
- кодом Лицей.html.

Нажмите кнопку Сохранить, чтобы закрыть диалог Сохранить как.

Перейдите к программе Microsoft Internet Explorer.

В поле ввода Адрес окна программы введите полный путь к созданному файлу с
HTML - кодом Лицей.html.

Нажмите клавишу ENTER. В окне появится созданная Web-страница со списком
Обратите внимание, что каждый элемент списка помечен специальным маркером - темным кружком.
Отметим, что для создания нумерованных списков можно воспользоваться парой тегов <ol></ol>,
причем элементы списка также должны начинаться тегом <li>.
12
Рис. 13. Web-страница со списком
6. ССЫЛКИ НА ДРУГИЕ СТРАНИЦЫ
При путешествии по Всемирной паутине щелчком мыши можно быстро и легко переходить от одного документа к другому вне зависимости от того, где реально расположена
нужная Web-страница. Данная возможность, во многом благодаря которой Интернет обязан
своей феноменальной популярности, обеспечивается гипертекстовыми ссылками. Поддержка
ссылок является одним из краеугольных камней языка HTML.
Ссылка состоит из двух частей: указателя и адресной части. Указатель ссылки связан с
ее представлением на Web-странице. Указателем ссылки может быть фрагмент текста или
изображение. Указатель ссылки обычно выделяется цветом. При подведении к ссылке
указатель мыши принимает вид
. Адресная часть ссылки содержит имя документа, на
который указывает ссылка, или его электронный адрес для загрузки из Интернета. Далее
будет рассказано, как вставлять в Web-документ ссылки, представленные текстом и рисунком.
Сначала откроем основной HTML-документ Лицей.html, в который мы будем вставлять
гипертекстовые ссылки.

Перейдите к редактору Блокнот.

Выберите команду меню Файл ♦ Открыть. На экране появится диалог
Открыть (Рис. 14.).

В открывающемся списке Папка выберите диск с файлом Лицей.html.

В списке папок и файлов выберите каталог, в котором хранится
документ Лицей.html.

В открывающемся списке Тип файлов выберите строку Все файлы (All
Files), чтобы в списке папок отображались все файлы.

Щелкните мышью на файле Лицей.html в списке папок.
Рис. 14. Диалог «Открыть».
 Нажмите кнопку Открыть, чтобы закрыть диалог. В окне программы появится HTML код документа Лицей.html .
13
Для вставки ссылки на другие страницы используется пара тегов <а></а>. Данный
тег имеет единственный атрибут href, значением которого является адресная часть ссылки,
т.е. имя документа, на который нужно сослаться, или его электронный адрес для загрузки из
Интернета. Указатель ссылки располагается между открывающим <а> и закрывающим </а>
тегами. Это может быть фрагмент текста или HTML-код, соответствующий рисунку.
Давайте создадим текстовую ссылку, в которой указателем будет слово г. Астрахань
на нашей Web-странице, а адресной частью - имя созданного ранее документа Сайт об
Астрахани.html.
 Ниже тега <body> HTML - кода найдите слово г. Астрахань.
 Замените слово г. Астрахань на HTML-код со ссылкой на Сайт об Астрахани <а
href=" Сайт об Астрахани.html"> г. Астрахань </a>
Адресная часть заключена в кавычки, так как некоторые браузеры могут ее некорректно
обрабатывать без кавычек.
HTML-код документа со ссылкой представлен на Рис. 15.
Рис. 15. HTML-код с текстовой ссылкой
Полностью HTML-код всей страницы выглядит так, как на Рис.16:
Рис 16. HTML-код всей страницы
Теперь проверим работу со ссылкой в браузере.
 Сохраните HTML-документ на диске.
 Перейдите к программе Microsoft Internet Explorer.
14
 В поле ввода Адрес окна программы введите полный путь к файлу с HTMLкодом Лицей.html.
 Нажмите клавишу ENTER. В окне браузера появится созданная Web-страница, в
которой слово г. Астрахань выделено цветом и подчеркиванием (Рис.16). Это означает,
что данное слово указывает на ссылку.
Рис. 16. Web-страница с текстовой ссылкой
 Подведите указатель мыши к ссылке г. Астрахань. Указатель мыши изменится на
 Щелкните мышью на ссылке. В окне браузера появится Web-страница сайта об
Астрахани (Рис.17).
15
ЗАКЛЮЧЕНИЕ
В
данном методическом пособии я ознакомила
создания
вас с возможностями
Web-страницы с помощью языка HTML. Так же я
показала, как
оформлять на Web-странице таблицы и списки, которые помогут в удобной форме
представить данные. Научила создавать гиперссылки, с помощью которых, по
щелчку мыши можно быстро и легко переходить от одного документа к другому
вне зависимости от его расположения,
форматировать текст на странице и
украшать Web-страницу с помощью изображений.
Вы узнали основную
структуру HTML-документа, основные теги HTML - языка, их назначение и
атрибуты.
Надеюсь, эти знания помогут вам быстро и легко создать личную Webстраницу, красиво и аккуратно украсить ее.
Итогом моей работы стала Web-страница Профессионального лицея № 8,
которая хранится в файле
Лицей.html
и представлена на следующей
иллюстрации:
На странице имеется гиперссылка на слова «г. Астрахань». Щелчок левой
клавишей мыши по ней открывает файл «Сайт об Астрахани».
16
17
ОГЛАВЛЕНИЕ
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА ................................................................................................................................... 2
1. КАК УСТРОЕНЫ WEB-СТРАНИЦЫ ....................................................................................................................... 3
2. СОЗДАНИЕ WEB-СТРАНИЦЫ ................................................................................................................................. 5
3. ФОРМАТИРОВАНИЕ ТЕКСТА НА СТРАНИЦЕ ....................................................................................................... 6
4. ВСТАВКА ИЗОБРАЖЕНИЯ ..................................................................................................................................... 9
5. СОЗДАНИЕ СПИСКОВ ПЕРЕЧИСЛЕНИЯ ....................................................................................................... 11
6. ССЫЛКИ НА ДРУГИЕ СТРАНИЦЫ .................................................................................................................... 122
7. ВСТАВКА ТАБЛИЦ .......................................................................................... ERROR! BOOKMARK NOT DEFINED.
ЗАКЛЮЧЕНИЕ ............................................................................................................................................................. 155
ОГЛАВЛЕНИЕ .............................................................................................................................................................. 177
СПИСОК ЛИТЕРАТУРЫ .............................................................................................................................................. 18
18
СПИСОК ЛИТЕРАТУРЫ
1. Ю.М. Алексеев «Быстро и легко создаем, программируем, шлифуем и
раскручиваем Web-сайт» - М.: Лучшие книги, 2003
2. О.В. Ефимова, В.В. Морозов «Практикум по компьютерной технологии» - М.:
АБФ, 1998
3. Адрес в Интернете - http://l2w.narod.ru/TextBook/CreateFile.html
Download