Внимание! Практически весь материал этой лекции был в видеолекции. Если вы всё хорошо усвоили, просто пробегитесь глазами и переходите дальше.
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 состоит из тегов. В примере вы можете видеть несколько тегов, они находятся внутри угловых скобок. Каждый тег имеет свое значение. Например, 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 изображение кролика или любое другое изображение, и скопируйте ссылку на него
Теперь с помощью тега 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>Сохраните файл, откройте его в браузере, и вы увидите примерно вот что:
Давайте применим тег <ul> чтобы создать ненумерованный список. Впишем в него меню для нашего кролика. <ul> и </ul> означают соответственно начало и конец списка, а теги <li></li> ограничивают каждую его строку.
<h3>Кроличье меню</h3>
<ul>
<li>Морковь</li>
<li>Салат латук</li>
<li>Трава</li>
</ul>Разместите этот код внутри
под фотографией и всеми абзацами.Вот что у вас должно получиться:
Вы согласны с тем, что страничка выглядит как-то…скудновато? Так и есть, и главная причина в том, что мы применили «голый» 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 и в разделе
пропишите подключение таблицы:Вот что должно получиться в результате:
Теперь установите в одном из абзацев (внутри тега 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, изменится на фиолетовый, а шрифт абзаца «просто абзац» изменился на более витиеватый.
Ну а если вы хотите изменить цвет шрифта обоих абзацев на белый, добавьте в файл style.css следущий код:
p {
color: white;
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