Сегодня: 02 мая 2024 г., четверг Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 3. Самое главное в HTML - тэги.

Тэги (от английского tag – ярлык, бирка, метка) - это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.

Строго говоря, HTML - это только тэги и их атрибуты. Для изучения HTML нужно изучить только это и ничего больше.

Все тэги имеют одинаковый формат: они начинаются знаком < и заканчиваются знаком >.
Обычно имеются два тэга - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш "/".

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга и подчиняется правилам, устанавливаемым для него тегом.

Однако, имеются тэги, которые только открываются и не требуют закрытия. Эти тэги не содержат внутри себя текста, а являются дополнительными метками разметки текста. Например, тег переноса строки <br>.
Чтобы все это было понятнее, давайте сразу перейдем к примерам.

Пример № 1:

Для того, чтобы выделить слово, строку или весь абзац жирным шрифтом, применяется следующий тег:

<b>Эта строка должна быть выделена жирным шрифтом.</b>

Вот как это будет выглядеть в браузере:

Эта строка должна быть выделена жирным шрифтом.

Тэги <h1>, <h2>, <h3>, <h4>, <h5> и <h6> указывают браузеру создавать заголовки, где <h1> - это заголовок первого уровня - самый крупный шрифт, <h2> - заголовок второго уровня - шрифт меньшего размера….. и <h6> - заголовок шестого уровня - самый маленький шрифт.

Пример № 2:

<h3>Проверяем</h3>
<h4>Проверяем</h4>
<h5>Проверяем</h5>

В браузере это будет выглядеть так:

Проверяем

Как правильно писать теги

Большинству браузеров безразлично, в каком регистре введены буквы тэгов. <html> или <HTML> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому, я советую вам сразу взять за правило, печатать тэги не заглавными, а маленькими буквами.

Где размещать теги

Теги печатаются в HTML-документе. HTML-документ – этой файл, имеющий расширение .html. То есть, вы создаете набор тегов в текстовом редакторе (или другой программе, пригодной для создания сайтов) и сохраняете его, как html-документ, которому автоматически присваивается расширение .html. По этому расширению Интернет-браузеры опознают «свои» файлы и работают с ними.

В следующем уроке я расскажу, как это сделать и как создать свой первый сайт буквально за пять минут!

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Евгений Андросов
Дата: 27.05.2013

Антон! Исчерпывающий ответ на ваш вопрос есть в Уроке 6 Учебника CSS, вы можете найти его по этой ссылке - http://www.freeadvice.ru/view_manual_css.php?id=23

Комментарий добавил(а): Антон
Дата: 27.05.2013

Как сделать текст подчеркнутым?

Комментарий добавил(а): Alexander
Дата: 17.06.2012

Набрал ссылку еще раз. Ничегошеньки не изменилось.

Комментарий добавил(а): Е
Дата: 14.06.2012

Александр! если неправильно отображается только одна буква, вряд ли это проблема с кодировкой. В таком случае становится нечитаемым весь текст. Попробуйте набрать текст ссылки еще раз. Хотя, скажу честно, о такой проблеме слышу впервые.

Комментарий добавил(а): Alexander
Дата: 14.06.2012

Пробовал с кодировками Windows-чего-то там и Unicode++

Комментарий добавил(а): Alexander
Дата: 14.06.2012

У меня вместо перейти на главную страницу пишет Џерейти на главную страницу. Что делать?????

Комментарий добавил(а): Евгений Андросов
Дата: 17.04.2011

Об этом рассказывается в уроке 8 Картинки, фотографии. Ну а если в двух словах: ставите тег имиджа перед текстом, он автоматически выставляется левее текста.

Комментарий добавил(а): Нел
Дата: 17.04.2011

А как сделать чтобы картинка была слева от текста?

Комментарий добавил(а): user
Дата: 05.10.2010

Евгений,большое спасибо!

Комментарий добавил(а): Евгений Андросов
Дата: 05.10.2010

Да, пока вы набираете адрес в сообщении, он выглядит как обычный текст, но когда вы нажимаете на кнопку Tweet и он попадает в ленту, то адрес сайта автоматически становится ссылкой.

Комментарий добавил(а): user
Дата: 05.10.2010

Спасибо,Евгений! То есть,если я хочу разместить в своём сообщении в Твиттере ссылку(голубого цвета)на твиттерянина,или сайт,или фото,я просто набираю соответственно: @аккаунт,www.(http://)адрес сайта,адрес сайта/код? Но в моём сообщении это печатается обычным(не голубым)цветом и без подчёркивания,верно?

Комментарий добавил(а): Евгений Андросов
Дата: 05.10.2010

Большинство социальных сетей и других Интернет-сервисов (в том числе и этот сайт, как вы можете заметить) отключают возможность использования HTML пользователями. Поэтому в Твиттере создать ссылку с помощью HTML нельзя. Но если вы напишите в сообщении адрес-сайта, он будет показан в виде ссылки. Так же распознаются в Твиттере и сокращенные ссылки. Все остальное работать не будет.

Комментарий добавил(а): user
Дата: 05.10.2010

как создать ссылку с помощью HTML в тексте сообщения в твиттере

Комментарий добавил(а): Евгений Андросов
Дата: 26.03.2010

Таня! Просто выравниваете абзац по центру с помощью атрибута "align". Пример:
<p align="center">Здесь находится текст</p>
Если речь идет о больших участках страниц или всего сайта, то это лучше и проще указать с помощью CSS - один раз для всего сайта или отдельных его участков, которые помечаются тегом <div>.

Комментарий добавил(а): Таня
Дата: 26.03.2010

А как сделать так,чтобы текст был посередине страницы?

Комментарий добавил(а): Андрей
Дата: 07.02.2010

Спасибо Вам за хороший отзыв! Словарь терминов постоянно расширяется. Ему чуть больше пол года, сразу невозможно охватить все. Завтра, например, появятся статьи о терминах байт, килобайт, мегабайт, гигабайт :) Спасибо, что подсказали!

Комментарий добавил(а): Андрей
Дата: 07.02.2010

Огромное ВАМ СПАСИБО за этот сайт ! Словарь терминов следовало бы расширить до азов, типа байт, килобайт...

Комментарий добавил(а): Евгений Андросов
Дата: 16.12.2009

Мне такие тэги неизвестны :)

Комментарий добавил(а): Майли
Дата: 15.12.2009

А бывают тэги меньше чем, <h6>&

Комментарий добавил(а): Евгений Андросов
Дата: 07.12.2009

Извините, что не сразу ответил. вы можете сохранить файл, созданный в блокноте и открыть его в любой удобный момент, делая в нем любые исправления. А можете просто свернуть во время работы, открывая окно и производя правки, когда это нужно. После того, как вы что-то исправили в Блокноте, обязательно нажмите на "Сохранить". После этого перезагрузите страницу в Интернет-браузере и исправления, сделанные и сохраненные в Блокноте, появятся в браузере.

Комментарий добавил(а): Светлана
Дата: 05.12.2009

А как вернуться обратно к блокноту чтобы чтото исправить. Из этой созданной странички

Задать вопрос

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