Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

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

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

Давайте создадим папку на любом диске, например на D: назовём её Обучение. В ней создадим папку под названием www. А в папке www создадим папку для картинок, например picture. Вы спросите для чего? У нас получается как бы структура веб-сайта. Так надо.

Вот самый простой веб-документ, назовём его "Сайт про аквариумы и их содержание".

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>

<body>
Всё об аквариумных рыбках и растениях
<br>
Добро пожаловать!
</body>

</html>

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

Вот наглядная структура HTML документа:

Введение в HTML

:)

Как видите у документа есть "голова" и "тело", в "голове" размещается название сайта, оно начинается с тэга <title> и закрывается тэгом </title>.
Закрывающий тэг отличается от открывающего наличием слэша " / " впереди.

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

Теперь давайте посмотрим наш самый простой веб документ в работе. Для этого откройте Блокнот ( ПУСК - Все программы - Стандартные - Блокнот ) и скопируте туда код нашего Самого простого HTML документа.

Сохраните его в папку www ( Файл - Сохранить как ) назовите документ как index.html, не забудте, расширение должно быть .html. В пункте Тип файла выберите "Все файлы".

Для работы с кодом (HTML, CSS, PHP и т.д.), рекомендую использовать Не Блокнот, а программу NotePad++
Очень удобная программа, в ней подсвечивается весь код, и если в коде допущены ошибки, он перестаёт подсвечиваться.

Теперь откройте наш файл index.html с помощью любого браузера, например Opera или Intrnet Explorer.

Должно получится следующее:

Введение в html - первый сайт

Итак вы видите на самом вверху название страницы "Сайт про аквариумы и их содержание" (это тэг <title>)

В теле документа мы написали две строчки, обратите внимание что вторая строчка написана через одиночный тэг <br>, он обозначает что текст начинается с новой строки.

Теперь через Блокнот попробуйте изменить текст в теле документа, не забудте сохранить изменения и нажать в браузере кнопку "Обновить".

Чтобы посмотреть HTML-код зайдите на любой сайт и щёлкните правой кнопкой мыши на экране, появиться окно в котором выберите пункт "Исходный код" для Opera или "Просмотр HTML кода" для Internet Explorer, только не пугайтесь сразу, скоро вы всё поймёте.

Перейти к следующему уроку
Форматирование текста в HTML

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!