HTML

Иногда лучше остаться спать дома в понедельник,
чем провести всю неделю отлаживая написанный в понедельник код.
Christopher Thompson

Изучение языка HTML нужно начать с того, что необходимо понять, что это за язык. HTML — это Hyper Text Markup Language — язык гипертекстовой разметки.

HTML — компьютерный язык, а следовательно он имеет свои собственные правила (синтаксис), которые необходимо соблюдать.

HTML — это язык разметки, значит он берет определенные части документа и придает им особый вид.

HTML — это язык гипертекстовой разметки. Гипертекстом можно назвать текст в любом формате, некоторые части текста которого, могут ссылаться на другие части этого текста, что позволяет быстро переходить от одной части текста к другой.
Содержание:
 

Создаем HTML-страницу
Текст и ссылки
Изображения и мультимедиа
Формы в HTML
Таблицы
Приложения

На сегодняшний день язык HTML существенно усовершенствован. Его прекрасно дополняют технологии JavaScript, DHTML, CSS, PHP и др., что позволяет использовать новые возможности, но основой всего этого остаются все те же стандартные теги, которые и задают внешний вид web-страницы. Сейчас уже никого не удивишь таким замудреным словом, как браузер, и каждый первоклашка скорей всего знает, что это такое и для чего он предназначен. Так вот браузер, считывая информацию со страниц размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Все существующие теги заключены в угловые скобки (), это и указывает браузеру на то, что перед ним тег, который ориентирует на определенное отображение страницы, причем сами теги на экране не отображаются.

Многие теги имеют свои атрибуты (свойства, параметры), которые прописываются в теге и придают обозначенному этим тегом объекту (изображению, тексту, ссылке, слову и т.д.), определенное значение. Регистр букв в наименовании тега значения не имеет. Почти все теги являются парными, то есть существует открывающий «зону действия» тег (), и соответственно закрывающий (). Покажу это на примере:

Так выглядит HTML — код*.

 
…чтобы создать свой сайт, необходимо освоить основы HTML… Все достаточно просто! …о назначении каждого тега можно попробовать догадаться самостоятельно, проследив соответствие содержания web-страницы и ее исходного кода…
А вот так отобразит браузер.

 

…чтобы создать свой сайт,
необходимо освоить основы HTML…

Все достаточно просто!

…о назначении каждого тега можно попробовать догадаться самостоятельно,
проследив соответствие содержания web-страницы и ее исходного кода…

Как же создать HTML-документ? Проще всего это сделать в текстовом редакторе. Для начала подойдет обычный Блокнот от Windows. А когда ты освоишь основу написания HTML-кода, можно будет начать пользоваться HTML-редактором, чтобы упростить свою работу. Мы еще рассмотрим HTML-редакторы и их возможности, а пока остановимся на простом Блокноте.

На жестком диске своего компьютера создаем папку, назовем ее www, затем открываем Блокнот и создаем файл (в этой папке www) с расширением .html ( пуск — все программы — стандартные — блокнот — файл — сохранить как). Назовем его index.html, сразу предупрежу, что названия файлам нужно давать на латинице.

Что же получилось? А получилась у тебя главная страница (вернее только заготовка) будущего сайта. По ходу обучения в нее будем добавлять информацию, что в конечном итоге приведет к созданию полноценного HTML-документа. Просматривать результаты своей работы можно в браузере (Mozilla, Opera и т.д., кто чем пользуется). Ну хватит слов, ближе к делу.
Основные теги HTML
 
 
Создаем HTML-страницу
 

Идентификация документа
Служебные теги HTML без параметров

Корневой элемент HTML.
Элемент HEAD.
Элемент TITLE.

Служебные теги HTML с параметрами

Элемент META.
Элемент BODY.
Безопасные цвета.

 
Добавляем текст и связываем документ
 

Теги форматирования текста

Заголовки.
Выделяем абзац.
Задаем вид, цвет и размер шрифта.
Теги выделения текста.
Разделение текста горизонтальной линией.
Списки.

Ссылки в HTML

Внешние ссылки, атрибут HREF.
Абсолютные и относительные ссылки.
Атрибут TITLE.
Ссылки электронной почты.
Внутренние ссылки, атрибут NAME.
Атрибут TARGET.

 
Добавляем изображения и мультимедиа
 

Изображения в HTML

Атрибут SRC.
Выравнивание изображений.
Задаем отступы. Атрибуты HSPACE и VSPACE.
Задаем рамку. Атрибут BORDER.
Изображения — ссылки.
Альтернативный текст. Атрибут ALT.
Задаем размер. Атрибуты WIDTH и HEIGHT.
Заключение.

Мультимедиа

Элемент BGSOUND, добавляем звук.
Элемент OBJECT, добавляем видео.

 
Формы в HTML
 

Тег FORM — создаём форму.
Элементы форм.

Текстовое поле.
Изображения в текстовом поле.
Кнопки.
Переключатели.
Флажки.
Поле со списком.

Отправка файла.
Форма обратной связи.

 
Создание таблиц
 

Таблицы в HTML

Элемент TABLE, создаем таблицу.
Добавляем строку.
Добавляем ячейки.
Заголовки таблиц.
Объединение строк.
Объединение столбцов.
Размеры и выравнивание таблицы.
Фон таблицы.
В заключение.

 
Приложения
 

Таблица html-кодов цвета.
Простой html шаблон сайта.

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