В данной статье мы рассмотрим основы HTML. Как вы уже знаете, большинство страниц в интернет представлены в виде html документов. От текстового документа он отличается тем что, html документ содержит определенные теги, которые и определяют, каким образом будет выглядеть текст и графика на странице, а также имеет соответствующее расширение файла.
Для того чтобы браузер понял что данная страница состоит из тегов и предназначена для него необходимо чтобы она имела определенное расширение. Html документы, имеют расширения .html или .htm. Такое расширение имеют большинство страниц в интернет.
Сейчас мы создадим простую веб страницу. Создать html документ, т. е. файл с расширением .html проще простого. Я предлагаю вам создать для этого специальную папку, куда вы будете складывать все то, что мы будем рассматривать в уроках.
Пока в целях изучения языка HTML мы не будем использовать для создания страниц специальные программы, такие например как широко известный Dreamweaver. Наша цель на данном этапе изучить основы html.
Для создания страниц мы воспользуемся стандартным текстовым редактором, который есть в любой версии Windows. Из своей практики я знаю, что данный способ наиболее продуктивен и понятен, для человека который только начал изучение HTML.
В дальнейшем же для создания сайта, лучше всего использовать какой либо HTML редактор, это упростит вам работу. Лично я предпочитаю пользоваться редактором Dreamweaver.
А пока воспользуемся текстовым редактором блокнот. Поэтому идем в пункт меню "Пуск" >> "Все программы" >> "Стандартные" - и запускаем текстовый редактор блокнот.
Теперь скопируйте и вставьте в окно блокнота код, который написан ниже:
Code
<html>
<head>
<title>Моя первая страница</title>
</head>
<body>Вот вы и создали свою первую web страницу!!!</body>
</html>
Вставили? А теперь выберите в блокноте пункт меню "Файл" и в раскрывающемся списке пункт “Сохранить как…”, откроется окно сохранения файла. Здесь нас будет интересовать поле Имя файла. Сюда вам нужно вписать имя нашего файла, например Моя первая страница, а вместо расширения .txt расширение .html.
Помните о том, что для размещения страниц в интернет названия им дают на английском языке, здесь мы дали название на русском просто в качестве примера. Смотрите на рисунок.
Затем выберите, ту папку, которую вы создали ранее, или любую другую папку на вашем компьютере и сохраните этот файл туда. Сам текстовый документ не закрывайте, мы еще будем с ним работать.
В результате того что Вы вписали код и изменили расширение с .txt на .html мы «превратили» текстовый документ в html документ. Теперь зайдите в ту папку, куда вы сохранили этот файл и откройте его вашим браузером. В результате вы увидите текст: Вот вы и создали свою первую web страницу!!!
После этого перейдите назад в наш блокнот, не закрывая окно браузера, и попробуйте поменять текст «Вот вы и создали свою первую web страницу!!!», на какой ни будь свой. Затем пройдите в пункт меню “Файл” >> “Сохранить” и перейдите в открытое окно браузера с этой страничкой, где щелкните по кнопке обновить страницу или нажмите сочетание клавиш Ctrl + R, страница обновится и браузер отобразит уже ваш текст.
Так делайте всегда, когда вы что-то изменили в самом коде в текстовом редакторе блокнот, и хотите посмотреть, как это будет отображать ваш браузер.
Теперь разберемся, что за теги мы прописали в нашем документе. На самом деле это самые главные теги html документа и они должны быть в каждом HTML документе.
Разберем их по порядку <html> </html> этот открывающий и закрывающий теги дают начало и заканчивают html документ, кроме того они дают понять браузеру что этот файл необходимо рассматривать как html документ.
Тэги <head> </head> служат своего рода головой html документа, внутри этих тэгов размещаются другие тэги, которые содержат определенную служебную информацию. О данных тегах мы поговорим в других уроках.
В данном случае они содержат теги, <title> </title> в этих тегах размещается название страницы, его вы можете наблюдать в самом верху окна браузера, в нашем примере там будет название «Моя первая страница». И последние теги из нашего кода это <body></body> между этими тегами размещается непосредственно все содержимое страницы, весь текст, графика, таблицы и т. д.
В данном уроке мы рассмотрели теги которые являются обязательными для любого html документа. В следующих html уроках рассмотрим, остальные теги и узнаем, за что отвечает каждый тег в отдельности и какие атрибуты присущи тому или иному тегу.
