noveo web intership html5, css, interface
Post on 16-Jun-2015
229 Views
Preview:
DESCRIPTION
TRANSCRIPT
Web Internship 2014HTML-5, CSS-3
Основы создания web-документов
Владимир Семеновweb-developer, Noveo Group
HTML 5HyperText Markup Language
git clone https://github.com/noveogroup/university-web-html.git
Исторический аспект
1) Рукописный текст2) Литографическая печать3) Наборная печать4) Офсетная печать5) Экранный текст6) Гипертекст7) Интерактивные страницы8) Мультимедийные документы
Технологии, оказавшие влияниеТипографика
заголовки, текст, таблицы, списки, иллюстрации,специфические части текста (цитаты, аббревиатуры)
Протокол HTTPгиперссылки, подгружаемый мультимедийный контент
Обмен даннымиформы, кнопки
JavaScriptdata-аттрибуты, обработка событий on...
Поисковые машины и автоматические обработчикимета-информация, семантическое деление контента
Базовый синтаксис HTML
<tag attribute="value">...Содержимое...</tag>
<!-- Это никто не увидит -->
Разновидности тэгов1) Одиночные тэги (описывают содержимое): <img attribute="value" />
2) Конечные тэги (содержат только текст): <h1>Заголовок статьи</h1>
3) Тэги-контейнеры (могут содержать элементы):<div><p>Контент</p></div>
4) Группы тэгов (бессмысленны друг без друга):<ul><li>Контент</li></ul>
Структура HTML5-документа
<!DOCTYPE html><html>
<head>...служебная информация для браузера...
</head><body>
...отображаемый на экране контент...</body>
</html>
Служебный элемент <head><head>
<!--кодировка документа--><meta charset="utf-8" /><!--заголовок--><title>Заголовок документа</title><!--файл стиля--> <link href="style.css" /> <!--сервисный скрипт--><script css="script.js"></script>
</head>
Работа с текстом
В белом плаще с кровавым подбоем, шаркающей кавалерийской походкой, ранним утром четырнадцатого числа весеннего месяца нисана в крытую колоннаду между двумя крыльями дворца ирода великого вышел прокуратор Иудеи Понтий Пилат. Более всего на свете прокуратор ненавидел запах розового масла, и все теперь предвещало нехороший день, так как запах этот начал преследовать прокуратора с рассвета. Прокуратору казалось, что розовый запах источают кипарисы и пальмы в саду, что к запаху кожи и конвоя примешивается проклятая розовая струя. От флигелей в тылу дворца, где расположилась пришедшая с прокуратором в Ершалаим первая когорта двенадцатого молниеносного легиона, заносило дымком в колоннаду через верхнюю площадку сада, и к горьковатому дыму, свидетельствовавшему о том, что кашевары в кентуриях начали готовить обед, примешивался все тот же жирный розовый дух. О боги, боги, за что вы наказываете меня?
Просто текст
<h1>Заголовок 1-го уровня</h1><h2>Заголовок 2-го уровня</h2>
... blah-blah-blah ....<h6>Заголовок 6-го уровня</h6>
<hgroup>
<h1>Мастер и Маргарита</h1><h2>Глава 1. Никогда не разговаривайте с неизвестными</h2>
</hgroup>
Заголовки
Разделение текста на абзацы
<p>Это абзац!</p>
<p>Абзац - часть письменной речи, состоящий из одного или нескольких предложений. Абзац является единицей членения текста, находящейся в промежутке меджу фразой и главой. Каждый абзац начинается с новой сторки.</p>
Перевод строки
<p>Когда этот текст достигнет края области, он будетперенесен на следующую строку.</p>
<p>Сразу после элемента<br />предолжение текста переностися на новую строку</p>
<p><nobr>А этот текст будет продолжаться до тех пор, пока
Относительное форматирование
<strong>текст, акцентированный усилением</strong>
<em>текст, акцентированный начертанием<em>
<small>Уменьшенный текст</small>
<sup> </sup>
<sub> </sup>
надстрочный индекс
подстрочный индекс
Физическое форматирование
<b>жирный</b>
<i>курсив</i>
<u>подчеркнутый</u>
<strike>зачеркнутый</strike>
<blink>мигающий</blink>
(морально устарело)
<abbr> - аббревиатура <acronym> - акроним<kbd> - клавиатурное сокращение<dfn> - первое упоминание термина в тексте<dl>,<dt>,<dd> - термин и его расшифровка<q> - цитата внутри предложения<blockquote> - цитирование удаленного источника<cite> - название работы или произведения<code> - исходный программный код<pre> - предварительно отформатированный текст
Обособленные части текста
<bdi>, <bdo> - направление текста<ruby>, <rp>, <rt> - аннотации к текстам на других языках
Тексты на других языках
<del> - текст удален в новой версии документа<ins> - текст добавлен в новой версии документа<mark> - маркированный подсвеченный текст
Корректорские отметки
Иди на <a href="http://google.com">Google.com</a>
Гиперссылки
Иди на Google.com
Списки
1 Маркированный список UL
<ul><li>Цветы</li><li>Шампанское</li><li>Что-то к чаю</li>
</ul>
2 Нумированный список OL
<ol><li>Выдернуть шнур</li><li>Выдавить стекло</li><li>Написать об этом в twitter</li>
</ol>
Списки
3 Навигационное меню
<menu><li>Цветы</li><li>Шампанское</li><li>Что-то к чаю</li>
</menu>
Списки [еще не поддерживается]
4 Меню выбора действий
<menu><command>Выдернуть шнур</command><command>Выдавить стекло</command><command>Написать об этом в twitter</command>
</menu>
Таблицы
<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> - используются редко
Таблицы
Мультимедийный контент
Растровые изображения (JPG, GIF, PNG)
<img src="image.jpg" alt="Тут была картинка">
Векторная графика
<canvas>
Графика
<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 Видео и аудио
<object> <embed> <param> - flash и прочее
Мультимедийный контент3 Объекты
Формы ввода данных
<form action="zloy_script.php" method="post">
<fieldset><legend>Немного о себе</legend>... набор полей раздела...
</fieldset>
<fieldset><legend>Настройки</legend>... набор полей раздела...
</fieldset>
</form>
Декларация формы
<input name="some_name" type="тип" value="Привет" />
text - Текстовое полеpassword - Парольhidden - Скрытое поле
<textarea name="blah">Длинный текст...</textarea>
Элементы для ввода текста
<input name="some_name" type="тип" value="Привет" />
color - Виджет для выбора цвета.date - Поле для выбора календарной даты.datetime - Указание даты и времени.datetime-local - Указание местной даты и времени.email - Для адресов электронной почты.number - Ввод чисел.range - Ползунок для выбора чисел в указанном диапазоне.search - Поле для поиска.tel - Для телефонных номеров.time - Для времени.url - Для веб-адресов.month - Выбор месяца.week - Выбор недели.
Элементы-виджеты(Поддержка ограничена)
Радиокнопки
<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" />Согласны ли вы с условиями лицензионного соглашения
Радиокнопки и чекбоксы
<select name="select_me"><option>Быстро</option><option>Качественно</option><option>Дешево<option>
</select>
Выпадающий список для выбора
<input name="some_name" type="тип" value="Привет" />
button - Кнопка общего назначенияreset - Сброс формыsubmit - Кнопка для отправкиimage - Кнопка-картинка
<button type="тип">Нажми меня!</button>
button - Кнопка общего назначенияreset - Сброс формыsubmit - Кнопка для отправки
Кнопочные элементы
<label for="name_field">Ваше имя</label><input name="name" type="text" id="name_field" />
Подписи к элементам формы
Элементы членения документа на части
Универсальные элементы
<DIV> - универсальный блочный элемент
<div id="page"><div id="content">Длинная статья</div><div id="sidebar">Сайдбар</div>
</div>
<SPAN> - универсальный строчный элемент
<p>Баланс: <span id="balance">100</span> руб.</p>
Контент-ориентированное расширение элемента <div>
<header> - шапка документа или его раздела<footer> - подвал документа или его раздела<nav> - основные элементы навигации<aside> - сайдбар, второстепенный контент.<section> - раздел или параграф документа<article> - независимая самодостаточная часть контента<address> - информация об авторах документа
<summary>, <details> - раскрывающееся пояснение
Семантическое разделение контента
Фигура - самодостаточный элемент контента: иллюстрация, график, фрагмент кода и.т. д.
<figure><img src="/mona-lisa.jpg" alt="Мона Лиза"/><figcaption>Рисунок 1. Мона Лиза</figcaption>
<figure>
<figure><сode><?php echo “Hello World!”; ?></сode><figcaption>Первое приложение на PHP</figcaption>
<figure>
Фигуры
CSS 3Cascading Style Sheets
селектор элемента {свойство: значение;
}
div {height: 100px;width: 250px;background-color: #FF0000;
}
Синтаксис
Прямая выборкаdiv - по имени тэга#main - по идентификатору.big - по имени классаdiv#content - по совокупности имени тэга и idspan.black - по совокупности имени тэга и классаinput[type="text"] - по атрибуту
Контекстная выборкаdiv p strong - цепочка вложенностиa + span - соседние элементыform > fieldset - прямые потомки
Селекторы элементов
* - универсальный селекторa:hover - псевдоклассыp:first-line - псевдоэлементы
Группировка
a.black, p.dark, strong
Выборка элементов
1. Стиль браузера.
2. Стиль пользователя.
3. Стиль автора.
4. Стиль автора с добавлением !important.
5. Стиль пользователя с добавлением !important.
Каскадирование и приоритет стилей
Свойства текстаСвойства шрифта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
Блочная модельВнутренний отступpaddingpadding-bottompadding-leftpadding-rightpadding-top
Внешний отступmarginmargin-bottommargin-leftmargin-rightmargin-top
Размеры блокаheightwidthmax-heightmax-widthmin-heightmin-width
Переполнениеoverflowoverflow-xoverflow-y
Способ отображенияdisplay
Позиционированиеpositiontoprightleftbottom
Обтеканиеfloatclear
Наложениеz-index
Видимостьvisibility
Свойства бордераborderborder-collapseborder-colorborder-imageborder-radiusborder-spacingborder-styleborder-width
border-leftborder-left-colorborder-left-styleborder-left-width
Свойства фонаbackgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-size
THE END
Полезные ресурсы:http://www.w3.org/http://htmlbook.ru
top related