«Элементы оформления HTML-документа»
advertisement
«Элементы оформления 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> Теги <big>...</big> и <small>...</small> предназначены для сокращения записи тегов типа <font size=+1>...</font>, который заменяется тегом <big> увеличивающим размер текста на единицу. Аналогично тег <small> уменьшает текст на единицу относительно текущего размера. Тег <sub>...</sub> и <sup>...</sup>. Элементы создания записей формул, в которых требуется написание индексов и степеней. Тег <sub>...</sub> определяет нижний индекс, а тег <sup>...</sup> - верхний. Добавьте на страницу «Мой первый сайт» формулы С 2 H 5 OH или 3 2 9 . <html> <head> <title>Шестой пример</title> </head> <body text="#336699" bgcolor="#000000"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> Знание языка html позволяет создавать в Интернете страницы с разными целями их применения. </p> C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9 </body> </html> Тег <b>...</b> является сокращением от bold, отображает шрифт жирным шрифтом. Запись тега <b>...</b> производится следующим образом: <p>А это <b>жирный шрифт</b></p> Тег <i>...</i> отображает текст наклонным и происходит от слова Italic (наклонный шрифт). Пример применения тега <i>...</i>: <p>А это <i>наклонный шрифт</i> и <b><i>жирный наклонный текст</i></b> Тег <u>...</u> выводит подчеркнутый текст, находящийся между тегами <u>...</u>. Пример применения тега<u>…</u>: <p><u>Подчеркнуть текст</u> Тег <s>...</s> отображает текст зачеркнутым шрифтом. Пример использования тега <s>...</s>: <p><s>Зачеркнутый текст</s> Тег <tt>...</tt> выводит текст, находящийся между тегами с постоянной шириной символа (имитация телетайпного текста). Пример: <p>Текст из <tt>ТЕЛЕТАЙПА</tt> Тег <pre>...</pre> отображает с постоянной шириной символы, не пропускает пробелы, табуляции и переносы строк, тем самым оставляет первоначальное состояние текста. Пример применения тега <pre>...</pre>. <pre> 1 2 3 4 5 это будет хорошо выглядеть </pre> Тег <div>...</div> создает новый раздел в документе и чаще всего применяется для задания выравнивания текста из больших кусков. Для этого используется параметр align, который задает выравнивание внутри раздела. Пример применения <div>...</div>. <div align=right> <p>Абзац справа 1 <p>Абзац справа 2 <p>Абзац справа 3 </div> При отсутствии данного элемента пришлось писать в каждом абзаце <p align=right>...., что естественно трудоемко. Тег <blockquote>...</blockquote> используется для приведения цитат, и выделяется увеличенным отступом с двух сторон. Пример отображения цитат. <blockquote> Пришел, увидел, победил <br> (Ю. Цезарь) </blockquote> Тег <hr> вычерчивает горизонтальные линии и имеет следующие параметры: align - определяет выравнивание линии в документе и имеет свои обычные значения. По умолчанию линия отображается шириной во все страницу, и поэтому ее выравнивание не будет заметно; noshade - этот атрибут используется для вывода линии в виде полосы одного цвета. По умолчанию она отображается в виде канавки; size - устанавливает высоту линии в пикселях; width - устанавливает ширину линии в пикселях или в процентах от ширины внешнего элемента. Пример использования тега <hr>. <hr width=80% align=left> <hr width=50% align=center size=10> <hr width=150 align=right noshade> Тег <br> произошел от слова break line и служит для переноса строки в языке Html. Помогает начать новую строку, не прибегая к тегу <p>, который дает большой отступ от предыдущей строки. Пример работы тега <br>: <p>Пораз-<br>рываем стро-<br>ку Тег <nobr>…</nobr> сообщает браузеру о том, что текст, который находится внутри него ни в коем случае нельзя переносить, даже если в окно на каждую строку может уместится не больше одного слова. В конце рассмотрения приведем полный текст HTML-документа, который демонстрирует все элементы текстового оформления. <html> <head> <title>Седьмой пример</title> </head> <body text="#336699" bgcolor="#000000"> <center> <H3>Здравствуйте, это моя первая страница.</H3> <br> <font color="#CC0000"> Добро пожаловать!</font> :) </center> <p align="justify"> Знание языка html позволяет создавать в Интернете страницы с разными целями их применения. </p> C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9 <p>А это <b>жирный шрифт</b></p> <p>А это <i>наклонный шрифт</i> и <b><i>жирный наклонный текст</i></b> <p><u>Подчеркнуть текст</u> <p><s>Зачеркнутый текст</s> <p>Текст из <tt>ТЕЛЕТАЙПА</tt> <pre> 1 2 3 4 5 это будет хорошо выглядеть </pre> <div align=right> <p>Абзац справа 1 <p>Абзац справа 2 <p>Абзац справа 3 </div> <blockquote> Пришел, увидел, победил <br> (Ю. Цезарь) </blockquote> <hr width=80% align=left> <hr width=50% align=center size=10> <hr width=150 align=right noshade> <p>Пораз-<br>рываем стро-<br>ку </body> </html> Оформите страницу по образцу:
