Web программирование 1

Курс: Web программирование
История HTML
Рабочая группа по разработке Гипертекстовых Прикладных

Технологий в Веб (WHATWG) начала работу над новым
стандартом в 2004 году, когда World Wide Web Consortium (W3C)
сосредоточился на будущих разработках XHTML 2.0.
В 2009 году W3C признал, что срок работы у рабочей группы
XHTML 2.0 истек, и решил не возобновлять его. В настоящий
момент W3C и WHATWG работают вместе над разработкой
HTML5.
Курс: Web программирование 2
Структура языка HTML
Для создания страниц в Интернете служит язык
гипертекстовой разметки (HTML — HiperText Markup Language).
Каждый сайт, конечно, индивидуален, однако существуют общие
правила построения HTML-страниц, следовать которым нужно
обязательно.
Существуют общие правила записи HTML-документов и общие
понятия, используемые при создании сайтов.
ТЕГ АТРИБУТ

Тег
Основой языка HTML является тег. Этот элемент несет в себе
определенную информацию, может описывать документ в
общем или способ форматирования текста. Все содержимое
веб-страниц задается и редактируется с помощью тегов.
Тег помещается в угловые скобки <ТЕГ>. Иногда необходимо
задать парный закрывающий тег, который пишется так: </ТЕГ>. В
некоторых случаях закрывающий тег вообще не требуется, а
иногда его можно пропустить. Однако для корректной обработки
документа рекомендуется всегда использовать закрывающий
тег.
Информация, заключенная между открывающимся и
закрывающимся тегом, называется его контейнером.
<p>текст абзаца</p>
<img>

Атрибут
Атрибуты сообщают браузеру, каким образом должен
отображаться тот или иной элемент страницы. Атрибуты
позволяют сделать более разнообразным внешний вид
информации, добавляемой с помощью одинаковых тегов.
Следует отметить, что в некоторых случаях использование тега
без атрибутов не дает результатов.
Чтобы задать выравнивание абзаца, используется атрибут
align тега <p>.
<p align="left">выравнивание по левому краю</p>

<p align="right">выравнивание по правому краю</p>

Структура HTML-документа
Тег <!DOCTYPE>
Этот тег записывается в начале HTML-файла. Он описывает
создаваемый документ и предоставляет основную информацию
для браузера.
XHTML1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
<!DOCTYPE html>

Тег <HTML>
Главным структурным тегом страницы является тег <HTML>, все
содержимое страницы записывается внутри его контейнера. Все,
что находится за пределами тегов <HTML> и </HTML>, не
воспринимается браузером как код HTML и никак им не
обрабатывается.
<!DOCTYPE html>
<html>

</html>

Тег <HEAD>
Тег <HEAD> используется для служебных целей, введенная в
нем информация не отображается в окне браузера, однако он
содержит множество данных, которые указывают браузеру, как
следует обрабатывать страницы.
Некоторые теги, которые можно использовать внутри блока тегов
<HEAD>.
Тег Описание
<title> Задает заголовок окна, требует закрывающего тега
<meta> Задает различную служебную информацию
<script> Позволяет добавлять сценарии
<link> Задает ссылку на таблицы стилей
<style> Позволяет добавить стили для страницы

Тег <BODY>
Внутри блока тегов <BODY> располагается документ.
Находящийся внутри этих тегов текст будет отображаться
браузером. Все теги, отвечающие за форматирование
документа, помещают в тег <BODY>, то есть внутри него будет
находиться тело документа.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>документ HTML5</title>
</head>
<body>
<p>Дадим встряску браузеру в стиле HTML5!</p>
</body>
</html>
Ввод и оформление текста
Заголовок — важный элемент сайта, который помогает
систематизировать текст. В HTML можно создавать заголовки
разных уровней, что позволяет легко выделять смысловые темы
и подтемы. Текст в заголовках влияет на индексацию сайта
поисковыми системами, так как многие роботы при поиске
обращают внимание именно на содержимое заголовков сайтов.
Заголовки создаются тегами <H1>, <H2>, <H3>, <H4>, <H5> и
<H6>. По умолчанию заголовок самого верхнего уровня
выделяется самым крупным шрифтом. Чем ниже уровень
заголовка, тем меньше шрифт.
Значения атрибута ALIGN следующие:
left — по левому краю;
right — по правому краю;
center — по центру;
justify — по ширине (для заголовков длиннее строки).
Обрывы строк
Для переноса текста на новую строку служит тег <BR>. Он не
требует закрывающего тега, однако рекомендуется записывать
его как <BR />, чтобы все программы отображали его корректно.
<html>
<head>
<title>Обрыв строки</title>
</head>
<body>
Наша Таня громко плачет,<br />
Уронила в речку мячик.<br />
</body>
</html>

