Тег DIV, атрибут title

Шапка сайта в css – как ее сделать

От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно.

Шапка сайта – какой она бывает

Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.

Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш премиум-раздел, где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

Источник

Атрибут title

Добавляет поясняющий текст к контейнеру в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом.

Синтаксис

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

      
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник

Слова, часто используемые в CSS-классах

HTML, CSS

Изображения

image , img , picture , pic — картинка

userpic , avatar — юзерпик, маленькая картинка пользователя

thumbnail , thumb — миниатюра, уменьшенное изображение

Текст

title , subject , heading , headline , caption — заголовок

lead , tagline — лид-абзац в тексте

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

quote , blockquote — цитата

copyright , copy — копирайт

Списки

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

main , body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper , wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container , holder , box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col )

row — контейнер в виде строки

col , column — контейнер в виде столбца

Элементы управления

button , btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Медиавыражения

phone , mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

notebook , laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

Разное

socials — блок иконок соцсетей

advertisement , adv , commercial , promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features , benefits — список основных особенностей товара, услуги

slider , carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user , author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

breadcrumbs — навигационная цепочка, «хлебные крошки»

more , all — ссылка на полную информацию

modal — модальное (диалоговое) окно

tooltip , tip — всплывающее подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

Состояния

active , current — активный элемент, например, текущий пункт меню

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Источник

Шапка сайта в css – как ее сделать

От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно.

Шапка сайта – какой она бывает

Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.

Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.

Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.

Как в CSS можно оформить шапку сайта?

Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш премиум-раздел, где вы можете посмотреть уроки по этой технологии.

Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:

Источник

Слова, часто используемые в CSS-классах

HTML, CSS

Изображения

image , img , picture , pic — картинка

userpic , avatar — юзерпик, маленькая картинка пользователя

thumbnail , thumb — миниатюра, уменьшенное изображение

Текст

title , subject , heading , headline , caption — заголовок

lead , tagline — лид-абзац в тексте

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

quote , blockquote — цитата

copyright , copy — копирайт

Списки

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

main , body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper , wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container , holder , box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col )

row — контейнер в виде строки

col , column — контейнер в виде столбца

Элементы управления

button , btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Медиавыражения

phone , mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

notebook , laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

Разное

socials — блок иконок соцсетей

advertisement , adv , commercial , promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features , benefits — список основных особенностей товара, услуги

slider , carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user , author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

breadcrumbs — навигационная цепочка, «хлебные крошки»

more , all — ссылка на полную информацию

modal — модальное (диалоговое) окно

tooltip , tip — всплывающее подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

Состояния

active , current — активный элемент, например, текущий пункт меню

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Источник