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

1,347 views

Published on

* Что такое HTML и чем он не является.
* Гиперссылки.
* Что такое DOM, структура документа?
* HTML-теги. Основные теги.
* Для чего нужны мета-теги?
* Что такое валидный код и зачем делать код валидным?
* Другие штуки.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,347
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Влад Савицкий Работаю в Skype: vlad_savitsky ICQ: 205535814 vlad.savitsky@gmail.com +38096 530 27 12
  2. 2. HTMLбыстрое погружение
  3. 3. План● Что такое HTML?● Гиперссылки.● DOM и теги.● Тег <meta>.● Валидный код.
  4. 4. Что такое HTML?● HyperText Markup Language («язык разметки гипертекста»)● Hypertext (гипертекст)● Markup (разметка)
  5. 5. Важные моменты● HTML не для форматирования текста.● HTML не для верстки.● HTML содержит информацию о структуре текста.● Браузеры показывают HTML по разному.● Разные версии HTML.
  6. 6. Пример разметки● <strong>Жирный текст</strong> и <em>наклонный</em>.● Жирный текст и наклонный.
  7. 7. Гиперссылки● Часть гипертекстового документа, ссылающаяся на другой элемент в самом документе, на другой объект. <a href="my_work.html">Мои работы</a>● Мои работы – анкор● my_work.html – URI или URL
  8. 8. Ленин в ссылке<a href=”Ленин”>Ленин</a>
  9. 9. DOM● Document Object Model
  10. 10. DOM-компоненты● Элементы (теги)● Аттрибуты (параметры тегов)● Текст (строки внутри тегов)● Комментарии (все внутри HTML- комментариев)● Другие штуки (используются редко)
  11. 11. Теги● Теги обозначаются угловыми скобками: <>.● Конечный тег обозначается символом “/”. ● <div></div>● Обычно теги имеют начальный и конечный теги и влияют на контент внутри.● Некоторые теги не имеют закрывающего тега. ● <hr />
  12. 12. Параметры тегов<aclass = "link"rel = "noindex, nofollow"href = "URL">Текст</a>
  13. 13. Теги форматирования текста● <strong> — жирный.● <em> — курсив.● <u> — подчеркнутый● <strike> — зачеркнутый.● <sub> — нижний индекс.● <sup> — верхний индекс.
  14. 14. Пример форматирования текста< strong>H< sub>2< /sub>O< /strong> — это <strong>< em>формула воды.< /em>< /strong>H2O — это формула воды.
  15. 15. Абзацы< p>Это первый абзац.</p>< p>Это второйабзац.</p>Это первый абзац.Это второй абзац.
  16. 16. Заголовки● <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
  17. 17. Cписки● <ol></ol> — упорядоченный (нумерованный)● <ul></ul> — неупорядоченный (маркированный)● <li></li> — элементы списка.
  18. 18. Пример разметки списка<ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li></ul>
  19. 19. Вставка картинок● <img src="logo.jpg" />● <div style="background-image: url(logo.jpg)" ></div>
  20. 20. Типы изображений
  21. 21. Вложенность тегов<ul><li>Америка</li><li>Европа <ul> <li>Швеция</li> <li>Норвегия</li> <li>Финляндия</li> </ul></li><li>Азия</li><li>Австралия</li></ul>
  22. 22. Структура HTML-документа
  23. 23. Тег <meta><head><meta name="description" content="Free Webtutorials" /><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>
  24. 24. Валидный кодhttp://validator.w3.org/
  25. 25. Определение <!DOCTYPE>● Должно быть самым первым тегов в документе (перед <html>).● Не является HTML-тегом.● Инструкция для браузера о версии HTML.● Ссылается на Document Type Definition (DTD).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  26. 26. Полезные ссылки● 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/
  27. 27. Вопросы

×