Оформление текста

Элемент < EM> Элемент < EM> используется с целью выделения особым шрифтом слова или текста. Синтаксис: < EM> Текст < /EM>

Элемент < CODE> Элемент < CODE> используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент < TT> (телетайпный шрифт). Поскольку расположение пробелов существенно для чтения программного кода, элемент < CODE> целесообразно употреблять в сочетании с элементом < PRE>. Синтаксис: < CODE> листинг кода < /CODE>

Элемент < DFN> Элемент < DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев. Синтаксис: < DFN> Текст < /DFN>

Элемент < CITE> Элемент < CITE> используется с целью обозначения источника информации, из которого взята цитата. Синтаксис: < CITE> Текст < /CITE>

Элемент < STRONG> Элемент < STRONG> используется с целью выделения особым шрифтом слова или текста. Синтаксис: < STRONG> Текст < /STRONG>

Элемент < I> Элемент < I> используется с целью выделения курсивным шрифтом слова или текста. Синтаксис: < I> Текст < /I>

Элемент < B> Элемент < B> используется с целью выделения полужирным шрифтом слова или текста. Синтаксис: < B> Текст < /B>

Элемент < U> Элемент < U> используется с целью выделения подчеркиванием слова или текста. Синтаксис: < U> Текст < /U>

Элемент < SUP> Элемент < SUP> используется с целью выделения надстрочных слова или текста. Синтаксис: < SUP> Текст < /SUP>

Элемент < SUB> Элемент < SUB> используется с целью выделения подстрочных слова или текста. Синтаксис: < SUB> Текст < /SUB>

Элемент < BIG> Элемент < BIG> используется с целью выделения крупным шрифтом слова или текста относительно основного текста. Синтаксис: < BIG> Текст < /BIG>

Элемент < SMALL> Элемент < SMALL> используется с целью выделения мелким шрифтом слова или текста относительно основного текста. Синтаксис: < SMALL> Текст < /SMALL>

Элемент < FONT> Элемент < FONT> используется с целью изменения выделения шрифтом слова или текста. С ним применяются два атрибута size и coloR. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию. Синтаксис: < FONT size=n color=" цвет" > Текст < /FONT> или < FONT face=" имя" color=" цвет" > Текст < /FONT>

Элемент < BASEFONT> Элемент < BASEFONT> используется как альтернатива атрибуту size элемента < FONT>, он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3, значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию. Синтаксис: < BASEFONT size=n>

Шесть уровней заголовков < Hn> Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю < H1> на-значается самый большой и самый жирный шрифт, а стилю < H6> назначается самый маленький и са-мый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, centeR или Right. Синтаксис: < Hn align=отступ> Текст заголовка < /Hn>

Разделительные линии < HR> Элемент < HR> используется для проведения горизонтальной черты в документе, он может иметь атри-буты: coloR, задающий цвет линии, size высота в пикселах Width ширина в пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет конечного тега. Синтаксис: < HR align=" centeR" size=n Width=n coloR=" цвет" >

Элемент < P> Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center, right, justify. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align. Синтаксис: < P align=отступ> Текст абзаца < /P>

Элемент < BR> Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут cleaR, который может принимать значения left, all или Right тем самым указывать обтекание текста во-круг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий аб-зац игнорирует, заданное для предыдущего абзаца значение cleaR. Синтаксис: < BR cleaR=обтекание> Текст Может быть отменен тэгами < NOBR> и < /NOBR>

Элемент < PRE> Весь текст, заключенный в тэги < PRE> и < /PRE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут Width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы < XMP>, < LISTING> и < PLAINTEXT> Синтаксис: < PRE Width=число символов >...текст...< /PRE>

Элемент < DIV> Элемент < DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу < P>. Если закрывающий тэг < /P> опущен, то < DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, centeR или Right. Каждый следующий раздел игнорирует, заданное для предыду-щего раздела, значение align. Синтаксис: < DIV align=отступ> Текст раздела < /DIV>

Элемент < ADDRESS> Элемент < ADDRESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона. Синтаксис: < ADDRESS> контактная информация < /ADDRESS>

Элемент < BLOCKQUOTE> Элемент < BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста. Синтаксис: < BLOCKQUOTE> Текст < /BLOCKQUOTE>

Списки

Элемент < OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и staRt для указания, с какого индекса начинается нумерация списка.
Элемент < OL> включает в себя дополнительный элемент < LI>, который задает элементы списка. Синтаксис: < OL type=1 start=1 > < LI> элемент списка < LI> элемент списка < /OL>

Пример: 1. элемент списка

2. элемент списка

Элемент < UL>, по сути, является аналогом < OL> без дополнительных элементов < LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=ciRcle, squaRe, или disc для задания вида маркера. Элемент < UL> включает в себя дополнительный элемент < LI>, который задает элементы списка. Синтаксис: < UL type=circle > < LI> элемент списка < LI> элемент списка < /UL>

Пример

o элемент списка

o элемент списка

Элемент < DL> используется с целью задания словарей, глоссариев и прочих перечней. Элемент < DL> включает в себя дополнительные элементы < DT> и < DD>, которые обозначают соответственно термин и определение. Синтаксис: < DL > < DT> термин 1 < DD> определение 1 < DT> термин 2 < DD> определение 2 < /DL>

Пример: термин 1 определение 1

термин 2 определение 2

1. Технология работы:

1) Сделать запрос и получить ответ от сервера HTTP. Представить в отчете.

2) Создайте папку «Сайт» в папке «Мои документы». Откройте программу «Блокнот» в качестве простого инструмента для создания веб-страниц. Блокнот — это несложный текстовый редактор, используемый для создания простых документов. Наиболее часто программа «Блокнот» используется для просмотра и редактирования текстовых (TXT) файлов, для создания файлов веб-страниц (HTML). Программа «Блокнот» поддерживает только основное форматирование, поэтому случайное сохранение специального форматирования в документах, в которых должен остаться чистый текст, исключено. Это особенно полезно при создании HTML-документов для веб-страниц, так как особые знаки или другое форматирование могут не отображаться на опубликованных веб-страницах. Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры.

2) Создайте Web-страницу (домашнюю страницу ), в которой должны присутствовать цветной текст, список, рисунок, таблица, используя стандартную программу Блокнот, используя примеры приведенной ниже таблицы.

Для начинающих – прочитайте и исполните эти задания. После этого можно легко исполнить задание работы

Задание 1

Цель – создать простейшую WEB-страницу.

Выполнение:

1. Открыть текстовый редактор Блокнот.

2. Ввести текст, согласно листингу 1

Листинг 1

< HTML >

< HEAD>

< TITLE> Простейшая страница студента Авдеева Никиты

< /TITLE>

< /HEAD>

< BODY>

Простейшая WEB-страница создана 18 марта и будет сохранена в папке Никита под именем Zadanie1.htm

< /BODY>

< /HTML>

Для создания обоев (фона) флаг BODY записываться так:

< BODY bgcolor=blue text=red>, - фон голубой; текст красный.

< BODY bgcolor=1.jpg text=red>, - фон задан картинкой 1.jpg, текст красный.

3. Сохранить документ в свою папку под именем Zadanie1.htm (перед сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов) и второй раз под именем Zadanie1.txt.

4. Открыть программу Internet Explorer и в ней Zadanie1.htm.

5. Посмотрите, как отображается Ваш файл.

Задание 2

Цель: создать простейшую WEB-страницу с применением приемов форматирования абзацев.

Выполнение:

1. Откройте файл Zadanie1.txt и удалите текст между флагами < BODY> и < /BODY>.

2. Заголовок первого уровня будет заключаться между флагами < H1> и < /H1>, заголовок второго уровня - между флагами < H2> и < /H2>. Отдельный абзац будет вводиться с флага < p>.

3. После флага < BODY> введите новый текст.

< H1> 1. Средства подготовки документов < /H1>

Отделите последующий текст зеленой горизонтальной линией при помощи флага < HR>, написав:

< HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR= “GREEN”>

Далее введите:

< H2> 1.1. Гиперссылки< /H2>

В последних Word автоматически оформляют пути к файлам а их именами, а также адрес Web-страниц и электронной почты как гиперссылки.

