Основы работы с HTML

Документы HTML являются обычными текстовыми файлами, содержащими специальные теги (или управляющие элементы) разметки. Теги разметки указывают браузеру Web (программе пользователя для отображения web-страниц, например, Internet Explorer, Mozilla, Netscape или Opera), как надо вывести страницу.
Файлы HTML обычно имеют расширения htm или html. Их можно создавать при помощи любого текстового редактора.

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

Мой первый сайт
Разбор примера
Элементы HTML
Коротко о тегах
Коротко об элементах HTML

Атрибуты тегов
Параграфы.
Заголовки.
Переносы строк.
Горизонтальная линейка

Форматирование текста
Для выделения текста используются теги strong и em, данные теги являются контейнерами и требуют закрывающегося тега. Тег strong сообщает браузеру, что на заключенном в нем тексте необходимо сделать сильное ударение. Обычно визуальные браузеры отображают содержимое данного тега полужирным шрифтом, но это может быть легко изменено с помощью таблицы стилей. Так как данный тег является структурным, он несет смысловую нагрузку, в отличие от тега b, который лишь форматирует текст полужирным, то его использование предпочтительней.

Форматирование текста
Форматирование текста - 2
Форматирование текста - 3
Форматирование символов

Форматирование символов - 2
Исходный код HTML-документа
Символьные элементы
Неразрывный пробел

Создание гиперссылок
Этот пример показывает, как создавать ссылки в документе HTML. html body p a href="page1.htm" Этот текст/a является ссылкой на страницу на этом Web-сайте. /p p a href="http:" Этот текст /a является ссылкой на страницу во Всемирной Паутине. /p /body /html Пример выполнения данного HTML-кода

Создание гиперссылок
Изображение в качестве ссылки
Описание тега гипертекстовой ссылки
Описание тега гипертекстовой ссылки - 2
Открытие ссылки в новом окне браузера

Ссылка в определенное место на той же странице
Создание ссылки mailto
Фреймы HTML
Набор вертикальных фреймов
Набор горизонтальных фреймов

Таблица без рамки
Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел nbsp; Такие элементы как thead,tbody и tfoot используются редко в связи с тем, что не все браузеры их поддерживают.

Таблица без рамки
Заголовки в таблице
Пустые ячейки
Заглавие таблицы
Ячейки таблицы - более одной строки/столбца

Теги внутри таблицы
Отступ от рамки до содержимого ячейки
Расстояние между ячейками
Использование в таблице фонового цвета
Фоновый цвет или фоновое изображение в ячейке

Неупорядоченные списки
Неупорядоченный список является списком элементов. Элементы списка маркируются с помощью специальных знаков (обычно небольшой черный круг). Неупорядоченный список начинается с тега ul. Каждый элемент списка начинается с тега li.

Неупорядоченные списки
Упорядоченные списки
Списки определений
Различные типы упорядоченных списков
Различные типы неупорядоченных списков

Вложенный список
Список определений
Теги списков
Пример
Вложенный список:

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

Отправка e-mail из формы
Формы
Поля ввода
Текстовые поля
Поле пароля

Переключатели
Флажки
Командные кнопки
Поле выбора файла
Списки выбора

Вставка изображений
Изначально HTML поддерживал работу с двумя графическими форматами: GIF и JPEG, в последнее время все большее распространения находит формат PNG. Каждый из форматов имеет свои достоинства и недостатки, которые определяют область его применения.

Вставка изображений из различных мест
Графические форматы
GIF – Graphics Interchange Format
JPEG – Joint Photographic Experts Group
PNG – Portable Network Graphics

Размещение изображений
Выравнивание изображений
Обрамление изображения
Изменение размера изображения
Изменение размера изображения - 2

Фон
Атрибуты bgcolor, background, и text в теге body не рекомендуется использовать в последних версиях HTML (HTML 4 и XHTML). Консорциум World Wide Web (W3C) исключил эти атрибуты из своих рекомендаций. Вместо этого должны использоваться таблицы стилей (CSS) (для определения свойств компоновки и вывода элементов HTML). Используя таблицы стилей можно более гибко управлять настройками фона.

