Главная Случайная страница


Категории:

ДомЗдоровьеЗоологияИнформатикаИскусствоИскусствоКомпьютерыКулинарияМаркетингМатематикаМедицинаМенеджментОбразованиеПедагогикаПитомцыПрограммированиеПроизводствоПромышленностьПсихологияРазноеРелигияСоциологияСпортСтатистикаТранспортФизикаФилософияФинансыХимияХоббиЭкологияЭкономикаЭлектроника






Можно ли использовать несколько тэгов одновременно?

Да, исключая перекрывание тэгов. Это проще увидеть на примере:

Пример 3:

Если вы хотите вывести текст bold и italic, это нужно сделать так:

 

 

<b><i>Текст bold и italic</i></b>

 

 

а НЕ так :

 

 

<b><i>Текст bold и italic</b></i>

 

 

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

Есть тэги, которые являются одновременно открывающими и закрывающими. Эти тэги содержат команды, которые не связаны с конкретными буквами, являются изолированными командами. Пример - тэг <br />, который создаёт перевод строки:

Пример 4:

 

 

Некоторый текст<br /> и ещё текст, уже на новой строке

 

 

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

Другой такой тэг - <hr /> - рисует горизонтальную линию ("hr" от "horizontal rule"):

Пример 5:

 

 

<hr />

 

 

Примеры тэгов, требующих наличия и закрывающего тэга: <ul>, <ol> и <li>. Эти тэги используются для вывода списков.

<ul> - сокращение от "unordered list/неупорядоченный список" - вставляет значок кнопки для каждого элемента списка. <ol> - сокращение от "ordered list/упорядоченный список" - нумерует каждый элемент списка. Для создания элемента списка используйте тэг <li> ("list item/элемент списка"). Непонятно? См. примеры:

Пример 7:

 

 

<ul>

<li>Элемент списка</li>

<li>Другой элемент списка</li>

</ul>

 

 

Пример 8:

 

 

<ol>

<li>Первый элемент списка</li>

<li>Второй элемент списка</li>

</ol>

 

Экспериментируйте и создавайте ваши собственные страницы с новыми тэгами, изученными на этом уроке:

 

 

<i>Italic</i>

<small>Уменьшенный шрифт</small>

<br /> перевод строки

<hr /> Горизонтальная линия

<ul>Список</ul>

<ol>Упорядоченный список</ol>

<li>Элемент списка</li>

 

 

1.2 АТРИБУТЫ ТЕГОВ

Вы можете назначать атрибуты во многих тэгах.

Тэги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут".

Пример 1:

 

<h2 align=”center”>Мой друг HTML</h2>

 

Атрибуты всегда записываются внутри тэга, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки.

 

1.3 ССЫЛКИ HTML

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

Что необходимо для создания ссылки?

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

Пример 1:

 

<a href="http://www.html.ru/">Это ссылка</a>

 

Элемент a обозначает "якорь/anchor". Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфицирующий место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

В примере атрибут href имеет значение "http://www.html.ru", которое является полным адресом Html.ru и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что"http://" всегда должно входить в состав URLов. Слова "Это ссылка на Html.ru" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг </a>.

Как насчёт ссылок между моими собственными страницами?

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

Пример 2:

 

<a href="page2.htm">Щёлкните здесь для перехода на page 2</a>

 

Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:

Пример 3:

 

<a href="subfolder/page2.htm">Щёлкните здесь для перехода на page 2</a>

 

В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:

Пример 4:

 

<a href="../page1.htm">Ссылка на page 1</a>

 

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

Альтернативно вы всегда можете указать полный адрес файла (URL).

А ссылки внутри страницы?

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

Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

 

<h1 id="heading1">heading 1</h1>

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

 

<a href="#heading1">Ссылка на heading 1</a>

 

Всё станет понятнее на примере:

Пример 5:

 

<html> <head> </head> <body> <p><a href="#heading1">Ссылка на heading 1</a></p> <p><a href="#heading2">Ссылка на heading 2</a></p> <h1 id="heading1">heading 1</h1> <p>Text text text text</p> <h1 id="heading2">heading 2</h1> <p>Text text text text</p> </body> </html>

 

Могу я перейти ещё куда-нибудь?

Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:

Пример 6:

 

Ссылка на <a href="mailto:[email protected]">Отправить e-mail nobody на Html.ru</a>

 

Есть ещё какие-нибудь другие атрибуты, которые мне нужно знать?

Для создания ссылки вы обязательно должны использовать атрибут href. Кроме того, в ссылку можно поместить title:

Пример 7:

 

<a href="http://www.html.ru/" title="изучайте HTML">HTML</a>

 

Атрибут title используется для краткого описания ссылки. Если вы - не щёлкая мышью - поместите её указатель над ссылкой, вы увидите, как появится текст "изучайте HTML".

