HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»)

Web-страницы. Cascading Style Sheets (СSS)

7.07M

Category:

internet

Веб - технологии

1. Интернет-технологии

Интернеттехнологии

2. Какие бывают Web-страницы?

• статические – существуют на сервере в виде
готовых файлов: *.htm, *.html
• динамические – полностью или частично
создаются на сервере в момент запроса (выбор
информации из базы данных) *.asp, *.php
• позволяют выбирать информацию из базы
данных по заранее неизвестным запросам
• дополнительная нагрузка на сервер
• загружаются медленнее
Веб-приложения имеют клиентскую (фронтэнд)
и серверную (бэкэнд) части

3. Подготовка рабочего места

Инструмент №1 – Редактор кода
Notepad++
Sublime Text
Visual Studio Code
Инструмент №2 –
Локальный сервер

4. HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»)

HTML
(от англ. HyperText Markup Language — «язык разметки гипертекста»)
Основным форматом представления документов в сети
Интернет является язык гипертекстовой разметки HTML
(стандартный язык разметки документов во Всемирной
паутине) .
HTML – это определенная совокупность правил (тегов),
по которым оформляется документ. Теги показывают
Интернет-браузеру, как следует отображать текст на Webстраничке.
Структура тега (пары тегов) всегда такова:
<название тега> … </название тега>
Теги могут содержать атрибуты, характеризующие
отображение информации внутри тега.

5. Тэги

Тэг – это команда языка HTML, которую выполняет
браузер:
• непарные тэги
вставить
рисунок
<IMG SRC = "vasya.jpg">
• парные тэги (контейнеры)
открывающий
<TABLE>
...
</TABLE>
область действия
тэга: описание
таблицы
закрывающий

6.

Структура Web-страницы
<HTML>
<HEAD>
HTML-код страницы помещается
внутрь контейнера <HTML> …</HTML>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Заголовок Web-страницы
заключается в контейнер
<HEAD>…</HEAD>
Основное содержание страницы
помещается в контейнер
<BODY>…</BODY>
Название Web-страницы
содержится в контейнере
<TITLE>…</TITLE> и выводится в
строке заголовка браузера.

7. Что такое HTML?

• HTML (HyperText Markup
Language) — стандартный
язык разметки документов
во Всемирной паутине.
• Язык HTML
интерпретируется
браузерами; полученный
в результате интерпретации
форматированный текст
отображается на экране
монитора компьютера
или мобильного устройства.
7

8. Что такое CSS?

• CSS — каскадные
таблицы стилей —
формальный язык
описания внешнего
вида документа,
написанного с
использованием языка
разметки (HTML).
8

9. Структура веб-страницы

10. Схема HTTP-запроса страницы

11. HTML: тэги

12. Парные и одиночные тэги

13. Вложенные тэги

14. Атрибуты тэгов

15. Атрибуты тэгов

• Чтобы расширить возможности отдельных элементов
применяются атрибуты.
• Есть два типа атрибутов: атрибут со значением и
логический атрибут, у которого нет значения.
• Атрибуты пишутся внутри открывающего тега, несколько
атрибутов перечисляются через пробел, порядок их
значения не имеет.
• Полный список https://html5book.ru/html-attributes/
15

16. Атрибуты тэгов

• Атрибутов может быть несколько.
Некоторые тэги не имеют смысла без
атрибутов.
16

17. Как начать верстать на HTML5?

• Вы уже это делаете!
17

18. Упрощение синтаксиса

• Помимо добавления новых тэгов
произошло изменение старых.
В основном упрощение
18

19. Новые тэги

20. Новые тэги

21. Простейшая страница

22. Что такое кодировка сайта

• Кодировка (англ. charset) – это таблица, в
которой для каждого кода символа
закрепляется своё графическое
изображение. Если кодировка определена
неправильно, для каждого кода символа
будет использоваться неправильное
графическое изображение.
22

23. Распространенные кодировки

• ASCII - одна из самых старых компьютерных кодировок, в которой
каждому символу соответствует строго определенное число.
Например, символу "a" соответствует число 97, а символу "A" — число
65. ASCII — базовая кодировка текста для латиницы.
• KOI8 - кодовая страница, разработанная для кодирования букв
кириллических алфавитов, дополнение к ASCII, содержит символы
национальных алфавитов (KOI8-R – русская, KOI8-U – украинская и т.д.)
• Windows-1251 (CP1251) – кодировка, являющаяся стандартной 8битной кодировкой для всех русских версий Microsoft Windows.
• UTF-8 - распространённый стандарт кодирования текста,
позволяющий более компактно хранить и передавать символы
Юникода, используя переменное количество байт (от 1 до 4).
23

