Создание web страниц с помощью html кода. Создание Web-страницы с помощью языка HTML. Другие варианты добавления CSS
Оставьте комментарий 6,950
Курс «Создание Web-страниц средствами языка HTM
L
»
Тема 1. Начальные сведения о языке HTML
Назначение языка HTML
Web
-страницы
– это специальные файлы, написанные на языке HTML
(Hyper
Text
Markup
Language
– язык разметки гипертекста)
. Под разметкой
понимается вставка в текст специальных кодов (тегов), определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой - броузером.
Язык HTML
предназначен для создания системно-независимых файлов и не описывает формат документа, но описывает его структуру. Например, если в тексте встречается заголовок, то код HTML
просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа - броузер сама решает, что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом или выровнять по центру экрана. Если этот текст будет воспроизведен синтезатором речи, то синтезатор использует этот код, чтобы повысить громкость и сделать необходимую паузу.
Язык HTML
представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты.
Язык HTML
появился одновременно со службой Worl
d Wide
Web
и развивался вместе с ней. Он является основой Worl
d Wide
Web
и одновременно причиной ее широчайшей популярности.
HTML
- файл
HTML
- файл – текстовый файл, имеющий расширение .htm
или .
html
Web
-страница хранится в виде HTML
- файла. Для создания HTML
- файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word
Pad
, так и редакторы Web.
Структура документа HTML
Документ HTML состоит из основного документа и тегов разметки, которые являются наборами обычных символов.
Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега и заканчиваться соответствующим закрывающим тегом. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML.
Документ HTML состоит из раздела заголовков и тела документа
, идущих именно в таком порядке. Раздел заголовков заключён между тегами и и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги и, между которыми размещают «официальный» заголовок документа.
Сам текст документа располагается в теле документа
. Тело документа располагается между тегами и BODY
>. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги,
и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.
Простейший правильный документ HTML.
<
HEAD
>
<
TITLE
>Заголовок документа
TITLE
>
HEAD
>
<
BODY
>
BODY
>
Теги
HTML
Язык HTML состоит из специальных разметочных указателей – тегов. Их также можно назвать командами, инструкциями или кодами языка HTML.
Тег – инструкция броузеру, указывающая способ отображения текста.Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками.
После открывающей угловой скобки идет ключевое слово
, определяющее тег.
Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения – можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.
Существует два типа тегов – парные и непарные.
Парные теги
– открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/).
Например, <
HTML
> HTML
>, <
P
> P
>, H
3>
Непарные теги дают разовый эффект в месте своего появления, поэтому в закрывающем теге нет необходимости.
Например, , ,
Тег несет служебную информацию о Web
-сайте и не отображается в экране браузера: это информация о кодировке Web
-странички, об авторе, а также набор ключевых слов для поиска, отображающих содержание сайта.
Пример.
Пример создания таблицы
Из примера видно, что страничка использует кодировку W
indows-1251 - наиболее распространенную на сегодняшний день, достаточно лишь каждый раз вставлять этот тэг в таком виде на свою страничку; автор страницы – Иванов Иван; страница посвящена животным.
При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.
Атрибуты тегов
Открывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый тегом.
Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.
Атрибуты могут иметь значения, записываемые после знака равенства (=). Всегда полезно заключать значение атрибута в кавычки (одинарные либо двойные). Строка в кавычках не должна содержать такие же кавычки внутри себя. Можно опускать кавычки для значений атрибутов, которые состоят только из следующих символов:
символов английского алфавита;
промежутков времени;
дефисов (-).
Вы можете также опустить кавычки для значений атрибутов, которые состоят только из следующих символов (обратитесь к технической концепции
):
символов английского алфавита (A - Z
, a - z
)
цифр (0
- 9
)
промежутков времени
дефисов (-
)
Таким образом, WIDTH=80
и ALIGN=CENTER
- разрешенное сокращение для WIDTH="80"
и ALIGN="CENTER"
. Закрывающие теги не содержат атрибутов.
Примеры. FONT
>
Комментарии
Подобно тому, как во всех языках программирования есть возможность внесения в программу комментариев (текстовых строк, не являющихся частью программы), есть она и в языке HTML. Начинается комментарий со специального тега. Комментарий может включать в себя любые символы, кроме символа “больше” (>), и, таким образом, не может включать в себя теги.
Принцип наследования тегов
Теги-контейнеры.
Мы уже знаем, что теги в большинстве своем состоят из двух частей - это открывающий (он же - содержащий атрибуты) и закрывающий, то есть, "конец" тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега:
<начало 2-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
<начало 3-го тега> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
<Конец 3-го тега>
<Конец 2-го тега>
<Конец 1-го тега>
Отступы от левого края не случайны - они автоматически выставляются программами, формирующими код HTML для упрощения его восприятия. Достаточно понимать, что чем дальше от левого края отстоит тег, тем "глубже" он лежит, тем большее количество "старших" тегов может на него действовать.
Также следует заметить, что некоторые атрибуты вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую. Если у внутренней таблицы размер задан 100 , то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".
Практическая работа № 1
«Создание простейшей
Web
-страницы»
Цель:
научиться создавать Web
-страницы в текстовом редакторе Блокнот.
Указания к выполнению
Наберите в нём структуру HTML
-документа, которая приведена ниже:
О братьях наших меньших.
Здесь будет размещено содержание Web-страницы
Сохраните файл, присвоив ему имя index
.htm
.
Откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне браузера.
Закройте браузер.
Вернитесь к сохранённому в Блокноте файлу.
Внесите в него следующие изменения: вместо слов «Здесь будет размещено содержание Web
-страницы», наберите следующие:Это моя первая страничка
.
В строке <
TITLE
>
укажите: «Домашняя страничка (ваше имя и фамилия)».
Сохраните файл как page
2.htm
.
Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.
Тема 2. Теги HTML
Теги физического и логического форматирования текста
Форматирование шрифта
.
Для форматирования текста существует большое количество элементов. Форматировать текст можно с помощью традиционных элементов: выделять фрагменты курсивом, полужирным шрифтом, выбирать шрифт, размер и цвет шрифта, выравнивать текстовые фрагменты. Если автору не хватает простых вариантов форматирования текста, он может прибегнуть к таблицам стилей, которые существенно расширяют возможности языка HTML по форматированию.
Рассмотрим более подробно стандартные элементы языка HTML, позволяющие форматировать текст.
Шрифт
- это таблицы замены кода видимым изображением. Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix). Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:
Arial
Ариал
Courier New
Курьер Нью
Comic Sans
Комик Санс
Times New Roman
Таймс Нью Роман
Verdana
Вердана
Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf. Как в HTML придать шрифту тот или иной вид? <
FONT
>…
FONT
> определение типа, размера и цвета шрифта
. Все эти характеристики определяются при помощи соответствующих атрибутов.
Абсолютный размер шрифта задается атрибутом si
ze
(размер)
. Этот атрибут может принимать значения от 1 до 7, при этом шрифт 1-го размера - самый маленький, а 7-го – самый большой. Примеры.
текст размера 1
текст размера 2
текст размера 3 текст размера 4
текст размера 5
текст размера 6
текст размера 7
Тише едешь – дальше будешьONT
>. В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места и трудно читается. Правда, и большим размерам находится применение. Например, седьмым размером можно писать буквицу (первую букву начала главы): Т
екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст. Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face (вид).
Примеры.
Это шрифт arial размером 3 ONT
> текст FONT
> Как видим, э
ти два атрибута - размер и вид шрифта, - можно расположить в любой последовательности в теге : Можно также использовать атрибут color (цвет).
Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, co
lor=”#ff
0000”, либо просто его названием, написанным на английском языке, например, color
=”red
”.Примеры.
Это шрифт синего цвета FONT
> Это шрифт arial
размером 3, цвет синий FONT
> Шрифт так же может быть: наклонный (курсив), жирный, подчеркнутый, перечеркнутый, надстрочный, подстрочный, а также сочетающий в себе несколько указанных видов. Достигается это, соответственно, тегами: <
I
>
текст
I
> <
B
>текст
B
> <
U
>
текст
U
> <
S
>
текст S
> <
SUP
>
текст
SUP
> <
SUB
>
текст SUB
>,
а также их сочетанием, например, <U
> текст
U
>B
> Форматирование абзаца.
В большинстве обычных документов основными функциональными разделами являются заголовки
и абзацы.
Web
-документы не являются исключением. Для обозначения обычных абзацев в языке HTML используют тег
…P
>
(Paragraph
). Причем, можно использовать только начальный тег, так как следующий элемент
обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег. Вместе с тегом абзаца можно использовать и атрибут align (выравнивание)
: align
=”left
” – выравнивание по левому краю; align
=”right
” - выравнивание по правому краю; align
=”center
” - выравнивание по центру. Пример.
Глава 1P
>
АнимацияP
>
стр. 3P
>
В языке HTML
нет средств для создания абзацного отступа (”красной строки”), поэтому для удобочитаемости текста между абзацами броузер обычно вводит пустую строку. Если нужно осуществить переход на новую строку без создания абзаца, используется одиночный тег . В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Этот тег удобно использовать, чтобы, например, писать стихи в столбик: Уронили мишку на пол, Оторвали мишке лапу, Все равно его не брошу, Потому, что он хороший. На экране браузера мы увидим стандартным образом написанное четверостишие.
Важным средством создания разделителей в тексте являются горизонтальные полоски-линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается одиночным тегом .. С его помощью очень удобно делить страницу на части. В теге допускается ряд атрибутов:
Выравнивание
align = “left”
align = “ center”
align
= “ right
”
align
= “ justify
”
Толщина и длина линии
в пикселях.
Size
= 3(ширина в пикселях)
width= 300 (длина в пикселях)
width= 100% (длина в процентах)
Цвет линии
color
=”red
”
Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от
…
до
…
. Заголовок первого уровня самый крупный, а шестого уровня – самый мелкий. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо. Пример.
Самый большой заголовок Самый маленький заголовок
Домашние животные
Логическое форматирование текста
.
В данном пункте мы рассмотрим теги, по своему эффекту очень напоминающие теги, задающие размер, цвет и начертание шрифта. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может по разному отображаться в разных браузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-то причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, заключенный между открывающим и закрывающим тегами. Закрывающий тег обязателен. Тег …
используется для цитат, названий книг. Обычно изображается курсивом. Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними. Тег <
CODE
>…
CODE
>
указывает на исходный текст компьютерной программы, обычно отображается моноширинным шрифтом (чаще всего шрифт Courier), то есть шрифтом с фиксированным размером. Тег <
KBD
>…
KBD
>
оформляет текст, который должен быть (или был) введен с помощью клавиатуры, обычно отображается моноширинным полужирным шрифтом. От английского keyboard - клавиатура Пример.
Для запуска Windows наберите: win
. Код
: Для запуска Windows наберите: win Тег …
отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом. Пример. Это обычный текст Тег …
используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского var
iable – переменная. Пример
. A
,
B
,
C
Код: A
, B
, C
var
>
Тег <
EM
>…
EM
>
используется для выделения элементов текста (обычно курсивом). Тег <
STRONG
>…
STRONG
>
используется для более сильного выделения элементов текста (полужирным шрифтом). Пример. Это обычный текст А это уже текст с использованием тега . Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и <
B
>.
Практическая работа № 2
“Форматирование текста на Web-странице”
Цель:
научиться форматировать шрифт и текст на Web
-странице.
Указания к выполнению
В элементе <
TITLE
>
укажите название странички “П/р № 2”.
Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке.
Домашние животные
(заголовок
H
1)
(выравнивание по центру)
Собаки
(заголовок
H
2)
(выравнивание по центру)
Сторожевые
(выравнивание слева, полужирный шрифт)
Охотничьи
(выравнивание справа, полужирный шрифт)
Дрессировка
(выравнивание по центру, полужирный курсив)
Клубы Выставки Площадки
(выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт
Arial
)
Стихотворение
(цвет шрифта синий, размер шрифта 6, выравнивание по центру)
По жизни я скромен,
Оваций не надо,
Но как же я классно
Смотрюсь у снаряда!
(выравнивание по левому краю, размер шрифта 6)
Создание списков
Маркированные списки.
Список отличается от обычного текста тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый вид.
Теги создания ненумерованного списка:
<
LI
>
UL
> Тег
является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Тег
обозначает каждый из пунктов.
Пример.
Пункт 1 списка Пункт 2 списка Пункт 3 списка
Вид на экране:
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Теги создания нумерованного списка: <
O
L> <
LI
>
OL
>
Нумерованные списки.
Структура нумерованного списка похожа на структуру ненумерованного списка. Только для обрамления используется тег
. Каждый пункт нумеруется арабскими или римскими числами, буквами латинского алфавита.
Пример.
Пункт 1 списка Пункт 2 списка Пункт 3 списка O
L>
Вид на экране:
Пункт 1 списка
Пункт 2 списка
Пункт 3 списка
Способ нумерации задается при помощи атрибута type
. В таблице приведены все способы нумерации:
Вид нумерации
Практическая работа № 3
«Создание нумерованных и ненумерованных списков»
Цель
:
научиться создавать списки на Web
–страницах.
Указания к выполнению
:
1
. Создайте новую Web
–страницу в редакторе Блокнот.
2
. В элементе
укажите названия странички «П/р № 3».
3
. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке:
Солнце должно быть:
(Шрифт размером 8, красного цвета,
выравнивание по центру)
1. Теплым.
2. Круглым.
3. Желтым.
Снег должен быть:
(Шрифт размером 6, синего цвета,
выравнивание по центру)
В. Холодным.
С. Пушистым.
(Шрифт обоих списков черный, размер 3).
Гиперссылки Виды гиперссылок.
<
A
>…
A
>
создание гипертекстовой ссылки. В этом теге обязателен атрибут href
.
Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами <
A
>…
A
>.
При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.
Можно выделить несколько видов гиперссылок.
Внешние (связывают Web-страницу с документами, не принадлежащими данному Web-узлу).
Внутренние (связывают документы внутри одного и того же Web-узла).
Относительный путь.
Если гиперссылка внутренняя, то указывается только та часть
URL
, которая отличается у двух связываемых документов (так называемыйотносительный путь
),
например, если два документа находятся в одной папке, то достаточно указать имя файла, на который указывает гиперссылка. Если документы находятся в разных папках, то сначала указывается имя папки, затем имя файла, на который указывает гиперссылка.
Указание почтового адреса в гиперссылке
. Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например, Иванов АлексейA
>
Цель:
научиться связывать два HTML
–документа с помощью гиперссылок.
Указания к выполнению:
Создайте две Web
–страницы в редакторе Блокнот. Одну назовите page
1.htm
, вторую page
2.htm
. Обе странички сохраните в одной папке под названием site
. Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы.
В элементе
укажите названия странички «П/р № 4. Задание 1».
На страницу 2
На страницу 1
Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.
Задание 2.
Создание гиперссылок.
Цель:
научиться связывать три HTML
–документа с помощью гиперссылок.
Выполнить второе задание вы можете, если успешно справились с Заданием 1.
Создайте третью страничку page
3.htm
.
На страничке page
3.htm
создайте гиперссылки для перехода на странички page
1.htm
и page
2.htm
.
На страничках page
1.htm
и page
2.htm
добавьте гиперссылку для перехода на страничку page
3.htm
.
Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.
Задание 3.
Цвет гиперссылок.
Цель:
научиться определять цвет гиперссылок.
Выполнить задание вы можете, если успешно справились с Заданием 2.
На страничках page
1.htm
, page
2.htm
и page
3.htm
в тэге
определите цвет гиперссылок:
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.
Рисунки на
Web
-странице.
Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web
-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML
, но отображаются браузером внутри. Для этого служит одиночный тег <
IMG
>.
Обязательным атрибутом этого тега является атрибут src
, значением которого является путь к файлу с рисунком или фотографией,
Если картинка лежит в той же папке, что и Web
-страница, то путь представляет собой просто имя файла, например: . Если картинка лежит в другой папке, то эту папку надо указать, например: . Если картинка лежит на другом сайте, то путь прописывается полностью: .
В теге можно также использовать такие атрибуты, как: height
,
width
– задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах, например: , border
–
задаёт толщину рамки вокруг картинки (в пикселях). Этот атрибут можно не задавать, так как, по умолчанию, рамка вокруг картинки есть всегда. Но, если вы хотите её убрать, то выставляйте значение атрибута border равным нулю, bordercolor
– задаёт цвет рамки вокруг картинки, например: < IMG
src="picture.gif" border="3" bordercolor="#CC0000"> В нашем примере цвет рамки задан красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки, align –
выравнивание картинки относительно других объектов: картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа, картинка - справа, текст - слева.
Текст может располагаться также внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3): (1) - (2) - (3) -
vspace
- задает расстояние между текстом и рисунком (по вертикали): , hspace
- задает расстояние между текстом и рисунком (по горизонтали):
<
imgsrc="
pr1.
png"
hspace="30"> Расстояние задается в пикселях.
С помощью тега можно использовать изображения в гиперссылках, вставлять картинки в таблицы, решать задачи дизайна…
Практическая работа № 5
«Использование рисунка в качестве гиперссылки»
Цель
: научиться использовать рисунок в качестве гиперссылки.
На страничках page
1.htm
, page
2.htm
и page
3.htm
вместо текстовых гиперссылок используйте рисунки. Для этого:
откройте папку, указанную учителем (в папке находятся файлы с изображением цветных кнопок), вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу:
Самостоятельно вставьте изображение оранжевой кнопки для перехода с первой страницы на третью;
Задайте бордюр обоих изображений равным 2;
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно.
Самостоятельно вставьте изображения кнопок на страницы page
2.htm
и page
3.htm
и задайте соответствующие гиперссылки.
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страничках работают верно.
Альтернативный текст.
Web-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст, который задается в теге <
IMG> атрибутом
alt
(или
title
),
этот атрибут выводит текст в месте расположения картинки во время её загрузки. Например:
Использование рисунка в качестве фона
. Если вы хотите использовать рисунок в качестве фона странички (“обоев”), то в теге
используем этот атрибут с указанием адреса картинки. Например: .
Фреймы
Размещение нескольких документов на одной Web-странице.
Язык HTML
позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.
Чем отличается структура документа HTML
, содержащего фреймы, от обычного документа HTML
? Такой документ не содержит раздела «тела» документа и не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов и названия документов, загружаемых в отдельные области. <
FRAMESET
>…
FRAMESET
>
тегописания фреймов. Между тегами <
FRAMESET
>…FRAMESET
> содержится описание размеров и порядка размещения областей в окне броузера, а также задаются документы, которые должны загружаться в каждую из этих областей. Тег