Основы html. Часть 1. Форматирование

Начинаю серию небольших уроков для знакомства с основами html. В первом уроке познакомимся с форматированием текста.

Начинаю серию небольших уроков для знакомства с основами html. В первом уроке познакомимся с форматированием текста.

Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста. Эти специальные команды называются теги. Теги пишутся только английскими буквами и заключаются в угловые скобки < >. Теги бывают открывающие (начало действия команды браузеру) и закрывающие (соответсвенно окончание действия). В закрывающем теге ставится слеш перед названием </>. Сейчас на практике Вы поймете, о чем идет речь.

Как я говорил, html-страница является текстовым документом, значит для ее создания вполне подойдет простой блокнот. Открывайте блокнот и пишем вот такую комбинацию тегов

<html>
<head> </head>
<body> </body>
</html>

Любая вебстраница начинается с тега <html>, чтобы браузер знал, как ее обрабатывать. Как видите, заканчиваться страница должна закрывающим </html>. Также обязательные теги <head> </head> (голова) и <body> </body> (тело) вебстраницы. В логове размещается различная нужная служебная информация, а между тегами <body> </body> собственно контент страницы. Теперь посмотрим, как это выглядит в браузере. Для этого сначала сохраним то, что написано в блокноте: Файл — Сохранить как, выбираете куда желаете сохранить и произвольное имя (у меня proba). Обязательно укажите после точки расширение файла html, иначе страница сохранится как текстовый документ, а не веб-страница.

Файл - Сохранить как, выбираете куда желаете сохранить и произвольное имя

Открываем брайзер, далее Файл — Открыть, и в появившемся окне выбираем только что сохраненный файл.

Файл - Открыть, и в появившемся окне выбираем только что сохраненный файл

Открываем брайзер, далее Файл — Открыть, и в появившемся окне выбираем только что сохраненный файл.

Файл - Открыть, и в появившемся окне выбираем только что сохраненный файл

Как видим, у нас пустая белая страница, ведь между тегами <body> </body> пока ничего нет. Но прежде добавим в голову вот такую комбинацию

<head>
<title>Моя первая страница</title>
</head>

Сохраняем блокнот (нажмите Ctrl + S) и обновите окно браузера. Заметили, что появилось название страницы?

появилось название страницы

Теперь займемся наполнением содержания страницы. Возьмите произвольный текст, скопируйте и вставьте его между тегами <body> </body>. У меня получилось вот так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста.
</body>
</html>

Сохраняем блокнот, обновляем браузер. Видим, что текст появился, но нет разрыва между абзацами. Для этого нужен специальный тег <p> (от английского paragraph). Ставим его в начало абзаца и не забываем поставить в конце закрывающий тег </p> . У меня получилась так.

<p> Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

<p> Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста. </p>

Сохраняем, обновляем браузер. Есть абзацы. Сделаем заголовок страницы. Напишем его между тегами <h1> </h1> (от англ. heading — заголовок). Цифры можно использовать от 1 до 6 (1 — самый большой шрифт, 6 — самой маленький. )

<h1> html — это просто</h1>
<p> Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

По умолчанию браузер выравнивает текст по левому краю. Если нужно указать выравнивание, то используют признак align=. В нашем коде это будет выглядеть так:

<h1> html — это просто</h1>
<p align=»center»> Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

Не забываем сохранять блокнот и обновлять браузер. Видим, что теперь первый абзац выравнился по центру. Для выравнивания по правому краю используйте значение «right», по ширине страницы — «justify». Признак align можно применять заголовкам, изображениям и т.д.

Теперь выделим жирным какую-нибудь фразу. В этом поможет тег <strong>. Не забывайте ставить закрывающий </strong> .

<h1> html — это просто</h1>
<p> Думаете, что язык html — это очень сложно? Ничего подобного. <strong>Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку.</strong> Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

<p> Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста. </p>

Теперь можете сами поэкспериментировать с форматированием. Чтобы сделать наклонный шрифт, используйте теги <em>наклонный шрифт, а для подчеркивания <u>подчеркнутый</u>.

Важно: Можно вкладывать одни теги между другими, но следите, чтобы теги не пересекались. То есть если надо выделить часть текста жирным наклонным шрифтом, то сначала открываете <strong><em> нужный текст </em></strong>.

<strong><em> правильно </em></strong>
<em><strong> правильно </strong></em>
<strong><em> не правильно </strong></em>

Чтобы не запутаться, рекомендую при верстке добавлять теги блоками: открывающий — закрывающий, и уже внутри такого блока вставлять текст или другие блоки тегов.

<p> Думаете, <strong>что язык html — это очень сложно? <em>Ничего подобного</em></strong>. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

Можно вкладывать одни теги между другими, но следите, чтобы теги не пересекались

Теперь займемся наполнением содержания страницы. Возьмите произвольный текст, скопируйте и вставьте его между тегами <body> </body>. У меня получилось вот так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста.
</body>
</html>

Сохраняем блокнот, обновляем браузер. Видим, что текст появился, но нет разрыва между абзацами. Для этого нужен специальный тег <p> (от английского paragraph). Ставим его в начало абзаца и не забываем поставить в конце закрывающий тег </p> . У меня получилась так.

<p> Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

<p> Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста. </p>

Сохраняем, обновляем браузер. Есть абзацы. Сделаем заголовок страницы. Напишем его между тегами <h1> </h1> (от англ. heading — заголовок). Цифры можно использовать от 1 до 6 (1 — самый большой шрифт, 6 — самой маленький. )

<h1> html — это просто</h1>
<p> Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

По умолчанию браузер выравнивает текст по левому краю. Если нужно указать выравнивание, то используют признак align=. В нашем коде это будет выглядеть так:

<h1> html — это просто</h1>
<p align=»center»> Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

