Главная

Категории:

ДомЗдоровьеЗоологияИнформатикаИскусствоИскусствоКомпьютерыКулинарияМаркетингМатематикаМедицинаМенеджментОбразованиеПедагогикаПитомцыПрограммированиеПроизводствоПромышленностьПсихологияРазноеРелигияСоциологияСпортСтатистикаТранспортФизикаФилософияФинансыХимияХоббиЭкологияЭкономикаЭлектроника






Упражнение 2. Форматирование текста веб-документа.


В этом упражнении дополним созданный HTML-документ сведениями о себе (по две-три фразы), выделив абзацы (с помощью тэгов <p> и </p>) и заголовки различных уровней (с помощью тэгов <Н*> и </Н*>). Поупражняемся с выравниванием элементов текста (атрибут ALIGN=).

Для этого, выполнив команду "Вид ® Просмотр HTML-кода" в меню браузера, модифицируем исходный код файла Main.htm в соответствии с представленным далее текстом. Здесь и далее области исходного кода для модификации выделены синим цветом.

 

 

 
 

 

 


 

После внесения изменений сохраним их, закрыв окно текстового редактора "Блокнот" и подтвердив сохранение сделанных изменений. Затем выполним команду "Вид ® Обновить¼" в меню браузера.

 

 

Упражнение 3. Оформление HTML-документа

Свои фамилию и имя напишем шрифтом другого цвета, используя парный тэг <FONT> и </FONT> с атрибутом COLOR=.

Изменим цвет фона страницы (тэг <BODY> , атрибут bgColor=).

Изменим нижнюю строку страницы на бегущую строку с Вашим сетевым именем (например, ДИЗАЙН: Ivanov.GG-05-01), дополнив строку парным тэгом <MARQUEE> и < / MARQUEE>.

Дополним документ текстовой строкой с гиперссылками на файлы Page1.htm и Page2.htm, (тэги <A HREF=¼> и </A>), которые создадим в следующих упражнениях.

Сохраните сделанные изменения и просмотрите результат командой "Вид ® Обновить¼" в меню браузера.

 

В результате выполнения Упражнений 1–3, у Вас должен получиться web-документ (файл Main.htm), внешний вид (разметка и оформление) которого соответствуют виду, представленному на следующем рисунке.

 

       
   
 
 

 


Упражнение 4. Создание простейших таблиц

Пользуясь приемами, описанными в Упражнении 1, создайте и сохраните файл Page1.htm.

 
 

 

 


 

Изменим цвет фона страницы и цвет шрифта заголовка (как в Упражнении 3).

Вставим картинку, используя тэг <IMG> с атрибутом SRC= и отцентрируем ее (парный тэг <CENTER> и </CENTER>).

Создадим простую таблицу из 2 строк и 3 столбцов. Структура таблицы расположена между тэгами <TABLE> (с атрибутами ALIGN= и BORDER) и </TABLE>. Отдельные строки таблицы размечены парным тэгом <TR> и </TR>, а отдельные ячейки – парным тэгом <TD> и </TD>.

Добавим внизу страницы гиперссылку на главную страницу (тэги <A HREF="Main.htm"> и </A>).

В итоге исходный код файла Page1.htm будет иметь следующий вид.

 

Сохраните сделанные изменения в файле Page1.htm и просмотрите в окне браузера.

В результате выполнения Упражнения 4, у Вас должен получиться web-документ (файл Page1.htm), внешний вид (разметка и оформление) которого соответствуют виду, представленному на следующем рисунке.

 

 
 

 


Упражнение 5. Создание простейших списков

Пользуясь приемами, описанными в Упражнении 1, создайте и сохраните файл Page2.htm.

 

 

Создадим первый абзац страницы по аналогии с Упражнением 4 (парный тэг <P> и </P>).

Вставим картинку, используя тэг <IMG> и атрибут SRC= и отцентрируем ее (парный тэг <CENTER> и </CENTER>).

Создадим нумерованный список (ограничивается парным тэгом <OL> и </OL>), состоящий из четырех строк и выровненный по левому краю. Отдельные строки списка размечаются непарным тэгом <LI>. После второй строки добавим вложенный маркированный список 2-го уровня из трех строк (размечается парным тэгом <UL> и </UL>).

Добавим внизу страницы гиперссылку на главную страницу (тэги <A HREF="Main.htm"> и </A>).

В итоге исходный код файла Page2.htm будет иметь вид, представленный ниже. Сохраните сделанные изменения в файле Page2.htm и просмотрите в окне браузера.

 

 
 

 


В результате выполнения Упражнения 5, у Вас должен получиться web-документ (файл Page2.htm), внешний вид (разметка и оформление) которого соответствуют виду, представленному на следующем рисунке.

 
 

 




Последнее изменение этой страницы: 2016-07-22

headinsider.info. Все права принадлежат авторам данных материалов.