Главная-Интернет-Основные теги в html. HTML Основные теги

Основные теги в html. HTML Основные теги

Основные html теги — это та база, на которой строится практически любой сайт/блог. Из этой статьи Вы узнаете именно те 20% тегов, которые Вам будут необходимы всегда.

Как в любом языке, да и в здесь действует правило парето 20/80 (20% дел имеет 80% важности для достижения нужного результата), что означает — достаточно знать всего 20% кодов, чтобы уверенно достигать своих целей в сайтостроении.

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

— это самый наипростейший язык! Если Вы решили его изучить, то важно понять с самого начала, что в этом нет ни какой сложности. С уверенностью можно сказать, что в школе детям, на уроке информатики намного сложней приходиться.

Итак приступим. Писать коды лучше в блокноте, который входит в стандартные программы операционной системы Windows или в бесплатной программе «Notepad + +».

Сначала определимся с тем, что такое тег. Тег — это ячейка самого языка html, из которого он в общем то и строится. По тегам браузеры понимают, как отобразить текст, куда вставить картинки. Теги — это и есть сами элементы разметки.

HTML теги для создания каркаса сайта

Теги бывают парные и не парные. Парные открываются и закрываются, т.е в закрывающихся присутствует обратный слеш «/».

Первое, что должно находится в любом html документе при создании страницы блога, это:

  • — сообщают браузеру, что все, что находится между ними, это есть html код;
  • — с англ. «голова», содержит название, кодировку, мета теги для поисковиков;
  • НАЗВАНИЕ — мета тег, в основном для поисковиков, внутри содержит название документа, отображается вверху браузера;
  • — одинарный тег указывающий браузеру кодировку языка, где windows-1251 — говорит о том, что текст данной страницы на русском языке (windows-1252 — для английского языка);
  • — для ключевых слов сайта;
  • — краткое содержание страницы;
  • ТЕЛО ДОКУМЕНТА — с англ. «тело», содержит всю страницу сайта.

Это были стандартные теги html кода , с которых, без изменений должны начинается все страницы сайта/блога в таком виде:









Список html тегов находящихся в теле страницы

Между тегами будет находится само тело страницы сайта где:

  • заголовок

    — самый важный 1 уровня;
  • с

    подзаголовок

    по
    подзаголовок
    — соответственно подзаголовки 2, 3, 4, 5 и 6 уровня;
  • анкор ссылки — ссылка, где » target=»_blank»» — атрибут отвечающий за открытие в новом окне, » title=»» название того, на что будет ссылка;
  • и — теги для выделения жирным. «» устарели и рекомендуется использовать «»;
  • — для выделения курсивом;
  • — одинарный тег, отвечающий за вставку изображения на странице;
  • — «p» от англ. «параграф», а значит делит текст на параграфы. По умолчанию выравнивается по левому краю;

  • — логический тег означающий конец строки и переход на следующую;
  • — атрибут выравнивающий текст по центру;
  • — атрибут выравнивающий текст по правому краю;
  • —
  • color=»green» отвечает за цвет текста. В данном случае стоит зеленый. Вместо слова «green» обычно ставится код из шестнадцатеричной системы цветов, например: «#088f47»;
  • face=»verdana» — атрибут указывающий шрифт в тексте;
  • size=»3″ — размер шрифта;
    1. первое
    2. второе
    3. третье
    — нумерованный список;
    • слово
    • слово
    • слово
    — маркированный список;

HTML теги для создания таблицы

Тегов внутри самой таблицы может быть много, это изменения цвета бордюра таблицы, выравнивание слов внутри таблицы и т.д., но так как статья о основных тегах , то остановимся только на тегах для создания самой таблицы.

  • — тег отвечающий за создание таблицы, где «1» есть ширина бордюра таблицы, где «450» ширина таблицы, а «center» вы уже знаете;
  • — тег находящийся внутри «
    » и создает строку в таблице;
  • — создает столбец в строке, находится внутри тегов «». «150», как вы уже наверное догадались — ширина столбца;

Полностью html теги таблицы выглядят примерно так:












ячейка №1

ячейка №2

ячейка №3

ячейка №4

ячейка №5

ячейка №6

Еще раз подчеркиваю, что это основные теги html кода и в него можно вносить очень много изменений. И еще стоит отметить, что сам по себе html код – это шаблон, без css, в общем-то, что-то стоящее с ним сделать будет невозможно. Только все вместе, html и css творят чудеса, но что-то простенькое, вполне можно выполнить и без глубоких знаний css, чисто на html.

Видео урок по теме — «Что такое HTML? Файл index html»:

Поделитесь пожалуйста, если понравилось:

Возможно вам будет интересно еще узнать:


Мы рассмотрели пример создания простенькой страницы, где давались комментарии некоторых html тегов, поскольку, мне кажется, что лучше сначала показать что-то на примере, а потом перейти к более детальному описанию. Именно поэтому создание страницы было рассмотрено во втором уроке, а более детальное в третьем.

