HTML в примерах



         

HTML в примерах

Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.

Категории
Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.

Что такое CSS
Практическое освоение CSS
Связывание
Внедрение
Встраивание в теги документа
Импортирование
Группирование
Наследование
Селекторы
Классы

Примеры B
Тег B и обязательный парный ему /B

b
Big
Blockquote
Body
Br
Тег BUTTON

Примеры C
Тег CENTER предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера. CENTER это тег уровня блока, поэтому им можно центрировать, например, таблицы, тексты

Cite
Code

Примеры CSS
Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам.

CSS: Границы
Примечание
Верхняя часть заголовка зеленого цвета (dotted)
CSS: цвет элемента и цвет фона
CSS: Курсоры
CSS: Курсоры - 2
CSS: свойства шрифта
Примечания
Примеры
Единицы измерения

Примеры D
Тег DD и необязательный парный ему /DD

Dd
Dfn
Dl
Dt

Примеры DHTML
Событие ONCLICK возникает при щелчке левой кнопкой мыши

Событие ONCLICK
Щелкни сюда. Пример для заголовка без скрипта
Внимание
Событие ONCOPY
Выдели часть красного текста
Внимание
Событие ONMOUSEOVER
Внимание
Событие ONSELECTSTART
Событие ONSELECTSTART - 2

Примеры E
Тег em используется для выделения, подчеркивания важных фрагментов текста курсивом (наклонный текст). Происходит от слова emphasis - акцент. Аналогичен тегу I

Примеры F
Тег FIELDSET рисует рамку вокруг текста и других объектов, содержащихся в контейнере. Закрывающий тег требуется

Тег FIELDSET
Тег font
Тег frame
Тег frame

Примеры H
Тег HEAD определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин

Hr
Html

Примеры K
Тег KBD отмечает текст, вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. От английского keyboard - клавиатура

Примеры L
Тег LEGEND выводит надпись для тега FIELDSET и должен быть в нем первым элементом. Закрывающий тег требуется

Li
Link

Примеры M
Элемент MAP определяет коллекцию чувствительных областей в графическом изображении, при этом различные участки изображения могут быть ссылками на различные ресурсы. Чувствительные области задаются тегами AREA

Map
Marquee
Тег MENU
Атрибуты
Пример
Meta

Примеры N
Тег NOBR запрещает перевод строки. Бывают случаи, когда возникает надобность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами и , будет гарантированно располагаться в одной строке без переноса на другую. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки

Примеры O
Тег OL(Ordered List) служит для создания нумерованного списка. Допускается вложение нумерованного списка в списки другого вида

Ol
Тег OPTGROUP
Атрибуты
Option

Примеры P
Тег P создает новый параграф. Два или более тега P, идущих подряд, заменяются одним

p
Pre

Примеры S
Тег s указывает, что текст должен быть зачеркнут

Samp
Тег SCRIPT
Пример
Select
Select - 2
Small
Тег SPAN
Пример
Strong
Sub

Примеры T
Тег TABLE создает таблицу. Все прочие элементы таблицы должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен

Тег TABLE
Td
Тег TH
Тег THEAD
Title
Tr

Примеры U
Тег u указывает, что текст должен быть подчеркнут

u
Ul

Примеры V
Тег VAR используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского variable - переменная

Список вопросов по HTML

HTML - HyperText Markup Language - язык разметки гипертекста. Документы на языке HTML позволяют пользователю, указав на выделенное слово или фразу, получить доступ к файлу или перейти на другой HTML-документ, который связан с указанным участком текста гиперссылкой. Такие гипертекстовые связи между файлами и документами, расположенными на серверах по всему миру, позволяют системе работать так, как будто она представляет собой огромную паутину информации.
HTML - _не_язык_верстки_! Это средство логической разметки, и не пытайтесь располагать ваши элементы в определенных позициях и определенных местах. У вашего клиента нет размера экрана, нет размера браузера, нет цветов и нет звуковой карты.

