Реферат

Профессиональное образовательное учреждение
Камчатский кооперативный техникум
Камчатского краевого союза потребительских кооперативов
РЕФЕРАТ
по предмету: «Операционные системы»
на тему: «Технологии HTML+CSS»
Выполнил: студент ПКС-20-9
Степченко Е.М.
Петропавловск-Камчатский 2021
СОДЕРЖАНИЕ
1. Введение......................................................................................................... 3
2. Технология HTML ........................................................................................ 3
2.1 Базовый синтаксис HTML...................................................................... 4
3. Технология CSS............................................................................................. 5
3.1 Базовый синтаксис CSS .......................................................................... 6
4. Заключение .................................................................................................... 8
5. Список используемых источников информации ....................................... 9
6. Приложение ................................................................................................. 10
1. Введение
Что такое веб технологии и какими они бывают? Под «веб-технологиями» обычно
подразумеваются языки разметки, языки программирования, базы данных, системы
и платформы CMS и другие технологии, которые позволяют создавать веб-сайты,
приложения
и
магазины.
Люди,
которые
делают
это,
называются
веб-
разработчиками или веб-мастерами. Есть два типа веб-технологий. Первый, так
называемый front-end — отвечает за внешний вид сайта, и виден в браузере
пользователя. Включает HTML, CSS, JavaScript. Второй тип веб-технологий - backend. Работает на сервере и используется для обработки данных. Его действие
обычно невидимо для пользователя, видны только введенные данные или действия,
выполненные на веб-сайте, и результат этих данных или действий. Таким образом,
весь процесс выполнения выходит за рамки браузера.
2. Технология HTML
HTML (от англ. HyperText Markup Language - «язык гипертекстовой разметки») стандартизированный язык разметки документов для просмотра веб-страниц
в браузере.
Веб-браузеры
протоколам HTTP/HTTPS или
получают
HTML
открывают
с
документ
локального
от
сервера
диска,
по
далее
интерпретируют код в интерфейс, который будет отображаться на экране монитора.
Элементы HTML являются строительными блоками HTML страниц. С помощью
HTML разные конструкции могут быть встроены в отображаемую страницу. HTML
предоставляет средства для создания заголовков, абзацев, списков, ссылок, цитат и
других элементов. Элементы HTML выделяются тегами, записанными с
использованием угловых скобок. Такие теги, как <img /> и <input />, напрямую
вводят контент на страницу. Другие теги, такие как <p />, окружают и оформляют
текст внутри себя и могут включать другие теги в качестве подэлементов. Браузеры
не отображают HTML-теги, но используют их для интерпретации содержимого
страницы.
3
2.1 Базовый синтаксис HTML
HTML-теги — основа синтаксиса HTML. Теги используются для разграничения
начала и конца элементов в разметке. Каждый HTML-документ состоит из дерева
HTML-элементов и текста. Каждый HTML-элемент обозначается начальным
(открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий
теги содержат имя тега. HTML-элемент состоит из:
 Открывающий тег (Opening tag): состоит из имени элемента, заключённого
в
открывающие
и
закрывающие угловые
скобки.
Открывающий
тег указывает, где элемент начинается или начинает действовать.
 Закрывающий тег (Closing tag): это то же самое, что и открывающий тег, за
исключением того, что он включает в себя косую черту перед именем
элемента. Закрывающий элемент указывает, где элемент заканчивается.
Отсутствие закрывающего тега является одной из наиболее распространённых
ошибок начинающих и может приводить к странным результатам.
 Контент (Content): это контент элемента. Контентом может считаться,
например, текст или изображение.
Элементы
могут
иметь
атрибуты.
Атрибуты
содержат
дополнительную
информацию об элементе, которую вы не хотите показывать в фактическом контенте.
Например, class это имя атрибута, а header это значение атрибута. Класс позволяет
дать элементу идентификационное имя, которое может позже использоваться, чтобы
обращаться к элементу с информацией о стиле и прочих вещах. Атрибут должен
иметь:
 Пробел между ним и именем элемента (или предыдущим атрибутом, если
элемент уже имеет один или несколько атрибутов)
 Имя атрибута, за которым следует знак равенства
 Значение атрибута, заключённое с двух сторон в кавычки
Также, есть возможность располагать одни элементы внутри других – это называется
вложением. Важно убедиться, что элементы правильно вложены. Например: первым
открыт элемент <p>, затем элемент <strong>, то сначала нужно закрыть элемент
<strong>, затем элемент <p>.
4
Для работы с изображениями используется атрибут <src> (source, источник), который
содержит путь к файлу изображения. Для разметки текста используются такие
атрибуты, как: <h1> - <h6> и <p>. Элемент <h1> называется элементом заголовка. Он
имеет 6 уровней (<h1>, <h2> … <h6>). Элементы заголовка позволяют указывать
определённые части контента в качестве заголовков и подзаголовков. Элемент <p>
служит для работы с абзацами текста. Для разметки списков используются элементы
<ul>, <ol> и <li>. Элемент <ul> служит для работы с ненумерованными списками, т.е.
со списками, где порядок пунктов не имеет значения. Элемент <ol> используется в
нумерованных списках, т.е. списках, где порядок пунктов имеет значение. Каждый
пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).
Для добавления ссылок служит элемент <a> (anchor, якорь).
3. Технология CSS
CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный
язык описания
внешнего
вида
документа
(веб-страницы),
написанного
с
использованием языка разметки (чаще всего HTML или XHTML). Также может
применяться
к
любым XML-документам,
используется
создателями веб-страниц для
например,
к SVG или XUL.CSS
задания цветов, шрифтов,
стилей,
расположения отдельных блоков и других аспектов представления внешнего вида
этих веб-страниц. Основной целью разработки CSS являлось отделение описания
логической структуры веб-страницы (которое производится с помощью HTML или
других языков разметки) от описания внешнего вида этой веб-страницы (которое
теперь производится с помощью формального языка CSS). Такое разделение может
увеличить доступность документа, предоставить большую гибкость и возможность
управления его представлением, а также уменьшить сложность и повторяемость в
структурном содержимом. Кроме того, CSS позволяет представлять один и тот же
документ
в
различных
стилях
или методах вывода,
таких
как
экранное
представление, печатное представление, чтение голосом (специальным голосовым
браузером или программой чтения с экрана), или при выводе устройствами,
использующими шрифт Брайля
5
3.1 Базовый синтаксис CSS
Вся структура называется набором правил. Также есть отдельные части, такие как:
 Селектор (Selector)
Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для
применения стиля (в данном случае, элементы <p>). Для стилизации другого
элемента, просто измените селектор.
 Объявление (Declaration)
