itmo_conspects

Лекция 2. HTML и CSS

Язык верстки HTML

Структура веб-страницы создается с помощью языка верстки HTML (HyperText Markup Language, язык гипертекстовой разметки). В основе этого языка лежат теги в формате <tag></tag> или <tag>, которые указывают семантику содержимого внутри себя контента и содержат дополнительные атрибуты <tag key="value">

Каждый HTML-документ начинается с определения его типа, чтобы браузер мог понимать, как его обрабатывать:

<!DOCTYPE html>

В старой версии HTML до его общего принятия тип документа определялся так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Далее идет тег <html></html>. В нем указываются теги <head></head> и <body></body>. Тег head содержит служебную информацию о странице, такую как:

<!DOCTYPE html>

<html>

<head>
    <!-- Заголовок -->
    <title>Web программирование</title>

    <!-- Подключение стилей -->
    <link href="styles.css" rel="stylesheet">
    <!--        ^ ссылка         ^ типа файла (то есть таблица стилей) -->

    <meta charset="utf-8">
    <!--           ^ кодировка -->

    <meta name="keywords" content="web, веб, программирование">
    <!--                           ^ ключевые слова -->
    
    <meta name="description" content="краткое описание"> 
    <!--                              ^ описание -->
</head>

<body>
</body>

</html>

В общем случае теги в head не отображаются непосредственно на странице, но влияют на ее обработку в браузере и поиск в поисковых движках

Далее идет тег <body></body>. Он представляет тело страницы и обычно имеет такую структуру:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Тег main выделяет основное содержание страницы. На странице должен быть только один видимый main. Дополнительные блоки main возможны только если они скрыты (например, с помощью атрибута hidden) или не участвуют в рендеринге

Тег main окружается тегами header и footer. Первый предназначенный для вводной части страницы (так называемой шапки), где представлены логотип компании и главные ссылки на другие страницы (“Каталог”, “О нас” и прочее)

Тег footer предназначен для заключительной части (так называемого подвала), где представлены дополнительные ссылки (например, на юридические документы) и контактная информация

Примерная HTML-страница выглядит так:

<!DOCTYPE html>

<html>

<head>
    <title>Рога и копыта</title>
</head>

<body>
    <header>Компания "Рога и копыта"</header>
    <main></main>
    <footer>+7 (777) 77-77-77</footer>
</body>

</html>

Помимо них также существуют эти теги, обозначающие другие блоки страницы:

Наконец, если подходящего тега с нужной семантикой нет, то используют два общих тега: <div></div> и <span></span>

Тег div используется для блока, а span - для текстовой фразы или ее фрагмента. Теги div и span используется только в тех случаях, в который не нашлось других тегов с подходящей семантикой и смыслом

Таблицы стилей CSS

Чтобы придать стиля веб-странице, используют таблицы стилей, написанные на языке CSS (Cascading Style Sheets, каскадные таблицы стилей). Обычно они пишутся в отдельном файле, подключаемом с помощью тега <link>, но также и могут находиться в исходной HTML-странице в теге <style></style>

Правила стилей состоят из селектора, который определяет теги, к которым применяются стили, и блок объявлений, состоящих из свойства и значения:

селектор {
    свойство1: значение1;
    свойство2: значение2;
    свойство3: значение3;
    /* ... */
}

Так селектором могут быть:

Далее к ним применяются могут применяться особые условия:

CSS-стили могут выглядеть так:

/* для всех элементов цвет текста оранжевый */
* {              
    color: orange;
}

/* для всех блоков div фоновый цвет серый */
div {
    background-color: gray;
}

/* 
    для параграфов с классами `mytext` и `quote` 
    цвет текста красный 
*/
p.mytext.quote {
    color: red;
}

/* 
    для элементов с идентификатором example 
    цвет текста зеленый 
*/
#example {
    color: green;
}

Приоритет правил определяется специфичностью селектора, а при равной специфичности - последним объявлением в коде.

Свойств и значений для них в CSS есть огромное множество. Хорошей практикой является использование классов для применения стилей к элементам, а не идентификаторов

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Также используется сброс стилей normilize.css

This site is open source. Improve this page.