Создаем свою первую html страницу.

Здравствуйте, уважаемые читатели! Мы продолжаем изучение языка гипертекстовой разметки  HTML. И в сегодняшнем уроке я вам подробно расскажу о том, как создать html страницу (файл) и как выглядит простейшая структура html документа. Прочитав данную статью до конца, и выполнив все изложенные здесь инструкции, вы научитесь создавать простые html документы,  которые вы сможете  легко просматривать в своем браузере.

Так как мы только начинаем разбираться во всех тонкостях языка html  я постараюсь  максимально подробно описывать все шаги создания первого html документа, чтобы у вас в процессе не возникло никаких вопросов и проблем.

Как создать HTML страницу. Подробная инструкция!!!

Итак, для начала я рекомендую  где-то у себя на компьютере создать отдельную папку, в которую вы будете сохранять все свои html документы. Таким образом, вы не будете засорять свой компьютер  лишними файлами,  и  будете четко знать, где именно лежат все ваши html документы. К тому же в этом случаи, если вы что-то забудете, вы сможете быстро отыскать нужный вам файл и вспомнить затиравшуюся в вашем мозгу информацию.

Поэтому смело кликаем правой кнопкой мыши по свободной области рабочего пространства и в появившемся окне выбираем пункт «Создать», а деле указываем, что именно мы хотим создать, в нашем случаи это папка. После этого указываем имя папки, лично я назвал папку «Lessons».

create-direction

Итак, папочку, в которую мы будем складывать наши html документы, мы создали, а теперь давайте приступим непосредственно к созданию  самой html страницы. Для этого нам понадобиться  текстовый редактор, так как мы только начинаем разбираться во всех премудростях сайтостроения  мы не будем использовать какие-то специализированные редакторы, для написания html кода, а воспользуемся самым стандартным блокнотом, который есть на любом компьютере с операционной системой Windows. Это поможет вам понять очень важную истину, которая говорит о том, что не важно, в каком редакторе вы создаете html страницы, главное, чтобы эти страницы были созданы правильно. Конечно же, в будущем я вам расскажу о тех редакторах, которые стоит использовать в своей работе, но на данном этапе можно воспользоваться и обычным блокнотом.

Соответственно переходим в меню «Пуск»=> «Все программы» => «Стандартные» => «Блокнот», и открываем стандартный текстовый редактор. Открыли? Отлично!!!
Теперь в редактор  вам необходимо скопировать вот этот вот код:

<html>
<head>
     <title>Моя первая html страница</title>
</head>
<body>
<p>Здесь находится основанное содержимое html документа</p>
</body>
</html>

О том, что означают все эти символы, мы поговорим  чуть ниже,  сейчас главное понять как именно создаются  html файлы, а не их содержимое.

Итак, вышеуказанный код мы вставили:

struct

Теперь сохраняем наш документ. Для этого в верхнем меню редактора выберите пункт «Файл» => «Сохранить как…».

save-html-file
Перед вами появится окошко, в котором вам необходимо указать директорию, куда  вы хотите сохранить html страницу, соответственно выбираем  папку, которую была  создали в начали урока, в моем случаи это папку «Lessons» и  нажимаем кнопку открыть.

open-dir

Далее в поле «Имя файла» укажите название для файла (здесь можно указать любое имя) и обязательно укажите расширение данного файла — .html. К примеру, я назвал файл create.html, вот так вот это выглядит:

name-file

Расширения html необходимо указывать в обязательно порядке иначе файл сохранится в виде обычного текстового файла (с расширением  .txt) и   при клике на него он будет открываться не браузером, а текстовым редактором, надеюсь это ясно. После этого жмем кнопку «Сохранить». Если вы все сделали правильно, то у вас в папке «Lessons» появится приблизительно такой файл:

yarlik

Кстати,  данный файл может показываться несколько в другом виде, здесь все зависит от того какой именно браузер у вас  установлен  по умолчанию. Так как у меня на компьютере браузером по умолчанию определен браузер Mozilla Firefox сохраненный мною файл имеет ярлык от  Mozilla. У вас же может быть определен другой браузер, соответственно, сохраненный вами  файл будет представляться в другом виде.

Теперь давайте откроем нашу первую html страницу и посмотрим, что у нас получилось. Для этого кликаем по файлу  два раза левой кнопкой мыши и смотрим.

ressult

Как видите, все показывается хорошо, браузер открывает наш html документ,  мы видим тестовый текст, который был помещен в тэг <p>, все работает нормально.  УРАААА!!! Вот мы и создали нашу первую html страницу!

А теперь давайте вернемся к содержимому html документа и разберем все элементы, которые в него входят. В своем предыдущем уроке я вскользь упоминал о том, что язык HTML состоит из специальных строго регламентированных условных команд, которые называются тэгами. Именно данные  команды (тэги) и говорят браузеру, как отображать тот или иной текст.  К примеру, если мы хотим сделать какой-то текст курсивом, мы   нужный нам текст обрамляем тегом <em>, выглядит это так:

<em>какой-то текст, который будет отображаться курсивам</em>

То есть формируется некий контейнер, внутри которого находится текст, данная конструкция говорит браузеру о том, что текст внутри тэга <em> необходимо показать курсивом. С использованием такого рода тэгов и выполняется формирование HTML страницы и соответственно форматирование текста.

Так вот, код, который вы вставляли в текстовый редактор, является неким каркасом HTML страницы, который формируется  с использованием специальных тегов. Давайте вкратце  поговорим про данные тэги.

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

Далее у нас идет тег HEAD, данный тэг является условным блоков в котором содержится вся служебная информация, т.е та информация, которая не отображается в основном содержимом страницы, а предназначается для браузера. Внутри тэга HEAD находится тэг TITLE, который как вы уже наверняка догадались, служит  для указания названия html страницы. Все что вы напишите внутри данного тэга,  будет отображаться во вкладке браузера.

title

Далее идет тэг BODY, в котором и находится всё содержимое нашего документа. Именно здесь указывается вся информация, которую мы хотим видеть в  окне браузера. Данный тэг, как и все остальные, является парным, и он закрывается перед закрывающим тегом HTML (</html>).

Это основные  (но отнюдь не все) тэги, которые определяют структуру документа, обо всех остальных элементах формирующих структуру html страницы я вам расскажу в следующем уроке, поэтому предлагаю подписаться на обновления, чтобы не пропустить его выхода.

Итак, а теперь давайте,  под резюмируем все вышесказанное, чтобы еще раз все закрепить в памяти. В данном уроке мы рассмотрели, каким образом создаются html документы, мы выяснили, что для этого необходимо всего лишь в любом текстовом редакторе записать специальную структуру html документа, которая выглядит таким вот образом:

<html>
<head>
     <title>Моя первая html страница</title>
</head>
<body>
<p>Здесь находится основанное содержимое html документа</p>
</body>
</html>

После чего нужно сохранить данный файл с указанием расширения .html, чтобы его отрывали именно браузеры, а не другие программы. Мы выяснили, что данная структура формируется с использованием специальных тегов, которые в свою очередь формируют некие условные блоки, с которых и строится каркас документа.

Вот вроде бы и все что мне хотелось сегодня вам рассказать, теперь вы знаете, как создать html страницу (файл), и какую структуру имеют простейшие html документы,  надеюсь, данная статься была для вас полезной и интересной. До новых встреч!!!