Файловый архив студентов. Файловый архив студентов.
1301 вуз, 5075 предмет.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Кубанский Государственный Университет
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
otvety_k_ekzamenu.docx
Скачиваний:
2
Добавлен:
01.05.2025
Размер:
1.63 Mб
Скачать
☆
►Содержание►

"Форматирования блоков текста"

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

<PLAINTEXT>

Игнорирование любых HTML тегов и печатание текста документа как обычного текстового файла. Все что стоит после этого тега, включая HTML теги будет напечатано на экране. Этот тег описан первым, потому что он отличается от других тегов этой группы тем, что не имеет закрывающего тега. Область его действия идет от открывающего тега до конца документа. Даже если вы вставите закрывающий тег</PLAINTEXT> это не сработает. Таким образом единтсвенное применение этого тега - печать HTML тегов как обычного текста для. Параметров у этого тега нет.

Подсказка:

Если вы хотите напечатать какой-либо тег как обычный текст без использования тега<PLAINTEXT> (как сделано в этом руководстве), достаточно напечатать этот тег и заменить первую треугольную скобку '<' на комбинацию из 4-х символов &LT;

<ADDRESS>

некоторый текст

</ADDRESS>

Как видно из названия тега, он предназначен для отображения адреса. Каждый броузер сам определяет как выделять адрес. Обычно адрес пишется с новой строки, наклонным шрифтом и после закрывающего тега адреса также начинается новая строка. <BLOCKQUOTE>

некоторый текст

</BLOCKQUOTE>

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

<H1>, <H2>, <H3>, <H4>, <H5> и <H6>

Эти шесть тегов обозначают заголовки и пердназначены для выделения заголовков и подзаголовков. Заголовки выделяются жирным шрифтом, до и после заголовка вставляется перенос строки. Отличие этих шести тегов друг от друга заключается только в размере шрифта, которым будет печататься заголовок. Вот шесть цифр от 1 до 6, которые отображают размер заголовков, печатаемых соответсвующими тегами.

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5

Заголовок H6

<P>

некоторый текст

</P>

Тег предназначен для выделения параграфов текста. Перед параграфом и после параграфа вставляется пустая строка.

ALIGN

Этот параметр тега <P> предназначен для выравнивания текста внутри параграфа. Допустимые значения параметра ALIGN - LEFT (выравнивание текста по левому краю), RIGHT (выравнивание по правому краю), CENTER (выравнивание по центру) и JUSTIFY (выравнивание текста по ширине). Что значит выравнивание по ширине (JUSTIFY)? Там где это возможно броузер будет равномерно изменять расстояние между словами так, чтобы текст выравнивался по вертикальной линии как справа, так и слева. Точно так же как выравнен текст в книгах и так же как выровнен текст в этом руководстве.

<PRE>

некоторый текст

</PRE>

Печатание блока текста шрифтом фиксированной ширины (fixe-width font), заданным в настройках броузера и всех символов, включаю пробелы и переносы, такими как они есть в тексте. Вне тега <PRE> пробелы более одного подряд считаются за один пробел и переносы строки считаются одним пробелом. Внутри тега <PRE> все текст на экране будет выглядеть таким, какой он есть. Кроме того печать текста шрифтом фиксированной ширины позволяет добиться некоторых интересных результатов. Посмотрите на один и тот же отрывок текста в первом случае без использования тега<PRE>, а во втором случае с ипсользованием тега <PRE>.

  1. Язык HTML. Изображения и ссылки

В этой статье я расскажу Вам о добавлении изображений и ссылок на Вашу HTML-страницу.

Я думаю, что Вы ни разу не встречали ни одной страницы в Интернете, на которой не было ни одного изображения или ссылки. Поэтому материал данной статьи весьма важен, в то же время он очень прост, благодаря чему его сможет освоить даже школьник.

Первое, что мы сделаем - это добавим HTML ссылку на нашу страницу.

Для этого напишем в теге <body> такой код:

<a target = "_self" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>

Тег HTML <a> означает начало ссылки. У этого тега есть различные атрибуты. Давайте начнём с "target".

Атрибут "target" может принимать три значения (их чуть больше, но они слишком редко применяются, поэтому не буду их даже упоминать): "_self", "_new", "_blank". Вообще говоря, результат этих атрибутов у разных браузеров зачастую происходит по-разному, поэтому я скажу, что означает каждое значение атрибута "target" лишь в теории, а не на практике.

Значение "_self" означает, что страница откроется в этом же окне.

Значение "_new" означает, что страница откроется в новом окне (некоторые браузеры открывают не новое окно, а создают новую вкладку в браузере).

Значение "_blank" означает, что страница будет открыта в новой вкладке.

Я настоятельно рекомендую Вам испробовать все значения этого атрибута в различных браузерах, чтобы окончательно понять, что каждое из них означает.

Следующий атрибут "href" означает путь к странице. Так как нам пока ссылаться не на что, то приходится сослаться на ту же страницу. Что касается формы записи, то здесь бывают абсолютные и относительные пути.

Абсолютный путь задаёт полный путь к файлу, например, так: "http://mysite.ru/images/image1.gif". А относительный путь указывают путь относительно каталога, в котором находится текущий файл. Например, наш файл "index.html" лежит в корне сервера, а мы пишем: "href = 'images/image1.gif'". Это означает то же самое, что и если бы мы написали: "http://mysite.ru/images/image1.gif". Это, что касается абсолютных и относительных путей.

Надеюсь, что с атрибутом "href" всё стало понятно. Разумеется, ссылаться можно не только на HTML-страницы, но и на любые файлы, будь то картинки, будь то фильмы, будь то музыка, будь то архивы, будь то ещё всё, что угодно.

Последний атрибут - это "title". Здесь всё совсем просто. Этот атрибут задаёт текст, который будет виден при наведении мышки на ссылку.

С атрибутами тега <a> покончено. Что касается того, что внутри тега, то здесь только Ваша фантазия. В большинстве случаев - это обычный текст, как, например, у нас. Очень часто делают картинку внутри тега <a>, тогда эта ссылка будет в виде картинки.

Тег </a> означает конец гиперссылки.

Также можно задавать цвет ссылок. Опять же будет работать или нет - зависит от браузера. Но всё-таки, давайте я Вас с этим познакомлю. Добавим в тег <body> три атрибута : "link", "vlink" и "alink". Каждый из этих трёх атрибутов может принимать значение какого-либо цвета. Атрибут "link" означает цвет непосещённой ссылки. Соответственно, "vlink" указывает цвет посещённой ссылки. И, наконец, атрибут "alink" указывает цвет ссылки в момент непосредственного нажатия. Как видите, здесь тоже ничего сложного нет.

Теперь добавим изображения, но прежде, чем это делать. Сразу после добавления HTML-ссылки ставим тег "<br>". Этот тег также является одиночным, и он означает переход на новую строку. Напишем в теге <body> такой код:

<img src = "image1.gif" alt = "Картинка" width = "100" height = "100">

Тег <img> означает, что мы хотим добавить здесь изображение. Этот тег, как видно, является одиночным, то есть у него нет закрывающего тега. Атрибуты тега также очень и очень простые.

Атрибут "src" указывает путь к картинке. Опять же можно указывать, как абсолютный путь, так и относительный путь, в зависимости от ситуации.

Атрибут "alt" указывает текст, который описывает картинку. Этот же текст будет показываться в случае, если картинка по каким-либо причинам будет не найдена, либо у пользователя в браузере отключён показ картинок. Очень желательно этот атрибут ставить, так как это помогает оптимизации сайта (впрочем, это уже раскрутка сайта, а не его создание).

Атрибуты "width" и "height" указывают ширину и высоту картинки соответственно. Если их не указывать, то картинка будет иметь такой размер, какой имеет исходник.

Советую потренироваться, выводя различные изображения, только предварительно разместите файлы картинок вместе с "index.html". Например, создайте в этом же каталоге папку "images" и размещайте туда изображения. А в атрибуте "src" пишите значение "images/Имя файла картинки".

