Основы HTML. Язык HTML и его теги

Вы уже, наверное, знаете, что HTML это некий код, который содержит особые команды для задания внешнего вида или каких-либо элементов Web-страницы. Эти особые команды называются тегами. С их помощью можно, например, оформить фрагмент текста страницы как отдельный абзац, превратить его в заголовок, выделить курсивом или полужирным шрифтом. Язык HTML определяет набор этих тегов, назначение и их дополнительные параметры. И прежде чем начать изучать основы HTML, давайте разберемся, что нам для этого потребуется. Так как HTML это код, то его нужно где-то прописывать и для этого нам поможет самый обычный блокнот. Этот редактор является самым простым, но для первых уроков подойдет и он. В дальнейшем советую скачать Notepad++ и работать в нем. Это тот же блокнот только «прокаченный», он обладает дополнительными возможностями, которые облегчат написание HTML кода. В дальнейшем мы поговорим и о других более мощных Web-редакторах, но для изучения основ HTML нам хватит и этих двух.

Запустим Notepad++ и пропишем в нем свой первый код на языке HTML, приведенный ниже:

<html>
  <head>
    <title>Пример  простейшей Web-страницы</title>
  </head>
  <body>
    <h1>Моя  первая Web-страничка</h1>
    <p>Сегодня  я начал изучать <b>основы HTML</b>.</p>
  </body>
</html> 
              


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

Отлично! Вы создали свою первую простенькую Web-страничку. Теперь давайте вернемся обратно к нашему коду, который мы написали и разберемся с языком HTML. Найдите такой фрагмент HTML-кода:

<h1>Моя  первая Web-страничка</h1>
<p>Сегодня я начал изучать <b>основы HTML!</b></p>
			

Кроме текста здесь присутствуют какие-то непонятные слова, заключенные между символами < и >. Это как раз и есть те самые теги HTML. Они задают форматирование нашего текста. И смотрите, что получается, строка «основы HTML» будет выделена полужирным шрифтом, потому что теги <b> и </b> задают это свойство. При этом тег <b> является открывающим и помечает начало полужирного шрифта, а тег </b> является закрывающим тегом и помечает конец. Весь фрагмент текста, который заключен между этими тегами, называется содержимым тега.

Смотрим дальше, в нашем HTML-коде есть теги <h1> и <p>, а так же соответствующие им закрывающие теги </h1> и </p>. Первый тег <h1> задает заголовок текста, а второй тег <p> создает простой текстовый абзац. Давайте рассмотрим еще несколько тегов и напишем следующий код:

<html>
  <head>
    <title>Пример простейшей Web-страницы</title>
  </head>
  <body>
    <h1>Моя первая Web-страничка</h1>
    <p>Сегодня я начал изучать <strong>основы HTML!</strong> <br>
И уже выучил несколько тегов. <i>Язык HTML очень простой!</i></p>
  </body>
</html>         
            

Сохраним наш файл под тем же именем page1.html и снова откроем его в браузере. Вот что мы увидим:

Вернемся к коду. Здесь мы видим новые теги: <strong> и закрывающий тег </strong>, который задает так же полужирный шрифт, но в отличие от тега <b> выделяет важную часть текста. Тег <br> делает перевод строки. Обратите внимание, тег <br> не имеет закрывающего тега! Почти все теги имеют закрывающий тег, но есть исключения, тег <br> один из них. И посмотрим на последний тег <i>, он делает курсивное начертание текста.

Как вы убедились, в языке HTML нет ничего трудного, самое главное это выучить его теги, которые со временем вы запомните. В справочнике HTML вы можете просмотреть все существующие теги. И последнее, что осталось нам рассмотреть в данном уроке, вот этот фрагмент кода:

<html>
  <head>
    <title>Пример простейшей Web-страницы</title>
  </head>
  <body>
    ...
  </body>
</html>         
            

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

На этом закончим наш первый урок. Кто во всем разобрался, может переходить к следующему уроку. Если вам понятны не все моменты, просмотрите видео урок, расположенный ниже.