Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером,
даже если вы впервые слышите это слово



Что такое теги 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>    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Живой пример

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

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

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

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

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

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

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

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

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

 



Этот блог читают уже более 4000 человек, которые решили покончить с компьютерной неграмотностью. Присоединяйся
Комментариев 3
  • Очень нужная тема. Спасибо за подробную информацию!!

    Ольга
    10 июня 2016 в 16:11
  • Полезная статья. Правда, я это всё почти знаю. Но, не лишне было всё ещё раз вспомнить.

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

    Дмитрий
    11 июня 2016 в 13:20
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:


Блог Дмитрия Костина
© 2015-2017 Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером, даже если вы впервые слышите это слово
Политика конфиденциальности