Единственное
правило,
например
color:
из свойств элемента вы хотите стилизовать.
red; указывает,
какие
 Свойства (Properties)
Способы, которыми вы можете стилизовать определённый HTML-элемент (в
данном случае, color является свойством для элементов <p>). В CSS вы
выбираете, какие свойства вы хотите затронуть в вашем правиле.
 Значение свойства (Property value)
Справа от свойства, после двоеточия, у нас есть значение свойства,
которое выбирает одно из множества возможных признаков для данного свойства
(существует множество значений color, помимо red).
Каждый набор правил должен быть обёрнут в фигурные скобки ({}). В каждом
объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от
значений. Для отделения каждого объявления от предыдущего, необходимо
использовать точку с запятой (;), в каждом наборе правил. Для выделения нескольких
элементов разного типа и применения к ним единого набора правил, нужно добавить
несколько
селекторов,
разделённых
запятыми.
Существует множество типов селектора. Наиболее распространённые представлены
в таблице (см. Таблица 1). Для интеграции набора правил CSS в HTML-документ,
нужно создать файл в любом текстовом редакторе, прописать в нём нужные вам
правила и сохранить этот файл как style.css в папке styles. После чего нужно открыть
свой HTML-документ и вписать следующую строку между тегами <head> и </head>:
<link href=”styles/style.css” rel=”stylesheet” type=”text/css”>, затем, сохранить его.
Для использования своих наборов правил вместе со шрифтами семейства Open Sans,
нужно в своём HTML-документе добавить элемент <link>, с ссылкой на таблицу
шрифтов Open Sans. Этот код связывает вашу страницу с таблицей стилями, которая
загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет
применять их к вашим HTML-элементам используя свою собственную таблицу
стилей. Селектор front-family отвечает за шрифт, который будет использоваться, а
6
селектор front-size отвечает за размер шрифта. Также в CSS-документе есть
возможность оставлять комментарии. Комментарии - это участки документа,
которые не влияют на код и обозначаются следующими символами: /* и */. Макет
CSS основан на блочной системе, что позволяет рассматривать большинство
элементов на HTML-странице как блоки, расположенные друг над другом. Каждый
из блоков, занимающий пространство на странице имеет такие свойства, как:
 padding, пространство только вокруг контента (например, абзаца текста)
 border, сплошная линия, которая расположена рядом с padding
 margin, пространство вокруг внешней стороны элемента
Также в блочной системе могут использоваться следующие свойства:
 width, ширина элемента
 background-color, цвет позади контента и padding элементов
 color, цвет контента элемента (чаще всего текста)
 text-shadow, устанавливает тень на тексте внутри элемента
 display, устанавливает режим отображения элемента
7
4. Заключение
Современные web-технологии дают в руки разработчика мощный инструмент,
позволяющий создавать полнофункциональные приложения, доступные как в
глобальной сети Интернет, так и в корпоративной Интранет-среде. Вместе с тем
острой проблемой остается обеспечение безопасности web-приложений. При выборе
тех или иных инструментов webразработки необходимо четко представлять
функциональные возможности, предоставляемые используемой технологией, ее
особенности, возможные проблемы и способы обеспечения информационной
безопасности. Поэтому крайне важным является освоение основ разработки
webстраниц и web-программирования.
8
5. Список используемых источников информации
 https://tproger.ru
 https://topexpert.digital
 https://itbukva.com
 https://ru.hexlet.io
 https://html5book.ru
 https://developer.mozilla.org
9
6. Приложение
Имя селектора
Что выбирает
Пример
Селектор элемента (иногда
называемый селектором тега
или типа)
Все HTML-элементы
указанного типа
p
Выбирает HTML-тег <p>
ID селектор
Элемент с указанным ID на
данной HTML-странице
Селектор класса
Элементы на странице с
указанным классом
Селектор атрибута
Элементы на странице с
указанным атрибутом
Селектор псевдокласса
Указанные элементы, но
только при определённом
условии, например, при
наведении курсора
#my-id
Выбирает <p id=”my-id”>
или
<a id=”my-id”>
.my-class
Выбирает
<p class=’’my-class’’> и
<a class=’’my-class’’>
Img[src]
Выбирает
<img src=’’myimage.png’’>,
но не <img>
a : hover
Выбирает <a>, но только
тогда, когда указатель мыши
наведён на ссылку
Таблица 1.
10