Embed Size (px)
Citation preview
Занятие #1
HTML и CSS
ВЕБ-ТЕХНОЛОГИИГрафический интерфейс (фронтэнд) — то, что видит пользователь, и с чем онможет взаимодействовать
Программная часть (бекэнд) — формирует интерфейс и обрабатываетзапросы пользователей, реализуетбизнес-логику и обеспечивает хранениеданных
Серверное оборудование (хостинг) — компьютеры, на которых работаетпрограммная часть
ФРОНТЭНД
Фронтэнд-технологии нужны для создания веб-интерфейсов
• HTML — содержание и разметка• CSS — визуальное оформление• JavaScript — интерактивность и
анимация
HTMLHyperText Markup Language — язык разметки гипертекста.
Язык HTML распознаётся браузерами и отображается в виде документа в удобной для человека форме.
HTML-документ — это особым образом отформатированный документ, который может содержать в себе текст, ссылки и изображения.
«Чистый» HTML-документ достаточно аскетичен внешне и слабо интерактивен, поэтому для красивого его отображения и повышения интерактивности используются CSS и JavaScript.
CSSCascading Style Sheets — каскадные таблицы стилей.
Язык описания внешнего вида HTML-документов.
Обеспечивает широкие возможности для оформления веб-страниц, позволяя создавать красивые интерфейсы.
HTML + CSS
JavaScript (JS)JavaScript —сценарный язык программирования для придания интерактивности веб-страницам.
JavaScript позволяет добавить в интерфейс анимацию, проводить расчёты и проверять вводимые данные без запросов на сервер, получать с сервера данные и отправлять запросы без перезагрузки страницы целиком (AJAX).
HTMLДеревня Приветствую тебя, пустынный уголок, приют спокойствия,трудов и вдохновенья, где льется дней моих невидимый поток на лонесчастья и забвенья. Я твой — я променял порочный двор Цирцей,роскошные пиры, забавы, заблужденья на мирный шум дубров, натишину полей, на праздность вольную, подругу размышленья.
HTML
ДеревняПриветствую тебя, пустынный уголок,Приют спокойствия, трудов и вдохновенья,Где льется дней моих невидимый потокНа лоне счастья и забвенья.
Я твой — я променял порочный двор Цирцей,Носкошные пиры, забавы, заблужденьяНа мирный шум дубров, на тишину полей,На праздность вольную, подругу размышленья.
HTMLТег — элемент языка разметки, заключенный между символами < и >.
Теги бывают:• Двойные <div> </div>• Одиночные <input/>
Теги регистронезависимы:
<html>,<HTML> или даже <hTmL> — одинаковые теги.
HTMLВ html теги можно не закрывать.
Крайне не рекомендуется так делать!
Вложенность тегов
HTMLАтрибуты тегов
<div class="header"> — в двойных кавычках<input checked='checked'> — в апострофах<div class=footers> — без кавычек<input checked> — одиночные атрибуты
Комментарии
<!--Комментарий-->
HTMLТеги верхнего уровня
HTMLМета—теги
<meta> — определяет мета-теги, которые используются для храненияинформации, предназначенной для браузеров и поисковых систем.
Атрибуты:
• http-equiv — устанавливает HTTP-заголовок• content — значение атрибута
HTML
Атрибут name — устанавливает модификатор мета-тега
<title>Полносервисное digital-агентство интернет рекламы Uplab</title>
HTMLViewport
• width — ширина• maximum-scale — максимальный масштаб• initial-scale — начальный масштаб• user-scalable — изменение масштаба (yes/no)
HTMLOpenGraph
• og:description — описание• og:image — превью картинки• og:video — видео• og:url — путь к странице
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>• выделение текста
HTMLСсылки:
<a href="#" target="_blank">я ссылка</a> — anchor (якорь)
• атрибут href — задает адрес документа, на который следует перейти• атрибут target — имя окна или фрейма, куда браузер будет загружать
документ
• <a href="#">виды ссылок</a>• [протокол]://uplab.ru• /about• navigator• #name• . ./archive.zip• mailto:[email protected]
HTMLМаркировaнный список
Нумерованный список
HTMLТаблицы
HTMLИзображения
<img width="200" height="200" src="/i/logo.png" alt="Uplab">
• атрибуты width, height — ширина или высота задается в пикселях• атрибут src — url картинки• атрибут alt — альтернативный текст, который выводится, если• изображение не загрузилось
HTMLФормы
HTMLБлочные и строчные элементы
Блочный элементДо и после себя генерирует разрыв потока (строки)
Строчные элементы (инлайн)Находится внутри строкиПереносится на следующую строку, если не влазит в текущую
HTML5 И CSS3HTML и СSS имеют стандарты, которые разрабатываются консорциумом W3C.
HTML5 и CSS3 – это на сегодня самые современные версии стандартов.
Нововведения в HTML5 и CSS3:
• геолокация (определение местонахождения пользователя), • валидация (проверку правильности заполнения) полей в формах, • возможность подстройки интерфейса под экран пользователя, • хранение баз данных на стороне пользователя,• контроль над проигрыванием медиафайлов.
HTML5 И CSS3
Главные возможности CSS Отделяют оформление от содержания Разное оформление — для разных устройств и носителей Ускоряют работу сайтов Один стиль на множество документов (исправления вносятся в один
файл, а проявляются на всём сайте) CSS3 даёт новые возможности оформления
Селектор — указатель на элемент, через идентификатор, класс или название тега.
Атрибут — свойство элемента, которое изменяется
Значение — новое значение свойства
CSSКак правильно подключать CSS стили:
Пример CSS кода:
Домашнее задание
http://htmlacademy.ru
