Практическая работа 21Создание Web-страниц. Гипертекстовые ссылки. Управление стилем шрифта в Web-страницах. Нумерованные и маркированные списки.

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

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

одновременно открыт и в WordPad, и в Explorer. Сохранив изменения в WordPad, просто нажмите Обновить в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.

Браузеры игнорируют символы конца строки и множественные пробелы в HTML-файлах.

Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками " < " и " > ". Такой фрагмент (например, < html> ) называется меткой (по-английски — tag, читается " тэг" ).

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида < tag> есть закрывающая метка вида < /tag> с тем же именем, но с добавлением " /".

Метки можно вводить как большими, так и маленькими буквами. Например, метки < body>, < BODY> и < Body> будут восприняты браузером одинаково.

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

Обязательные тэги

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

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

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

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

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

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

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

Непарные тэги

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

< HR> Метка < HR> описывает вот такую горизонтальную линию:

Метка может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана).

& -последовательности

Поскольку символы " < " и " > " воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью & -последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ " < ", когда встречает в тексте последовательность & lt; (по первым буквам английских слов less than — меньше, чем). Знак " > " кодируется последовательностью & gt; (по первым буквам английских слов greater than — больше, чем).

Символ " & " (амперсанд) кодируется последовательностью & amp;

Двойные кавычки (" ) кодируются последовательностью & quot;

Помните: точка с запятой — обязательный элемент & -последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (т.е., маленькие). Использование меток типа & QUOT; или & AMP; не допускается.

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

Комментарии

Браузеры игнорируют любой текст, помещенный между <! -- и -->. Это удобно для размещения комментариев.

<! -- Это комментарий -->

Форматирование шрифта

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

Физические стили

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

Несколько особняком стоит пара меток < TT> и < /TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

Логические стили

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

... От английского emphasis — акцент.

... От английского strong emphasis — сильный акцент.

< CODE> ... < /CODE> Рекомендуется использовать для фрагментов исходных текстов.

< SAMP> ... < /SAMP> От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

< KBD> ... < /KBD> От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

< VAR> ... < /VAR> От английского variable — переменная. Рекомендуется использовать для написания имен переменных.

Практические задания

I. Создание, редактирование и сохранение HTML-документа в приложении Блокнот.

Войти в приложение Блокнот.

Сделать упражнение №1

< html>

< head>

< title> Первая страница < /title>

< /head>

< body>

Привет!

< /body>

< /html>.

3. Сохранить документ в файл в папке своей группы с именем probal.html

4. Закрыть приложение Блокнот и запустить файл probal.html

Запишите в тетрадь программу и результат.

II. Редактирование HTML-документа.

Открыть документ через Internet Explorer.

Войти в Главное меню -> Вид -> Просмотр HTML-кода.

Редактировать текст на уровне тегов:

(Добавить к слову Привет! Я успешно изучаю работу с гипертекстом.)

Сохранить документ.

Просмотреть полученный документ. Главное меню -> Обновить.

R-red	OO-FF	0-255
G - green	00-FF	0-255
В-blue	OO-FF	0-255

5.Сделать упражнение №2.

< html>

< head>

< title> Вторая страница < /title>

< /head>

< body>

Каждый

охотник

желает

знать

где

сидит

фазан

< /body>

< /html>

Запишите в тетрадь программу и результат.

6.Сделать упражнение №3. Структура документа

< html>

< head>

< title> Третья страница. Структура документа < /title>

< /head>

< body>

< h1> Роман < /h1>

< h2> Книга < /h2>

< h3> Том < /h3>

< h4> Часть < /h4>

< h5> Глава < /h5>

< h6> Параграф < /h6>

< /body>

< /html>

Запишите в тетрадь программу и результат.

7. Сделать упражнение №4. Создание текста.

< html>

< head>

< title> Четвертая страница. Текст в одну строку < /title>

< /head>

< body>

Уж небо осенью дышало

Все реже солнышко блистало

Короче становился день

< /body>

< /html>

Запишите в тетрадь программу и результат.

8. Сделать упражнение №5. Разбиение текста на абзацы

< html>

< head>

< title> Пятая страница. Разбиение текста на абзацы < /title>

< /head>

< body>

Уж небо осенью дышало

Все реже солнышко блистало

Короче становился день

< /body>

< /html>

Запишите в тетрадь программу и результат.

9. Сделать упражнение №6. Форматирование текста.

< html>

< head>

< title> Шестая страница. Форматирование текста < /title>

< /head>

< body>

Уж небо осенью дышало

Все реже солнышко блистало

Короче становился день

< /body>

< /html>

Запишите в тетрадь программу и результат.

10. Покажите работу преподавателю на экране и в тетради

11. Сделать упражнение №7 (Вставка линий)

Параметры линии

ALIGN- выравнивание по краю Left, Center, Right

WIGHT – длина линии в пикселях или % к окну браузера

SIZE – толщина линии в пикселях

No SHADE- отмена рельефности линии

COLOR – цвет линии (используют RGB или стандартное имя)

< html>

< head>

< title> Седьмая страница. Вставка линии. < /title>

< /head>

< body>

Уж небо осенью дышало

Все реже солнышко блистало

Короче становился день

< HR align=center width=50%>

< /body>

< /html>

Запишите в тетрадь программу и результат.

12. Сделать упражнение №8 (Вставка рисунков)

Если рисунок формата .jpg, то он (желательно) должен находиться в текущей папке/ Рисунку, как и страничке, все равно, где он будет находиться. Главное, чтобы путь к рисунку был прописан правильно, с учетом прописных букв. Это относится практически к любому объекту и любой ссылке.

< html>

< head>

< title> Восьмая страница. Вставка рисунков. < /title>

< /head>

< body>

Яркие и красивые фрукты - круглый год:

Ананасы, яблоки,

Лимоны, виноград

< img src=" 1.jpg" >

< /body>

< /html>

Запишите в тетрадь программу и результат.

13. Сделать упражнение №9 (Вставка рисунков с контекстной заменой)

< html>

< head>

< title> Девятая страница. Вставка рисунков с контекстной подсказкой. < /title>

< /head>

< body>

фрукты - это витамины и микроэлементы:

Яблоки - железо и клетчатка

Лимоны - витамин C

Альтернатива – пояснение рисунка (текст).

< img src=" 2.jpg" alt=" Фрукты" >

< /body>

< /html>

Запишите в тетрадь программу и результат.

12. Сделать упражнение №10 (Добавить ссылку)

< html>

< head>

< title> Десятая страница. Добавить ссылку. < /title>

< /head>

< body>

Ссылка на файл

Ссылка адрес в Интернете

< a href=" proba2.htm" > проба< /a>

< a href=" http: //www.yandex.ru" > проба< /a>

< /body>

< /html>

Запишите в тетрадь программу и результат.

⇐ Предыдущая 17 18 19 20 212223 24 25 26 Следующая ⇒