3 урок:
- Ссылки
- Относительный адрес
- Абсолютный адрес
- Открытие ссылки в новом окне браузера
- Создание якоря (метки)
- Ссылка на почтовый ящик
- Ссылка картинка
- тег NAV
- тег SPAN
- Таблицы в HTML
Ссылки HTML
В интернете размещены миллионы электронных документов часто схожих по тематике и ориентированных на одну и ту же пользовательскую аудиторию. Переход на другие документы казался бы делом трудным и утомительным, если бы не было возможности связывания HTML-документов между собой с помощью гипертекстовых ссылок.
По сути, любая гипертекстовая ссылка является указателем адреса в глобальной сети, по которому можно моментально перейти в окне браузера. Успешный переход по ссылке возможен в двух случаях: если документ, на который ссылается документ, существует, и если синтаксис гиперссылки верен с точки зрения HTML.
Синтаксис
Для создания ссылок в HTML-документах используется элемент <a>, его содержимое выступает в качестве метки, с помощью которой и будет производится переход. Для того, чтобы из элемента <a> сделать активную гиперссылку, нужно добавить к нему атрибут href.
Атрибут href в качестве своего значения содержит адрес (относительный или абсолютный), на который будет вести ссылка. При щелчке на ссылку браузер получает и отображает документ, адрес которого указан в атрибуте href.
<html>
<body>
<p><a href="page.html">Ссылка</a></p>
<p><a href="httр://www.manuscript.kz">Ссылка</a> на страничку в и-нете.</p>
</body>
</html>
Результат данного примера в окне браузера:
Относительный адрес
Относительный адрес означает, что указание пути на нужный файл или страницу вашего сайта начинается относительно страницы, на которой расположена ссылка, либо относительно корневого каталога сайта. Рассмотрим компоненты (части), из которых может состоять относительный путь:
| Части пути | Описание | Примеры значений |
|---|---|---|
| имя_файла | Если в качестве значения атрибута указать только имя файла это значит, что нужный файл находится в той же папке, где и страница со ссылкой. | «page.html» |
| каталог/ | Если файл, к которому нужно указать путь, расположен в дочернем каталоге относительно файла с ссылкой, это означает, что нам надо спуститься на один уровень вниз (в дочернюю папку текущего каталога), в этом случае путь начинается с указания имени дочернего каталога, после его имени указывается прямой слэш «/», он служит для разделения частей пути, после него указывается имя нужного нам файла.
Примечание: опуститься можно ровно на столько папок вниз, сколько вы их создали. К примеру, если вы создали папку на 10 уровней ниже корневой, то можете указать путь, который приведет вас вниз на 10 папок. Однако, если у вас так много уровней, это, скорее всего, означает, что организация вашего сайта излишне неудобно составлена. |
«каталог/page.html»
«каталог1/каталог2/page.html» |
| ../ | Если нужно указать, что файл, на который вы ссылаетесь, находится в родительской папке, используйте символы .. (две точки), они означают подняться на один уровень вверх (в родительскую папку текущего каталога). Далее мы указываем прямой слэш «/», чтобы разделить части пути, и пишем имя нашего файла.
Примечание: символы .. можно использовать сколько угодно раз подряд, используя их, вы поднимаетесь каждый раз на одну папку вверх. Однако, подниматься вверх можно до тех пор, пока не придете в корневую папку своего сайта. Выше этой папки подняться нельзя. |
«../page.html»
«../../page.html» «../../../кат1/кат2/page.html» — поднимаемся из текущей папки на три каталога выше и уже из него спускаемся на два уровня ниже к требуемому файлу |
| / | Относительный путь не обязательно всегда должен начинаться относительно текущего расположения страницы со ссылкой, он также может начинаться относительно корневого каталога сайта. К примеру, если нужный файл находится в корневом каталоге, путь может начинаться с символа «/», после которого надо всего лишь указать имя нужного файла, который расположен в корневом каталоге.
Примечание: когда символ «/» указывается первым, это означает начало пути от корневого каталога. |
«/page.html»
«/кат1/кат2/car.png» |
Абсолютный адрес
Абсолютный адрес обычно применяется для указания пути к файлу, который расположен на другом сетевом ресурсе. Он представляет из себя полный URL-адрес к файлу или странице. Первым делом в адресе указывается используемый протокол, после которого идет название домена (имя сайта). Например: http://www.пример.ру — так выглядит абсолютный путь к конкретному веб-сайту. http:// — это протокол передачи данных, а www.пример.ру — имя сайта (домен).
Абсолютный адрес можно использовать и на собственном сайте. Однако внутри сайта рекомендуется использовать в качестве значения ссылок относительный путь.
Теперь давайте рассмотрим, что такое URL-адрес. Каждая веб-страница в сети Интернет имеет свой собственный уникальный адрес, вот он как раз и называется URL. Аббревиатура URLрасшифровывается как Uniform Resource Locator (унифицированный адрес ресурса), проще говоря URL — это определитель местонахождения ресурса. Этот способ записи адреса стандартизирован в сети Интернет.
Пара примеров URL адресов:
"httр://www.manuscript.kz/"
"httр://www.manuscript.kz/html/u1.php"
Открытие ссылки в новом окне браузера
Для того чтобы страница, на которую ведет ссылка, открывалась в новом окне, нужно будет сообщить браузеру имя окна, в котором нужно открыть страницу. Если вы не указываете браузеру использовать какое-то определенное окно, то он откроет страницу в текущем окне.
Для указания браузеру, что при открытие страницы нужно использовать другое окно, вместо текущего, добавьте в элемент <a> атрибут target. Его значение сообщает браузеру о целевом окне для страницы. Если в качестве значения атрибута target вы используете _blank, то браузер для каждой новой страницы всегда будет открывать новое окно.
Попробуйте сами:
<html>
<body>
<p><a href="mypage.html" target="_blank">Другая страница</a>.
Если вы установите для атрибута target значение _blank,
то ссылка откроется в новом окне.
</p>
</body>
</html>
В таблице приведены все доступные значения для атрибута target.
| Значение | Описание |
|---|---|
| _blank | Открывает документ в новом окне. |
| _self | Открывает документ в том же окне, где была нажата ссылка (значение по умолчанию). |
| _parent | Открывает документ в родительском окне. |
| _top | Открывает документ на весь экран. |
| имя_фрейма | Открывает документ в указанном фрейме. |
Создание якоря (метки)
До сих пор всегда, когда вы создавали ссылки, то, переходя по ним на другую страницу, она загружалась, и браузер отображал ее с самого верха, но что, если вам нужно при переходе сразу видеть определенный раздел страницы вместо шапки сайта, в этом случае нужно просто воспользоваться якорем.
Для начала вам нужно определиться с местом, это может быть любой текст на странице, но чаще всего применяется короткий фрагмент текста заголовка. Затем нужно заключить этот текст внутрь элемента <a>, добавить к нему глобальный атрибут id, выбрать идентификационное имя для этого фрагмента и это имя записать в качестве значения в атрибут id:
<h2><a id="end">Заключение</a>.</h2>
Итак, наш якорь готов, теперь осталось сослаться на него, для этого просто добавьте символ «#» в конец вашей ссылки, за которым укажите идентификационное имя вашего якоря:
|
1
|
<a href="other.html#end">Заключение</a> |
Основная польза от якорей в том, что с их помощью можно ссылаться на отдельные части длинных страниц, чтобы пользователю не приходилось проcматривать весь файл в поисках нужного раздела.
Примечание: если якорь находится на одной странице с ведущей на него ссылкой, то имя документа в атрибуте href можно опустить, написав только идентификатор.
Ссылка на почтовый ящик
В создании ссылки на электронную почту нет ничего сложного, нужно просто в значении атрибута href ввести ключевое слово mailto, поставить после него двоеточие и написать адрес электронной почты, на который хотите сослаться:
Попробуйте сами:
<html>
<body>
<p>
Это ссылка на почту:
<a href="mailto:someone@someone.ru">моя почта</a>
</p>
</body>
</html>
Такая ссылка ничем не будет отличаться от остальных ссылок вашего документа. Только вместо другой страницы при нажатии на такую ссылку откроется установленная у вас по умолчанию программа почты.
Ссылка картинка
Вы наверное не раз замечали, что на многих сайтах в качестве ссылок используются различные изображения, которые по принципу работы ничем не отличаются от текстовых ссылок. Для того чтобы заменить обычную текстовую ссылку на изображение, нужно внутрь элемента <a> поместитьтег <img>, который указывает путь к изображению.
Попробуйте сами:
<html>
<body>
<p>Посетите наш сайт, кликнув по картинке:
<a href="httр://www.manuscript.kz">
<img src="logo.png" alt="ссылка" width="100" height="78">
</a>
</p>
</body>
</html>
Тег <NAV>
Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.
Синтаксис
<nav>ссылки</nav>
Тег SPAN
Описание
Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Синтаксис
<span>...</span>
Закрывающий тег обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SPAN</title>
<style>
body {
font-family: Arial, sans-serif; /* Рубленый шрифт */ }
.letter {
color: red; /* Красный цвет символов */
font-size: 200%; /* Размер шрифта в процентах */
font-family: serif; /* Шрифт с засечками */
position: relative; /* Относительное позиционирование */
top: 5px; /* Сдвиг сверху */ }
</style>
</head>
<body>
<p><span class="letter">Р</span>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей.</p>
<p>Бернард Шоу</p>
</body>
</html>
HTML таблицы
Таблица — набор данных, распределенных по строкам и ячейкам. В большинстве ячеек размещаются табличные данные, остальные содержат заголовки для строк и столбцов, описывающие содержимое.
Синтаксис
Для создания таблицы в HTML-документе используется тег <table>, он представляет собой контейнер, в котором находится все содержимое таблицы.
Создание таблицы всегда начинается со строк, которые определяются с помощью тега <tr>, каждая строка, в свою очередь, состоит из ячеек. Тег <tr> может содержать в себе только теги для создания ячеек.
В HTML существует два разных тега для создания ячеек, первым из них является <td>, он создает обычные ячейки с данными. Второй вид — это тег <th>, он позволяет определять ячейки, которые содержат заголовки для столбцов или строк, содержимое таких ячеек отображается жирным начертанием и выравнивается по центру. Теги <td> и <th> могут включать в себя любые HTML-элементы, которые доступны для использования в теле документа.
Примечание: количество столбцов в вашей таблице будет равно количеству ячеек с данными в каждой строке.
<html>
<body>
<table border="1">
<tr><th>Первый заголовок</th><th>Второй заголовок</th></tr>
<tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
<tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>
</body>
</html>
Результат
Рамка таблицы
Тег <table> может иметь необязательный атрибут border, управляющий границами таблицы. По умолчанию браузеры не отображают рамку вокруг таблицы и ячеек, но присутствие атрибута border, указывает браузеру, что у таблицы должна быть рамка.
По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек «»). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться.
<html>
<body>
<h4>Таблица с нормальной рамкой:</h4>
<table border="1">
<tr><td>Первая</td><td>строка</td></tr>
<tr><td>Вторая</td><td>строка</td></tr>
</table>
<h4>Таблица без рамки:</h4>
<table>
<tr><td>Первая</td><td>строка</td></tr>
<tr><td>Вторая</td><td>строка</td></tr>
</table>
</body>
</html>
Результат
Если вам не нравится вид рамки у таблицы, заданный по умолчанию, т.е. двойные рамки, вы можете воспользоваться атрибутом style, прописав в нем свойство «border-collapse: collapse;», это придаст обычный вид рамке для таблицы.
<html>
<body>
<table border="1" style="border-collapse: collapse;">
<tr><td>ячейка 1</td><td>ячейка 2</td></tr>
<tr><td>ячейка 3</td><td>ячейка 4</td></tr>
</table>
</body>
</html>
Результат
Заголовок
У всех таблиц обычно бывает заголовок, описывающий ее содержимое. Для создания заголовка таблицы используется тег <caption>, обычно он размещается сразу после открывающего тега <table>, но также он может располагаться практически в любом месте внутри таблицы между элементами строк.
<html>
<body>
<table border="1">
<caption>Моя первая таблица</caption>
<tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
<tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
</table>
</body>
</html>
Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега <caption> отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side.
Объединение столбцов или строк
Смежные ячейки в таблице могут объединяться с целью размещения большего объема данных. Например, в таблице из четырех строк и четырех столбцов все ячейки в первой строке можно объединить и поместить в этой строке красивый заголовок. Возможно также объединение нескольких строк или столбцов.
Для объединения смежных ячеек в строке таблицы используется атрибут colspan, в значении задается число ячеек в строке, которое вы хотите объединить.
Для объединения смежных ячеек в столбце таблицы используется атрибут rowspan, в значении задается число ячеек столбца, которое вы хотите объединить.
<html>
<body>
<h4>Объединим две ячейки в строке таблицы:</h4>
<table border="1">
<tr>
<th>Имя</th><th colspan="2">Телефон</th>
</tr>
<tr>
<td>Петя Иванов</td><td>123 45 67</td><td>234 56 78</td>
</tr>
</table>
<h4>Объединим две ячейки в столбце таблицы:</h4>
<table border="1">
<tr>
<th>Имя</th><td>Петя Иванов</td>
</tr>
<tr>
<th rowspan="2">Телефон</th><td>123 45 67</td>
</tr>
<tr><td>234 56 78</td></tr>
</table>
</body>
</html>
Вложенные элементы внутри таблицы
Как мы уже писали раньше, ячейки таблицы могут включать в себя любые HTML-элементы, даже элемент <table>, то есть существует возможность создания вложенных таблиц.
<html>
<body>
<table border="1">
<tr>
<td><p>Абзац.</p><p>Другой абзац.</p></td>
<td>В этой ячейке разместим таблицу:
<table border="1">
<tr><td>А</td><td>Б</td></tr>
<tr><td>В</td><td>Г</td></tr>
</table>
</td>
</tr>
<tr>
<td><a href="httр://www.puzzleweb.ru"> Ссылка </a></td><td>ПРИВЕТ!</td>
</tr>
</table>
</body>
</html>
Теги таблицы
| Тег | Описание |
|---|---|
| <table> | Создает таблицу. |
| <th> | Создает заголовочную ячейку в таблице. |
| <tr> | Создает строку в таблице. |
| <td> | Создает ячейку таблицы. |
| <caption> | Определяет заголовок для таблицы. |
| <colgroup> | Определяет одну или несколько колонок в таблице для форматирования. |
| <col> | Используется в таблице, определяет свойства для каждой колонки внутри элемента colgroup. |
| <thead> | Группирует заголовочные ячейки таблицы. |
| <tbody> | Группирует основное содержимое в таблице. |
| <tfoot> | Определяет нижнюю часть таблицы. |
Заключение:
- Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или hrefтег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис
<a href="URL">...</a><a name="идентификатор">...</a>
Атрибуты
Title — Добавляет всплывающую подсказку к тексту ссылки.
Href — Задает адрес документа, на который следует перейти.
- Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.
<nav>ссылки</nav>
- С помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста.
- Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы:
Теги таблицы
Тег Описание <table> Создает таблицу. <th> Создает заголовочную ячейку в таблице. <tr> Создает строку в таблице. <td> Создает ячейку таблицы. <caption> Определяет заголовок для таблицы. <colgroup> Определяет одну или несколько колонок в таблице для форматирования. <col> Используется в таблице, определяет свойства для каждой колонки внутри элемента colgroup. <thead> Группирует заголовочные ячейки таблицы. <tbody> Группирует основное содержимое в таблице. <tfoot> Определяет нижнюю часть таблицы. Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
<table border="1"> <caption>Моя первая таблица</caption> <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr> <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr> </table>
Для объединения смежных ячеек в строке таблицы используется атрибут colspan, в значении задается число ячеек в строке, которое вы хотите объединить.
Для объединения смежных ячеек в столбце таблицы используется атрибут rowspan, в значении задается число ячеек столбца, которое вы хотите объединить.
Онлайн сайты по генерации стилей.
http://www.colorzilla.com/gradient-editor/
http://www.csstablegenerator.com/
http://html-generator.weebly.com/css-table-generator.html
http://www.textfixer.com/tutorials/css-tables.php