Рубрика: 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 заключается в самостоятельном повторении описанных мной примеров и создании собственных веб-страниц. Так, что повторяй материал самостоятельно, в созданном тобой файле. Знакомство с языком, для удобства, я разделил на разделы, изучив которые, ты сможешь самостоятельно создать свою первую, полноценную веб-страницу, а в дальнейшем и свой первый качественный, и надеюсь популярный сайт.

0

Текст в HTML

В этом разделе рассмотрим теги форматирования текста в HTML. Начнем освоение с методов создания заголовков и списков, а затем перейдем...

0

html шаблон сайта

Резиновый трёхколоночный html шаблон <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″> <meta name=”autor” content=”Ф.И.О....

таблицы 0

Таблицы в HTML

Любая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто,...

0

Вставка звука и видео в html

Кроме графических изображений на web-страницы можно добавлять различные средства мультимедиа. При правильном применении они могут положительно повлиять на содержание страницы....

0

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

Содержание: Элемент META. Элемент BODY. Безопасные цвета. Тег META Элемент META – хотя его наличие в документе не обязательно, он выполняет множество...

Ссылки в HTML 0

Ссылки в HTML

Ссылки в HTML являются основой, так называемой Всемирной Паутины, они могут быть в виде текста или изображения, но в любом случае кликнув...

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

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

Для вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (...

Служебные теги HTML без параметров 0

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

Содержание: Корневой элемент HTML. Элемент HEAD. Элемент TITLE. Корневой тег HTML После объявления DOCTYPE (DOCTYPE не является тегом HTML) создание документа начинается с корневого...

Формы в HTML 0

Формы в HTML

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

Doctype html 0

Doctype html

Тот, кто ищет миллионы, весьма редко их находит, но зато тот, кто их не ищет – не находит никогда! О....

0

Таблица html-кодов цвета

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00 #FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00 #FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900 #FF66FF #FF66CC...

сайт 0

Сделать сайт бесплатно

Бесплатный сыр получает только вторая мышка… Вторая мышка Сделать сайт бесплатно можно несколькими способами, на специальных для этого сервисах или...

Полетели к ТОПу прямо сейчас!

Подпишитесь на рассылку и первыми получайте полезный контент без воды и банальностей. Иногда с котиками. =)