Что такое HTML
Для установления соединения с удаленным сервером используется сетевой адрес документа. Этот адрес зовется универсальным указателем ресурса - URL (Uniform Resource Locator). В ответ сервер посылает документы, чаще всего в формате HTML. Можно считать, что в нормальных условиях после запуска программы-браузера и ее подключения к серверу последовательно происходит шесть событий: На стороне пользователя браузер декодирует заданный URL и подключается к серверу. Браузер требует от сервера предоставить необходимый документ.

Что такое XML?
Что такое XHTML?
Что такое WML?
Что такое CSS?
Что такое SSI?
Что такое CGI?
Что такое PHP?
Что такое ASP?
Что такое Flash и SVG?
Что такое VRML?

Какую версию HTML лучше использовать
Нужно соблюдать баланс между использованием новых возможностей и поддержкой устаревших, но все еще актуальных версий браузеров. С этой точки зрения золотая середина - стандарт XHTML 1.0 Transitional. Странички, сверстанные с соблюдением этого стандарта, будут гарантированно корректно отображаться во всех будущих клиентах, понимающих XML, но, в то же время, в рамках этого стандарта поддерживаются устаревшие, но все еще необходимые для правильного отображения во многих браузерах теги и атрибуты.

В каком регистре лучше писать HTML-код?
Что такое entities и как их правильно применять?
Как правильно прописывать URL в запросе?
Кавычки в значениях атрибутов
Обязательно ли писать alt в img?
Страничка совместимая с XHTML
Как вставлять комментарии в HTML?
Я, к сожалению, употребил
Надо прописать ключевые слова
Чтобы после открытия

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

Задать отступы содержимого странички
Как сделать буквицу в начале абзац
Как встроить свои шрифты в страничку?
Как подавить подчеркивание ссылок?
Как сделать неподчеркнутые ссылки везде?
При наведении мышки на текст смена цвета
Фоновая картинка
Задать фоновую картинку для ячейки таблицы?
Фон неподвижный при прокрутке
Содержимое div

Как сделать кнопку «Back»
Можно использовать скрипт, просто перенаправляющий на фреймсет (из предыдущей версии FAQ), но гораздо грамотнее сделать так, чтобы пользователю не пришлось потом долго лазить по меню в поисках нужной странички. Пусть фреймсет, в котором есть два фрейма: menu.html - меню, main - рабочее окно для main.html, 1.html, 2.html и т.д.

Как на JS при событии в одном
Как вставить музыку в HTML файл?
Как определить разрешение
Как вставить дату последнего обновления?
Картинка - ссылка
Открыть по ссылке
Как сделать фотогалерею
Как сделать фотогалерею - 2
Есть ли в JS функция, которая
Почему NN некорректно ведет

Как сделать ссылку, которая никак не проявляет себя, как ссылка
Это бывает нужно для изменения картинки по наведению мыши (4.8), а также для эмуляции title в NN4 (5.8) style type="text/css"!-- a.hiddenlink, a.hiddenlink:link, a.hiddenlink:visited, a.hiddenlink:active, a.hiddenlink:hover { color:...цвет текста по умолчанию...; text-decoration:none; cursor:default; } --/style

Ссылка не проявляет себя, как ссылка?
Как сделать буквицу
Как окружить табличку рамкой нужного цвета
Как "разлиновать"
Чтобы в NN4 в таблице было
Избежать появления пустой строки
Чтобы пустая ячейка таблицы показывалась
Чтобы комментарий показывался в NN4
Чтобы iframe показывался в NN4
Чтобы фон странички оставался неподвижным

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

Какие редакторы HTML бывают?
А какой редактор лучше?
HomeSite - не заменять русские буквы
Редактировать файлы в KOI-8 и DOS-866
Как заставить 1st Page редактировать koi-8?
Как создавать и редактировать файлы в Unicode
Браузеры для тестирования страниц
Как поставить несколько версий IE?
Как мне протестировать страничку
Как перевести Word или Excel в формат HTML