24. Базовая таблица ASCII

25. Таблица ASCII

26. Таблица KOI8-R (русская)

27. Спецсимволы

http://htmlbook.ru/samhtml/tekst/spetssimvoly
27

28. Страница сложнее, типы тэгов

29. Типы элементов

Базовые:
• 1. блочные
• 2. строчные
Дополнительные:
• блочно-строчные
• Табличные
• и т.д.
29

30. Блочные элементы

• Блочные элементы – прямоугольные
области на странице
• Блочными по умолчанию являются:
30

31. Особенности блочных

• 1. Принудительный перенос строки до и
после
• 2. Воспринимают ширину, высоту,
внутренние и внешние отступы
• 3. Занимают всё доступное по ширине
пространство
• 4. По высоте подстраиваются под
содержимое
31

32. Особенности блочных

33. Строчные элементы

• Строчные элементы - фрагменты текста
• Строчными по умолчанию являются:
33

34. Особенности строчных

• 1. Нет переносов строки до и после - можно
располагать в одной строке
• 2. Ширина и высота зависят только от
содержания, задать размеры с помощью
CSS нельзя
• 3. Воспринимают только горизонтальные
отступы
• 4. Ведут себя как текст
34

35. Особенности строчных

36. Теги для HTML текста

ТЕГИ ДЛЯ HTML ТЕКСТА
36

37. Теги заголовков (<h1>...<h6>)

Теги заголовков (<h1>...<h6>)
• <h1>Заголовок первого уровня</h1>
• <h2>Заголовок второго уровня</h2>
• <h3>Заголовок третьего уровня</h3>
• <h4>Заголовок четвертого уровня</h4>
• <h5>Заголовок пятого уровня</h5>
• <h6>Заголовок шестого уровня</h6>
37

38. Теги заголовков (<h1>...<h6>)

Теги заголовков (<h1>...<h6>)
38

39. Теги для форматирования текста

• Тег <b>
Задаёт полужирное начертания шрифта.
Выделяет текст без акцента на его
важность.
• Тег <em>
Отображает шрифт курсивом, придавая
тексту значимость.
• Тег <i>
Отображает шрифт курсивом.
• Тег <small>
39

40. Теги для форматирования текста

• Тег <sub>
Используется для создания нижних
индексов. Сдвигает текст ниже уровня
строки, уменьшая его размер.
• Тег <sup>
Используется для создания степеней.
Сдвигает текст выше уровня строки,
уменьшая его размер.
• Тег <ins>
Выделяет текст в новой версии документа,
40

41. Теги для ввода «компьютерного» текста

• Тег <code>
Служит для выделения фрагментов
программного кода. Отображается
моноширинным шрифтом.
• Тег <kbd>
Отмечает фрагмент как вводимый
пользователем с клавиатуры. Отображается
моноширинным шрифтом.
• Тег <samp>
Применяется для выделения результата,
41

42. Теги для ввода «компьютерного» текста

• Тег <var>
Выделяет имена переменных, отображая
курсивом.
• Тег <pre>
Позволяет вывести текст на экран, сохранив
изначальное форматирование. Пробелы и
переносы строк при этом не удаляются.
42

43. Теги для оформления цитат и определений

• Тег <abbr>
Применяется для форматирования
аббревиатур. Браузером обычно
подчеркивается пунктирной линией.
Расшифровка сокращения осуществляется с
помощью атрибута title, она появляется при
наведении курсора мыши на текст. Для тега
доступны глобальные атрибуты.
• Тег <bdo>
Используется для замещения текущего
43

44. Теги для оформления цитат и определений

• Тег <q>
Используется для выделения коротких
цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.
• Тег <cite>
Применяется для выделения цитат,
названий произведений, сносок на другие
документы. Для тега доступны глобальные
атрибуты.
• Тег <dfn>
44

45. Абзацы, средства переноса текста

• Тег <p>
Разбивает текст на отдельные абзацы, отделяя друг от
друга пустой строкой. Браузер автоматически добавляет
верхний и нижний отступ, равный 1em, при этом отступы
соседних абзацев «схлопываются». Для тега
доступны глобальные атрибуты.
• Тег <br>
Переносит текст на следующую строку, создавая разрыв
строки. Для тега доступны глобальные атрибуты.
• Тег <hr>
Используется для разделения контента на веб-странице.
Отображается в виде горизонтальной линии. Для тега
доступны глобальные атрибуты.
45

46. Web-страницы. Язык HTML

Этапы создания
современного сайта

47.

Этапы создания сайта
Работу по созданию можно разделить
на такие этапы:
- Подготовительный;
- Разработка макета;
- Верстка;
- Программирование;
- Наполнение контентом;
- Раскрутка сайта;
- Администрирование (поддержка) сайта.

48.

1. Подготовительный этап
Создание любого сайта должно начинаться с
составления его структуры (карты сайта), тематики,
цель сайта и аудитория (пол, возраст) и т.д.
Пример такой структуры может выглядеть так:
- Главная
- О компании
- История
- Миссия
- Товары
- Автомобили
- Легковые
- Внедорожники
- Мотоциклы
- Велосипеды
- Контакты

49.

2. Разработка макета
Разработка макета расположение основных
значимых элементов
(блоков) на каждой
странице (каркас).
Разработка дизайна –
отрисовка сайта в
графическом редакторе
С помощью языка HTML
создаём структуру сайта с
использованием блоков и
придание им стиля с
помощью CSS.

50.

Пример созданного макета в
Photoshop

51.

3. Верстка. Виды вёрстки при
создании сайтов
• Табличная. В табличной верстке можно создавать
колонки, таблицы в браузерах выглядят почти
одинаково. Недостатки: индексация такого сайта очень
медленная, долго загружаются страницы и код такой
верстки слишком большой.
• Блочная. Преимущества блочной верстки заключается
в том, что она правильно отображает все элементы
сайта на разных устройствах (например, на мобильных
телефонах). Компактный код, все элементы весят
меньше, а значит страница будет загружаться быстро.
Из недостатков можно отметить, что при использовании
разных браузеров верстка может поплыть.

52.

Табличная верстка <table>
Схема табличного дизайна:
<table width="760" border="1" cellspacing="0" cellpadding="5">
<tr> <td colspan="2">Заголовок сайта</td></tr>
<tr> <td>Набор гиперссылок </td><td> Содержимое сайта </td></tr>
<tr> <td colspan="2"> Сведения о правах разработчика </td></tr>
</table>

53.

Блочная верстка
Создаем простейший макет сайта на основе блочной верстки.
<div>
</div>
Элемент <div> является блочным элементом и предназначен для выделения
фрагмента документа с целью изменения вида содержимого. Как правило,
вид блока управляется с помощью стилей.

54.

Блоки верстка с <div>
В HTML файле разбиение на блоки
В CSS файле придание стиля
<div id="header">Шапка(header)</div>
<div id="left">Левая колонка(left)</div>
<div id="content">Содержание
страницы(content)</div>
<div id="footer">Подвал(footer)</div>
#header { width:1000px;
height:217px;
background: red;
}
#left { width:200px;
height:100%;
float:left;
background: blue;
}
#content { height:100%;
width:100%;
background: green;
}
#footer { width:1000px;
background: yellow;
}

55.

Пример вёрстки

56. Web-страницы. Cascading Style Sheets (СSS)

57.

CSS (Cascading Style Sheets)
Каскадные таблицы стилей преимущественно используется как
средство описания, оформления внешнего вида веб-страниц,
написанных с помощью языков разметки HTML.
• используется создателями веб-страниц для задания цветов,
шрифтов, расположения отдельных блоков и других аспектов
представления внешнего вида этих веб-страниц.
• предоставляет большую гибкость и возможность управления его
представлением
• разделение описания логической структуры веб-страницы
(которое производится с помощью HTML или других языков
разметки) от описания внешнего вида этой веб-страницы (которое
теперь производится с помощью формального языка CSS)
Подключение файла со стилем:
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>

58.

