html. Быстрое погружение. Влад Савицкий
DESCRIPTION
* Что такое HTML и чем он не является.* Гиперссылки.* Что такое DOM, структура документа?* HTML-теги. Основные теги.* Для чего нужны мета-теги?* Что такое валидный код и зачем делать код валидным?* Другие штуки.TRANSCRIPT
![Page 1: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/1.jpg)
![Page 2: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/2.jpg)
Влад СавицкийВлад Савицкий
Работаю в
Skype: vlad_savitsky
ICQ: 205535814
+38096 530 27 12
![Page 3: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/3.jpg)
HTMLHTMLбыстрое погружениебыстрое погружение
![Page 4: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/4.jpg)
ПланПлан
● Что такое HTML?● Гиперссылки.● DOM и теги.● Тег <meta>.● Валидный код.
![Page 5: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/5.jpg)
Что такое HTML?Что такое HTML?
● HyperText Markup Language («язык разметки гипертекста»)
● Hypertext (гипертекст)
● Markup (разметка)
![Page 6: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/6.jpg)
Важные моментыВажные моменты
● HTML не для форматирования текста.● HTML не для верстки.● HTML содержит информацию о структуре
текста.● Браузеры показывают HTML по разному.● Разные версии HTML.
![Page 7: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/7.jpg)
Пример разметкиПример разметки
● <strong>Жирный текст</strong> и <em>наклонный</em>.
● Жирный текст и наклонный.
![Page 8: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/8.jpg)
ГиперссылкиГиперссылки
● Часть гипертекстового документа, ссылающаяся на другой элемент в самом документе, на другой объект.
<a href="my_work.html">Мои работы</a>
● Мои работы – анкор● my_work.html – URI или URL
![Page 9: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/9.jpg)
Ленин в ссылкеЛенин в ссылке
<a href=”Ленин”>Ленин</a><a href=”Ленин”>Ленин</a>
![Page 10: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/10.jpg)
DOMDOM
● Document Object Model
![Page 11: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/11.jpg)
DOM-компонентыDOM-компоненты
● Элементы (теги)● Аттрибуты (параметры тегов)● Текст (строки внутри тегов)● Комментарии (все внутри HTML-
комментариев)● Другие штуки (используются редко)
![Page 12: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/12.jpg)
ТегиТеги
● Теги обозначаются угловыми скобками: <>.● Конечный тег обозначается символом “/”.
● <div></div>
● Обычно теги имеют начальный и конечный теги и влияют на контент внутри.
● Некоторые теги не имеют закрывающего тега.● <hr />
![Page 13: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/13.jpg)
Параметры теговПараметры тегов
<a
class = "link"
rel = "noindex, nofollow"
href = "URL"
>Текст</a>
![Page 14: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/14.jpg)
Теги форматирования текстаТеги форматирования текста
● <strong> — жирный.● <em> — курсив.● <u> — подчеркнутый● <strike> — зачеркнутый.● <sub> — нижний индекс.● <sup> — верхний индекс.
![Page 15: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/15.jpg)
Пример форматирования текстаПример форматирования текста
< strong>H< sub>2< /sub>O< /strong> — это < strong>< em>формула воды.< /em>< /strong>
H2O — это формула воды.
![Page 16: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/16.jpg)
АбзацыАбзацы
< p>Это первый абзац.</p>< p>Это второй абзац.</p>
Это первый абзац.
Это второй абзац.
![Page 17: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/17.jpg)
ЗаголовкиЗаголовки
● <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
![Page 18: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/18.jpg)
CпискиCписки
● <ol></ol> — упорядоченный (нумерованный)
● <ul></ul> — неупорядоченный (маркированный)
● <li></li> — элементы списка.
![Page 19: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/19.jpg)
Пример разметки спискаПример разметки списка
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
![Page 20: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/20.jpg)
Вставка картинокВставка картинок
● <img src="logo.jpg" />● <div
style="background-image: url(logo.jpg)" ></div>
![Page 21: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/21.jpg)
Типы изображенийТипы изображений
![Page 22: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/22.jpg)
![Page 23: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/23.jpg)
Вложенность теговВложенность тегов
<ul>
<li>Америка</li>
<li>Европа
<ul>
<li>Швеция</li>
<li>Норвегия</li>
<li>Финляндия</li>
</ul>
</li>
<li>Азия</li>
<li>Австралия</li>
</ul>
![Page 24: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/24.jpg)
Структура HTML-документаСтруктура HTML-документа
![Page 25: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/25.jpg)
![Page 26: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/26.jpg)
![Page 27: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/27.jpg)
Тег <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>
![Page 29: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/29.jpg)
![Page 30: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/30.jpg)
Определение <!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">
![Page 31: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/31.jpg)
Полезные ссылкиПолезные ссылки
● 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/
![Page 32: HTML. Быстрое погружение. Влад Савицкий](https://reader034.vdocuments.net/reader034/viewer/2022042521/546abe87af795979438b54f8/html5/thumbnails/32.jpg)
ВопросыВопросы