03 - Web-технологии. Язык разметки HTML
0 likes126 views
Документ представляет собой обзор HTML и XHTML разметки, включая ключевые особенности и правила их использования. Он обсуждает важность doctype, различные теги (блочные и строчные), а также формирование списков и таблиц. Также рассматриваются атрибуты форм и элементы ввода данных, позволяющие создавать интерактивные веб-страницы.
![application/x-www-form-urlencoded
Это способ кодирования данных формы для передачи через URL.
Допустим есть форма со следующими данными:
id: 3
name: Вася
friend_id: [4, 5]
В закодированном виде это буде выглядеть так:
id=3&name=%D0%92%D0%B0%D1%81%D1%8F&friend=4&friend=5
26](https://image.slidesharecdn.com/web3lesson-161207174041/85/03-Web-HTML-26-320.jpg)
03 - Web-технологии. Язык разметки HTML
- 1. HTML
- 2. <!DOCTYPE html> <html> <head> <title>Страница</title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <meta name=”description” content=”Сайт”> <link rel=”stylesheet” href=”./style.css”> </head> <body id=”the_body”> <p class=”article”>...</p> <script src=”./script.js”></script> </body> </html> 2
- 3. Особенности HTML разметки • Произвольный регистр: <BR> == <br> • Атрибуты без скобок: color=red • Сокращенные атрибуты: disabled • Непарные тэги: <p> вместо <p></p> • Перестановки тэгов: <b><i></b></i> • «Свои» тэги: <magic></magic> 3
- 4. Особенности XHTML разметки • Только нижний регистр тэгов • Атрибуты со скобками: color=”red” • Атрибуты – без сокращений: disabled=”disabled” • Тэги всегда парные: <p></p> • Строгая вложенность: <i><b></b></i> • id вместо name • Необходим DOCTYPE 4
- 5. DOCTYPE DOCTYPE уточняет тип содержимого, указывает HTML парсеру как правильно разбирать данный документ. XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 5
- 6. DOCTYPE HTML 4 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML5 <!DOCTYPE html> 6
- 7. HTML тэги
- 8. Тэги верхнего уровня • html - обертка • head - заголовок страницы, не отображается • body - тело страницы, то, что видит пользователь 8
- 9. Тэги внутри head • title - отображается в заголовке окна браузера • meta - содержит информацию для user-agentов <meta name="description" content="Для друзeй"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 9
- 10. Тэги внутри head (2) • link - указание связанных ресурсов, например CSS <link rel="stylesheet" href="/style.css"> <link rel="alternate" href="/news.rss" type="application/rss+xml"> • script - загрузка JavaScript <script src="./jquery.js" charset="windows-1251" async> </script> 10
- 11. Рекомендацим по link и script Загрузку CSS (тэг link ) рекомендуется ставить в тэге head , а загрузку JavaScript (тэг script ) - наоборот ближе к концу странице. Это повышает скорость отрисовки страницы. 11
- 13. Блочные тэги • h1 - h6 ― различные уровни заголовков • p ― разбиение текста на параграфы • hr ― горизонтальная линия • pre ― блок преформатированного кода, например исходный код • blockquote ― цитирование длинного блока текста • div ― абстрактный блочный контейнер 13
- 14. Пример Верстка этого слайда сделана в HTML и является отличным примером использования блочных тэгов. Подзаголовок Хотя из-за стилей оформления презентации это не так очевидно. 14
- 15. Строчные тэги • a ― гиперссылки • em , i ― акцентирование • strong , b ― выделение • img ― вставка изображений • sub ― нижний индекс • sup ― верхний индекс • span ― абстрактный строчный контейнер 15
- 16. Списки и таблицы
- 17. Списки в HTML ul , ol , li - маркированные списки <ul> <li><code>a</code> ― гиперссылки</li> <li><code>em</code> ― акцентирование</li> </ul> 17
- 18. Таблицы в HTML <table border="1"> <caption>квартальный отчет</caption> <thead> <tr> <td>дата</td> <td colspan="2">доход</td> </tr> </thead> <tbody> <tr> <th rowspan="2">2011-01-01</th> <td>100500</td> <td>33</td> </tr> <tr> <td>100</td> <td>500</td> </tr> </tbody> </table> 18
- 20. Гиперссылки
- 21. Гиперссылки <a href="http://duckduckgo.com" target="_blank"> <img src="duck.png"> </a> • href - URL гиперссылки • target - в каком окне открывать ссылку • name - имя якоря, вместо href 21
- 22. Действия браузера при переходе Поведение браузера зависит от протокола в URL • http , https , ftp - переход по ссылке • mailto - запуск почтового клиента • javascript - выполнение JavaScript кода • #anchor - прокрутка текущей страницы 22
- 23. Формы
- 24. Формы <form method="POST" action="/add/" enctype="multipart/form-data" target="frame3"> <input name="image" type="file"> <input name="id" type="hidden" value="3"> <input name="nick" type="text"> <input type="submit" value="Отправить"> <button type="submit" name="action" value="more"> Все равно отправить </button> </form> 24
- 25. Аттрибуты формы • action - URL, на который будет отправлена форма • metod - HTTP метод, GET или POST • target - имя окна браузера, в котором открыть результат • enctype - способ кодирования данных формы. По умолчанию - application/x-www-form-urlencoded . Если форма содержит поля для ввода файлов, то должно быть multipart/form-data 25
- 26. application/x-www-form-urlencoded Это способ кодирования данных формы для передачи через URL. Допустим есть форма со следующими данными: id: 3 name: Вася friend_id: [4, 5] В закодированном виде это буде выглядеть так: id=3&name=%D0%92%D0%B0%D1%81%D1%8F&friend=4&friend=5 26
- 28. Элементы ввода формы • input - универсальное поле, может быть: • type="hidden" - невидимое • type="text" - текстовое поле • type="checkbox" - checkbox, переключатель да/нет • button - кнопка • textarea - многострочное поле ввода • select , option - выпадающий список 28
- 29. Атрибуты элементов ввода <input type="text" name="username" value="" placeholder="Вася" autocomplete="off"> • type - определяет внешний вид и функционал • name - имя, с которым данный элемент попадет в запрос • value - начальное знаечение, пользователь может изменить • placeholder - подсказка для пользователя 29