Какие форматы графических файлов применяются в Web
JPEG - формат сжатия графики с потерями, разработанный с учетом особенностей человеческого зрения. Сжимает полноцветные изображения в 20-100 раз относительно первоначального объема файла, в зависимости от качества получаемой картинки. Применяется для сжатия фотографий, а также других картинок с плавными переходами яркости и цвета.

Форматы графических файлов в Web
Какие графические редакторы лучше?
Чересстрочная и прогрессивная графика
Как создать прозрачную ?
Как создать анимацию?
Можно ли оптимизировать графику?

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

Какие серверы поддерживают SSI и CGI?
У меня есть хорошая и серьезная
Как установить счетчик посещений?
Хочу поставить свой счетчик, независимый
Результат заполнения формы
Результат заполнения формы на e-mail?
HTML в большое количество документов
Можно ли бесплатно сделать домен?

Где взять документацию по HTML
Близкие по тематике эхоконференции.
Где взять документацию по HTML?
Где взять документацию по CSS?
Где взять документацию по JavaScript?
Где взять документацию по DOM и DHTML?
Посоветуйте еще несколько интересных ссылок.

Теги HTML

Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега , располагающегося внутри тега ваших страниц

Таблица базовых цветов BgColor
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого.

Что такое CSS
Практическое освоение CSS
Связывание
Внедрение
Встраивание в теги документа
Импортирование
Группирование
Наследование
Селекторы
Классы

Acronym
Тег A и обязательный парный ему /A. Тег A служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию

a
Abbr
Acronym
Address

Blockquote
Тег BLOCKQUOTE и обязательный парный закрывающий тег /BLOCKQUOTE. Тег BLOCKQUOTE предназначен для включения в документ длинных цитат, cоздавая отступы с обеих сторон текста и отделяясь от остального текста пустыми строками

b
Big
Blockquote
Body
Br
Button

Code
Тег CODE и обязательный парный ему /CODE. Тег CODE отмечает текст как небольшой фрагмент программного кода. Обычно отображается моноширинным шрифтом

Cite
Code

CSS: Цвет элемента и цвет фона
Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам.

CSS: Границы
Примечание
Верхняя часть заголовка зеленого цвета (dotted)
CSS: цвет элемента и цвет фона
CSS: Курсоры
CSS: Курсоры - 2
CSS: свойства шрифта
Примечания
Примеры
CSS: полоса прокрутки

Dt
Тег DT и необязательный парный ему /DT. Тег DT(Definition Term) является определением списка определений

Dd
Dfn
Dl
Dt

Em
Тег EM и обязательный парный ему /EM. Тег em используется для выделения, подчеркивания важных фрагментов текста курсивом (наклонный текст). Происходит от слова emphasis - акцент.

Font
Размер текста в пределах от 1 до 7,где 1 - самый мелкий шрифт. По умолчанию равен 3 colorУстанавливает цвет текста, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет, либо используя ,например для зеленого цвета

Chroma
Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным. Синтаксис: STYLE="filter:chroma(Color)" Параметры - ColorЦвет, который будет прозрачным

Alpha
Blur
Chroma
FlipH
FlipV
Glow
Gray
Invert
Mask
DropShadow

Head
Тег HEAD определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

Очень маленький заголовок с тегом H5
Head
Hr
Html

Тег IMG
Выводит текст к картинке. Полезно, если браузер не отображает графику на странице borderУстанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения ismapСообщает, что изображение является картой-изображением на сервере heightВысота картинки в пикселах или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

Kbd
Тег KBD отмечает текст, вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом. От английского keyboard - клавиатура

Link
Тег LINK определяет ссылку. В отличие от тега , тег LINK может располагаться только в части заголовка документа. Информация, указанная в элементе LINK, может по-разному обрабатываться броузерами, в зависимости от указанных атрибутов.

Li
Link

Meta
Специальная группа инструкций META, предназначена в основном для описания и индексирования документа поисковыми машинами. Команды META вносятся в "шапку" гипертекстового документа - внутри блока .

Marquee
Meta

Nobr
Тег NOBR запрещает перевод строки. Бывают случаи, когда возникает надобность в операции противоположного назначения – запретить перевод строки. Текст, заключенный между тэгами и , будет гарантированно располагаться в одной строке без переноса на другую. Длинная строка не уместится на экране, и для ее просмотра придется использовать горизонтальную полосу прокрутки

Option
Каждый элемент должен содержать хотя бы один или более элементов OPTION, с помощью которого создаются строки списков

Ol
Option

Pre
Тег PRE обрамляет предварительно отформатированный текст. Преформатированный текст отображается моношириным шрифтом. Получается как бы текстовая вставка в html

p
Pre

Strong
Тег strong используется для выделения из текста слова (жирный текст). Происходит от слова strong emphasis - сильный акцент.

s
Samp
Select
Select - 2
Small
Strong
Sub
Sup

Title
Элемент TITLE не является частью отображаемого текста. Он может отображаться, например, как заголовок страницы или название окна. Только один TITLE может быть в документе. Элемент TITLE должен использоваться для идентификации содержимого документа. Поскольку пользователи часто обращаются к документам вне контекста, авторы должны предоставлять осмысленные заголовки

Table
Td
Title
Tr

Ul
Тег UL(Unordered List) служит для создания ненумерованного списка. Допускается вложение ненумерованного списка в списки другого вида

u
Ul

Var
Тег VAR используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского variable - переменная

HTML по шагам

Веб-страницей называется сетевой документ, открываемый в браузере. Обычно веб-страница создается в формате HTML и содержит, как правило, текст, изображения и ссылки. В связи с развитием технологий, веб-страницей также могут называться документы и в другом формате, например, XML, Flash, PDF и т.д.

Веб-страница
Сайт (интернет-ресурс)
HTML язык разметки гипертекста
HTML-документ
Браузер
Тег
Контейнер
Ссылки (гиперссылки)
CSS - каскадные таблицы стилей
Редактор веб-страниц

Спецификация HTML 3.2

Данный документ был рассмотрен членами группы W3C и другими заинтересованными сторонами и принят руководством W3C в качестве рекомендации. Данная рекомендация является неизменным документом и может быть использована в качестве исходного материала при создании ссылок или при цитировании в других документах в качестве норматива. Задача организации W3C в деле создания данной Рекомендации заключается в том, чтобы привлечь к ней внимание и способствовать широкому распространению данной спецификации. В конечном итоге это ведет к увеличению возможностей и универсальности Web.

Введение в язык HTML 3.2
HTML как частный случай SGML
Структура документов HTML
Элемент HEAD и его производные
TITLE
STYLE and SCRIPT
ISINDEX
BASE
META
LINK

Руководство по стилям для создания online гипертекста

Вы собираетесь писать (или генерировать) online гипертекст. Вы можете быть обескуражены тем, что гипертекст потенциально свободен (не связан жесткими рамками). Не пугайтесь. Это не доставит Вам сложностей. Во многих случаях, чем проще, тем лучше. Вы будете писать определенное количество отдельных файлов. Эти файлы будут соединены друг с другом и с внешними документами для завершения Вашей работы.
Вы можете расценивать результат своей работы как "документ", ведь если бы он существовал на бумаге, Вы назвали бы его документом. В случае online документов, мы можем относиться к каждому отдельному файлу как к документу. Документ может относиться, по аналогии с книгой, к разделу или подразделу или даже сноске. В этом руководстве мы будем ссылаться на целые коллекции документов как на самостоятельные работы.
Документ это минимальный модуль для представления информации. В любой момент времени Ваш документ должен быть полностью загружен редактором. Также естественно если Вы работаете одновременно над несколькими документами.

