WEB-дизайн Лабораторная работа №1 HTML - язык гипертекстовой разметки документов

WEB-дизайн Лабораторная работа №1 HTML - язык гипертекстовой разметки документов
Автор: student \| Категория: Технические науки / Информатика и программирование \| Просмотров: 1567 \| Комментирии: 0 \| 15-03-2016 20:54

Скачать: 17.rar [11,16 Kb] (cкачиваний: 10)

Введение в язык HTML

HTML-документы представляют собой ASCII-файлы, доступные для просмотра и редактирования в любом редакторе текстов.

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

<center> Привет участникам соревнований. </center>

Минимальный HTML-код

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

<HTML>

<HEAD>

<TITLE>Документ HTML </TITLE>

</HEAD>

<BODY>

<H1> Ура ! Это заголовок ! </H1>

Добро пожаловать в WWW <br> и мир HTML-документов

</BODY>

</HTML>

Здесь мы использовали следующие тэги:

<HTML> и парный ему </HTML> для описания всего документа

<HEAD> и парный ему </HEAD> - информационный блок

<TITLE> и парный ему </TITLE> для задания заголовка документа

<BODY> и парный ему </BODY> для описания тела документа

<H1> и парный ему </H1> для задания заголовка первого уровня

<BR> для указания на конец параграфа. Заметим, что тэг <BR> не имеет парного тэга.

Примечание. В тэгах языка HTML не различаются символы верхнего и нижнего регистров: тэг <TITLE> эквивалентен тегу <title><Title>.

Основные теги язык HTML

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

Заголовок документа

Тэг <TITLE> и парный ему тэг </TITLE>

Каждый HTML-документ должен иметь заголовок. Заголовок используется для поиска документов и обычно отображается отдельно от документа, например, как заголовок окна, в котором отображается сам документ. Обычно заголовок содержит краткое описание содержимого документа.

Примечание. Заголовок не является частью документа.

Заголовок внутри документа

Возможно использование заголовков 6 уровней - от 1 до 6. Заголовок первого уровня считается самым главным и используется в качестве первого заголовка документа. Заголовки могут выделяться цветом или шрифтом.

Синтаксис:

<Hx>Текст заголовка</Hx>

где х - это число 1 до 6, указывающее уровень заголовка.

Пример использования заголовков различных уровней.

<HTML>

<HEAD>

<TITLE>Пример на тэги заголовков</TITLE>

</HEAD>

Заголовки различных уровней !

</FONT></P>

<H1> Заголовок первого уровня </H1>

…………………………………………..

<H6> Заголовок шестого уровня </H6>

</BODY>

</HTML>

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

Они существуют наряду с 6 стилями заголовков. Начертание текста выделенного с помощью логических стилей зависит от настроек браузера.

<STRONG> -служит для выделения текста (Обычно это утолщенный шрифт)

<SMALL> - уменьшенный шрифт.

<BIG> - увеличенный шрифт.

<SUP> (superscript) - для верхних индексов.

<SUB> (subscript) - для нижних индексов.

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

Начертание шрифта при использовании таких стилей не зависит от настроек браузера.

<U> - (underline) подчеркивание

<B> - (bold) - полужирный

<I> - (italic)курсив

Чтобы ввести в текст символ произвольного вида, можно задать его код в следующем формате &#n, где n ASCII - код вводимого символа.

Чтобы ввести в текст пробел надо написать &nbsp

Размер, гарнитура и цвет шрифта

Тег <BAZEFONT SIZE=…> задает размер шрифта, который используется в документе по умолчанию

Тег <FONT SIZE=.. FACE=…. COLOR=….> задает размер, гарнитуру и цвет символов

Пример

COLOR=”#ffaa55” - шестнадцатиричное значение

Со шрифтами надо быть осторожными, так как шрифты, которые вы используете должны быть установлены не только у вас, но и у клиентов.

Можно задать несколько допустимых шрифтов, например: <FONT FACE=”Arial, Helvetica, Geneva, Swiss, Sans, Serif”>. Браузер при этом будет использовать первый из найденных шрифтов.

Теги абзаца и перевода строки

Тег перевода строки <BR> отделяет строку от последующего текста или графики.

Тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тэга являются непарными, т.е. не имеют закрывающих тегов. Чтобы закончить строку или абзац в определенном месте, там надо поставить соответствующий тэг.

Тэг <NoBR> предотвращает произвольный разрыв текста и перемещения графики при переполнении строки окна браузера. Этот тэг парный. Если же в неразбиваемом блоке текста надо в каком-то месте допустить разрыв используется тэг <WBR>. Он ставится между тегами <NoBR> и </NoBR>

Чтобы прервать обтекание встроенной графики, используется тэг <BR Clear=…>. В качестве аргумента может применяться одно трех ключевых слов: RIGHT, LEFT, ALL, обеспечивающие размещение текста там, где свободно левое, правое или оба поля соответственно. (не надо многократно писать <BR>.

Выравнивание текста и графики

Теги <LEFT>, <RIGHT>, <CENTER> выравнивают текст и графику по левому, правому краю, в центре.

Более современные браузеры для выравнивания текста используют директиву ALIGN в теге <P>, которая может принимать значения left, right, center, justify.

Пример:

<P ALIGN=”left”> Это называется выключкой по левому краю </P>

<P ALIGN=”right”> Это называется выключкой по правому краю </P>

<P ALIGN=”center”> Это называется центрированием </P>

<P ALIGN=”justify”> Это называется выровненный текст </P>

Когда требуется установить абзацный отступ, который ещё называется красной строкой, лучше всего использовать стилевое свойство text-indent. Его значение определяет насколько сдвинуть текст первой строки вправо от исходного положения. Ширина текстового блока при этом не меняется и остается заданной изначально. Величину отступа можно указывать в пикселах, процентах или других доступных единицах.

Пример:

<head>

<title>Отступ</title>

<style>

text-indent: 20px;

}

</style>

</head>

Комментарии

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

Текст комментария располагается вместо точек.

Задание

Создать Web-страницу, содержащую 6 параграфов текста, выполненных различными типами шрифтов, различными цветами, имеющих различные выключки (выравнивания).

В начале документа должна стоять фамилия автора и знак авторского права.

Параграфы должны начинаться заголовками различных уровней и содержать от 5 до 10 строк текста. Каждый параграф начинается с абзацного отступа.

Ключевые слова необходимо выделить с помощью всех перечисленных логических и физических стилей.

Не Пропустите: