Приветствую тебя, мой дорогой читатель! Решил я разнообразить свой блог, начав писать про разработку веб-сайтов. По данной теме будет целый курс уроков по разработке сайтов. В данном же уроке мы будем рассматривать HTML и создадим первую HTML страницу, ну что же, приступим к созданию!
Для начала стоит определиться с текстовым редактором. На первое время хватит простого блокнота, но в будущем мы будем использовать программу Sublime Text 3. Не буду в данной статье описывать ее преимущества, в следующей статье напишу про среды разработки для веб-сайтов. Чуть не забыл, как же без браузера? Нам понадобиться любой интернет-браузер. Например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla, Google Chrome, Opera, Yandex и Mail браузеры и тд.
Приступим к созданию страницы HTML
1) Создаём на рабочем столе папку html. Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.
2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad) и назовем файл index.html .
3) Открываем данный файл через NotePad
4) Вставляем в наш файл Весь код (вместе с комментариями), указанный ниже:
HTML
<!-- это комментарии. их не видно при отображении файла в браузере-->
<html> <!-- тег html обозначает открытие файла html-->
<head> <!-- head обозначает открытие головной части документа-->
<!-- title обозначает название документа. Отображается вверху браузера -->
<title>
Название Вашей первой странички
</title> <!-- закрываем тег title иначе у нас всё последующее будет считаться заголовком-->
</head> <!-- тег head также нужно закрыть-->
<body> <!-- наконец открываем тело нашего документа. Здесь будет всё его содержание-->
<!--начиная отсюда вставляем любые текст, заголовки, ссылки и тп-->
<h1>Заголовок моей странички</h1> <!--h1 служит для обозначения заголовка.
Есть ещё h2, h3 и так до h6. самого маленького заголовка-->
<p>Это моя первая web-страничка!</p>
</body> <!--тело также следует закрыть, после него уже не вставляем текст и тп-->
</html> <!-- закрывающий тег html обозначает закрытие файла html-->
Разберем поподробнее исходный код:
Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.
Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете.
Тег body обозначает Тело страницы. То, что вписать после открывающего и закрывающего тегов body и будет Содержимым Вашей страницы.
4) Далее жмем "Сохранить как" и выбираем в качестве директории (папки), куда сохранить, нашу html страницу.
Напомню, что файлы сайта должны быть в формате HTML! Нажимаем "Сохранить". Готово!
5) Теперь открываем файл. Можете выбрать любой другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - "Открыть с помощью" и выбираем какой-нибудь браузер из списка, например, Google Chrome.
В итоге, открыв Интернет-Браузером получившийся index.html, Вы должны увидеть страничку такого вида:
Заключение
Ну что же, с данного момента вы теперь научились создавать простую html страницу, поздравляю! Спасибо, что дочитали статью до конца. Подпишитесь на мой канал, чтобы не пропустить новые статьи, а так же поставьте лайк и напишите комментарий к данной статье!