|
На прошлом уроке мы познакомились со структурой HTML документа и сделали самую первую страничку.
Наша страница пока смотриться не очень красочно, но ничего страшного, скоро мы это исправим.
Теперь посмотрим как происходит форматирование текста в HTML и его разметка при помощи тегов. Рассмотрим теги
H
позволяет изменять размер заголовка.
P
нужен для разбиения текста на абзацы.
BR
перенос текста на новую строку.
DIV и SPAN
используются для выделения части документа определенным способом.
HR
создаёт горизонтальную линию.
Тэг H (контейнер)
Теперь давайте сделаем чтобы первая строчка была написана крупным шрифтом, для этого используется тэг <h..>... </h..>.
Он имеет значение от 1 до 6. Где 1 - самый крупный, 2 - немного поменьше, 3 - ещё меньше и т.д.
Сделаем нашу строчку самым крупным шрифтом, заключим его в тэги <h1>...</h1>.
Почему назвал его контейнером? Потому что он имеет открывающий и закрывающий тег. Между ними помещается текст, как будто в контейнер. <html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1>Всё об аквариумных рыбках и растениях</h1>
<br>
Добро пожаловать!
</body>
</html> Сохраним его и откроем браузером. Должно получится так:
Тэг P (контейнер)
Для разбивки текста на абзацы используются тэги <p>...</p>.
Добавим контейнер с текстом в наш файл index.html:
<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1>Всё об аквариумных рыбках и растениях</h1><br>
Добро пожаловать!
<p>На нашем сайте Вы узнаете о содержании и разведении
аквариумных рыбок,о часто встречающихся болезнях
и методах лечения.</p
</body>
</html>
Скопируйте и сохраните, незабудте обновить браузер.
Тэг BR (одиночный)
Как видите текст в контейнере <p>...</p> отображается на всю ширину страницы. Как помните из прошлого урока для переноса на следующую страницу используется одиночный тэг <br>. Попробуем.
<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1>Всё об аквариумных рыбках и растениях</h1>
<br>
Добро пожаловать!
<p>На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>
</body>
</html> Теперь уже лучше. АтрибутыТакже для тэгов (контейнеров) существуют атрибуты, дополняющие их.
Атрибут align позволяет выравнивать текст на странице, имеет значения
align="center" - выравнивание посередине
align="right" - выравнивание по правому краю
align="justify" - выравнивает по левому и правому краям.
По умолчанию текст выравнивается по левому краю. Давайте выравняем наш текст по середине страницы: <html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1 align="center"> Всё об аквариумных рыбках и растениях</h1>
<br>
<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>
</body>
</html> Всё, теперь текст посередине страницы. НО как вы наверное уже заметили строчку - Добро Пожаловать - мы заключили в контейнер <p>...</p>.
Мы это сделали потому что строчка была вне контейнера, и вообще безо всяких атрибутов, а по умолчанию текст выравнивается по левому краю. То есть если бы мы эту строчку оставили без изменений, она осталась бы слева, а всё остальное было бы посередине.
Тэг SPAN (контейнер)
Ещё существует очень полезный контейнер <span>...</span>. С его помощью можно задать параметры любого фрагмента текста, даже для текста уже помещённого в другие контейнеры. В основном применяется совместно с CSS.
К примеру <span style="color: #0000ff;"> текст документа</span>
задаёт цвет текста в контейнере.
Цвет текста задаётся в шестнацатиричном или формате или ключевыми словами (red, black и т.д.).
Узнать значение можно из палитры Paint. ПУСК - Все Программы -Стандартные - Paint. Открываете программу, нажимаете F8. Появится окно с палитрой, выбираете цвет на окружности, щёлкаете мышкой и напротив надписи Hex будет значение: 
Контейнер <span style="font-family: Arial;">...</span> задаёт вид шрифта. В нашем случае шрифт называется Arial. Существует много различных шрифтов : Georgia, Tahoma, Verdana и т.д.
Можно проставить несколько шрифтов,например: <span style="font-family: Arial, Tahoma;"> это если вдруг одного из шрифтов нет на компьютере, будет использоваться другой. Но это уже немного из CSS. Тэг DIV (контейнер)
Используется для форматирования, перемещения блоков текста.
Атрибут align - определяет способ горизонтального выравнивания блока текста.
Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине. По умолчанию имеет значение left.
Например: <div align="left">Сомы очень скрытные рыбы, их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты<div> Тэг HR (одиночный)
Для визуального эффекта используется одиночный тэг <hr>. С его помощью можно сделать горизонтальную линию. Атрибуты: - width – определяет длину линии в пикселях или процентах от ширины окна браузера.
- size – толщина линии в пикселях.
- align – выравнивание линии, может принимать следующие значения:
left – выравнивание по левому краю документа.
right – выравнивание по правому краю документа.
center – выравнивание по центру документа (используется по умолчанию).
- color - определяет цвет линии, задаётся как в шестнадцатиричном формате, так и ключевыми словами.
Например:
<hr width="55%" align="right" color="red">
Линия будет составлять 55% от длины экрана, выравнивается по правому краю, цвет линии - красный.
Вот наш получившийся код: <html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1 align="center"> Всё об аквариумных рыбках и растениях</h1>
<br><hr width="55%" align="right" color="red">
<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>
<div align="left"><span style="color: #0000ff">Сомы очень скрытные рыбы,их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты</span><div>
</body>
</html> Немного неразборчиво,да? Для того чтобы разбираться в больших кусках html-кода существуют комментарии. То есть как бы обьяснение что, и где. Вебмастер делает их для себя. В браузере их видно не будет. Привожу пример кода с комментариями: <html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<!--Тело документа!-->
<body>
<!--Здесь будет горизонтальная линия!-->
<h1 align="center"> Всё об аквариумных рыбках и растениях</h1>
<br><hr width="55%" align="right" color="red">
<!-- Тут выравнивание текста посередине!-->
<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>
<!--Блок текста слева синим цветом!-->
<div align="left"><span style="color: #0000ff">Сомы очень скрытные рыбы,их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты</span><div>
</body>
<!--Конец тела документа!-->
</html> Вот теперь уже ясно что, где и как!
Когда будете писать код будте внимательней, всегда соблюдайте последовательность закрытия контейнеров.
Например:
<p><span><h2>текст</span></h2></p> будет неправильно, а
<p><span><h2>текст</h2></span></p> Будет правильно.
Теперь немного потренируйтесь, поэкспериментируйте. Будте внимательны и не торопитесь.
Перейти к следующему уроку.
Оформление текста в HTML
|
Уроки и видео
Основы HTML 
