Меню
Спросить
< >

Урок 1. Hello world!

20 октября 2015
Урок 1. Hello world!

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

Что для этого нужно?

Для этого не нужен сторонний софт, абсолютно ничего не нужно все делается очень просто.
Создается обычный текстовый документ, который все умеют создавать, и прописываем ему название. Я назову его index.html, вы можете назвать по своему, расширение пишется через точку после названия, это всем известно. Расширение естественно .html. Сохраняем и подтверждаем, что мы хотим изменить расширение. Вот и наша первая страничка index.html, это уже является полноценным практически, без кода только, полноценная страничка сайта. Если мы ее откроем, то кроме белого листа мы конечно ни чего не увидим, но это и есть наш первый сайт! К сожалению сейчас все выглядит довольно скудно.
И что бы что-то там появилось, надо его открыть в любом текстовом редакторе. Можно использовать стандартный блокнот, но, как мне кажется, большинство верстальщиков используют Notepad++, его можно скачать и да, он бесплатный =). Так же есть и другие редакторы такие как, например Sublime Text. В общем используйте какой вашей душе угодно =).

И так с чего вообще начинается HTML-страничка?

Во-первых мы должны показать браузеру, что это страница HTML. В данный момент времени , когда пишется эта статья, актуальна версия HTML 5 и поэтому все пишется довольно просто:

  1. <!DOCTYPE html>

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

  1. <!DOCTYPE html> (в переводе на человеческий "тип документа - html")

Теперь теги

<>-это теги. Тэги это основа языка HTML. Тэг начинается со знака меньше-< и заканчивается знаком больше - >.
Внутри тега пишется его название и аттрибуты(свойства).
Например: 

Название тега

Так-же тег должен закрываться. Закрывается в зависимости от типа тега:

Открытие тега

И так любой тэг начинается именно с этого значка <.
Структура любой странички HTML практически состоит из основных тэгов, из 4-ех основных тэгов:
1-ое это тип, то что это текст HTML
2-ое тег < html></html> (начало документа html)
3-ее тег <head></head>(голова документа html)
4-ое тег <body></body>(тело документа html)

Структура html

Комментарии в HTML

Коментарий начинается с тэгов, <!--любое слово-->. Что такое комментарий? Комментарий это та часть страницы, которую браузер пропускает, она исключительно только для программистов.
И так мы сохраняем эту страницу, и обновляем. И здесь вновь ничего не изменится. Мы лишь создали документ html, мы ничего не добавили, но совсем скоро мы заполним наш первый сайт.

Тег title

Последний тэг, который мы изучим сегодня это title.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Страница HTML</title>
  5.     </head>
  6.     <body>
  7.     </body>
  8. </head>

Тэг title пишется в голове сайта внутри тега head и означает название страниц или вкладки сайта, которое мы сможем увидеть наверху над поисковой строкой браузера. Сейчас у вас скорее всего написано"index.html", поэтому для наглядности обзовем как-нибудь наш сайт.

Тег title

Сохраним и обновим, как видите здесь изменился наш title, поменялось на "страницу HTML", как мы и написали. И вот на конец-то заполним нашу первую страничку.
В тэге body мы пишем простой текст Hello world! Сохраняем обновляем и  вот наш первый текст на первой страничке.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Страница HTML</title>
  5.     </head>
  6.     <body>
  7.         Hello World!
  8.     </body>
  9. </head>

Заключение

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

Следующая статья