View
48
Download
2
Category
Preview:
Citation preview
HTML5 + CSS3
Занятие 1
в 20:00 (МСК)
Направление WEB-разработка
Всем ли хорошо слышно и виден этот текст?
Командная работа над проектом
ТЗ
Руководитель проекта
Дизайнер Верстальщик Программист
Структура передачи данных
• Домены и ip
• Протокол TCP/IP
• Схема взаимодействия браузер-сервер
• Безопасность HTTPS, виды ssl сертификатов
Как формируется сайт на сервере
Статические сайты VS динамические сайты
HTML5
Геолокация
Оффлайн работа
Рисование
Проигрывание видео и аудио
Обработка выбора даты
<!DOCTYPE html>
Структура кода HTML
Структура сайта
Тема, макет, вид
Теги
Одиночные и парные, атрибуты тегов
Частые теги
Теги и атрибуты запоминать не нужно,
нужно понимать правила их применения.
<a>…</a>
<p>…</p>
<br>
<span>…</span>
<div>…</div>
<form>…</form>
<input>
Атрибуты:
• цвет
• размер
• адрес
ТЗ 1
Вывести на экран текст «Hello, World!»
ТЗ 2
Используя теги <h2>, <p>, <a>
разметить текст, чтобы он соответствовал:
Это заголовок
Абзац1
Абзац2
Ссылка Vk.com
Это подвал
Результат ТЗ2
CSS3
Каскадные таблицы стилей
Что такое верстка?
Табличная верстка VS блочная верстка
Способы добавить стили на страницу, 1:
Способы добавить стили на страницу, 2:
Синтаксис css
Применяем css к ТЗ2
Результат применения css к ТЗ2
Селекторы
• Тегиp { color: #ccc }
• Идентификаторы (чувствительны к регистру, приоритет перед классами)
#first_id { color: #ccc }
• Классы (чувствительны к регистру, можно комбинировать)
.first_class { color: #ccc }
Полезные ресурсы
Справочник HTML и CSS
http://htmlbook.ru/
BootStrap
http://getbootstrap.com/getting-started/#download
ДЗ
1. Создать вид:
Первый заголовок
• Строка 1
• Строка 2
• Строка 3
Подвал
Recommended