Coding-space.ru
menu

Создание веб-страницы

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

Создайте текстовый файл и напишите туда любой текст, затем перетащите файл в браузер - да, это так просто!

Подробнее о создании страницы мы поговорим в конце этой главы.

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

Закрывающие теги

Существуют теги которые требуют чтобы их "закрывали" - между этими тегами можно вписать нужный текст, например:

<p>
Закрывающий тег параграфа
</p>

Но не все теги требуют такого внимания, допустим тег вставки изображения не нуждается в закрытии:

<img>

Стандартные HTML-теги

Давайте же разберемся, из каких основных тегов должна состоять веб-страница.

Тег <html>

Хотя за долгие годы жизни HTML появилось много версий языка, но основные принципы остались неизвенными.

<html> тег можно сравнить с контейнером в котором находится все основное содержимое веб-страницы. Между этими тегами должны распологаться все остальные HTML-теги

<html>
...
</html>

Тег <head>

После открытия тега html располагается тег head. Это заголовок документа, который требует открывающего и закрывающего тегов.

В заголовок помещаются все элементы, которые не видны на странице - теги подключения стилей CSS и прочие.
Элементы блока head мы рассмотрим чуть позже.

<html>
<head>
...
</head>
</html>

Тег <body>

После тега заголовка head следует тег тела body. Тег body содержит все элементы,

Тег body содержит элементы, отвечающие за содержание страницы, структурное и визуальное. В частности этот текст, который Вы читаете находится в теге <body>...</body>

Итак, тег body:

<html>
<head>
</head>
<body>
...
</body>
</html>
Теги описанные выше не стоит "зубрить" - ведь они будут встречаться в каждом проекте и эта структура неизменна. Вам лишь следует понимать за что они отвечают.

Редакторы для разработки

Выбор среды разработки не такая уж и ненужная часть, ведь некоторые среды могут значительно ускорить разработку за счет плагинов

Как уже говорилось ранее, Вы можете использовать хоть блокнот для написания HTML документов. Но данный способ не удобный и существует множество редакторов для комфортного написания кода

Какой редактор выбирать - Ваше дело. Вы можете выбрать один из списка:
1. Visual Studio Code
2. Notepad++
3. Sublime Text 3
... и т.д.

Создание первой веб-страницы

После выбора редактора мы можем сделать страницу, используя уже имеющиеся знания!

Итак, давайте создадим файл с расширением .html - назовем его first.html и откроем в нашем редакторе.
Мы уже знаем какие теги обязательно должны быть в нашем документе. Давайте же впишем их:

<html>
<head>
</head>
<body>
</body>
</html>
Вы можете сохранить эту заготовку и использовать её во всех документах.
Но, некоторые редакторы позволяют получать данную заготовку намного быстрее, используя плагины. Например, плагин - Emmet

Хорошо, давайте наполним наш документ содержимым. Запишем между тегами body какой-нибудь текст

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

Теперь главное не забыть сохранить файл используйте меню редактора или сочетание клавиш Ctrl + S

После сохранения достаточно просто перенести в браузер файл чтобы увидеть наше творение.

first page
HTML файлы могут иметь расшиение .html или .htm.

Тег <title>

Данный тег очень полезен и будет использоваться в каждом документе. Основная его задача - "задать название вкладки", другими словами Вы можете, открыв данный тег, прописать название страницы.
Тег <title> прописывается между тегами <head>...</head>

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Первая страница!!
</body>
</html>
title tag
title очень полезный тег, он не только задает название странице, но еще служит описанием и используется поисковыми системами.

Задачи:

Можно ли писать HTML код в блокноте?

Да, но существуют гораздо удобнее редакторы для написания кода

Какое расширение должно быть у HTML файлов?

1) .exe
2) .txt
3) .html
4) .mp4

.html или .htm

Помогайте другим!

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