HTML в примерах

       

HTML в примерах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать ссылку, которая никак не проявляет себя, как ссылка
Это бывает нужно для изменения картинки по наведению мыши (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

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

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

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

Где взять документацию по HTML

Теги HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML по шагам

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

Веб-страница

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

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

Введение в язык HTML 3.2

Руководство по стилям для создания 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

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

Продолжение