Синтаксис CSS
Синтаксис CSS состоит из трех частей: селектора, свойства и значения:
Селекторы правила CSS могут быть
• селекторами элементов (a, p..)
p { font-family: Garamond, serif; }
• селекторами классов (class)
.note { color: red;
background: yellow;
font-weight: bold; }
• селекторами идентификаторов (id)
#paragraph1 {
margin: 0;
width:100px;}
• селекторами псевдоклассов (a:hover…)
a:active {
color:yellow;
}
Синтаксис:
селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

59.

Селекторы элементов

60.

Селекторы классов и идентификаторов
Посмотрим на фрагмент HTML-документа
<div id="content">
<p id="select">Кофе — напиток, изготавливаемый из жареных зёрен
кофейного дерева. Благодаря содержанию кофеина оказывает
стимулирующее действие.</p>
<p class="default">До XIV века кофе произрастал в Эфиопии в диком
виде.</p>
<p class="default">Затем, в 1706 году голландские колонисты прислали
саженец кофейного дерева в ботанический сад Амстердама, и с этого дерева
началось выращивание растения в колониях Нового Света.</p>
</div>
В CSS
#content {
width: 800px;
background: #ccc;
font-size: 14pt}
#select {
width: 800px;
font-size: 20pt;
color: blue; }
.default {
width: 800px;
font-size: 14pt;
}

61.

Основные свойста CSS
width:1000px; // задает ширину элемента (можно в px,%)
height:217px; // задает высоту элемента
background: red; // задает цвет фона
background: url(‘image.jpg’); // задает фоновое изображение
text-align: center; // задает выравнивание текста
float:left; // задает положение блока <div> слева
a:hover // изменяет стильссылки при наведение курсора
a:visited // изменяет стиль посещенной ссылки
margin: 0 auto; // задает отступ сверху/снизу справа/слева
padding: 20px 20px; // задает отступ внутри блока
Остальные свойства можно посмотреть на сайтах:
http://css.manual.ru
https://webref.ru/ (http://htmlbook.ru)

62.

CSS 3. Новые возможности
• Прозрачность/Opacity
В браузерах, поддерживающих это свойство, указать прозрачность можно так:
В файле стилей нужному селектору указать следующие свойства:
background-color: rgb(0,0,255);
opacity: 0.5;
• Указание нескольких фоновых картинок/Multiple Backgrounds
Новая версия CSS позволяет добавлять элементам несколько фоновых
картинок. Можно разместить изображения вверху, в центре, в углу и в других
местах. Верстать сложные макеты станет намного проще.
Вот пример установки нескольких картинок для фона:
В файле стилей нужному селектору указать следующие свойства:
background: url(body-top.gif) top left no-repeat,
url(banner_fresco.jpg) top 11px no-repeat,
url(body-bottom.gif) bottom left no-repeat,
url(body-middle.gif) left repeat-y;

63.

CSS 3. Новые возможности
• Пользовательское изменение размера/Resize
Средствами новой версии CSS можно добавить немного интерактивности на
ваш сайт - свойство resize позволит посетителю изменять размер элементов:
div.resize { width: 100px; height: 100px; resize: both; overflow: auto; }
• Закругленные углы/border-radius
С помощью этого свойства возможно делать закругленные углы у блоков.
Допустимо указывать радиус закругления для каждого угла в отдельности.
#elem { border-top-left-radius: 1em; border-top-right-radius: 2em; borderbottom-right-radius: 3em; border-bottom-left-radius: 4em; }
Границы могут быть не только идеально круглыми - можно указывать два
радиуса кривизны:
border-radius: 55pt 25pt;

64.

CSS 3. Новые возможности
• Тень блока/box-shadow
Абсолютно новое свойство, позволяющее показать бокс с тенью. Его формат таков:
span { box-shadow: 0.2em 0.2em 5px #CCC; }
Результат можно увидеть на картинке:
• Текст с тенью/text-shadow
Это свойство не совсем новое, оно присутствовало и в CSS2, однако поддерживают его
пока только браузеры Opera 9.5, Safari 3, Konqueror и iCab. Если ИЕ8 и Firefox 3 не
отстанут, применять Photoshop для того, чтобы сделать простую тень, станет не нужно.
Пример использования text-shadow:
color: #fff; background-color: #fff; text-shadow: 2px 2px 2px #000;
Добавление простой анимации
Подробно ознакомиться можно здесь: http://alt-f4.ru/article/new-in-css3

English Русский Rules