Ссылки, картинки, основы CSS презентация

Октябрь 7, 2021

Главная
Информатика
Ссылки, картинки, основы CSS

Содержание

2. Как быстро составить структуру документа В Visual Studio Code (или любом другом редакторе кода, где установлено
3. Создание разделов на странице Текст раздела 2 Текст раздела 2 Тут будут контактные данные Какой-то раздел
4. Ссылки
5. Изображения и ссылки Механизмы адресации на ресурсы в Internet. Реализация механизма в языке HTML Ссылки —
6. Виды ссылок Внутренняя ссылка – метка (якорь) Переход какой-то текст Внешняя ссылка Переход Смешанная Переход
7. Переход к другому документу в той же папке ... текст ... Что такое HTML5? Что такое
8. Варианты записи атрибута HREF Абсолютные – http://www.site.ru/index.html – ftp://site.ru/pub/install.exe – mailto:john@smith.com – tel:88005553535 Относительные – file.html
9. Варианты относительных ссылок
10. Варианты относительных ссылок
11. Лабораторная работа Оформите текст +7 (495) 999-99-99 в виде ссылки на телефон Оформите текст «webmaster@it.easyum.ru» в
12. Изображения
13. Изображения и ссылки Типы файлов иллюстраций. Размещение иллюстрации на web-странице. Элемент IMG и его атрибуты Распределение
14. Работа с изображениями Растровые PNG (поддержка прозрачности) JPEG (наименьший объем файла) GIF (поддержка прозрачности, анимации) Векторные
15. Как показать растровый файл? (png, jpg, gif) Дополнительные атрибуты: width = "100“ height = "100“ border
16. Картинка как ссылка
17. Фоновое изображение Фоновое изображение можно разместить у любого элемента при помощи CSS style="background-image:url(path/to/image.jpg)"
18. Другие частоиспользуемые правила background-repeat: no-repeat; background-size: contain | cover | 100% auto background-position: top | bottom
19. СSS . Каскадные таблицы стилей: основные свойства
20. Темы модуля Основные цели и задачи CSS. Способы добавления стилей на web-страницу. Модульная структура CSS3 Наследование
21. CSS – это… CSS — это язык стилей, который определяет отображение HTML-документов. Правила декларирования стилей:
22. Способы размещения CSS Вложение (inline) – Встраивание (embedding) – p {color:red; background:#FF0000} Связывание (linking) –
23. Селекторы Селекторы – правила выбора элементов на странице для изменения их CSS-свойств. Выделяют селекторы: – Селекторы
24. Декларация класса и id Текст .text { color: red; } Текст #text { color: red; }
25. Домашнее задание Сделать страницу «О себе» Обязательно: 1) заголовок со своим именем 2) фото (или любая
27. Скачать презентацию

Слайд 2

Как быстро составить структуру документа
В Visual Studio Code (или любом другом редакторе кода,

где установлено расширение Emmet) можно быстро написать базовую структуру, написав ! и нажав Enter.

Слайд 3

Создание разделов на странице
Текст раздела 2

Текст раздела 2

Тут будут контактные

данные

Какой-то раздел

Самостоятельный раздел

Верхняя часть блока

Слайд 4

Ссылки

Слайд 5

Изображения и ссылки
Механизмы адресации на ресурсы в Internet. Реализация механизма в языке

HTML
Ссылки — внутренние, внешние и смешанные

Слайд 6

Виды ссылок
Внутренняя ссылка – метка (якорь)
Переход
какой-то текст

Внешняя ссылка

href="page.html">Переход
Смешанная
Переход

Слайд 7

Переход к другому документу в той же папке
... текст ...
Что

такое HTML5?
Что такое CSS?
Позвоните нам!

Слайд 8

Варианты записи атрибута HREF
Абсолютные
– http://www.site.ru/index.html
– ftp://site.ru/pub/install.exe
– mailto:john@smith.com
– tel:88005553535
Относительные
– file.html
– folder/file.html
– ../folder/file.html
– /images/logo.gif

(только на сервере!)

Слайд 9

Варианты относительных ссылок

Слайд 10

Варианты относительных ссылок

Слайд 11

Лабораторная работа
Оформите текст +7 (495) 999-99-99 в виде ссылки на телефон
Оформите текст «webmaster@it.easyum.ru»

в виде ссылки на email

Слайд 12

Изображения

Слайд 13

Изображения и ссылки
Типы файлов иллюстраций.
Размещение иллюстрации на web-странице.
Элемент IMG и его атрибуты
Распределение иллюстраций

по страницам сайта: приемы и советы

Слайд 14

Работа с изображениями
Растровые
PNG (поддержка прозрачности)
JPEG (наименьший объем файла)
GIF (поддержка прозрачности, анимации)
Векторные
SVG (масштабируемая векторная

графика)

Слайд 15

Как показать растровый файл? (png, jpg, gif)

Дополнительные атрибуты:
width = "100“
height

= "100“
border = "1“
title = "Логотип нашей компании"
alt = "Название компании"

Слайд 16

Картинка как ссылка

Слайд 17

Фоновое изображение
Фоновое изображение можно
разместить у любого элемента при
помощи CSS
style="background-image:url(path/to/image.jpg)"

Слайд 18

Другие частоиспользуемые правила
background-repeat: no-repeat;
background-size: contain | cover | 100% auto
background-position: top | bottom

| center | left | right

Слайд 19

СSS . Каскадные таблицы стилей: основные свойства

Слайд 20

Темы модуля
Основные цели и задачи CSS.
Способы добавления стилей на web-страницу.
Модульная структура CSS3
Наследование
Селекторы
Принципы

каскадирования и принципы группировки
Псевдоклассы (псевдоселекторы)
Псевдоэлементы
Работа с цветом и фоном, со шрифтами
Работа с текстом

Слайд 21

CSS – это…
CSS — это язык стилей, который определяет отображение HTML-документов.
Правила декларирования стилей:

Слайд 22

Способы размещения CSS
Вложение (inline)
–

Встраивание (embedding)
–
Связывание

(linking)
–

Слайд 23

Селекторы
Селекторы – правила выбора элементов на странице для
изменения их CSS-свойств.
Выделяют селекторы:
–

Селекторы по элементу
– По идентификатору (атрибуту id)
– По классу (атрибуту class)
– Селекторы по атрибутам
– Селекторы псевдо-классов
– Селекторы псевдо-элементов

Слайд 24

Декларация класса и id
Текст

Текст

Помните, что стили через

id труднее перезаписать, а также то, что один id может использоваться только один раз на всю страницу. Не рекомендуется прибегать к этому методу без крайней необходимости.

Слайд 25

Домашнее задание
Сделать страницу «О себе»
Обязательно:
1) заголовок со своим именем
2) фото (или любая другая

картинка) с атрибутами alt и title
3) ограничить ширину фото в 300 пикселей
4) написать о себе (тег p)...