HTML. Быстрое погружение. Влад Савицкий

Влад Савицкий
Работаю в

Skype: vlad_savitsky
ICQ: 205535814
vlad.savitsky@gmail.com
+38096 530 27 12

HTML
быстрое погружение

План
● Что такое HTML?
● Гиперссылки.
● DOM и теги.
● Тег <meta>.
● Валидный код.

Что такое HTML?
● HyperText Markup
Language («язык
разметки
гипертекста»)
● Hypertext
(гипертекст)
● Markup (разметка)

Важные моменты
● HTML не для форматирования текста.
● HTML не для верстки.
● HTML содержит информацию о структуре
текста.
● Браузеры показывают HTML по разному.
● Разные версии HTML.

Пример разметки
● <strong>Жирный текст</strong> и
<em>наклонный</em>.
● Жирный текст и наклонный.

Гиперссылки
● Часть гипертекстового документа,
ссылающаяся на другой элемент в самом
документе, на другой объект.

<a href="my_work.html">Мои работы</a>

● Мои работы – анкор
● my_work.html – URI или URL

Ленин в ссылке

<a href=”Ленин”>Ленин</a>

DOM
● Document Object
Model

DOM-компоненты
● Элементы (теги)
● Аттрибуты (параметры тегов)
● Текст (строки внутри тегов)
● Комментарии (все внутри HTML-
комментариев)
● Другие штуки (используются редко)

Теги
● Теги обозначаются угловыми скобками: <>.
● Конечный тег обозначается символом “/”.
● <div></div>
● Обычно теги имеют начальный и конечный
теги и влияют на контент внутри.
● Некоторые теги не имеют закрывающего
тега.
● <hr />

Параметры тегов
<a
class = "link"
rel = "noindex, nofollow"
href = "URL"
>Текст</a>

Теги форматирования текста
● <strong> — жирный.
● <em> — курсив.
● <u> — подчеркнутый
● <strike> — зачеркнутый.
● <sub> — нижний индекс.
● <sup> — верхний индекс.

Пример форматирования текста

< strong>H< sub>2< /sub>O< /strong> — это <
strong>< em>формула воды.< /em>< /strong>

H2O — это формула воды.

Абзацы
< p>Это первый абзац.</p>< p>Это второй
абзац.</p>

Это первый абзац.

Это второй абзац.

Заголовки
● <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Cписки
● <ol></ol> — упорядоченный
(нумерованный)
● <ul></ul> — неупорядоченный
(маркированный)
● <li></li> — элементы списка.

Пример разметки списка
<ul>
<li>Пункт 1</li>
</ul>

Вставка картинок
● <img src="logo.jpg" />
● <div
style="background-image: url(logo.jpg)"
></div>

Типы изображений

Вложенность тегов
<ul>
<li>Америка</li>
<li>Европа
<ul>
<li>Швеция</li>
<li>Норвегия</li>
<li>Финляндия</li>
</ul>
</li>
<li>Азия</li>
<li>Австралия</li>
</ul>

Структура HTML-документа

Тег <meta>
<head>
<meta name="description" content="Free Web
tutorials" />
<meta name="keywords"
content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta http-equiv="content-type"
content="text/html;charset=UTF-8" />
</head>

Валидный код

http://validator.w3.org/

Определение <!DOCTYPE>
● Должно быть самым первым тегов в
документе (перед <html>).
● Не является HTML-тегом.
● Инструкция для браузера о версии HTML.
● Ссылается на Document Type Definition
(DTD).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Полезные ссылки
● HTML Tutorial
● http://www.w3schools.com/html/
● HTML Validator
● http://validator.w3.org/
● HTML <meta> Tag
● http://www.w3schools.com/tags/tag_meta.asp
● HTML4
● http://www.w3.org/TR/html4/
● HTML5
● http://www.w3.org/TR/html5/

HTML. Быстрое погружение. Влад Савицкий

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie HTML. Быстрое погружение. Влад Савицкий

Ähnlich wie HTML. Быстрое погружение. Влад Савицкий (20)

Mehr von Vlad Savitsky

Mehr von Vlad Savitsky (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

HTML. Быстрое погружение. Влад Савицкий