Создание проекта и файла 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-теги и создавать более сложные веб-страницы. Главное – понять общую структуру и принцип использования тегов.