html. Быстрое погружение. Влад Савицкий
DESCRIPTION
* Что такое HTML и чем он не является.* Гиперссылки.* Что такое DOM, структура документа?* HTML-теги. Основные теги.* Для чего нужны мета-теги?* Что такое валидный код и зачем делать код валидным?* Другие штуки.TRANSCRIPT
Влад СавицкийВлад Савицкий
Работаю в
Skype: vlad_savitsky
ICQ: 205535814
+38096 530 27 12
HTMLHTMLбыстрое погружениебыстрое погружение
ПланПлан
● Что такое HTML?● Гиперссылки.● DOM и теги.● Тег <meta>.● Валидный код.
Что такое HTML?Что такое 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><a href=”Ленин”>Ленин</a>
DOMDOM
● Document Object Model
DOM-компоненты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пискиCписки
● <ol></ol> — упорядоченный (нумерованный)
● <ul></ul> — неупорядоченный (маркированный)
● <li></li> — элементы списка.
Пример разметки спискаПример разметки списка
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</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-документаСтруктура HTML-документа
Тег <meta>Тег <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>
Определение <!DOCTYPE> Определение <!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/
ВопросыВопросы