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