Занятие 3 Повторение основных тэгов и атрибутов тэгов

Занятие 3 Повторение основных тэгов и атрибутов тэгов,
структура Web - страницы.
Ведущая проблема
Тема 1. Язык HTML для создания Web-страниц.
Знакомство с тэгами форматирования текстов. Кодирование специальных символов (копирайт,
длинное тире и т.п.).
Атрибуты тэгов. Цветовое оформление и вставка изображений.
Рекомендации по работе с документом.
1.Прочитать и разобрать.
2. Выполнить домашнее задание
1. Создание Web-сайта.
1.1. Знакомство с HTML
1.1.1. Web-страницы и Web-сайты.
Всемирная паутина (World Wide Web или сокращенно WWW) состоит из Web-страниц –
гипертекстовых документов – обычно ярко оформленных, украшенных картинками, многие из
которых движущиеся. На Web-страницах можно послушать музыку или посмотреть видео,
ответить на вопросы анкеты или побеседовать с друзьями в чате, принять участие в работе
конференции, отправить почту, и многое-многое другое. С одной страницы на другую
перемещаются, указывая ее адрес в сети, или пользуясь гиперссылками.
Страницы, связанные между собой гиперссылками, образующие единую упорядоченную
(обычно иерархическую) структуру, развивающие единую тему, объединяются в сайты.
Подключенные к Интернету компьютеры могут быть и IBM PC самых ранних моделей, и
Pentium IV, и Macintosh. Их работой может управлять любая из существующих операционных
систем. Они могут иметь самые разнообразные графические и программные возможности. Перед
создателями всемирной паутины стояла почти невыполнимая задача, как добиться наилучшего
качества на таких различных машинах. В результате был найден компромисс: Web-страницы
пишут на языке HTML (Hyper Text Markup Language – язык разметки гипертекста), а
просматривают такие документы с помощью специальных программ – браузеров.
Браузер, установленный на клиентском компьютере, имеет всю информацию о последнем –
конфигурации, операционной системе, настройках, разрешении экрана, количестве цветов и
текущем размере окна, в котором выводится Web-страница. Опираясь на все эти данные, браузер
преобразует исходный текстовый HTML-документ в красочную Web-страницу.
Существует большое количество браузеров. Сейчас наиболее распространены Microsoft
Internet Explorer и Firefox (Mozila), Opera. Менее распространены, Arachne, Lynx и другие.
Исходные Web-страницы – это обычные текстовые документы, самого простого формата
(txt): без внешнего оформления, без цвета, без графики, без музыки и т.п. Но в этот сплошной
текст вставлены управляющие коды, называемые тэгами. Именно тэги и сообщают браузеру, что
здесь надо выделить заголовок, а там идет новый абзац, тут будет гиперссылка, и еще следует
добавить картинку, звук или видео, взятые из отдельных файлов.
Чтобы тэги отличались от основного текста, они заключаются в угловые скобки.
Большая часть тэгов состоит из двух частей:
<тэг>
Тэг открывающий
Текст
</тэг>
Тэг закрывающий
Такие пары тэгов еще называют тэг-контейнер.
В некоторых случаях закрывающий тэг опускается, например, при изображении
горизонтальной линии.
Тэги можно набирать как заглавными, так и строчными буквами.
В последнее время Web-страницы создаются с использованием версии HTML 4.0, в
основном поддерживаемой всеми современными браузерами. Спецификация языка создана
консорциумом
W3C,
правообладатели:
Массачусетский
технологический
институт,
Национальный институт исследований в области информатики и автоматизации, Университет
Keio.
Сайты в Интернете размещаются на серверах – специальных мощных компьютерах, как
правило, постоянно подключенных к сети.
1.1.2. Имена папок и файлов.
Каждый сайт размещается в своем каталоге. Если сайт большой, то внутри могут
располагаться папки для отдельных разделов. Рисунки, также рекомендуется хранить в отдельной
папке.
Имена каталогов и файлов желательно задавать строчными буквами английского алфавита и
цифрами, используя не более восьми символов (не считая расширений имен файлов). Этот
принцип помогает не ошибиться с именами подключаемых к странице файлов (рисунков, музыке
и т.п.) и гиперссылок.
Файлы Web-страниц получают имена с расширением htm или html.
В папке сайта может находиться несколько файлов HTML. Какое имя дать начальному
файлу, запускающемуся первым? Для этого существует несколько зарезервированных имен:
index.htm
index.html
default.htm
default.html
Мы будем использовать первое из них.
1.1.3. Структура Web-страницы.
Стандарт предписывает, что начинаться обычный документ HTML должен с тэга
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.0//EN">.
Начало и конец Web-страницы помечается тэгом HTML. Сама страница делится на две
части: HEAD – голова, BODY – тело. Информация, размещенная в разделе BODY, выводится в
основной части окна. В отличие от этого, содержимое раздела HEAD посетителям Web-страницы
не показывается, за одним исключением. Тэгом TITLE задается название страницы, которое
выводится в заголовке окна браузера.
Начнем создавать страницу, знакомящую нас с основными тэгами HTML.
1
2
Начало создания Web-страницы
Запустить текстовый редактор Блокнот:
[Пуск - Программы - Стандартные - Блокнот].
Набрать содержимое страницы.
<HTML>
<HEAD>
<TITLE> Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
3
4
Рез
</BODY>
</HTML>
Сохранить файл, выполнив команду меню
[Файл - Сохранить].
Файлу присвоить имя index.htm
Запустить браузер и с помощью команды [Файл - Открыть], найти и запустить только что
созданный файл.
В заголовке окна браузера высвечивается: «Первое знакомство с тэгами HTML». Основная
часть окна браузера - пуста.
1.1.4. Отладка HTML-документов.
Теперь между тэгами <BODY> и </BODY> будем добавлять новые, изучаемые тэги, и сразу
же просматривать полученный результат.
1
2
3
4
5
Рез
Внесение изменений и дополнений в Web-страницу
Переключиться в Блокнот с открытой в нем редактируемой Web-страницей.
Внести в содержимое страницы необходимые изменения.
Сохранить новый вариант страницы, выполнив команду меню
[Файл - Сохранить].
Переключиться в браузер с открытым в нем предыдущим вариантом страницы (он не
меняется автоматически с изменением исходного HTML-документа).
В браузере перечитать заново содержимое страницы из исходного файла, нажав на кнопку
Обновить.
В окне браузера высветилось содержимое обновленной Web-страницы.
1.1.5. Знакомство с тэгами форматирования текста.
Идеология языка HTML 4.0 строится на принципах логического структурирования
документа. Создавая Web-страницу надо идти не от внешнего дизайна, а от смыслового
содержания. Это связано с тем, чтобы дать возможность знакомиться с документом не только с
помощью визуальных браузеров, но и других, например, аудио-браузеров, прочитывающих тексты
и выделяющих различные его элементы интонацией и ударением.
Ниже приведено содержимое Web-страницы, на которой используются практически все
существующие к настоящему моменту тэги форматирования текста. Созданная ранее часть
страницы выделена серым цветом.
Для упрощения набора примеров на клавиатуре, можно пользоваться операциями –
Копировать и Вставить. Операции «копировать» соответствует сочетание клавиш Ctrl + С , а
операции «вставить» – Ctrl + V . Клавиатура при этом может находиться как в английской, так
и в русской раскладке.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<HTML>
<HEAD>
<TITLE> Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
<P> Первый абзац, первый абзац, первый абзац, первый абзац, первый абзац, первый абзац,
первый абзац, первый абзац, первый абзац, первый абзац, первый абзац, первый абзац, первый
абзац. </P>
<P> Второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй
абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац. <BR>
ПРИНУДИТЕЛЬНЫЙ ПЕРЕВОД СТРОКИ <BR> Второй абзац, второй абзац, второй абзац,
второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац,
второй абзац, второй абзац, второй абзац.</P>
<P> Третий
абзац </P>
<PRE> Предварительно
отформатированный
текст </PRE>
<HR>
<OL>
<LI> Первый элемент списка
<LI> Второй элемент списка
<LI> Третий элемент списка
</OL>
<UL>
<LI> Первый элемент списка
<LI> Второй элемент списка
<LI> Третий элемент списка
</UL>
<DL>
<DT> ТЕРМИН 1
<DD> Пояснение к термину 1
<DT> ТЕРМИН 2
<DD> Пояснение к термину 2
<DT>
ТЕРМИН
3
<DD> Пояснение к термину 3
</DL>
Обычный текст
<B> Полужирный </B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<TT> Равноширинный </TT>
<BR>
<B><U><I> Полужирный подчеркнутый курсив </I></U></B>
<BR>
<BIG>Увеличенный текст.</BIG>
Просто текст.
<SMALL>Уменьшенный текст.</SMALL>
<BR>
Текст <SUB> Нижний индекс </SUB>
Текст <SUP> Верхний индекс </SUP> Текст
<BR>
<EM> Выделение </EM>
<STRONG> Усиленное выделение </STRONG>
<BR>
<ABBR> Аббревиатура </ABBR>
<CITE> Цитата </CITE>
<ADDRESS> Адрес </ADDRESS>
<HR>
<!-- Комментарий в окне браузера невиден -->
</BODY>
</HTML>
Разберем теперь этот пример по частям.
1.1.5.1.Заголовки.
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
В языке HTML существует шесть уровней заголовков: H1 – наиболее важный, H6 – наименее
важный.
Заголовок выводится браузером, в отдельной строке жирным шрифтом, от остального текста
отделен отступом в одну пустую строку перед и после заголовка. Чем выше уровень заголовка,
тем более крупными буквами он отображается.
Очень важно для выделения разделов в тексте использовать именно заголовки, а не просто
укрупненные надписи.
Результат в окне браузера
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
1.1.5.2.Абзацы.
<P> Первый абзац, первый абзац, первый абзац, первый абзац, первый абзац, первый абзац,
первый абзац, первый абзац, первый абзац, первый абзац, первый абзац, первый абзац, первый
абзац. </P>
<P> Второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй
абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, <BR>
ПРИНУДИТЕЛЬНЫЙ ПЕРЕВОД СТРОКИ второй абзац, второй абзац, второй абзац, второй
абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй абзац, второй
абзац, второй абзац, второй абзац.</P>
Нажатие на клавишу Enter в текстовом документе приводит к переводу строки и указывает
обычно на начало нового абзаца, однако браузером такое действие не учитывается. Для создания
новых абзацев в HTML-документах используют тэг-контейнер <P>.
Абзацы, выводимые на экран браузерами, отделяются друг от друга пустой строкой. Если
пустая строка не нужна, а дальнейший текст необходимо разместить на следующей строке, можно
воспользоваться тэгом <BR> – «принудительный перевод строки».
<P> Третий
абзац </P>
<PRE> Предварительно
отформатированный
текст </PRE>
Лишние пробелы и пробелы в начале строки браузеры игнорируют. Когда требуется
напечатать много пробелов, можно использовать предварительно отформатированный текст. В
этом случае перенос текста на новую строку учитывается браузером.
Результат в окне браузера
Первый абзац, первый абзац, первый абзац, первый абзац, первый
абзац, первый абзац, первый абзац, первый абзац, первый абзац,
первый абзац, первый абзац, первый абзац, первый абзац.
Второй абзац, второй абзац, второй абзац, второй абзац, второй абзац,
второй абзац, второй абзац, второй абзац, второй абзац, второй абзац,
второй
абзац,
второй
абзац,
второй
абзац,
ПРИНУДИТЕЛЬНЫЙ ПЕРЕВОД СТРОКИ второй абзац, второй абзац,
второй абзац, второй абзац, второй абзац, второй абзац, второй абзац,
второй абзац, второй абзац, второй абзац, второй абзац, второй абзац,
второй абзац.
Третий абзац
Предварительно
отформатированный
текст
1.1.5.3.Горизонтальная линия.
<HR>
Части текста можно отделять друг от друга горизонтальной линией. Для этого используется тэг
<BR>. Линию браузеры рисуют красивую, объемную, и ее длина идеально соответствует ширине
окна. При желании длину, толщину и цвет линии можно настроить самостоятельно, но об этом
позднее.
Горизонтальную линию браузеры всегда размещают в отдельной строке, даже если код <BR>
вставить внутрь абзаца.
Результат в окне браузера
1.1.5.4.Списки.
<OL>
<LI> Первый элемент списка
<LI> Второй элемент списка
<LI> Третий элемент списка
</OL>
<UL>
<LI> Первый элемент списка
<LI> Второй элемент списка
<LI> Третий элемент списка
</UL>
HTML поддерживает знакомые всем по текстовым редакторам виды списков:
 упорядоченный, иначе называемый нумерованный список;
 неупорядоченный или маркированный список.
