Информация в заголовке . мета теги

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет
горизонтальная полоса для разделения текста и подписи снизу. Мы
используем свойство ‘border-top’ для того чтобы добавить
прерывистую линию над элементом <address>
(строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>

На практике

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

Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.
Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p> уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт, скопируйте код и вставьте его в верхней части нашего файла main.css.
Наш файл 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.

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты,
например Блокнот от Windows, TextEdit на Mac или KEdit под KDE
вполне подойдут под задачу. Как только Вы поймете основные
принципы, вы можете переключиться на использование более
продвинутых инструментов разработки, например на такие коммерческие
программы как Style Master или DreamWeaver. Но для создания первого
CSS файла не стоит отвлекаться на множество расширенных
возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или
OpenOffice. Эти программы обычно создают файлы, которые не могут
быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные
текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового
редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и
наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто
скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать
TextEdit’у, что это действительно простой текстовый файл, открыв
меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру
о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем
случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы
можете видеть, документ содержится между <html> и
</html> тэгами. Между <head> and </head>
находится различная информация, которая не отображается в самом
документе. Например там содержится заголовок документа. Позже мы
добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе,
все что находится внутри этого тэга за исключением текста между
<!— и —>, являющегося комментариями, будлет выведено на
экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение
“неупорядоченного списка” (Unordered List), т.е. списка, элементы
которого непронумерованы. Тэги <li> начинают “элементы
списка” (List Item). Тэг <p> является “параграфом”. А тэг
<a> — “якорь” (Anchor), с помощью которого создаются
гиперссылки.

Код HTML в редактор KEdit.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню
Файл или File, укажите каталог для сохранения файла (например
Рабочий Стол) и сохраните данный файл как “mypage.html”. Не
закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем
10.4, вы увидите опцию «Don’t append the .txt extension» в
диалоговом окне «Save as». Выберите эту опцию, потому что имя файла
“mypage.html” уже включает в себя расширение. Более новые версии
TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим
образом: найдите файл вашим файловым менеджером (Проводник, Windows
Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на
нем. Если вы делали все как описано то имя файла будет
“mypage.html”. У вас должен открыться файл в браузере,
установленном по умолчанию. (Если нет, то откройте браузер и
перетащите файл в его окно.)

Кнопка Button

Кроме стандартных кнопок «Отправить» и «Очистить», можно добавить в форму неограниченное колличество кнопок и с помощью JavaScrypt назначить им какие-либо обработчики (заставить их выполнять какие-либо функции)

Атрибуты элементов формы

accept- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

autocomplete — Включает или отключает автозаполнение.

autofocus — Устанавливает фокус в поле формы.

checked — Предварительно активированный переключатель или флажок.

disabled — Блокирует доступ и изменение элемента.

action — Определяет адрес обработчика формы.

enctype — Устанавливает способ кодирования данных формы при их отправке на сервер.

method — cообщает браузеру каким методом следует передавать данные формы на сервер.

novalidate- Отменяет встроенную проверку данных на корректность.

target — Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.

list — Указывает на список вариантов, которые можно выбирать при вводе текста.

max — верхнее значение для ввода числа или даты.

maxlength — Максимальное количество символов разрешенных в тексте.

min — Нижнее значение для ввода числа или даты.

multiple — Позволяет загрузить несколько файлов одновременно.

name — Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern — Устанавливает шаблон ввода.

placeholder — Выводит подсказывающий текст.

readonly — Устанавливает, что поле не может изменяться пользователем.

required- Обязательное для заполнения поле. requeied

size — Ширина текстового поля.

step — Шаг приращения для числовых полей.

tab-index — Определяет порядок перехода между элементами с помощью клавиши Tab.

type — Сообщает браузеру, к какому типу относится элемент формы.

value — Значение элемента.

Горизонтальная линия справа

Сначала добавим простую линию справа от заголовка.

<h1 class="pretty-header right-line-header">HEADER</h1>

Для этого опишем новый CSS-класс.

.right-line-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  width: 100%;
  height: 0.5em;
  position: absolute;
  top: 0px;
  margin-left: 10px;
}

Так как линия имеет ширину 100% и при этом по умолчанию (свойства не заданы) смещена относительно левого края заголовка, то есть располагается сразу за текстом, она будет вылезать за границы тега заголовка справа. Чтобы скрыть лишнюю часть линии мы изначально добавили заголовку свойство . Для линии используется абсолютное позиционирование, чтобы иметь возможность задавать ей ширину, как блочному элементу. но при этом избежать перехода её на новую строку под заголовок. Для указания, относительно какого элемента позиционируется лиция, заголовку задано свойство . Вертикальное положение линии можно регулироваться свойствами и .

Результат

HEADER

Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.

При желании линию можно сделать двойной.

<h1 class="pretty-header right-double-line-header">HEADER</h1>

Для этого модифицируем предыдущий класс, добавив вторую границу и соответственно изменив смещение сверху. Свойство регулирует расстояние между линиями. Смещение вычисляется как (1 — ) / 2 — . В данном примере = 1px, эта корректировка необходима для учёта ширины самой линии.

.right-double-line-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  border-top: 1px solid #4bb;
  width: 100%;
  height: 0.1em;
  position: absolute;
  top: calc(0.45em - 1px);
  margin-left: 10px;
}

Результат

HEADER

Горизонтальная линия справа и слева

Если заголовок выровнен по центру, его можно оформить двумя линиями справа и слева.

<h1 class="pretty-header left-right-line-header">HEADER</h1>

.left-right-line-header {
  text-align: center;
}
.left-right-line-header:before {
  content: "";
  border-bottom: 1px solid #4bb;
  width: 50%;
  height: 0.5em;
  position: absolute;
  top: 0px;
  margin-left: calc(-50% - 10px);
}
.left-right-line-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  width: 50%;
  height: 0.5em;
  position: absolute;
  top: 0px;
  margin-left: 10px;
}

Результат

HEADER

Линии не обязательно должны быть на всю ширину страницы, можно задать им фиксированный размер.

<h1 class="pretty-header left-right-line-short-header">HEADER</h1>

.left-right-line-short-header {
  text-align: center;
}
.left-right-line-short-header:before {
  content: "";
  border-bottom: 1px solid #4bb;
  border-top: 1px solid #4bb;
  width: 40px;
  height: 0.1em;
  position: absolute;
  top: calc(0.45em - 1px);
  margin-left: -50px;
}
.left-right-line-short-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  border-top: 1px solid #4bb;
  width: 40px;
  height: 0.1em;
  position: absolute;
  top: calc(0.45em - 1px);
  margin-left: 10px;
}

Результат

HEADER

Живой пример доступен на JSFiddle.