Материалы представленные на сайте исключительно с целью ознакомления пользователям Интернета и не преследуют коммерческих целей или нарушение авторских прав.
© 2018 - 2024
< h 1></ h 1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Эти теги выделяют текст в виде заголовков. Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом и имеет свой размер (заголовок первого уровня самый большой, шестого - самый маленький).
Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:
left - слева,
right - справа,
center - по центру,
jastify - по ширине.
Абзацы и перенос строки
Тег <br> - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки.
Теги <p></p> разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег <p>, закрывающий тег не обязателен. В отличии от тега <br> абзацы отделяются друг от друга пустой строкой.
У тега <p> есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:
left - слева,
right - справа,
center - по центру,
jastify - по ширине.
Курсив, полужирный, подчеркивание
<cite></cite>
<dfn></dfn>
<em></em>
<i></i>
Эти теги выделяют текст курсивом, но делают они это по разным причинам. Теги <cite></cite> используются для логического выделения названий книг, статей и цитат. Теги <dfn></dfn> используются для выделения определений. Тегами <em></em> и <i></i> выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.
<strong></strong>
<b></b>
Оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый.
<ins></ins>
<u></u>
Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый.
Тег font и его параметры
Теги <font></font> указывают параметры шрифта текста:
face - название шрифта. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.
size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.
color - цвет текста (по умолчанию - черный).
Существуют два способа задания цвета: по имени и указанием шестнадцатеричного кода цвета.
Форматирование текста
Теги <abbr></abbr>указывают на то, что текст является аббревиатурой. По умолчанию текст подчеркивается пунктиром, а при наведении на него курсора мыши появляется всплывающая подсказка с расшифровкой аббревиатуры. Это достигается добавлением в тег параметра title, в качестве значения которого и выступает расшифровка. Теги <acronym></acronym>ведут себя аналогично тегам <abbr></abbr>, но поддерживаются всеми браузерами.
Теги <address></address>применяются для указания адреса. Отображается курсивом с новой строки.
Теги <code></code>используются при необходимости вывести на экран фрагмент программного кода.
Теги <del></del>делают текст перечеркнутым. Аналогично ведут себя теги <strike></strike>и теги <s></s>, но они не рекомендуются к использованию спецификацией HTML 4.0.
Теги <q></q>выделяют короткие цитаты.
Теги <big></big>выводят текст большего размера, чем остальная часть текста. Теги <small></small>выводят текст меньшего размера, чем остальная часть текста.
Тег <hr> рисует горизонтальную линию, отделенную сверху и снизу пустыми строками.
Теги <pre></pre>используются тогда, когда необходимо отобразить текст так, как он набран.
Специальные символы
& lt ; - знак "меньше"
& gt ; - знак "больше"
& nbsp ; - непрерывный пробел
& copy ; - знак "copyright"
& amp ; - знак "амперсанд"
& laquo ; - левая открывающаяся кавычка
& raquo ; - правая закрывающаяся кавычка
& uarr ; - стрелка вверх
& rarr ; - стрелка вправо
& darr ; - стрелка вниз
& larr ; - стрелка влево
& harr ; - двунаправленная стрелка влево-вправо
Ссылки
Ссылка - одно из важнейших понятий для html-документов. За переходы отвечает тег-контейнер <a></a>, а за то, куда направить пользователя по щелчку - его атрибут href.
При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. В нашем примере абсолютный адрес страницы index.html следующий:
<a href="http://www.mysite.ru/public/index.html">
При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Например, если мы хотим разместить ссылку со страницы index.html (исходный файл) на страницу articles.html, то, учитывая, что обе страницы лежат в одном каталоге (т.е имеют один уровень), она будет выглядеть следующим образом:
<a href="articles.html">
Если же мы захотим сделать ссылку со страницы index.html на страницу price.html, то, учитывая, что страницы лежат в разных каталогах, она будет выглядеть следующим образом:
<a href="../private/price.html">
По умолчанию ссылки загружаются в то же окно, но если указать параметр target="_blank", то ссылка загрузится в новое окно.
Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Для таких переходов следует создать пустую ссылку с параметром name там, куда следует перейти. И ссылку с указанием этого имени (после знака #) в качестве адреса параметра href там, откуда следует перейти.
У ссылок есть параметр title, в качестве значения которого можно указать текст, который будет выводиться в качестве подсказки, если подвести курсор мыши к ссылке.
Нумерованные списки
Такой список представляет собой перечень "пронумерованный" каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы. Чтобы указать браузеру, что список будет нумерованным, используются теги <ol></ol>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
<ol>
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ol>
По умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:
- type="A" - нумерация заглавными латинскими буквами (A, B, C).
- type="a" - нумерация прописными латинскими буквами (a, b, c).
- type="I" - нумерация большими римскими цифрами (I, II, III).
- type="i" - нумерация маленькими римскими цифрами (i, ii, iii).
Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).
Маркированные списки
В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги <ul></ul>. Весь список располагается между этими тегами и каждый его пункт задается тегами <li></li>.
<ul>
<li>кошки</li>
<li>собаки</li>
<li>лошади</li>
</ul>
По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:
- type="disc" - закрашенный кружочек.
- type="circle" - пустой кружочек.
- type="square" - закрашенный квадратик.
Если нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).
Работа с изображениями
Фоновое изображение заполняет собой все пространство элемента для которого оно задано. Так, указав в теге <body> атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера.
Для размещения на странице изображений используется тег <img>, имеющий единственный обязательный параметр src, определяющий URL-адрес изображения.
Для выравнивания изображений используется параметр align. Онимеетследующиезначения: "left", "right", "top", "texttop", "middle", "absmiddle", "bottom", "absbottom".
Любое изображение имеет размер, заданный в пикселах. Для этого у тега <img> существуют параметры width - ширина и height - высота. Они задаются в пикселах или в процентах.
Вы, наверно, обратили внимание, что текст очень близко прилипает к картинкам. Это не всегда красиво. Для решения проблемы прилипания текста к картинкам имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.
Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик (в Internet Explorer) или другую иконку (в других браузерах). Чтобы дать ему подсказку, что изображено на рисунке, используется параметр alt.
Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера <a>. В примере наша картинка будет ссылаться на страницу html_example1.html, которая будет открываться в отдельном окне.
<a href="html_example1.html" target="_blank">
<img src="../images/fish.gif" alt=" рыбка ">
</ a >
Работа с таблицами
Таблица - один из основных инструментов для создания web-страниц. Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном.
<table>
<caption> Названиетаблицы </caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</ table >
Для оформления у тега < table > существует ряд параметров:
width - задает ширину таблицы (в пикселах или % от ширины экрана),
bgcolor - задает цвет фона ячеек таблицы,
background - заливает фон таблицы рисунком,
border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы,
align - задает выравнивание таблицы: слева (right), справа (left), по центру (center),
cellspacing - задает расстояние между ячейками таблицы (в пикселах),
cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
За границы отвечают два параметра:
frame - задает вид рамки вокруг таблицы и может принимать следующие значения: void, above, below, hsides, vsides, lhs, rhs, box,
rules - задает вид внутренних границ таблицы и может принимать следующие значения: none, groups, rows, cols, all.
У ячеек можно указать размер: width - задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина таблицы), height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты. Параметр colspan указывает, сколько столбцов занимает ячейка. Аналогично rowspan – для строк.
HTML формы
Формы дают возможность пользователям вводить информацию. В html форма задается тегами <form></form>. Все остальные элементы формы располагаются между этими тегами.
У тега <form> есть несколько параметров:
name - имя формы. Необходимо, если на странице несколько форм,
action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем,
method - определяет способ отправки информации,
target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.
< formname =" forma "></ form >
Текстовоеполе
Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задаетсятегом<input>
<form name="forma">
<input type="text" name="text1" size="20" maxlength="50" value=" Введитетекст ">
</ form >
Параметры:
name - имя элемента,
type - тип элемента (в данном случае - text),
size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым,
disabled - блокирует поле от любых изменений,
readonly - делает поле доступным только для чтения.
Для ввода паролей используется текстовое поле с параметром type =" password ".
Чекбокс
< formname =" forma ">
Какими языками вы владеете:< br >
<input type="checkbox" name="lan1" value="english" checked> английский
<input type="checkbox" name="lan2" value="german"> немецкий
<input type="checkbox" name="lan3" value="spanish"> испанский
<input type="checkbox" name="lan4" value="french"> французский
</ form >
Рассмотрим параметры:
type - тип элемента (в данном случае - checkbox),
name - имя элемента, указывает программе-обработчику формы, какой пункт выбрал пользователь,
value - значение элемента, указывает программе-обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",
checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.
Радиокнопки
В отличие от чекбоксов, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type =" radio ", все остальные аналогичны.
< formname =" forma ">
Укажитевашпол:< br >
<input type="radio" name="sex" value="man" checked> мужской
<input type="radio" name="sex" value="woman"> женский
</ form >
Кнопки
Существует четыре вида кнопок:
submit - кнопка отправки содержимого формы web-серверу. Ее параметры: type="submit" - тип кнопки, name - имя кнопки, value - надпись на кнопке.
image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры: type="image" - тип графической кнопки, name - имя кнопки, src - адрес картинки для кнопки.
reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры: type="reset" - тип кнопки очищения, name - имя кнопки, value - надпись на кнопке.
button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры: type="button" - тип произвольной кнопки, name - имя кнопки, value - надпись на кнопке, onclick - указывает, что делать при щелчке по кнопке. Также у этого типа кнопок есть и другие события (например, двойной щелчок).
<form name="forma">
<input type="submit" name="submit" value=" Отправить ">
<input type="image" name="but_img" src="but.gif">
<input type="reset" name="reset" value=" Очистить ">
<input type="button" name="button" value=" Отправить ">
</ form >
Файлы и многострочный ввод
Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.
<form name="forma">
<input type="file" name="load" size="50">
</form>
Для объемных текстов, например, для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами <textarea></textarea> и имеет следующие параметры:
name - имя поля,
cols - ширина поля в символах,
rows - количество строк текста, видимых на экране,
wrap - способ переноса слов: off - переноса не происходит, virtual - перенос отображается, но на сервер поступает неделимая строка, physical - перенос и на экране и при поступлении на сервер,
disabled - неактивное поле,
readonly - разрешено только чтение.
<form name="forma">
<textarea cols="20" rows="3" wrap="off">
</ form >
Раскрывающиеся списки
Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов < select ></ select >, внутри которых располагаются элементы значений, заданных тегом < option >. Рассмотрим параметры этих тегов:
< select >:
name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option,
size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки,
multiple - разрешает выбор нескольких элементов списка.
< option >:
selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов,
value - значение, которое будет отправлено серверу, если пункт выбран.
< formname =" forma ">
Какой язык вы хотите изучать:
<select name="language" size="1">
<option selected value="html">html
<option value="php">php
<option value="java">java
</ select >
</ form >
Навигационные карты
Многие html-страницы используют для организации ссылок так называемые карты-изображения. При таком подходе берется изображение и к различным его областям привязываются ссылки.
Для описания таких областей используются теги <map></map> с единственным параметром name, который задает имя карты ссылок и используется потом для ссылки на эту карту. Карту надо подключить к картинке, для этого в тег <img> надо добавить параметр usemap, в качестве значения которого выступает имя карты после значка #:
<body>
<img src="map.gif" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="550,135,590,192" href="#" alt="area1">
<area shape="rect" coords="591,90,660,192" href="#" alt="area2">
<area shape="rect" coords="661,0,730,192" href="#" alt="area3">
</map>
</body>
Для описания конкретных областей внутри тегов <map></map> используются теги <area>. Этот тег имеет следующие параметры:
shape - определяет форму области, может принимать следующие значения: rect - область в виде прямоугольника, circle - область в виде круга, poly - область в виде многоугольника, default - вся область.
coo r ds - задает координаты отдельной области: для rect задаются координаты верхнего левого и правого нижнего углов прямоугольника, для circle задаются координаты центра круга и радиус, для poly задаются координаты вершин многоугольника в нужном порядке.
href - определяет адрес ссылки.
target - применяется при использовании фреймов и указывает фрейм в который нужно загрузить страницу.
alt - задает альтернативный текст для области.
CSS
HTML - это язык разметки, но его создатели так хотели облегчить жизнь разработчиков сайтов, что добавляли в него элементы и параметры, отвечающие за внешний вид страницы: теги <font>, <b>, <i>, <bgcolor> и так далее. На какой-то момент код страниц стал слишком громоздким и нечитабельным. Тогда было принято решение разделить разметку страницы (HTML) и ее визуальное оформление (CSS).
CSS (Cascading Style Sheets) - каскадные таблицы стилей. Стиль - набор параметров, задающий внешнее представление объекта.
Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст). Набор стилей всех элементов называют таблицей стилей. Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование, которое определяет приоритет того или иного стиля.
Преимущества CSS
• CSS позволяет значительно сократить размер кода и сделать его читабельным.
• CSS позволяет задавать такие параметры, которые нельзя задать только языком HTML. Например, убрать подчеркивание у ссылок.
• CSS позволяет легко изменять внешний вид страниц. Представьте, вы сделали сайт из 50 страниц, на которых все заголовки синего цвета. Через какое-то время, вы захотели поменять синий цвет на зеленый. Вам придется пройтись по всем 50 страницам и поменять цвет в соответствующем атрибуте. С CSS вам придется сделать это лишь один раз, в таблице стилей.
С CSS связана так называемая блочная верстка сайта.
Подключение CSS к HTML
Внешние таблицы стилей
Нам надо подключить страницу style.css к html-странице. Для этого в html существует тег < link >, который и отвечает за подключение внешних файлов.
<head>
<title> Подключение CSS к HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</ head >
Внутренние таблицы стилей
Так называют таблицу стилей, заданную внутри элемента HTML, при помощи атрибута style.
<h1 style="color:red">Это заголовок красного цвета</h1>
Недостаток этого способа очевиден: параметр style придется задавать каждому заголовку. Таким образом, теряется преимущество использования CSS.
Встроенные таблицы стилей
При этом способе таблица стилей встраивается в заголовок html-страницы. Для этого в HTML существуют теги <style></style>, с параметром type, который указывает, что подключается именно таблица стилей CSS (существуют и другие).
<head>
<title> Подключение CSS к HTML</title>
<style type="text/css"> h1 { color:red } </style>
</ head >
< body >
< h 1>Этот заголовок будет красного цвета</ h 1>
< h 1 style =" color : blue ">Этот заголовок будет синего цвета</ h 1>
</ body >
Правила и селекторы CSS
CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки. Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой.
body {
background: blue;
color: white;
}
h1 {
color : red ;
}
В HTML идентификатор элемента задается при помощи параметра id, в качестве значения которого указывается уникальное имя.
p # pink { color : pink ; }
<p id="pink">Текст параграфа с идентификатором (id).</p>
Если нужно, чтобы розовый цвет текста был у двух или трех параграфов, то для этого в HTML существует параметр class, в качестве значения которого указывается имя стиля.
p . pink { color : pink ; }
Контекстный селектор
pi { color:green; }
p>i { color:green; }
Группировка селекторов
h 1, h 2, h 3 { color : green ; }
Дата: 2019-02-19, просмотров: 266.