Структура создания списков однотипна – весь список целиком помещается внутрь тегаконтейнера “OL” (для нумерованного списка) или “UL” (для маркированного). Начало каждой
строчки списка помечается тэгом <LI>.
Весь список отделяется от остального текста отступом сверху и снизу.
Результат в окне браузера
1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка
 Первый элемент списка
 Второй элемент списка
 Третий элемент списка
<DL>
<DT> ТЕРМИН 1
<DD> Пояснение к термину 1
<DT> ТЕРМИН 2
<DD> Пояснение к термину 2
<DT> ТЕРМИН 3
<DD> Пояснение к термину 3
</DL>
Кроме обычных списков, в HTML существует еще их дополнительный вид – список
определений, поясняющий термины.
Весь такой список помещается в тэг-контейнер “DL”. Перед названием термина ставится тэг
<DT>, а перед определением – тэг <DD>.
Таким образом, можно создавать различные словари, а можно оформлять диалоги пьесы:
вместо термина записывать имя героя, а вместо определения – его реплику.
Результат в окне браузера
ТЕРМИН 1
Пояснение к термину 1
ТЕРМИН 2
Пояснение к термину 2
ТЕРМИН 3
Пояснение к термину 3
1.1.5.5.Принудительное форматирование шрифта.
Обычный текст
<B> Полужирный </B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<BR>
<B><U><I> Полужирный подчеркнутый курсив </I></U></B>
<BR>
<BIG>Увеличенный текст</BIG>
Текст
<SMALL>Уменьшенный текст</SMALL>
Для выделения отдельных слов или части текста можно использовать привычное
форматирование шрифта: полужирный, курсив, подчеркивание, их сочетание и др. Подчеркивание
использовать нежелательно, поскольку таким способом в HTML-документе обычно выделяются
гиперссылки.
Указание на то, что текст следует печатать шрифтом «Полужирный-подчеркнутый-курсив»,
поддерживают не все браузеры, хотя большинство из них вполне успешно с этим справляется.
Обратите внимание – тэги <I>...</I> в этом фрагменте находятся внутри тэгов <U>...</U>, а те, в
свою очередь, внутри тэгов <B>...</B>. Другими словами, тэги вложены один в другой.
Можно оформить текст равноширинным шрифтом, тогда все символы и пробелы будут
занимать одинаковую ширину, это может пригодиться, например, для создания календарей.
Специальные тэги <BIG> и <SMALL> позволяют увеличить или уменьшить часть текста на
1 пункт.
Результат в окне браузера
Обычный
текст
Полужирный
Курсив
Равноширинный
Подчеркнутый Полужирный подчеркнутый курсив
Увеличенный текст. Просто текст. Уменьшенный текст.
1.1.5.6.Логическое форматирование шрифта.
<EM> Выделение </EM>
<STRONG> Усиленное выделение </STRONG>
Тэги <EM> и <STRONG> используются для смыслового выделения. В этом случае
оформление текста зависит от браузера пользователя. Обычно EM выделяется курсивом, а
STRONG полужирным шрифтом.
Результат в окне браузера
Выделение Усиленное выделение
1.1.5.7.Верхние и нижние индексы.
Текст <SUB> Нижний индекс </SUB>
Текст <SUP> Верхний индекс </SUP> Текст
Для указания степени числа, написания химических элементов и т.п. необходимы верхние
или нижние индексы.
В этом случае используются тэги-контейнеры <SUB> – нижний индекс и <SUP> – верхний
индекс.
Результат в окне браузера
Текст Нижний индекс Текст Верхний индекс Текст
1.1.5.8.Форматирование других видов текста.
<ABBR> Аббревиатура </ABBR>
<CITE> Цитата </CITE>
<ADDRESS> Адрес </ADDRESS>
HTML позволяет, при желании, особым образом выделять и некоторые виды текстов,
несущие особый смысл: аббревиатуру (сокращение), цитату, контактную информацию для связи с
автором.
Результат в окне браузера
Аббревиатура Цитата
Адрес
1.1.6. Комментарии.
<!-- Комментарий в окне браузера невиден -->
В HTML предусмотрена возможность спрятать часть текста от посетителей Web-страницы.
Для этого используется тэг комментария. Такой тэг начинается символами “<--“ и заканчивается
“-->”. В комментариях обычно указываются пояснения для Web-мастера по структуре сложной
страницы.
1.1.7. Кодирование символов.
Каждому текстовому символу, выводимому на Web-страницу, соответствует специальный
код. Благодаря этому, возможно использовать знаки, которые нельзя непосредственно набрать на
клавиатуре компьютера – копирайт, плюс-минус, символы «больше» и «меньше», используемые
для выделения тэгов и др. Некоторые символы имеют два способа написания: числовой и
именованный – можно использовать любой вариант.
Код
числ.
 
<
>
±
°
—
§
’
«
»
„
“
“
”
…
©
Символ Значение
имен.
 
<
>
±
°
§
«
»
©
<
>
±
°
–
§
’
«
»
„
“
“
”
…
©
Нерастяжимый пробел
Меньше
Больше
Плюс-минус
Знак градуса
Тире
Параграф
Апостроф
Открывающая кавычка «елочка»
Закрывающая кавычка «елочка»
Русская открывающая кавычка «лапка»
Русская закрывающая кавычка «лапка»
Английская открывающая кавычка «лапка»
Английская закрывающая кавычка «лапка»
Многоточие
Знак охраны авторского права – копирайт
Попробуем записать для Web-страницы строчку, с которой начинался рассказ о тэгах:
<тэг> Текст </тэг>
Чтобы получить такую строку на экране браузера, в тексте HTML-документа должен быть
следующий код:
<тэг> Текст </тэг>
1.1.8. Неразрывный диапазон.
Бывают ситуации, когда нельзя оторвать часть теста переносом на следующую строку,
например инициалы от фамилии, в этом случае используется нерастяжимый пробел (код  ).
А вот при записи телефонного номера, в котором нет пробелов, этот способ не поможет – браузер
может разорвать его в том месте, где стоит тире. Приходится использовать тэг-контейнер
неразрывного диапазона “nobr”.
Пример:
<nobr>Тел. (8-095) 151-59-31</nobr>
1.2. Атрибуты тэгов.
На предыдущем занятии мы научились создавать Web-страницу, размещать на ней
заголовки, текст, списки. Но текст пока еще черно-белый, выровнен по левому краю. Чтобы задать
более сложное оформление страницы, к тэгам добавляют атрибуты. Например, тэг <BODY>
указывает, что дальше идет текст, выводимый на Web-страницу, а его атрибуты зададут цвет фона,
текста, ссылок.
Атрибуты вписывают внутрь открывающего тэга. В одной команде можно использовать
одновременно несколько атрибутов. Разделителем внутри тэга служит пробел. Атрибуты можно
набирать как большими, так и маленькими буквами.
<ТЭГ атрибут1=значение атрибут2 атрибут3="сложное значение">
текст
</ТЭГ>
Одни и те же атрибуты могут использоваться с различными тэгами. Так если атрибут
BORDER указывает толщину рамки вокруг рисунка, то он же задает и толщину разделительных
линий в таблице.
1.2.1. Атрибуты тэга маркированного списка “UL”.
type
– стиль элемента списка. Его возможные значения:
disc
– кружок;
circle – окружность;
square – квадратик.
<UL type="square">
1.2.2. Атрибуты тэга нумерованного списка “OL”.
– стиль элемента списка. Его возможные значения:
1 – арабские цифры;
A – буквы верхнего регистра (англ.);
a – буквы нижнего регистра (англ.);
I – римские цифры верхнего регистра ;
i – римские цифры нижнего регистра.
start
– номер, с которого должна начинаться нумерация
<OL type="A" start="3">
В приведенном примере список начнется с буквы «C» (третьей буквы английского
алфавита).
type
1.2.3. Атрибут align.
Этот атрибут задает выравнивание текста. Он может применяться, как к абзацу, так и к
информации внутри ячейки таблицы или к таблице в целом, т.е. к любому элементу, который
может быть выровнен по горизонтали.
Возможные значения атрибута ALIGN:
left – по левому краю
centet – по центру
right – по правому краю
justify – по ширине
1
2
3
4
Рез
Выравнивание абзаца
Найти в конце документа абзац со словами «В начало страницы»
Добавить в тэг абзаца атрибут align, со значением center
Сохранить файл HTML.
Обновить содержимое в браузере и просмотреть полученный результат.
Текст «В начало страницы» станет выровненным по центру.
1.2.4. Цвет на Web-странице.
Цвет на Web-странице можно указывать его английским названием.
Основную цветовую схему страницы задают в тэге “BODY” с помощью атрибутов:
bgcolor
background
text
link
alink
vlink
Цвет фона
Рисунок фона
Цвет текста
Цвет гиперссылок
Цвет активных гиперссылок
Цвет посещенных гиперссылок
При использовании текстуры, закрывающей собой всю площадь страницы, применение
однотонного фона кажется излишним. Однако рисунки загружаются медленнее, чем текст. Все это
время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для
фона указывают цвет, совпадающий с основным тоном фонового рисунка.
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости:
пастельный фон – темный текст, или темный фон – светлый текст. Нежелательны буквы белого
цвета – они могут оказаться невидимыми при распечатывании страницы на принтере.
Для оформления страницы о Московском Кремле используем следующие настройки:
<BODY bgcolor="khaki" background="fon.png" text="brown"
link="darkred" alink="orange" vlink="chocolate">
1.2.5. Форматирование текста.
Внутри страницы часть текста можно сделать отличающимся от остального тэгом “FONT”.
Его атрибуты определяют гарнитуру шрифта, цвет, размер букв.
face Гарнитура шрифта
color Цвет шрифта
Размер шрифта
size
<P>
<FONT size="4" color="#FF0066" face="Arial">
Несколько раз Московскому Кремлю грозило уничтожение
…
стал символом Российской государственности.
</FONT>
</P>
1.2.6. Добавление рисунков.
Картинки располагаются в отдельных файлах и подключаются к HTML-документу
браузером.
Рисунки на Web-страницу размещают тэгом IMG. К этому тэгу всегда добавляется атрибут
SRC, сообщающий браузеру имя графического файла и путь к нему. Если рисунок находится в той
же папке, что и Web-страница, то путь к файлу можно не указывать.
<IMG src="way/image_name">
Для ускорения работы браузера, в тэге IMG указывают в пикселях размер выводимой
картинки:
width Ширина объекта
height Высота объекта
Значения можно задавать в пикселях – просто число, или в процентах от ширины строки, в
которой размещается рисунок. В последнем случае после числа указывается знак «%», и размер
изображения будет растягиваться или сжиматься, под указанные значения. При этом достаточно
задать только ширину, а высота будет рассчитываться автоматически.
alt
border
lowsrc
vspace
hspace
align
Подпись рисунка
Толщина рамки
Упрощенный рисунок
Отступы сверху и снизу от рисунка
Отступы слева и справа от рисунка
Выравнивание
Атрибутом ALT (альтернатива) к изображению можно добавить название. Оно появляется на
экран или вместо иллюстрации (если по какой-либо причине графика не выводится в окне
браузера), или в качестве всплывающий строки, при указании на рисунок мышью.
Атрибут ALIGN здесь выравнивает текст относительно рисунка по вертикали или задает
обтекание рисунка текстом. Его возможные значения:
top
bottom
middle
left
right
одна строка текста справа на уровне верхнего края рисунка
одна строка текста справа на уровне нижнего края рисунка
одна строка текста справа на уровне середины рисунка
рисунок слева от обтекающего его текстового массива
рисунок справа от обтекающего его текстового массива
Если рядом с картинкой не должно быть текста, ее размещают внутри отдельного абзаца.
Выравнивание рисунка по горизонтали в этом случае задают в тэге P. Другая возможность –
поместить изображение в отдельном слое с помощью тэга-контейнера <DIV></DIV>, и также
применить выравнивание.
Домашнее задание
1.
2.
3.
4.
Продумать, выполнить структуру главной страницы сайта о выбранной профессии
Страница должна быть яркой, красочной, информативной.
Предусмотреть зону переходов по гиперссылкам (меню), прописать пункты меню.
Отправить результаты по указанному для класса адресу