1.4 ИЗОБРАЖЕНИЯ В HTML

Для встраивания изображения в документ используется тег <IMG>, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.

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

Рассмотрим несколько указаний пути к рисунку для размещения его на веб-странице.

Если в начале адреса стоит слэш (символ /), то отсчет идет от корня сайта. Например, адрес сайта — http://site.ru означает, что написав путь к изображению как /images/bird.jpg, мы, тем самым говорим серверу показать в браузере файл http://site.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.

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

Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне.

Пример 1: Вставка изображения в документ

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="http://www.htmlbook.ru/images/sample.gif"> - абсолютный адрес размещения изображения
<img src="/images/sample.gif"> - адрес размещения изображения относительно корня сайта
<img src="images/sample.gif"> - адрес размещения изображения относительно текущего HTML-документа
</body>
</html>

 

Размеры изображения

Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG>. В качестве значений используется пиксел — элементарная точка на мониторе.

Пример 1: Размеры изображения

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100">
</body>
</html>

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

Рамка вокруг изображения

Вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста на веб-странице. Для этого служит параметр border тега <IMG> (пример 9.4). В качестве значения указывается толщина рамки в пикселах.

Пример 1. Добавление рамки вокруг изображения

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" height="111" width="100" border="1">
</body>
</html>

 

Поля вокруг изображения

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

Пример 2. Добавление отступов вокруг изображения

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" width="50" hspace="10" vspace="10">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>

 

Выравнивание изображения

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега <IMG>.

Наиболее популярные параметры — left и right, создающие обтекание вокруг изображения.

Пример 1. Обтекание текста вокруг рисунка

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=Windows-1251" http-equiv="content-type">
</head>
<body>
<img src="sample.gif" align="left" height="50" hspace="10" vspace="10" width="50">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>
</html>

 

1.5 ТАБЛИЦЫ HTML

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

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

Для добавления таблицы на веб-страницу используется тег <TABLE>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <TR> и <TD> соответственно. Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега <TD> использовать тег <TH>. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. В остальном, разницы между ячейками, созданными через теги <TD> и <TH>, нет.

Пример 1. Создание таблицы

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>

<table border="1" width="100%" cellpadding="5">
<tr>
<th>Ячейка 1</th>
<th>Ячейка 2</th>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

</body>
</html>

 

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

 

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

 

Ячейки формируются по строкам, вначале указывается первая строка, затем вторая и т.д.

Параметры таблиц

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию параметров тегов <TABLE>, <TR> и <TD>. Далее перечислены параметры тега <TABLE>.

ALIGN

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left выравнивание таблицы по левому краю, center по центру и right по правому краю.

BGCOLOR

Устанавливает цвет фона таблицы.

BORDER

Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется. Когда в теге <TABLE>используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.

BORDERCOLOR

Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.

CELLPADDING

Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без параметра cellpadding текст в таблице ?налипает? на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

CELLSPACING

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

HEIGHT

Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если он установлен у тега <TABLE>. Если высота таблицы не указана, то берется суммарное значение параметра height у тега <TD>, в противном случае высота вычисляется на основе содержимого таблицы.

WIDTH

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

Параметры ячеек

Каждая ячейка таблицы, задаваемая через тег <TD>, в свою очередь тоже имеет свои параметры, часть из которых совпадает с параметрами тега <TABLE>.

ALIGN

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left ? выравнивание по левому краю, center ? по центру и right ? по правому краю.

BGCOLOR

Устанавливает цвет фона ячейки. Используя этот параметр совместно с атрибутом bgcolor тега<TABLE> можно получить разнообразные эффекты в таблице.

BORDERCOLOR

Устанавливает цвет рамки вокруг ячейки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.

COLSPAN

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

 

Ячейка 1
Ячейка 2 Ячейка 3

 

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

HEIGHT

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

NOWRAP

Добавление параметра nowrap к тегу <TD> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

ROWSPAN

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

 

Ячейка 1 Ячейка 2
Ячейка 3

 

В данной таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью параметра rowspan.

VALIGN

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

WIDTH

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

Особенности таблиц

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

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

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

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

Рамка таблицы, в случае добавления параметра border к тегу <TABLE>, изначально отображается как трехмерная. Присоединение параметра bordercolor превращает рамку в однотонную, ликвидируя тем самым эффект трехмерности.

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

 


 

2 ВВЕДЕНИЕ В CSS

Каскадные таблицы стилей / Cascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших web-сайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов. CSS совершенно необходим каждому, работающему с web-дизайном.

2.1 ЧТО ТАКОЕ CSS

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

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет большие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

 

Последнее изменение этой страницы: 2016-07-23

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