< p> Создание гипертекстовой ссылки рассмотрено выше. Ниже создадим гиперссылку на файл Zadanie1.htm.

4. Отделите этот абзац от остального текста красной горизонтальной линией, используя флаг < HR>:

< HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR= “RED”>.

5. Введите еще один абзац текста, начав с флага < p>:

Построение маркированного и нумерованного списков.

6. Постройте маркированный список:

< UL>

< L1> Задание 1

< L1> Задание 2

< L1> Задание 3

< /UL>

Стройте нумерованный список:

< OL>

< L1> Задание 1- простейшая WEB-страница

< L1> Задание 2- WEB-страница с элементами форматирования

< L1> Задание 3- WEB-страница с таблицей

< /OL>

7. Отделите этот абзац полосой какого-нибудь цвета.

8. Вставьте из коллекции ClipArt рисунок (через Word, сохраняя рисунок как веб-страницу в своей папке)

< IMG SRC= RIS1.files/image002.gif” ALIGN=”Middle”>

9. Вставьте гиперссылку на файл с именем Zadanie1.htm. Для этого после рисунка вставьте строки

< p> Активизируйте гиперссылку

< A HREF=” Zadanie1.htm”> Zadanie1< /A>

10. Сохраните этот документ под именем Zadanie2.htm и второй раз под именем Zadanie2.txt.

11. Откройте программу Internet Explorer и в ней Zadanie2.htm.

12. Посмотрите, как отображается Ваш файл.

Задание 3

Цель: создать WEB-страницу с включением таблицы.

Выполнение:

1. Откройте файл Zadanie1.txt и удалите текст между флагами < BODY> и < /BODY>. Последующий текст будет вводиться после флага < BODY>. Мы будем использовать список номеров телефонов.

2. Введите флаг

< TABLE BORDER=”10”WIDTH=100%”>.

3. Введите строку

< CAPTION=”TOP”> Список телефонов < /CAPTION>

4. Первая строка таблицы содержит заголовки столбцов. Введите:

< TR BGCOLOR=”YELLOW” ALIGN=”CENTER”>

< TH> Отдел < TH> Номер телефона.

5. Введите:

< TR> < TD> Деканат < /TD> < TD> 683028 < /TD>

< TR> < TD> Бухгалтерия < /TD> < TD> 655453 < /TD>

< TR> < TD> Директор < /TD> < TD> 658449 < /TD>

6. Завершите таблицу флагом

< /TABLE>

7. Сохраните документ под именем Zadanie3.htm и второй раз под именем Zadanie3.txt.

8. Откройте программу Internet Explorer и в ней Zadanie3.htm.

9. Посмотрите, как отображается Ваш файл.

Задание 4

НТМL>

< НЕАD>

< ТIТLЕ> Пример НТМL- документа < /ТIТLЕ>

< /НЕАD>

< ВODY>

< Н2 АLIGN=СЕNТЕR> Пример использования списков < /Н2>

< Р>

Маркированный список:

< UL>

< LI> Элемент < В> 1< /B> < /LI>

< LI> Элемент < В> 2< /B> < /LI>

< LI> Элемент < В> 3< /B> < /LI>

< /UL>

Нумерованный список:

< OL>

< LI> Элемент 1< /LI>

< LI> Элемент 2< /LI>

< LI> Элемент 3< /LI>

< /OL>

Вложенный список:

< OL>

< LI> < > Элемент 1< /U> < /LI>

< UL>

< LI> < I> Элемент 1.1< /I> < /LI>

< LI> < I> Элемент 1.2< /I> < /LI>

< /UL>

< LI> < > Элемент 2< /U> < /LI>

< UL>

< LI> < > Элемент 3< /U> < /L1>

< /OL>

< /Р>

< BODY>

< /HTML>

В приведенном указан один параметр заголовка - заголовок окна браузера, задан один заголовок текста с выравниваем по центру и создано три вида списков.

Теперь создайте страничку по приведенному образцу в таблице

4) Сохранить файл как lab7.txt в блокноте и как lab7.html для просмотра в браузере.

5) Запустите Internet Explorer и откройте созданный файл.