HTML (Hyper Text Markup Language) : язык гипертекстовой разметки, используется для создания интернет-страниц. Страница, написанная таким образом, представляет собой обычный текстовыи документ, в котором при помощи тегов определяются расположение и оформление текста, графики и др. Все теги пишутся в угловых скобках (< , >)
Все теги делятся на 2 группы:
-
требующие закрывающего тега (контейнеры
);
-
не имеющие закрывающего тега (одиночные).
Теги-контейнеры записываются так:
<тег>
подопытный объект
. Косая черта (символ /) говорит о том, что тег закрывающий.
Одиночные теги записывают так:
одна хрень<тег>
другая хрень
Тег может иметь параметры. Параметры тега записываются после него, внутри его угловых скобок через пробел. Например,
Ниже приведены основные html-теги и их применение.
Обязательные теги
- тег-контейнер, открывающий тег пишется в самом начале документа; закрывающий- в самом конце. Заключает в себе всё содержимое документа и сообщает компьютеру, что это действительно html-документ.
- контейнер, заключает в себе голову html-документа, где пишутся специальные теги. Начинается сразу после , заканчивается между и
Простой текст, написанный внутри этого контейнера, в браузере никак не отобразится.
- контейнер внутри контейнера
Предназначен для написания в нём заголовка страницы.
- тело документа, где находится основное содержание. Контейнер должен распологаться между и .
Имеет много параметров:
text
-цвет текста на странице,
bgcolor
-цвет фона страницы,
link
-цвет ссылок на странице,
На этом список обязательных тегов заканчивается. Идём дальше...
Теги - контейнеры
-необязательный, но необходимый тег. Имеет ценнейший параметр
href
, без использования которого не обходится ни один сайт. Оно и понятно, ведь сочетанием a href
образуется ссылка
, а какой же сайт без ссылок?!
Пример:
текст, который увидит посетитель
-устаревший, но надёжный тег для текста. Вот его параметры:
color
-цвет шрифта,
size
-размер шрифта (в относительных единицах, от 1 до 7)
и др.
-используется для выравнивания текста и других объектов по горизонтальному центру страницы
-предназначен для написания заголовка внутри страницы. Текст внутри тега отображается большим жирным шрифтом и устанавливается по центру. Вообще-то на месте цифры 2 в моём примере может стоять цифра от 1 до 6 - получаются заголовки от самого большого до самого маленького.
-устанавливает жирное начертание текста.
-курсивный текст
-подчёркнутый текст
-перечёркнутый текст
-используется для отделения параграфа. Позволяет установить для текста различные отступы.
Одиночные теги
-переброс на другую строку
-горизонтальная черта.
-размещение картинки на странице.
У него несколько параметров:
src , указывает путь к картинке (абсолютный или относительный);
align , устанавливает расположение картинки. Этот параметр может принимать значения \"center\", \"left\", \"right\".
alt , подпись к картинке, которая появляется при наведении на неё мышкой.
border , устанавливает толщину рамки вокруг картинки. Принимает значение от 0 до сколько хочешь.
Онлайн учебники на сайт
Учебник по HTML 4
Тег-контейнер
Тег-контейнер
является элементом уровня блока,
служащим для выделения фрагмента документа. Целью этого выделения является управление
параметрами данного фрагмента, которое обычно выполняется с помощью назначения
стилей. Приведем пример:(Фрагмент документа)
В этом примере фрагмент HTML-документа обрамляется тегами
и для задания некоторых его свойств. В данном случае
все текстовые элементы выделенного фрагмента будут отображаться зеленым (green)
цветом. Аналогом тега уровня текста является элемент .Заметим, что непосредственное назначение стилевых свойств
отдельного фрагмента так, как это сделано в примере, использовать не желательно
в соответствии с концепцией разделения структуры документа и его представления.
Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
Тег
Тег-контейнер
предназначен для горизонтального
выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень
блока и его полезно использовать для центрирования таких элементов, как, например,
таблиц, так как они не могут быть центрированы назначениемALIGN=CENTER тега
.По существу тег
является краткой формой
следующей записи: . Дальнейшее использование тега
по причинам, отмеченным в предыдущем разделе, также нежелательно.
Поскольку уж мы начали разбираться в коде своих блогов на Вордпресс — нам не обойти вопрос html форматирования. Конечно, это целая наука. Но мы постараемся разобраться с основами: понять, какие теги используются для форматирования текста — отдельных постов, страниц. Тогда нам удастся вносить в эту структуру осмысленные изменения.
Блочная верстка Вордпресс
Для начала обсудим общий принцип формирования html-кода для Вордпресс. Он носит название «блочная верстка». И, как нетрудно догадаться, это значит, что шаблон состоит из неких блоков. Мы уже видели это на примере шаблона страницы или одной записи ().
Но и если вы откроете код любой статьи блога (например, в режиме html-редактора) — то увидите те же блоки, расположенные один над другим. Вообще, такая верстка является настолько естественной, что многие авторы даже не задумываются, что это именно определенный принцип, а не сложившееся само собой положение вещей.
На самом деле, далеко не все так очевидно. Вот, например, верстка таблицы (можете подробно прочитать о таблицах в отдельной статье):
Левая ячейка
Правая ячейка
Мы видим, что отдельные элементы (ячейки) прописаны одна над другой. А располагаться они будут на одной линии. Вот результат такой простой записи:
Левая ячейка
Правая ячейка
Обратите внимание, что, если в таблице нет никаких границ — то содержимое ее ячеек выглядит, как обычная запись. Представьте, что мы можем (а мы можем!) задать любую конфигурацию для ячеек, добавить туда не только текст, но и картинки… А теперь попытайтесь представить, каким навороченным будет код такой страницы!
Именно такой принцип верстки применяли раньше (например, для сайтов narod) и иногда применяют до сих пор! Он называется «табличная верстка». Так что, естественность блочной верстки — это удачная находка разработчиков, а не случайность.
Элементы блочной верстки
Но как формируются блоки в блочной верстке? Как браузер отличает, что один элемент закончился и начался следующий? Как он определяет, что у этого элемента такие свойства и стили, а у другого — другие? — Это главные вопросы, которые приводят нас от теории к практике.
Итак, блоки — это фрагменты контента, которые заключены в блочные теги или блочные элементы (контейнеры). Вообще-то, их немало, но мы сегодня познакомимся с самыми важными и часто встречающимися — тегами div, p, h.
У всех блочных элементов есть общие правила форматирования:
- Ширина
такого элемента будет равна ширине родителя. То есть, например, ширина текста поста будет равна всей ширине колонки;
- Высота
определяется количеством контента. То есть, абзац будет выше, если в нем больше текста;
- Новый блок начинается с новой строки
.
Контейнер div
Это базовый тег для любого шаблона Вордпресс. Посмотрите коды своей темы — там будут вызовы функций php:
И некие фрагменты, заключенные в теги — собственно, контейнер:
...
Причем в такой контейнер могут заключаться и php-функции, и другие теги (например, активные ссылки, ограниченные тегами а, заголовки h и т.д.)
Зачем же вообще нужен такой контейнер? — Чтобы присвоить ему отдельный стиль, который будет прописан отдельно (в таблице стилей). Так можно написать довольно лаконичный код, состоящий из отдельных блоков для которых будет назначено название или id стиля. Но сам CSS-код оформления будет подгружаться из другого файла. Свойства стиля дописываются так:
...
или так
...
Посмотрите на код любого из разделов шаблона вашего блога и сразу увидите, о чем я говорю. Для тренировки, попробуйте вычленить отдельные блоки и понять, за отображение каких элементов страницы они отвечают. А потом найдите в таблице стилей название или id стилей, которые относятся к разным блокам.
Контейнер p
Эти теги мы преимущественно встретим в форматировании отдельной записи — стоит только открыть html редактор статьи. Потому, что этот тег содержит в себе контент одного абзаца текста. Как правило, к нему применяют стилевое свойство text-align, которое устанавливает выравшивание:
- text-align: left; — выравнивание по левому краю;
- text-align: right; — выравнивание по правому краю;
- text-align: justify; — выравнивание по ширине;
Полная запись выглядит, например, так:
Все другие стилевые свойства для этого тега заданы в таблице стилей. Там прописаны и шрифты, и их размеры, и цвет текста (ведь он может быть не только черным!)
Контейнер h
Это известный тег, в который заключаются заголовки — h1, h2, h3 и так далее. Стили для каждого типа заголовков уже прописаны в теме блога. Они участвуют и в верстке страниц шаблона, и в форматировании отдельных постов.
Об использовании заголовков разного уровня в тексте уже говорено-переговорено сеошниками всех мастей. Но мы можем применить этот тег и в шаблоне Вордпресс. Например, добавить девиз своего блога на главную страницу — под шапкой, над перечнем постов. Например, так:
Мой блог - самый лучший!
А в следующий раз мы рассмотрим строчные элементы, без которых верстка и форматирование блога, также, невозможны.
Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные
и строчные элементы
. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ![]()
).
Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором , согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.
Модель визуального форматирования CSS в деталях
1. Модель визуального форматирования
Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства. Данная модель преобразует каждый элемент документа таким образом, что он генерирует ноль или более прямоугольных блоков в соответствии с блочной моделью CSS. Положение этих блоков на странице определяется следующими факторами:
- размером элемента (с учётом того, заданы они явно или нет);
- типом элемента (строчный или блочный);
- схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
- отношениями между элементами в DOM (родительский — дочерний элемент);
- внутренними размерами содержащихся изображений;
- внешней информацией (например, размеры окна браузера).
2. Определение термина «содержащий блок»
Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком
элемента (containing block). Содержащий блок элемента определяется следующим образом:
- Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок
.
- Для элементов с position: relative или position: static содержащий блок формируется краем области содержимого ближайшего родительского блока-контейнера.
- Для элемент с position: fixed содержащий блок определяется областью просмотра.
- Для элемента с position: absolute содержащий блок устанавливается ближайшим предком с заданным position: absolute/relative/fixed
3. Блочные элементы и блочные контейнеры
Блочные элементы
— элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display , такие как block , list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.
, ,
Тег-контейнер
(Фрагмент документа)
В этом примере фрагмент HTML-документа обрамляется тегами
Заметим, что непосредственное назначение стилевых свойств отдельного фрагмента так, как это сделано в примере, использовать не желательно в соответствии с концепцией разделения структуры документа и его представления. Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
Тег
Тег-контейнер
ALIGN=CENTER тега
Поскольку уж мы начали разбираться в коде своих блогов на Вордпресс — нам не обойти вопрос html форматирования. Конечно, это целая наука. Но мы постараемся разобраться с основами: понять, какие теги используются для форматирования текста — отдельных постов, страниц. Тогда нам удастся вносить в эту структуру осмысленные изменения.
Блочная верстка Вордпресс
Для начала обсудим общий принцип формирования html-кода для Вордпресс. Он носит название «блочная верстка». И, как нетрудно догадаться, это значит, что шаблон состоит из неких блоков. Мы уже видели это на примере шаблона страницы или одной записи ().
Но и если вы откроете код любой статьи блога (например, в режиме html-редактора) — то увидите те же блоки, расположенные один над другим. Вообще, такая верстка является настолько естественной, что многие авторы даже не задумываются, что это именно определенный принцип, а не сложившееся само собой положение вещей.
На самом деле, далеко не все так очевидно. Вот, например, верстка таблицы (можете подробно прочитать о таблицах в отдельной статье):
| Левая ячейка | Правая ячейка |
Мы видим, что отдельные элементы (ячейки) прописаны одна над другой. А располагаться они будут на одной линии. Вот результат такой простой записи:
| Левая ячейка | Правая ячейка |
Обратите внимание, что, если в таблице нет никаких границ — то содержимое ее ячеек выглядит, как обычная запись. Представьте, что мы можем (а мы можем!) задать любую конфигурацию для ячеек, добавить туда не только текст, но и картинки… А теперь попытайтесь представить, каким навороченным будет код такой страницы!
Именно такой принцип верстки применяли раньше (например, для сайтов narod) и иногда применяют до сих пор! Он называется «табличная верстка». Так что, естественность блочной верстки — это удачная находка разработчиков, а не случайность.
Элементы блочной верстки
Но как формируются блоки в блочной верстке? Как браузер отличает, что один элемент закончился и начался следующий? Как он определяет, что у этого элемента такие свойства и стили, а у другого — другие? — Это главные вопросы, которые приводят нас от теории к практике.
Итак, блоки — это фрагменты контента, которые заключены в блочные теги или блочные элементы (контейнеры). Вообще-то, их немало, но мы сегодня познакомимся с самыми важными и часто встречающимися — тегами div, p, h.
У всех блочных элементов есть общие правила форматирования:
- Ширина такого элемента будет равна ширине родителя. То есть, например, ширина текста поста будет равна всей ширине колонки;
- Высота определяется количеством контента. То есть, абзац будет выше, если в нем больше текста;
- Новый блок начинается с новой строки .
Контейнер div
Это базовый тег для любого шаблона Вордпресс. Посмотрите коды своей темы — там будут вызовы функций php:
И некие фрагменты, заключенные в теги — собственно, контейнер:
Причем в такой контейнер могут заключаться и php-функции, и другие теги (например, активные ссылки, ограниченные тегами а, заголовки h и т.д.)
Зачем же вообще нужен такой контейнер? — Чтобы присвоить ему отдельный стиль, который будет прописан отдельно (в таблице стилей). Так можно написать довольно лаконичный код, состоящий из отдельных блоков для которых будет назначено название или id стиля. Но сам CSS-код оформления будет подгружаться из другого файла. Свойства стиля дописываются так:
Посмотрите на код любого из разделов шаблона вашего блога и сразу увидите, о чем я говорю. Для тренировки, попробуйте вычленить отдельные блоки и понять, за отображение каких элементов страницы они отвечают. А потом найдите в таблице стилей название или id стилей, которые относятся к разным блокам.
Контейнер p
Эти теги мы преимущественно встретим в форматировании отдельной записи — стоит только открыть html редактор статьи. Потому, что этот тег содержит в себе контент одного абзаца текста. Как правило, к нему применяют стилевое свойство text-align, которое устанавливает выравшивание:
- text-align: left; — выравнивание по левому краю;
- text-align: right; — выравнивание по правому краю;
- text-align: justify; — выравнивание по ширине;
Полная запись выглядит, например, так:
Все другие стилевые свойства для этого тега заданы в таблице стилей. Там прописаны и шрифты, и их размеры, и цвет текста (ведь он может быть не только черным!)
Контейнер h
Это известный тег, в который заключаются заголовки — h1, h2, h3 и так далее. Стили для каждого типа заголовков уже прописаны в теме блога. Они участвуют и в верстке страниц шаблона, и в форматировании отдельных постов.
Об использовании заголовков разного уровня в тексте уже говорено-переговорено сеошниками всех мастей. Но мы можем применить этот тег и в шаблоне Вордпресс. Например, добавить девиз своего блога на главную страницу — под шапкой, над перечнем постов. Например, так:
Мой блог - самый лучший!
А в следующий раз мы рассмотрим строчные элементы, без которых верстка и форматирование блога, также, невозможны.
Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные
и строчные элементы
. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элементов и ).
Разделение элементов на блочные и строчные используется в спецификации HTML до версии 4.01. В HTML5 эти понятия заменены более сложным набором , согласно которым каждый HTML-элемент должен следовать правилам, определяющим, какой контент для него допустим.
Модель визуального форматирования CSS в деталях
1. Модель визуального форматирования
Модель визуального форматирования CSS представляет собой алгоритм, который обрабатывает HTML-документ и выводит его на экран устройства. Данная модель преобразует каждый элемент документа таким образом, что он генерирует ноль или более прямоугольных блоков в соответствии с блочной моделью CSS. Положение этих блоков на странице определяется следующими факторами:
- размером элемента (с учётом того, заданы они явно или нет);
- типом элемента (строчный или блочный);
- схемой позиционирования (нормальный поток, позиционированные или плавающие элементы);
- отношениями между элементами в DOM (родительский — дочерний элемент);
- внутренними размерами содержащихся изображений;
- внешней информацией (например, размеры окна браузера).
2. Определение термина «содержащий блок»
Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). Содержащий блок элемента определяется следующим образом:
- Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок .
- Для элементов с position: relative или position: static содержащий блок формируется краем области содержимого ближайшего родительского блока-контейнера.
- Для элемент с position: fixed содержащий блок определяется областью просмотра.
- Для элемента с position: absolute содержащий блок устанавливается ближайшим предком с заданным position: absolute/relative/fixed
3. Блочные элементы и блочные контейнеры
Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Значения свойства display , такие как block , list-item и table делают элементы блочными. Блочные элементы генерируют основной блок, который содержит только блок элемента. Элементы со значением display: list-item генерируют дополнительные блоки для маркеров, которые позиционируются относительно основного блока.
,