Стажировка-2015. Разработка. Занятие 1. Основы языков разметки.

Стажировка-2015
Основы языков разметки
Занятие 1.

HTML5
Релиз рекомендации по HTML5
от W3C
• HTML 5 – конец 2014 г.

HTML 5
<!DOCTYPE HTML>

Пример страницы
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>HTML 5 demo</title>
</head>
<body>
Пример страницы
</body>
</html>

Семантика
C HTML 5:
<header></header>
<nav></nav>
<section>
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>

Новые API HTML 5
• Canvas
• Offline Web Apps
• Drag-and-drop
• History API
• Web Storage
• Geolocation
• Web SQL Database
• HTML File API

CSS
CSS - каскадные таблицы стилей.
Используется для задания:
• цветов, шрифтов элементов
• теней, фона
• расположение блоков, отступов,
границ
• анимации

DOM, обработка элементов
браузером
DOM – представление структуры
HTML документа в иерархическом
виде.

Примеры CSS селекторов:
• p { color: red; }
• #active { color: red; }
• a.hidden { display: none; }
• header p { color: red; }
• .main .news { color: red; }

div.main p { width: 1000px; }

header .login .title { height: 20px; }

Расположение блоков на странице
Строчные элементы – это
элементы документа, которые
являются частью строки.
Примеры: <img>, <span>, <a>,
<q>, <code>

Свойства строчных элементов
• Внутри строчных элементов можно
поместить только строчные элементы.
• width, height не работают
• несколько строчных элементов идущих
подряд помещаются на одной строке
• можно выравнивать по вертикали,
используя свойство vertical-align.

Свойства строчных элементов
Пример:
<p>
Выполните
<span>восемь</span>
повторений
</p>
Пример на htmlbook.ru

Расположение блоков на странице
Блочные элементы – элементы,
которые отображаются на
странице в виде прямоугольника.
Примеры: <div>, <form>, <p>,
<table>, <h1>...<h6>, <ul>

Свойства блочных элементов
• Элемент занимает всю доступную
ширину
• Элемент начинается на новой строке
• Блоки располагаются по вертикали друг
за другом
• Можно выставить width, height

Свойства блочных элементов
Пример:
<div>
<p>Первый абзац</p>
Анонимный блок
<p>Второй абзац</p>
</div>

Свойство float
Определяет, по какой стороне будет
выравниваться элемент, при этом
остальные элементы будут обтекать его с
других сторон.
float: left | right | none | inherit

Свойство float
Задан float:left для желтого элемента:

Свойство clear
clear: left | right | none | both | inherit
Устанавливает, с какой стороны элемента
запрещено его обтекание другими
элементами.

Свойство clear
Задан clear:left для второго блока:

Свойство position
position: absolute| fixed | relative | static
Устанавливает способ позиционирования
элемента на странице относительно окна
браузера или других элементов.

Свойства margin и padding

Меню с помощью <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>

Меню с помощью <ul>, <li>
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
li {
float: left;
}
Ссылка на пример

Кроссбраузерная и адаптивная
вёрстка
Проблемы:
• Много браузеров, движков
• Необходимость поддерживать старые
браузеры
• Различные разрешения экранов
устройств
• Необходимость оптимизации скорости
загрузки

Twitter Bootstrap, ZURB Foundation
Отличные инструменты для быстрого
прототипирования проекта

Prototyping

Готовые шаблоны для типичных веб-страниц:

Twitter Bootstrap, ZURB Foundation:
фреймворки для создания
веб-страниц
• Готовые шаблоны
• Встроенные стили для таблиц, меню,
навигации, прогресс-баров и др.
компонентов
• Темы оформления
• Оптимизация под мобильные девайсы
• Много плагинов, онлайн сервисов

Bootsnip.com – генерация форм для Bootstrap:

Полезности для браузера
• Developer Tools
• Color picker плагины
• Генераторы псевдотекста Lorem Ipsum
• PixelPerfect
• Ruler-плагины
• Stylebot
• LiveCSSEditor

Что почитать?
• 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/

Задание
• Выполнить верстку по PSD макету
дизайнера.

Стажировка-2015. Разработка. Занятие 1. Основы языков разметки.

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Стажировка-2015. Разработка. Занятие 1. Основы языков разметки.

Similar to Стажировка-2015. Разработка. Занятие 1. Основы языков разметки. (15)

More from 7bits

More from 7bits (20)

Стажировка-2015. Разработка. Занятие 1. Основы языков разметки.