Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Попробуй сам
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| <!DOCTYPE…> | Это инструкция для веб-браузера о том, на какой версии HTML написана страница. |
| <html> | Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ |
| <head> | Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как <title>, <link> и т.д. |
| <title> | Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. |
| <meta> | Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. |
| <body> | Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например <h1>, <div>, <p> и т.д. |
| <h1> | Этот тег представляет собой заголовок. |
| <p> | Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
Объявление doctype на самой верхней строчке:
<!DOCTYPE…>
Корневой элемент HTML-страницы:
<html>
Контейнер <head> содержит информацию для браузеров и поисковых систем:
<head>
<title>Заголовок окна веб-страницы</title>
</head>
Видимое содержимое страницы:
<body>
<h1>Это заголовок.</h1>
<p>Это абзац.</p>
</body>
</html>
The <!DOCTYPE> декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
Раздел HEAD.
Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.
Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>
| Текст, расположенный между тегами <title> и </title> используется в результатах, выдаваемых поисковыми машинами, в качестве текста ссылки на эту страницу. По этой причине заголовок должен максимально полно описывать содержание веб-страницы. |
С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:
<meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую">
| В разделе HEAD могут быть расположены также теги <base>, <link>, <script>, <style> и другие. Все эти теги мы рассмотрим в дальнейшем по мере изучения материала. |
HTML — это стандартный язык разметки для веб-страниц.
С помощью HTML вы можете создать свой собственный веб-сайт.
HTML прост в освоении — Вам понравится!
Выучить HTML Бесплатно »
Простое обучение с помощью HTML «Попробуйте сами»
С помощью редактора «Попробуйте сами» вы можете отредактировать HTML-код и просмотреть результат:
Пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Учебник</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>
Попробуйте сами »
Нажмите на кнопку «Попробуйте сами», чтобы увидеть, как это работает.
HTML Примеры
В этом руководстве по HTML вы найдете более 200 примеров. С помощью нашего онлайн
-редактора «Попробуйте сами» вы можете редактировать и тестировать каждый пример самостоятельно!
Перейдите к примерам HTML!
HTML Упражнения
Это руководство по HTML также содержит почти 100 упражнений по HTML.
Проверьте себя с помощью Упражнений
Упражнение:
Добавьте «всплывающую подсказку» к абзацу ниже с текстом «О SchoolsW3».
<p =»О SchoolsW3″>SchoolsW3 — это сайт веб-разработчика.</p>
HTML Тест-викторина
Проверьте свои навыки работы с HTML с помощью нашей HTML-викторины!
Старт тест по HTML!
HTML Справочник
В SchoolsW3 вы найдете все ссылки на HTML-элементы,
атрибуты, события, названия цветов, сущности, наборы символов, кодировку URL,
языковые коды, HTTP-сообщения, поддержку браузера и многое другое:
Время на прочтение
13 мин
Количество просмотров 1.2M
Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Структура файлов
Первым шагом давайте создадим простую структуру файлов для наших файлов.
- Создаем папку с названием нашего проекта, например Whitesquare.
- В ней создаем пустой файл index.html.
- В папке проекта создаем папку css с пустым файлом styles.css.
- В папке проекта создаем пустую папку images.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
- Как будут нарезаться изображения?
- Какими будут основные стили?
- Какой макет у нас получится?
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
Прописываем все эти стили в styles.css:
body {
color: #8f8f8f;
font: 12px Tahoma, sans-serif;
background-color: #f8f8f8;
border-top: 5px solid #7e7e7e;
margin: 0;
}
input[type="text"] {
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
height: 30px;
color: #b2b2b2;
padding: 0 10px;
vertical-align: top;
}
button {
color: #fff;
background-color: #29c5e6;
border: none;
height: 32px;
font-family: 'Oswald', sans-serif;
}
p {
margin: 20px 0;
}
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
Каркас HTML
И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Whitesquare</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,300" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.
Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.
Макет
В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
Опишем это в теге body:
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<div id="heading"></div>
<aside></aside>
<section></section>
</div>
<footer></footer>
</body>
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Затем укажем стили блоков:
#wrapper {
max-width: 960px;
margin: auto;
}
header {
padding: 20px 0;
}
Логотип
Вставляем логотип в тег header:
<header>
<a href="/"><img src="" alt="Whitesquare logo"></a>
</header>
Дополнительных стилей не требуется.
Поиск
Вставляем форму поиска в тег header:
<header>
…
<form name="search" action="#" method="get">
<input type="text" name="q" placeholder="Search"><button type="submit">GO</button>
</form>
</header>
И стили выравнивания по правому краю для нее:
form[name="search"] {
float: right;
}
Меню
Для отображения меню необходимо создать список со ссылками внутри тега nav:
<nav>
<ul class="top-menu">
<li><a href="/home/">HOME</a></li>
<li class="active">ABOUT US</li>
<li><a href="/services/">SERVICES</a></li>
<li><a href="/partners/">PARTNERS</a></li>
<li><a href="/customers/">CUSTOMERS</a></li>
<li><a href="/projects/">PROJECTS</a></li>
<li><a href="/careers/">CAREERS</a></li>
<li><a href="/contact/">CONTACT</a></li>
</ul>
</nav>
CSS стили для него будут следующие:
nav a {
text-decoration: none;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
list-style-position: inside;
font: 14px 'Oswald', sans-serif;
padding: 10px;
}
.top-menu li {
display: inline-block;
padding: 10px 30px;
margin: 0;
}
.top-menu li.active {
background: #29c5e6;
color: #fff;
}
.top-menu a {
color: #b2b2b2;
}
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
Заголовок страницы
Заголовок страницы помещается в div с идентификатором heading
<div id="heading">
<h1>ABOUT US</h1>
</div>
Заголовок имеет следующие стили:
#heading {
background: transparent url(../images/h1-bg.png);
margin: 30px 0;
padding-left: 20px;
}
h1 {
display: inline-block;
color: #7e7e7e;
font: 40px/40px 'Oswald', sans-serif;
background: url(../images/bg.png);
margin: 0;
padding: 0 10px;
}
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Колонки
Для того, чтобы создать колонки страницы нужно прописать следующие стили:
aside {
float: left;
width: 250px;
}
section {
margin-left: 280px;
padding-bottom: 50px;
}
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
Подменю
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
<aside>
<nav>
<ul class="aside-menu">
<li class="active">LOREM IPSUM</li>
<li><a href="/donec/">DONEC TINCIDUNT LAOREET</a></li>
<li><a href="/vestibulum/">VESTIBULUM ELIT</a></li>
<li><a href="/etiam/">ETIAM PHARETRA</a></li>
<li><a href="/phasellus/">PHASELLUS PLACERAT</a></li>
<li><a href="/cras/">CRAS ET NISI VITAE ODIO</a></li>
</ul>
</nav>
</aside>
И применяем к подменю следующие стили:
.aside-menu li {
font-weight: 300;
list-style-type: square;
border-top: 1px solid #e7e7e7;
}
.aside-menu li:first-child {
border: none;
}
.aside-menu li.active {
color: #29c5e6;
}
.aside-menu a {
color: #8f8f8f;
}
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
Контент сайдбара
В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
В html это выглядит так:
<h2>OUR OFFICES</h2>
<p><img src="images/sample.png" width="230" height="180" alt="Our offices"></p>
В стилях укажем шрифты, цвета и отступы:
aside > h2 {
background: #29c5e6;
font: 14px 'Oswald', sans-serif;
color: #fff;
padding: 10px;
margin: 30px 0 0 0;
}
aside > p {
background: #f3f3f3;
border: 1px solid #e7e7e7;
padding: 10px;
margin: 0;
}
Данные стили применяются только к заголовкам и параграфам, лежащим непосредственно внутри сайдбара, но не глубже.
Цитата
Вёрстку контента начнём с добавления цитаты.
Добавим код цитаты в раздел section
<section>
<blockquote>
<p>
“QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.”
</p>
<cite>John Doe, Lorem Ipsum</cite>
</blockquote>
</section>
И применим для него стили:
blockquote {
margin: 0;
background: #29c5e6;
padding: 10px 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
blockquote p {
color: #fff;
font-style: italic;
font-size: 33px;
margin: 0;
}
blockquote cite {
display: block;
font-size: 20px;
font-style: normal;
color: #1d8ea6;
margin: 0;
text-align: right;
}
Здесь нет ничего нового, так же — шрифты, фоны и отступы.
Контент
Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после
.
<p>Lorem ipsum dolor sit amet…</p>
<p>Donec vel nisl nibh…</p>
<p>Donec vel nisl nibh…</p>
Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :
<figure>
<img src="images/sample.png" width="320" height="175" alt="">
</figure>
<figure>
<img src="images/sample.png" width="320" height="175" alt="">
</figure>
, которому зададим следующие стили:
figure {
display: inline-block;
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 300;
}
figure img {
display: block;
border: 1px solid #fff;
outline: 1px solid #c9c9c9;
}
figure figcaption {
font-size: 16px;
font-weight: 300;
margin-top: 5px;
}
figure figcaption span {
display: block;
font-size: 14px;
color: #29c5e6;
}
section > figure + figure {
margin-left: 28px;
}
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
<h2>OUR TEAM</h2>
Со стилем:
section > h2 {
background: #29c5e6;
font: 30px 'Oswald', sans-serif;
font-weight: 300;
color: #fff;
padding: 0 10px;
margin: 30px 0 0 0;
}
А затем два блока-строки с карточками сотрудников
<div class="team-row">
<figure>
<img src="images/sample.png" width="96" height="96" alt="">
<figcaption>John Doe<span>ceo</span></figcaption>
</figure>
<figure>
<img src="images/sample.png" width="96" height="96" alt="">
<figcaption>Saundra Pittsley<span>team leader</span></figcaption>
</figure>
…
</div>
<div class="team-row">
<figure>
<img src="images/sample.png" width="96" height="96" alt="">
<figcaption>Ericka Nobriga<span>art director</span></figcaption>
</figure>
<figure>
<img src="images/sample.png" width="96" height="96" alt="">
<figcaption>Cody Rousselle<span>senior ui designer</span></figcaption>
</figure>
…
</div>
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
figure figcaption {
font-size: 16px;
font-weight: 300;
margin-top: 5px;
}
figure div {
font-size: 14px;
color: #29c5e6;
}
.team-row figure {
margin-top: 20px;
}
.team-row figure + figure {
margin-left: 43px;
}
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
<footer>
<div id="footer">
<div id="twitter"></div>
<div id="sitemap"></div>
<div id="social"></div>
<div id="footer-logo"></div>
</div>
</footer>
И применим к нему оформление:
footer {
background: #7e7e7e;
color: #dbdbdb;
font-size: 11px;
}
#footer {
max-width: 960px;
margin: auto;
padding: 10px 0;
height: 90px;
}
Контейнер с id=”footer” находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
<div id="twitter">
<h3>TWITTER FEED</h3>
<time datetime="2012-10-23"><a href="#">23 oct</a></time>
<p>
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
</p>
</div>
Стили:
footer h3 {
font: 14px 'Oswald', sans-serif;
color: #fff;
border-bottom: 1px solid #919191;
margin: 0 0 10px 0;
}
#twitter time a {
color: #b4aeae;
}
footer p {
margin: 5px 0;
}
#twitter {
float: left;
width: 300px;
}
#twitter p {
padding-right: 15px;
}
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта
Карта сайта представляет собой два блока со ссылками:
<div id="sitemap">
<h3>SITEMAP</h3>
<div>
<a href="/home/">Home</a>
<a href="/about/">About</a>
<a href="/services/">Services</a>
</div>
<div>
<a href="/partners/">Partners</a>
<a href="/customers/">Support</a>
<a href="/contact/">Contact</a>
</div>
</div>
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
footer a {
color: #dbdbdb;
}
#sitemap {
width: 150px;
float: left;
margin-left: 20px;
padding-right: 15px;
}
#sitemap div {
display: inline-block;
}
#sitemap div + div {
margin-left: 40px;
}
#sitemap a {
display: block;
text-decoration: none;
font-size: 12px;
margin-bottom: 5px;
}
#sitemap a:hover {
text-decoration: underline;
}
Социальные ссылки
Вставляем набор ссылок в контейнер
<div id="social">
<h3>SOCIAL NETWORKS</h3>
<a href="http://twitter.com/" class="social-icon twitter"></a>
<a href="http://facebook.com/" class="social-icon facebook"></a>
<a href="http://plus.google.com/" class="social-icon google-plus"></a>
<a href="http://vimeo.com/" class="social-icon-small vimeo"></a>
<a href="http://youtube.com/" class="social-icon-small youtube"></a>
<a href="http://flickr.com/" class="social-icon-small flickr"></a>
<a href="http://instagram.com/" class="social-icon-small instagram"></a>
<a href="/rss/" class="social-icon-small rss"></a>
</div>
И стилизуем их:
#social {
float: left;
margin-left: 20px;
width: 130px;
}
.social-icon {
width: 30px;
height: 30px;
background: url(../images/social.png) no-repeat;
display: inline-block;
margin-right: 10px;
}
.social-icon-small {
width: 16px;
height: 16px;
background: url(../images/social-small.png) no-repeat;
display: inline-block;
margin: 5px 6px 0 0;
}
.twitter {
background-position: 0 0;
}
.facebook {
background-position: -30px 0;
}
.google-plus {
background-position: -60px 0;
}
.vimeo {
background-position: 0 0;
}
.youtube {
background-position: -16px 0;
}
.flickr {
background-position: -32px 0;
}
.instagram {
background-position: -48px 0;
}
.rss {
background-position: -64px 0;
}
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
<div id="footer-logo">
<a href="/"><img src="" alt="Whitesquare logo"></a>
<p>Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation</p>
</div>
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
#footer-logo {
float: right;
margin-top: 20px;
font-size: 10px;
text-align: right;
}На этом наши работы закончены. Готовый проект можно скачать здесь.
Основы HTML для начинающих — в этой статье я расскажу об основах языка гипертекстовой разметки HTML. Статья предназначена для начинающих: школьников и студентов начальных курсов. Первая статья из серии самоучитель HTML.
HTML (HyperText Markup Language) — язык гипертекстовой разметки. Базовый язык для создания веб-страниц.
Гипертекст — текст связанный с другим текстом при помоги гиперссылок (или просто ссылок).
Гипертекстовые документы открываются в браузере.
Содержание:
- История развития HTML
- Версии HTML
- Структура и элементы
- Элемент <html>
- Элемент <head>
- Элемент <title>
- Элемент <body>
- Атрибуты тегов
- Элемент meta
- Description
- Keywords
- Http-equivs
- Charset
- Link
- Script
- Style
- Отношения элементов
- Как это работает
- Doctype
В 1986 году Международной организацией по стандартизации (ISO) был принят стандарт который назвали «Standard Generalized Markup Language» — SGML. Этот стандарт был посвящен описанию обобщенного мета языка, который позволял строить системы логической структурной разметки любых разновидностей текстов. Он соответствовал международному стандарту ISO 8879.
Суть состояла в том, что бы создать разметку текста которую без проблем можно было распознать на любом компьютере (что было очень важно в те времена).
Если вы знаете основы компьютерных сетей, то SGML можно сравнить с моделью OSI. SGML это базовый принципы которые легли в основу HTML так же как модель TCP/IP основывается на модели OSI.
В 1991 году на британский ученый Тимо Бернерс Ли разрабатывает на основе SGML язык гипертекстовой разметки который получает название HyperText Markup Language (HTML).
HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Путем определения небольшого набора структурных и семантических элементов, получались достаточно простые и в тоже время красиво оформленные документы. HTML успешно справился с проблемами SGML.
Изначально HTML соответствовал особенностям и идеологии SGML. В 1993 году появилась версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не были рекомендованы к использованию, так как указывали на физические параметры предоставления документа. Этот факт, в свою очередь, противоречил идеологии SGML.
Вся HTML- разметка была логической и только в описательной части стандарта можно было увидеть что-то типа ”в графических браузерах действие этого тега может передаваться жирным начертанием” (речь идет о теге <b>, одном из первых тегов).
В это время был единственный браузер – Mosaic, который поддерживал графические возможности. Этот браузер был разработан в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications — NCSA), там же, кстати, была разработана технология WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало.
В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер.
Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.
Авторы HTML 3 добавили поддержку нового средства — иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить назревшее к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимой от HTML.
Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0.
18 декабря 1997 года бала принята четвертая версия HTML. Она содержала как и третья много элементов, специфичных для отдельных браузеров. Хотя в HTML 4.0 произошла чистка элементов из предыдущих версий спецификаций. Многие элементы были помечены как устаревшие и не рекомендуемые к использованию. Вместо них рекомендовалось использовать таблицы стилей CSS.
HTML 4.01 утвердили 24 декабря 1999. Изменения, принятые в нем были более значительные, чем, кажется на первый взгляд.
Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года.
В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) — расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001 года.
Версии HTML
- HTML 2.0 — опубликован IETF как RFC 1866 в статусе Proposed Standard (24 ноября 1995 года);
- HTML 3.0 — 28 марта 1995 года — IETF Internet Draft (до 28 сентября 1995 года);
- HTML 3.2 — 14 января 1997 года;
- HTML 4.0 — 18 декабря 1997 года;
- HTML 4.01 — 24 декабря 1999 года;
- ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года;
- HTML5— 28 октября 2014 года;
- HTML 5.1 начал разрабатываться 17 декабря 2012 года. Рекомендован к применению с 1 ноября 2016 года.
- HTML 5.2 был представлен 14 декабря 2017 года.
- HTML 5.3 был представлен 24 декабря 2018 года.
Структура и основные элементы
Основным элементом HTML является тег. Тег это определенный текст заключенный в угловые скобки <...>.
Большинство тегов парные, они имеют открывающий и закрывающий тег. Закрывающий тег отличается от открывающего добавлением слеша перед текстом.
Например:
<html>
...
</html>
Теги могут иметь атрибуты которым присваиваются значения (об этом чуть позже).
Теги могут быть вложенными друг в друга.
Например:
<html>
<head>
...
</head>
</html>
Редактор HTML
Теги прописываются в редакторе. Простейший пример редактора — блокнот. Но я советую пользоваться редактором Notepad++, скачать его можно на официальном сайте, устанавливается он в два клика.
Основное преимущество этого (да и других) редактора в том, что в нем есть подсветка синтаксиса. Это значит что ваш код будет выделяться определённым цветом. Данное действие упрощает написание кода и позволяет избежать ошибок.
В редакторе прописываются теги, а затем файл сохраняется с расширением .html. Посоле чего его можно открыть с помощью браузера.
Основные элементы web-страницы
Проста веб-страница состоит из «базового» набора тегов. Это следующие теги:
<html>— тег указывает что это HTML код.<head>(голова — в переводе с английского) — тег содержащий техническую информацию, например заголовок страницы, подключаемы стили и скрипты, мета-информацию и так далее.<title>(заголовок — в переводе с английского) — тег содержит заголовок HTML-документа который отображается во вкладке браузера.<body>(тело — в переводе с английского) — «тело» или основное содержимое документа которое видит пользователь.
Все базовые теги имеют закрывающие теги и являются вложенными друг в друга.
Давайте наберем в редакторе следующий код:
<html> <head> <title>Заголовок моей первой страницы (во вкладке браузера)</title> </head> <body> <h1>Заголовок страницы в браузере</h1> <p>Любой тест, обычно это Hello World!</p> </body> </html>
Затем сохраните файл с расширением .html, в моем случае это файл html-1.html. Если у вас появились проблемы, просто скачайте этот файл.
Откройте файл в браузере и посмотрите результат.
Рассмотрим основные элементы подробнее.
Элемент <html>
Корневой элемент веб-страницы. Все HTML-теги должны быть внутри него, иначе они не будут правильно обрабатываться браузером.
Помните, в начале статьи я писал что теги имеют атрибуты со значениями? Так вот, атрибут это определенное свойство тега имеющее значение. Атрибут со значением прописывается после тега.
Атрибуты элемента <html>.
| Атрибут | Описание | Возможные значения |
|---|---|---|
manifest |
Указывает путь к кешу манифеста. | URL. |
Манифест (manifest) представляет из себя текстовый файл со списком ресурсов для кеширования. Я знаю, сейчас ничего не понятно. Про манифест можно нет запоминать. дальше я приведу более понятный пример.
Прописываются атрибуты так:
<html manifest = "URL">
, где:
- html — тег;
- manifest — атрибут;
- URL — значение атрибута.
Элемент <head>
Между тегами <head> … </head> заключается информация которую не видит пользователь, эта информация «служебная» или «техническая», называть ее можно как угодно, но по сути она нужна для:
- Роботов поисковых систем.
- Стилизации и расширения функциональности сайта.
- Указания, с помощью тега <title> заголовка документа в браузере.
Элемент <title>
Как я уже говорил, тег <title> используется для того, что бы указать название web-страницы которое будет отображаться в закладке браузера.
Элемент <body>
Между тегами <body> и </body> заключается все содержимое веб-страницы которое видит пользователь.
Атрибуты тегов
Теперь, когда у нас есть понимание основ HTML в общих чертах, давайте разберемся с атрибутами тегов.
Возьмем тег <p> — параграф. По сути это тег в который вкладывают одно или несколько предложений. Один из глобальных атрибутов — style.
Style — стиль, то есть с помощью этого атрибута мы можем изменять стиль текста в теге <p>. Разберемся на примере.
<p style="color:blue;">Какой-то текст...</p>
Результатом выполнения этого кода будет:
Какой-то текст…
Я повторюсь, но все же, в этом примере:
- p — тег;
- style — атрибут тега p;
- color:blue — значение атрибута style тега p.
Тег meta (или мета-тег) является не обязательным. Но если вы хотите продвинуть свою веб-страницу или сайт в поисковых системах, то указывать его нужно.
С помощью тега meta можно указать:
- Описание страницы.
- Ключевые слова.
- Кодировку.
- Возможность индексирования.
- Время перезагрузки страницы.
Meta тег description
Meta тег description указывает описание страницы.
<meta name="description" content="Описание содержимого вашей web-страницы">
Оптимальная длинна meta-тега description составляет 160-180 символов. Тег должен содержать конкретное описание страницы, желательно делать описания уникальными, но не обязательно если в таком случае описания искажают содержание страницы.
Meta тег keywords
Тег содержит ключевые слова через запятую. Если вы когда-либо писали статьи для конференций, то в них вы указывали ключевые слова. Тут, по сути, то же самое.
<meta name="keywords" content="ключевые слова">
Meta тег robots
Мета-тег robots содержит инструкции для роботов поисковых систем. Первая задача мета-тега — указать поисковым системам на возможность индексации веб-страницы. То есть можно индексировать эту страницу (index) или нельзя (noindex). Вторая задача — указать можно ли переходить по ссылкам (follow) или нельзя (follow).
Пример.
<meta name="robots" content="index, follow">
В данном случае роботам поисковых систем разрешено индексировать страницу и переходить по ссылкам.
Meta http-equiv
Этот meta-тег позволяет перезагружать страницу (meta http-equiv=»refresh») и перенаправлять пользователя на другую страницу (content=»0; url=https://abuzov.com/»).
Например.
<meta http-equiv="refresh" content="5; url=https://abuzov.com/">
Этот код означает, что через 5 секунд вы будете перенаправлены на главную страницу моего сайта.
Meta charset
При помощи meta charset мы устанавливаем кодировку документа. Если кодировку указать неправильно появиться, так называемые, «кракозябры».
Стандартная кодировка для HTML-документа это UTF-8.
<meta charset="utf-8">
Эта кодировка включает в себя наибольшее количество языков.
Тег style
Элемент style используется для оформления сайта. Он указывает что код между тегами <style>…</style> является css кодом. Тег <style> располагается в теге <head>.
Подключение стилей будет рассмотрено отдельно. Давайте допишем небольшой код в наш, уже созданный файл. Например, заголовок будет красным, а текст синим курсивом.
<html>
<head>
<style>
h1{color:red;}
p {color:blue;font-style:italic;}
</style>
<title>Заголовок моей первой страницы (во вкладке браузера)</title>
</head>
<body>
<h1>Заголовок страницы в браузере</h1>
<p>Любой тест, обычно это Hello World!</p>
</body>
</html>
Наберите код в редакторе и сохраните под именем html-2.html. Так же вы можете скачать этот файл. Посмотрите результат в браузере.
Тег link
Link подключает внешние файлы. В предыдущем примере мы прописали стили непосредственно в HTML-документе. Но что если нам нужен сайт состоящий из тысячи страниц? Прописывать код в каждом крайне затруднительно. Поэтому создается отдельный файл (обычно его называют style.css) который подключается веб-странице.
Код выше можно переписать следующим образом:
<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <title>Заголовок моей первой страницы (во вкладке браузера)</title> </head> <body> <h1>Заголовок страницы в браузере</h1> <p>Любой тест, обычно это Hello World!</p> </body> </html>
А файл style.css будет выглядеть следующим образом:
h1{color:red;}
p {color:blue;font-style:italic;}
При этом мы избавляемся от тега <style>.
Атрибуты тега link
| Атрибут | Описание | Возможные значения |
|---|---|---|
href |
Место расположения ресурса. | URL. |
rel |
Атрибут, определяющий отношение между веб-страницей которая ссылается и веб-страницей на которую ссылаются. |
|
type |
Тип документа, на который ведет ссылка. | MIME тип. |
media |
Тип (или типы) мультимедиа, к которому должен применяться связанный ресурс. | Медиа-запрос, например screen, print, или screen and max-width:640. |
hreflang |
Язык документа на который ведет ссылка. | Языковой код, например en (Английский) или ru (Русский). |
sizes |
Размер иконки, используется когда ссылка ведет на фавиконку rel="icon". |
[ширина]x[высота], например 32x64. |
crossorigin |
Используется вместе с JavaScript, чтобы определить, как обрабатываются запросы на совместное использование ресурсов между источниками. |
|
Фавиконка (favicon) это файл, рисунок, имеющий расширение .ico который отображается на вкладке браузера перед заголовком (тег <title>).
Favicon сайта abuzov.com
Тег script
Элемент <script> подключает к HTML-документу различные скрипты, например JavaScript. Скрипты, как в случае с тегом <style> могут находятся как непосредственно в HTML-файле, так и в отдельных файлах с соответствующим расширением, например .js.
Атрибуты тега script
| Атрибут | Описание | Значение |
|---|---|---|
src |
Расположение файла со скриптами или сценариями. | URL. |
type |
Тип используемого сценария. | MIME тип. По умолчанию это text/javascript. |
charset |
Кодировка символов внешнего скрипта. Используется только при наличии src . |
Объявление кодировки символов, напримерUTF-8. |
async |
Указывает, что внешний сценарий должен выполняться асинхронно. Используется только при наличии src . |
Нет. |
defer |
Указывает, что внешний сценарий следует отложить и выполнить только после анализа страницы. Используется только при наличии src . |
Нет. |
crossorigin |
Определяет, как обрабатываются запросы на совместное использование ресурсов между источниками. |
|
Отношения между тегами
Очень важная тема которую нужно понять. Тут нет ничего сложного. Давайте разбираться.
Возьмем наш последний код.
<html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <title>Заголовок моей первой страницы (во вкладке браузера)</title> </head> <body> <h1>Заголовок страницы в браузере</h1> <p>Любой тест, обычно это Hello World!</p> </body> </html>
Изобразим его в виде дерева.
Мы видим, что элементы этого дерева взаимосвязаны, взаимосвязи между тегами бываю следующих типов:
- Предок. Предком называют элемент который содержит в себе другие. То есть, исходя из рисунка можно сказать что <html> это предок для всех тегов, а <head> является предком для
<link>,<script>и<title>. Аналогично<body>это предок по отношению к<h1>и<p>. - Потомок. Потомком называют элемент вложенный в другой. То есть
<body>— потомок<html>, а<h1>потомок<body>. - Родительский элемент. Родительским элементом называют тег который связан с другими тегами более низкого уровня, и находится на дереве выше их.
<html>является родителем только для тегов<head>и<body>. - Дочерний элемент. Дочерним называют тег который который вложен в тег более высокого уровня, то есть противоположность родительскому элементу. На рисунке тег
<h1>является дочерним элементом тега<body>. - Сестринский элемент. Сестринским элементом называют тег имеющий один и тот же родительский тег. То есть, теги
<head>и<body>на рисунке — сестринские элементы, так же как и теги<h1>с<p>.
Тут все довольно просто. Это нужно запомнить и знать. Теперь вы знаете основы HTML.
Расшифровка и перевод тегов
Когда я начинал изучать HTML, я задавался вопросом: как запомнить теги? Самым простым вариантом для меня стал перевод тегов. То есть, каждый HTML-тег это означает что-то на английском языке или это сокращение какого-то английского слова. Давайте разберемся с тегами которые уже нам известны.
| Тег | Значение | Перевод |
| <html> | Hyper Text Markup Language | Язык гипертекстовой разметки |
| <head> | Head | Голова (документа) |
| <body> | Body | Тело (документа) |
| <title> | Title | Название, заголовок |
| <h1> | Heading 1…6 | Заголовок с 1 по 6 уровень |
| <p> | Paragraph | Параграф |
| <link> | Link | Ссылка |
| <style> | Style | Стиль |
Как это работает?
Теперь у вас есть общее понимание о том, что такое HTML. Возникает вопрос, а как это вообще работает?
Работает это так. Мы пишем HTML-код и сохраняем его с расширением HTML. Наша операционная система (Windows или Linux) понимает что файл с таким расширением нужно открывать при помощи браузера.
Браузер открывает файл и читает (интерпретирует) наш код в виде дерева (DOM) в соответствии с определенными правилами.
После того как браузер «прочитал» и интерпретировал наш код он отображает его нам в привычном виде — в виде текста, таблиц, изображений, ссылок, списков и других элементов.
Элемент DOCTYPE
В конце об элементе DOCTYPE. Почему в конце, а не в начале? В самоучителе для начинающих я не придаю этому тегу особое значение, не не могу не упомянуть о нем.
DOCTYPE задает тип документа. Обычно это html. Указывать тип документа нужно в самом его начале.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" type="text/css"> <title>Заголовок моей первой страницы (во вкладке браузера)</title> </head> <body> <h1>Заголовок страницы в браузере</h1> <p>Любой тест, обычно это Hello World!</p> </body> </html>
При помощи этого тега мы даем понять браузеру что мы используем именно HTML код. Возникает вопрос, а что, в HTML-документе может быть другой код? Вообще да, документ может быть XML, но пока об этом думать рано. Нужно знать следующее.
Тип документа зависит от того, какие теги в нем используются и есть три типа синтаксиса. Если вы используете все новые теги, то есть теги HTML5 (на момент написания статьи) то достаточно указать <!DOCTYPE html>.
Типы синтаксиса:
- Strict — строгий.
- Transitional — переходный.
- Frameset — набор фреймов.
Это типы для HTML 4.01.
Для строгого типа указываем:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//RU" "http://www.w3.org/TR/html4/strict.dtd">
Для переходного:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//RU" "http://www.w3.org/TR/html4/loose.dtd">
Для набора фреймов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU" "http://www.w3.org/TR/html4/frameset.dtd">
Более старые версии HTML сейчас практически не используются.
На этом все, теперь вы знаете основы HTML.
Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.
Что такое HTML и CSS?
HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.
Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.
При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.
Основные термины HTML
Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML — элементы, теги и атрибуты.
Элементы
Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6>) и абзацев (определены как <p>); в список можно включить элементы <a>, <div>, <span>, <strong> и <em> и многие другие.
Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:
<a>Теги
Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.
Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div>.
Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div>.
Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a> и закрывающий тег </a>. Что находится между этими двумя тегами будет содержимым ссылки.
Так, теги ссылок будут выглядеть примерно так:
<a>...</a>Атрибуты
Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id, который идентифицирует элемент; атрибут class, который классифицирует элемент; атрибут src, который определяет источник встраиваемого содержимого; и атрибут href, который указывает ссылку на связанный ресурс.
Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a> с атрибутом href будет выглядеть следующим образом:
<a href="http://shayhowe.com">Shay Howe</a>Демонстрация основных терминов HTML
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега <a> и закрывающего тега </a> охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href=»http://shayhowe.com» в открывающем теге.
Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег
Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь — мы расшифруем всё по ходу.
Настройка структуры документа HTML
HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.
Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html>, <html>, <head> и <body>.
Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html>. После этого идёт элемент <html> означающий начало документа.
Внутри <html> элемент <head> определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента <head> не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.
Всё видимое содержимое веб-страницы будет находиться в элементе <body>. Структура типичного HTML-документа выглядит следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Привет, мир!</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это веб-страница.</p>
</body>
</html>Демонстрация структуры HTML-документа
Этот код показывает документ, начиная с объявления типа документа, <!DOCTYPE html>, затем сразу идёт элемент <html>. Внутри <html> идут элементы <head> и <body>. Элемент <head> содержит кодировку страницы через тег <meta charset=»utf-8″> и название документа через элемент <title>. Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р>. Поскольку и заголовок и абзац вложены в элемент <body>, они видны на веб-странице.
Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html>. Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body>.
Самозакрывающиеся элементы
В предыдущем примере элемент <meta> был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. <meta> является одним из таких элементов. Содержимое элемента <meta> в примере присваивается с помощью атрибута charset и значения. К другим типичным самозакрывающимся элементам относятся:
- <br>
- <embed>
- <hr>
- <img>
- <input>
- <link>
- <meta>
- <param>
- <source>
- <wbr>
Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html>, <head> и <body>, является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.
Валидация кода
Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS, которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.
На практике
В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!
- Откройте текстовый редактор, создайте новый файл с именем index.html и сохраните его в место, которое не забудете. Я собираюсь создать папку на рабочем столе с именем styles- conference и сохранить этот файл в ней; не стесняйтесь делать то же самое.
-
В файле index.html добавим структуру документа, в том числе тип документа <!DOCTYPE html> и элементы <html>, <head> и <body>.
<!DOCTYPE html> <html lang="ru"> <head> </head> <body> </body> </html> -
Внутри элемента <head> добавим элементы <meta> и <title>. Элемент <meta> должен включать в себя правильные атрибуты charset и значение, в то время как элемент <title> должен содержать название страницы, скажем «Styles Conference».
<head> <meta charset="utf-8"> <title>Styles Conference</title> </head> -
Внутри элемента <body> добавим элементы <h1> и <p>. Элемент <h1> должен включать в себя желаемый заголовок — давайте снова воспользуемся «Styles Conference», а элемент <р> должен включать в себя простой абзац для представления нашей конференции.
<body> <h1>Styles Conference</h1> <p>Каждый год самые яркие веб-дизайнеры и фронтенд-разработчики собираются в Чикаго, чтобы обсудить новейшие технологии. Присоединяйся к нам этим августом!</p> </body> -
Пришло время взглянуть на то, что мы сделали! Отыщем наш файл index.html (у меня он находится в папке styles-conference на рабочем столе). Дважды щёлкнув по этому файлу или перетащив его в браузер мы откроем его для просмотра.
Рис. 1.02. Наши первые шаги при создании сайта Styles Conference
Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.
Основные термины CSS
В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.
Селекторы
При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.
Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р>.
В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <p>.
p { ... }Свойства
Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background, color, font-size, height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size, применяемые ко всем элементам <p>.
p {
color: ...;
font-size: ...;
}Значения
Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p> и устанавливаем значение свойства color как orange, а значение свойства font-size как 16 пикселей.
p {
color: orange;
font-size: 16px;
}Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.
Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.
Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения
Знание нескольких основных терминов и общего синтаксиса CSS — это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.
Работа с селекторами
Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.
Селекторы типа
Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div. Следующий код показывает селектор типа для элементов <div>, а также соответствующий HTML.
CSS
div { ... }HTML
<div>...</div>
<div>...</div>Классы
Классы позволяют выбрать элемент на основе значения атрибута class. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.
Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class для нескольких элементов.
В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class, включая элементы <div> и <p>.
CSS
.awesome { ... }HTML
<div class="awesome">...</div>
<p class="awesome">...</p>Идентификаторы
Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class, идентификаторы используют значение атрибута id в качестве селектора.
Независимо от типа отображаемого элемента, значение атрибута id может быть использовано только один раз на странице. Если id присутствуют, то они должны быть зарезервированы для важных элементов.
В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id. Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe.
CSS
#shayhowe { ... }HTML
<div id="shayhowe">...</div>Дополнительные селекторы
Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.
Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.
Подключение CSS
Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента <head> нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.
Другие варианты добавления CSS
Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.
Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением .css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.
Внутри элемента <head> применяется элемент <link>, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.
В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.
<head>
<link rel="stylesheet" href="main.css">
</head>Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.
Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.
На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.
Использование сброса CSS
Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.
Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.
Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.
Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.
Кроссбраузерность и тестирование
Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени — это решение вы должны будете сделать на основе того, что лучше для вашего сайта.
Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.
На практике
Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.
- Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
- Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.
-
Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p> уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт, скопируйте код и вставьте его в верхней части нашего файла main.css.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ 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; } - Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head>, сразу после элемента <title>.
- Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet.
-
Мы также включим ссылку на наш файл main.css используя атрибут href. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css.
<head> <meta charset="utf-8"> <title>Styles Conference</title> <link rel="stylesheet" href="assets/stylesheets/main.css"> </head>
Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.
Рис. 1.04. Наш сайт Styles Conference со сбросом CSS
Демонстрация и исходный код
Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.
Просмотр сайта Styles Conference или Скачать исходный код
Резюме
Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.
Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.
Напомним, что мы рассмотрели следующее:
- Разница между HTML и CSS.
- Знакомство с элементами HTML, тегами и атрибутами.
- Настройка структуры вашей первой веб-страницы.
- Знакомство с селекторами CSS, свойствами и значениями.
- Работа с селекторами CSS.
- Указатель на CSS из HTML.
- Важность CSS сброса.
Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.
Ресурсы и ссылки
- Common HTML terms via Scripting Master
- CSS Terms & Definitions via Impressive Webs
- CSS Tools: Reset CSS via Eric Meyer
- Normalize.css via Nicolas Gallagher
- An Intro to HTML & CSS via Shay Howe
См. также
Последнее изменение: 11.08.2018