Итак, ниже представлены описания распространенных html тегов, которые используются чуть ли не на каждой странице сайта. Поверьте, их уже хватит, чтобы написать целый сайт.

Список тегов html

1. HTML тег (для абзацев)

- выводит текстовый абзац (допускает атрибуты style, class, id). Самый распространенный тег, поскольку в него чаще всего помещают текст (впрочем он для этого и создан).

Например, html код:

Текстовый абзац номер один

А это другой абзац

Текстовый абзац номер один

А это другой абзац

К тегу можно ещё приписать параметр style:

С помощью этих различных значений можно редактировать внешний вид шрифта. Про эти параметры можно прочитать в отдельном уроке: стили в html и свойство css font .

Также можно прописать атрибуты CLASS и ID . Например:

2. HTML тег и (выделение жирным)

И - два тега, которые позволяют сделать шрифт жирным. Разницы между этими тегами нет.

Приведем пример. Html код:

жирный текст

Преобразуется на странице в следующее:

жирный текст

Также можно прописать атрибуты CLASS и ID (как и в случае с Примечание

Эти теги оказывают небольшое влияние на ранжирование документов в поисковых системах, поэтому бесцельно их лучше не использовать.

3. HTML тег (создание курсива)

- курсивный шрифт (допускает параметр style, class, id)

Например, html код:

курсивный текст

Преобразуется на странице в следующее:

4. HTML тег (подчеркнутый текст)

- подчеркнутый шрифт (допускает параметр style, class, id)

Например, html код:

подчеркнутый текст

Преобразуется на странице в следующее:

подчеркнутый текст

5. HTML тег (создание гиперссылки)

Создает ссылку на странице (допускает параметр style, class и другие).

Например, html код:

текст ссылки

Преобразуется на странице в следующее:

Все параметры и атрибуты тега будут рассмотрены в отдельном уроке: html тег .

6. HTML тег

(заголовки в контенте)

,...,
- заголовочные теги внутри контента (допускает параметр style, class, id). Причем чем меньше цифра, тем больший вес и размер (по умолчанию) имеет текст, заключенный в эти теги.

Например, html код:

Заголовок h1

Тег

используют для названия страницы (также как и тайтл)

Необходимо использовать эти теги только по назначению, т.е. только когда в статье необходим заголовок. Это связано с тем, что теги

,...,
имеют большое влияние на поисковые машины. Если их использовать правильно, то шансы попасть на верхние строчки выдачи очень высоки.

7. HTML тег
(выравнивание)

- выравнивает контент по центру.

Например, html код:

Этот текст будет в центре

Преобразуется на странице в следующее:

Этот текст будет в центре

Примечание
  • - для текста
  • ...
     - для всего (например, изображение)

8. HTML тег (подстрочный текст)

- выводит подстрочный шрифт.

Например, html код:

Обычный текст, подстрочный текст

Преобразуется на странице в следующее:

Обычный текст, подстрочный текст

9. HTML тег (надстрочный текст)

- выводит надстрочный шрифт.

Например, html код:

Обычный текст, надстрочный текст

Преобразуется на странице в следующее:

Обычный текст, надстрочный текст

10. HTML тег ,

, - выводит шрифт на один пиксель больше/меньше текующего размера (допускает параметр style, class, id).

Например, html код:

Обычный шрифт, этот шрифт больше на один пиксель

Преобразуется на странице в следующее:

Обычный шрифт, этот шрифт больше на один пиксель

11. HTML тег
    (создание списков)

Выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между

  • и
    • .

    Например, html код:

    Список:
    • первый элемент списка
    • второй элемент списка

    Преобразуется на странице в следующее:

    Список:

    • первый элемент списка
    • второй элемент списка

    12. HTML тег (создание таблиц)

    - создает таблицу (допускает параметр style, class). Каждая новая строка создается тегами , а столбец .

    Например, html код:

    1-строка 1 элемент 1-строка 2 элемент
    2-строка 1 элемент 2-строка 2 элемент

    Преобразуется на странице в следующее:

    Все возможности тега

    13. HTML тег
    (перенос строки)


    - переход на следующую строку, представляет собой одиночный тег.

    Например, html код:

    Строка 1
    2-строка
    3-строка А этот текст будет на 3ей строке, поскольку перехода не было

    Преобразуется на странице в следующее:

    1-Строка
    2-строка
    3-строка А этот текст будет на 3ей строке, поскольку перехода не было

    14. HTML тег
    (горизонтальная линия)

    - чертит линию, представляет собой одиночный тег (допускает параметр style, class).

    Например, html код:

    Какой-то текст над линией
    А этот текст будет уже под линией

    Преобразуется на странице в следующее:

    Какой-то текст над линией А этот текст будет уже под линией

    15. HTML тег (вывод картинки)

    Например, html код:

    http://img-fotki.yandex.ru/get/5821/27743399.2b/0_8875d_14383ca6_M.jpg ">

    Преобразуется на странице в следующее:

    Все возможности тега будут рассмотрены в отдельном уроке: .

    16. HTML тег (форматирование текста)

    - для форматирования текста, изменения стиля и т.п. (допускает параметр style, class, id). Его вес в глазах поисковых машин отсуствует, поэтому его можно использовать сколько хотите.

    Например, html код:

    Этот текст зеленый, а его размер 15 пикселей

    Преобразуется на странице в следующее:

    Примечание

    Аналогичным тегом является .

    17. HTML тег
    (создание формы)

    - создание формы на странице (допускает параметр style, class).

    Например, ввод логина и пароля, любые кнопки, любая форма регистрации - все это формы.

    18. HTML тег
    (создание блоков)

    - служит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега
    задача упростилась. Практически все сайты содержат
    блоки, как удобную альтернативу таблицам.

    В языке HTML всё, что вы напишите в HTML-документе, будет выведено на экран браузера сплошным текстом, то есть браузер игнорирует переводы строк, а также несколько набранных вами подряд пробелов заменяются одним.

    Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров. Посетители сайта не видят теги.

    Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).

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

    Рассмотрим пример:

    Этот текст обычный. Этот текст курсивный.

    Тег называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.

    Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом - .

    Рассмотрим пример:

    Этот текст обычный. Внимание! Курсив. Это снова обычный шрифт.

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

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

    Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.

    Заголовки

    Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от для наиболее важных объявлений, до для наименее важных.

    Редакция: Мандрик Р.А.

    HTML-документ (страничка) — документ, написанный на языке разметки гипертекста (HTML). Заключается между флагами и .

    Web-сайт, Web-сервер — цепочка логически связанных документов, написанных на языке HTML.

    Значения флагов разметки документа

    Флаги разметки — специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и рессурсами Интернет.

    Основные флаги разметки

    и . Между этими флагами располагается информация о документе.

    и . В эих флагах заключается название странички, которое будет выведено в рамке окна программы просмотра.

    и . «Тело» документа (текст, графика и т.д.) располагается между этими двумя флагами.

    Параметры флага :

    BGCOLOR — цвет фона ()

    BACKGROUND — «обои» или бэкграунд

    TEXT — цвет текста

    ALINK — цвет активной сылки Флаги, служащие для форматирования текста

    Флаги, служащие для выделения абзадцев. Новый абзац чсегда отделяется от предыдущего пустой строкой.

    Флаг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.

    Флаг, служащий для логического разделения текста горизонтальной линией.

    И
    Между этими флагами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа «курьер».

    Параметры выравнивания

    Используются в

    ALIGN=LEFT — выравнивание по левому полю

    ALIGN=RIGHT — выравнивание по правому полю

    ALIGN=CENTER — выравнивание по центру

    Флаги выравнивания

    и — выравнивание по левому полю

    и — выравнивание по правому полю

    и
    — выравнивание по центру

    Заголовки, служащие для выделения логических частей текста

    и

    Заголовок первого уровня.

    и

    Заголовок второго уровня.

    и

    Заголовок третьего уровня.

    и

    Заголовок четвертого уровня.

    и
    Заголовок пятого уровня.

    и
    Заголовок шестого уровня.

    Флаги для выделения текста и шрифта

    и Флаги для выделения текста (слов, букв) жирным шрифтом.

    и Флаги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

    и Текст, расположенный между двумя этими флагами, будет подчеркнут.

    и Текст, расположенный между двумя этими флагами, будет мигать.

    и

    и Флаги для изменения размера шрифта.

    и Флаги для изменения цвета шрифта.

    Флаги для формирования списков

    Флаги, показывающие начало и конец нумерованного списка

    Флаги, показывающие начало и конец маркированного списка.

  • Элемент списка

    и
    Флаги, показывающие начало и конец глоссария.

    Термин глоссария, располагается без отступа от левого поля страницы.

    Описание термина, располагается с отступом от левого поля страницы.

    Флаги-команды для вставки в текст объектов нетекстовой информации

    или — команда для вставки графического изображения

    — команда для вставки звукового фрагмента

    — команда для вставки видео фрагмента

    Параметры графического изображения

    WIDHT — ширина картинки в пикселях

    HEIGHT- высота картинки в пикселях

    ALIGN — выравнивание (ALIGN=LEFT — выравнивание по левому полю, ALIGN=RIGHT — по правому полю, ALIGN=TOP — по верхней границе, ALIGN=BOTTOM — по нижней границе, ALIGN=MIDDLE или CENTER — по центру)

    HSPACE — горизонтальный отступ от графического изображения

    VSPACE — вертикальный отступ

    ALT — альтернативный текст, служит для обозначения изображения

    Команды, служащие для гиперсвязи с другими HTML-документами и рессурсами Интернет

    и или и — гиперсвязи

    [email protected]
    — гиперсвязь с адресом электронной почты

    Таблица — сетка для показа данных в строках и столбцах, а также средство для форматирования текста

    и
    Флаги для вставки таблицы в HTML документ

    Параметры флага

    BGCOLOR — цвет фона

    BORDER — ширина бордюра

    WIDHT — ширина таблицы

    Флаги разметки таблицы

    — название таблицы, имеет параметр ALIGN=TOP — выравнивание над таблицей и ALIGN=BOTTOM — под таблицей.

    и Строчка таблицы. Может иметь параметры BGCOLOR — цвет фона внутри строки; ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри строки; VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание внутри строки таблицы.

    Столбец таблицы. Может иметь параметры BGCOLOR — цвет фона под столбцом; ALIGN=LEFT, RIGHT, CENTER — выравнивание внутри столбца; VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание; COLSPAN растягивание клетки на несколько столбцов, ROWSPAN — растягивание клетки на несколько строк.

    Заголовок столбца. Может иметь параметры BGCOLOR — цвет фона под названием; ALIGN=LEFT, RIGHT, CENTER — выравнивание; VALIGN=TOP, BOTTOM, MIDDLE — вертикальное выравнивание; COLSPAN, ROWSPAN — растягивание клетки на несколько столбцов или строк; WIDHT — ширина названия.

    Рамки-фреймы

    Рамки-фреймы — средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-странички или даже целого Web-сайта.

    и Флаги для создания рамки

    Параметры флага

    COLS — подразделяют экран на опредленное количество колонок (вертикальных)

    ROWS — подразделяют экран на опредленное количество колонок (горизонтальных)

    BORDCOLOR — цвет рамки

    BORDER — ширина бордюра

    FRAMEBORDER — граница рамки (FRAMEBORDER=YES — есть граница, FRAMEBORDER=NO — нет границы,

    FRAMESPACING=n — ширина границы)

    Флаг для описания рамки ().

    Параметры флага

    SCROLING — параметр для регулировки полосы прокрутки:

    SCROLING=YES — полоса прокрутки будет всегда

    SCROLING=NO — полосы прокрутки не будет

    SCROLING=AUTO — полоса прокрутки появляется только в случае необходимости

    MARGINWIDHT и MARGINHEIGHT — параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки

    NORESIZE — параметр, указвающий на то, что размер рамки-фрейма никогда не будет меняться.

    A link to file.htm — Связь между фреймами

    TARGET — атрибут связи между фреймами. Имеет несколько значений:

    BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно.

    PARENT загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.

    Обработка браузеров, не поддерживающих фреймы:

    …Здесь располагаются фреймы

    …Здесь располагается текст без фреймов

    В секции, предназначенной для тех пользователей, которые «не видят» рамки, можно расположить какой-нибудь пояснительный текст.

    Бегущая строка

    ТЕКСТ — Флаг, создающий бегущую строку

    TEKCT — Если бегущую строку нужно направить справа налево

    TEKCT — движение слева направо.

    scroll — стандартное движение от правого края к левому

    slide — надпись один раз пробегает от правого края к левому, где и остается.

    alternate — движение от правого края страницы к левому и обратно. Бесконечный цикл.

    TEKCT — Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.

    TEKCT — указать ширину участка, занимаемого бегущей строкой, где n — ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.

    TEKCT — Регулировка движения надписи по экрану. Здесь n — число пикселей.

    TEKCT В данном случае переменная величина — время t — измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.

    ТЕКСТ — возможность указывать величину шрифта текста в строке.

    ТЕКСТ — окрасить поверхность бегущей строки в какой-либо цвет, где n, как это бывало и раньше, можно указать в вид шестнадцатеричного числа либо написав его название

    ТЕКСТ — указать высоту бегущей строки, задавая величину n в пикселях

    Начиная писать html-документ, имеет смысл идентифицировать его как таковой. Такая идентификация достигается путем вставления в самое начало документа тегов и (соответственно, в конец документа, закрывающего тега ; никогда не забывайте закрывать скобки!). Тег doctype является тегом языка sgml и объявляет, что документ будет описан в соответствии со спецификацией html 3.2. Тег html указывает на начало документа. Теперь пора подумать об информационном наполнении. Начнем, естественно, с заголовка. Заголовок html-файла находится в обязательной секции , которая должна находиться в самом начале, то есть сразу после тега . Оформляется заголовок с помощью тега . Назовем наш документ «the first homepage». Ниже приведен листинг получившегося html-документа:</p> <p><title>the first homepage

    Попробуем просмотреть этот файл с помощью какой-нибудь программы просмотра, например, navigator фирмы netscape communications corp. После загрузки экран программы остался пустым. «А где же заголовок?»,- спросит возмущенный читатель. Присмотритесь повнимательней к ЗАГОЛОВКУ ОКНА программы просмотра в оконной системе и убедитесь, что заголовок отображен именно там. Тег позволяет задавать название для всего документа. Это название будет появляться в заголовке окна программы просмотра, а также будет появляться в списке закладок (bookmarks, shortcuts в различных терминологиях) при создании таковых.</p> <p>Другими элементами секции <head>…</head> являются:</p> <p><base параметры> — тег для указания url документа. Тег имеет такие параметры:</p> <p>href — указывает базовый url для документа. Замечание: url должен быть указан в полной форме.</p> <p>target — указывает окно для отображения документов, на которые ссылается данный документ.</p> <p><style> — тег, зарезервированный для использования в будущем для так называемых «стилей» (stylesheets). Точный синтаксис тега пока недокументирован.</p> <p><meta параметры> — тег, который теоретически должен использоваться для включения в документ некой специфичной информации для программ-индексаторов, каталогизаторов и т. д. Кроме того, у него есть несколько полезных параметров, позволяющих страницам сменять друг друга по прошествии определенных промежутков времени. Тег имеет следующие параметры:</p> <p>http-equiv=«refresh» — указывает программе просмотра, что нужно перепрыгнуть на страничку, указанную в параметре content по прошествии указанного там же промежутка времени.</p> <p>content=«number; url=url» — задает временной интервал number и url для команды http-equiv=«refresh».</p> <p>name=«description» или name=«keywords» — указывает серверу, как интерпретировать параметр content — как описание документа или как список ключевых слов.</p> <p>content=«text или список значений» — это не опечатка. У параметра content два смысла: один для команды http-equiv=«refresh», другой для команды name. В последнем случае значение параметра определяет либо описание документа (если параметр name=«description»), либо список разделенных запятыми ключевых слов (если параметр name=«keywords»).</p> <p>Теперь перейдем к оформлению содержимого документа. В терминах html содержимое документа называется его ТЕЛОМ, или по-английски — body. Именно так и называется тег, в поле действия которого находится все содержимое (то есть, оно заключено между внутри тега <body>…</body>). Тег <body>…</body> может содержать дополнительные параметры, позволяющие изменить цвета, используемые в документе или назначить фоновую картинку:</p> <p>bgcolor — определяет цвет фона документа. Цвет может быть задан как rgb-триплет (например, bgcolor=»#ffffff»-белый цвет), или быть одним из предопределенных символьных имен:</p> <p>aqua black blue fuch</p> <p>gray green lome maroon</p> <p>navy olive purple red</p> <p>silver teal white yellow</p> <p>background — позволяет задать фоновую картинку для документа. Картинка будет размножена (tiled) и покроет всю видимую площадь области отображения окна программы просмотра.</p> <p>text — задает цвет текста документа. Цвет задается так же как и для параметра bgcolor.</p> <p>link — задает цвет для текста и рамок изображений в активных зонах документа, содержащих ссылки (anchors).</p> <p>vlink — (visited links color) задает цвет для ранее выбранных ссылок.</p> <p>alink — (active links color) задает цвет для ссылок в момент выбора.</p> <p>Другими средствами шрифтового оформления текста являются выделения курсивом и жирным шрифтом. Таким способом очень удобно выделять отдельные слова в тексте, а также, создавать заголовки. Например, очень удобно заголовки первого и второго уровней оформлять с помощью тегов <hn>, а заголовки третьего уровня выделить жирным шрифтом. Выделение курсивом осуществляется с помощью тега <i> (от слова italic), а жирным шрифтом — с помощью тега <b> (от слова bold).</p> <p>В html есть также понятие emphasis — обобщенное выделение. Оформляется оно с помощью тега <em>…</em>. Такое выделение — средство описания логической структуры документа. Обычно выделенный таким способом текст отображается курсивом.</p> <p>Другим средством логического выделения можно считать тег</p> <p><strong>…</strong></p> <p>Он используется для усиления участков текста. Содержимое тега обычно отображается жирным шрифтом.</p> <p>Изменить размеры и цвет шрифтов можно с помощью тега</p> <p><font параметры>…</font></p> <p>Параметры могут быть следующими:</p> <p>size=«value или value» — задает абсолютный или относительный размер шрифта. Относительный размер задается по отношению к базовому размеру (см. далее). Диапазон принимаемых значений — от одного до семи.</p> <p>color — указывает цвет для текста.</p> <p>face — расширение microsoft internet explorer и netscape navigator. Позволяет задать гарнитуру (или список гарнитур, из имеющихся в системе шрифтов будет выбран наиболее подходящий) для текста. Конечный результат зависит от количества и разнообразия шрифтов, установленных в системе. Пример:</p> <p><font face=»arial, times roman»></p> <p>Пример выделения текста другой гарнитурой.</p> <p>Базовый размер шрифта для всего документа можно задать с помощью тега</p> <p><basefont параметры>. Параметр всего один:</p> <p>size — задает размер шрифта.</p> <p>Для того чтобы действительно привлечь пользователя, иногда может потребоваться мигающий текст. Заставить текст мигать можно, заключив его внутрь тега</p> <p><blink>…</blink></p> <p>Пользоваться этим тегом надо с некоторой осторожностью, так как не всегда приятно наблюдать мигающие объекты.</p> <p>Одной из самых мощных возможностей www является возможность организации гипертекстовых связей между документами. Прежде чем описывать средства языка html для организации таких связей, следует рассказать об идентификации ресурсов в internet. Объемы информации в internet огромны, и существует множество способов доступа к ним. Для указания местоположения отдельного ресурса используется запись под названием url (uniform resource locator). Она описывает способ доступа к ресурсу и его местоположение. url имеет вид:</p> <p>метод://[имя-пользователя@][хост][:порт][имя-ресурса], где</p> <p>метод идентифицирует метод обращения к ресурсу,</p> <p>имя-пользователя указывает на учетное имя пользователя в системе, обычно предполагается анонимный доступ.</p> <p>хост указывает сетевое имя (или сетевой адрес) хоста, на котором содержится ресурс.</p> <p>порт: номер порта для доступа к сервису.</p> <p>имя-ресурса идентифицирует ресурс на хосте и зависит от метода доступа.</p> <p>Существуют идентификаторы способов доступа к ресурсам для большинства сервисов internet. Обозначения таковы:</p> <p>http — для доступа по протоколу http, используемому в www.</p> <p>ftp — для доступа по протоколу ftp.</p> <p>telnet — для доступа по протоколу telnet, эмуляция терминала.</p> <p>gopher — для доступа к gopher-серверам.</p> <p>wais — для доступа к wais (wide area information system).</p> <p>news — для доступа к новостям usenet.</p> <p>file — для доступа к локальным файлам.</p> <p>Чтобы оформить какой-либо элемент документа в качестве гипертекстовой ссылки, достаточно лишь заключить его внутрь тега <a> (anchor). Полный синтаксис тега таков:</p> <p><a параметры></p> <p>где параметры могут быть следующими:</p> <p>href — обязательный параметр, определяет или url или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле href содержит имя файла в файловой системе web-сервера.</p> <p>target- параметр, указывающий имя окна или рамки в которой будет отображен документ. Если окна или рамки с таким именем не существует, будет открыто новое окно.</p> <p>Организация текста внутри документа</p> <p>HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде, или увеличивать левое поле. Разберем все по порядку.</p> <p>Ненумерованные списки: </p> <p>Текст, расположенный между метками , воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, чтобы создать вот такой список:</p> <p>* белая кобыла</p> <p>необходим вот такой HTML-текст:</p> <p><LI>Иван;</p> <p><LI>Данила;</p> <p><LI>белая кобыла</p> <p>Обратите внимание: у метки <LI> нет парной закрывающей метки.</p> <p>Нумерованные списки: </p> <p>Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:</p> <p><LI>Иван;</p> <p><LI>Данила;</p> <p><LI>белая кобыла</p> <p>получится вот такой список:</p> <p>— 1. Иван;</p> <p>— 2. Данила;</p> <p>— 3. белая кобыла</p> <p>Списки определений: <DL> … </DL></p> <p>Список определений несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term - определяемый термин) и <DD> (от английского definition definition - определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:</p> <p><DD>Термин HTML (HyperText Markup Language) означает</p> <p>‘язык маркировки гипертекстов’. Первую версию HTML</p> <p>разработал сотрудник Европейской лаборатории физики</p> <p>элементарных частиц Тим Бернерс-Ли.</p> <p><DT>HTML-документ</p> <p><DD>Текстовый файл с расширением *.html</p> <p>(Unix-системы могут содержать файлы</p> <p>с расширением *.htmll).</p> <p>Этот фрагмент будет выведен на экран следующим образом:</p> <p>Термин HTML (HyperText Markup Language) означает ‘язык маркировки гипертекстов’. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.</p> <p>HTML-документ</p> <p>Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).</p> <p>Обратите внимание: точно так же, как метки <LI>, метки <DT> и <DD> не имеют парных закрывающих меток.</p> <p>Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>. Например, вот такой фрагмент HTML-текста:</p> <p><DL COMPACT></p> <p><DD>Первая буква алфавита</p> <p><DD>Вторая буква алфавита</p> <p><DD>Третья буква алфавита</p> <p>будет выведен на экран примерно так:</p> <p>Первая буква алфавита</p> <p>Вторая буква алфавита</p> <p>Третья буква алфавита</p> <p>Вложенные списки</p> <p>Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует.</p> <p>Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.</p> <p><title>Пример 6

    HTML поддерживает несколько видов списков

    Ненумерованные списки

    Элементы ненумерованного списка выделяются специальным символом и отступом слева:

  • Элемент 1

  • Элемент 2

  • Элемент 3

    Нумерованные списки

    Элементы нумерованного списка выделяются отступом слева, а также нумерацией:

  • Элемент 1

  • Элемент 2

  • Элемент 3

    Списки определений

    Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.

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

    Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле.

    Форматированный текст: 

     …

    В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение.

    Текст, заключенный между метками 

    И
    (от английского preformatted - предварительно форматированный), выводится браузером на экран как есть - со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.

    Текст с отступом:

    Текст, заключенный между метками , выводится браузером на экран с увеличенным левым полем.

    Верстка таблиц

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

    Создается таблица с помощью конструкции

    • и
    и и

    … оформляются строки таблиц. Он может иметь следующие параметры:

    align — используется для задания способа горизонтального форматирования данных внутри ячеек: они могут прижиматься к правому (right), левому (left) краям или центрироваться (center).

    valign — используется для задания способа вертикального форматирования данных внутри ячеек: они могут прижиматься к верхнему (top), нижнему (bottom) краям, центрироваться (middle) или иметь общую базовую линию (baseline).

    Конкретные ячейки задаются с помощью тега

    , где параметры могут быть следующими:

    width — задает ширину ячейки.

    colspan — определяет, сколько колонок таблицы ячейка будет перекрывать.

    rowspan — определяет, сколько строк таблицы ячейка будет перекрывать.

    nowrap — если этот параметр указан, содержимое ячеек не будет переноситься, чтобы влезать в ширину ячейки.

    bgcolor — параметр, поддерживаемый современными браузерами: указывает цвет фона ячейки в виде rgb-триплета или символьного имени.

    Еще один тег для оформления ячеек таблиц — тег

    — нужен для задания заголовочных ячеек. Он во всем совпадает с тегом . Он должен быть внутри тега
    Заголовок

    Тег table начинает описание таблицы и может иметь следующие параметры:

    border — определяет толщину рамки таблицы. Если указано нулевое значение то рамка не отображается. Если этот параметр не указан, его значение считается нулевым (рамка не отображается).

    width, height — указывает размеры таблицы, если они должны быть жестко заданы.

    align — определяет, как должна быть выровнена таблица: справа (right), слева (left) или в центре (center) страницы.

    cellspacing — число точек между отдельными ячейками в таблице.

    cellpadding — число точек между рамкой и содержимым ячейки.

    С помощью тега

    … …, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.

    Если нужно задать заголовок ВСЕЙ таблицы, используйте тег

    …
    , но вне описания ячеек. Тег имеет один параметр:

    align — указывает положение заголовка: он может быть в верхней (top) или нижней (bottom) части таблицы.

    Рамки (фреймы)

    Мощным визуальным средством являются так называемые рамки или фреймы (frames). С помощью рамок область отображения браузера может быть разделена на отдельные части, содержащие различные документы. При этом возможно задание связей между рамками так, что выбор ссылки в одной рамке может приводить к отображению запрошенного документа в другой. Это позволяет создавать очень удобные в использовании документы (при неправильном применении можно также создать и очень неудобные). Рамки на сегодняшний день поддерживаются в последних версиях таких браузеров, как netscape navigator (начиная с версии 2.0) и ms internet explorer (версии 3.0 и выше), но популярность применения рамок растет, и похоже, что вскоре к этим браузерам добавятся новые.

    Рамки описываются в специальном html-документе, называемом Документом Описания Рамок. Этот документ содержит описание числа, размеров и положения рамок, а также url-и их содержимого. Нельзя пытаться вписать содержимое рамок в описание, оно должно находиться в отдельных документах.

    При описании рамок тег заменяется на тег

    описания содержимого рамок

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

    rows=«x1,x2,… или x1%,x2%,… или x1*,x2*,…» — этот параметр описывает рамки как строки различной высоты. Высоты рамок задаются списком разделенных запятыми значений. Высоты измеряются в точках, процентном отношении от общей высоты области отображения, либо как относительные величины. Сумма высот всех рамок должна быть равна высоте всей области отображения. Если этого не происходит, браузеры сами корректируют значения.

    cols=«x1,x2,… или x1%,x2%,… или *» — используется для описания рамок как столбцов различной ширины. Используется так же, как параметр rows.

    задаст две горизонтальные рамки, причем первая (верхняя) будет в три раза выше второй (нижней).

    задаст три горизонтальные рамки, причем первая (верхняя) будет иметь высоту 100 точек, третья (нижняя) будет иметь высоту 50 точек, а вторая (средняя) займет все оставшееся пространство.

    задаст две вертикальные рамки, причем первая (левая) будет иметь ширину 70% общей ширины области отображения, а вторая (правая) — 30%.

    Для задания содержимого рамки используется тег . Параметры могут быть следующими:

    src — указывает url документа, который должен быть отображен в рамке. Если параметр не указан, рамка останется пустой.

    name — значение этого параметра определяет имя для рамки. Впоследствии по этому имени на рамку можно будет сослаться с помощью параметра target тега .

    scrolling — показывает, можно ли проматывать содержимое документа в рамке. Может принимать следующие значения:

    yes — содержимое рамки МОЖЕТ проматываться.

    no — содержимое рамки НЕ может проматываться.

    auto — браузер решает, отображать линейку прокрутки или нет (исходя из длины документа). Это значение иcпользуется по умолчанию.

    noresize — если этот параметр указан, пользователь не сможет изменить размеры рамки. По умолчанию пользователь МОЖЕТ изменять размеры отображаемых рамок (например, таская границу рамки указательным устройством).

    marginwiph — указывает на величину горизонтального отступа внутри рамки.

    marginheight — указывает на величину вертикального отступа внутри рамки.

    marginwidth=5>

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

    Более полный пример:

    соответствует примерно следующей раскладке рамок в области отображения:

    Расположение рамок примера

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

    Для организации связей между рамками разработчики предусмотрели параметр target для тега . Он также может применяться в тегах , и
    .

    Картрированные изображения

    Очень мощным средством организации гипертекстовых ссылок является так называемые «картрированые изображения» (imagemaps). Они представляют собой изображения с чувствительными областями, то есть, выделение различных частей изображения указательным устройством приводит к движению по гипертексту в различных «направлениях».

    Картрированные изображения бывают двух типов: обрабатываемые на сервере (server-side) или на клиенте (client-side).

    Для создания карт на стороне клиента используется тег html под названием . Синтаксис тега таков:

    где параметры тега могут быть такими:

    shape — определяет форму активной области для карты. Может принимать значения rect, circle, poly, default, соответствующие областям прямоугольной, круглой, многоугольной и области по умолчанию соответственно. Все типы областей, кроме default, требуют указания координат в атрибуте coords.

    coords — определяет координаты областей. В зависимости от типа области может иметь вид: для прямоугольной—значения координат верхнего левого и правого нижнего углов, («x1,y1,x2,y2»); для круговой—координаты центра и радиус («x,y,r»); для многоугольной—список координат вершин («x1,y1,x2,y2,x3,y3,…»);

    href — определяет url, на который ссылается данная область.

    noref — указывает, что область «мертва», то есть за ней не скрывается ссылка.

    Чтобы использовать локальную карту на изображении в параметре usemap тега необходимо указать имя карты. Например:

    «http://www.yaxy.ru/rect/»>

    «http://www.yaxy.ru/circle»>

    href=»http://www.yaxy.ru/poly»>

    height=»480″ usemap=»#mymap»>

    даст примерно слежующую карту на изображении:

    Пример карты на изображении

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

    При использовании различных web-серверов формат описания карты на сервере может варьироваться. Два наиболее распространенных формата произошли от http-серверов ncsa и cern. Приведем пример использования карты с сервером ncsa httpd.

    На стороне сервера, файл (например) /usr/local/etc/httpd/conf/imagemap.conf:

    # this is a map for ncsa server

    test_map: /home/joe/public_html/maps/test.map

    Использовать эту карту можно примерно таким образом:

    height=200 ismap>

    Формы

    Для чего нужны формы?

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

    Cоздать форму гораздо проще, чем ту «точку внешнего мира», в которую форма будет посылать информацию. В качестве такой «точки» в большинстве случаев выступает программа, написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает «общепринятый интерфейс шлюзов». Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.

    В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

    Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

    Как устроена форма

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

    Метка
    может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

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

    Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

    Определяет, каким образом данные из формы будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded.

    Простейшая форма

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

    Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается «сабмит» с ударением на втором слоге, от английского «подавать»), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке .

    Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE=»[Надпись]» (читается «вэлью» с ударением на первом слоге, от английского «значение»), например:

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

    Пример 11

    Простейшая форма

    Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается «нэйм», от английского «имя»), например:

    При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!.

    В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.

    Как форма собирает данные

    Существуют и другие типы элементов . Каждый элемент должен включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов должны включать атрибут VALUE=»[значение]», определяющий значение, которое будет передано обработчику под этим именем. Для элементов и , однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.

    Основные типы элементов :

    Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=[число] (ширина окна ввода в символах) и MAXLENGTH=[число] (максимально допустимая длина вводимой строки в символах). Пример:

    Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст Иван, который пользователь может редактировать. Отредактированный (или неотредактированный) текст передается обработчику в переменной user.

    Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*). Пример:

    Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля - 10 символов. Введенный пароль передается обработчику в переменной pw.

    Определяет радиокнопку. Может содержать дополнительный атрибут checked (показывает, что кнопка помечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:

    9600 бит/с

    14400 бит/с

    28800 бит/с

    Определяет группу из трех радиокнопок, подписанных 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

    Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут checked (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов. Пример:

    Персональные компьютеры

    Рабочие станции

    Серверы локальных сетей

    Серверы Интернет

    Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: comp=WS и comp=IS.

    Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Другие возможные варианты использования Вы вполне можете придумать сами. Пример:

    Определяет скрытую переменную version, которая передается обработчику со значением 1.1.

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

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

    Помимо элементов , формы могут содержать меню

    Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере - address). Атрибут ROWS устанавливает высоту окна в строках (в примере - 5). Атрибут COLS устанавливает ширину окна в символах (в примере - 50).

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

    Важно знать, что русские буквы в окне

    a b c d e