Каждый начинающий вебмастер должен знать, как создать html страницу , а делается это очень легко и просто. Я могу вам уверенно сказать что после того как прочитаете эту статью, Вы будете создавать html страницы без никаких трудностей.
Вы можете написать html код в любом текстовом редакторе (даже в блокноте) но, я вам рекомендую для начало воспользоваться таким замечательным редактором как notepad++ . Он очень удобный и простой в использований. Вы можете скачать его на официальном сайте https://notepad-plus-plus.org .
Основной плюс у этого редактора в том, что есть подсветка кода. Поверьте это очень удобно, т.к. сразу заметно, где открывается тег и где он закрывается.
Открываем программу и как вы заметили новый файл с именем new 1 , создался автоматически.
Этапы создания html страницы
Теперь из нового файла создаем html документ
следующим образом:
1. Идем в меню файл и выбираем пункт сохранить как…
или нажимаем горячие клавиши (Ctrl+Alt+S
)
2. В появившемся окне выбираем место, где хотим сохранить файл.
3. В поле имя файла пишем index и выбираем тип файла Hyper Text Markup Language file (*html; *htm; *shtml; *shtm; *xhtml;*hta) .
После того как выбран тип файла, в конце имени файла автоматически вставляется
Закрываем Notepad++ и едем в указанной папке, где сохранили файл. Там создался файл index, с расширением html и со значком браузера который установлен у вас по умолчанию. При двойном щелчке, файл открывается в вашем браузере. У меня браузер по умолчанию выбран опера, поэтому сохраненный файл выглядит так:
После того как открыли файл в браузере мы ничего не видим так как наш файл пустой, в нем нету ни одной строчки кода html. Давайте исправим ситуацию, напишем в файле пару строчек кода. Для этого идем в папку с нашим файлом, кликаем на него правым кликом мыши и в появившемся меню выбираем пункт .
Файл откроется в редакторе Notepad++. Теперь напишем в файле следующий код:
Привет Мир
Также есть еще один способ для сохранения файла, нужно нажать на значок дискеты который находится на панеле инструментов.
Думаете, как создать HTML-страницу? Для этого нужно потратить несколько часов, и вы будете знать А создать свою первую страницу сможете за 5 минут.
HTML расшифровывается как HyperText Markup Language. В переводе это означает "язык гипертекстовой разметки". Важно понимать, что HTML - это не язык программирования, а именно разметки сайта.
Все современные браузеры умеют распознавать его. Затем они отображают информацию в удобном виде для пользователя, как заранее было задумано автором.
В этом языке используются специальные теги. Каждый тег выполняет свою функцию. Их очень много. В идеале нужно выучить все. Но для начинающего базовых знаний вполне достаточно.
Основы HTML
Перед тем как создать HTML-страницу, нужно знать, из чего она состоит. В этом языке есть два понятия: элемент и тег.
Для того чтобы указать, где этот элемент начинается и закрывается, используются открывающий и закрывающий тег. Выглядит это так.
<открывающий тег>содержимоезакрывающий тег>
Как видите, открывающий и закрывающий тег отличаются только "/".
Весь HTML-документ представляет собой набор этих элементов. Существуют определенные требования к структуре документа. Всё содержимое страницы должно находиться между двумя тегами и . Когда вы будете писать код, возьмите себе за привычку сразу проставлять открывающийся и закрывающийся тег.
Также запомните, что структура языка HTML имеет свою иерархию. Иначе она называется вложенность. является самым главным, поскольку все остальные находятся внутри его.
У HTML есть два дочерних элемента:
- ... ;
- .. .
В блоке HEAD указывается различная служебная информация. Эта информация в браузер не выводится. Например, указания для разработчиков, для любых программ, для роботов и многое другое.
Самое главное - здесь нет контента.
В разделе BODY указывается содержание документа, которое будет отображено пользователю.
Учитесь сразу делать открытые и закрытые теги, поскольку может быть и по 10 вложенных элементов. Кроме этого, для удобства рекомендуется вложенные теги делать с отступом. Например, вот так.
Так делают, чтобы равные по значимости теги были на одном уровне, а дочерние - "внутри". Так намного удобнее для восприятия и поиска нужного куска кода. Иначе можно запутаться. Но для экономия места именно и body можно делать без отступов. Так поступают, чтобы у всех остальных не было лишнего отступа. Всё остальное желательно отделять.
Как создать простую страницу на HTML
Для написания кода вам нужен какой-нибудь редактор. Их очень много. Популярными являются Notepad++ и Adobe Dreamweaver. Также можно использовать и блокнот.
Вот так выглядит редактор Notepad++.
Это очень удобный редактор и при этом бесплатный. Вышеуказанный Adobe Dreamweaver является платным. Отличие редакторов, предназначенных для написания от блокнота - в том, что специальные теги подсвечиваются. Если он не подсветился, значит, вы написали неправильно.
Для того чтобы подсветка соответствовала языку, ее нужно указать в настройках.
Давайте рассмотрим, как создать страницу HTML в блокноте. То есть закончим техническую часть и потом непосредственно перейдем к изучению тегов.
Как создать веб-страницу в блокноте HTML
Для начала откройте блокнот.
Затем наберите в нем то, что указано на следующем скриншоте.
Привыкайте писать руками, а не просто копировать. Когда вы пишите руками, вы лучше запоминаете всю базу тегов.
После этого файл можно открывать в браузере и любоваться результатом. Теперь вам должно быть понятно, как создать веб-страницу в блокноте HTML.
Всемирный консорциум W3C
Существует такая организация, как W3С, которая разрабатывает и внедряет все стандарты для интернета. Все браузеры подчиняются этим стандартам и обрабатывают разметки (коды) страниц согласно этим правилам.
На официальном сайте разработчиков языка HTML можно найти таблицу со всеми тегами и правилами их использования. В рамках данной статьи мы рассматриваем самые основные.
Вы можете подумать, какие могут быть правила? Все описанные теги имеют свою рекомендацию. Их несколько:
- Необязательный тег.
- Запретный.
- Пустой тег.
- Устаревший
- Утерянный.
Теги в HTML
Перед тем как создать HTML-страницу, нужно разобраться с тем, что должно быть в служебной части HEAD.
В области HEAD есть как обязательные, так и необязательные теги. К обязательному тегу относится заголовок. Он обозначается
Перейдем к разделу BODY. Существуют элементы, которые отображаются в браузере, а есть и неотображаемые. Например, комментарии не отображаются пользователю. Их можно использовать для заметок или же для подсказки другим сотрудникам, если вы работаете в команде.
Обозначается они как
Всё, что находится между , расценивается программой именно так. Обратите внимание, что нельзя вложить тег-комментарий в другой тег-комментарий. Поскольку как только вы откроете .
Пример такой вложенности:
продолжение первого комментария -->
Результатом в браузере будет следующее
продолжение первого комментария -->
А вот кусок не будет виден. Второй открывающийся тег