Файл: Основы программирования на языке HTML. (История появления HTML).pdf

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

<OL>

<LI>элемент

</OL>

Третим видом списка является список терминов. Он очень удобен для оформления всевозможных

глоссариев. Оформить такой список можно с помощью

блока

<DL>

<DT>Термин1<DD>Описание1

<DT>Термин2<DD>Описание2

</DL>

4. Таблицы

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

Нарисуем таблицу:

Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и

столбцов, для этого есть ещё два тега:

<tr> - строка таблицы

<td> - столбец таблицы

Вместе эти теги пишутся так:

<table>

<tr>

<td>ячейка</td>

</tr>

</table>

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

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

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td>строка1 ячейка1 </td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1 </td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1 </td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</body>

</html>

Объединение ячеек.

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

Эту задачу решают атрибуты colspan и rowspan.

 colspan - определяет какое количество столбцов будет занимать данная ячейка

 rowspan - количество рядов занимаемое ячейкой

Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибуту colspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место.

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td colspan="2">строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</body>

</html>

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

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

Исправленный пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td colspan="2">строка3 ячейка2</td>

</tr>

</table>

</body>

</html>

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

rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и сразу уберём лишнее.

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td rowspan="3">строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td colspan="2">строка3 ячейка2</td>

</tr>

</table>

</body>

Размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом. Атрибут width - ширина и height - высота, которые мы использовали для растягивания рисунков, так же применимы к тегам <table>, <tr> и <td>. Приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center>

Пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<tr>

<td rowspan="3" width="150">строка1 ячейка1</td>

<td height="30">строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td height="30">строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td colspan="2" >строка3 ячейка2</td>

</tr>

</table>

</center>

</body>

</html>

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

Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах

Вот пример:

<html>

<head>

<title>Таблица</title>

</head>

<body>

<td width="15%"> строка1 ячейка1</td>

<td width="25%">строка1 ячейка2</td>

<td width="60%">строка1 ячейка3</td>

</tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<td>строка3 ячейка1</td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

</center>

</body>

</html>

В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а половину места второй. Главное, чтобы в сумме было 100%.

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

Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определённых элементов.

Например, есть два абзаца (первый в зелёной рамке) и таблица:

<P style = “border: 3px solid green”> Текст абзаца 1</p>

<P> Текст абзаца 2 </p>

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

Можно использовать другой код:

<P style = “border: 3px solid green “>Текст абзаца 1

<P> текст абзаца 2</p>

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

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

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

Некоторые элементы не имеют конечного тега. Элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом и без него. Элемент абзаца P может иметь конечный тег , но если тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент P, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и др.

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

Списки

Списки в HTML бывают трех типов: ненумерованные, нумерованные и так называемые списки терминов. Ненумерованный список оформляется с помощью блока

<UL>

<LI>элемент

<LI> элемент

</UL>

<OL>

<LI>элемент

</OL>

5. Необходимая информация.

Существующие уровни заголовков.

В самом деле их шесть: от <h1> до <h6>. Браузер обычно отображает их, различая благодаря последовательному уменьшению размера шрифта. Но до тех пор, пока вы не начнете создавать большие и сложные документы, вы вряд ли будете использовать заголовки дальше <hЗ>.

Почему необходим тег <html>.

Тег <html> говорит браузеру, что ваш документ действительно является НТМL- документом. В то время как одни браузеры не обратят внимания на то, что вы опустите этот тег, другие вам это не пропустят. Использование этого тега действительно важно.

Что делает файл НТМL-файлом.

По своей сути НТМL-файл- это обычный текстовый файл. В отличие от файлов специальных текстовых редакторов, он неимеет возможности форматирования. Обычно в конце имени файла добавляется .html или.htm (в системах, которые помещают только три буквы в расширении файла), чтобы система определила тип файла. Действительно имеет значение лишь содержимое файла.

Способ вставлять комментарии в НТМL-код.

Если поместить свои комментарии между символами , то браузер их просто проигнорирует. Например, чтобы написать комментарий «Это начало нашей гостевой)), нужно сделать так: <•-- Это начало нашей гостевой --> Обратите внимание, что комментарий может

быть написан в несколько строк. Помните, что все написанное между , даже НТМL-код, будет проигнорировано браузером.

Рассмотрим НТМL-код для гостевой Head First:

<html> - говорит браузеру что это начало НТМL кода.

<head> - начинается название веб страницы (элемент-контейнер для метаданных).

<titlе> - начинается заголовок страницы.

</head> - Конец заголовка

<Ьоdу> - начинается основная часть страницы (содержимое, не относящееся к метаданным документа).

<hl> - Добро пожаловать в гостевую Head First</hl> - говорит браузеру, что это заглавие

