Оптимизация написания верстки

Август 11, 2022

Главная
Информатика
Оптимизация написания верстки

Содержание

2. Emmet Процесс написания HTML и CSS может оказаться изнурительным и требовать выполнения множества одних и тех
3. В чем суть? Emmet позволяет быстро писать код, не заостряя внимание на скобках и закрывающих тегах.
4. Как быстро составить структуру документа В Visual Studio Code (или любом другом редакторе кода, где установлено
5. Варианты сокращений div .block div>p div+p Простой тег Тег с классом (с id – div#id соответственно)
6. Тема: Ссылки, картинки
7. Ссылки
8. Виды ссылок Внутренняя ссылка – метка (якорь) Переход какой-то текст Внешняя ссылка Переход Смешанная Переход
9. Варианты записи атрибута HREF Абсолютные – http://www.site.ru/index.html – mailto:john@smith.com – tel:88005553535 Относительные – file.html – folder/file.html
10. target пример - ссылка открывается в новой вкладке пример - перекидывает в верх страницы
11. Переход к другому документу в той же папке ... текст ... Что такое HTML5? Что такое
12. Варианты относительных ссылок
13. Варианты относительных ссылок
14. Создание разделов на странице Текст раздела 1 Текст раздела 2 Тут будут контактные данные Какой-либо раздел,
15. Шаблон типовой навигации на сайте Обычно шапка состоит из следующих элементов: Ссылки
16. Изображения
17. Изображения и ссылки Типы файлов иллюстраций. Размещение иллюстрации на web-странице. Элемент IMG и его атрибуты
18. Работа с изображениями Растровые PNG (поддержка прозрачности) JPEG (наименьший объем файла) GIF (поддержка прозрачности, анимации) Векторные
19. PNG – где использовать? PNG отлично подойдут к: Логотипам Иконкам на сайте (если нет варианта в
20. JPG (или JPEG) – где использовать? JPG идентичен формату JPEG. Используется: В фонах В любых фотографиях
21. GIF – где использовать? GIF используется в изображениях, где нужно поддерживать прозрачность фона и/или анимацию.
22. SVG – где использовать? SVG – векторный формат для точного отображения графических элементов. Подходит для иконок
23. SVG – как использовать? SVG – это простой код, который при должном опыте можно редактировать самостоятельно.
24. Как показать картинку? Дополнительные атрибуты: width = "100“ height = "100“ border = "1“ (этот и
25. Картинка как ссылка
27. Скачать презентацию

Слайд 2

Emmet
Процесс написания HTML и CSS может оказаться изнурительным и требовать выполнения

множества одних и тех же задач. В этом случае на помощь может прийти Emmet – плагин, позволяющий значительно ускорить написание верстки. Он использует свои собственные, сокращенные обозначения тегов, и преобразует их в естественные прямо в редакторе кода.
Emmet присутствует практически во всех современных редакторах кода. В некоторых он встроен по умолчанию (например, в Visual Studio Code).

Слайд 3

В чем суть?
Emmet позволяет быстро писать код, не заостряя внимание на

скобках и закрывающих тегах.
Например, написав только слово div, на выходе вы получите конструкцию

.
Работает и с HTML, и с CSS, но применяется с CSS гораздо реже из-за сложности в запоминании аббревиатур.

Слайд 4

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

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

Слайд 5

Варианты сокращений

div

.block

div>p

div+p
Простой тег
Тег с классом
(с id – div#id соответственно)
Одно

вложение
Тег со следующим тегом
Все варианты – на https://docs.emmet.io/cheat-sheet/

Слайд 6

Тема:
Ссылки, картинки

Слайд 7

Ссылки

Слайд 8

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

Внешняя

ссылка
Переход
Смешанная
Переход

Слайд 9

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

/images/logo.gif (на сервере)

Слайд 10

target
пример - ссылка открывается в новой вкладке
пример -

перекидывает в верх страницы

Слайд 11

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

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

Слайд 12

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

Слайд 13

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

Слайд 14

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

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

Тут

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

Какой-либо раздел, смысловой блок

Статья, пост

Шапка сайта

Слайд 15

Шаблон типовой навигации
на сайте
Обычно шапка состоит из следующих
элементов:

Ссылки

Слайд 16

Изображения

Слайд 17

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

атрибуты

Слайд 18

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

(масштабируемая векторная графика)

Слайд 19

PNG – где использовать?
PNG отлично подойдут к:
Логотипам
Иконкам на сайте (если нет

варианта в SVG)
Изображениям, которые необходимо использовать без фона

Слайд 20

JPG (или JPEG) – где использовать?
JPG идентичен формату JPEG. Используется:
В фонах
В

любых фотографиях и других изображениях со сплошным фоном (например, в галерее изображений)

Слайд 21

GIF – где использовать?
GIF используется в изображениях, где нужно поддерживать прозрачность

фона и/или анимацию.

Слайд 22

SVG – где использовать?
SVG – векторный формат для точного отображения графических

элементов. Подходит для иконок и логотипов, а также для анимаций.

Слайд 23

SVG – как использовать?
SVG – это простой код, который при должном

опыте можно редактировать самостоятельно. Он встраивается как отдельное изображение, так и посредством вставки тега

Слайд 24

Как показать картинку?

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

= "1“ (этот и два выше устарели, используют в legacy-верстке и в email)
title = "Логотип нашей компании"
alt = "Название компании"

Слайд 25

Оптимизация написания верстки

Содержание

EmmetПроцесс написания HTML и CSS может оказаться изнурительным и требовать выполнения

В чем суть?Emmet позволяет быстро писать код, не заостряя внимание на

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

Варианты сокращенийdiv.blockdiv>pdiv+pПростой тегТег с классом (с id – div#id соответственно)Одно

Тема:Ссылки, картинки

Ссылки

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

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

targetпример - ссылка открывается в новой вкладкепример -

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

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

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

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

Шаблон типовой навигации на сайте Обычно шапка состоит из следующихэлементов: Ссылки

Изображения

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

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

PNG – где использовать?PNG отлично подойдут к:ЛоготипамИконкам на сайте (если нет

JPG (или JPEG) – где использовать?JPG идентичен формату JPEG. Используется:В фонахВ

GIF – где использовать?GIF используется в изображениях, где нужно поддерживать прозрачность

SVG – где использовать?SVG – векторный формат для точного отображения графических

SVG – как использовать?SVG – это простой код, который при должном

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

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

Похожие презентации

Emmet
Процесс написания HTML и CSS может оказаться изнурительным и требовать выполнения

В чем суть?
Emmet позволяет быстро писать код, не заостряя внимание на

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

Варианты сокращений

div

.block

div>p

div+p
Простой тег
Тег с классом
(с id – div#id соответственно)
Одно

Тема:
Ссылки, картинки

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

Внешняя

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

target
пример - ссылка открывается в новой вкладке
пример -

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

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

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

Тут

Шаблон типовой навигации
на сайте
Обычно шапка состоит из следующих
элементов:

Ссылки

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

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

PNG – где использовать?
PNG отлично подойдут к:
Логотипам
Иконкам на сайте (если нет

JPG (или JPEG) – где использовать?
JPG идентичен формату JPEG. Используется:
В фонах
В

GIF – где использовать?
GIF используется в изображениях, где нужно поддерживать прозрачность

SVG – где использовать?
SVG – векторный формат для точного отображения графических

SVG – как использовать?
SVG – это простой код, который при должном

Как показать картинку?

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