Продолжение

Язык HTML. Понятие, описание, команды

Это руководство задумано как учебник для тех, кто хочет публиковать документацию любого рода на глобальной компьютерной сети Интернет. Насколько велика Интернет, точно не знает никто. Ходят слухи, что в 1996 году число крупных машин (серверов) и локальных сетей, подключенных к Интернет, перевалило за 10 миллионов. Точное число пользователей просто никому не известно. Известно только, что оно очень велико ‡ несколько сот миллионов человек по всему миру.
Чтобы опубликовать документ (здесь и далее под документом понимается файл, содержащий некоторую информацию) на Интернет, достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW).
Разработку документов, однако, можно проводить и на компьютере, не имеющем выхода в Интернет. Автор, например, разрабатывал Руководство в текстовом процессоре Microsoft Word 2.0, а затем перенес в формат HTML и разместил на сервере Yellow Internet (). Любой желающий может бесплатно разместить на этом сервере свои файлы суммарным объемом до двух мегабайт.

Продолжение

Самоучитель HTML

Атрибут scrolling управляет прокруткой внутри одной области. Он может принимать значения YES (полосы прокрутки создаются в обязательном порядке), NO (прокрутка запрещена) и AUTO (полосы прокрутки появляются, когда необходимо). Если этот атрибут отсутствует, броузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях. Запретив прокрутку, можно создать так называемый баннер.

Продолжение

Учебник по HTML

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

Продолжение

Золотые правила плохого HTML

Этот трактат следует рассматривать как руководство для всех, кто намеревается прославиться плохим HTML - оформлением своей странички. Он посвящается также памяти тех, кто не нашел пути истинного.

Продолжение

У истоков дизайна

Содержание каждой машины выражается в определенных взаимодействиях ее органов, в ее целесообразности и соответствии тем задачам, для выполнения которых она предназначена. Одновременно машина воплощена в материальную форму, которая является таким же необходимым атрибутом, как кинематическая и динамическая сущность. Однако форма машины может не совпадать и даже оказаться в противоречии с ее функцией: она варьируется в довольно широких пределах, в частности включает различные элементы декора.
В истории машин можно наметить несколько этапов развития формы. На раннем периоде развития машин форма конструктивна, т.е. элементы конструкции являются элементами формы, и зависит исключительно от выполняемых машиной операций. Затем, по мере развития машинной техники, в XIV...XVII вв. внешняя форма как бы приобретает некоторую автономность. Это вполне понятно: построение машин было чисто эмпирическим процессом; кинематическая схема машины не менялась на протяжении столетий, поэтому строители машин не могли внести коренные изменения в структуру машины, и повышение ее продажной стоимости или слава ее создателя достигались изменением формы. Немаловажное значение при этом имело влияние «больших» стилей – возрождения, барокко, рококо, а также художественное чутье создателей машин, которые зачастую были одновременно и архитекторами, и инженерами, и художниками самого широкого профиля.

Продолжение

Краткое руководство по HTML

Очень краткое и очень полезное знание о языке

Продолжение


Алгоритм шифрования RSA - описание и общие вопросы
Введение в Unix
Операционная система QNX 4.Архитектура системы
Алешина Светлана - Тень На Плетень
Андреев Леонид - Молчание
Графика в пакете PageMaker
Амнуэль Песах - И Затонула Лодка
Ассемблер для Windows
Андерсон Пол - Нам, Пожалуй, Пора Идти
Architecture Net
Антипова Елена - Охотники За Мумиями
Основы цвета
Интернет через Ethernet
Самоучитель по Animation For Internet
Учебник по Corel Draw 10
Трюки с Photoshop
Photoshop в примерах и задачах
Отладка приложений
Справка по Adobe Premiere Pro 7.0
Аквариум