🗊Презентация Создание сайтов на HTML 5 и СSS

HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3 Модуль 1. Введение в HTML

Введение “Введение – это то, что все обычно пропускают”. Согласны? Добро пожаловать на наш курс Web-дизайн в Центре компьютерного обучения Специалист! Наш курс (https://www.specialist.ru/course/eichtml-b) даст вам необходимый багаж знаний для занятия этой интересной и современной профессией. Эти знания вы можете в дальнейшем развивать и совершенствовать, и стать настоящим профессионалом в своей области. Для этого нужно лишь ваше желание.

Основные понятия в веб-разработке

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

Версии HTML RFC 1866— HTML 2.0, одобренный как стандарт 22 сентября1995 года; HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года); HTML 3.2 — 14 января 1997 года; HTML 4.0 — 18 декабря 1997 года; HTML 4.01 — 24 декабря 1999 года; ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года; HTML5 — 28 октября 2014 года; HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года. HTML 5.2 был представлен 14 декабря 2017 года.

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

Что такое интернет? Всемирная информационная компьютерная сеть, связывающая между собой как пользователей компьютерных сетей, так и пользователей индивидуальных компьютеров для обмена информацией.

IP адрес постоянные, закрепленные за определенным компьютером. динамические, которые присваиваются в тот момент, когда пользователь соединяется с интернетом. По IP адресу можно определить где находится сервер и сам сайт. Пример IP адреса: 192.168.1.2

Доменные имена Доменное имя — это определенная буквенная последовательность, обозначающая имя сайта. Доменное имя должно начинаться и заканчиваться буквой латинского алфавита или цифрой. Например, у доменного имени yandex.ru есть две составных части, называемые уровнями и разделенные точками: ru — доменное имя 1 уровня yandex.ru — доменное имя 2 уровня mail.yandex.ru – доменное имя 3 уровня

Браузеры Прикладное программное обеспечение для просмотра веб-страниц; содержания веб-документов, компьютерных файлов и их каталогов; управления веб-приложениями; а также для решения других задач.

Что такое веб-сервер? Веб-сервер — сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, как правило, вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными.

Что такое веб-сервер?

Что такое веб-страница? Веб-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера. Типичная веб-страница представляет собой текстовый файл в формате HTML (*.html).

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

Что такое веб-сайт? Сайт, или веб-сайт, — одна или несколько логически связанных между собой веб-страниц.

Виды сайтов Статические — содержимое подготавливается заранее и выдается пользователю в том виде, в котором хранится на сервере. Динамические — содержимое генерируется при помощи серверных языков программирования.

Виды сайтов Коммерческие — сайты компаний, интернет магазины и т.д. Информационные — доносят до пользователя какую либо информацию. Веб сервисы (порталы) — поисковые системы, электронная почта, форумы, социальные сети.

Виды сайтов Фиксированной ширины — задается фиксированная ширина. Все блоки сайта будут выглядеть так, как и было задумано и не будут изменять размеров зависимости от разрешения монитора или размера экрана браузера. «Резиновые» — ширина строго не задается, а изменяет размер в зависимости от размера экрана браузера или разрешения монитора. Адаптивные — адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана.

Протоколы передачи данных HTTP (Hypertext Transfer Protocol ) HTTPS (Hypertext Transfer Protocol Secure) FTP (File Transfer Protocol)

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

Редакторы Штатный Блокнот (Notepad) Notepad++ (https://notepad-plus-plus.org/ ) Sublime Text (www.sublimetext.com) EmEditor (www.emeditor.com) Edit+ (www.editplus.com) UltraEdit (www.ultraedit.com) Adobe Dreamweaver (www.adobe.com/ru/products/dreamweaver.html)

Теги и атрибуты

HTML: тэги

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

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

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

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

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

Важные факты про HTML5 1. HTML5 - это не новый язык, а расширение уже существующего HTML4 с хорошей обратной совместимостью 2. HTML5 - не цельная вещь, а набор компонентов разной степени готовности 3. Некоторые компоненты HTML5 уже давно работают во многих браузерах, их можно использовать уже сейчас 4. HTML5 - с нами надолго

Как начать верстать на HTML5? Вы уже это делаете!

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

Новые тэги

Новые тэги

<article> Наверное, самый интересный из новых семантических тэгов Это цельный, самостоятельный и самодостаточный кусок контента ля него возможна своя иерархия заголовков Например: пост в блог, новость, статья, пост на форуме, “кусок одного сайта в другом сайте”

<time> Указываем время для людей и машин Примеры:

Новые тэги и старый IE Чтобы можно было использовать и стилизовать новые тэги в старых IE вставляем в <head>

Новые тэги и старый IE Либо подключаем в <head> уже готовую библиотеку:

Новые тэги и старый IE А также помимо скрипта нужно задать для новых тэгов display: block;

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

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

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

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

Таблица ASCII

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

Спецсимволы

Типограф Типограф — это средство онлайн подготовки текста к веб-изданию. Он помогает избежать ручной замены огромного количества текста, расстановки кавычек, неразрывных пробелов, всевозможных символов, которых нет на клавиатуре.

Больше специальных символов https://unicode-table.com/ru/

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

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

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

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

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

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

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

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

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

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

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

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

Теги для форматирования текста Тег <sub> Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер. Тег <sup> Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер. Тег <ins> Выделяет текст в новой версии документа, подчёркивая его. Для тега доступны следующие атрибуты: cite, datetime. Тег <del> Перечёркивает текст. Используется для выделения текста, удаленного из документа. Для тега доступны следующие атрибуты: cite, datetime.

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

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

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

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

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

Справочник тэгов https://webref.ru/html/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element - 100 семантических элементов

Практическое задание

Задание Создать html-документ Добавить внутри страницы doctype, html, head, meta, title, body 

Подведем итоги