Стажировка-2013, разработчики, занятие 8. Html, CSS
Download as PPTX, PDF•1 like•605 views
Документ охватывает основы языков разметки, включая HTML и XHTML, их стандарты и роль в веб-разработке. Он также обсуждает новые элементы и семантику HTML5, CSS, а также методы работы с DOM и стилизацию. В завершение предоставлены практические задания и ресурсы для дальнейшего изучения.
![Формы
<form action="create_city.php" method="post">
<input type="text" name="city">
<input type="text" name="country">
<input type="submit">
</form>
PHP: $_POST['city']
$_POST['country']
http://www.w3schools.com/html/html5_form_input_
types.asp](https://image.slidesharecdn.com/8-130710043823-phpapp02/85/2013-8-Html-CSS-37-320.jpg)
Стажировка-2013, разработчики, занятие 8. Html, CSS
- 1. Основы языков разметки, стандарты, реализации в браузерах, DOM, суть HTML5, использование CSS Разработчики. Занятие 8
- 2. Языки разметки • HTML 4.0 (1999) • XHTML 1.x (2001-2008) • XHTML 2 • HTML 5.x, XHTML 5
- 3. HTML5 Релиз рекомендации по HTML5 от W3C запланирован: • HTML 5 – 2014 г. • HTML 5.1 – 2016 г.
- 4. Особенности XHTML • XHTML – строгая версия языка разметки • В XHTML имена тэгов и атрибутов только в нижнем регистре • В XHTML все тэги должны быть закрыты • Браузеры не обрабатывают документ, если в нём ошибка • Нет обратной совместимости с HTML
- 5. HTML, doctype HTML4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml 11.dtd">
- 7. Пример страницы <!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>HTML 5 demo</title> </head> <body> Пример страницы </body> </html>
- 8. Тэги HTML До HTML 5: http://www.w3.org/TR/html4/index/ elements.html a abbr form H1, H2, H3, H4, H5, H6 p iframe img strong, small, i ul, li table, thead, tbody title div
- 9. Семантика До HTML 5: <div id="header"></div> <div id="nav"></div> <div id="container"> <div id="section"> <div class="article"></div> <div class="article"></div> </div> <div id="sidebar"></div> </div> <div id="footer"></div>
- 12. Новые API HTML 5 • Canvas • Offline Web Apps • Drag-and-drop • History API • Web Storage • Geolocation • Web SQL Database • HTML File API
- 13. HTML5
- 14. CSS CSS - каскадные таблицы стилей. Используется для задания: • цветов, шрифтов элементов • теней, фона • расположение блоков, отступов, границ • анимации
- 15. DOM, обработка элементов браузером DOM – представление структуры HTML документа в иерархическом виде.
- 16. DOM, обработка элементов Примеры CSS селекторов: • p { color: red; } • #active { color: red; } • a.hidden { display: none; } • header p { color: red; } • .main .news { color: red; }
- 17. DOM, обработка элементов img { border: 1px solid black; } div.main p { width: 1000px; } header .login .title { height: 20px; }
- 18. Расположение блоков на странице Строчные элементы – это элементы документа, которые являются частью строки. Примеры: <img>, <span>, <a>, <q>, <code>
- 19. Свойства строчных элементов • Внутри строчных элементов можно поместить только строчные элементы. • width, height не работают • несколько строчных элементов идущих подряд помещаются на одной строке • можно выравнивать по вертикали, используя свойство vertical-align.
- 20. Свойства строчных элементов Пример: <p> Выполните <span>восемь</span> повторений </p> Пример на htmlbook.ru
- 21. Расположение блоков на странице Блочные элементы – элементы, которые отображаются на странице в виде прямоугольника. Примеры: <div>, <form>, <p>, <table>, <h1>...<h6>, <ul>
- 22. Свойства блочных элементов • Элемент занимает всю доступную ширину • Элемент начинается на новой строке • Блоки располагаются по вертикали друг за другом • Можно выставить width, height
- 23. Свойства блочных элементов Пример: <div> <p>Первый абзац</p> Анонимный блок <p>Второй абзац</p> </div> Пример на htmlbook.ru
- 24. Свойство float Пример на htmlbook.ru Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. float: left | right | none | inherit
- 25. Свойство float Пример на htmlbook.ru Задан float:left для желтого элемента:
- 26. Свойство clear Пример на htmlbook.ru clear: left | right | none | both | inherit Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.
- 27. Свойство clear Пример на htmlbook.ru Задан clear:left для второго блока:
- 28. Свойство position Пример на htmlbook.ru position: absolute| fixed | relative | static Устанавливает способ позиционирования элемента на странице относительно окна браузера или других элементов.
- 29. Свойства margin и padding
- 30. Меню с помощью <ul>, <li> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
- 31. Меню с помощью <ul>, <li> ul { list-style-type: none; background-image: url(navi_bg.png); height: 80px; width: 663px; margin: auto; } li { float: left; } Ссылка на пример
- 32. Кроссбраузерная и адаптивная вёрстка Проблемы: • Много браузеров, движков • Необходимость поддерживать старые браузеры • Различные разрешения экранов устройств • Необходимость оптимизации скорости загрузки
- 33. Полезности для браузера • Developer Tools • Color picker плагины • Генераторы псевдотекста Lorem Ipsum • PixelPerfect • Ruler-плагины • Stylebot • LiveCSSEditor
- 34. Что почитать? • The W3C Markup Validation Service • Can I use? http://caniuse.com • Htmlbook.ru htpp://htmlbook.ru • http://css-tricks.com/video-screencasts/ • http://jsfiddle.net/
- 35. Задание 1 • Сверстать две страницы: главную со ссылкой на форму и страницу с формой. • При успешном сабмите формы показать сообщение и вернуть пользователя на главную страницу. • При неуспешном запросе (пустые поля) – показать сообщение с ошибкой и вернуть на форму.
- 36. Задание 2 • Выполнить верстку по PSD макету дизайнера.
- 37. Формы <form action="create_city.php" method="post"> <input type="text" name="city"> <input type="text" name="country"> <input type="submit"> </form> PHP: $_POST['city'] $_POST['country'] http://www.w3schools.com/html/html5_form_input_ types.asp