Что такое теги html и как ими пользоваться для создания сайта?

Доброго всем времени суток, дорогие друзья и читатели моего блога. Я смотрю, что вконтакте уже части населения страны поставили новый дизайн. Один из моих аккаунтов подвергся этому. Но правда я, в отличие от других пользователей, паники никакой не вижу. Ну сменили, и сменили. Почему бы и нет? Ну да ладно. Речь-то не об этом. В готовы сегодня продолжать лепить сайт в блокноте?

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

Понятие и назначение

Тег — это обязательный элемент языка гипертекстовой разметки html. Нужны эти знаки для того, чтобы говорить определенному куску контента (например тексту) каким он должен быть и как он должен себя вести. Благодаря таким тегам мы можем сделать текст больше, меньше, жирнее, изменить цвет, поставить фон, создать ссылку, поставить картинки, влепить текст в таблицу и многое другое.

Что такое теги html и как ими пользоваться для создания сайта?

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

На практике это выглядит так

<tag>Контент</tag>

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

<tag>Какой-то текст<tag> <!--При закрытии отсутствует слэш-->
<tag>Еще один какой-то текст <!--Если тэг парный, то это неправильно-->
<tag Новый текст</tag> <!--Тэг вообще не открыт-->

Несколько тегов могут применяться к одному контенту, в таком случае их нужно использовать по принципу матрёшки:

<p>
<tag1>
<tag2>
Текст
<tag2>
<tag1>
<p>

Абзац (P)

Начнем мы пожалуй с тега абзаца. Обозначается он буквой латинской буквой <p> (Paragraph — параграф) и, как вы уже поняли, заключается в угловые скобки. Также как и большинство тэгов этот является парным, то есть текст обрамляется этими значениями. Для чего он вообще нужен? Да чтобы отделять текст абзацами.

Давайте напишем какой-нибудь текст в нашем подготовленном документе, только три разных куска текста мы заключим в абзацы.

<html>
 <head>
 <title>Мой первый сайт</title>

</head>

<body>

<p>Сегодня мы научимся пользоваться несколькими важными тегами,
 которые пригодятся вам в сайтостроении, даже если вы будете
 делать свой ресурс на движках</p>

<p>На забудьте закрывать тэги. Если вы открыли его, но не закрыли
(или закрыли неправильно), то он будет работать, но распространится
на всё следующее содержимое. Поэтому внимательно следите, чтобы
всё было правильно.</p>

<p>А сегодня в завтрашний день не все могут смотреть.
 Вернее смотреть могут не только лишь все.
 Мало, кто может это делать.</p>

</body>
</html>

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

Что такое теги html и как ими пользоваться для создания сайта?

Переход на новую строку (BR)

Мы можем перейти на новый абзац, а что если нам этот абзац не нужен? Что если нам нужно сделать один или несколько переходов на новую строку? В этом нам поможет тэг <br> (Break). Он несколько отличается от предыдущих тем, что он одинарный, а не парный. Ну оно не ясно, он служит аналогом клавиши «Enter» в обычном текстовом редакторе. Ставится он в любом месте, когда вам нужно перенести строку.

Что такое теги html и как ими пользоваться для создания сайта?

Давайте в каждом абзаце, после каждого четвертого слова сделаем по одному пропуску, а между вторым и третьим абзацем сделаем сделаем два. И посмотрим насколько он уйдет вниз. Должно получиться что-то вроде этого.

Что такое теги html и как ими пользоваться для создания сайта?

Выделение текста

Давайте с вами также научимся выделять какие-то фрагменты текста жирным и курсивом. В этом вам помогут два парных тэга:

  • <strong></strong> — жирный
  • <em></em> — курсив

Теперь просто попробуйте обрамить этими тэгами куски текста в разных местах, сохраните документ и обновите в браузере (или запустите заново).

Что такое теги html и как ими пользоваться для создания сайта?

Теперь обратите внимание, что первый абзац у нас стал выделен жирным, а второй абзац курсивом. Третий абзац мы не трогали вообще, поэтому он остался без изменений.

Что такое теги html и как ими пользоваться для создания сайта?

Заголовки (H1-H6)

Я думаю не надо объяснять что такое заголовки. Но надо упомянуть, что в html существует 6 видов таких заголовков. Самый большой как правило ставится всего один раз на странице, а дальше по убывающей по степени вложенности. Например заголовок первого уровня может содержать в себе несколько заголовков второго уровня, а каждый заголовок второго уровня может содержать по нескольку заголовков 3-го уровня, и т.д.

Заголовки обозначаются следующими парными тегами:

<h1>Первый уровень</h1>
<h2>Второй уровень</h2>
<h3>Третий уровень</h3>
<h4>Четвертый уровень</h4>
<h5>Пятый уровень</h5>
<h6>Шестой уровень</h6>

Попробуйте скопировать это в документ между тэгами body и сохранить в формате html и вы увидите, что у вас получилось. А должно у вас получиться, как на рисунке ниже.

Что такое теги html и как ими пользоваться для создания сайта?

Живой пример

Итак, часть новых тегов мы изучили и надо переварить их назначение. Вообще ничего сложного тут нет. Отдохнули? Молодцы. Теперь идем дальше.

Представьте, что вы получили техническое задание от заказчика сделать веб-страницу по его требованиям. Скачайте его отсюда. Там написан лишь текст, но нам из него нужно сделать веб-страницу. Ребята, только одна к вам просьба:

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

  1. Открываем Notepad++ и прописываем ту самую основу, которую мы проходили на предыдущем уроке (html, head, title, body).
  2. Между <body> и </body> вставляем текст из технического задания (только заголовки и само стихотворение). Сразу сохраните этот документ в формате html и посмотрите, как он у вас будет отображаться в браузере. Здорово, да? 
  3. Обрамляем заголовок «У Лукоморья дуб зеленый»  <h1>, а «Из поэмы Руслан и Людмила» обрамляем <h2>.
  4. Каждые четыре строчки обрамляем абзацами <p>. Не забываем, что сначала надо ставить открытый тэг, а после четырех строк закрытый. Ну я думаю, что это вы уже поняли.
  5. Теперь после каждой строчки нужно ставить <br>, иначе переноса строки у вас не случится и все будет налеплено друг за другом. Только не ставьте в последней строчке, там, где закрывается абзац. Так как после </p> происходит автоматический перенос строки с пробелом. 

Вот собственно и весь наш план действий. Осталось только посмотреть, что у нас в итоге получилось. Вроде всё правильно, и со всеми условиями технического задания мы справились. Что я забыл сделать по данному ТЗ? Напишите пожалуйста в комментариях.

Что такое теги html и как ими пользоваться для создания сайта?

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

И конечно, если вам уже не терпится освоить язык гипертекстовой разметки, то обязательно посмотрите курс "HTML5 и CSS3 с нуля до профи". Курс отличный и все прекрасно и подробно рассказано, как сверстать три разных типа сайтов. Я сейчас в данный момент сам его изучаю и вам советую. Для полных новичков есть несколько бонусных курсов по html и css.

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

С уважением, Дмитрий Костин

 

Оцените статью
Блог Дмитрия Костина
Добавить комментарий

  1. Ольга Парфенова

    Очень нужная тема. Спасибо за подробную информацию!!

    Ответить
  2. Дмитрий

    Полезная статья. Правда, я это всё почти знаю. Но, не лишне было всё ещё раз вспомнить.

    Ответить
  3. Дмитрий

    Вспомнил себя пару лет назад, когда начал изучать тему сайтостроения )) Правда так доходчиво тогда никто не объяснял, все как-то «скомкано» было и приходилось по несколько раз перечитывать.

    Ответить
Следи за нами в FaceBook.
Все новые статьи и много уникального!
Спасибо, не показывайте мне эту штуку больше!
Друг, ты хочешь уйти? Тогда подпишись на мой блог в ВК, чтобы не пропустить следующие статьи!
Дорогой друг, хотел бы ты всегда быть в курсе всех новостей блога? Тогда подпишись на блог в ВК