Embed Size (px)
Citation preview
Стажировка-2015
Основы языков разметки
Занятие 1.
Стажировка-2015
HTML5
Релиз рекомендации по HTML5 от W3C
• HTML 5 – конец 2014 г.
Стажировка-2015
HTML 5
<!DOCTYPE HTML>
Стажировка-2015
Пример страницы
<!DOCTYPE html><html> <head> <meta charset=“UTF-8”> <title>HTML 5 demo</title> </head> <body> Пример страницы </body></html>
Стажировка-2015
Семантика
C HTML 5:
<header></header><nav></nav><section>
<article></article> <article></article></section><aside></aside><footer></footer>
Стажировка-2015
Новые API HTML 5
• Canvas• Offline Web Apps• Drag-and-drop• History API• Web Storage• Geolocation• Web SQL Database• HTML File API
Стажировка-2015
Стажировка-2015
CSS
CSS - каскадные таблицы стилей.Используется для задания:
• цветов, шрифтов элементов• теней, фона• расположение блоков, отступов,
границ• анимации
Стажировка-2015
DOM, обработка элементов браузером
DOM – представление структуры HTML документа в иерархическом виде.
Стажировка-2015
DOM, обработка элементов
Примеры CSS селекторов:
• p { color: red; }• #active { color: red; }• a.hidden { display: none; }• header p { color: red; }• .main .news { color: red; }
Стажировка-2015
DOM, обработка элементов
div.main p { width: 1000px; }
Стажировка-2015
DOM, обработка элементов
header .login .title { height: 20px; }
Стажировка-2015
Расположение блоков на странице
Строчные элементы – это элементы документа, которые являются частью строки.
Примеры: <img>, <span>, <a>,<q>, <code>
Стажировка-2015
Свойства строчных элементов
• Внутри строчных элементов можно поместить только строчные элементы.
• width, height не работают• несколько строчных элементов идущих
подряд помещаются на одной строке• можно выравнивать по вертикали,
используя свойство vertical-align.
Стажировка-2015
Свойства строчных элементов
Пример:
<p> Выполните <span>восемь</span> повторений</p>
Пример на htmlbook.ru
Стажировка-2015
Расположение блоков на странице
Блочные элементы – элементы, которые отображаются на странице в виде прямоугольника.
Примеры: <div>, <form>, <p>, <table>, <h1>...<h6>, <ul>
Стажировка-2015
Свойства блочных элементов
• Элемент занимает всю доступную ширину
• Элемент начинается на новой строке• Блоки располагаются по вертикали друг
за другом• Можно выставить width, height
Стажировка-2015
Свойства блочных элементовПример:
<div> <p>Первый абзац</p> Анонимный блок <p>Второй абзац</p></div>
Пример на htmlbook.ru
Стажировка-2015
Свойство float
Пример на htmlbook.ru
Определяет, по какой стороне будет выравниваться элемент, при этом
остальные элементы будут обтекать его с других сторон.
float: left | right | none | inherit
Стажировка-2015
Свойство float
Пример на htmlbook.ru
Задан float:left для желтого элемента:
Стажировка-2015
Свойство clear
Пример на htmlbook.ru
clear: left | right | none | both | inherit
Устанавливает, с какой стороны элемента запрещено его обтекание другими
элементами.
Стажировка-2015
Свойство clear
Пример на htmlbook.ru
Задан clear:left для второго блока:
Стажировка-2015
Свойство position
Пример на htmlbook.ru
position: absolute| fixed | relative | static
Устанавливает способ позиционирования элемента на странице относительно окна
браузера или других элементов.
Стажировка-2015
Свойства margin и padding
Стажировка-2015
Меню с помощью <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>
Стажировка-2015
Меню с помощью <ul>, <li>
ul { list-style-type: none; background-image: url(navi_bg.png); height: 80px; width: 663px; margin: auto;}
li { float: left;} Ссылка на пример
Стажировка-2015
Кроссбраузерная и адаптивная вёрстка
Проблемы:
• Много браузеров, движков• Необходимость поддерживать старые
браузеры• Различные разрешения экранов
устройств• Необходимость оптимизации скорости
загрузки
Стажировка-2015
Twitter Bootstrap, ZURB Foundation
Отличные инструменты для быстрого прототипирования проекта
Стажировка-2015
Prototyping
Стажировка-2015
Twitter Bootstrap, ZURB FoundationГотовые шаблоны для типичных веб-страниц:
Стажировка-2015
Twitter Bootstrap, ZURB Foundation:фреймворки для создания
веб-страниц
• Готовые шаблоны• Встроенные стили для таблиц, меню,
навигации, прогресс-баров и др. компонентов
• Темы оформления• Оптимизация под мобильные девайсы• Много плагинов, онлайн сервисов
Стажировка-2015
Twitter Bootstrap, ZURB FoundationBootsnip.com – генерация форм для Bootstrap:
Стажировка-2015
Полезности для браузера
• Developer Tools• Color picker плагины• Генераторы псевдотекста Lorem Ipsum• PixelPerfect• Ruler-плагины• Stylebot• LiveCSSEditor
Стажировка-2015
Что почитать?
• 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/
Стажировка-2015
Задание
• Выполнить верстку по PSD макету дизайнера.
