Вертикальное и горизонтальное форматирование текста.
Лабораторная работа №1 по HTML
Тема: Создание простой страницы и отображение в браузере.
Для того, чтобы отобразить HTML – документ, браузер принимает его из сети и выполняет команды встреченные в тегах (дескрипторах). Сами теги не отображаются в окне браузера, представляется только результат обработки HTML – документа.
HTML – документ может начинаться с тега <! DOCTYPE>, указывающего на версию языка HTML, с помощью которого написан данный документ.
Например, указание на 4-ю версию языка выглядит таким образом:
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0//EN”>
Создание Web – страницы.
1) Загрузите текстовый редактор WordPad или Блокнот.
2) Установите режим Формат – Перенос по словам, чтобы текст страницы не выходил за пределы текущего окна.
3) Скопируйте исходный текст (без рамки) из лабораторной работы. Вставьте в окно документа Блокнот :
4) Введите < HTML> непосредственно над текстом и </ HTML> непосредственно под текстом страницы.
(Эти теги задают начало и конец страницы.)
5) Введите < HEAD> под дескриптором < HTML>
6) Дважды нажмите Enter
7) Наберите </HEAD>
(Эти теги задают служебную часть страницы, не отображаемую в окне браузера).
8) Введите < TITLE> непосредственно под < HEAD>
9) Наберите текст названия (заголовка) Web – страницы (Брачные объявления)
10) Введите </ TITLE> в конце заголовка.
11) Наберите < BODY> непосредственно под тегом </ HEAD>
12) Введите </ BODY> непосредственно над дескриптором </ HTML>
(В этих тегах задается основной текст страницы).
13) Сохраните полученный документ под именем index. html (или index. htm ).
14) Обратите внимание на расстановку тегов в странице и запомните ее.
15) Откройте созданный файл с помощью браузера. Обратите внимание на разницу между исходным файлом и отображением в браузере.
16) Перейдите в окно редактора HTML (дальнейшие изменения в тексте HTML – страницы отобразятся в браузере по команде обновить – клавиша F5)
|
|
|
Сохранение начального форматирования текста, пробелов и пустых строк.
1) Введите в тексте HTML – файла index. htm непосредственно под дескриптором < BODY> тег сохранения форматирования < PRE>
2) Введите непосредственно над дескриптором </ BODY> тег </ PRE>
3) Сохраните, просмотрите и проанализируйте результат в браузере.
Лабораторная работа №2 по HTML
Тема: Способы форматирования HTML - документов.
ü Каждое действие желательно просматривать в браузере, чтобы лучше понять работу тегов и атрибутов HTML
Создание заголовков разных уровней.
Тег < H?> задает полужирным шрифтом заголовки различных размеров, размещая их по центру. Вместо знака ? проставляется одно из значений размеров заголовка от 1 до 7
|
|
|
Задание 1:
1. Откройте ранее сохраненный файл index.html
2. Удалите теги сохранения форматирования <PRE> и </PRE> из текста.
3. Введите <H2> и </H2> непосредственно перед и после первого заголовка соответственно.
4. Введите <H3> и </H3> непосредственно перед и после второго заголовка.
5. Сохраните и проанализируйте полученный результат в браузере.
6. Уберите тег </H3> из текста документа. Как это отразилось в окне браузера.
7. Восстановите тег и сохраните документ.
2. Создание абзаца (параграфа). Переход на новую строчку.
Тег < P > - задает разбивку текста на абзацы (параграфы). Имеет парный тег </ P >, который задается при необходимости (каждый тег < p > добавляет пустую строку между абзацами).
Тег < BR > - задает разбивку текста на отдельные строки.
Задание 2:
1) Введите теги < P> и </ P> в начале и в конце (желательно) каждого куплета стихотворения и автора.
2) Внутри куплетов перед каждой строчкой (кроме первых) введите тег <BR> .
3) Результат просмотрите в браузере.
4) Вставьте дополнительные пробелы между словами в заголовках (в первом – по одному, во втором – по три) командой  (дополнительный пробел). Результат просмотрите в браузере.
|
|
|
Вертикальное и горизонтальное форматирование текста.
Атрибут ALIGN=? в теле тега < P> - задает вертикальное размещение текста ( по умолчанию текст форматируется по левому краю).
Дата добавления: 2022-06-11; просмотров: 23; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!