Списки
Списки предназначены для организации и группировки
данных.
В HTML можно выделить несколько типов списков, отличных
по внешнему представлению информации:
•маркированный;
•нумерованный;
•список определений.

Маркированный список
Списки предназначены для организации и группировки
данных.
Для создания маркированных списков HTML предусматривает
тег <UL>. Каждый элемент начинается с тега <LI>.
У тега <UL> есть атрибут TYPE, определяющий вид маркера
списка.
circle — создает маркер в виде круга;
square — создает маркер в виде квадрата;
disc — создает маркер в виде закрашенного черным круга.
<ul type="circle"> <ul>
<li>Венера</li> <li type="circle">Земля</li>
<li>Земля</li> <li type="square">Солнце</li>
</ul> <li type="disc">Луна</li>
</ul>

Нумерованный список
Для создания упорядоченных списков применяется тег <OL>.
Значения атрибута TYPE следующие:
A - пункты нумеруются заглавными буквами латинского
алфавита;
a - пункты нумеруются строчными буквами латинского
алфавита;
I - пункты нумеруются заглавными римскими цифрами;
i - пункты нумеруются строчными римскими цифрами;
1 - пункты нумеруются арабскими цифрами.
Вторым атрибутом тега <OL> является атрибут START,
который указывает, с какого числа следует начинать нумерацию
списка.

Нумерованный список
<ol type="1" start="6">
<li>Достать ключ</li>
<li>Вставить ключ в замочную скважину</li>
<li>Повернуть ключ по часовой стрелке на два
оборота</li>
<li>Достать ключ из замка</li>
<li>Открыть дверь</li>
</ol>

Список определений
это особый вид списка, который применяется для
форматирования словарей и в случаях, когда необходимо
пояснить значения терминов.
Для организации списков определений служит тег <DL> — это
тег-контейнер, внутри которого находятся определение и
описание термина.
Чтобы внести информацию внутри тега-контейнера <DL>,
надо задать теги <DT> и <DD>. Тег <DT> используется для того,
чтобы задать определение. Тег <DD> используется для
описания термина из тега <DT>.

Список определений
<dl>
<dt>Земля</dt>
<dd>Третья планета Солнечной системы</dd>
<dt>Марс</dt>
<dd>Четвертая планета Солнечной системы</dd>
</dl>

Ссылки
Существует два типа ссылок: внешние и внутренние. Внешние
ссылки связывают страницы и помогают осуществлять
навигацию. Внутренние ссылки дают возможность передвигаться
в рамках одной страницы. Для создания ссылок в HTML служит
тег <A>. <a href="#met1">Кликните для
<a href="aboutme.html"> перехода к метке 1 </a> <br />
Обо мне </a> <a name="met1">Это метка для
перехода 1 </a>

Ссылки
Значения атрибута TARGET следующие:
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_self — страница загружается в текущее окно;
_top — страница загружается в полное окно браузера.
<a href="aboutme.html" target="_blank" title="Пройдя по
ссылке, вы сможете узнать обо мне">Обо мне</a>

Форматирование текста
Существует множество тегов для форматирования текста. Их
можно разделить на две группы: логические и физические.
Отличие этих групп друг от друга принципиальное.
Логические теги сообщают браузеру о том, какой тип
информации в них содержится, например важный текст или
цитата. Браузер решает, как отобразить такой текст.
Физические теги просто говорят браузеру, как должен
выглядеть тот или иной блок текста, не уточняя смысл и
значимость его содержимого.

Теги логического форматирования
Тег <ABBR> определяет текст как аббревиатуру с помощью
атрибута TITLE. Вы можете задать всплывающую подсказку с
расшифровкой аббревиатуры. При этом поисковые роботы
индексируют именно полный вариант расшифровки,
определенный атрибутом TITLE.
Тег <ACRONYM> указывает, что текст является акронимом.
Атрибут TITLE позволяет задать расшифровку акронима.
Тег <CITE> отмечает небольшую цитату или сноску, взятую из
другого источника. Такой текст обычно отображается курсивом.
Тег <CODE> указывает на программный код, который может
содержать, например, переменные, функции или небольшие
куски программы. Такой текст обычно выводится моноширинным
шрифтом.

Тег <DEL> помечает текст как удаленный. Он может
использоваться при внесении изменений в документы. Этот тег
имеет два атрибута: CITE, содержащий URL-адрес документа, в
котором описаны причины удаления фрагмента, и DATETIME,
включающий дату и время удаления фрагмента в формате ГГГГ-
ММ-ДДTчч:мм:ссTZD.
<del cite="whydel.html" datetime="2007-10-06T10:11:45
+3.00"> Неактуальный фрагмент</del>
Тег <DFN> выделяет текст как определение. Этот тег можно
использовать, если новый термин встречается в тексте впервые
и тут же дается его определение. Браузер отображает такой
текст курсивом.
<dfn>Определение</dfn>-описание

Тег <EM> выделяет важные фрагменты текста. Браузер
отображает такой текст курсивом.
Тег <INS> отмечает текст как вставку, применяется для
выделения изменений, вносимых в документ. У этого тега есть
два атрибута: CITE и DATETIME.
Тегом <KBD> помечается текст, вводимый пользователем с
клавиатуры. Браузеры такой текст отображают моноширинным
шрифтом.
Тег <Q> обозначает текст как цитату, используется для
добавления коротких цитат в текст. Обычно такой текст
отображается курсивом, некоторые браузеры заключают его в
кавычки.
Тег <SAMP> определяет выделенный текст как пример,
обычно используется для выделения результатов работы
программы.
Тег <STRONG> предназначен для постановки акцента на
тексте. Такой текст браузеры выделяют полужирным шрифтом.
Тег <VAR> используется для выделения переменных из
программ. Браузер отмечает такой текст курсивом.

<abbr title="Научно-исследовательский институт"> НИИ
</abbr><br />
<acronym> СНГ </acronym><br />
<cite> Здесь указан источник информации </cite><br />
Зададим функцию <code>func(int a, char b);</code><br />
<del cite="whydel.html" datetime="2007-10-
06T10:11:45+3.00">Неактуальный фрагмент </del><br />
<dfn> Определение </dfn>-описание <br />
<em> Важно </em><br />
<ins cite="whyadd.html" datetime="2007-10-
06T10:11:45+3.00"> Новый фрагмент </ins><br />
Введите слово <kbd> дом </kbd><br />
Цитата: <q> Как сказал поэт </q><br />
<samp> Образец </samp><br />
<strong> Очень важный фрагмент </strong> <br />
Введите переменную <var> X </var>


Теги физического форматирования
<b>Полужирный шрифт</b>
<i>Курсив</i>
<tt>Моноширинный шрифт</tt>
<u>Подчеркнутый</u>
<s>Зачеркнутый</s>
<strike>Снова зачеркнутый</strike>
Шрифт <big>побольше <big>
Еще больше</big></big>
Шрифт <small>поменьше</small>
<sub>Подстрочный</sub> шрифт
<sup>Надстрочный</sup> шрифт

Теги форматирования
Физический тег Логический тег Действие на текст

B STRONG Полужирный
I EM, DFN, VAR, CITE Курсив
TT CODE, SAMP, KBD Моноширинный
U INS Подчеркнутый
S, STRIKE DEL Зачеркнутый
BIG нет Увеличение шрифта
SMALL нет Уменьшение шрифта
SUB нет Подстрочный
SUP нет Надстрочный

Теги форматирования больших блоков текста
Тег <FONT> задает параметры шрифта для текста внутри
своего блока. Для форматирования предпочтительней
использовать таблицы стилей, однако некоторые простые
документы допускают и такое определение параметров текста.
За шрифт отвечает атрибут FACE, его значением должно
быть название шрифта. Для решения проблемы несоответствия
или отсутствия шрифтов можно задать несколько допустимых
типов, введя их через запятую.
За размер шрифта отвечает атрибут SIZE. Размер шрифта
задается в абсолютном (1, 2, 5) или относительном размерах (-1,
+3). По умолчанию используется размер 3. За цвет шрифта
отвечает атрибут COLOR. Его значением должно быть либо
ключевое слово (red, green, black), либо код цвета в формате
#RRGGBB.

<font color="#FF0000"
face="Verdana" size="+2"> Текст
красного цвета с размером +2
</font> <br />
<font color="#FF00FF"
face="Arial" size="-4"> Текст
фиолетового цвета с размером -4
</font> <br />
<font color="green"
face="Helvetica" size="5"> Текст
зеленого цвета с размером 5
</font> <br />
<font color="blue" face="sans-
serif" size="3"> Текст синего
цвета с размером 3 </font>

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

