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

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

Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.

Итак, для создания рамки HTML-таблицы и границ ее ячеек используется всего один атрибут тега

- border . Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.

...

Для изменения расстояния между ячейками (их границами) и от ячеек до рамки таблицы в теге

применяется атрибут cellspacing . Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.

...

Чтобы установить внутренние отступы от границ ячеек до их содержимого необходимо в теге

использовать атрибут cellpadding . И его значения это числа, означающие пиксельные размеры.

...

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding , поэтому чтобы убрать расстояния вовсе - установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

Результат в браузере

Таблица с измененными отступами и расстояниями:

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

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding= "10" - браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

Отступление от темы или как убрать отступы по краям страницы

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

В свое время у тега существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

Способ первый. B теге указать атрибут style со следующими значениями:

style= "margin:0" >... - убирает отступы сразу со всех сторон HTML-страницы.

style= "margin:сверху справа снизу слева" >... - регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: style= "margin:5px 3px 4px 5px" >...

Второй и более удобный способ. В теге

Домашнее задание.

В этом уроке я тоже не буду все подробно описывать - только общие моменты. Для полноты картины посмотрите результат примера.

1. Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
2. В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй - левое и правое меню, а также основное содержимое (контент), в третьей - Footer или «подвал» страницы.
3. Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
4. Важно. Используйте тег только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
5. Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
6. Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где - увеличить.

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

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

атрибут border , придав ему значение отличное от нуля.

Итак, давайте сделаем границы для таблицы. Например, для уже имеющейся у нас:

Верхняя левая ячейка	Верхняя правая ячейка
Нижняя левая ячейка	Нижняя правая ячейка

Результат в браузере:

Как убрать границы таблицы

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

Атрибут позволяет создать, но не управлять границами. Он позволяет лишь изменять их толщину.

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

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

Верхняя левая ячейка	Верхняя правая ячейка
Нижняя левая ячейка	Нижняя правая ячейка

Результат в браузере:

Теперь давайте добавим границы и для каждой ячейки. Для этого просто дополним стили:

Результат в браузере:

Как убрать отступы между ячейками в таблице HTML

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

Однако, от таких вот границ, которые именуются двойными, вполне можно избавиться, если использовать CSS-свойство border-collapse. На практике это выглядит вот так:

Table { border: solid 1px blue; border-collapse: collapse; } ...

Как результат - убирается расстояние между ячейками:

Значение collapse, приписанное атрибуту border, позволяет убрать двойные рамки. Как можно увидеть, результатом является "схлопывание" границ ячеек, расположенных рядом, а также рамок ячеек и внешней рамки таблицы. Что касается последней, то она может удалиться и вовсе. И если есть необходимость в ее отображении, необходимо увеличивать ее ширину. Таким образом мы избавились от разделителей в таблице. А в следующем уроке мы поговорим о том, как можно задавать вертикальные и горизонтальные границы. Всем удачи!

или изучаем теги, форматирующие HTML текст

Вашему вниманию представлен один из ключевых и самых простых уроков самоучителя.

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

Смотрите ниже теги, форматирующие HTML текст :

• Теги → жирный HTML текст (жирный шрифт).
• Теги → жирный HTML текст (жирный шрифт).
• Теги → моноширинный HTML текст (моноширинный шрифт).
• Теги → моноширинный HTML текст (моноширинный шрифт).
• Теги → моноширинный HTML текст (моноширинный шрифт).
• Теги → HTML текст , размер больше обычного (крупный шрифт).
• Теги → HTML текст , размер меньше обычного (мелкий шрифт).
• Теги → наклонный HTML текст (наклонный шрифт).
• Теги → наклонный HTML текст (наклонный шрифт).
• Теги → наклонный HTML текст (наклонный шрифт).
• Теги → подчеркнутый HTML текст (подчеркнутый шрифт).
• Теги → зачеркнутый HTML текст (зачеркнутый шрифт).
• Теги → HTML текст (шрифт) в нижнем индексе.
• Теги → HTML текст (шрифт) в верхнем индексе.

