Внимание! Практически весь материал этой лекции был в видеолекции. Если вы всё хорошо усвоили, просто пробегитесь глазами и переходите дальше.

HTML — гипертекстовый язык разметки.
CSS — каскадные таблицы стилей.

HTML и CSS — это главные стандарты и языки разметки, используемых в интернете.

Язык гипертекстовой разметки HTML

Язык HTML (HyperText Markup Language) — гипертекстовый язык разметки. HTML используется для текстовой разметки сайтов. Разметка создается с помощью тегов, каждый из которых задает различные атрибуты для отображения текста. На практике надо всегда выполнять следующее: закрывать все теги, проверять страницы с помощью валидатора (поможет найти ошибки), разделять разметку и стили (хранить в отдельных файлах).

Каскадные таблицы стилей CSS

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

Селекторы можно применить к определенному блоку с идентификатором (#id) или к группе блоков, которая называется классом (.class).

Пример

Создайте два файла (где угодно, в «Виртуальной лаборатории», CS50 IDE, на своем ПК в блокноте) и назовите их web.html и style.css. В первом файле, запишите заготовку нашей веб-страницы:

<html>
  <head>
    <title> Example webpage </ title>
    <Basefont size = 4>
  </ head>
</ html>

Это создаст пустую страницу с заголовком Example Webpage:

HTML и CSS - 1

Язык HTML состоит из тегов. В примере вы можете видеть несколько тегов, они находятся внутри угловых скобок. Каждый тег имеет свое значение. Например, html — это базовый тег. Он указывает на начало и конец веб-страницы. Тег head указывает на параметры страницы. Тег title определяет заголовок, то есть текст, который вы видите на рамке окна браузера вверху страницы, когда она загружается. Обратите внимание: все теги в примере имеют пару. На самом деле в HTML есть теги без пары, но большинство из них всё-таки парные.

<head> — открывающий тэг. Тут начинается его действие.
</head> — закрывающий тэг. Тут действие тэга завершается.
<head> Область действия тэга head </head>.

Изменим код, заменив название на Section Webpage. А ещё — давайте добавим содержимое. Содержимое или тело веб-страницы, то есть всё то, что вы видите внутри окна, ограничивается тэгом body. «Тело» находится ниже «головы» (логично!). Добавим этот тег.

<html>
  <head>
    <title> Section Webpage </ title>
    <Basefont size = 4>
  </ head>
  <body>
  </ body>
</ html>

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

Давайте наполним страничку чем-нибудь. В зоне действия тега body можно вставлять практически любые другие HTML-теги а также текст. Добавим к странице заголовки высокого (h1) и низкого (h6) уровней с помощью соответствующих тегов:

<html>
  <head>
    <Title> Section Webpage </ title>
    <basefont size = 4>
  </ head>
  <body>
    <h1> Welcome! </ h1>
    <h6> This is fun! </ h6>
  </ body>
</ html>

Разместим на странице изображение кролика и абзац с надписью. Найдите в Google изображение кролика или любое другое изображение, и скопируйте ссылку на него

http://s3.amazonaws.com/assets.prod.vetstreet.com/04/71/ec29a3d143ccb82ba28402c1cff6/bunny-in-a-field-thinkstock-178046407.jpg

Теперь с помощью тега p можно вставить абзац с надписью, а с помощью тега img можно вставить изображение на страницу.

С помощью параметров тега p текст выровнять, например, по правому краю экрана. Добавим несколько абзацев, демонстрирующие эти возможности:

<html>
  <head>
    <title>Section Webpage</title>
    <basefont size=4>
  </head>
  <body>
    <h1> Welcome! </h1>
    <h6> This is fun! </h6>
    <p>Славный кролик, не так ли? <img src="http://s3.amazonaws.com/assets.prod.vetstreet.com/04/71/ec29a3d143ccb82ba28402c1cff6/bunny-in-a-field-thinkstock-178046407.jpg"></p>
    <p>Просто абзац</p>
    <p align="right">Абзац, выровненный по правой стороне.</p>
  </body>
</html>

Сохраните файл, откройте его в браузере, и вы увидите примерно вот что:

HTML и CSS - 2

Давайте применим тег <ul> чтобы создать ненумерованный список. Впишем в него меню для нашего кролика. <ul> и </ul> означают соответственно начало и конец списка, а теги <li></li> ограничивают каждую его строку.

<h3>Кроличье меню</h3>
<ul>
  <li>Морковь</li>
  <li>Салат латук</li>
  <li>Трава</li>
</ul>

Разместите этот код внутри под фотографией и всеми абзацами.

Вот что у вас должно получиться:

HTML и CSS - 3

Вы согласны с тем, что страничка выглядит как-то…скудновато? Так и есть, и главная причина в том, что мы применили «голый» HTML, а всю красоту наводят каскадные таблицы стилей. Так что давайте «причешем» нашу страничку. Открываем файл style.css, и пишем там следующий код:

/* Селектор тега body – задает цвет фона*/
body {
	background-color: lightblue;
}

/* Селектор именованного блока, устанавливает цвет текста*/
#pretty_color {
	color: purple;
}

/* Селектор класса — задает шрифт */
.pretty_font {
  font-family: "Brush Script MT", cursive;
}

Открываем в браузере наш файл web.html и… видим, что ничего не поменялось! Ничего удивительного: web.html попросту не знает о существовании нашей таблицы стилей. Её нужно подключить.

Для этого откройте код web.html и в разделе пропишите подключение таблицы:

Вот что должно получиться в результате:

HTML и CSS - 4

Теперь установите в одном из абзацев (внутри тега p) атрибут id = "pretty_color", а другому абзацу пропишем class = "pretty_font".

<html>
  <head>
	<link rel = "stylesheet" type="text/css" href="style.css">
    <title>Section Webpage</title>
    <basefont size=4>
  </head>
  <body>
    <h1> Добро пожаловать! </h1>
    <h6> Верстаем нашу страницу </h6>
    <p id = "pretty_color">Славный кролик, не так ли? <img src="http://s3.amazonaws.com/assets.prod.vetstreet.com/04/71/ec29a3d143ccb82ba28402c1cff6/bunny-in-a-field-thinkstock-178046407.jpg"></p>
    <p class = "pretty_font">Просто абзац</p>
    <p align="right">Абзац, выровненный по правой стороне.</p>
<h3>Кроличье меню</h3>
<ul>
  <li>Морковь<li>
  <li>Салат латук<li>
  <li>Трава<li>
</ul>
  </body>
</html>

Цвет текста в этом абзаце, согласно style.css, изменится на фиолетовый, а шрифт абзаца «просто абзац» изменился на более витиеватый.

HTML и CSS - 5

Ну а если вы хотите изменить цвет шрифта обоих абзацев на белый, добавьте в файл style.css следущий код:

p {
   color: white;
}
HTML и CSS - 6