<img src="drinks.gif"> - добавляет изображение

<р> - начинается абзац

Заходите к нам каждый вечер, чтобы попробовать

освежающие эликсиры, поболтать и, возможно,

<еm>станцевать разок-другой</еm>.

Всегда обеспечен беспроводной доступ

(захватите с собой свой ноутбук) . – используется курсивный шрифт для предложения потанцевать

</р> - заканчивается абзац

-<h2>Указатели</h2> - говорит браузеру, что это подзаголовок.

<р> - начинается новый абзац.

Вы найдете нас в самом центре Webville.

Присоединяйтесь к нам!

</р> - заканчивается абзац

</body> - заканчивается основная часть страницы

</html> - говорит браузеру, что этом конец НТМL кода

. 6. Список HTML-элементов

Тег	Описание
<!--...-->	Используется для добавления комментариев.
<!DOCTYPE>	Объявляет тип документа и предоставляет основную информацию для браузера - его язык и версия.
<a>	Создаёт гипертекстовые ссылки.
<abbr>	Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address>	Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>	Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article>	Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>	Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>	Загружает звуковой контент на веб-страницу.
<b>	Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>	Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>	Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>	Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote>	Выделяет текст как цитату, применяется для описания больших цитат.
<body>	Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>	Перенос текста на новую строку.
<button>	Создает интерактивную кнопку. Внутрь тега можно поместить содержимое - текст или изображение.
<canvas>	Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>	Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite>	Используется для указания источника цитирования. Отображается курсивом.
<code>	Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col>	Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data>	Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist>	Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd>	Используется для описания термина из тега <dt>.
<del>	Помечает текст как удаленный, перечёркивая его.
<details>	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn>	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog>	Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div>	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl>	Тег-контейнер, внутри которого находятся термин и его описание.
<dt>	Используется для задания термина.
<em>	Выделяет важные фрагменты текста, отображая их курсивом.
<embed>	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>	Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>	Заголовок/подпись для элемента <figure>.
<figure>	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>	Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h1-h6>	Создают заголовки шести уровней для связанных с ними разделов.
<head>	Элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>.
<header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>	Горизонтальная линия для тематического разделения параграфов.
<html>	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i>	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>	Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input>	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<label>	Добавляет текстовую метку для элемента <input>.
<legend>	Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>.
<li>	Элемент маркированного или нумерованного списка.
<link>	Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<main>	Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>.
<map>	Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark>	Выделяет фрагменты текста, помечая их желтым фоном.
<meta>	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter>	Индикатор измерения в заданном диапазоне.
<nav>	Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>	Определяет секцию, не поддерживающую сценарий (скрипт).
<object>	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol>	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>	Контейнер с заголовком для группы элементов <option>.
<option>	Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output>	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>	Параграфы в тексте.
<param>	Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture>	Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre>	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>	Индикатор выполнения задачи любого рода.
<q>	Определяет краткую цитату.
<ruby>	Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>	Определяет вложенный в него текст как базовый компонент аннотации.
<rt>	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc>	Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>	Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script>	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section>	Определяет логическую область (раздел) страницы, обычно с заголовком.
<select>	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small>	Отображает текст шрифтом меньшего размера.
<source>	Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span>	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>	Расставляет акценты в тексте, выделяя полужирным.
<style>	Подключает встраиваемые таблицы стилей.
<sub>	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>	Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>	Задает надстрочное написание символов.
<table>	Тег для создания таблицы.
<tbody>	Определяет тело таблицы.
<td>	Создает ячейку таблицы.
<template>	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea>	Создает большие поля для ввода текста.
<tfoot>	Определяет нижний колонтитул таблицы.
<th>	Создает заголовок ячейки таблицы.
<thead>	Определяет заголовок таблицы.
<time>	Определяет дату/время.
<title>	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr>	Создает строку таблицы.
<track>	Добавляет субтитры для элементов <audio> и <video>.
<u>	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul>	Создает маркированный список.
<var>	Выделяет переменные из программ, отображая их курсивом.
<video>	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr>	Указывает браузеру возможное место разрыва длинной строки.

Смотрите также файлы

Основные направления реформирования местного самоуправления в Российской Федерации.pdf

Современные проблемы семейного воспитания (Особенности семьи как малой социальной группы).pdf

Особенности управления женщинами и мужчинами.pdf

«Политика мотивации персонала в системе стратегического управления кадровым направлением деятельности организации».pdf

Сущность и формы проявления инфляции ( Сущность и формы проявления инфляции).pdf

Файл: Основы программирования на языке HTML. (История появления HTML).pdf

4. Таблицы

5. Необходимая информация.

. 6. Список HTML-элементов

Смотрите также файлы

Информация

Списки файлов

Дополнительно