Урок 2. Первая страница на HTML

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

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

<!—голова-->
<head> 
</head>
<!—тело-->
<body> 
</body>

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

Переходим, наконец-то, к практике! Создаем новый текстовый файл, называем его index.html (название может быть любое, главное чтобы в конце было правильное расширение файла .html) и собираем воедино все что узнали за последние 5 минут. Получаем страницу, которая будет шаблоном для всех ваших последующих экспериментов! 

<html>

<head></head>

<body></body>

</html>

Поздравляю! Вы только что написали свою первую простую, пусть бесполезную, но все-таки страницу! Она будет началом вашего будущего сайта. На самом деле осталось только наполнить ее текстом и все! Я же обещал что в HTML все просто и быстро, а вы не верили.

Но, сперва давайте добавим немного текста в наш шаблон.
В голове, то есть в теге head содержится тайтл, то есть заголовок нашей страницы, ее название. Задать его следует тегом title. А в теле документа мы пропишем текст, любой какой захотим.
Сверьтесь с моим кодом ниже, чтобы проверить, все ли понятно:

<html>

<head>
<title>Заголовок страницы</title>
</head>

<body>
Текст на моей странице.
</body>

</html>

Сохраняем, открываем в браузере и уже видим первые ощутимые результаты нашего недолгого знакомства с HTML. Есть страница, которая имеет заголовок и текст. Следующим шагом будет добавление больших блоков текста, их форматирование, затем мы с вами создадим меню для навигации по сайту и сделаем еще много всяких интересных штук, оставайтесь с нами, а лучше сразу переходите к следующему уроку не откладывая!

← Урок 1. HTML теги | Содержание | Урок 3. Наполняем страницу текстом →

Комментарии:

  1. Мистер Котлета — 23.11.2013 20:08

    Дмитрий Рощин
    Cмотря на то,что вы хотите получить в итоге.
  2. Оля — 21.05.2014 22:20

    Спасибо большое за понятные уроки! У меня почему-то не отображается текст после title, хотя вроде все тэги расставлены… Сраничка начинается сразу с текста, который после body, причём он выглядит как заголовок. В чем моя ошибка?
  3. Оля — 21.05.2014 23:06

    Простите, до меня дошло, что тайтл отображается не на страничке, а наверху на полоске и в названии вкладки. Получается, чтобы текст тайтла был и на страничке тоже,нужно ещё раз написать его уже после боди и h1, так? Извините, если пишу непонятно) Заранее спасибо.
  4. myblaze — 04.06.2014 07:48

    Да, все верно, нужно еще раз написать в body, если хотите, чтобы он был на странице :)
  5. галим — 17.11.2014 20:40

    что бы не открывал в браузере-получается абракадабра.
    что не так ?
  6. myblaze — 17.11.2014 20:54

    кодировка файла должна быть UTF-8, в header’e страницы charset должен быть UTF-8 и в браузере в настройках страницы должно быть тоже самое.
  7. инна — 07.11.2016 18:27

    А я не поняла, написали сохранить. И что? Блокнот сохраняет как текстовый файл. Или как его нужно было сохранять??? У меня в блокноте нет функции сохранить как вебстраницу.
  8. Максик — 31.10.2017 16:46

    я не понял .В каких настройках браузера? Кодировка UTF-8 , но как открыть в браузере?
  9. Максик — 31.10.2017 16:47

    Может объясните?
  10. Максик — 31.10.2017 16:55

    И ещё один вопрос . Как долго ждать ответ?
  11. Сергей — 29.07.2018 22:32

    Проблема именно в мозиле. Когда делаешь по инструкции, то в яндексе открывается. В мозиле адрокодабра несмотря на то что стоит UTF-8. Хелп, как победить?

Добавить комментарий