Элементы оформления HTML-документа
«Элементы оформления HTML-документа»
Тэг <font>…</font> - задает цвет текста в конкретной части документа, размер шрифта и вид шрифта и имеет следующие параметры:
• face - задает название шрифта, которым требуется отобразить текст в документе;
• size - задает высоту символов, которая может находиться в пределах от 1 до 7;
• color - задает цвет отображаемых символов, который задается в 16-ичном виде, описанном раньше.
Выполните следующий пример на использование тега <font>…</font>.
<html>
<body>
<p>А это шрифт : <font face="Arial" color=#00FF00 size=4>Arial</font>
<font size=7 color=#FF0000 >Size 7</font>
<font size=3 color=#0000FF >Size 3</font>
<font size=+2>Size +2</font>
<font size=-1>Size -1</font>
</body>
</html>
В этом примере отобразятся надписи различного цвета, высоты и шрифта. В двух предпоследних строчках используется в размере знак. Таким образом, указываются относительные размеры шрифта, например, если размер вашего шрифта был 5, то при записи +1 размер шрифта станет 6, и также с минусами. Но если был шрифт 3, и указано +5 или -4, то размер не будет 8 или -1, а будет максимальный и минимальный.
Тег <basefont> применяется для установки базового шрифта на странице. Параметры у него аналогичны <font> например: <basefont size=4 color=red face="Arial">. Тег <basefont> не должен иметь закрывающую скобку. Его лучше располагать в начале документа, но если нужно действие на определенном участке текста, то можно использовать внутри него. Так как этот тег определяет базовый шрифт, то в примере размер шрифта будет откладываться от 4. По умолчанию, если не используется <basefont>, базовый шрифт имеет размер 3.
1. Откройте созданную на предыдущем уроке страницу (файл index.html).
2. Окрасим слова «Добро пожаловать» красным цветом.
<html>
<head>
<title>Первый пример </title>
</head>
<body>
Здравствуйте, это моя первая страница. <br>
<font color="#CC0000"> Добро пожаловать! 
</font>
</body>
</html>
3. Сохраните изменения и просмотрите страницу с помощью обозревателя Internet Explorer.
4. Зададим цвет текста документа в открывающем теге <body>: <body text= "#336699">. Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font>…</font> (если цвет в <body> не задавать, то по умолчанию он будет черным).
<html>
<head>
<title> Второй пример </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> 
</body>
</html>
5. Установим цвета фона в тэге <body>: <body bgcolor="#000000">. Для наглядности здесь прописан черный цвет (если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше прописывайте цвет фона в body). Поэкспериментируете с цветами в данном примере.
<html>
<head>
<title> Третий пример </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> 
</body>
</html>
Тег <p>...</p> происходит от начальной буквы слова paragraph (параграф или абзац). Все содержимое этого элемента, помещенное внутри <p>...</p>, отделяется от другого содержимого страницы несколькими пустыми строками. Абзацы можно выравнивать по левому или правому краю, а также по центру. За это отвечает параметр align, который может принимать значения left - по левому краю(<p align="left">текст</p>), right - по правому краю (<p align="right">текст</p>) и center - по центру (<p align="center">текст</p>). Кроме этих выравнивании существует еще одно, которое поддерживает пока только Internet Explorer, это justify - выравнивание по ширине страницы.
По умолчанию все абзацы выравниваются по левому краю, если конечно этот параграф не является вложенным в другой блок, выравнивание которого другое.
Теперь введем на нашей первой страничке параграфы и посмотрим наглядно, что получится.
<html>
<head>
<title>Четвертый пример </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> 
</p>
</body>
</html>
Подставьте в параграф параметры со значениями left и right и посмотрите изменения на странице.
Теги <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5>, <h6>...</h6>. Определяют заголовки разных размеров и имеют огромное значение при создании html – документа. Различаются они размером букв, при этом <h1> - самые большие, а <h6> - самые мелкие. Заголовки, как и абзацы, можно выравнивать через параметр align.
Для страницы «Мой первый сайт» задайте заголовок третьего уровня.
<html>
<head>
<title>Пятый пример</title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> 
</center>
<p align="justify">
Знание языка html позволяет создавать в Интернете страницы с разными целями их применения.
</p>
</body>
</html>
....
Автор: Дроздова Анна, преподаватель дисциплины "Информационные технологии"
Автор: Дроздова Анна