Фон
Bgcolor
Background
Полезные рекомендации
Дополнительные примеры

Цвета в HTML
Значения цветов
Имена цветов
Безопасные цвета Web
Межплатформенных цветов

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

Компоновка HTML - использование таблиц - 2
Использование шрифтов в HTML
Использование шрифтов в HTML - 2
Использование шрифтов в HTML - 3
Использование стилей в HTML

Как использовать стили
Внешняя таблица стилей
Внутренняя таблица стилей
Встроенные стили
Раздел заголовка HTML

Структура документа HTML
html head titleЗдесь находится название документа/title /head body Здесь находится выводимый текст /body

Элементы заголовка
Элементы текста
Логические стили
Физические стили
Ссылки, анкеры, и элементы изображений

Неупорядоченный список
Упорядоченный список
Список определений
Таблицы
Фреймы

Кодировка URL от %00 до %8f

Кодировка URL от %00 до %8f
Кодировка URL от %90 до %ff

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

Как опубликовать свою работу?
Первый шаг: Персональный Web-сервер
Как установить персональный Web-сервер (PWS):
Информационный сервер Интернет (IIS)
Следующий шаг: Профессиональный Web-сервер

В алфавитном порядке
NN: указывает самую раннюю версию Netscape, которая поддерживает этот тегIE: указывает самую раннюю версию Internet Explorer, которая поддерживает этот тегDTD: указывает в каком DTD XHTML 1.0 разрешен этот тег. S=Strict, T=Transitional и F=Frameset

В алфавитном порядке
По функциональным группам

Справочник по 7-битным кодам ASCII в HTML
Справочник по символьным объектам HTML 4.01

JavaScript

Существуют броузеры, не поддерживающие некоторых возможностей JavaScript. Поэтому, чтобы не возникало ситуаций, когда броузер пользователя не видит чего-либо в вашем документе, можно использовать свойства объекта Navigator: appName и appVersion, которые определяют имя и версию броузера. В зависимости от версии броузера можно осуществлять вызов того или иного документа.
Например, на платформах с 16-разрядной Windows обращение к функции eval() приводит к краху Netscape Navigator 2.0. Поэтому, если мы посмотрим , где используется эта функция, то в нем как раз анализируется имя и версия броузера.

Изменение фона документа
Первый пример - это часы, отображающие время загрузки страницы (т.е. момент вызова скрипта). Используются методы объекта Date (getHours, getMinutes) и графические файлы, отображающие полученное время (имена этих файлов соответствуют цифрам - 0-9).

Графические часы
Идущие часики
Изменение фона документа.
Дата последнего изменения документа.
Изменение картинки

История посещений.
Информация о документе.
Бегущая строка
Вывод окна сообщений.
Органайзер

Метод getTimezoneOffset
Возвращает смещение временной зоны в минутах относительно гринвичского меридиана.

Метод indexOf
Синтаксис:
Описание:
Функция isNaN
Синтаксис:

Описание:
Метод italics
Синтаксис:
Описание:
Метод lastIndexOf

Объект password
Изменен в Navigator 3.0. Текстовое поле в HTML форме, значение которого на экране отображается звездочками (*). Когда пользователь вводит текст в это поле, звездочки (*) скрывают введенное значение.

Объект password
Синтаксис:
Описание:
Свойства:
Объект radio

Синтаксис:
Описание:
Свойства:
Объект reset
Синтаксис:

Криптография - перейти
Математика и финансы - перейти
Основы MatLab - перейти
Иностранные языки - перейти
Английский для дилинга - перейти
Англо –русский биржевой словарь - перейти
Психология - перейти
Советы психологов - перейти
Минимальная конфигурация для Win 2000 - перейти
Запуск систем Windows 2000 - перейти
Поддержка Plug and Play - перейти
Пользовательский интерфейс - перейти
Панель управления в Windows 2000 - перейти
Общие концепции консоли управления - перейти
Общие сведения о файловых системах - перейти

Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий