Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
WEB-дизайн
Лабораторная работа №1
HTML – язык гипертекстовой разметки документов
Введение в язык 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>
<BODY BGCOLOR=SILVER>
<P ALIGN=CENTER>
<FONT COLOR=BLUE SIZE=6>
Заголовки различных уровней !
</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 – код вводимого символа.
Чтобы ввести в текст пробел надо написать  
Тег <BAZEFONT SIZE=…> задает размер шрифта, который используется в документе по умолчанию
Тег <FONT SIZE=.. FACE=…. COLOR=….> задает размер, гарнитуру и цвет символов
Пример
<FONT SIZE=5 FACE=”ARIAL” COLOR=”BLUE”>
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>
p{
text-indent: 20px;
}
</style>
</head>
Комментарии
Для того, чтобы поместить в текст документа комментарий – пояснительный текст, который не отображается на экране, следует использовать следующий тег: <!-- …. -->
Текст комментария располагается вместо точек.
Задание
Создать Web-страницу, содержащую 6 параграфов текста, выполненных различными типами шрифтов, различными цветами, имеющих различные выключки (выравнивания).
В начале документа должна стоять фамилия автора и знак авторского права.
Параграфы должны начинаться заголовками различных уровней и содержать от 5 до 10 строк текста. Каждый параграф начинается с абзацного отступа.
Ключевые слова необходимо выделить с помощью всех перечисленных логических и физических стилей.