Noveo web intership html5, css, interface
1 like633 views
Документ представляет собой учебный материал по основам веб-разработки, охватывающий современные технологии HTML5 и CSS3. Он включает исторический обзор методов печати, структуру HTML-документов, работу с текстом, мультимедийным контентом и формами, а также основы стилей и каскадирования. Также содержатся примеры кода и ссылки на полезные ресурсы для дальнейшего освоения темы.
![3 Навигационное меню
<menu>
<li>Цветы</li>
<li>Шампанское</li>
<li>Что-то к чаю</li>
</menu>
Списки [еще не поддерживается]
4 Меню выбора действий
<menu>
<command>Выдернуть шнур</command>
<command>Выдавить стекло</command>
<command>Написать об этом в twitter</command>
</menu>](https://image.slidesharecdn.com/ezo53evt2bfgfrruni0w-signature-e1e5066d412dcaa388bd77d692b9fa82f9baf12c6b29943d5ea5870a6ca26cfd-poli-140717012550-phpapp02/85/Noveo-web-intership-html5-css-interface-23-320.jpg)
![Прямая выборка
div - по имени тэга
#main - по идентификатору
.big - по имени класса
div#content - по совокупности имени тэга и id
span.black - по совокупности имени тэга и класса
input[type="text"] - по атрибуту
Контекстная выборка
div p strong - цепочка вложенности
a + span - соседние элементы
form > fieldset - прямые потомки
Селекторы элементов](https://image.slidesharecdn.com/ezo53evt2bfgfrruni0w-signature-e1e5066d412dcaa388bd77d692b9fa82f9baf12c6b29943d5ea5870a6ca26cfd-poli-140717012550-phpapp02/85/Noveo-web-intership-html5-css-interface-44-320.jpg)
Noveo web intership html5, css, interface
- 1. Web Internship 2014 HTML-5, CSS-3 Основы создания web-документов Владимир Семенов web-developer, Noveo Group
- 2. HTML 5 HyperText Markup Language
- 4. Исторический аспект 1) Рукописный текст 2) Литографическая печать 3) Наборная печать 4) Офсетная печать 5) Экранный текст 6) Гипертекст 7) Интерактивные страницы 8) Мультимедийные документы
- 5. Технологии, оказавшие влияние Типографика заголовки, текст, таблицы, списки, иллюстрации, специфические части текста (цитаты, аббревиатуры) Протокол HTTP гиперссылки, подгружаемый мультимедийный контент Обмен данными формы, кнопки JavaScript data-аттрибуты, обработка событий on... Поисковые машины и автоматические обработчики мета-информация, семантическое деление контента
- 6. Базовый синтаксис HTML <tag attribute="value">...Содержимое...</tag> <!-- Это никто не увидит -->
- 7. Разновидности тэгов 1) Одиночные тэги (описывают содержимое): <img attribute="value" /> 2) Конечные тэги (содержат только текст): <h1>Заголовок статьи</h1> 3) Тэги-контейнеры (могут содержать элементы): <div><p>Контент</p></div> 4) Группы тэгов (бессмысленны друг без друга): <ul><li>Контент</li></ul>
- 8. Структура HTML5-документа <!DOCTYPE html> <html> <head> ...служебная информация для браузера... </head> <body> ...отображаемый на экране контент... </body> </html>
- 9. Служебный элемент <head> <head> <!--кодировка документа--> <meta charset="utf-8" /> <!--заголовок--> <title>Заголовок документа</title> <!--файл стиля--> <link href="style.css" /> <!--сервисный скрипт--> <script css="script.js"></script> </head>
- 10. Работа с текстом
- 11. В белом плаще с кровавым подбоем, шаркающей кавалерийской походкой, ранним утром четырнадцатого числа весеннего месяца нисана в крытую колоннаду между двумя крыльями дворца ирода великого вышел прокуратор Иудеи Понтий Пилат. Более всего на свете прокуратор ненавидел запах розового масла, и все теперь предвещало нехороший день, так как запах этот начал преследовать прокуратора с рассвета. Прокуратору казалось, что розовый запах источают кипарисы и пальмы в саду, что к запаху кожи и конвоя примешивается проклятая розовая струя. От флигелей в тылу дворца, где расположилась пришедшая с прокуратором в Ершалаим первая когорта двенадцатого молниеносного легиона, заносило дымком в колоннаду через верхнюю площадку сада, и к горьковатому дыму, свидетельствовавшему о том, что кашевары в кентуриях начали готовить обед, примешивался все тот же жирный розовый дух. О боги, боги, за что вы наказываете меня? Просто текст
- 12. <h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> ... blah-blah-blah .... <h6>Заголовок 6-го уровня</h6> <hgroup> <h1>Мастер и Маргарита</h1> <h2>Глава 1. Никогда не разговаривайте с неизвестными</h2> </hgroup> Заголовки
- 13. Разделение текста на абзацы <p>Это абзац!</p> <p>Абзац - часть письменной речи, состоящий из одного или нескольких предложений. Абзац является единицей членения текста, находящейся в промежутке меджу фразой и главой. Каждый абзац начинается с новой сторки.</p>
- 14. Перевод строки <p>Когда этот текст достигнет края области, он будет перенесен на следующую строку.</p> <p>Сразу после элемента<br /> предолжение текста переностися на новую строку</p> <p><nobr>А этот текст будет продолжаться до тех пор, пока
- 15. Относительное форматирование <strong>текст, акцентированный усилением</strong> <em>текст, акцентированный начертанием<em> <small>Уменьшенный текст</small> <sup> </sup> <sub> </sup> надстрочный индекс подстрочный индекс
- 17. <abbr> - аббревиатура <acronym> - акроним <kbd> - клавиатурное сокращение <dfn> - первое упоминание термина в тексте <dl>,<dt>,<dd> - термин и его расшифровка <q> - цитата внутри предложения <blockquote> - цитирование удаленного источника <cite> - название работы или произведения <code> - исходный программный код <pre> - предварительно отформатированный текст Обособленные части текста
- 18. <bdi>, <bdo> - направление текста <ruby>, <rp>, <rt> - аннотации к текстам на других языках Тексты на других языках
- 19. <del> - текст удален в новой версии документа <ins> - текст добавлен в новой версии документа <mark> - маркированный подсвеченный текст Корректорские отметки
- 20. Иди на <a href="http://google.com">Google.com</a> Гиперссылки Иди на Google.com
- 21. Списки
- 22. 1 Маркированный список UL <ul> <li>Цветы</li> <li>Шампанское</li> <li>Что-то к чаю</li> </ul> 2 Нумированный список OL <ol> <li>Выдернуть шнур</li> <li>Выдавить стекло</li> <li>Написать об этом в twitter</li> </ol> Списки
- 23. 3 Навигационное меню <menu> <li>Цветы</li> <li>Шампанское</li> <li>Что-то к чаю</li> </menu> Списки [еще не поддерживается] 4 Меню выбора действий <menu> <command>Выдернуть шнур</command> <command>Выдавить стекло</command> <command>Написать об этом в twitter</command> </menu>
- 24. Таблицы
- 25. <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> - используются редко Таблицы
- 27. Растровые изображения (JPG, GIF, PNG) <img src="image.jpg" alt="Тут была картинка"> Векторная графика <canvas> Графика
- 28. <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 Видео и аудио
- 29. <object> <embed> <param> - flash и прочее Мультимедийный контент 3 Объекты
- 31. <form action="zloy_script.php" method="post"> <fieldset> <legend>Немного о себе</legend> ... набор полей раздела... </fieldset> <fieldset> <legend>Настройки</legend> ... набор полей раздела... </fieldset> </form> Декларация формы
- 32. <input name="some_name" type="тип" value="Привет" /> text - Текстовое поле password - Пароль hidden - Скрытое поле <textarea name="blah">Длинный текст...</textarea> Элементы для ввода текста
- 33. <input name="some_name" type="тип" value="Привет" /> color - Виджет для выбора цвета. date - Поле для выбора календарной даты. datetime - Указание даты и времени. datetime-local - Указание местной даты и времени. email - Для адресов электронной почты. number - Ввод чисел. range - Ползунок для выбора чисел в указанном диапазоне. search - Поле для поиска. tel - Для телефонных номеров. time - Для времени. url - Для веб-адресов. month - Выбор месяца. week - Выбор недели. Элементы-виджеты (Поддержка ограничена)
- 34. Радиокнопки <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" /> Согласны ли вы с условиями лицензионного соглашения Радиокнопки и чекбоксы
- 35. <select name="select_me"> <option>Быстро</option> <option>Качественно</option> <option>Дешево<option> </select> Выпадающий список для выбора
- 36. <input name="some_name" type="тип" value="Привет" /> button - Кнопка общего назначения reset - Сброс формы submit - Кнопка для отправки image - Кнопка-картинка <button type="тип">Нажми меня!</button> button - Кнопка общего назначения reset - Сброс формы submit - Кнопка для отправки Кнопочные элементы
- 37. <label for="name_field">Ваше имя</label> <input name="name" type="text" id="name_field" /> Подписи к элементам формы
- 38. Элементы членения документа на части
- 39. Универсальные элементы <DIV> - универсальный блочный элемент <div id="page"> <div id="content">Длинная статья</div> <div id="sidebar">Сайдбар</div> </div> <SPAN> - универсальный строчный элемент <p>Баланс: <span id="balance">100</span> руб.</p>
- 40. Контент-ориентированное расширение элемента <div> <header> - шапка документа или его раздела <footer> - подвал документа или его раздела <nav> - основные элементы навигации <aside> - сайдбар, второстепенный контент. <section> - раздел или параграф документа <article> - независимая самодостаточная часть контента <address> - информация об авторах документа <summary>, <details> - раскрывающееся пояснение Семантическое разделение контента
- 41. Фигура - самодостаточный элемент контента: иллюстрация, график, фрагмент кода и.т. д. <figure> <img src="/mona-lisa.jpg" alt="Мона Лиза"/> <figcaption>Рисунок 1. Мона Лиза</figcaption> <figure> <figure> <сode><?php echo “Hello World!”; ?></сode> <figcaption>Первое приложение на PHP</figcaption> <figure> Фигуры
- 42. CSS 3 Cascading Style Sheets
- 43. селектор элемента { свойство: значение; } div { height: 100px; width: 250px; background-color: #FF0000; } Синтаксис
- 44. Прямая выборка div - по имени тэга #main - по идентификатору .big - по имени класса div#content - по совокупности имени тэга и id span.black - по совокупности имени тэга и класса input[type="text"] - по атрибуту Контекстная выборка div p strong - цепочка вложенности a + span - соседние элементы form > fieldset - прямые потомки Селекторы элементов
- 45. * - универсальный селектор a:hover - псевдоклассы p:first-line - псевдоэлементы Группировка a.black, p.dark, strong Выборка элементов
- 46. 1. Стиль браузера. 2. Стиль пользователя. 3. Стиль автора. 4. Стиль автора с добавлением !important. 5. Стиль пользователя с добавлением !important. Каскадирование и приоритет стилей
- 47. Свойства текста Свойства шрифта font font-family font-size font-stretch font-style font-variant font-weight Свойства строк letter-spacing line-height Цвет текста color Свойства списков list-style list-style-image list-style-position list-style-type Деление на колонки column-count column-gap column-rule column-width columns Свойства текста text-align text-align-last text-decoration text-decoration- color text-decoration-line text-decoration- style text-indent text-overflow text-shadow text-transform
- 48. Блочная модель Внутренний отступ padding padding-bottom padding-left padding-right padding-top Внешний отступ margin margin-bottom margin-left margin-right margin-top Размеры блока height width max-height max-width min-height min-width Переполнение overflow overflow-x overflow-y Способ отображения display Позиционирование position top right left bottom Обтекание float clear Наложение z-index Видимость visibility