WEB-дизайн Лабораторная работа №1 HTML - язык гипертекстовой разметки документов
Автор: student | Категория: Технические науки / Информатика и программирование | Просмотров: 674 | Комментирии: 0 | 15-03-2016 20:54
Скачать: 17.rar [11,16 Kb] (cкачиваний: 7)
 
 
Введение в язык 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 - код вводимого символа.
Чтобы ввести в текст пробел надо написать &nbsp
Размер, гарнитура и цвет шрифта
Тег <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 строк текста. Каждый параграф начинается с абзацного отступа. 
Ключевые слова необходимо выделить с помощью всех перечисленных логических и физических стилей.