| <!DOCTYPE html> |
|
|
| <html> |
|
|
| |
|
|
| <head> |
|
|
|
<title>Beispiel HTML-Code überprüfen
lassen</title> |
|
| <meta charset="UTF-8" /> |
|
|
| </head> |
|
|
| |
|
|
| <body> |
|
|
| |
|
|
| <h1>HTML-Tutorial</h1> |
|
|
| |
|
|
| <p>der erster
Absatz</p> |
|
|
| |
|
|
| </body> |
|
|
| </html> |
|
|
|
| <!DOCTYPE html> |
|
HTML5-Doctype, erste Zeile der HTML-Datei |
| HTML |
|
steht für H yper T
ext M arkup L anguage |
| HTML-Tags |
|
sind Schlüsselwörter
(Tag-Namen) umgeben spitzen Klammern , wie <html> |
| |
|
Der erste Tag in einem Paar ist die Start-Tag, ist der zweite Tag der End-Tag |
| <html
lang="de"> |
|
Umschließt den kompletten Inhalt
und es wird im Inhalt als Sprache Deutsch verwendet |
| </html> |
|
Ende der HTML-Seite |
| <head>
...</head> |
|
Head-Bereich,
der Metainformationen über die Webseite enthält (werden nicht im
Browserfenster angezeigt) |
| <title>HTML5-Grundgerüst</title> |
|
|
| <body>…..</body> |
|
Umschließt den Inhalt, der im
Browserfenster angezeigt wird |
| |
|
|
| |
|
|
| <b> …
</b> |
|
Schrift wird fett angezeigt |
| <h1>This
is a heading</h1> |
|
HTML-Überschriften mit dem
<h1> um <h6> definiert |
| <h2>This
is a heading</h2> |
|
|
| <h3>This
is a heading</h3> |
|
|
| |
|
|
| <p> …
</p> |
|
Absatz - nach dem Absatz wird
automatisch Platz gehalten |
| <br /> |
|
erzwungener Zeilenumbruch (Zeilenende) |
| <hr /> |
|
Trennlinie -
soll 2 unterschiedliche Inhalte trennen...Добавляет в HTML документ
горизонтальную линию. |
| <hr
size="?"> |
|
Устанавливает высоту (толщину) линии |
| <hr
width="?"> |
|
Устанавливает ширину линии, можно
указать ширину в пикселах или процентах |
| <hr
noshade> |
|
Создает линию без тени |
| <hr
color="?"> |
|
Задает линии определенный цвет.
Значение RRGGBB. |
| <strong>
… </strong> |
|
wichtiger Bereich, Schrift wird fett
angezeigt |
| <i> …
</i> |
|
Schrift wird kursiv angezeigt |
| |
|
|
| Hier kommt nun
<strong>fetter und <em>kursiver |
|
|
| |
|
Hier kommt nun fetter
und kursiver (schräger) Text |
| |
|
|
| <dl> |
|
Hund |
| <dt>Hund</dt> |
|
macht wau und mag Katzen |
| <dd>macht wau und mag
Katzen</dd> |
|
Katze |
| <dt>Katze</dt> |
|
macht miau und mag Maus |
| <dd>macht miau und mag
Maus</dd> |
|
Maus |
| <dt>Maus</dt> |
|
mag keine Katzen |
| <dd>mag keine Katzen</dd> |
|
|
| </dl> |
|
|
| Графические
элементы |
|
|
| <img
src="bilder/html-seminar.jpg" |
|
|
| width="474"
height="66" border="1" |
|
|
| alt="html-seminar.de
- jetzt HTML lernen" |
|
|
| <img
src="name"> |
|
Добавляет изображение в HTML документ |
| <img
src="name" align="?"> |
|
Выравнивает
изображение к одной из сторон документа, принимает значения: left, right,
center; bottom, top, middle |
| <img
src="name" border="?"> |
|
Устанавливает толщину рамки вокруг
изображения |
| <img
src="name" vspase="?"> |
|
Устанавливает поля сверху и снизу |
| <img
src="name" hspase="?"> |
|
Устанавливает поля сбоков |
| <img
src="name" alt="?"> |
|
Всплывающая подсказка при наведении на
имедж |
| |
|
|
| Атрибуты
таблицы |
|
|
| <table
border="1"> |
|
Задает толщину рамки таблицы. |
| <th></th> |
|
Определяет
заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) |
| <tr> |
|
Определяет строку в таблице. |
| <td> INHALT ZELLE 1 </td> |
|
Определяет отдельную ячейку в таблице. |
| <td> INHALT ZELLE 2 </td> |
|
|
| </tr> |
|
|
| <tr> |
|
|
| <td> INHALT ZELLE 3 </td> |
|
|
| <td> INHALT ZELLE 4 </td> |
|
|
| </tr> |
|
|
| </table> |
|
|
| <table
cellspacing="#"> |
|
Задает расстояние между ячейками
таблицы. |
| <table
cellpadding="#"> |
|
Задает расстояние между содержимым
ячейки и ее рамкой. |
| <table
width="#"> |
|
Устанавливает ширину таблицы в
пикселах или процентах от ширины документа. |
| <table
height="#"> |
|
Устанавливает высоту таблицы в
пикселах или процентах от высоты документа. |
| <tr
align="?"> или <td align="?"> |
|
Устанавливает
выравнивание ячеек в таблице, принимает значения: left,
center, или right |
| <tr
valign="?"> или <td valign="?"> |
|
Устанавливает
вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom |
| <td
colspan="#"> |
|
Указывает кол-во столбцев, которое
объединено в одной ячейке. (по умолчанию=1) |
| <td
rowspan="#"> |
|
Указывает кол-во строк, которое
объединено в одной ячейке. (по умолчанию=1) |
| <td
nowrap> |
|
Не позволяет программе просмотра
делать перевод строки в ячейке таблицы. |
| <td
width="#"> |
|
Устанавливает
ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного
столбца не могут иметь разную ширину). |
| <td
height="#"> |
|
Устанавливает
высоту ячейки в пикселах или процентах от высоты таблици (ячейки одной строки
не могут иметь разную высоту) |
| Атрибуты тела
документа |
|
|
| <body
bgcolor="?"> |
|
Устанавливает
цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000
- красный цвет. |
| <body text="?"> |
|
Устанавливает
цвет текста документа, используя значение цвета в виде RRGGBB - пример:
000000 - черный цвет. |
| <body
link="?"> |
|
Устанавливает
цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 -
зеленый цвет. |
| <body
vlink="?"> |
|
Устанавливает
цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде
RRGGBB - пример: 333333 - серый цвет. |
| <body
alink="?"> |
|
Устанавливает цвет гиперссылок при
нажатии. |
| Теги
форматирования текста |
|
|
| <pre></pre> |
|
Обрамляет предварительно
отформатированный текст. |
| <h1></h1> |
|
Создает самый большой заголовок |
| <h2></h2>,
<h3>, </h3><h4></h4>, <h5>, </h5> |
|
Создает заголовоки промежуточных
размеров |
| <h6></h6> |
|
Создает самый маленький заголовок |
| <b></b> |
|
Создает жирый текст
(нерекомендованный) |
| <i></i> |
|
Создает наклонный текст
(нерекомендованный) |
| <tt></tt> |
|
Создает текст - имитирующий стиль
печатной машинки. (нерекомендованный) |
| <kbd></kbd> |
|
Создает текст - имитирующий стиль
печатной машинки. (рекомендованный) |
| <var></var> |
|
Название переменных отображается
курсивом |
| <cite></cite> |
|
Выделение цитат курсивом |
| <address></address> |
|
Отображается курсивом в виде
отдельного абзаца |
| <em></em> |
|
Наклонный текст (воспринимается
посковыми роботами как выделение) |
| <strong></strong> |
|
Жирный текст (воспринимается посковыми
роботами, как особо сильное выделение) |
| <font
size="?"></font> |
|
Устанавливает размер текста в пределах
от 1 до 7. |
| <font
color="?"></font> |
|
Устанавливает цвет текста, используя
значение цвета в виде RRGGBB. |
| Форматирование |
|
|
| <p></p> |
|
Создает новый параграф |
| <p
align="?"></p> |
|
Выравнивает
параграф относительно одной из сторон документа, значения: left, right,
justify или center |
| <nobr> |
|
Запрещает перевод строки. |
| <wbr> |
|
Указывает где разбивать строку для
переноса при необходимости. |
| <br> |
|
Вставляет перевод строки. |
| <blockquote></blockquote> |
|
Создает отступы с обеих сторон текста. |
| <dl></dl> |
|
Создает список определений. Start Tag |
| <dt> |
|
Определяет каждый из терминов
списка….Listenpunkt |
| <dd> |
|
Описывает каждое
определение….Unterpunkt |
| |
|
|
| |
|
|
| <ul></ul> |
|
Создает ненумерованный список |
| <li>…</li> |
|
Определяет каждый элемент списка и
присваивает номер |
| Type="…." Atribute |
|
|
| "square" |
|
ausgefühlte Quadrat |
| "circle" |
|
kreissymbol |
| "disk
(disc)" |
|
villes kreissymbol |
| |
|
|
| <ol></ol> |
|
Создает нумерованный список |
| <li> |
|
Определяет каждый элемент списка и
присваивает номер |
| <ol><li>…</li></ol> |
|
|
| Type="…." Atribute |
|
|
| 1 |
|
arabische Zifern |
| J |
|
römische Zifern groß |
| i |
|
römische
Zifern klein |
| A |
|
Buchstaben groß |
| a |
|
Buchstaben klein |
| Гиперссылки |
|
|
| <a
href="URL"></a> |
|
Создает гиперссылку на другие сайты. |
| <atarget="?"></a> |
|
Указывает в
каком окне открывать гиперссылку. |
| |
|
параметры
Значение |
| |
|
_Blank Загрузка
содержимого страницы, заданной ссылкой, в новое пустое окно |
| |
|
_Parent Загрузка содержимого страницы, заданной
ссылкой, в окно, которое содержит
ссылку |
| |
|
_Self Загрузка
содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы |
| |
|
_Top Загрузка содержимого
страницы, заданной ссылкой, в окно, игнорируя использованные фреймы |
| |
|
При
использовании фреймов и вложенных фреймов значением может выступать имя
фрейма или вложенной сетки фреймов, приэтом страница откроется в указаной
части окна. |
| <a
href="NAME"></a> |
|
Создает гиперссылку на другую
страницу. |
| <a
href="mailto:EMAIL"></a> |
|
Создает
гиперссылку вызова почтовой программы для написания письма по указанному
адресу. |
| <a
href="#name"></a> |
|
Создает гиперссылку на метку текущей
страници. |
| <a
name="name"></a> |
|
Отмечает часть текста, как метку для
гипперссылок на странице |
| <a
href="NAME#name"></a> |
|
Создает гиперссылку на метку другой
страници. |
