Noveo web intership html5, css, interface
description
Transcript of Noveo web intership html5, css, interface
![Page 1: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/1.jpg)
Web Internship 2014HTML-5, CSS-3
Основы создания web-документов
Владимир Семеновweb-developer, Noveo Group
![Page 2: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/2.jpg)
HTML 5HyperText Markup Language
![Page 3: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/3.jpg)
git clone https://github.com/noveogroup/university-web-html.git
![Page 4: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/4.jpg)
Исторический аспект
1) Рукописный текст2) Литографическая печать3) Наборная печать4) Офсетная печать5) Экранный текст6) Гипертекст7) Интерактивные страницы8) Мультимедийные документы
![Page 5: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/5.jpg)
Технологии, оказавшие влияниеТипографика
заголовки, текст, таблицы, списки, иллюстрации,специфические части текста (цитаты, аббревиатуры)
Протокол HTTPгиперссылки, подгружаемый мультимедийный контент
Обмен даннымиформы, кнопки
JavaScriptdata-аттрибуты, обработка событий on...
Поисковые машины и автоматические обработчикимета-информация, семантическое деление контента
![Page 6: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/6.jpg)
Базовый синтаксис HTML
<tag attribute="value">...Содержимое...</tag>
<!-- Это никто не увидит -->
![Page 7: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/7.jpg)
Разновидности тэгов1) Одиночные тэги (описывают содержимое): <img attribute="value" />
2) Конечные тэги (содержат только текст): <h1>Заголовок статьи</h1>
3) Тэги-контейнеры (могут содержать элементы):<div><p>Контент</p></div>
4) Группы тэгов (бессмысленны друг без друга):<ul><li>Контент</li></ul>
![Page 8: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/8.jpg)
Структура HTML5-документа
<!DOCTYPE html><html>
<head>...служебная информация для браузера...
</head><body>
...отображаемый на экране контент...</body>
</html>
![Page 9: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/9.jpg)
Служебный элемент <head><head>
<!--кодировка документа--><meta charset="utf-8" /><!--заголовок--><title>Заголовок документа</title><!--файл стиля--> <link href="style.css" /> <!--сервисный скрипт--><script css="script.js"></script>
</head>
![Page 10: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/10.jpg)
Работа с текстом
![Page 11: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/11.jpg)
В белом плаще с кровавым подбоем, шаркающей кавалерийской походкой, ранним утром четырнадцатого числа весеннего месяца нисана в крытую колоннаду между двумя крыльями дворца ирода великого вышел прокуратор Иудеи Понтий Пилат. Более всего на свете прокуратор ненавидел запах розового масла, и все теперь предвещало нехороший день, так как запах этот начал преследовать прокуратора с рассвета. Прокуратору казалось, что розовый запах источают кипарисы и пальмы в саду, что к запаху кожи и конвоя примешивается проклятая розовая струя. От флигелей в тылу дворца, где расположилась пришедшая с прокуратором в Ершалаим первая когорта двенадцатого молниеносного легиона, заносило дымком в колоннаду через верхнюю площадку сада, и к горьковатому дыму, свидетельствовавшему о том, что кашевары в кентуриях начали готовить обед, примешивался все тот же жирный розовый дух. О боги, боги, за что вы наказываете меня?
Просто текст
![Page 12: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/12.jpg)
<h1>Заголовок 1-го уровня</h1><h2>Заголовок 2-го уровня</h2>
... blah-blah-blah ....<h6>Заголовок 6-го уровня</h6>
<hgroup>
<h1>Мастер и Маргарита</h1><h2>Глава 1. Никогда не разговаривайте с неизвестными</h2>
</hgroup>
Заголовки
![Page 13: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/13.jpg)
Разделение текста на абзацы
<p>Это абзац!</p>
<p>Абзац - часть письменной речи, состоящий из одного или нескольких предложений. Абзац является единицей членения текста, находящейся в промежутке меджу фразой и главой. Каждый абзац начинается с новой сторки.</p>
![Page 14: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/14.jpg)
Перевод строки
<p>Когда этот текст достигнет края области, он будетперенесен на следующую строку.</p>
<p>Сразу после элемента<br />предолжение текста переностися на новую строку</p>
<p><nobr>А этот текст будет продолжаться до тех пор, пока
![Page 15: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/15.jpg)
Относительное форматирование
<strong>текст, акцентированный усилением</strong>
<em>текст, акцентированный начертанием<em>
<small>Уменьшенный текст</small>
<sup> </sup>
<sub> </sup>
надстрочный индекс
подстрочный индекс
![Page 16: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/16.jpg)
Физическое форматирование
<b>жирный</b>
<i>курсив</i>
<u>подчеркнутый</u>
<strike>зачеркнутый</strike>
<blink>мигающий</blink>
(морально устарело)
![Page 17: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/17.jpg)
<abbr> - аббревиатура <acronym> - акроним<kbd> - клавиатурное сокращение<dfn> - первое упоминание термина в тексте<dl>,<dt>,<dd> - термин и его расшифровка<q> - цитата внутри предложения<blockquote> - цитирование удаленного источника<cite> - название работы или произведения<code> - исходный программный код<pre> - предварительно отформатированный текст
Обособленные части текста
![Page 18: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/18.jpg)
<bdi>, <bdo> - направление текста<ruby>, <rp>, <rt> - аннотации к текстам на других языках
Тексты на других языках
![Page 19: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/19.jpg)
<del> - текст удален в новой версии документа<ins> - текст добавлен в новой версии документа<mark> - маркированный подсвеченный текст
Корректорские отметки
![Page 20: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/20.jpg)
Иди на <a href="http://google.com">Google.com</a>
Гиперссылки
Иди на Google.com
![Page 21: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/21.jpg)
Списки
![Page 22: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/22.jpg)
1 Маркированный список UL
<ul><li>Цветы</li><li>Шампанское</li><li>Что-то к чаю</li>
</ul>
2 Нумированный список OL
<ol><li>Выдернуть шнур</li><li>Выдавить стекло</li><li>Написать об этом в twitter</li>
</ol>
Списки
![Page 23: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/23.jpg)
3 Навигационное меню
<menu><li>Цветы</li><li>Шампанское</li><li>Что-то к чаю</li>
</menu>
Списки [еще не поддерживается]
4 Меню выбора действий
<menu><command>Выдернуть шнур</command><command>Выдавить стекло</command><command>Написать об этом в twitter</command>
</menu>
![Page 24: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/24.jpg)
Таблицы
![Page 25: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/25.jpg)
<table><caption>Гении современности</caption><thead>
<tr><th>Имя</th><th>Фамилия</th>
</tr></thead><tfoot> ...то же самое что и thead только снизу... </tfoot><tbody>
<tr><td>Стив</td><td>Джобс</td>
</tr></tbody>
</table>
<col>, <colgroup> - используются редко
Таблицы
![Page 26: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/26.jpg)
Мультимедийный контент
![Page 27: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/27.jpg)
Растровые изображения (JPG, GIF, PNG)
<img src="image.jpg" alt="Тут была картинка">
Векторная графика
<canvas>
Графика
![Page 28: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/28.jpg)
<audio controls><source src="song.mp3" type="audio/mpeg" /><span>Альтернативный контент</span>
</audio>
<video width="200px" height="150px" controls="controls"><source src="film.ogv" type="video/ogg" codecs="theora, vorbis"><source src="film.mp4" type="video/mp4" codecs="avc1.42E01E" /><span>Альтернативный контент</span>
</video>
Мультимедийный контент
2 Видео и аудио
![Page 29: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/29.jpg)
<object> <embed> <param> - flash и прочее
Мультимедийный контент3 Объекты
![Page 30: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/30.jpg)
Формы ввода данных
![Page 31: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/31.jpg)
<form action="zloy_script.php" method="post">
<fieldset><legend>Немного о себе</legend>... набор полей раздела...
</fieldset>
<fieldset><legend>Настройки</legend>... набор полей раздела...
</fieldset>
</form>
Декларация формы
![Page 32: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/32.jpg)
<input name="some_name" type="тип" value="Привет" />
text - Текстовое полеpassword - Парольhidden - Скрытое поле
<textarea name="blah">Длинный текст...</textarea>
Элементы для ввода текста
![Page 33: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/33.jpg)
<input name="some_name" type="тип" value="Привет" />
color - Виджет для выбора цвета.date - Поле для выбора календарной даты.datetime - Указание даты и времени.datetime-local - Указание местной даты и времени.email - Для адресов электронной почты.number - Ввод чисел.range - Ползунок для выбора чисел в указанном диапазоне.search - Поле для поиска.tel - Для телефонных номеров.time - Для времени.url - Для веб-адресов.month - Выбор месяца.week - Выбор недели.
Элементы-виджеты(Поддержка ограничена)
![Page 34: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/34.jpg)
Радиокнопки
<input name="direction" type="radio" value="1" />Север<input name="direction" type="radio" value="2" />Запад<input name="direction" type="radio" value="3" />Юг<input name="direction" type="radio" value="4" />Восток
Чекбокс
<input name="agree" type="checkbox" value="1" />Согласны ли вы с условиями лицензионного соглашения
Радиокнопки и чекбоксы
![Page 35: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/35.jpg)
<select name="select_me"><option>Быстро</option><option>Качественно</option><option>Дешево<option>
</select>
Выпадающий список для выбора
![Page 36: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/36.jpg)
<input name="some_name" type="тип" value="Привет" />
button - Кнопка общего назначенияreset - Сброс формыsubmit - Кнопка для отправкиimage - Кнопка-картинка
<button type="тип">Нажми меня!</button>
button - Кнопка общего назначенияreset - Сброс формыsubmit - Кнопка для отправки
Кнопочные элементы
![Page 37: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/37.jpg)
<label for="name_field">Ваше имя</label><input name="name" type="text" id="name_field" />
Подписи к элементам формы
![Page 38: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/38.jpg)
Элементы членения документа на части
![Page 39: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/39.jpg)
Универсальные элементы
<DIV> - универсальный блочный элемент
<div id="page"><div id="content">Длинная статья</div><div id="sidebar">Сайдбар</div>
</div>
<SPAN> - универсальный строчный элемент
<p>Баланс: <span id="balance">100</span> руб.</p>
![Page 40: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/40.jpg)
Контент-ориентированное расширение элемента <div>
<header> - шапка документа или его раздела<footer> - подвал документа или его раздела<nav> - основные элементы навигации<aside> - сайдбар, второстепенный контент.<section> - раздел или параграф документа<article> - независимая самодостаточная часть контента<address> - информация об авторах документа
<summary>, <details> - раскрывающееся пояснение
Семантическое разделение контента
![Page 41: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/41.jpg)
Фигура - самодостаточный элемент контента: иллюстрация, график, фрагмент кода и.т. д.
<figure><img src="/mona-lisa.jpg" alt="Мона Лиза"/><figcaption>Рисунок 1. Мона Лиза</figcaption>
<figure>
<figure><сode><?php echo “Hello World!”; ?></сode><figcaption>Первое приложение на PHP</figcaption>
<figure>
Фигуры
![Page 42: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/42.jpg)
CSS 3Cascading Style Sheets
![Page 43: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/43.jpg)
селектор элемента {свойство: значение;
}
div {height: 100px;width: 250px;background-color: #FF0000;
}
Синтаксис
![Page 44: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/44.jpg)
Прямая выборкаdiv - по имени тэга#main - по идентификатору.big - по имени классаdiv#content - по совокупности имени тэга и idspan.black - по совокупности имени тэга и классаinput[type="text"] - по атрибуту
Контекстная выборкаdiv p strong - цепочка вложенностиa + span - соседние элементыform > fieldset - прямые потомки
Селекторы элементов
![Page 45: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/45.jpg)
* - универсальный селекторa:hover - псевдоклассыp:first-line - псевдоэлементы
Группировка
a.black, p.dark, strong
Выборка элементов
![Page 46: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/46.jpg)
1. Стиль браузера.
2. Стиль пользователя.
3. Стиль автора.
4. Стиль автора с добавлением !important.
5. Стиль пользователя с добавлением !important.
Каскадирование и приоритет стилей
![Page 47: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/47.jpg)
Свойства текстаСвойства шрифтаfontfont-familyfont-sizefont-stretchfont-stylefont-variantfont-weight
Свойства строкletter-spacingline-height
Цвет текстаcolor
Свойства списковlist-stylelist-style-imagelist-style-positionlist-style-type
Деление на колонкиcolumn-countcolumn-gapcolumn-rulecolumn-widthcolumns
Свойства текстаtext-aligntext-align-lasttext-decoration
text-decoration-colortext-decoration-line
text-decoration-styletext-indenttext-overflowtext-shadowtext-transform
![Page 48: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/48.jpg)
Блочная модельВнутренний отступpaddingpadding-bottompadding-leftpadding-rightpadding-top
Внешний отступmarginmargin-bottommargin-leftmargin-rightmargin-top
Размеры блокаheightwidthmax-heightmax-widthmin-heightmin-width
Переполнениеoverflowoverflow-xoverflow-y
Способ отображенияdisplay
Позиционированиеpositiontoprightleftbottom
Обтеканиеfloatclear
Наложениеz-index
Видимостьvisibility
![Page 49: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/49.jpg)
Свойства бордераborderborder-collapseborder-colorborder-imageborder-radiusborder-spacingborder-styleborder-width
border-leftborder-left-colorborder-left-styleborder-left-width
![Page 50: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/50.jpg)
Свойства фонаbackgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-size
![Page 51: Noveo web intership html5, css, interface](https://reader036.fdocuments.net/reader036/viewer/2022062405/557f47ccd8b42aba678b52cb/html5/thumbnails/51.jpg)
THE END
Полезные ресурсы:http://www.w3.org/http://htmlbook.ru