HTML5 для начинающих: index.html и запуск сайта

Создание проекта и файла index.html

Создайте папку для проекта (например, на рабочем столе). Назовите её как угодно, например, «3w». Откройте папку в текстовом редакторе (перетащите папку в редактор). Щёлкните правой кнопкой мыши внутри папки и выберите «Создать файл». Создайте новый файл с именем index.html. Основной файл сайта всегда называется index.html, так как расширение .html указывает на использование языка разметки HTML.

Структура HTML-файла

Внутри index.html записываются теги – объекты, заключённые в угловые скобки. Например: <name>. Это открывающий тег. Практически все HTML-теги, кроме некоторых (которые мы рассмотрим позже), имеют открывающий и закрывающий теги. Закрывающий тег содержит слеш: </name>. Всё, что находится между открывающим и закрывающим тегами, будет содержаться внутри этого тега.

Основная структура HTML-документа:

  • <html>: Основной тег, содержащий все остальные элементы.
  • <head>: Тег заголовка. Содержит метаданные о странице (не отображаются пользователю, но важны для поисковых систем).
  • <body>: Тег, содержащий всё, что будет отображаться пользователю.
<html>
  <head>
    </head>
  <body>
    Привет
  </body>
</html>

Сохраните файл (Ctrl+S или Cmd+S). После открытия index.html в браузере вы увидите слово «Привет» – то, что мы написали в теге <body>.

Тег <title> и кодировка

Внутри <head> используется тег <title>, который задаёт заголовок страницы, отображаемый на вкладке браузера.

<html>
  <head>
    <title>Главная страница</title>
  </head>
  <body>
    Привет
  </body>
</html>

Для корректного отображения кириллицы необходимо установить кодировку. Это делается внутри <head> с помощью мета-тега <meta>:

<meta charset="utf-8">

utf-8 – кодировка, поддерживающая кириллицу и латиницу. <meta> – это одиночный тег, не требующий закрывающего тега.

Указание версии HTML

Для указания версии HTML используется <!DOCTYPE html>. Это объявление упростилось в HTML5.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Главная страница</title>
  </head>
  <body>
    Привет
  </body>
</html>

Мы создали базовую структуру HTML-документа: <!DOCTYPE html>, <html>, <head> (с <title> и <meta>), <body>. В последующих уроках мы будем изучать другие HTML-теги и создавать более сложные веб-страницы. Главное – понять общую структуру и принцип использования тегов.

Что будем искать? Например,программа