Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное автономное образовательное учреждение высшего образования

«Национальный исследовательский Томский политехнический Университет»

ОЯТЦ

14.03.02 «Ядерные физика и технологии»

Лабораторная работа по дисциплине: «Основы Web-дизайна»

Знакомство с Hyper Text Markup Language

Исполнитель: студент группы 0А93 Григорьева А.В.

Руководитель: преподаватель Синюкова Е.А.

Томск - 2021

Введение

Цель работы:

Понять различия между двумя языками (HTML и CSS), синтаксис каждого языка и некоторую основную терминологию.

Разница между HTML и CSS

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения.

CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций, созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

HTML страницы без использования CSS становятся сложными и запутанными, так как оформление для каждого элемента прописывается заново, что значительного увеличивает объем текста. Например, есть HTML страница, на которой размещено 3 части текста, которые необходимо оформить одинаково (размер, цвет), но использовать HTML теги для оформления всех трех сразу не получается, так как эти фрагменты находятся в разных местах HTML страницы. Для оформления таких текстов будет необходимо использовать код каждый раз, для каждого фрагмента в отдельности.

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

Знакомство с элементами HTML, тегами и атрибутами

Элементы. Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6>) и абзацев (определены как <p>); в список можно включить элементы <a>, <div>, <span>, <strong> и <em> и многие другие.

Элементы идентифицируются с помощью угловых скобок < >, окружающих имя элемента.

Теги

Добавление угловых скобок < и > вокруг элемента создаёт то, что известно, как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id, который идентифицирует элемент; атрибут class, который классифицирует элемент; атрибут src, который определяет источник встраиваемого содержимого; и атрибут href, который указывает ссылку на связанный ресурс.

Настройка структуры первой веб-страницы

Код написан в программе Notepad++

Рисунок 1 - код, написанный в программе Notepad+++

Рисунок 2 - сайт на странице браузера

Знакомство с селекторами CSS, свойствами и значениями

CSS является сложным языком, который отнимает совсем немного энергии. Он позволяет добавить макет и дизайн для наших страниц и обмениваться стилями от элемента к элементу и страницы к странице.

Каскад

Мы начнём разбирать, как именно отображаются стили со взгляда на то, что известно, как каскад и изучения несколько примеров каскада в действии. В CSS все стили идут каскадом сверху вниз, что позволяет добавлять другой стиль или переписывать его, тем самым таблицы стилей развиваются.

p {

background: orange;

font-size: 24px;

}

p {

background: green;

}

Скажем, к примеру, что мы выбрали все элементы абзаца в верхней части нашего стиля и установили для них цвет фона orange и шрифт размером 24 пикселя. Затем в нижней части нашего стиля мы снова выбираем все элементы абзаца и устанавливаем для них цвет фона green.

Каскадные свойства

Каскад работает со свойствами внутри отдельных селекторов. Опять же, скажем, к примеру, что мы выбрали все элементы абзаца и установили для них цвет фона orange. Затем прямо ниже свойства background и его значения мы добавляем ещё одно свойство и значение, которое задаёт цвет фона green, как показано здесь.

p {

background: orange;

background: green;

}

Вычисление специфичности

Каждый селектор в CSS имеет вес специфичности, он вместе с положением в каскаде определяет, как будут отображаться стили.

Баллы специфичности

Баллы специфичности намеренно разделены дефисом, так как их значения не вычисляются по десятичной системе. У селекторов класса нет 10 баллов, у идентификаторов нет 100 баллов. Вместо этого эти баллы следует читать как 0-1-0 и 1-0-0 соответственно. Мы внимательно рассмотрим, почему эти значения пишутся через дефис в ближайшее время, когда мы станем комбинировать селекторы.

Чем выше вес специфичности селектора, тем больше первенства ему отдаётся при возникновении конфликта стилей. Например, если элемент абзаца выбирается с помощью селектора типа в одном месте и идентификатора в другом, то идентификатор будет иметь приоритет над селектором типа, независимо от того, где идентификатор появляется в каскаде.

HTML

<p id="food">...</p>

CSS

#food {

background: green;

}

p {

background: orange;

}

Комбинация селекторов

Пока мы рассмотрели как использовать разные типы селекторов индивидуально, но мы также должны знать, как использовать эти селекторы вместе. Комбинируя селекторы мы можем быть более конкретными в том, какой элемент или группу элементов мы хотели бы выбрать.

Скажем, к примеру, мы хотим выбрать все элементы абзаца, которые находятся внутри элемента со значением атрибута класса hotdog и установить для них цвет фона как brown. Однако, если один из этих абзацев, случаем, содержит значение атрибута класса mustard, мы хотим установить его цвет фона как yellow. Наши HTML и CSS могут выглядеть следующим образом:

HTML

<div class="hotdog">

<p>...</p>

<p>...</p>

<p class="mustard">...</p>

</div>

CSS

.hotdog p {

background: brown;

}

.hotdog p.mustard {

background: yellow;

}

Когда селекторы комбинируются они должны читаться справа налево. Самый крайний селектор справа, непосредственно перед открытой скобкой, известен как ключевой селектор. Он определяет, к каким именно элементам будут применяться стили. Любой селектор слева от ключевого будет служить уточнением.

Разделение стилей по нескольким классам

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

Элементы в HTML могут содержать более одного атрибута class, при этом их значения разделяются пробелами. За счёт этого мы можем применить некоторые стили ко всем элементам одного вида, а другие стили к конкретным элементам этого же вида.

Давайте взглянем на кнопки, к примеру. Скажем, мы хотим, чтобы у всех наших кнопок был размер шрифта 16 пикселей, но чтобы цвет фона кнопок мог варьироваться в зависимости от того, где кнопки применяются. Мы можем создать несколько классов и распределить их по элементам, в зависимости от применения желаемых стилей.

HTML

<a class="btn btn-danger">...</a>

<a class="btn btn-success">...</a>

CSS

.btn {

font-size: 16px;

}

.btn-danger {

background: red;

}

.btn-success {

background: green;

}

Основные значения свойств CSS

Цвета

Все цветовые значения в CSS определяются как цветовое пространство sRGB (или стандартный красный, зелёный и синий). Цвета в пределах этого пространства образуются путём смешивания вместе красного, зелёного и синего цветовых каналов, отражая способ, каким телевизоры и мониторы генерируют все разные цвета, которые они показывают. При смешивании различных уровней красного, зелёного и синего мы можем создать миллионы цветов и обнаружить почти любой желаемый цвет.

В настоящее время существует четыре основных способа представления цвета sRGB в CSS: ключевые слова, шестнадцатеричная запись, значения RGB и HSL.

Ключевые цвета

Значения ключевого слова - это названия (такие как red, green или blue), которые отображаются данным цветом. Названия ключевых слов и соответствующие им цвета определяется спецификацией CSS. Наиболее распространённые цвета, наряду с несколькими странностями, связаны с ключевым названием.

Шестнадцатеричные цвета

Шестнадцатеричные значения цвета начинаются с решётки (#), затем идёт три или шесть символов. Используются цифры от 0 до 9 и буквы от А до F, в верхнем или нижнем регистре. Эти значения отображают красный, зелёный и синий цветовые каналы.

Приложение

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title>Styles Conference</title>

<link rel="stylesheet" href="assets/stylesheets/main.css">

</head>

<body>

<h1>Styles Conference</h1>

<p>Каждый год самые яркие веб-дизайнеры и фронтенд-разработчики собираются в Чикаго, чтобы обсудить новейшие технологии. Присоединяйся к нам этим августом!</p>

</body>

</html>

Размещено на Allbest.ru