1. Введение - Устройство Веб-сайта

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=”адрес картинки”> - добавление картинки


● Изучить несколько тегов
Практика! Наконец-то!
Делаем веб-
страничку сами
Спасибо
за внимание :)

1. Введение - Устройство Веб-сайта

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

1. Введение - Устройство Веб-сайта

Загружено:

Авторское право:

Доступные форматы

HTML5 & CSS3

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

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

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

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

HTML (от англ. HyperText Markup

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вам также может понравиться