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

Элемент <div> блочный элемент предназначенный для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. В данном случае с помощью <div> я обращаюсь к содержимому <style>, чтобы текст внутри контейнера имел белый цвет.

Атрибуты:

- align - Задает выравнивание содержимого тега <div>;

- title Добавляет всплывающую подсказку к содержимому.

Тег <h1> представляет собой заголовок первого уровня, может быть от 1 – самый крупного и жирного шрифта до 6 – самого мелкого, закрывающий тег в нем обязателен.

Тег <p> определяет текстовый абзац, всегда начинается с новой строки, закрывающий тег не обязателен.

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

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

1.5. Таблицы.

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

Таблица создаётся при помощи парного тега <table></table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него.

Элемент <table> описывает таблиц. Все элементы таблицы находятся в теге table. Закрывающий тег обязателен.

Атрибуты тегов таблицы:

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

Пример:

border=”1”;

align – Определяет выравнивание таблицы по краю окна браузера.

Пример: align=”left”;

valign - Он определяет вертикальное размещение данных в ячейках.

Пример: valign=”top”;

link – задает цвет не посещённых ссылок в контейнере. Цвет задается в данном случае в записывается в виде: link=”ffffff”.Это аддиктивная цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трех цветов: красного, зеленого синего;

width – Задает ширину элемента. Можно указать размер в пикселях экрана, например, width=”900”, а можно в процентах от полной ширины экрана, что полезно в связи тем что экраны бывают разного разрешения, пример width=”50%”;

colspan - Показывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании – 1;

rowspan - Показывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании – 1;

colspec - Параметр позволяющий задавать фиксированную ширину колонок либо в символах, либо в процентах. Пример COLSPEC="20%";

Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>. Закрывающий тег не обязателен.

1.6. Графические элементы.

Одна из полезных возможностей, реализованных в HTML – это возможность вставить ссылку на графические и другие типы данных. За это отвечает тег <img >. Он позволяет улучшить внешний вид и функциональность документов. Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. В форматах JPEG и GIF хорошо передается цветовые и тоновые раскаты, размытые границы, фото. JPEG хорошо масштабируется в браузере, но плохо передает ровные плоскости цвета, в отличии от GIF формата. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>. Alt=” альтернативный текст”, необязательный элемент задающий текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной функцией подгрузки изображения.

Пример: <img src=”url” alt ="альтернативный текст">

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

Атрибуты:

- align - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом;

- alt - Альтернативный текст для изображения;

- border - Толщина рамки вокруг изображения;

- height - Высота изображения;

- hspace - Горизонтальный отступ от изображения до окружающего контента;

- ismap - Говорит браузеру, что картинка является серверной картой-изображением;

- longdesc - Указывает адрес документа, где содержится аннотация к картинке;

- lowsrc - Адрес изображения низкого качества;

- src - Путь к графическому файлу;

- vspace - Вертикальный отступ от изображения до окружающего контента;

- width - Ширина изображения;

- usemap -Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

1.7. Гипертекстовые ссылки.

Гиперссылки – это основа HTML. Именно благодаря им страницы становятся динамичными. Щелкая на гиперссылках, пользователи могут переходить от одной Web-страницы к другой, практически не прилагая для этого никаких усилий.

При создании Web-страницы вам придется решить две непростые задачи: выбрать типы используемых гиперссылок и оптимальным образом построить страницу.

Существуют три основных типа гиперссылок:

- Внутренние ссылки (internal links) – это ссылки на объекты в пределах одного документа. С их помощью пользователь может перемещаться по одной и той же Web-странице. Данный тип ссылок полезно использовать на длинной странице, чтобы иметь возможность быстро перемещаться между ее разделами;

- Внешние (external links) или удаленные (distant links) ссылки – это ссылки на другие Web-серверы;

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

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

Пример простой гиперссылки:

<a href="URL">Название ссылки</a>

HREF - обязательный параметр, определяет или URL или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле HREF содержит имя файла в файловой системе Web-сервера.

Почтовая гиперссылка позволяет создать ссылку на адрес электронной почты.

Пример:

<a href="mailto:e-mail">Текст ссылки</a>

2. Практическая работа.

2.1. Подготовка

Для создания веб-страницы были использованы программы:

Notepad++ - текстовый редактор для написания кода, более функциональный и более наглядно отображает информацию, чем Блокнот.

