Поделиться
Л2-001708.docx
1. Базовые теги 2
2.
Форматирование текста 1
Для того чтобы создать абзац, используется следующие тэги:
<p></p>
С помощью абзацев вы можете выравнивать текст:
· <p align="center">текст</p> - по центру;
· <p align="left">текст</p> - по левому краю документа;
· <p align="right">текст</p> - по правому краю документа;
· <p align="justify">текст</p> - по ширине документа.
Теперь введем абзацы в наш документ и посмотрим наглядно, что получится, попробуйте подставить в параграф атрибут align с другими значениями: left, right, justify).
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=blue bgcolor=yellow>
<p align=center>
Привет, это моя первая страница.
<br>
<font color=red>Добро пожаловать!</font>
</p>
</body>
</html>
Пустые элементы <p> без какого-либо содержания (других тэгов или текста) обычно игнорируются браузерами. Заметьте, что текст в документе, если не задавать абзацы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:
<div></div>
Одно из назначений этого тэга - выравнивание содержимого вашего документа. Все четыре значения атрибута align можно употреблять с <div>:
<div align="center"> текст </div>
<div align="left"> текст </div>
<div align="right"> текст </div>
<div align="justify"> текст </div>
Давайте воспользуемся этим тэгом:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=blue bgcolor=yellow >
<div align=center>
Привет, это моя первая страница.
<font color=red>Добро пожаловать!</font>
</div>
<p align=justify>
<font color=green>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать о моих увлечениях, моей биографии, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. Приятного просмотра. </font>
</p>
</body>
</html>
А сейчас о некоторых ошибках, которые могут появится при использовании этих тэгов. Абзац не может содержать в себе другие абзацы, и также тэг <div></div>. Т.е. следующие конструкции будут не верны, и вводить их в документ нельзя:
<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>
и
<p align="right">
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>
Однако <div> может содержать в себе абзацы: с помощью него мы можем сгруппировать их, допустим, по правому краю.
<div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>
Сейчас мы поговорим о заголовках.
Существуют шесть уровней заголовков:
|
Код HTML |
Вид в браузере |
|
<h1>Текст</h1> |
Текст |
|
<h2>Текст</h2> |
Текст |
|
<h3>Текст</h3> |
Текст |
|
<h4>Текст</h4> |
Текст |
|
<h5>Текст</h5> |
Текст |
|
<h6>Текст</h6> |
Текст |
Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки вы определяете структуру внутри текста.
Давайте теперь введем заголовок в наш документ. Выделите фразу "Привет, это моя первая страница".
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=blue bgcolor=yellow>
<div align=center>
<h3>Привет, это моя первая
страница.</h3>
<font color=red>Добро пожаловать!</font>
</div>
<p align=justify>
<font color=green>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать о моих увлечениях, моей биографии, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. Приятного просмотра. </font>
</p>
</body>
</html>
Визуально заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Также после закрывающего тэга заголовка происходит автоматически перенос на другую строку.
Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:
|
Код HTML |
Вид в браузере |
|
<font size=+4>Текст</font> |
Текст |
|
<font size=+3>Текс</font> |
Текст |
|
<font size=+2>Текст</font> |
Текст |
|
<font size=+1>Текст</font> |
Текст |
|
<font size=+0>Текст</font> |
Текст |
|
<font size=-1>Текст</font> |
Текст |
|
<font size=-2>Текст</font> |
Текст |
Давайте попробуем выделить текст «Приятного просмотра», не только увеличив размер шрифта и поменяв цвет на зеленый:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=blue bgcolor=yellow>
<div align=center>
<h2>Привет, это моя первая
страница.</h2>
<font color=red>Добро пожаловать!</font>
</div>
<p align=justify>
<font color=green>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать о моих увлечениях, моей биографии, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. <font size=+1 color=gray>Приятного просмотра.</font></font>
</p>
</body>
</html>
Домашнее задание: продолжите создание вашей собственной WEB-страницы, но уже с использованием новых тэгов
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