Таким образом, код Вашей страницы должен быть примерно таким:

<html> <head> </head> <body text = "green" bgcolor = "yellow" link = "green" vlink = "red" alink = "blue">   <h1>Заголовок 1-го уровня</h1>   <a target = "_new" href = "index.html" title = "Ссылка">Ссылка на эту страницу</a>   <br>   <img src = "Водяные лилии.jpg" alt = "Картинка" width = "100" height = "100"> </body> </html>

  1. Язык HTML. Списки и таблицы

Язык HTML. Структура HTML-документа. Основные тэги. Пример – создание списков и таблиц.

Основной объем информации, доступной в сети Интернет, размещается во «всемирной паутине» (WWW). Информация в ней представлена в виде связанных между собой документов, которые называются Web-страницами. Каждая Web-страница может содержать текст, рисунки, видео, звукозаписи и другие объекты. При подключении к WWW вы получаете равный доступ к сведениям, разбросанным по всему миру.

Каждый HTML-документ имеет определенную структуру, которая выглядит следующим образом:

<html>

  <head>

   ………………….

  </head>

  <body>

   …………………

  </body>

</html>

 

Основные тэги:

Описание тегов тела документа следует начать с тега ВОDY. В отличие от тега НEАD, тег ВОDY имеет атрибуты.

Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. <ВОDY ВАСКGROUND="image.gif">

Заголовки

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1> Заголовок 1</Н1>, получается большим — это основной заголовок.

Тег <P> применяется для разделения текста на параграфы. Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине.

Использование тега <ВR>  переход на новую строку 

Теги, управляющие формой отображения

Теги <ВIG> и <SMALL> — изменение размеров шрифта

Атрибут СОLОR

Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.

Теги, управляющие формой отображения, приведены в таблице.

Создание списков в HTML

Неупорядоченные списки — тег <UL>

Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

  • первый элемент списка;

  • второй элемент списка;

  • третий элемент списка.

Записывается данный список в виде последовательности:

<UL>

<LI>первый элемент списка

<LI>второй элемент списка

<LI>третий элемент списка

</UL>

 Упорядоченные списки — тег <OL>

Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:

<ОL ТYРЕ=l> Тег создает список с нумерацией

в формате 1., 2., 3., 4. и т.д.

<ОL ТYРЕ=А> Тег создает список с нумерацией

в формате А., В., С., D. и т.д.

<OL ТYРЕ=а> Тег создает список с нумерацией

в формате а., b., с., d. и т.д.

<ОL ТYРЕ=I> Тег создает список с нумерацией

в формате I., II., III., IV. и т.д.

Комментарии в языке HTML

При разметке документов HTML возникает необходимость в использовании комментариев, которые браузер не выводит на экран, но другой специалист, редактирующий данный документ, может прочитать. Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Гипертекстовые ссылки

Для записи гипертекстовой ссылки используется тег <А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. <А НREF="http://www.intuit.ru/index.htm">Отображаемое название гипертекстовой ссылки</А>,

Вставка графики:Пример вставки изображения:  

<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">  

Для обозначения изображения как гипертекстовой метки используется:

<А НREF="адрес файла или изображения"> <IMG SRC="image.gif"></А>

Таблицы:

Рассмотрим следующий пример.

Программа

<TABLE border=1>

  <TR>            <!-- Первая строка -->

    <TD>(1,1)</TD>     <!-- Первая ячейка -->

    <TD>(1,2)</TD>     <!-- Вторая ячейка -->

  </TR>

  <TR>            <!-- Вторая строка -->

    <TD>(2,1)</TD>     <!-- Первая ячейка -->

    <TD>(2,2)</TD>     <!-- Вторая ячейка -->

  </TR> </TABLE>

  1. Язык HTML. Табличная верстка сайта

Вёрстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>. В первом случае курсив задаётся явным образом, а во втором на текст производится логическое ударение, которое обычно отображается курсивом. Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение. Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц. Если придерживаться логической разметки, то можно использовать один и тот же вариант вёрстки для экрана, печати и КПК, регулируя внешний вид с помощью отдельных файлов стилей.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности