Интернет и web-сайты. HTML и CSS

Интернет и Web-сайты

Практическое занятие 1.2 / Самостоятельная работа
Изучить Классификация сайтов. Этапы создания.
https://miro.com/app/board/o9J_kxr0yg4=/
2) подключиться к веб-сайтам (например, rambler.ru, vk.com, yandex.ru и т.п.) через веб-браузер;
3) получить IP-адрес веб-сайтов по доменному имени. Как узнать?

Клиентская часть веб-приложений - HTML
HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.

Структура HTML документа

Практическое занятие 2.1 / Самостоятельная работа
Клиентская часть веб-приложений - HTML
1) Создать html документ
2) Создать в нем текстовый блок, где будет:
Заголовки разных типов;
Жирный, курсивный, подчеркнутый текст;
Список с минимум 3-мя элементами (1-й элемент перечеркнут, 2-)
1-й элемент перечеркнут
2-й выделен желтым
3-й с использование подстрочного и надстрочного начертания символов
Изображение и аудио
Кнопка
Ссылка
3) Открыть созданный html файл в браузере
*Основные теги вы можете посмотреть здесь, а все теги здесь

Каскадная таблица стилей - CSS
CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы.
Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с черного на красный, вы должны написать этот CSS:
p { color: red; }

Практическое занятие 2.2 / Самостоятельная работа
В ходе выполнения Практической работы №2.2 необходимо:
1) Ознакомиться с теоретическим материалом.
2) Создать HTML-страницу по образцу и применить к ней стили CSS (http://users.uoa.gr/~nektar/arts/tributes/antoine_de_saint-exupery_le_petit_prince/the_little_prince.htm)
CSS справочник
Способы подключения CSS к странице

Блочная модель CSS
Developer Tool. Что это и как с
ним работать?

Практическое занятие 2.3 / Самостоятельная работа
1) Создать HTML-страницу по образцу и применить к ней стили CSS используя блочную вёрстку
Пример 1

Практическое занятие 2.3 / Самостоятельная работа
Пример 2

CSS-позиционирование
Изучите теорию

Практическое занятие 2.4 / Повторите страницы по данному образцу:
1
2
3
4
5

Каскадность в CSS
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.
Подробнее…

Создайте файлы index.html и style.css на своём компьютере.
Внутри HTML расположите следующую запись:
Какой-то текст