Элементы HTML
Элемент HTML - это основная структурная единица веб-страницы , написанная на языке HTML
1.1 Варианты DOCTYPE для HTML 4.01
2.2 Текстовые блоки
2.3 Форматирование текста
2.4 Списки
2.5 Объекты
2.6 Изображения
2.7 Карта изображений
2.8 Таблицы
2.9 Формы
2.10 Символы
1 Структура HTML-документа
2 Основные элементы («теги»)
3 Названия цветов
4 Основные символы
Структура HTML-документа
HTML
- это теговый
язык
разметки
документов, то есть любой документ на
языке HTML представляет собой набор
элементов, причем начало и конец каждого
элемента обозначается специальными
пометками, называемыми тегами
.
Регистр, в котором набрано имя тега, в
HTML значения не имеет. Элементы могут
быть пустыми
,
то есть не содержащими никакого текста
и других данных (например, тег перевода
строки
).
В этом случае обычно не указывается
закрывающий тег. Кроме того, элементы
могут иметь атрибуты
,
определяющие какие-либо их свойства
(например, размер шрифта для тега
).
Атрибуты указываются в открывающем
теге. Вот пример части разметки
HTML-документа:
Текст между двумя тегами - открывающим и закрывающим.
Здесь элемент содержит атрибут href.
А
вот пример пустого элемента:
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML , которая обычно выглядит примерно так:
Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.
Варианты DOCTYPE для HTML 4.01
Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).
Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.
С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.
DOCTYPE для HTML 5
В отличие от предыдущих версий тег всего один
Основные элементы (« теги »)
Теги и их параметры нечувствительны к регистру. То есть и означают одно и то же.
комментариев: 70
Спецификация
Описание
Тег является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис
...
< a href="URL"> ... a >
< a name="идентификатор"> ... a >
coords Устанавливает координаты активной области.
download Предлагает скачать указанный по ссылке файл.
href Задает адрес документа, на который следует перейти.
name Устанавливает имя якоря внутри документа.
rel Отношения между ссылаемым и текущим документами.
tabindex Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
Имя окна или фрейма, куда браузер будет загружать документ.
Добавляет всплывающую подсказку к тексту ссылки.
Указывает MIME-тип документа, на который ведёт ссылка.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег Обязателен.
Пример
Посмотрите на мою фотографию!
Как сделать такое же фото?
< html >
< head >
< meta charset="utf-8">
< title > Тег А title >
head >
< body >
< p >< a href="images/xxx.jpg"> Посмотрите на мою фотографию! a > p >
< p >< a href="tip.html"> Как сделать такое же фото? a > p >
body >
html >
В последних версиях HTML практически у каждого тега огромное число необязательных параметров - обычно не меньше 15. Мы приводим только основные параметры тегов.
название ссылки
Top - открытие документа в текущем окне;
Blank - открытие документа в новом окне;
Self - открытие документа в текущем фрейме;
Parent - открытие документа в родительском фрейме.
Атрибут HREF задает значение адреса документа, на который указывает ссылка.
filename - имя файла или адрес Internet, на который необходимо сослаться.
TARGET - задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
Значение по умолчанию: _self.
Текстовые блоки
…
,…
, … ,…
- заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 - самый крупный, 6 - самый мелкий).Новый абзац. Можно в конце абзаца поставить
, но это не обязательно.Новая строка. Этот тег не закрывается (то есть не существует тега )
- горизонтальная линия
Цитата. Обычно текст сдвигается вправо.
…- режим preview (preformatted text). В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме , игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе).
… - строка (обычно используется для применения стилей CSS )
Форматирование текста
COLOR=color - задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 - зелёную, последние 2 - синюю) или названием.
FACE=шрифт задание гарнитуры шрифта
SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.
SIZE=+изменение или SIZE=-изменение - изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.
… - логическое ударение (обычно отображается курсивным шрифтом )
… - усиленное логическое ударение (обычно отображается жирным шрифтом )
… - выделение текста курсивом
… - выделение текста жирным шрифтом
… - подчёркивание текста
…
(или
… )- зачёркивание
текста
… - увеличение шрифта
… - уменьшение шрифта
- мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript
- сдвигающийся по экрану текст.
… - подстрочный текст. Например, H2O создаст текст H 2 O.
… - надстрочный текст. Например, E=mc2 создаст текст E=mc 2 .
параметры > … - задание параметров шрифта. У этого тега есть следующие параметры:
Так, например,
Сигналом к началу атаки являются
три больших зелёных свистка.
создаст текст
Сигналом к началу атаки являются три больших зелёных свистка.
Списки
создаёт список
первый элемент
второй элемент
третий элемент
Если вместо
-
(Unordered List
- ненумерованный список) поставить
- Первое
- Второе
- И т.д.
- Двадцать четыре
- Двадцать пять
- И т.д.
- параметр value ="следующий" - если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23
- Один
- Два
- Двадцать два
- Двадцать три
- Кошка
- мяукающее домашнее животное
- Кот
- муж кошки
- Крокодил
- ,
- ,
- можно и не закрывать.
Объекты
EMBED - вставка различных объектов: не-HTML документов и media-файлов
APPLET - вставка Java-апплетов
SCRIPT - вставка скриптов.
Изображения
SRC - имя или URL
ALT - альтернативное имя (отобразится, если в браузере запретить отображать картинки)
TITLE - краткое описание изображения (отобразится при наведении курсора на картинку)
WIDTH, HEIGHT - размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмется»)
ALIGN - задает параметры обтекания текстом (top, middle, bottom, left, right)
VSPACE, HSPACE - задают размеры вертикального и горизонтального пространства вокруг изображения
IMG - вставка изображения. Этот тег не закрывается.
BORDER - толщина разделительных линий в таблице
CELLSPACING - расстояние между клетками
-
(Ordered List
- нумерованный список), список получится
нумерованным:
первый элемент
второй элемент
третий элемент
У этих тегов есть параметры:
type = "тип"
где тип - форма: в
-
- символов
square - квадрат
round - окружность
disk - круг: по умолчанию
а в
-
- цифр или букв
A или а (латинскими буквами) - буквенный список: соответственно заглавными или строчными буквами
I или i - римские цифры: соответственно заглавными или строчными буквами
1 - арабские цифры: по умолчанию
пишется так:
и создаст следующее:
Параметр start ="начало" (только для
- ), определяющий начало нового отсчёта:
например, если нужно не 1, 2, 3, а 24, 25, 26
Пишется так:
и создаст следующее:
Двадцать четыре
Двадцать пять
и, наконец для тега
создаст следующее:
Двадцать два
Двадцать три
Наконец, третьим, и последним, списком является список определений :
создаст следующее:
мяукающее домашнее животное
муж кошки
Крокодил
большой африканский зверь с острыми зубами
Между прочим, теги
Карта изображений
… - создание карты изображений позволяющей хранить в одном изображении несколько ссылок.
Таблицы
TABLE - создание таблицы. Параметры тега:
CAPTION - заголовок таблицы (этот тег необязателен)
TR - строка таблицы
TH - заголовок столбца таблицы (этот тег необязателен)
TD - ячейка таблицы
height - высота таблицы
width - ширина таблицы
Так, например,
Год | Улов | 1997 | 214 | 1998 | 216 | 1999 | 207 |
---|
Год | Улов | 1997 | 214 |
---|
Название |
Шестнадцатеричный цвет |
Основные символы
Основная статья: Мнемоники в HTML
Символ |
Смысл |
|
амперсанд |
||
неразрывный пробел (на этом пробеле не переводится строка) |
||
параграф |
||
копирайт (copyright) |
||
зарегистрированный товарный знак (registered trademark) |
||
товарный знак (trademark) |
||
открывающая кавычка в русском языке |
||
закрывающая кавычка в русском языке |
||
многоточие |
||
жирная точка |
||
плюс-минус |
||
Клавиатурные символы " и " в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.
Дефис, тире и минус - три разных знака.
Клавиатурный символ - называется дефис и используется внутри слов.
Минус шире дефиса . Он используется для записи отрицательных чисел и операции вычитания.
Тире ещё шире, чем минус . Оно используется между словами и отбивается пробелами. Для обозначения числовых интервалов тоже используется тире , но пробелами не отбивается.
Более подробно: Артемий Лебедев. Тире, минус и дефис, или Черты русской типографики . Ководство (15 января 2003). Архивировано из первоисточника 24 августа 2011 .
В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.
Символы < , > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются <, > и & соответственно.
Большинство спецсимволов см. на сайте about.com .
Реферат по Информатике.
На тему « HTML »
ученика 9 «Г» класса
средней школы №24
Тризно Павла.
Северодвинск 200 0 г.
1) Введение
· Что такое HTML
· HTML как явление нашей жизни
2) История HTML
· Версии HTML
3) Особенности гипертекста
4) Синтаксис языка
· Строение WEB -страницы
· Правила синтаксиса
· Кодирование символов
· Использование спецсимволов
· Типы данных
· Управление цветом
5) Вывод
6) Описание броузеров
· Просмотр WEB -страницы
· Microsoft Internet Explorer
· Netscape Communicator
7) Терминология
8) Список литературы
Введение
· Что такое HTML ?
Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, броузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.
· HTML как явление нашей жизни
HTML давно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-броузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.
HTML является основой моды в Интернете.
HTML, как основа создания WEB-страниц,
имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн.
Художнику в Интернете недостаточно просто нарисовать красивые картинки,
оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить
все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась
на действие пользователя, поражало воображение, вызывало желание создать
что-нибудь свое, оригинальное в этой области.
История HTML
· Версии HTML
Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом броузера Mosaic. Но в то время ни для языка, ни для броузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0 которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день.
В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан броузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.
В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные броузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.
Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум),компании-производители броузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были включены в спецификацию 3.2. Но броузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.
И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что броузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.
Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт - программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время броузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии броузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время броузерах.
В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.
Особенности гипертекста
Основная особенность гипертекстового документа - это способность получить сложные эффекты форматирования простыми и наглядными методами. Сравним гипертекстовый документ, например, с файлом в формате MS Word. В том и другом случаях можно использовать одни и те же приемы форматирования: выбор шрифта, курсив, выравнивание, вставку таблиц, рисунков и т.д. Но в документах Word механизм форматирования скрыт от пользователя, работать с файлом можно только в самом редакторе или программе, поддерживающей его формат. С гипертекстом дело состоит иначе. Такой документ можно открыть в любом текстовом редакторе и увидеть, где и каким образом отформатирован текст. Просмотреть или распечатать документ в отформатированном виде возможно тоже только в специальном приложении гипертекстовом редакторе или броузере.
Открытость структуры гипертекстовых документов позволяют фирмам- разработчикам самые разные программные продукты, а пользователь может выбрать себе подходящую программу.
Разработчик HTML-документа может выбрать способ работы с ним. Теоретически с гипертекстом можно работать даже на уровне MS-DOS в любом редакторе, открывающем ASCII-файлы. Это требует от пользователя обязательного знания большинства элементов HTML. Можно использовать для создания гипертекста и броузер. Любая из этих программ имеет режим редактирования WEB-страницы в режиме «источника». Для этого может подключатся один из установленных на компьютере текстовых редакторов. Броузеры имеют и встроенные редакторы гипертекста. Существуют гипертекстовые редакторы, которые используют только для разработки WEB-страниц и создания на них визуальных и звуковых эффектов.
Способы создания гипертекста обеспечивают его абсолютную платформенную независимость. Создавая WEB-страницу на компьютере, который работает под управлением Windows, можно не сомневаться, что администратор сервера сможет использовать файлы на компьютере, работающем под управлением UNIX или другой операционной системы.
Основной особенностью HTML является принцип, по которому не только допускается вложение одних элементов в другие, но и декларируется необходимость такого вложения. Это отличие HTML от других языков, в которых теоретически можно написать код без вложенных конструкций. Каждый элемент HTML допускает непосредственное вложение только ряда элементов, которые в свою очередь, допускают вложение других, разрешенных для них, и т.д. Таким способом формируется не только общая структура гипертекста, но и создаются разнообразные визуальные эффекты.
Все элементы языка можно разделить на три группы. К первой относятся элементы, которые создают структуру гипертекстового документа. Использование таких элементов необходимо. Ко второй группе можно отнести элементы, создающие элементы форматирования. Их использование диктуется конкретными требованиями к документу, фантазией и компетенцией разработчика. К третьей группе относятся элементы, которые позволяют управлять программными средствами, установленными и работающими на компьютере-клиенте. Часто такие элементы создаются автоматически, когда разработчик использует для вставки некоторого объекта в документ гипертекстовый редактор или подобную программу.
Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями). Поэтому некоторые WEB-страницы удобнее просматривать при помощи определенных броузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои WEB-страницы при помощи программирования. Апплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.
Синтаксис HTML.
· Структура WEB-страницы
Заготовка
типичной WEB-страницы:
Переход к конец документа
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Здесь должен располагаться оригинальный текст WEB-страницы
Переход в начало документа
Если рассмотреть исходные тексты различных WEB-страниц, то можно легко увидеть схожесть их структуры. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальном и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами.
Рассмотрим
основные элементы HTML.
< HTML> html>
Означает документ на языке HTML. Я уже упоминал о том, что одним из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и коечным тегами должна находится вся WEB – страница. В принципе этот элемент. Он имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом