Оформление html страницы: HTML — правила оформления кода

Содержание

Оформление html-страницы — Информационные Технологии

Сейчас вы научитесь создавать простенькую html-страницу в обычном
текстовом редакторе Блокнот. Узнаете о структуре и обязательных правилах
оформления html-документов, о разнице между версиями HTML, XHTML и
HTML5. Наберите в Блокноте следующие несколько строк:

Скриншот наглядно показывает структуру страницы html, которая должна соответствовать следующим требованиям: в первой строке — указан тип документа. Далее следует тег <html>, в который вложены теги <head> и <body>. В теге <head> располагаются служебные теги: link, meta, base, script — они не отображаются на странице и тег title — название веб-страницы, которое видно в заголовке вкладки браузера. В теге <body> расположены видимые элементы разметки (у нас — заголовок и абзац).

Все вложенные элементы следует закрывать в порядке, обратном их открытию. Некоторые теги не имеют закрывающего тега, некоторые содержат атрибуты с определенными значениями, пример для обоих случаев: тег meta в строке 4, у него атрибут charset, а его значение utf-8 и нет закрывающего тега.

Для того чтобы создать html-страницу, просто сохраним
наш документ в формате .html, задав ему имя, у меня — struktura.
Обратите внимание, что нужно изменить Тип файла и выбрать Кодировка, у меня выбрана — универсальная UTF-8:

Чтобы просмотреть нашу html-страницу — откроем ее в браузере:

Наш html-документ соответствует версии html5. Эта версия, видимо, будет
одобрена в 2014, однако большинство элементов html5 читаются основными
браузерами, в т.ч. Internet Explorer, с версии 9. Вот тот же документ,
только в русской кодировке windows-1251. Для русскоязычных сайтов
используется кодировка windows-1251 или универсальная utf-8. Документ
соответствует распространенной версии XHTML 1.0 Transitional:

Обратите внимание, что в коде страницы изменилась первая строка, содержащая тег <!DOCTYPE>, объявляющий тип документа. Смотрите о правильном написании тега !DOCTYPE для всех версий в справочнике. К тегу <html> в строке 2 добавлен обязательный для xhtml-документов атрибут xmlns. Изменение в строке 4: это тег мета, задающий кодировку документа.

Правила оформления документов html и xhtml.

Пустые элементы, пропуски не влияют на отображение
html-документа в браузере, а в xhtml-документе требуется точность
разметки. В html-документах есть элементы с необязательным закрывающим
тегом. Например, для создания абзаца используется тег <p>, а в конце абзаца необязательно ставить </p>.
В XHTML необязательных закрывающих тегов нет, они обязательные. А
элементы, для которых закрывающий тег запрещен, пишутся с обязательным
добавлением пробела и слеша перед закрывающей скобкой: <br /> — это перенос строки, в отличие от HTML: <br>. Взгляните на тег meta в последнем скриншоте.

В HTML, кроме атрибутов id и class,
не важен используемый регистр символов, в XHTML — только строчные
буквы, а все значения атрибутов обязательно заключаются в кавычки. В
следующем уроке о форматировании текста, рассмотрим элементы тега body,
структурирующие текст: заголовки, абзац, списки. А далее, по плану:
атрибуты тегов — цвет и фон, вставка на страницу изображений, связывание
html-страниц гиперссылками — создание сайта.

Базовый шрифт документа basefont

Шрифт и размер основного текста html-документа задается настройками по умолчанию web-браузера посетителя.
Вы также можете задать параметры шрифта для своей страницы при помощи
тэга <basefont>, который должен размещаться в секции <head>.
Синтаксис тэга:

<basefont [face="font_name"] [size="n"] />
Тэг Описание
face Атрибут задает имя шрифта, назначаемого для страницы по умолчанию

Пример
<basefont face=»courier new» />
size Атрибут задает размер шрифта по умолчанию. Размер измеряется в единицах от 1
(самый маленький) до 7 (самый большой). По умолчанию в настройках браузера размер шрифта устанавливается равным 3 единицам

Пример
<basefont size=»4″ />

Дополнительные стили шрифтов

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

Тэг Описание
b Тэг <b> определяет, что содержащийся в нем текст должен быть отображен жирным (bold) шрифтом

Пример использования Результат
<b> Этот текст жирный </b> Этот текст жирный
i Тэг <i> определяет, что содержащийся в нем текст должен быть отображен курсивом (italic)

Пример использования Результат
</i> Этот текст наклонный </i> Этот текст наклонный
tt Тэг <tt> определяет, что содержащийся в нем текст должен
быть выведен шрифтом с фиксированным размером знакоместа (monospaced)

Пример использования Результат
<tt> Этот текст с непроп. шрифтом </tt> Этот текст с непроп. шрифтом
big Тэг <big> определяет, что содержащийся в нем текст должен
быть выведен шрифтом, большим чем основной.

Пример использования Результат
Этот шрифт <big>больше</big>, чем основной Этот шрифт больше, чем основной
small Тэг <small> определяет, что содержащийся в нем текст должен
быть выведен шрифтом, меньшим чем основной.

Пример использования Результат
Этот шрифт <small>меньше</small>, чем основной Этот шрифт меньше, чем основной
sub Тэг <sub> определяет, что содержащийся в нем текст должен
быть выведен в виде нижнего индекса.

Пример использования Результат
H<sub>2</sub>SO<sub>4</sub>
+ SO<sub>3</sub> =
H<sub>2</sub>S<sub>2</sub>O<sub>7</sub>
H2SO4 + SO3 = H2S2O7
sup Тэг <sup> определяет, что содержащийся в нем текст должен
быть выведен в виде верхнего индекса.

Пример использования Результат
2<sup>x+1</sup> + 22<sup>x-1</sup> + 2<sup>x</sup>= 28 2x+1 + 2x-1 + 2x = 28

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

<b>Жизнь</b> - </i>это <b>песня!</b></i>

Размер шрифта в тэге font

Кроме использования вышеописанных тэгов можно произвольно изменять размер шрифта любого текста.
Это делается с помощью атрибута size тэга <font>. Синтаксис тэга:

Можно указать абсолютный размер шрифта, а можно относительный к заданному по умолчанию
в web-браузере или тэге basefont. В первом случае указывается просто
размер шрифта числом от 1 до 7. Во втором случае используются символы {+|-} для указания
смещения размера шрифта в положительную или отрицательную сторону.

Цвет шрифта в тэге font

Стили стилями, но краски ничто не заменит. С помощью палитры цветов
вы сможете разукрасить Ваши страницы в прямом смысле этого слова.
Это делается с помощью атрибута color тэга <font>. Синтаксис тэга:

XXXXXX»>

Цвет указывается в RGB-формате (Red-Green-Blue) посредством
указания размерности каждой компоненты цвета в шестнадцатиричном
формате. Например, белый цвет обозначается «000000», черный —
«FFFFFF», синий — «0000FF» и т.п.

Цвет шрифта в тэге basefont

Однако, можно задавать цвет не только отдельных участков текста, но и всего документа. Для этого
используется атрибут color тэга <basefont>. Например:

XXXXXX» />

Цвет ссылок в тэге body

Кроме того цвет текста можно задать через атрибуты тэга <body>:

XXXXXX» link=»#XXXXXX» alink=»#XXXXXX» vlink=»#XXXXXX»>

Имя атрибута Описание
text Задает цвет текста в документе
link Задает цвет ссылки
alink Задает цвет активной ссылки, когда посетитель подводит к ней указатель мыши
vlink Задает цвет посещенной ранее ссылки
Пример html-кода:
<p>и
<font size=+1>з</font>
<font size=+2>м</font>
<font size=+3>е</font>
<font size=+4>н</font>
<font size=+3>е</font>
<font size=+2>н</font>
<font size=+1>и</font>
е</p>

<p><font color=#ff0000>Красный</font>
<font color=#00ff00>Зеленый</font>
<font color=#0000ff>Синий</font></p>

<p>Жизнь</b> — <i>это <b>песня!</b></i></p>

------------------------------------------------------
источники:
http://www.aqua80.ru/?type=books&item=book001&page=10
http://webmastersam.ru/web-html-izuchenie-struktura.html

Оформление тела Веб-страницы

Создание сайтов HTML

Создание сайтов HTML HTML Разработку web-сайта можно осуществлять двумя способами: с помощью специального web-редактора; непосредственно написанием программы на языке HTML. HTML (HyperText Markup Language)

Подробнее

<HTML> <HEAD> <TITLE>

Лабораторная работа 1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот. Научиться

Подробнее

Информатика и ИКТ Лекция 12

Информатика и ИКТ Лекция 12 ГБОУ СПО «УМТК» Кондаратцева Т.П. 1 курс Методы создания и сопровождения сайта Основы языка гипертекстовой разметки HTML Интернет — это сложная электронная информационная структура,

Подробнее

Глава 1. ОСНОВЫ ВЕБ-КОНСТРУИРОВАНИЯ

3. Основы языка разметки HTML 3.1. Создание HTML-документа в редакторе Блокнот Веб-страница представляет собой текстовый документ, в котором расставлены команды языка HTML. Они интерпретируются браузером.

Подробнее

Создание сайтов HTML

Создание сайтов HTML Начало В 1989 году Тим Бернерс-Ли разработал технологию гипертекстовых документов World Wide Web. Гипертекст это текст, в котором содержатся ссылки на другие документы. Основные понятия

Подробнее

Практикум «Создание Web-сайта Компьютер»

1 Практикум «Создание Web-сайта Компьютер» Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. Задание

Подробнее

Разработка Web-страниц

Разработка Web-страниц Цель работы: получить представление о создании гипертекстовых документов с помощью языка HTML. Создать персональную Web-страницу. Результат работы файл Моя страница1_фамилия.doc

Подробнее

«Создание WEBстраниц. помощью HTML»

«Создание WEBстраниц с помощью HTML» Работа выполнена Хисматуллиным Ильнуром Рахимзяновичем, учителем информатики Нижнекуюкской средней общеобразовательной школы Атнинского муниципального района Республики

Подробнее

<html> <head> <title>название документа</title>

Основы языка гипертекстовой разметки HTML Web-документ (иначе html-документ) является обычным текстовым файлом, к имени которого добавлено расширение.htm или.html. Такой документ открывается в обозревателе

Подробнее

ОСНОВЫ ПРОГРАММИРОВАНИЯ

ОСНОВЫ ПРОГРАММИРОВАНИЯ Зачем нам знания HTML? Для чего нужен HTML? Как самому создать HTML документ? Для создания HTML файла (документа) необходимо в первую очередь поменять расширение файла текстового

Подробнее

Практическая работа 1

Порядок выполнения работы Практическая работа 1 1. Выполните упражнения 1, 2, 3, 4, 5, 6. Упражнение 1 1. Создайте новый документ. Сохраните документ с именем Текст1.doc. 2. Установите параметры страницы

Подробнее

«Утверждаю» зав. кафедрой З.А. Филимонова

«Утверждаю» зав. кафедрой З.А. Филимонова Методические рекомендации для выполнения самостоятельной работы студентов по информатике для студентов первого курса фармацевтического факультета Тема 4: Программа

Подробнее

П РАКТИЧЕСКАЯ РАБОТА 1

П РАКТИЧЕСКАЯ РАБОТА 1 Создание, общее форматирование, сохранение документа MS Word Цель работы изучение функциональных возможностей текстового процессора Word 2007 и приобретение навыков практической

Подробнее

PDF created with pdffactory Pro trial version

Практическая работа 3.3. Работа с программой MS Word. Создание и редактирование графических объектов. Вставка в документ формул. Структурирование документа Цель работы. Выполнив эту работу, Вы научитесь:

Подробнее

ЛАБОРАТОРНАЯ РАБОТА 4

ЛАБОРАТОРНАЯ РАБОТА 4 1. ТЕМА: «Настройки текстового процессора Microsoft Word» 2. ОБЩАЯ ЦЕЛЬ РАБОТЫ: получить навыки выполнения первичных настроек текстового редактора; ознакомления с элементами строки

Подробнее

АТИЛЕКТ.CMS. [Текстовый редактор]

ИНСТРУКЦИЯ к системе администрирования АТИЛЕКТ.CMS [Текстовый редактор] Оглавление Модуль «Текстовый редактор»… 2 Редактирование данных… 2 Как разместить в тексте ссылку… 4 Ссылка… 4 Якорь… 4

Подробнее

Синтаксис языка HTML

Введение в HTML Содержание История языка HTML Синтаксис языка HTML Структура документа HTML Цветовая разметка документа. Способы задания цветовых параметров Разметка текста. Физическое форматирование текста.

Подробнее

Основы работы в текстовом редакторе

Основы работы в текстовом редакторе Основные программы для работы с текстом WordPad (есть во всех компьютерах Windows) MS Word Open Office Открываем программу двойным щелчком по иконке программы на рабочем

Подробнее

Способы создания презентаций

Лекция посвящена созданию презентаций в Microsoft PowerPoint. Определены основные этапы создания презентации. Описаны способы создания презентаций. Показаны процедуры создания презентаций с использованием

Подробнее

Лекция Таблицы в HTML

Министерство образования Республики Беларусь Учреждение образования Гомельский государственный университет им. Ф. Скорины Физический факультет «Информационные системы и сети» Лекция Таблицы в HTML Лектор

Подробнее

PDF created with pdffactory Pro trial version

Практическая работа 3.2. Работа с программой MS Word. Представление текста в формате списков. Работа с таблицами Цель работы. Выполнив эту работу, Вы научитесь: формировать маркированные и нумерованные

Подробнее

Лекция 3 Таблицы и фреймы

Лекция 3 Таблицы и фреймы Лектор Ст. преподаватель Купо А.Н. Лекция 3 Таблицы и фреймы Для создания таблиц в языке HTML используются следующие элементы: TABLE — создаёт таблицу. CAPTION — задаёт заголовок

Подробнее

HTML. Создание таблиц.

Тема: Цель: Время: Задание: Практическая работа 43. HTML. Создание таблиц. Познакомиться с языком HTML, получить навыки работы с обязательными тегами, научиться создавать и форматировать документ. 80 мин.

Подробнее

Рис. 1. Диалоговое окно Маркеры и нумерация.

Лабораторная работа 5 Оформление текста в виде списков и колонок Создание списков В текстовых документах перечисления различного типа оформляются в виде списков. Существуют списки различных типов: нумерованные

Подробнее

ПРАКТИЧЕСКАЯ РАБОТА 1.

ПРАКТИЧЕСКАЯ РАБОТА 1. Тема 4.1. Интерфейс PowerPoint. Работа со структурой презентации. Практическая часть I. Тема и цель. В качестве темы первой презентации возьмем «Презентация о создании презентации»,

Подробнее

Создание Web-страницы

Создание Web-страницы MS Word можно использовать для создания вебстраниц. Несомненно, разрабатывать веб-страницы гораздо лучше при помощи специальных редакторов (например, Microsoft FrontPage), однако

Подробнее

Arilot CMS руководство пользователя

Arilot CMS руководство пользователя 1 Вход в систему администрирования Внешний вид формы авторизации зависит от дизайна 1.1 При наличии кнопки «Вход» Нажмите кнопку «Вход» (Рисунок 1: Кнопка входа). Рисунок

Подробнее

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

HTML язык гипертекстовой разметки Обзор HTML CSS Активные html-страницы Инструментальные системы верстки CSS CSS — Cascading Style Sheets, каскадные таблицы стилей Стилем или CSS называется набор параметров

Подробнее

ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR

ИНСТРУКЦИЯ К HTML РЕДАКТОРУ CKEDITOR Описание редактора CKeditor Форматирование текста 1. Сервисы редактора CKeditor 2. Стили шрифта 3. Структурирование текста 4. Выравнивание текста 5. Вставка ссылок,

Подробнее

Язык программирования HTML

Язык программирования HTML 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе «Стандартные». Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которую предварительно

Подробнее

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ 13

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ 13 ТЕМА: Редактирование Web документов Цель занятия: 1) научиться создавать структуру и панель навигации сайта; 2) научиться изменять внешний вид кнопок, цветовую схему, фон Web-страниц;

Подробнее

Презентация должна иметь следующую структуру: 3, 4, 5,6-й слайды посвящены программам MS Word, MS Excel, MS Access, MS Power Point;

Задание. Создать презентацию, состоящую из 8 слайдов. Тема презентации изученные программы Micrsft Office. Презентация должна иметь следующую структуру: 1-й слайд титульный; 2 оглавление; 3, 4, 5,6-й слайды

Подробнее

WEB-программирование

WEB-программирование Л Е К Ц И И [Shift]+[F5] Ситников С.Ю. Лекция 1 2 Лекция 1 3 Тимоти Джон Бернерс-Ли британский учёный, изобретатель URL, HTTP, HTML, создатель Всемирной паутины Лекция 2 4 Пример элемента

Подробнее

Самостоятельная работа по информатикe

Ташкентский Государственный Институт Востоковедения Самостоятельная работа по информатикe На тему: Выполнила: Студентка 1-го курса Японской филологии Хисамова Илина. Ташкент 2015г. План: 1. Основные понятия.

Подробнее

Введение в HTML — Документация по Веб-программированию 0.0.0

Изначально язык HTML (HyperText Markup Language) был задуман и создан как средство структурирования и форматирования документов без привязки к средствам отображения. В идеале, гипертекстовый документ должен одинаково выглядеть на различных устройствах (монитор ПЭВМ, экран ПДА или мобильного телефона, принтер, медиа-проектор и т.п.).

Разработкой спецификаций языка HTML и утверждением их в качестве официальных стандартов занимается Консорциум всемирной паутины (W3C). Помимо W3C, в развитии языка участвуют IT-компании и сообщество разработчиков.

Элементы гипертекста

Структура HTML-документа

Рис. 1. Общая структура веб-страницы

HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа (рис. 1) довольно проста:

  1. Описание документа начинается с указания его типа (секция DOCTYPE).
  2. Текст документа заключается в тег <html>. Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами <head> и <body>.
    • В заголовке (<head>) указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.
    • Тело документа (<body>) — это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером.

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

Заголовок предназначен для размещения метаинформации, описывающей веб-документ как таковой.

Блок <body> содержит то, что нужно показать пользователю: текст, изображения, внедренные объекты и пр.

Ниже приведен простой пример html-разметки.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
    <title>Почему откровенна веданта?</title>
</head>
<body>
<h2>Почему Откровенна Веданта?</h2>
<h3>Трактат о амбивалентности бытия, сомнениях и адживике</h3>
<p>Философия нетривиальна и это не умозаключение, а плод переработки бытийного.
Моцзы, Сюнъцзы и др. считали, что сомнение естественно понимает под собой гений,
изменяя привычную реальность. Отношение к современности, как принято считать,
непредсказуемо, а созерцание, конечно, транспонирует гравитационный парадокс,
ломая рамки привычных представлений. Позитивизм преобразует дуализм, не учитывая
мнения авторитетов. Можно предположить, что вещь в себе представляет собой типичный
здравый смысл, учитывая опасность, которую представляли собой писания Дюринга.
При этом буквы А, В, I, О символизируют соответственно суждения:</p>
<ul>
<li>общеутвердительное;</li>
<li>общеотрицательное;</li>
<li>частноутвердительное;</li>
<li>частноотрицательное.</li>
</ul></p>
<p>Структурализм, как принято считать, подчеркивает закон исключённого третьего,
открывая новые горизонты. Адживика преобразует неоднозначный предмет деятельности,
tertium nоn datur. Согласно предыдущему, дуализм оспособляет примитивный бабувизм,
ломая рамки привычных представлений. Наряду с этим вещь в себе дискредитирует
сенсибельный принцип восприятия.</p>
<p>В целом, представляется логичным, что адживика трансформирует субъективный
гедонизм, тогда как бабувизм контролирует предмет деятельности, tertium nоn datur.</p>
</body>
</html>

DOCTYPE

Секция DOCTYPE указывает браузеру тип документа и версию использованного языка разметки. Здесь также указывается название и область видимости описания этого языка и адрес файла dtd (document type definition).

Примеры DOCTYPE:

  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>
    Гипертекстовый документ в формате HTML 4.01, содержащий фреймы.
  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
    Гипертекстовый документ в формате HTML 4.01 со строгим синтаксисом (т.е. не использованы устаревшие и не рекомендованные теги).
  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
    Гипертекстовый документ в формате HTML 4.01 с нестрогим («переходным») синтаксисом (т.е. использованы устаревшие или не рекомендованные теги и атрибуты).
  • <!DOCTYPE HTML>
    Пока не стандартизованное объявление для документов HTML5.

Стандарт требует, чтобы секция DOCTYPE присутствовала в документе, т.к. это позволяет ускорить и улучшить обработку гипертекста. Это достигается за счет того, что браузер может не делать предположений о том, как интерпретировать теги, а свериться со стандартным определением (файлом .dtd). Подробное описание DOCTYPE — на сайте Консорциума W3C.

Мета-теги

Мета-тег HTML — это элемент разметки html, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге <meta>.

Мета-теги размещают в блоке <head>…</head> веб-страницы. Они не являются обязательными элементами, но могут быть весьма полезны.

Пример описания метаданных:

<head>
<meta name="author" content="строка"> — автор веб-документа
<meta name="date" content="дата"> — дата последнего изменения веб-страницы
<meta name="copyright" content="строка"> — авторские права
<meta name="keywords" content="строка"> — список ключевых слов
<meta name="description" content="строка"> — краткое описание (реферат)
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка
<meta http-equiv="expires" content="число"> — управление кэшированием
<meta http-equiv="refresh" content="число; URL=адрес"> — перенаправление
</head>

Теги

Тег (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации.

HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <>:

<имя_тега [атрибуты]>

Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (<html>…</html>). Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег <img>. Регистр символов для тегов не имеет значения.

Примеры часто используемых тегов HTML:

<html>...</html> — контейнер гипертекста
<head>...</head> — контейнер заголовка документа
<title>...</title> — название документа (то, что отображается в заголовке окна браузера)
<body>...</body> — контейнер тела документа
<div>...</div> — контейнер общего назначения (структурный блок)
<hN>...</hN> —  заголовок N-ного уровня  (N = 1...6)
<p>...</p> — основной текст
<a>...</a> —  гиперссылка
<ol>...</ol> — нумерованный список
<ul>...</ul> — маркированный список
<li>...</li> — элемент списка
<table>...</table> — контейнер таблицы
<tr>...</tr> — строка таблицы
<td>...</td> — ячейка таблицы
<img>...</img> — изображение
<form>...</form> — форма
<i>...</i> —  отображение текста курсивом
<b>...</b> —  отображение текста полужирным шрифтом
<em>...</em> —  выделение (курсивом)
<strong>...</strong> —  усиление (полужирным шрифтом)
<br> — принудительный разрыв строки

Теги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому:

<!-- Список как пример использования вложенных тегов -->
<ol>
<li>Элемент списка</li>
<li>Второй элемент списка</li>
</ol>
<div>
    <h3>Заголовок второго уровня</h3>
    <p>и основной текст</p>
    внутри логического блока
</div>

Примечание

Примечание: Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т.п.), особенно в простых веб-документах. Тем не менее, рекомендуется следить за наличием закрывающих тегов и использовать их, чтобы избежать ошибок при воспроизведении документа.

Полный список тегов можно найти в документации на соответствующую версию языка HTML (см., например HTML 3.2, HTML 4.01, XHTML 1.1 и др.).

Атрибуты

Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега:

<тег атрибут=”значение”>…</тег>

Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним или несколькими пробелами, табуляцией или символами конца строки. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Порядок записи атрибутов в теге не важен. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов.

Примечание

Примечание: Несмотря на необязательность кавычек, их все же стоит всегда использовать.

Атрибуты могут быть обязательными и не обязательными. Необязательные атрибуты могут быть опущены, тогда для тега применяется значение этого атрибута по умолчанию. Если не указан обязательный атрибут, то содержимое тега скорее всего будет отображено неправильно.

Краткий список некоторых часто используемых атрибутов и их возможных значений:

style="описание_стилей" — локальные стили
src="адрес" — адрес (URI) источника данных (например картинки или скрипта)
align="left|center|right|justify" —  выравнивание, по умолчанию left (по левому краю)
width="число" — ширина элемента (в пикселях, пиках, поинтах и др.)
height="число" — высота элемента (в пикселях, пиках, поинтах и др.)
href="адрес" — гиперссылка, адрес (URI) на который будет выполнен переход
name="имя" — имя элемента
id="идентификатор"  — уникальный (в пределах веб-страницы) идентификатор элемента
size="число" — размер элемента
class="имя_класса" — имя класса во встроенной или связанной таблице стилей
title="строка" — название элемента
alt="строка" — альтернативный текст

Гиперссылки

Гиперссылка — это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег <a>. Гиперссылки позволяют перемещаться между связанными веб-страницами.

<a href="http://example.com/">Пример</a>
<a href="ftp://example.com/archive.tar.gz">Скачать файл</a>
<a href="mailto://[email protected]" title="Обратная связь">[email protected]</a>

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

<a name="якорь">Привязка к фрагменту текста</a>
<a href="#якорь">Ссылка на якорь</a>

Ссылки могут быть абсолютными и относительными.

Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:

<a href="http://example.com/page.html">Абсолютная ссылка</a>
<a href="http://example.com/images/figure1.gif">Ссылка на страницу в каталоге</a>

Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:

<a href="/index.html">Ссылка на страницу в корневом каталоге</a>
<a href="page.html#seg1">Ссылка на фрагмент страницы в текущем каталоге</a>
<a href="images/figure1.gif">Ссылка на страницу в подкаталоге текущего каталога</a>
<a href="/docs/manual.html">Ссылка на страницу в подкаталоге корневого каталога</a>
<a href="../files/index.html">Ссылка на страницу в вышележащем каталоге </a>

Специальные символы

Кроме тегов, в HTML-документах могут присутствовать и специальные символы.

Например, © — знак авторского права. Для отображения специальных символов используется мнемонический или числовой код вида &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятеричной системе счисления. Например: &amp; (числовой код &#169;) — амперсанд (&), &lt; — символ «меньше» (<) и &gt; — символ «больше» (>), &laquo; — левая типографская кавычка («) и т.д.

Кросс-браузерность

Гипертекстовые документы обрабатываются специальными приложениями, которые читают код разметки и выводят документ в отформатированном виде. Такие приложения, называемые «браузерами» (в терминах спецификации HTML — «пользовательскими агентами», USER-AGENT), обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera. Наряду с этими существует масса других браузеров, которые используют их системные библиотеки (т.н. «движок») или работают на собственном коде.

Разнообразие браузеров и различия в их функциональности, а также изначальная ориентация HTML на поддержку различных устройств вывода, приводит разработчиков веб-сайтов к необходимости решения вопроса о кросс-браузерности.

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности.

Термин «кросс-браузерность» начали использовать во время браузерных войн, начавшихся с серидины 90-х годов XX в. В этом контексте термин относился к сайтам, которые одинаково работают как в Internet Explorer, так и в Netscape Navigator. В то время производители стали внедрять собственные функции для браузеров, что привело к существенным отличиям отображения веб-содержимого и концептуальным различиям в разработке веб-сайтов. В настоящее время ситуация смягчилась (отчасти из-за ухода с рынка Netscape), но не настолько, чтобы можно было говорить о близком окончании браузерных войн.

Оформление текста: учебник HTML:

Web-страницы

Свойства текста задаются в виде параметров различных тэгов.
Параметры записываются в открывающем тэге внутри скобок. Ниже
объясняется использование основных тэгов для оформления текста.

Тэг <BODY>

Тэг <BODY> позволяет задать
общие свойства для всей страницы.
В параметрах открывающего тэга <BODY>
можно задать цвет текста (параметр TEXT)
и цвет фона (параметр BGCOLOR).
Например, тэг


<BODY TEXT=»#000000″ BGCOLOR=»yellow»>


</BODY>


определяет черный цвет текста на желтом фоне для всей страницы.

Тэг <BODY> позволяет изменять также
и цвет ссылок, которые в языке HTML называются anchors -
якоря. Для этого используют параметры

  • LINK — цвет обычных ссылок
  • ALINK — цвет активной ссылки, на которой
    щелкнули мышью
  • VLINK — цвет посещенных ссылок


Например, тэг


<BODY LINK=»yellow» ALINK=»red» VLINK=»blue»>


</BODY>


устанавливает желтый цвет для обычных ссылок, красный — для
активных и синий — для посещенных.

Тэг <FONT>

Для того, чтобы изменить цвет, размер и стиль шрифта для части текста, используют
тэг <FONT>. Он имеет три основных параметра:

  • COLOR — цвет текста
  • FACE — начертание (название) шрифта
  • SIZE — размер шрифта (принимает целые значения от 1 до 7)


Например, тэг


<FONT COLOR=»yellow» FACE=»Courier» SIZE=»2″>


</FONT>


устанавливает для текста внутри области действия тэга
шрифт Courier желтого цвета размера 2. А вот как выглядят
все возможные размеры шрифта Arial:


size=1 
size=2 
size=3 
size=4 
size=5 
size=6 
size=7 

Стили оформления

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

  • <B>…</B> (от английского bold), а так же <STRONG> — это жирный текст
  • <I>…</I> (от английского italic), а так же <EM> — это курсив
  • <S>…</S> (от английского strike out) — это зачеркнутый текст
  • <U>…</U> (от английского underline) — это подчеркнутый текст
  • <SUP>…</SUP> (от английского superscript) — это верхний индекс
  • <SUB>…</SUB> (от английского subscript) — это нижний индекс
  • <PRE>…</PRE> (от английского preformatted) — это
    специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и
    переходы на новую строку).


Стиль относится к тексту, заключенному между открывающим и закрывающим
тэгами.

Заголовки

Заголовки в тексте рекомендуется оформлять стандартными стилями.
Текст будет выглядеть более красиво, если в оформлении его использовать заголовки.
Для выделения заголовков используются парные тэги от
<h2> до <H6>
(от английского header), то есть, уровень заголовка изменяется от от 1 до 6.
Страница с кодом


<BODY>

<h2> Заголовок документа</h2>

<h3> Заголовок раздела</h3>

<h4> Заголовок подраздела</h4>

<h5> Заголовок параграфа</h5>

<H5> Комментарий</H5>

<H6> Авторские пометки</H6>

</BODY>


будет показана так:


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

Специальные символы


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


 Символ   HTML-код   Название 
  &#161; или &nbsp; неразрывный пробел  
¢ &#162; значок цента
£ &#163; значок фунта стерлингов 
¤ &#164;  
¥ &#165; значок японской йены
§ &#167; параграф
© &#169; или &copy; символ авторского права
« &#171; или &laquo; левая русская кавычка
® &#174; или &reg; зарегистрированная торговая марка 
° &#176; градус
± &#177; плюс-минус
² &#178; квадрат
³ &#179; куб
» &#187; или &raquo; правая русская кавычка
¼ &#188; четверть
½ &#189; половина
¾ &#190; три четверти
× &#215; знак умножения
÷ &#247; знак деления

Следующий раздел рассказывает об оформлении абзацев.

Глава 9 Оформление HTML-документа средствами CSS. HTML, XHTML и CSS на 100%

Читайте также








1.2. Структура HTML-документа



1.2. Структура HTML-документа
Для создания структуры документа и хранения служебной информации в нем предусмотрено много элементов, которые охватывают все необходимые пункты построения документа.Из листинга 1.1 видно, что HTML-документ содержит следующие компоненты:• строку






Глава 8 Форматирование текста средствами CSS



Глава 8
Форматирование текста средствами CSS
8.1. Выделение текста цветом8.2. Шрифты8.3. Форматирование текстаВ этой главе мы разберем основные приемы работы с текстом средствами CSS. Форматирование и установка стиля, выбор шрифта и задание цвета – все это с легкостью решается






ГЛАВА 3. Оформление текста 



ГЛАВА 3. Оформление текста 
В предыдущей главе мы научились структурировать текст Web-страницы, разбивая его на логические «куски». Также мы узнали о комментариях HTML, которые позволяют создавать небольшие заметки прямо в коде Web-страницы. И создали две Web-страницы нашего






Глава 6 Аутентификация средствами Kerberos



Глава 6
Аутентификация средствами Kerberos
В системе Linux обычно используется локальная аутентификация. Пользователь вводит имя и пароль, а компьютер ищет соответствующие данные в своей базе и принимает решение о том, следует ли зарегистрировать пользователя в системе.






ГЛАВА 3. Оформление текста



ГЛАВА 3. Оформление текста
В предыдущей главе мы научились структурировать текст Web-страницы, разбивая его на логические «куски». Также мы узнали о комментариях HTML, которые позволяют создавать небольшие заметки прямо в коде Web-страницы. И создали две Web-страницы нашего






19.6.1 Создание документа на HTML



19.6.1 Создание документа на HTML
Некоторые детали отображения документа оставлены клиенту. Браузер настольной системы обычно разрешает конечному пользователю выбрать шрифты для выводимого текста. Текст HTML-документа будет переформатирован согласно размеру окна экрана и






19.6.3 Общий формат HTML-документа



19.6.3 Общий формат HTML-документа
Несколько тегов служат для определения начала и конца HTML-документа или выделяют в нем заголовок и тело. Например:&lt;HTML&gt;                                       Начало гипертекстового






Глава 23 Операции с денежными средствами



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






Глава 2 Оформление текста



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






Глава 4 Оформление журналов



Глава 4
Оформление журналов
Основное и принципиальное отличие журнальной верстки от газетной и книжной – высокое качество полиграфии в большинстве современных журналов. Таким образом, дизайнер может задействовать больший арсенал выразительных средств. Благодаря






Глава 5 Оформление книг



Глава 5
Оформление книг
Казалось бы, апогеем полиграфического исполнения и работы дизайнера является журнал, тем не менее наиболее сложной и разнообразной является книжная верстка. Почему?Прежде всего потому, что, говоря «книга», мы чаще всего представляем себе






Оформление документа с помощью подложки



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






ГЛАВА 20. Визуализация графических данных средствами GDI+



ГЛАВА 20. Визуализация графических данных средствами GDI+
Предыдущая глава предлагала вводное описание процесса построения GUI-приложений с помощью System.Windows.Forms. Целью этой главы является рассмотрение возможностей визуализации графических данных в окне формы (включая как






Структура HTML-документа



Структура HTML-документа
Файл HTML состоит из множества дескрипторов, описывающих представление данной Web-страницы. Как и следует ожидать, базовая структура любого HTML-документа примерно одинакова. Например, файлы *.htm (или, альтернативно, файлы *.html) открываются и закрываются






Глава 10 Оформление чертежа



Глава 10
Оформление чертежа
• Нанесение размеров• Выносные надписи• Настройка единиц измеренияВиртуальное здание позволяет создать полное впечатление о проектируемом объекте, но построить этот объект можно, только имея комплект конструкторской документации, основу














Создание html-страницы | Nejalko.ru — информационные технологии, web-разработка и самообразование

Здравствуйте, уважаемые читатели Nejalko.ru!

Сегодня у нас важное дело: создание html-страницы в блокноте своими руками! Дело не хитрое, но ответственное, можно сказать, начало карьеры сайтостроителя, а это уже серьезно.

Для создания первой html-страницы нам понадобится блокнот, любой браузер и 10 минут свободного времени. Если все это у Вас есть приступаем к работе.

В любом удобном для Вас месте на жестком диске создаем папку с названием, например, «site«, внутри нее создаем еще одну папку с названием «www«. Можно заранее сделать отдельную папку, назвать ее «Сайтостроение» и в ней размещать все файлы, получаемые за время изучения html учебника. Папка «www» нужна нам для привыкания к правильной работе с сайтами. Дело в том, что на любом хостинге (там, где готовые сайты располагаются в интернете) Ваш сайт будет находится в папке именно с таким названием, поэтому доводим до автоматизма сразу, чтобы в будущем было проще.

Внутри папки «www» создаем текстовый документ с названием «index.html«, чтобы сделать расширение «.html» нужно у нового документа во время присвоения ему названия стереть расширение .txt и дописать .html, причем после «.html» не должно оставаться ни одного символа.

Если документ уже создан в виде index.txt, то его нужно, опять же, переименовать и дописать .html, удалив все остальное, что идет через точку или открыть файл, написать в нем код и выбрать в меню «Файл-Сохранить как» затем в нижнем выпадающем списке «Тип файла» выбрать пункт «Все файлы (*.*)«

И в поле «Имя файла» стереть «txt», а дописать вместо него «html»

Если Вам где-то встретится файл с расширением «htm» (что такое расширение файла), то этот файл создан также с использованием языка html, можете сами попробовать менять расширение файлов с «html» на «htm» и разницы в работе документа не увидите.

Открывать только что созданный файл можно через «Блокнот», а если Вы работаете в Total Commander, то выбирайте мышкой документ и нажимайте «F4», на мой взгляд еще удобнее блокнота.

С предварительной подготовкой закончили, теперь можно создать первую html-страницу, так сказать, на чистом листе. Для этого вспоминаем предыдущую статью и создаем страницу сайта за 11 шагов (можете копировать из правой колонки таблицы и вставлять в свой «index.html»:

1. Указываем декларацию <!DOCTYPE html>
2. Открываем тег начала html-документа <html>
3. Открываем головной тег <head>
4. Указываем заголовок странички <title>Первая страница сайта</title>
5. Закрываем головной тег </head>
6. Открываем тег тела документа <body>
7. Наполняем документ контентом (тем, что хотим поместить на страницу), например таким Это первая страница сайта, на ней я буду пробовать свои силы в изучении HTML!
8. Закрываем тег тела документа </body>
9. Не забываем тег окончания html-документа </html>
10. Сохраняем нашу страничку комбинацией клавиш Ctrl+S
11. Кликаем двойным кликом по нашей страничке index.html и смотрим что у нас получилось

А получиться должно следующее:

Так выглядит код этой страницы:

Ну как Вам? Согласен, не особо впечатляет, но это самое-самое начало и времени ушло на создание первой маленькой и простенькой html-страницы ровно 2 минуты.

Как мы видим, на странице выводится только то, что указано между тегами <body></body> и это единственный правильный вариант.

Но в этом примере есть недочет, не пугайтесь, он не страшный, но лучше его не делать, а заключается он в том, что текст в html должен находится в соответствующих тегах, желательно тегах параграфа: <p>текст</p>. Это не только правильно, но еще и удобно, судите сами: на странице много текста, но в коде все абзацы (параграфы) будут аккуратно разделены соответствующими тегами <p> в начале параграфа и </p> — в конце параграфа, следовательно мы сразу можем увидеть, где параграф, например, третий снизу или пятый от начала. Кроме всего прочего, использование тегов дает возможность задать каждому параграфу свой стиль, но об этом позже.

Давайте заключим наш текст в теги параграфа, то есть добавим тег <p> ПЕРЕД словом «Это», а затем поставим тег </p> ПОСЛЕ слова «HTML!» в коде страницы, сохраним и посмотрим, что из этого получится (сохранять можно комбинацией Ctrl+S).

Чтобы увидеть изменения обновите Вашу страницу кнопкой «F5» и увидите, что в итоге текст «отпрыгнул» немного вниз и в сторону, но лучше будет видно на большем количестве текста. Снова заходим в код и добавляем еще пару предложений, заодно убираем теги параграфов у первого предложения:

Сохраните этот код, обновите Вашу html-страничку и увидите… именно, мешанину текста, потому что без тегов параграфов браузер не понимает, в каком место ему нужно что разделить или объединить.

У меня, первое время, в связи с данной особенностью языка HTML, возникал когнитивный диссонанс, как же так, в Word’ e нажимаешь «Enter» и создается новый абзац, а в html нажимаешь тот же «Enter», предложение в коде перескакивает как и нужно, но после сохранения на странице никаких изменений. Так вот, чтобы в html создать новый абзац, необходимо текст этого абзаца заключить в уже знакомые нам теги <p> перед параграфом и </p> в конце параграфа. Давайте прямо сейчас это и сделаем, каждое предложение заключим в теги параграфа, вот так:

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

Вот что у нас получилось после сохранения кода и обновления нашей маленькой html-странички «index.html»:

Согласитесь, так гораздо приятнее, читать уже можно и глаза «на лоб не лезут».

Закрепим еще раз: без тегов параграфа у нас получается сплошной, практически не читаемый текст, несмотря на то, сколько раз в коде Вы нажмете «Enter», но стоит прописать соответствующие случаю теги параграфа, как все становится понятно и красиво, поэтому не забывайте помещать элементы html-страницы в соответствующие им теги: текст в текстовые, таблицы в теги таблиц, изображения в теги изображения и так далее.

Ну, и напоследок, есть такой интересный одиночный тег <br>, если его поставить в конце предложения, то следующее предложение будет отображаться на следующей строке, данный тег действует, как одно нажатие «Enter» в том же блокноте, то есть переносит стоящий за ним текст на следующую строку.

Попробуйте по вставлять тег <br> в разные части параграфов (или даже предложений) и понаблюдайте за результатом, так сказать, ознакомьтесь и закрепите.

Напомню еще раз, теги <br>, <img> — одиночные, то есть не требуют закрытия, а теги <p></p>, <title></title>, <html></html>, <head></head> обязательно должны закрываться с помощью слеша «/» перед второй частью тега.

Надеюсь, все запомнили, насколько просто сделать страничку сайта на html? Замечательно, тогда двигаемся далее. В следующей статье поработаем с текстом в html.

Хорошего настроения, друзья!

Поделиться, если понравилось

Создаем простой сайт. Часть 3. Оформление с использованием CSS ‹ Asterial Web. IT блог

В последней части урока по созданию html страницы рассмотрим использование каскадных таблиц стилей — Cascading Style Sheets, сокращенно CSS. Главным назначением css является отделение внешнего оформления страницы от ее структуры, поэтому css подключается отдельным файлом, а в основном файле, определяющем структуру (в нашем случае это файл index.html), остаются лишь html-теги, отвечающие за разметку страницы.

Создадим в папке Test новый файл под названием style.css. Сначала необходимо подключить css файл в нашем основном файле index.html. После указания ссылки на файл стилей, html-файл уже сможет брать стили оформления из него. Подключение css-файлов происходит в разделе <head></head>. В первом уроке уже упоминалось, что этот раздел невидимый, и необходим для подключения стилей, скриптов, а также указания заголовка страницы, мета-тегов и прочих элементов страницы. Просто напишите между тегами <head> следующую строку:

<link rel="stylesheet" href="style.css">

Раздел <head> теперь будет выглядеть так:

<link rel="stylesheet" href="style.css">
<title>Заголовок страницы</title>
</head>

Такой путь будет работать только если файл стилей лежит в папке вместе с файлом index.html, если же он лежит в другой папке, то в ссылке надо будет указать полный путь к нему.

Итак, css подключен, теперь перенесем уже имеющиеся стили в файл style.css. Index.html будет снова выглядеть практически как во второй части урока, за исключением одной строчки, которая подключает css.

Содержимое файла index.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Заголовок страницы</title>
</head>
<body>
<div>
<a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header"/>Шапка сайта. Добро пожаловать на мой сайт</a>
    </div>
<div>
    <p>Контент. Здесь может быть абсолютно любая информация.</p>
</div>
<div>
Футер. Подвал. Нижняя часть сайта
</div>
</body>
</html>

Содержимое файла style.css. Как видим, все стили теперь объявляются в нем:

body {
margin: 0;
padding: 0;
}

#header {
height: 200px;    
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;    
}

#footer {
height: 200px;
text-align: center;
font-size: 14pt;
}

В начале файла идет обнуление тега <body>, так как многие элементы имеют предустановленные отступы, да и в разных браузерах могут отображаться по-разному.

Синтаксис css прост — сначала идет имя html-тега, для которого описывается оформление, а затем в фигурных скобках — непосредственно сам стиль оформления обязательно с точкой с запятой в конце каждого свойства. Глобальные теги, такие как body, html пишутся без каких-либо знаков, если мы описываем элемент, который записывали как <div>, то в начале будет решетка — #, если <div>, в начале будет точка, но в данном уроке классов нет, поэтому пока не будем говорить о них.

Если сейчас сохранить оба файла и открыть файл index.html в браузере, то мы увидим, что он не изменился. Этого и следовало ожидать, так как оформление не изменилось, а просто было перенесено в отдельный файл. Чтобы немного освоиться с каскадными таблицами стилей зададим фон для шапки и футера. Пропишем для #header новое свойство внутри фигурных скобок:

background: url('header.jpg') repeat-x;

Файл header.jpg можно скачать тут, после скачивания его следует положить в папку Test.

Также установим фон и для футера. В фигурных скобках #footer пишем:

background: url('footer.jpg') repeat-x;

Файл footer.jpg качаем тут и тоже кладем в папку с проектом.

Рядом с путем к файлу находится параметр repeat-x, который означает, что фон будет повторяться по горизонтали.
В итоге файл style.css будет иметь следующий вид:

body {
margin: 0;
padding: 0;
}

#header {
height: 200px;    
background: url('header.jpg') repeat-x;
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;    
}

#footer {
height: 200px;
background: url('footer.jpg') repeat-x;    
text-align: center;
font-size: 14pt;
}


Теперь страничка практически готова, но текст в блоке контента находится слишком близко к левой границе блока, поэтому лучше задать ему отступ. Так как текст заключен в тег <p>, значит и стиль надо прописывать тегу <p>. При этом тег <p> расположен внутри блока content, и описываться будет следующим образом:

#content p {
margin: 20px;    
}

Сохраним файл style.css, обновим страничку в браузере, и если все было сделано правильно, то вы увидите следующее:

Конечно, страница выглядит совсем простой, и ее структура примитивна, но при этом она уже может быть страницей сайта, так как имеет для этого все необходимое. Если же продолжить усовершенствовать ее структуру и оформлять с помощью css, то может выйти что-то весьма неплохое.

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

Скачать архив

Первая часть урока — Перейти

Вторая часть урока — Перейти

Возможно, вам также будут интересны статьи:

Макет страницы с CSS

Введение

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

Большинство дизайнов веб-страниц в сети относятся к одному из двух типов макета:
фиксированной ширины или жидкость .

Дизайн с фиксированной шириной дает вам больше контроля над тем, как ваши страницы будут
выглядят, но доставят неудобства пользователям с небольшими мониторами
(много горизонтальной прокрутки, что не нравится людям).Жидкость
дизайны, которые увеличиваются или уменьшаются, чтобы соответствовать окну браузера, лучше подходят для
пользователей, а дизайнер усложняет задачу.

  • Прекрасным примером макета фиксированной ширины является
    Нью-Йорк Таймс
    Веб-сайт. Измените размер вашей страницы. Как только ваш экран станет меньше
    970px, вы увидите, что появятся полосы прокрутки и страница
    не меняется. Большинство веб-сайтов в Интернете имеют фиксированную ширину, обычно
    менее 1000 пикселей (с общим значением 960 пикселей).
  • Прекрасным примером жидкого макета является
    новый сайт Google Maps.Опять же, измените размер браузера на
    посмотрите, как содержимое страницы сжимается или растет вместе с размером вашего окна. Этот
    тип конструкции позволяет наилучшим образом использовать доступное пространство, но вам понадобится
    чтобы убедиться, что он хорошо смотрится на устройствах любого размера. Наш
    веб-сайт также является примером гибкого дизайна. Измените размер окна на
    испытать это.

Как работает макет CSS

Макет веб-страницы

предполагает размещение содержимого в разных регионах
страница. Для этого контент должен быть в тегах контейнера, таких как
как: nav , header , section , footer , picture , aside ,
и вездесущий div .Имейте в виду, что вы не
необходимо использовать div , если это не требуется. Элементы, которые
отображается в виде блоков, например ul , ol ,
и p также можно перемещать в любом месте страницы.

Две техники макета CSS

Есть два основных метода, используемых для разметки: float
и абсолютное позиционирование . Поплавки, безусловно, используются чаще всего, так как они
позволяет макету быть плавным. Кроме того, с макетом float контент никогда не
перекрывает другой контент, поэтому даже если макет не очень хорош, он
функциональный.С абсолютным позиционированием у вас есть сила и бремя
полный контроль. Мы рассмотрим оба в этом чтении.

Чтобы использовать float, вы начинаете с обычного расположения ящиков, уложенных друг на друга.
вертикально на странице, но вы можете разрешить некоторым элементам перемещаться в
стороны и обтекать их другим материалом. Для этого HTML-элементы
иметь свойство float , которое сделает элемент float равным
в левой или правой части страницы (на ваш выбор). Конечно,
другой материал не может обтекать его, если он не достаточно узкий, поэтому мы
Также необходимо учитывать ширину элемента.Мы тоже посмотрим на это.

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

Стратегии компоновки

Макет веб-страницы с помощью CSS — это больше искусство, чем наука; здесь нет
формула для разметки вашей HTML-страницы или создания CSS. Макет CSS
это то, что вы узнаете на собственном опыте, изучая
различные свойства CSS, следуя руководствам и практикуясь
много. В этом разделе следует набор рекомендаций, которые можно
полезно, когда вы начнете изучать эту тему.

  1. Начните с вашего контента. Дизайн начинается с вашего
    контент (заголовки, текст, ссылки, фотографии и т. д.), а не с цветами,
    шрифты или значки. Это сообщение страницы, которое должно диктовать
    дизайн. Например, если целью страницы студенческой организации является
    чтобы привлечь больше студентов, вы можете прикрепить большую фотографию
    участники делают что-то веселое или интересное, вместе с цитатами из
    их. Затем вы используете стиль, чтобы сделать их привлекательными.
  2. Создайте макет вашего дизайна. Не начинайте свой дизайн с
    код, начните с рисунка. Используя программу для рисования (Paint,
    Photoshop, Illustrator и т. Д.) Дает вам свободу исследовать различные
    цвета, шрифты, изображения и позиционирование без необходимости писать
    код. Таким образом, вы сможете быстрее экспериментировать с множеством вариантов. Если твой
    странице требуются элементы пользовательского интерфейса, такие как кнопки, вкладки и т. д., вы
    можно использовать бесплатно
    набор трафаретов
    от Yahoo вместе с Photoshop.
  3. Найдите коробки. Как только вы останетесь довольны
    ваш макет, вы можете начать думать о HTML
    состав. В основном вам нужно определить, как выглядят элементы
    отдельные коробки, потому что они должны быть в тегах контейнера в
    ваш HTML.
  4. Помните фоновые изображения. Очень часто можно
    легче разместить изображение с помощью фонового изображения
    собственность, чем
    тег.Это потому, что вы можете поставить другие
    информация поверх этого изображения. Однако вы должны знать, что
    фоновые изображения не печатаются, поэтому не ставьте важные
    информация (например, карты) в качестве фона.
  5. Наслоение элементов. Инструменты, такие как Photoshop, используют
    понятие слоев для размещения нескольких вещей друг на друге. Делать
    то же самое на веб-странице, есть два варианта: использовать
    свойство background-image для размещения текста поверх
    изображения, или используйте свойство position для размещения изображений или
    значки поверх текста.Вы не можете использовать float , чтобы сделать
    перекрытие контента.
  6. Не забудьте поля и отступы. Часто вы
    может не понадобиться использовать сложный CSS для макета. Хорошее использование
    свойства полей и отступов могут увести вас очень далеко (особенно
    в сочетании со свойством фонового изображения).

Макеты с плавающей запятой

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

Плавающее изображение

Как вы знаете, изображение представляет собой встроенный элемент . Чтобы напомнить вам о
что, посмотрите на этот пример и
измените размер страницы браузера, чтобы увидеть, что происходит с изображениями.Вы тоже
можно использовать Chrome Inspect Element, чтобы заметить
что вложено в
p .

Теперь давайте посмотрим на
та же страница
после применения следующих стилевых правил:

  • Сделал тело фиксированной шириной, указав ширину в пикселях.
  • Сделал тело по центру, указав margin: auto;
    для этого.

  • Сделал изображения плавающими вправо, указав img {float:
    верно; }
    .

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

Плавающий div (или семантический контейнер)

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

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

Свойство float занимает всего три
значения: слева , справа и нет . Последнее значение
используется, когда вы хотите предотвратить плавание элемента.(Там есть
float: center property; мы обсуждали центрирование в
чтение на коробке модели.)

Теперь, когда мы узнали о свойстве float, давайте посмотрим, как его можно
используется для создания макета с колонками.

Двухколонный макет

Чтобы иметь макет с двумя столбцами, нам нужно иметь два контейнера
которые могут значимо стоять рядом друг с другом; Например,
раздел и помимо . Добавим сначала
элемент в сторону к нашему
Пример «Голодных игр».В
content будет заголовком и списком с короткими строками:

 <сторона>
    

Персонажи

  • Китнисс Эвердин
  • Пит Мелларк
  • Гейл Хоторн
  • Примроуз Эвердин
  • Хеймитч Абернати

Затем мы применяем минимальный стиль к этому элементу, чтобы плавать на
левая сторона, как показано ниже, получая
эта новая версия.

 в сторону {
    плыть налево;
    граница: сплошной черный 1px;
    отступ: 5 пикселей;
}
 

Важное примечание: Ширина и высота каждого
плавающий элемент контейнера зависит от количества содержимого
(текст или изображения) внутри контейнера. Это с усадкой
модель. Если бы в приведенном выше списке были очень длинные элементы, поэтому список
шириной во всю страницу, свойство float не будет иметь
эффект.

Как видно на скриншоте ниже, помимо размера коробки
можно рассчитать на основе значений полей, границы, отступов и
размер содержимого (например,грамм. ширина: 185 пикселей = 0 + 1 пикселей + 5 пикселей + 173 пикселей + 5 пикселей + 1 пикселей
+ 0). 173px зависит от ширины текста в заголовке и списке.
находятся. Опять же, если у вас есть большой абзац текста в плавающем элементе,
он, вероятно, будет таким же широким, как и его контейнер, и у плавающего будет
нет эффекта.

Размер контейнера с плавающим контейнером зависит от его содержимого и стиля.

Если вы хотите, чтобы размер столбца был желаемым (например,
вместо ширины 185 пикселей, чтобы быть 200 пикселей), вы можете сделать обратное
расчет, чтобы определить, какой должна быть ширина содержимого, используя
простое уравнение.Например, 200 пикселей = 0 + 2 * 1 пикселей + 2 * 5 пикселей.
+ X пикселей. Решив это, мы
получаем width = 188px . Это означает, что в нашем правиле мы должны установить
ширина : 188 пикселей; , чтобы получить реальный размер
столбец до 200 пикселей на странице браузера.

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

Теперь, чтобы добиться эффекта двух столбцов, мы просто добавляем маржу к
неплавающий элемент.Здесь мы добавляем поля к разделу, чтобы
в сторону плавает рядом с ним. В зависимости от того, будет ли плавающий столбец
быть на левой или правой стороне, нам нужно
установить значение margin-left или margin-right
немного больше ширины плавающего столбца. Поскольку в стороне
имеет ширину 185 пикселей, поле в 210 пикселей должно выглядеть хорошо. Поэтому мы добавляем
следующее правило:

 section {
    маржа слева: 210 пикселей;
}
 

Вот так готовый макет из двух столбцов
выглядит: наша двухколонная
пример.

Резюме: макет из двух столбцов

  1. Оберните каждую колонку в контейнер, например, в сторону
    и раздел (или div с атрибутом id ).
  2. Перемещать один контейнер (в нашем случае помимо ) влево или вправо.
  3. Установите желаемую ширину плавающего элемента.
  4. Добавьте поле (левое или правое, соответствующее плавающей стороне) к фиксированному элементу.

Трехколонная компоновка

Переход от макета с двумя столбцами к макету с тремя столбцами
прямое расширение.Можете ли вы подумать об изменениях, которые вам понадобятся?
внести в свой код HTML и CSS? Чтобы бросить вызов самому себе, прекратите читать на
в этот момент иди и поэкспериментируй с кодом из двухколоночного
макет (файлы можно скачать по ссылкам выше). Потом,
проверьте наше решение. Вот
краткое изложение выполненных шагов:

  • Добавлен новый элемент в сторону (до раздела ).
  • Добавлен атрибут ID к каждому элементу помимо элемента .
  • Использовал эти два новых идентификатора в качестве селекторов в коде CSS (правила
    идентично, за исключением float .
  • Добавлено margin-right: 210px; к правилу раздела, чтобы
    чтобы оставить место для нового плавающего элемента.

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

Проблемы с плавающей запятой

Работа с плавающими элементами часто может вызывать непредвиденные проблемы.в
Далее мы опишем два из них вместе с решениями.

— Здесь начинается дополнительное чтение —

Сброс поплавков

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

Нижний колонтитул (уведомление об авторских правах) перемещен вверх,
выше плавающей фигуры и справа (район
списки).

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

 footer {
  ясно: оба;
} 

После внесения этого изменения нижний колонтитул остается на
внизу страницы.

Содержит числа с плавающей запятой

Другая проблема возникает, когда плавающий элемент содержится внутри другого
элемент больше, чем его контейнер. Это становится очевидным, когда
Контейнер имеет цвет фона или границу. В нашем
продолжающийся голод
Пример игры, мы изменили цвет фона
элемент section на оливковый, чтобы теперь вы могли видеть, в
на скриншоте ниже видно, что плавающий элемент (рисунок) вышел из
его контейнер (раздел).Он всегда был вне своего контейнера,
но мы просто не заметили.

Проблема возникает из-за того, что плавающий элемент больше, чем его контейнер.

Есть несколько решений этой проблемы, но мы покажем два
самый простой.

  1. Добавьте элемент внизу контейнера, чтобы использовать
    Чисто. В
    наше решение
    используя clear, мы добавили

    элемент перед концом раздела и правило CSS для
    это br.clear {clear: both;} .
  2. Используйте выделенное свойство CSS для контейнера
    элемент, переполнение: скрыто; . Вот это
    снова решение
    с использованием скрытого переполнения. Хотя это свойство CSS работает очень хорошо,
    его название может сбивать с толку, так как эффект не заключается в том, чтобы скрыть
    переполнение (выпадающий плавающий элемент), но вместо этого
    увеличивает содержащий элемент так, чтобы плавающий элемент no
    дольше торчит.

Элементы позиционирования на странице

В начале этих заметок мы упомянули, что поплавки являются наиболее
использованная техника для оформления макетов.Однако есть еще один
техника, позиционирование , которая, в частности,
ситуации.

Позиционирование элементов достигается за счет
свойство позиция , которая может принимать следующие значения:

  • абсолютное
  • родственник
  • фиксированный
  • статический (это значение по умолчанию)

Значения абсолютного и фиксированного очень похожи в
их синтаксис (хотя они создают разные эффекты) и их легче
понимать.Значение относительно немного сложнее, потому что
его значение не соответствует тому, как мы используем это слово в повседневной жизни.
язык. Чтобы объяснить эти значения, мы покажем ниже
пример для каждого. Вы должны просмотреть файлы HTML и CSS каждого
пример, чтобы лучше понять, что происходит.

позиция: абсолютная

Мы можем использовать этот стиль, чтобы установить элемент в желаемом месте в
страницы, дополнительно указав положение по горизонтали и вертикали
с помощью
свойства слева , справа , сверху ,
и нижний .Эти свойства определяют расстояние (в
пикселей или других единиц) от
(0,0) координаты некоторого эталонного контейнера. Обычно ссылка
контейнер — это область просмотра (верхний левый угол браузера
область просмотра).

Чтобы увидеть это в действии, у нас есть
модифицированный
версию нашего примера с Голодными играми, и мы постараемся позиционировать
цифра в другое место, как показано на
в этом стиле
версия примера.

Этот эффект был достигнут с помощью этого кода CSS:

фигура {
  позиция: абсолютная;
  верх: 350 пикселей;
  слева: 500 пикселей;
  граница: сплошной черный 1px;
  отступ: 3 пикселя;
}
 

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

позиция: относительная

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

  1. Объявите элемент, относительно которого это позиционирование
    должно случиться.Это эталонный контейнер, о котором мы упоминали.
    в предыдущем разделе.
  2. Объявить как absolute элемент, который мы хотим позиционировать, и
    укажите его координаты относительно эталонного контейнера.

Это новое
Например, над рисунком создается подпись со следующим кодом:

 figure {
    позиция: относительная; 
  граница: сплошной черный 1px;
  отступ: 3 пикселя;
  ширина: 400 пикселей;
}
 
 figcaption {
    позиция: абсолютная; 
  внизу: 15 пикселей;
  слева: 4 пикселя;
  справа: 4 пикселя;
  цвет: желтый;
  цвет фона: черный;
  непрозрачность: 0.5;
  выравнивание текста: центр;
  font-weight: 200%;
  отступ: 5 пикселей;
}
 

Итак, нижние и оставили длины в
figcaption отсчитываются от верхнего левого угла
цифра , а не из окна.

позиция: фиксированная

Это позиционирование очень похоже на absolute , с
разница в том, что элемент все время остается на своем месте,
в то время как остальная часть страницы прокручивается вверх и вниз.Вы можете думать об этом как
позиционирование относительно экрана . Это полезно для исправления
панели навигации или боковые панели в одном положении. Посмотрите, как в сторону
элемент остается фиксированным
в нашем
пример, с кодом ниже:

 в сторону {
  положение: фиксированное;
  верх: 80 пикселей;
  граница: сплошной черный 1px;
  отступ: 5 пикселей;
  ширина: 188 пикселей; / * это значение гарантирует, что поле боковой панели будет занимать 200 пикселей * /
}

 

© Сотрудники информатики колледжа Уэллсли.Эта работа находится под лицензией Creative Commons License.

Дата изменена:

Макеты страниц веб-сайтов — Веб-разработка по биоинформатике

РАЗВИТИЕ РАБОТЫ НА ЭТОМ РАЗДЕЛЕ

Макет страницы определяет расположение различных элементов и разделов.

В минимальном макете веб-страницы у нас должно быть как минимум три элемента:

  • жатка
  • часть содержимого
  • нижний колонтитул

Ключевой концепцией здесь является то, что верхний и нижний колонтитулы обычно повторяются на каждой странице веб-сайта.Конечно, с исключениями и вариациями.

Рисунок 3-10-1: Верхний и нижний колонтитулы на веб-страницах

Верхний и нижний колонтитулы могут иметь разную степень сложности.

Заголовки

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

  • Логотип
  • Название сайта
  • Слоган
  • Меню навигации
  • Поле поиска

Опять же, все это не является обязательным.Сам заголовок не является обязательным. Однако, если вы разрабатываете заголовок, это все элементы, которые вы можете рассмотреть для включения.

Возьмем, к примеру, текущий заголовок веб-сайта Европейского института биоинформатики (EBI), где используются некоторые из этих элементов.

Рисунок 3-10-2: Заголовок веб-сайта EBI. Заголовок, логотип, меню навигации, слоган и поле поиска обозначены стрелками. Название фактически встроено в сам логотип, как это бывает.

Разметка заголовка

Как различные разделы заголовка отображаются в HTML? Опять же, никаких фиксированных правил.

  • В HTML5 все содержимое заголовка может быть удобно заключено в тег заголовка
  • Логотип будет изображением (тег img )
  • Заголовок и слоган могут быть встроены в тег span, и им могут быть присвоены идентификаторы, например, «site-title» и «site-slogan», для упрощения стилизации
  • Меню навигации может быть списком ul
  • Поле поиска — это веб-форма, в которой сайт может собирать данные, введенные пользователем, в данном случае ключевое слово для поиска по всему веб-сайту, и обрабатывать ввод с помощью какого-либо сценария, запущенного на сервере.Мы обсудим веб-формы в следующем разделе этой главы

Если имеется тег заголовка , вы можете использовать его в качестве контекстной информации CSS для назначения определенных стилей элементам заголовка:

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

.

<заголовок>

<заголовок>

Нижние колонтитулы

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

Давайте взглянем на нижний колонтитул веб-сайта NCBI Pubmed, чтобы прояснить этот момент:

Рисунок 3-10-3: Нижний колонтитул веб-сайта NCBI Pubmed

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

Нижний колонтитул веб-сайта Европейского института биоинформатики (EBI) следует аналогичной схеме:

Рисунок 3-10-4: Нижний колонтитул веб-сайта EBI

Вместо этого нижний колонтитул мог бы быть очень простым, например, содержать только контактный адрес электронной почты, уведомление об авторских правах, графический элемент. В HTML5 все содержимое нижнего колонтитула может быть заключено в тег нижнего колонтитула . Учитывая вариабельность содержимого нижнего колонтитула, мы не даем никаких рекомендаций по разметке.

Если тег нижнего колонтитула присутствует, вы можете использовать его в качестве контекстной информации CSS для назначения определенных стилей элементам нижнего колонтитула:

нижний колонтитул a {text-decoration: underline;}

нижний колонтитул a {text-decoration: underline;}

Раздел содержания

В простой модели на рисунке 3-10-1 фактическое содержимое страницы, единственное (в первом приближении), которое изменяется от одной страницы к другой на том же веб-сайте или, возможно, в разделе веб-сайта, включено в блок «содержимого», зажатый между верхним и нижним колонтитулами.

Этот блок содержимого может быть единым «блоком» или может быть каким-то образом разделен или подразделен для создания более или менее сложной компоновки.

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

Рисунок 3-10-5: Макет со столбцами в разделе содержимого.

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

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

Создание макетов страниц с помощью HTML и CSS

Как добиться таких макетов с помощью HTML и CSS?

Основными элементами, которые мы предлагаем использовать для создания макетов этого курса, являются:

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

Мы приведем пример того, как получить макет на рисунке 3-10-5. Это базовый макет, который подходит для большинства проектов. Конечно, его можно доработать и использовать в качестве начального кода для создания более сложных макетов.

Мы уже предоставили здесь инструкции по стилизации тегов html и body таким образом, чтобы отображать тело как базовый прямоугольник шириной 980 пикселей по центру страницы.Это обеспечивает начальную основу для разработки нашего шаблона веб-страницы, чтобы получить макет, показанный на рисунке 3-10-5.

Простое упражнение с div

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

Результат, которого мы хотим достичь, — это верхний блок div шириной 960 пикселей, за которым следуют три блока div шириной по 300 пикселей каждый, идеально разнесенные и выровненные с верхним блоком div, как показано на рисунке ниже.Все блоки div будут иметь границу в 1 пиксель, высоту 100 пикселей и отступ в 5 пикселей, чтобы заключенный текст находился немного дальше от границ.

Пример хорошо выровненных и разнесенных блоков div

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

Вот предварительный HTML-код для страницы (который создаст проблемы, продолжайте читать):

верхний div
div 1
div 2
div 3

верхний div

div 1

div 2

div 3

Мы назначили всем блокам div класс «test», так как у них есть некоторые общие особенности, такие как высота, тип границы, стиль текста, отступы, цвет фона.Три нижних div имеют класс «mybox», а последний из них — «последний» класс.

Div — это блочные элементы, поэтому без стилей вы увидите именно это на странице, в основном текст внутри div:

верхний див
дел 1
дел 2
дел 3

Чтобы отобразить три нижних блока как встроенные, а не блочные, мы будем использовать значение встроенного блока для свойства display . Элементы встроенного блока похожи на встроенные элементы, но они могут иметь ширину и высоту , что очень важно для создания макета на основе div (или других элементов контейнера).

div.mybox {
дисплей: встроенный блок;
}

div.mybox {

дисплей: встроенный блок;

}

Прежде чем стилизовать классы, проведем некоторые вычисления.

Мы сказали, что верхний div должен иметь ширину 960 пикселей, а нижний div должен иметь ширину 300 пикселей.Следовательно:

960 — (300 x 3) = 60

у нас, по-видимому, есть 60 пикселей для размещения трех нижних div. Таким образом, 30 пикселей margin-right после первого и второго div должны обеспечивать идеальный интервал. Нам не нужны поля сразу после третьего нижнего div. Для этой цели «последний» класс был назначен третьему нижнему div.

Вот первый примерный стиль:

div.text {/ * применяется ко всем div * /
цвет фона: #EBEBEB; / * светло-серый * /
граница: сплошная 1px LightSlateGrey; / * slategrey — голубовато-серый * /
высота: 100 пикселей;
отступ: 5 пикселей;
нижнее поле: 30 пикселей;
цвет: LightSlateGrey; /* цвет текста */
font-weight: жирный;
}

div.box1 {/ * верхний div * /
ширина: 960 пикселей;
}

div.mybox {/ * три нижних div * /
ширина: 300 пикселей;
дисплей: встроенный блок; / * используется для отображения трех нижних div в строке * /
поле справа: 30 пикселей;
}

div.last {/ * последний из трех нижних div * /
поле справа: 0;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

дел.текст {/ * применяется ко всем div * /

background-color: #EBEBEB; / * светло-серый * /

border: 1px solid LightSlateGrey; / * slategrey — голубовато-серый * /

height: 100px;

отступ: 5 пикселей;

нижнее поле: 30 пикселей;

цвет: LightSlateGrey; / * цвет текста * /

font-weight: bold;

}

div.box1 {/ * верхний div * /

width: 960px;

}

дел.mybox {/ * три нижних блока div * /

width: 300px;

дисплей: строчно-блочный; / * используется для отображения трех нижних div в строке * /

margin-right: 30px;

}

div.last {/ * последний из трех нижних div * /

margin-right: 0;

}

Можно подумать, что работа сделана. Давайте посмотрим все это в браузере.

Код HTML-страницы может быть следующим:

<стиль>
div.контрольная работа{
цвет фона: #EBEBEB;
граница: сплошная 1px LightSlateGrey;
высота: 100 пикселей;
отступ: 5 пикселей;
нижнее поле: 30 пикселей;
цвет: LightSlateGrey;
font-weight: жирный;
}

div.box1 {
ширина: 960 пикселей;
}

div.mybox {
ширина: 300 пикселей;
дисплей: встроенный блок;
поле справа: 30 пикселей;
}

div.последний{
поле справа: 0;
}

верхний div
div 1
div 2
div 3

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

28

29

30

<стиль>

дел.тестовый {

background-color: #EBEBEB;

граница: сплошная 1 пиксель LightSlateGrey;

высота: 100 пикселей;

отступ: 5 пикселей;

нижнее поле: 30 пикселей;

цвет: LightSlateGrey;

font-weight: жирный;

}

div.box1 {

width: 960px;

}

div.mybox {

width: 300px;

дисплей: строчно-блочный;

поле справа: 30 пикселей;

}

дел.последний {

край-правый: 0;

}

top div

div 1

div 2

div 3

При посещении этой веб-страницы, сюрприз-сюрприз, вот что мы получаем.

Сначала попытайтесь выровнять три нижних блока по верхнему. Что-то не так.

Что не так с нашим кодом выше? Есть две основные проблемы.У всех контейнеров есть свойство box-sizing, значение которого по умолчанию — «content-box». Когда box-sizing имеет значение content-box, ширина, назначенная контейнеру, например div, строго применяется к самому контейнеру. Заполнение и граница исключены. . Таким образом, фактическая реальная ширина наших трех нижних блоков div, которым мы присвоили ширину 300 пикселей, составляет:

300 + 10 (отступ слева и справа) + 2 (граница слева и справа) = 312 пикселей.

Чтобы исправить это, мы должны явно присвоить box-sizing значение «border-box» вместо «content-box».

Вторая проблема заключается в самом HTML-коде. Мы разделили div в исходном коде символами новой строки. Новые строки отображаются как пробелы, которые увеличивают ширину между div.

Короче говоря, вот код, который будет правильно размещать и выравнивать блоки div так, как мы хотели:

<стиль>

div.test {
размер коробки: рамка-рамка;
цвет фона: #EBEBEB;
граница: сплошная 1px LightSlateGrey;
высота: 100 пикселей;
отступ: 5 пикселей;
нижнее поле: 30 пикселей;
цвет: LightSlateGrey;
font-weight: жирный;
}

div.mybox {
ширина: 300 пикселей;
дисплей: встроенный блок;
поле справа: 30 пикселей;
}

div.box1 {
ширина: 960 пикселей;
}

div.last {
поле справа: 0;
}

верхний div
div 1
div 2
div 3

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

28

29

30

<стиль>

дел.испытание {

box-sizing: border-box;

цвет фона: #EBEBEB;

граница: сплошная 1 пиксель LightSlateGrey;

высота: 100 пикселей;

отступ: 5 пикселей;

нижнее поле: 30 пикселей;

цвет: LightSlateGrey;

font-weight: жирный;

}

div.mybox {

width: 300px;

дисплей: строчно-блочный;

поле справа: 30 пикселей;

}

дел.box1 {

ширина: 960 пикселей;

}

div.last {

margin-right: 0;

}

верхний div
div 1
div 2
div 3

Создание макета со столбцами

Вернемся к макету, показанному на рисунке 3-10-5.

У нас будут следующие разделы главной страницы (см. Рисунок 3-10-5):

  • Заголовок, разделенный тегами «header»
  • Левая боковая панель, разделенная блоком div с идентификатором «sidebar»
  • В левой боковой панели несколько «сторонних» блоков, в которых организовано содержимое боковой панели.
  • Основное содержимое, справа от боковой панели.Разделен блоком div с идентификатором «main-contents»
  • Боковая панель и основное содержимое будут помещены в div с идентификатором «center-contents-block»
  • Нижний колонтитул

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

Исходный код HTML:






<заголовок>

<сторона>

<сторона>

<нижний колонтитул>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

28

29

30

< в сторону>

Чтобы расположить разделы, как показано на рис. 3-10-5, требуется совсем немного стилей: мы должны определить ширину боковой панели и divs main-content и каким-то образом разместить div боковой панели слева от div основного содержимого.С этими двумя спецификациями, в дополнение к стилю тега body, о котором мы упоминали выше, у нас будет макет, показанный на рисунке 3-10-5.

Вот необходимое нам объявление CSS. Имейте в виду, что для получения действительно хорошего макета требуется гораздо больше, чем это необходимо. Это только самые простые объявления для достижения относительного расположения разделов, показанного на рисунке 3-10-5.

Как обычно, мы разместим эти объявления в файле css / style.css, который связан с заголовком HTML-страницы.

тело {
маржа слева: авто;
маржа-право: авто;
ширина: 980 пикселей;
}

#sidebar {
ширина: 300 пикселей;
дисплей: встроенный блок;
}

# main-contents {
ширина: 660 пикселей;
дисплей: встроенный блок;
}

в стороне {
-moz-border-radius: 15 пикселей; / * эти два объявления предназначены для обхода сторон, как на рис. 3-10-5, во всех браузерах * /
радиус границы: 15 пикселей;
ширина: 280 пикселей;
нижнее поле: 5 пикселей; / * на пробел от следующего * /
маржа-право: авто; / * margin-left и right, установленные на auto, будут центрировать стороны в окружающем div * /
маржа слева: авто;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

18

19

20

21

22

23

24

25

26

27

кузов {

левое поле: авто;

поле справа: авто;

ширина: 980 пикселей;

}

#sidebar {

width: 300px;

дисплей: строчно-блочный;

}

# main-contents {

width: 660px;

дисплей: строчно-блочный;

}

в сторону {

-moz-border-radius: 15px; / * эти два объявления предназначены для обхода границ сторон, как на рис. 3-10-5, в браузерах * /

border-radius: 15px;

ширина: 280 пикселей;

нижнее поле: 5 пикселей; / * на пробел в стороне от следующего * /

margin-right: auto; / * для полей margin-left и right установлено значение auto, чтобы центрировать стороны в окружающем div * /

margin-left: auto;

}

Вы можете заметить, что добавленная ширина боковой панели и основного содержимого составляет не 980 пикселей, а 960.Это связано с тем, что, как правило, мы также добавляем отступы 10 пикселей справа и слева для тела в определенной точке. При вычислении ширины следует учитывать все пиксели, включая поля и отступы самих элементов и окружающих / родительских элементов, иначе конечный результат может быть неудовлетворительным.

Ключ к расположению боковой панели слева от div основного содержимого заключается в использовании объявлений display: inline-block как для боковой панели, так и для div основного содержимого. Также обратитесь к упражнению по расположению div, которое мы выполнили выше.

Основные упражнения
В качестве упражнения мы предоставляем вам объединить код, представленный в предыдущем разделе, с кодом в этом разделе, чтобы создать базовую страницу с красивым макетом, например, как на рис. 3-10-5, и индивидуальным стилем. Выберите красивую цветовую схему и приступайте к созданию собственной страницы и стилей. Учтите, что эта страница будет основой для дальнейшей работы. Ваша собственная страница / макет / стиль будет шаблоном для страниц ввода и вывода всех веб-приложений биоинформатики, которые вы будете разрабатывать во время этого курса и, надеюсь, в будущем.

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

Для примера представьте, что у вас есть 10-страничный веб-сайт, на каждой странице которого есть меню навигации, которое ссылается на все страницы сайта. Однажды вы добавите еще одну страницу, страницу 11.На статическом веб-сайте вам нужно будет отредактировать каждую из 10 страниц, чтобы добавить страницу 11 в меню навигации каждой страницы. Вы видите, как если у вас есть 100 страниц вместо 10, вопрос становится сложным (и, следовательно, подверженным ошибкам и менее привлекательным).

Нам необходимо внедрить какой-то механизм, который позволит нам контролировать по крайней мере определенные части страниц, например, их общий макет и внешний вид, а также их меню навигации в каком-то центральном общем месте. Для этого нам необходимо перейти от парадигмы статических веб-сайтов к так называемым «динамическим» веб-сайтам.

Для создания динамического веб-сайта нам обязательно понадобится какой-то язык программирования. HTML и CSS, хотя и необходимы, но недостаточны. По этой причине в следующей главе мы начнем изучать основы PHP. Вы увидите, что просто для того, чтобы превратить статический сайт в динамический, нам нужно всего несколько операторов PHP, которые чрезвычайно просты для понимания и управления, даже если вы даже не знаете, что такое программирование. Так что вы можете без страха переходить к следующей главе.Перед этим давайте научимся создавать веб-форму для сбора данных о посетителях.

Разделы раздела

  • Глава 3. Ваша первая веб-страница — Изучение HTML и CSS

Лучший способ разметки страницы с помощью HTML5

Введение

Веб-страница, отображаемая в браузере, состоит из многих вещей — логотипа, информативного текста, изображений, гиперссылок, структуры навигации и многого другого. HTML5 предлагает набор элементов разметки, которые позволяют создавать структурированный макет для веб-страниц.Эти элементы часто называют семантической разметкой, потому что они четко передают свое значение и цель разработчику и браузеру. В этой статье обсуждаются некоторые важные элементы HTML5, которые могут способствовать разметке веб-страницы.

Семантическая разметка

Семантическая разметка ясно выражает свое значение и цель разработчикам и браузеру. Веб-разработчики часто используют элемент

для компоновки своих веб-страниц. Однако элемент

сам по себе не передает то, что он представляет на веб-странице.Элемент

может заключать меню навигации или содержать список сообщений в блоге, но простое использование

не дает большой информации разработчикам или браузерам. Обычно классы CSS, применяемые к элементам

, раскрывают некоторую информацию об их предназначении. Например, рассмотрим следующую разметку:

 
...

В приведенной выше разметке именно CSS-класс заголовка дает вам представление о том, что может делать

.Однако в отсутствие этого класса CSS невозможно легко определить, что может делать

. Это потому, что

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

HTML5 включает набор элементов разметки, которые преодолевают эту трудность. Эти новые элементы имеют значимые имена, поэтому, просто взглянув на эти элементы, вы получите четкое представление об их содержании.Эти семантические элементы HTML5 перечислены ниже (это не исчерпывающий список):

  • <заголовок>
  • <нижний колонтитул>
  • <раздел>
  • <статья>
  • <сторона>

Как видите, эти элементы достаточно выразительны и сразу можно составить представление о предназначении. На следующем рисунке показан образец макета страницы, созданный с использованием этих элементов:

На рисунке выше показано типичное расположение различных элементов.Обратите внимание, что их точное расположение на странице полностью зависит от макета. Например, элемент

<сторона> <рисунок>
Подпись к рисунку находится здесь

Привет мир! Привет мир! Привет мир! Привет мир! Привет мир! Привет мир!

<раздел>

Это заголовок раздела

Привет мир! Привет мир! Привет мир! Привет мир! Привет мир! Привет мир! Привет мир! Привет мир! Привет мир!

<нижний колонтитул> <час /> Авторское право (C) 2013.Все права защищены.

Создание CSS для примера веб-страницы

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

 статья
{
    отступ: 5 пикселей;
    граница: пунктирная 3px # ff006e;
    маржа сверху: 5 пикселей;
}

заголовок
{
    отступ: 0 пикселей;
    выравнивание текста: центр;
}

в стороне
{
    маржа сверху: 5 пикселей;
    цвет фона: # f0eaea;
    отступ: 5 пикселей;
    выравнивание текста: центр;
    стиль шрифта: курсив;
    граница: двойной 3px # b200ff;
}

раздел
{
    отступ: 5 пикселей;
    граница: пунктирная 3px # 0026ff;
    маржа сверху: 5 пикселей;
}

нижний колонтитул
{
    отступ: 5 пикселей;
    выравнивание текста: центр;
    font-weight: жирный;
}

навигация
{
    выравнивание текста: центр;
}
ул ли
{
    дисплей: встроенный;
    отступ слева: 5 пикселей;
    отступ справа: 5 пикселей;
    выравнивание текста: слева;
    размер шрифта: 16 пикселей;
    font-weight: жирный;
} 

Правила CSS, определенные выше, довольно просты и не нуждаются в пояснениях.Просто добавьте эти правила в новый файл таблицы стилей и свяжите эту таблицу стилей с примером веб-страницы, которую вы разработали ранее.

Сводка

В этой статье рассматриваются элементы семантической разметки HTML5, которые можно использовать в правильном макете веб-страниц. В отличие от элемента

семантические элементы предназначены для использования с определенной целью. Элементы, которые мы рассмотрели в этой статье, включают

,