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. Быстрое погружение. Влад Савицкий

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

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

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

Más de Vlad Savitsky

Más de Vlad Savitsky (11)

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