Html5 css3 занятие 1

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

Это подвал

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

http://htmlbook.ru/

http://getbootstrap.com/getting-started/#download

ДЗ

1. Создать вид:

Первый заголовок

• Строка 1

• Строка 2

• Строка 3

Подвал

Education

Html5 css3 занятие 1