Не забываем сохранять блокнот и обновлять браузер. Видим, что теперь первый абзац выравнился по центру. Для выравнивания по правому краю используйте значение «right», по ширине страницы — «justify». Признак align можно применять заголовкам, изображениям и т.д.

Теперь выделим жирным какую-нибудь фразу. В этом поможет тег <strong>. Не забывайте ставить закрывающий </strong> .

<h1> html — это просто</h1>
<p> Думаете, что язык html — это очень сложно? Ничего подобного. <strong>Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку.</strong> Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

<p> Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста. </p>

Теперь можете сами поэкспериментировать с форматированием. Чтобы сделать наклонный шрифт, используйте теги <em>наклонный шрифт, а для подчеркивания <u>подчеркнутый</u>.

Важно: Можно вкладывать одни теги между другими, но следите, чтобы теги не пересекались. То есть если надо выделить часть текста жирным наклонным шрифтом, то сначала открываете <strong><em> нужный текст </em></strong>.

<strong><em> правильно </em></strong>
<em><strong> правильно </strong></em>
<strong><em> не правильно </strong></em>

Чтобы не запутаться, рекомендую при верстке добавлять теги блоками: открывающий — закрывающий, и уже внутри такого блока вставлять текст или другие блоки тегов.

<p> Думаете, <strong>что язык html — это очень сложно? <em>Ничего подобного</em></strong>. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.</p>

Можно вкладывать одни теги между другими, но следите, чтобы теги не пересекались

К элементам форматирования текста относятся так же списки. В языке html за построение списков отвечает несколько тегов. Сначала рассмотрим ненумерованный список. Наберите в блокноте следующую комбинацию

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
<p > Ненумерованный список </p>
<ul>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 2 </li>
</ul>
</body>
</html>

Знакомимся с новыми тегами: <ul> </ul> — показывает ненумерованный список, <li> </li> отмечает один пункт списка.

ненумерованный список

По умолчанию браузер отображает каждый пункт списка черной точкой. Это можно изменить, добавив тегу <ul> признак type=» «. В кавычках укажите «circle», «disc» или «square»

<p > Ненумерованный список </p>
<ul type=»circle»>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 2 </li>
</ul>

ненумерованный список

По умолчанию браузер отображает каждый пункт списка черной точкой. Это можно изменить, добавив тегу <ul> признак type=» «. В кавычках укажите «circle», «disc» или «square»

<p > Ненумерованный список </p>
<ul type=»circle»>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 2 </li>
</ul>

ненумерованный список

Если нужно построить пронумерованный список, то вместо тега <ul> используют <ol>

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
<p > Пронумерованный список </p>
<ol>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 3 </li>
</ol>
</body>
</html>

пронумерованный список

Иногда возникает необходимость прервать пронумерованный список, например для комментариев, а затем продолжить его. Чтобы указать браузеру, с какой цифры начинать список используйте признак start=» «. В ковычках укажите с какой цифры должен начинаться список.

<p > Пронумерованный список с разрывом </p>
<ol>
<li>пункт 1 </li>
<li>пункт 2 </li>
</ol>
<p>Примечание</p>
<ol start=»3″>
<li>пункт 3</li>
<li>пункт 4 </li>
</ol>

Пронумерованный список с разрывом

А теперь немного поработаем с шрифтами. Если на веб-странице не указано, каким шрифтом отображать текст, то браузер весь текст покажет шрифтом, установленным в настройках по умолчанию. Чтобы указать браузеру, каким шрифтом отображать текст, применяют тег <font face=» «> </font>. В кавычках нужно написать тип шрифта.

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
<p >Это текст написан шрифтом по умолчанию</p>
<p ><font face=»Book Antiqua»>Это текст написан шрифтом Book Antiqua </font></p>
</body>
</html>

Чтобы указать браузеру, каким шрифтом отображать текст, применяют тег <font face=

А теперь немного поработаем с шрифтами. Если на веб-странице не указано, каким шрифтом отображать текст, то браузер весь текст покажет шрифтом, установленным в настройках по умолчанию. Чтобы указать браузеру, каким шрифтом отображать текст, применяют тег <font face=» «> </font>. В кавычках нужно написать тип шрифта.

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
<p >Это текст написан шрифтом по умолчанию</p>
<p ><font face=»Book Antiqua»>Это текст написан шрифтом Book Antiqua </font></p>
</body>
</html>

Чтобы указать браузеру, каким шрифтом отображать текст, применяют тег <font face=

Тегом <font> можно указать не только тип, но и размер шрифта. Для этого применяют тег <font size=» «>. В кавычках укажите размер шрифта, от 1 до 7, либо на сколько единиц его увеличить или уменьшить (+1 … +7; -1 … -7). Признаки размера и типа шрифта можно писать в одном теге <font>.

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
<p >Это текст написан шрифтом по умолчанию</p>
<p ><font face=»Book Antiqua»>Это текст написан шрифтом Book Antiqua </font></p>
<p ><font size=»5″>Это текст написан шрифтом по умолчанию, размер 5 </font></p>
<p ><font size=»5″ face=»Book Antiqua»>Это текст написан шрифтом Book Antiqua, размер 5 </font></p>
</body>
</html>

Признаки размера и типа шрифта можно писать в одном теге <font>.

Ну вот и все, что можно сказать про форматирование текста веб-страницы. В следующем уроке я расскажу, как вставлять картинки, ссылки и поговорим о цветах.

 

Я Вам показал лишь малую часть возможностей языка html. Изучить его в совершенстве Вам поможет Базовый курс по обучению языку HTML и CSS

Наверх

Понравилась статья? Поделиться с друзьями:

Отправить ответ

Оставьте первый комментарий!

Уведомить
avatar
wpDiscuz