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

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

Для вставки изображений (картинки) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега):

<IМG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

6. Списки HTML

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

<UL> <LI> </uI>

Самым распространенным является ненумерованный список (unordered list). Он представлен ниже:

<UI>
<Ll> Пункт 1 списка
<Ll> Пункт 2 списка
<Ll> Пункт 3 списка
</uI>

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

7. Адреса в HTML

Абсолютный и относительный пути

Описание относительных и абсолютных путей в HTML.

Адреса в HTML могут указывать путь: на сайт, страницу сайта или файл расположенный на сайте. Обычно адрес HTML выступает в качестве значений у атрибутов, тега a (ссылки) или img (изображения):
<a href="http://имя_Сайта"> — адрес сайта,
<a href="http://имя_Сайта/stranitsa.html"> — адрес страницы сайта,
<img src="http://имя_Сайта/file.jpg"> — адрес файла изображения расположенного на сайте.

Где в качестве имя_Сайта, выступает название сайта, например comp-doma.ru

Адреса в языке HTML бывают трёх видов:

1. Адрес сайта,

2. Абсолютный адрес (абсолютный путь к странице или файлу),

3. Относительный адрес (относительный путь к странице или файлу).

Адрес сайта

Адрес сайта в HTML это просто имя сайта c приставкой http://, например:

http://ya.ru — Яндекс

http://google.ru — Гугл

http://vk.com — Вконтакте и т.д.

Абсолютный адрес

Абсолютный адрес — это абсолютный путь к странице или файлу. Абсолютный адрес начинается с адреса сайта, на котором находится страница или файл.

Примеры абсолютных адресов (абсолютных путей):

<a href="http://имя_Сайта/about.html"> — абсолютный адрес страницы about.html, сайта имя_Сайта

<a href="http://имя_Сайта/service/online.html"> — абсолютный адрес страницы online.html, находящейся в папке service, сайта имя_Сайта

<a href="http://имя_Сайта/product/soft/editor.html"> — абсолютный адрес страницы editor.html, находящейся в папке soft, сама папка soft находится в папке product, сайта имя_Сайта

Точкой отсчета абсолютного адреса является адрес сайта, на котором расположена страница или файл.

Относительный адрес

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

Допустим в папке product находится страница list.html, её абсолютный адрес выглядит следующим образом:

http://имя_Сайта/product/list.html — страница list.html расположена в папке product

Есть еще одна страница, чей абсолютный адрес выглядит следующим образом:

http://имя_Сайта/about.html — страница about.html находится в корне (на одном уровне с главным файлом index.html) сайта.

На странице list.html нужно поставить ссылку, которая будет ссылаться на страницу about.html находящуюся на том же сайте. Сослаться на неё можно двумя способами:

1. <a href="http://имя_Сайта/about.html"> — используя абсолютный путь,

2. <a href="../about.html"> — используя относительный путь.

Символ ../ означает, что нужно подняться на одну папку вверх (на один уровень),

Символ ../../ означает, что нужно подняться на две папки вверх (на два уровня).

Если страница list.html тоже будет находится в корне сайта:

http://имя_Сайта/list.html, то для того чтобы сослаться на страницу about.html, нужно будет в HTML-документе list.html прописать следующий код:

<a href="about.html"> — относительный путь.

Далее, если страница list.html будет находится в папке soft:

http://имСайта/product/soft/list.html, то для того чтобы сослаться на страницу about.html, нужно будет в HTML-документ файла list.html прописать следующий код:

<a href="../../about.html"> — т.е. два раза подняться вверх по папкам.

Чтобы сослаться на страницу online.html, которая находится по адресу:

http://имя_Сайта/service/online.html, нужно в HTML-документе файла list.html, который находится по адресу:

http://имя_Сайта/product/soft/list.html, прописать следующий код:

<a href="../../service/online.html"> — два раза подняться вверх по папкам, затем "зайти" в папку service и написать имя файла online.html

Точкой отсчета относительного адреса является то место, где находится ссылающаяся страница.

Также, в качестве точки отсчета относительного адреса может выступать корень сайта /, пример:

<a href="/about.html">

<a href="/service/online.html">

Разница между абсолютным и относительным путями

Рассмотрим различия между абсолютным и относительным путями:

Точка отсчета абсолютного адреса начинается с адреса сайта, точка отсчета относительного адреса начинается с места где находится страница, которая хочет сослаться на другую страницу или файл.

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

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

8. HTML цвета и способы их указания

В языке HTML, существует два способа указать цвет:
1. С помощью имени цвета,
2. С помощью системы RGB, где цвета заданы в шестнадцатеричном формате.

8.1 Имя цвета

Имя цвета в HTML указывается английскими словами, например red или green. Имя цвета выступает в качестве значения атрибута HTML-тега. Имён цветов очень много, в этой статье мы рассмотрим лишь основные из них.

