Язык HTML(Hyper Text Markup Language)—язык разметки гипертекста— используется при подготовке документов Всемирной паутины. В отличие от обычных текстов гипертекстовые Web-документы содержат специальные команды, задающие структуру документа - теги. Команды HTML вставляются в текст документа и определяют логический статус отдельных фрагментов текста. Так, например, в Web-документе отдельные части текста могут быть помечены как заголовки различных уровней, отдельные абзацы, списки. Имеются также команды, позволяющие вставить в документ различные объекты (изображения, звуки, анимацию) и установить гипертекстовые связи с другими Web-документами.
Общий синтаксис написания тегов следующий
Теги бывают двух видов:
одиночные (одиночный тег используется самостоятельно)
парные (парный тег может включать внутри себя другие теги или текст)
Теги заключены в угловые скобки. Парный тег имеет две части: открывающую (<html> - начало Web-документа) и закрывающую (</html> - конец Web-документа) с добавлением косой черты. Язык HTML не различает большие и малые буквы, так, что теги <HEAD>, <head> и <Head> эквивалентны. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, <H1 ALIGN="center">Самый большой заголовок по центру</H1>.
<html>...</html> – теги, являющиеся признаком начала и конца документа. Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.
<head>...</head> – эта пара тегов указывает на начало и конец заголовка документа (Web-страницы). Помимо наименования в этот раздел может включаться множество служебной информации.
<title>...</title> – все, что находится между тегами <title> и </title>, толкуется браузером как название документа. Текст, размещенный за тегом <title>, отображается в заголовке окна браузера.
<body>...</body> – эта пара меток указывает на начало и конец тела HTML-документа и определяет содержание документа (Web-страницы).
Структура html-документа:
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Текст документа
</body>
</html>
Основные теги для создания и форматирования абзацев в HTML-документе. Примеры использования.
Начало абзаца задает тег <Р>. Закрывающий тег </P> не обязателен. Текст в абзаце может быть выровнен по левому краю, по правому краю, по ширине и по центру. Для этого применяют атрибут ALIGN:
Например: <p align="left">абзац выровнен по левому краю...</p>
<p align="right">абзац выровнен по правому краю...</p>
<p align="center">абзац выровнен по центру...</p>
<p align="justify">абзац выровнен по ширине...</p>
Каждый следующий тег абзаца отменяет форматирование предыдущего. При просмотре в браузере новый абзац будет отделен от предыдущего пустой строкой. Если нужно, чтобы абзацы шли без пустой строки и чтобы выравнивание распространялось и на следующий абзац, вместо нового абзаца используют тег обрыва строки (break) <BR>.
Для форматирования абзацев можно пользаваться так же тегом создания раздела (division) <DIV>. Он работает точно так же, как и <Р>, в нем можно использовать параметр выравнивания ALIGN, но между двумя соседними разделами не оставляется пустая строка. Здесь закрывающий тег необходим - </DIV>.
Например: <DIV ALIGN="center">
...Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
Для центровки абзаца есть специальный тег <CENTER>...</CENTER>. Все, что находится между этими двумя тегами, центруется: рисунок, таблица, линейка, текст.
Шесть стандартных тегов предусмотрено для оформления заголовков: <H1>, <H2>,...,<H6>. Причем у <Н1> - самый крупный шрифт, а <Н6> - самый мелкий. Все они могут иметь параметр выравнивания ALIGN.
Например: <h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>
Есть так же особое оформление для цитат - тег <BLOCKQUOTE>. Все что расположено между открывающим и закрывающим тегом, будет сдвинуто по правому краю и отделено от предыдущего и последующего текста пустой строкой.
Чтобы сделать абзацный отступ, необходимо ставить вместо простых пробелов неразрывные, которые и создадут абзацный отступ. Неразрывный пробел в HTML - обязательно маленькими буквами.
Тег <pre> используется, когда требуется написать текст как есть, включая все пробелы и переносы строки.
Например: <pre>Идет бычок, качается,
Вздыхает на ходу...</pre>
Основные теги для создания свойств шрифтов и заголовков в HTML-документе. Примеры использования.
Тег <B> отображает текст полужирным шрифтом. Например: Это <B>полужирный</B> шрифт.
Тег <I> отображает текст курсивом. Например: Выделение <I>курсивом</I>.
Тег <TT> отображает текст моноширинным шрифтом. Например: Это <TT>моноширинный</TT> шрифт.
Тег <U> отображает текст подчеркнутым. Например: Пример <U>подчеркивания</U> текста.
Теги <STRIKE> и <S> отображают текст, перечеркнутый горизонтальной линией. Например: Пример <STRIKE>зачеркнутого</STRIKE> текста.
Тег <BIG> выводит текст шрифтом большего (чем непомеченная часть текста) размера. Например: Шрифт <BIG>большего</BIG> размера.
Тег <SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Например: Пример шрифта для <SUB>нижнего</SUB> индекса.
Тег <SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера. Например: Пример шрифта для <SUP>верхнего</SUP> индекса.
Тег <FONT> указывает параметры шрифта. Для тега могут задаваться следующие параметры: FACE (указывает тип шрифта, которым программа просмотра пользователя будет выводить текст), SIZE (указывает размер шрифта в условных единицах от 1 до 7) и COLOR (указывает цвет шрифта).
Например:
<FONT FACE="Verdana", "Arial", "Helvetica">
<FONT SIZE=1>Шрифт размера 1</FONT><BR>
<FONT COLOR=green>Текст зеленого цвета</FONT><BR>
Основные теги для создания таблиц в HTML-документе. Примеры использования.
Таблицы довольно широко применяются при создании веб-страниц: они служат не только способом представления и упорядочения данных, но и являются инструментом форматирования страниц - их используют для создания каркаса страницы - применяют табличную верстку.
Таблицы в HTML определяются с помощью тэга <table>. Тэг <tr> позволяет создать в таблице строку, а тэг <td> добавить в эту строку ячейку с данными. По умолчанию таблицы отображаются без границ. Для того, чтобы отобразить границу необходимо использовать атрибут border="1". В ячейках таблиц может располагаться не только обычный текст, но и картинки, ссылки и другие таблицы.
Например:
<table border="1">
<tr>
<td>Россия</td>
<td>141</td>
</tr>
<tr>
<td>США</td>
<td>309</td>
</tr>
<tr>
<td>Китай</td>
<td>1338</td>
</tr>
<tr>
<td>Великобритания</td>
<td>61</td>
</tr>
</table>
С помощью тэга <th> Вы можете создать табличный заголовок. Текст элемента th центрируется и выделяется жирным шрифтом.
Например:
<table border='1'>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</table>
С помощью атрибута colspan Вы можете указать, на сколько столбцов должна быть растянута указанная ячейка.
Например:
<table border="1">
<tr>
<td> Ячейка 1 </td>
<td> Ячейка 2 </td>
</tr>
<tr>
<td colspan="2"> Ячейка 3 растянутая на 2 столбца </td>
</tr>
</table>
С помощью атрибута rowspan Вы можете указать на сколько строк должна быть растянута указанная ячейка.
Например:
<table border="1">
<tr>
<td rowspan="2"> Ячейка 1 растянутая на две строки </td>
<td> Ячейка 2 </td>
</tr>
<tr>
<td> Ячейка 3 </td>
</tr>
</table>
Основные теги для создания маркированных и нумерованных списков в HTML-документе. Примеры использования.
Маркированные списки - это списки, в которых элементы списка отмечаются маркерами.
Для установки маркированного списка используются теги <ul> и <li>
Тег <ul> - unordered list (неупорядоченный список).
Тег <li> - list item (элемент списка)
Код, написанный таким образом
<ul>
<li> Книги </li>
<li> Электроника </li>
<li> CD и DVD </li>
</ul>
будет отображен на экране так:
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется параметр type=... тега <ul>.
Нумерованные (или упорядоченные) списки представляют собой списки из пронумерованных пунктов.
Для установки нумерованного списка используется тег <ol> вместо <ul>
Тег <ol> - ordered list (упорядоченный список).
Самый простой список имеет следующий код:
<ol>
<li> Выйдете на станции метро Войковская. </li>
<li> Сядьте на троллейбус 57 маршрута.</li>
<li> Выйдете на четвертой остановке. </li>
<li> Перейдите дорогу. Я Вас буду ждать у киоска.</li>
</ol>
На экране он отобразится так:
Вид и тип нумерации зависит от параметров тега <ol>
Код HTML Отображение на экране
<ol start="5">
<ol type="A"> Заглавные латинские буквы:
<ol type="a"> Прописные латинские буквы:
<ol type="I"> Cписок с римскими буквами:
Вложенный список - это список, размещенный внутри другого списка.
Например, код
<ol>
<li> Крупные города России:
<ul type="square">
<li> Москва
<li> Санкт-Петербург
</ul>
<li> Крупные города Украины:
<ul type="square">
<li> Киев
</ul>
</ol>
отобразится на экране так:
Списки определений являются способом определения терминов и понятий. Списки определений состоят из трех элементов: элемента списка определений <dl> ... </dl>, элемента определения термина <dt> ... </dt>, элемента определения описания <dd> ... </dd>.
Структура пользовательской формы. Основные теги для создания элементов управления формой в HTML-документе. Примеры использования.
На Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей сайта. Пример тому – гостевая книга, – которая обеспечивает обратную связь с посетителями и разработчиками сайта.
HTML формы могут содержать такие элементы ввода как:
– Текстовые поля
– Флажки
– Радио-кнопки
– Кнопки отправления
– Списки выбора
– Многострочные текстовые поля
– Метки
<form> создание формы.
Например:
<form>
<p>Введите ваше имя:</p>
<input type="text" />
<p>Введите пароль: </p>
<input type="password" />
</form>
<input type="text" /> определяет однострочное текстовое поле, в которое пользователь может вводить различную информацию.
<input type="password" /> определяет поле для ввода пароля. Содержимое вводимое в данное поле закрывается черными кружками позволяя вводить пароли даже в присутствии посторонних.
<input type="checkbox" /> определяет флажок. Флажки позволяют пользователям выбирать несколько пунктов с предварительно заполненной информацией из группы.
Например:
<form>
<p> Как вы относитесь к полетам в космос? </p>
<input type="checkbox" name="space" value="1" />
Положительно, всегда хотел полететь в космос<br />
<input type="checkbox" name="space" value="2" />
Безразлично, никогда не думал об этом серьезно <br />
<input type="checkbox" name="space" value="3" />
Отритцательно, меня с детства отталкивают мысли о космосе <br />
</form>
<input type="radio" /> определяет радио кнопку. Радио кнопки позволяют пользователям выбрать только один пункт с предварительно заполненной информацией из группы.
<input type="submit" /> определяет кнопку отправления. После нажатия на данную кнопку данные введенные пользователем будут отправлены на сервер. Адрес, на который будут пересылаться данные формы указывается в атрибуте тэга form - action. Если данный атрибут отсутствует данные будут отправлены на текущую страницу.
Для создания выпадающих списков используется тэг <select>, а элементы выпадающего списка определяются с помощью тэга <option>.
Например:
<p> Выберите ваш пол </p>
<form>
<select name="sex" >
<option value="m"> Мужской </option>
<option value="f"> Женский </option>
</select>
</form>
С помощью атрибута multiple Вы можете указать, что в выпадающем списке могут быть выбраны одновременно несколько элементов.
Например:
<p>В данном списке может быть одновременно выбрано несколько значений (для этого зажмите клавишу Ctrl и щелкайте на необходимые элементы): </p>
<form>
<select name='city' multiple='multiple'>
<option value='london'>Лондон</option>
<option value='moscow'>Москва</option>
<option value='newyork'>Нью Йорк</option>
</select>
</form>
Для того, чтобы озаглавить группу элементов формы, Вы должны с помощью тэга <fieldset> сгруппировать желаемую часть формы и затем с помощью тэга <legend> установить желаемое заглавие.
Тег <I> отображает текст курсивом. Например: Выделение <I>курсивом</I>.
