- Главная
- Разное
- Дизайн
- Бизнес и предпринимательство
- Аналитика
- Образование
- Развлечения
- Красота и здоровье
- Финансы
- Государство
- Путешествия
- Спорт
- Недвижимость
- Армия
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Веб-разработка. HTML – Hyper Text Markup Language. Язык разметки гипертекста презентация
Содержание
- 1. Веб-разработка. HTML – Hyper Text Markup Language. Язык разметки гипертекста
- 2. HTML
- 3. HTML HTML – Hyper Text Markup Language. Язык разметки гипертекста.
- 4. Тэг
- 5. HTML Тэг - элемент языка разметки гипертекста.
- 6. HTML Тэг - элемент языка разметки гипертекста. Заключается в угловые скобки.
- 7. HTML Тэг - элемент языка разметки гипертекста. Бывает одиночным...
- 8. HTML Тэг - элемент языка разметки
- 9. HTML Тэг - элемент языка разметки
- 10. HTML Тэг - элемент языка разметки
- 11. HTML Тэг - элемент языка разметки гипертекста. Тэг может иметь атрибуты
- 12. HTML Тэг - элемент языка разметки гипертекста. Тэг может иметь атрибуты
- 13. HTML Тэг - элемент языка разметки гипертекста. Тэг может иметь атрибуты
- 14. HTML Тэг - элемент языка разметки гипертекста. Тэг может иметь атрибуты
- 15. HTML Тэг - элемент языка разметки гипертекста. Тэг может иметь атрибуты
- 16. HTML Тэг - элемент языка разметки
- 17. HTML Тэг - элемент языка разметки
- 18. HTML Тэг - элемент языка разметки
- 19. HTML Тэг - элемент языка разметки
- 20. HTML Тэг - элемент языка разметки
- 21. HTML Тэг - элемент языка разметки
- 22. HTML Тэг - элемент языка разметки
- 23. HTML Тэг - элемент языка разметки
- 24. HTML Тэг - элемент языка разметки
- 25. HTML Тэг - элемент языка разметки
- 26. Структура документа
- 27. Структура
- 28. Структура
- 29. Структура HTML5 ==
- 30. Структура
- 31. Структура
- 32. Структура
- 33. Типы тэгов
- 34. Типы тэгов Блочные Строчные ...
- 35. Типы тэгов Блочные Занимают всю доступную
- 36. Типы тэгов Строчные Занимают ширину «по
- 37. Параметры атрибутов
- 38. Параметры атрибутов Цвет: Название по-английски gray, red,
- 39. Параметры атрибутов Размер: Пиксели, px Проценты, % em, pt, ...
- 40. Параметры атрибутов Адреса: Абсолютные http://some.tld/some/file.html //some.tld/some/file.html
- 41. «Единицы измерения» Адреса: Относительные От корня / /some/file.html /some/folder/
- 42. «Единицы измерения» Адреса: Относительные От текущего адреса ../ some/file.html some/folder/
- 43. «Единицы измерения» Адреса: Относительные, От текущего адреса
- 44. «Единицы измерения» Адреса: Относительные, От текущего адреса
- 45. Валидация документов
- 46. Валидация Существуют специальные утилиты/онлайн-сервисы для проверки правильности
- 47. Валидация Когда приходится намеренно ломать документ? Проблемы
- 48. Валидация Проводите валидацию! Оставляйте только те несоответствия, для которых четко понятна причина и необходимость.
- 49. Подведем итоги
- 50. Итоги
- 51. Итоги
- 52. Итоги
- 53. Итоги
- 54. Итоги
- 55. Итоги
- 56. Итоги
- 57. Итоги Link
- 58. Итоги Test Link
- 59. Вопросы есть?
- 60. CSS
- 61. CSS CSS – Cascading Style Sheet. Каскадные таблицы стилей
- 62. CSS
- 63. CSS Заголовок документа Какой-то текст Второй заголовок документа Другой текст Третий текст
- 64. CSS Заголовок документа Какой-то текст
- 65. CSS Заголовок документа Какой-то текст
- 66. Базовые понятия Иерархия элементов
- 67. Базовые понятия Иерархия элементов
- 68. Базовые понятия Иерархия элементов
- 69. Базовые понятия Иерархия элементов
- 70. Базовые понятия Иерархия элементов
- 71. Базовые понятия Иерархия элементов
- 72. Базовые понятия Специальные атрибуты Id
- 73. Базовые понятия Специальные атрибуты class
- 74. Базовые понятия Специальные атрибуты id class ...
- 75. Базовые понятия Подключение CSS Тэг
- 76. Базовые понятия Подключение CSS Тэг
- 77. Базовые понятия Подключение CSS Тэг Тэг Атрибут style ...
- 78. Базовые понятия Подключение CSS Тэг
- 79. Правила оформления
- 80. Правила оформления ... селектор[, селектор ...]
- 81. Правила оформления @import url(...) @media
- 82. Селекторы
- 83. Селекторы Универсальный * {
- 84. Селекторы Селектор элемента p, h1
- 85. Селекторы Селектор класса .intro {
- 86. Селекторы Селектор идентификатора #main {
- 87. Селекторы Селектор потомков #main p
- 88. Селекторы Селектор дочернего элемента #main
- 89. Селекторы Селектор непосредственного cоседа .intro
- 90. Селекторы Селектор cоседа .intro +
- 91. Селекторы Селектор атрибута a[href^=“http:”] {
- 92. Селекторы Селектор атрибута [href] –
- 93. Селекторы Селектор псевдокласса/псевдоэлемента a:active { ... }
- 94. Селекторы Псевдоклассы :active :hover :link :not :target :visited
- 95. Селекторы Псевдоэлементы :first-letter
- 96. Селекторы Псевдоэлементы :before :after
- 97. Селекторы Псевдоэлементы :first-line :selection ...
- 98. Свойства и значения
- 99. Свойства и значения .marked {
- 100. Свойства и значения .marked {
- 101. Применение правил. Наследование и каскад.
- 102. Применение правил Встроенные правила браузера Правила браузера,
- 103. Наследование ...
- 104. СSS-фреймворки
- 105. Фреймворки Готовые библиотеки стилей позволяющие: Располагать элементы
- 106. Фреймворки Twitter Bootstrap - http://getbootstrap.com/
- 107. Фреймворки Twitter Bootstrap
- 108. СSS-процессоры
- 109. Процессоры Утилиты, позволяющие более удобно писать CSS
- 110. Процессоры. LESS @markColor: #FF0000; #some {
- 111. Процессоры. LESS @markColor: #FF0000; #some {
- 112. Полезные ссылки
- 113. Полезные ссылки http://htmlbook.ru - учебник, справочник http://quirksmode.org/css/selectors/
- 114. Вопросы есть?
- 115. Спасибо за внимание!
Слайд 16HTML
Тэг - элемент языка разметки гипертекста.
Парные теги могут содержать внутри себя
другие тэги и/или текст
some text
Слайд 17HTML
Тэг - элемент языка разметки гипертекста.
Парные теги могут содержать внутри себя
другие тэги и/или текст
some text
Слайд 18HTML
Тэг - элемент языка разметки гипертекста.
Парные теги могут содержать внутри себя
другие тэги и/или текст
some text
Слайд 19HTML
Тэг - элемент языка разметки гипертекста.
Тэг может быть набран любым регистром
,
,
Слайд 20HTML
Слайд 21HTML
Слайд 23HTML
Слайд 24HTML
Слайд 25HTML
Слайд 35Типы тэгов
Слайд 36Типы тэгов
Слайд 38Параметры атрибутов
Слайд 43«Единицы измерения»
Слайд 44«Единицы измерения»
Слайд 46Валидация
Слайд 47Валидация
Слайд 48Валидация
Слайд 63CSS
Слайд 64CSS
Слайд 65CSS
Слайд 68Базовые понятия
Слайд 69Базовые понятия
Слайд 70Базовые понятия
Слайд 71Базовые понятия
Слайд 72Базовые понятия
Слайд 73Базовые понятия
Слайд 78Базовые понятия
Слайд 80Правила оформления
,
Слайд 20HTML
Тэг - элемент языка разметки гипертекста.
Внутри тэга можно писать сколько угодно
пробелов и переводов строк
myAttr=“x”
attr2>
attr2>
Слайд 21HTML
Тэг - элемент языка разметки гипертекста.
Атрибуты можно писать в любых кавычках
class=‘x’ style=“...”>
Слайд 23HTML
Тэг - элемент языка разметки гипертекста.
А можно вообще без кавычек... Но
лучше не злоупотреблять
Слайд 24HTML
Тэг - элемент языка разметки гипертекста.
... Но лучше не злоупотреблять!
- OK
style=“y”> - Не ОК
Слайд 25HTML
Тэг - элемент языка разметки гипертекста.
Нельзя путать вложенность тэгов!
text
- OK
text
- Не ОК
Слайд 35Типы тэгов
Блочные
Занимают всю доступную ширину
До и после них «перевод строки»
Примеры:
H1, P,
DIV
Слайд 36Типы тэгов
Строчные
Занимают ширину «по содержимому»
До и после них НЕТ «перевода строки»
Примеры:
SPAN,
STRONG, B, I, EM
Слайд 38Параметры атрибутов
Цвет:
Название по-английски
gray, red, deepskyblue
Шестнадцатеричное значение
Три компоненты: красный, зеленый, синий
Компонента: 1
байт (от 0 до 255)
#FF0000 – красный, #FFFF00 – желтый, #C0C0C0 – серый
Цвет + прозрачность (0 – 100):
0 – полностью прозрачный
rgba(255, 100, 145, 50);
#FF0000 – красный, #FFFF00 – желтый, #C0C0C0 – серый
Цвет + прозрачность (0 – 100):
0 – полностью прозрачный
rgba(255, 100, 145, 50);
Слайд 43«Единицы измерения»
Адреса:
Относительные, От текущего адреса
/folder/file.html
some/file.html => /folder/some/file.html
some/folder/ => /folder/some/folder/
./x.html => /folder/x.html
x.html
=> /folder/x.html
Слайд 44«Единицы измерения»
Адреса:
Относительные, От текущего адреса
/folder
../ => / (!!)
some/file.html => /some/file.html
some/folder/ =>
/some/folder/
./x.html => /x.html
x.html => /x.html
./x.html => /x.html
x.html => /x.html
Слайд 46Валидация
Существуют специальные утилиты/онлайн-сервисы для проверки правильности разметки – валидаторы.
http://validator.w3.org/
Валдиный документ –
хорошо!
Невалидный документ – тоже работает, но это плохо есть нюансы.
Невалидный документ – тоже работает, но это плохо есть нюансы.
Слайд 47Валидация
Когда приходится намеренно ломать документ?
Проблемы совместимости браузеров
Различные странные задачи
Например, «вложенные ссылки»:
http://kizu.ru/fun/nested-links/
Слайд 48Валидация
Проводите валидацию!
Оставляйте только те несоответствия, для которых четко понятна причина и
необходимость.
Слайд 63CSS
Заголовок документа
Какой-то текст
Второй заголовок документа
color=‘#665d00’>Другой текст
Третий текст
Слайд 64CSS
Заголовок документа
Какой-то текст
Второй заголовок документа
color=‘#665d00’>Другой текст
Третий текст
Смешение структуры текста и его внешнего вида
Слайд 65CSS
Заголовок документа
Какой-то текст
Второй заголовок документа
color=‘#665d00’>Другой текст
Третий текст
Дублирующийся код
Слайд 68Базовые понятия
Иерархия элементов
Заголовок
Текст
выделен
Еще текст
Родительский элемент
Body, родитель для h1 и p (обоих)
Слайд 69Базовые понятия
Иерархия элементов
Заголовок
Текст
выделен
Еще текст
Родительский элемент
Body НЕ родитель для b
Слайд 70Базовые понятия
Иерархия элементов
Заголовок
Текст
выделен
Еще текст
Элемент-предок
Body предок для всех, кто внутри
Слайд 71Базовые понятия
Иерархия элементов
Заголовок
Текст
выделен
Еще текст
Элемент-сосед
Оба тэга p соседи для h1
Слайд 72Базовые понятия
Специальные атрибуты
Id
Уникальный идентификатор элемента в документе.
Элементов с таким значением id
в документе должно быть не больше одного
Слайд 73Базовые понятия
Специальные атрибуты
class
Значение – набор имен классов, разделенных пробелами
Предназначен для отнесения
элемента к одному или нескольким классам
Элементов одного класса в документе может быть любое количество
Элементов одного класса в документе может быть любое количество
Слайд 78Базовые понятия
Подключение CSS
Тэг
Тэг
Атрибут style
Директива CSS @import
@import url(path/to/file.css);
Слайд 80Правила оформления
...
селектор[, селектор ...] {
свойство: значение;
свойство: значение;
...
}
...
}
...
Слайд 88Селекторы
Селектор дочернего элемента
#main > p {
color: red;
}
id=“menu”>
....
...
.....
.
...
.
Слайд 89Селекторы
Селектор непосредственного cоседа
.intro + p {
color: red;
}
id=“menu”>
....
...
.....
.
...
.
Слайд 92Селекторы
Селектор атрибута
[href] – есть атрибут
[href=“”] – атрибут равен
[href^=“”] – начинается на
[href$=“”] – заканчивается на
[href*=“”] – содержит
[href~=“”] – содержит слово
Слайд 99Свойства и значения
.marked {
color: red;
background: #BAADF0 url(img/pic.png);
margin: 10px auto;
width: 20px;
font: bold 12px Tahoma !important
}
width: 20px;
font: bold 12px Tahoma !important
}
Слайд 100Свойства и значения
.marked {
color: red;
background: #BAADF0 url(img/pic.png);
margin: 10px auto;
width: 20px;
font: bold 12px Tahoma !important
}
width: 20px;
font: bold 12px Tahoma !important
}
Слайд 102Применение правил
Встроенные правила браузера
Правила браузера, заданные пользователем в настройках
Стиль, заданный автором
страницы
Наследуемые стили
Стили, заданные во внешних файлах
Стили, объявленные непосредственно на элементе
Правила с !important
Наследуемые стили
Стили, заданные во внешних файлах
Стили, объявленные непосредственно на элементе
Правила с !important
Слайд 105Фреймворки
Готовые библиотеки стилей позволяющие:
Располагать элементы на странице заданным образом
Колонки, строки фиксированных
или «резиновых» размеров
Стилизовать типовые элементы интерфейса (input, textarea, button) единым образом не меняя верстку (просто навесив класс)
Реализовать дополнительные элементы интерфейса, которых нет в браузере без код на JavaScript
Стилизовать типовые элементы интерфейса (input, textarea, button) единым образом не меняя верстку (просто навесив класс)
Реализовать дополнительные элементы интерфейса, которых нет в браузере без код на JavaScript
Слайд 109Процессоры
Утилиты, позволяющие более удобно писать CSS
Переменные
Вычисляемые выражения
Более простая запись для вложенных
элементов
Примеры:
LESS - http://lesscss.org/
SASS - http://sass-lang.com/
PostCSS - http://postcss.org/
Примеры:
LESS - http://lesscss.org/
SASS - http://sass-lang.com/
PostCSS - http://postcss.org/
Слайд 110Процессоры. LESS
@markColor: #FF0000;
#some {
color: @markColor;
.class {
color: @markColor + #00FF00;
}
}
}
}
Слайд 111Процессоры. LESS
@markColor: #FF0000;
#some {
color: @markColor;
.class {
color: @markColor + #00FF00;
}
}
}
}
#some {
color: #FF0000;
}
#some .class {
color: #FFFF00
}
Слайд 113Полезные ссылки
http://htmlbook.ru - учебник, справочник
http://quirksmode.org/css/selectors/ - таблица совместимости селекторов и примеры
http://browserhacks.com
- справочник хаков для разных браузеров