Обычно для задания цвета, в языке HTML используют два атрибута:

1. Атрибут color="имя_цвета" — цвет текста,
2. Атрибут bgcolor="имя_цвета" — цвет фона.

Примеры использования цветовых атрибутов:
color="red" — назначаем тексту красный цвет,
bgcolor="green" — назначаем фону зелёный цвет.

Таблица основных имён цветов HTML:

8.2 Шестнадцатеричная система счисления

В повседневной жизни мы пользуемся десятичной системой счисления от 0 до 9. Программисты и дизайнеры часто используют шестнадцатеричную систему счисления от 0 до 15, где:

10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

Практически каждый цвет и оттенок, видимый нашему зрению можно записать в шестнадцатеричной системе, например красный цвет red (красный) в шестнадцатеричной системе будет равен ff0000

color="red" — красный цвет, по имени,
color="#ff0000" — красный цвет, в шестнадцатеричной системе счисления.

В языке HTML, перед шестнадцатеричным числом, в значении атрибута ставят знак решётки #

RGB

Перед тем как начать указывать цвета в HTML с помощью шестнадцатеричной системы счисления, для начала нужно узнать о таком понятии как RGB

RGB — это сокращение от слов Red Green Blue (Красный Зелёный Синий).

Цвет в HTML, записанный в шестнадцатеричной системе состоит из трех блоков чисел 00 00 00, где каждый блок отвечает за один из цветов RGB, первый блок за красный цвет, второй за зелёный цвет, третий за синий цвет. Числа могут варьироваться от 00 до ff.

Где, ff — это 255 в десятичной системе счисления.

Схема RGB:
Red — от 00 до ff
Green — от 00 до ff
Blue — от 00 до ff

В итоге получаем число из шести цифр 000000, где первые два числа отвечают за красный цвет, вторые два числа отвечают за зелёный цвет, третьи два числа отвечают за синий цвет.

Если хотим получить красный цвет, то пишем ff0000, зелёный цвет 00ff00, синий цвет 0000ff. Например, если хотим получить тёмно красный цвет, то нужно уменьшить первый блок чисел и вместоff (который равен в десятичной системе счисления 255), записать например 96 (который равен в десятичной системе счисления 150).

Приведём для наглядности, примеры цветов и их шестнадцатеричный код:

9. Единицы измерения в HTML

В языке разметки HTML, существует два вида единиц измерений, это пиксели px и % проценты.

Примеры использования:

height="100px" — высота элемента 100 пикселей,

width="50%" — ширина элемента 50 процентов.

Экран монитора состоит из мельчайших точек, называемых пикселями. Современные мониторы (ноутбуков и компютеров) имеют чаще всего размер экрана (разрешение экрана) величиной в 1366x768, которое означает, что ширина экрана составляет 1366 пикселей, а его высота 768 пикселей.

Относительный и абсолютный размеры

Пиксели — это абсолютный размер,

Проценты — это относительный размер.

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

Допустим разрешение экрана составляет 1366x768, друг под другом создали две таблицы и назначили первой таблице, ширину в 1366px (пикселей):

<table width="1366px">

а второй таблице, ширину в 100% (процентов):

<table width="100%">

Обе таблицы, займут всю ширину экрана. В пикселях, ширина обеих таблиц будет равна 1366px

Если посмотреть на эти таблицы через экран другого монитора, чья ширина например составляет 1280 пикселей, то первая таблица выйдет за пределы экрана, поскольку её ширина больше и составляет 1366 пикселей. Вторая таблица у которой ширина 100 процентов не выйдет за пределы экрана, она опять займёт всю ширину, но теперь её ширина будет равна 1280 пикселям.

Абсолютный размер всегда остаётся неизменным, а относительный меняется в зависимости от внешней среды.

10. Создание таблиц в HTML

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

Первая версия языка HTML не предусматривала специальных средств для отображения таблиц, так как была в основном предназначена для написания простого текста. С развитием сфер применения HTML-документов стала актуальной задача представления данных, для которых типично наличие ряда строк и столбцов. Создание документов, содержащих выровненные по колонкам данные, на первых порах осуществлялось использованием переформатированного текста, внутри которого необходимое выравнивание обеспечивалось введением нужного количества пробелов. Напомним, что текст внутри пары тегов <PRE> и </PRE> выводится моноширинным шрифтом, и все пробелы и символы табуляции являются значащими. Работа по выравниванию такого текста выполнялась вручную, что существенно замедляло создание документов. Поддержка табличного представления данных стала стандартом де-факто, поскольку изначально была реализована во всех ведущих браузерах и лишь по прошествии значительного времени была закреплена в спецификации HTML 3.2.