Download - занятие 1. html + css
![Page 1: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/1.jpg)
Занятие #1
HTML и CSS
![Page 2: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/2.jpg)
ВЕБ-ТЕХНОЛОГИИГрафический интерфейс (фронтэнд) — то, что видит пользователь, и с чем онможет взаимодействовать
Программная часть (бекэнд) — формирует интерфейс и обрабатываетзапросы пользователей, реализуетбизнес-логику и обеспечивает хранениеданных
Серверное оборудование (хостинг) — компьютеры, на которых работаетпрограммная часть
![Page 3: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/3.jpg)
ФРОНТЭНД
Фронтэнд-технологии нужны для создания веб-интерфейсов
• HTML — содержание и разметка• CSS — визуальное оформление• JavaScript — интерактивность и
анимация
![Page 4: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/4.jpg)
HTMLHyperText Markup Language — язык разметки гипертекста.
Язык HTML распознаётся браузерами и отображается в виде документа в удобной для человека форме.
HTML-документ — это особым образом отформатированный документ, который может содержать в себе текст, ссылки и изображения.
«Чистый» HTML-документ достаточно аскетичен внешне и слабо интерактивен, поэтому для красивого его отображения и повышения интерактивности используются CSS и JavaScript.
![Page 5: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/5.jpg)
CSSCascading Style Sheets — каскадные таблицы стилей.
Язык описания внешнего вида HTML-документов.
Обеспечивает широкие возможности для оформления веб-страниц, позволяя создавать красивые интерфейсы.
![Page 6: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/6.jpg)
HTML + CSS
![Page 7: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/7.jpg)
JavaScript (JS)JavaScript —сценарный язык программирования для придания интерактивности веб-страницам.
JavaScript позволяет добавить в интерфейс анимацию, проводить расчёты и проверять вводимые данные без запросов на сервер, получать с сервера данные и отправлять запросы без перезагрузки страницы целиком (AJAX).
![Page 8: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/8.jpg)
HTMLДеревня Приветствую тебя, пустынный уголок, приют спокойствия,трудов и вдохновенья, где льется дней моих невидимый поток на лонесчастья и забвенья. Я твой — я променял порочный двор Цирцей,роскошные пиры, забавы, заблужденья на мирный шум дубров, натишину полей, на праздность вольную, подругу размышленья.
![Page 9: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/9.jpg)
HTML
ДеревняПриветствую тебя, пустынный уголок,Приют спокойствия, трудов и вдохновенья,Где льется дней моих невидимый потокНа лоне счастья и забвенья.
Я твой — я променял порочный двор Цирцей,Носкошные пиры, забавы, заблужденьяНа мирный шум дубров, на тишину полей,На праздность вольную, подругу размышленья.
![Page 10: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/10.jpg)
HTMLТег — элемент языка разметки, заключенный между символами < и >.
Теги бывают:• Двойные <div> </div>• Одиночные <input/>
Теги регистронезависимы:
<html>,<HTML> или даже <hTmL> — одинаковые теги.
![Page 11: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/11.jpg)
HTMLВ html теги можно не закрывать.
Крайне не рекомендуется так делать!
Вложенность тегов
![Page 12: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/12.jpg)
HTMLАтрибуты тегов
<div class="header"> — в двойных кавычках<input checked='checked'> — в апострофах<div class=footers> — без кавычек<input checked> — одиночные атрибуты
Комментарии
<!--Комментарий-->
![Page 13: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/13.jpg)
HTMLТеги верхнего уровня
![Page 14: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/14.jpg)
HTMLМета—теги
<meta> — определяет мета-теги, которые используются для храненияинформации, предназначенной для браузеров и поисковых систем.
Атрибуты:
• http-equiv — устанавливает HTTP-заголовок• content — значение атрибута
![Page 15: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/15.jpg)
HTML
Атрибут name — устанавливает модификатор мета-тега
<title>Полносервисное digital-агентство интернет рекламы Uplab</title>
![Page 16: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/16.jpg)
HTMLViewport
• width — ширина• maximum-scale — максимальный масштаб• initial-scale — начальный масштаб• user-scalable — изменение масштаба (yes/no)
![Page 17: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/17.jpg)
HTMLOpenGraph
• og:description — описание• og:image — превью картинки• og:video — видео• og:url — путь к странице
![Page 18: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/18.jpg)
HTML"Текстовые" теги
<p> — paragraph• Абзац• По умолчанию отступы сверху и снизу<h1>. .<h6> — header
• Заголовок: h1, h2, h3, h4, h5, h6<br/> — break• Разрыв строки<pre> — preformatted• сохраняет пробелы и разрывы<hr> — horizontal rule• горизонтальная линия<b>[bold], <i>[italic], <blockout>, <mark>• выделение текста
![Page 19: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/19.jpg)
HTMLСсылки:
<a href="#" target="_blank">я ссылка</a> — anchor (якорь)
• атрибут href — задает адрес документа, на который следует перейти• атрибут target — имя окна или фрейма, куда браузер будет загружать
документ
• <a href="#">виды ссылок</a>• [протокол]://uplab.ru• /about• navigator• #name• . ./archive.zip• mailto:[email protected]
![Page 20: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/20.jpg)
HTMLМаркировaнный список
Нумерованный список
![Page 21: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/21.jpg)
HTMLТаблицы
![Page 22: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/22.jpg)
HTMLИзображения
<img width="200" height="200" src="/i/logo.png" alt="Uplab">
• атрибуты width, height — ширина или высота задается в пикселях• атрибут src — url картинки• атрибут alt — альтернативный текст, который выводится, если• изображение не загрузилось
![Page 23: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/23.jpg)
HTMLФормы
![Page 24: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/24.jpg)
HTMLБлочные и строчные элементы
Блочный элементДо и после себя генерирует разрыв потока (строки)
Строчные элементы (инлайн)Находится внутри строкиПереносится на следующую строку, если не влазит в текущую
![Page 25: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/25.jpg)
HTML5 И CSS3HTML и СSS имеют стандарты, которые разрабатываются консорциумом W3C.
HTML5 и CSS3 – это на сегодня самые современные версии стандартов.
Нововведения в HTML5 и CSS3:
• геолокация (определение местонахождения пользователя), • валидация (проверку правильности заполнения) полей в формах, • возможность подстройки интерфейса под экран пользователя, • хранение баз данных на стороне пользователя,• контроль над проигрыванием медиафайлов.
![Page 26: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/26.jpg)
HTML5 И CSS3
![Page 27: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/27.jpg)
Главные возможности CSS Отделяют оформление от содержания Разное оформление — для разных устройств и носителей Ускоряют работу сайтов Один стиль на множество документов (исправления вносятся в один
файл, а проявляются на всём сайте) CSS3 даёт новые возможности оформления
Селектор — указатель на элемент, через идентификатор, класс или название тега.
Атрибут — свойство элемента, которое изменяется
Значение — новое значение свойства
![Page 28: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/28.jpg)
CSSКак правильно подключать CSS стили:
Пример CSS кода:
![Page 29: занятие 1. html + css](https://reader035.vdocuments.net/reader035/viewer/2022062313/55d1ff4bbb61eb55718b4800/html5/thumbnails/29.jpg)
Домашнее задание
http://htmlacademy.ru