Работа с таблицами
В языке HTML таблицы используются в двух случаях: для
представления данных, разбитых по строкам и столбцам, и как
средство форматирования веб-страниц.
Создание тела таблицы
Каждая таблица должна начинаться тегом <table> и
завершаться тегом </table>
Ячейки таблицы
Для начала нужно задать необходимое число строк, а затем
разделить строки столбцами на ячейки. Количество пар тегов
<tr> и </tr> определяет количество горизонтальных строк.
Количество пар тегов <td> и </td>, определяет количество ячеек
(столбцов) в пределах строки. Тег <th> позволяет создать ячейку
заголовок - специальную ячейку, которая будет выделяться
полужирным.

Границы таблицы <table border="4" bordercolor="#000000">
Атрибут cellspacing определяет расстояние между ячейками
таблицы (в пикселах), а атрибут cellpadding - между
содержимым ячейки и ее границей.
Отображение внешней границы таблицы задается с помощью
атрибута frame, а внутренними границами - с использованием
атрибута rules.
Атрибут frame может принимать следующие значения:
Above - отображается только верхняя линия границы;
Below - отображается только нижняя линия границы;
Box или Border - отображается только внешняя граница
таблицы;
Hsides - отображаются только горизонтальные линии границы;
Lhs - отображается только левая линия границы;
Rhs - отображается только правая линия границы;
Void - внешняя граница таблицы не отображается;
Vsides - отображаются только вертикальные линии границы.
Атрибут rules может иметь следующие значения:
All - отображается граница вокруг каждой ячейки;
Cols - отображаются только вертикальные границы между
столбцами;
Groups - отображаются только вертикальные границы между
группами столбцов или горизонтальные границы между группами
строк;
None - границы между ячейками не отображаются;
Rows - отображаются только горизонтальные границы между
группами строк.
Ширина и высота таблицы и ячеек:

width="250" height ="50%"

Группировка строк и столбцов
Для группировки столбцов таблицы служат теги <colgroup> и
<col>. Тег <colgroup> создает структурную группу столбцов,
которая выделяет множество логически однородных ячеек. Тег
<col> предназначен для формирования неструктурных групп
столбцов, которые делят таблицу на разделы, не имеющие
отношения к структуре. Полезным атрибутом тегов <colgroup> и
<col> является атрибут span=n, который распространяет
свойства, заданные этими тегами на n-столбцов в группе.
Для группировки строк таблицы служат теги <thead>, <tbody>
и <tfoot>.

Выравнивания элементов таблиц
Для выравнивания элементов таблиц по горизонтали и
вертикали в тегах <table>, <tr>, <th> и <td> используются
атрибуты align и valign.
align = left/right/center
valign = bottom/middle/top
Объединение ячеек таблицы
Атрибут colspan определяет количество ячеек, на которые
простирается данная ячейка по горизонтали, а rowspan — по
вертикали.
Установка фона или рисунка
bgcolor="#000000"
background="img/fon.gif"

Web программирование 1

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web программирование 1

Загружено:

Авторское право:

Доступные форматы

Курс: Web программирование

Рабочая группа по разработке Гипертекстовых Прикладных

Курс: Web программирование 3

Курс: Web программирование 4

<p align="left">выравнивание по левому краю</p>

Курс: Web программирование 5

Курс: Web программирование 6

Курс: Web программирование 7

Курс: Web программирование 8

Курс: Web программирование 11

Курс: Web программирование 12

Курс: Web программирование 13

Курс: Web программирование 14

Курс: Web программирование 15

Курс: Web программирование 16

Курс: Web программирование 17

Курс: Web программирование 18

Курс: Web программирование 19

Курс: Web программирование 20

Курс: Web программирование 21

Курс: Web программирование 22

Курс: Web программирование 24

Курс: Web программирование 25

Курс: Web программирование 26

Курс: Web программирование 27

Физический тег Логический тег Действие на текст

Курс: Web программирование 28

Курс: Web программирование 29

Курс: Web программирование 30

Курс: Web программирование 31

Курс: Web программирование 32

Ширина и высота таблицы и ячеек:

Курс: Web программирование 34

Курс: Web программирование 35

Курс: Web программирование 36

Вам также может понравиться