Вы находитесь на странице: 1из 19

HTML5 & CSS3

Введение: устройство веб-сайта


Информация о курсе
Цель курса: познакомиться основными технологиями и
инструментами верстки web-страниц.

● Что такое HTML и CSS ● Блочная модель


● Разработка структуры ● Состояние элементов
современного сайта ● Позиционирование
● Изучение HTML ● Адаптивный дизайн
● Применение стилей CSS ● Итоговый проект
Что мы сегодня сделаем

● Узнать, о чем курс


● Узнать своих соседей
● Узнаем, что такое ЛИСА :)
● Сделаем рентген веб-страницы
● Изучим несколько тегов
● Сделаем простую веб-страничку
кЛИент-Серверная Архитектура
(ЛИСА)
Структура web-приложений

Давайте сыграем в
игру...
Что мы сегодня сделаем

● Узнать, о чем курс


● Узнать своих соседей
● Узнать, что такое ЛИСА :)
● Сделать рентген веб-страницы
● Изучить несколько тегов
● Сделать простую веб-страничку
Языки мира Web

HTML (от англ. HyperText Markup


Language — «язык гипертекстовой
разметки»)
CSS (англ. Cascading Style Sheets —
каскадные таблицы стилей)
JavaScript - скрипт сценарного языка
программирования
Из чего состоит HTML

Тег - это кирпичик, из которых состоит весь HTML-код веб-


страницы.

Пример:

<b>Этот текст будет жирным</b>

Открывающий тег Закрывающий тег


“Скелет” сайта
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>My First Website</title>
</head>
<body>
</body>
</html>
Базовые теги

<!DOCTYPE html> - говорит браузеру, какой перед ним


документ. Данная надпись соответствует html5.

<html> </> - контейнер, который заключает в себе всё


содержимое веб-страницы.
</> означает завершение тега, а также что тег
парный.
Базовые теги

<head> </> - раздел, содержащий теги с информацией

для браузера и поисковиков

<meta> - кодировка, информация для поисковика

<title> </> - заголовок документа

<body> </> - содержимое страницы, отображаемое в

браузере.
Практика! Наконец-то!

Давайте сделаем
страничку...
Создаём файл

index.html
Что мы сегодня сделаем

● Узнать, о чем курс


● Узнать своих соседей
● Узнать, что такое ЛИСА :)
● Сделать рентген веб-страницы
● Изучим несколько тегов
● Сделаем простую веб-страничку
Базовые теги

<h1> </>...<h6> </> - заголовки и подзаголовки от


первого до шестого уровня

<p> </> - абзац


Базовые теги

<br> - перенос строки

<img src=”адрес картинки”> - добавление картинки


Что мы сегодня сделаем

● Узнать, о чем курс


● Узнать своих соседей
● Узнать, что такое ЛИСА :)
● Сделать рентген веб-страницы
● Изучить несколько тегов
● Сделаем простую веб-страничку
Практика! Наконец-то!

Делаем веб-
страничку сами
Спасибо
за внимание :)