Есть функция авто-завершения набираемого слова, позволяет работать одновременно с несколькими документами, продвинутая функция поиска/замены.

Adobe Photoshop – графический редактор, с гигантским функционалом. Использовался для редактирования изображения и подбора цвета оформления.

2.2. Создание Web-страницы.

Для примера мной создана страница, которая будет полезен в компании где я работаю, страница – «адресная книга».

Ниже представлен код страницы:

<!DOCTYPE html>

<html >

<head>

<title>Внутренний сайт</title>

<style>

.menu {

padding: 0px; /* Поля вокруг текста */

background: #fff; /* Цвет фона */

}

.menu a {

color: #fff; /* Цвет ссылки */

}

</style>

</head>

<tr>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/index.html"><b>Новости</b></a></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/adresnaya_kniga.html"><b>Адресная Книга</b></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/otdel_kadrov.html"><b>Отдел Кадров</b></a></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="ftp://172.31.1.3/ftpIncoming/"><b>FTP сервер</b></a></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/ssilki.html"><b>Ссылки</b></a></td>

</tr>

</table>

</div>

<td align="center"><h2>Адресная книга</h2></td>

</table>

<tr>

<td>Список сотрудников</td>

<td>999-99-99 Телефон компании</td>

</tr>

</table>

<tr>

<td>ТЕЛЕФОН</td>

</tr>

<tr>

</tr>

<tr>

<td>Акеева Инна Владимировна</td>

<td><a href="mailto:akalaeva@roga">akeeva@roga.com</td>

</tr>

<tr>

<td>Александров Денис Вячеславович</td>

<td><a href="mailto:aleksandrov@roga">aleksandrov@roga.com</td>

</tr>

<tr>

</tr>

<tr>

<td>Балашова Елена Викторовна</td>

<td><a href="mailto:balashova@roga">balashova@roga.com</td>

</tr>

<tr>

<td>Басова Ольга Владимировна</td>

<td><a href="mailto:basova@roga">basova@roga.com</td>

</tr>

<tr>

</tr>

<tr>

<td>Василькина Людмила Вячеславовна</td>

<td><a href="mailto:vasilkina@roga">vasilkina@roga</td>

</tr>

<tr>

<td>Васильченко Елена</td>

<td><a href="mailto:vasilchenko@roga">vasilchenko@roga</td>

</tr>

<tr>

</tr>

<tr>

<td>Ганжа Вероника Сергеевна</td>

<td><a href="mailto:ganzha@roga">ganzha@roga</td>

</tr>

<tr>

<td>Гафаров Азиз Каримович</td>

<td><a href="mailto:gafarov@roga">gafarov@roga</td>

</tr>

<tr>

</tr>

<tr>

<td>Дугин Алексей Алексеевич</td>

<td><a href="mailto:dugin@roga">dugin@roga</td>

</tr>

<tr>

</tr>

<tr>

<td>Елисеев Виктор Генрихович</td>

<td><a href="mailto:eliseev@roga">eliseev@roga</td>

</tr>

<tr>

</tr>

<tr>

<td>Захаров Сергей Михайлович</td>

<td><a href="mailto:zakharov@roga">zakharov@roga</td>

</tr>

<tr>

<td>Зинченко Татьяна Викторовна</td>

<td><a href="mailto:zinchenko@roga">zinchenko@roga</td>

</tr>

<tr>

</tr>

<tr>

<td>Икрами Камол Алимович</td>

<td><a href="mailto:ikrami@roga">ikrami@roga</td>

</tr>

<tr>

<td>Ильин Андрей Алексеевич</td>

</tr>

<tr>

</tr>

<tr>

<td>Казакова Валентина</td>

<td><a href="mailto:kazakova@roga">kazakova@roga</td>

</tr>

<tr>

<td>Какуша Анна Ивановна</td>

<td><a href="mailto:kakusha@roga">kakusha@roga</td>

</tr>

<tr>

</tr>

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

Гипертекстовая разметка,её языки.pdf

Комплексное исследование гражданско-правовой охраны личности граждан.pdf

Понятие,признаки несостоятельности (банкротства).pdf

Признаки несостоятельности (банкротства).pdf

Типы акционерных обществ и особенности их создания.pdf

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

1.5. Таблицы.

1.6. Графические элементы.

1.7. Гипертекстовые ссылки.

2. Практическая работа.

2.1. Подготовка

2.2. Создание Web-страницы.

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

Информация

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

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