HTML форматирование текста: зачеркнутый, подчеркнутый текст

Результат: ... моноширинный шрифт

Результат: ... размер шрифта больше обычного

Результат: ... наклонный шрифт

Результат: зачеркнутый текст (зачеркнутый шрифт)

Результат: верхний индекс

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

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

Блок . Структура простейшей страницы

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

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

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

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

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

Блок . Абзацы

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

Абзац создается с помощью тега

Таким образом:

Это абзац.

Это еще один абзац.

И еще один абзац.

Это абзац.

Это еще один абзац.

И еще один абзац.

Блок . Заголовки h1, h2, h3, h4, h5, h6

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

Заголовки создаются с помощью тегов

,

,

,

,

,

. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы , в h2 - название блоков страницы, в h3 - название подблоков и так далее.

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

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5

Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Так код будет выглядеть в браузере:

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5

Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Блок . Жирный

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

Это обычный текст, а это жирный текст.

Так код будет выглядеть в браузере:

Это обычный текст, а это жирный текст.

следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.

Блок . Курсив

Кроме жирного можно сделать также и курсив с помощью тега :

Это обычный текст, а это курсивный текст.

Так код будет выглядеть в браузере:

Блок . Списки

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

Списки создаются с помощью тега

, внутри которого обязательно должны идти теги
• . Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:
  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

  Так код будет выглядеть в браузере:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

  Списки, созданные через тег ul , называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег

  , а пункты таких списков также создаются через теги li .

  Давайте сделаем упорядоченный список, используя тег ol :

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

  Так код будет выглядеть в браузере:

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

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

  Блок . Ссылки

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

  Ссылка на сайт phphtml.net.

  Так код будет выглядеть в браузере:

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

  Блок . Картинки

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

  Как это работает, посмотрим на следующем примере:

  

  Так код будет выглядеть в браузере:

  Обратите внимание на то, что тег не требует закрывающего тега.

  Блок . Ссылки в виде картинок

  Ссылкой может быть не только текст, но и картинка - для этого достаточно тег вложить в тег , как это сделано в следующем примере. Нажмите на картинку - и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку - нажмите кнопку "назад" в браузере):

  

  Так код будет выглядеть в браузере:

  Блок . Разрыв строки

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

  Давайте убедимся в этом на следующем примере:

  Это первый абзац.

  Это второй абзац.

  Так код будет выглядеть в браузере:

  Это первый абзац.

  Это второй абзац.

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

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

  Давайте посмотрим на его работу на следующем примере:

  Это первая строка текста,
  а это вторая.

  Так код будет выглядеть в браузере:

  Это первая строка текста,
  а это вторая.

  Блок . Комментарии HTML

  Практически во всех языках программирования есть такое понятие как "комментарии".

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

  vs

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

  The frobonitor and barbinator components are fried.

  И лидов (первый абзац статьи в журналистике)

  
  
  Kittens "adopted" by pet rabbit
  
  
  Six abandoned kittens have found an unexpected new mother figure - a pet rabbit.
  
  
  Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.
  
  

  В свою очередь , как и раньше, означает повышенную значимость своего содержимого.

  vs

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

  Per aspera ad Astra — в переводе с латыни изречение означает «Через тернии к звёздам».

  же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)

  Казнить нельзя, помиловать.

  Внимательно читайте договор!

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

  Холивар о

  Раньше был ни чем иным, как зачёркнутый текст. Теперь представляет информацию, которая утратила свою актуальность.
  У нас также есть элемент , результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.
  На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом . Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не ? подразумевает изменения, внесённые в документ (важно то, что в некоторый момент времени документ был изменён ). В нашем же случае, в новом документе уже содержится неактуальная информация.

  Новая семантика и старый доктайп

  Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.