DVKuklin.ru

Учебник по программированию.

Создание сайтов. Первые шаги.

 

 

Учебник по программированию. Первые шаги. Язык программирования PascalABC.NET.
Предыдущий параграф Назад в содержание Следующий параграф

§6. Тэг для создания ссылок a. Тэги для работы с рисунками.

Тэг a.

Тэг a служит для создания ссылок. Ссылка – это любой элемент интернет страницы, на который можно нажать и при этом переместиться либо на другую страницу, либо в другое место этой же страницы. Как правило, любая ссылка бывает каким-либо образом выделена. Например, если слово или текст являются ссылками, то они подчёркиваются и выделяются синим цветом, как показано на рисунке:

Выделение ссылки.

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

Так же тэг a служит для создания, так называемого, якоря. Якорь – любой элемент интернет страницы, на который может переместиться пользователь, нажав определённую ссылку. Якорь в окне браузера ни как не выделяется.

Если вы просто поместите какой-либо элемент в тэг a, то он ещё не станет ни ссылкой ни якорем. Для этого тэг a необходимо настроить с помощью атрибутов.

Атрибуты тэга a.

href.

Атрибут href устанавливает URL адрес ссылки. О том, что такое URL адрес вы можете почитать в Интернете. На данном этапе под этим словосочетанием будем понимать название файла, включая или не включая полный путь к нему, в котором содержится html документ. Если полный путь к файлу не указан, то файл будет искаться в том же месте, где и тот в котором находится сама ссылка. Так же существуют относительные адреса. Они будут рассмотрены далее по тексту в соответствующем подразделе данного параграфа.

В следующем примере в html документе «1.html» находится ссылка созданная тэгом a с атрибутом href = “2.html”. Следовательно, нажав на эту ссылку, мы переместимся в документ 2.html. Пример:

1.html ------------------------------------------- <h1>Документ "1.html"</h1> <a href = "2.html">Ссылка.</a><p>
Документ 1.html
____________________________________________ 2.html ----------------------------------------- <h1>Документ "2.html"</h1>
Документ 2.html

Примечание: здесь и далее если, это необходимо, перед кодом html документа может находиться название файла этого документа, разделённое от кода линией из дефисов. Несколько документов будут разделены сплошной линией, а после каждого кода может находиться на рисунке результат отображения этого документа в браузере.

name.

Атрибут name задаёт имя якоря. Если данный атрибут использован, то элемент, включённый в тэг a, будет являться якорем. Соответственно на этот элемент можно создать ссылку.

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

Для того, что бы создать ссылку на якорь в этом же документе необходимо в атрибуте href поставить символ «#» и после него указать имя якоря.

Для того, что бы создать ссылку на якорь в другом документе, необходимо в атрибуте href указать имя файла этого документа, затем поставить символ «#» и указать имя якоря.

Пример:

1.html ------------------------------------------- <h1>Документ "1.html"</h1> *<p>*<p>*<p>*<p>*<p>*<p>*<p>*<p>*<p>*<p>*<p>*<p>*<p>* <p>*<p>*<p>*<p>*<p>*<p>*<p>*<p>*<p> <a href = "2.html" name = "1.html">Ссылка.</a><p>
Пример якоря в документе 1.html
__________________________________________________ 2.html ----------------------------------------- <h1>Документ "2.html"</h1> <a href = "1.html#1.html">Ссылка на ссылку в документе 1</a>
Документ 2.html

Обратите внимание, что перейдя по ссылке в документе «2.html», мы попадаем в то место, где находится «Ссылка» в документе «1.html», как показано в результате отображения этого документа.

title.

Атрибут title создаёт подсказку, которая будет всплывать при наведении на элемент. В качестве значения необходимо указать строку.

Пример:

<h1>Документ "2.html"</h1> <a href = "1.html#1.html" title = "По ссылке вы перейдёте в конец документа 1.html"> Ссылка на ссылку в документе 1</a>
Пример использования атрибута title.

download.

Атрибут download обычную ссылку делает ссылкой для скачивания. Другими словами, если вам необходимо, что бы пользователь не перешёл по ссылке, а скачал по ней какой-либо файл, то необходимо использовать этот атрибут. Значений у него нет, необходимо просто включить его в тэг.

Пример:

<a href = "bg_Img.bmp" download >Скачать файл</a>
Пример использования атрибута download.

target

Атрибут target отвечает за то, куда будет загружена новая страница. Она может быть загружена в это же окно браузера (значение _self) или в новое окно браузера (значение _blank).

Примечание: так же этому атрибуту могут быть присвоены и другие значения, о которых будет сказано в соответствующем параграфе.

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

Когда вы начнёте создавать боле менее серьёзный сайт, то у вас наверняка появятся различные каталоги, в которых будут храниться различные данные. Как правило, если данных много, то они хранятся в папках «дальше» по уровню. Например, если главная страница находится в «Папке_0», то данные могут находиться в каталогах «Папка_1», «Папка_2». Далее на рисунке в виде «дерева» показана структура таких каталогов:

Пример структуры каталогов.

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

Далее для изучения относительных адресов, за основу возьмём структуру каталогов, представленную на предыдущем рисунке. При этом представим, что наш сайт находится в каталоге «Папка_0». В таком случае, если нам необходимо указать файл в этом же каталоге, то, как уже было сказано, нам необходимо просто указать имя файла, не указывая путь к нему.

Если нам необходимо указать файл, который находится в каталоге «Папка_1», то необходимо указать название этого каталога, затем после косой черты указать имя файла:

Папка_1/Файл_1.html

Если необходимо указать файл, который находится в каталоге «Папка_2», то необходимо указать каталог «Папка_1», затем поставить косую черту, указать каталог «Папка_2», косую черту и название файла:

Папка_1/Папка_2/Файл_2.html

По такому же принципу можно двигаться сколь угодно «дальше» по уровню каталогов.

Для того, что бы двигаться «обратно» по уровню каталогов, необходимо поставить две точки и косую черту. Например, если нужно указать файл в каталоге «Папка_-1», то необходимо поставить две точки, косую черту, а затем указать название файла:

../Файл_-1.html

Если файл находится в каталоге «Папка_-2», то две точки и черту необходимо указать два раза:

../../Файл_-1.html

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

Тег для вставки рисунка img.

Для того, что бы вставить рисунок в html документ, необходимо поместить в код тэг img совместно с атрибутом src, в качестве параметра которому необходимо присвоить имя файла рисунка и путь к нему. Вместо пути к файлу так же можно использовать относительный адрес. Пример:

<img src = "Img.bmp">
Пример использования тэга img.

В качестве рисунков можно использовать файлы следующих форматов: bmb, jpg, gif, png. Далее приведены некоторые их особенности, которыми вы можете руководствоваться при выборе нужного формата:

bmp – любое изображение в несжатом формате;

jpg – любое изображение в сжатом формате с потерей качества;

gif – изображение позволяющее содержать в себе прозрачный фон. О том, что такое прозрачный фон будет пояснено далее;

png – сжатое изображение без потери качества, так же может содержать в себе прозрачный фон.

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

Рисунок с овалом.

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

Этот рисунок имеет белый фон, и если его поместить в html документ с таким же белым фоном, то мы увидим просто овал. Но если у html документа фон будет другим, то мы увидим кроме овала и белый фон самого рисунка:

Рисунок с овалом, вставленный в документ с красным фоном.

Примечание: менять фон всего документа мы научимся при изучении тэга body.

Для того, что бы мы увидели овал без белого фона, нам необходимо белый фон самого рисунка сделать прозрачным. Сделать это можно в программе FotoShop, сохранив файл в формате png или gif. Этот же html документ с таким рисунком будет выглядеть следующим образом:

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

Атрибуты тэга img.

Атрибут Аlign.

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

Далее приведено два примера различных вариантов отображения рисунка, в зависимости от его размера:


Рисунок имеет размер такой же, как и у символов, при этом он вставляется «на тех же правах», что и символ:

Это буква <img src = "А1.png" align = "bottom">, такая же как и символ.
Использование атрибута align со значением bottom для рисунка размером с букву.

Рисунок несколько больше символов, при этом строка по высоте увеличивается:

Первая строка.<br> Это буква <img src = "А2.png" align = "bottom">, больше символа.<br> Третья строка.
Использование атрибута align со значением bottom для рисунка размером много больше буквы.

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

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

Первая строка.<br> Это буква <img src = "А2.png" align = "bottom">, больше символа.<br> Третья строка.
Использование атрибута align со значением bottom.

top – верхний край рисунка выравнивается по верхнему краю строки:

Первая строка.<br> Это буква <img src = "А2.png" align = "top">, больше символа.<br> Третья строка.
Использование атрибута align со значением top.

middle – выравнивание середины рисунка по середине строки:

Первая строка.<br> Это буква <img src = "А2.png" align = "middle">, больше символа.<br> Третья строка.
Использование атрибута align со значением middle.

left, right – выравнивание рисунка по левому, правому краю окна браузера соответственно:

Первая строка.<br> Выравнивание рисунка <img src = "А2.png" align = "left"> по левому краю.<br> Выравнивание рисунка <img src = "А2.png" align = "right"> по правому краю.<br> Третья строка.
Использование атрибута align со значениями left, right.

Примечание: как видно из рисунка, при использовании значений left и right рисунок располагается у левого или у правого края окна браузера, при этом верхний край рисунка находится на уровне верхнего края той строки, в которой находится соответствующий тэг img.


alt.

Если по каким-либо причинам рисунок не будет загружен, то вместо него будет выведена строка, присвоенная атрибуту alt. Пример:

Первая строка.<br> Это буква <img src = "А2.png" alt = "Буква А">, больше символа.<br> Третья строка.
Использование атрибута alt.

border.

Атрибут border устанавливает ширину рамки в пикселях вокруг рисунка. По умолчанию он равен нулю, поэтому если атрибут не установлен, то рамки нет. Пример:

Первая строка.<br> Это буква <img src = "А2.png" border = "2">, больше символа.<br> Третья строка.
Использование атрибута border.

height, width.

До сих пор во всех приведённых примерах рисунки отображались такого размера, какого они есть на самом деле. В ряде случаев рисунок необходимо отобразить строго определённого размера. Для этого есть атрибуты height (высота) и width (ширина). В качестве значения данным атрибутам можно присвоить как абсолютное число пикселей (просто целое число), либо процент от родительского элемента (целое число со знаком %). Пример:

Первая строка.<br> Это буква <img src = "А2.png" width = "100" height = "150">, больше символа.<br> Третья строка.
Использование атрибутов width и height.

hspace, vspace.

Атрибуты hspace и vspace добавляют пустое пространство возле рисунка, которое не будет занято текстом. Пример:

Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.<p> <img src = "А2.png" align = "left" hspace = "10" vspace = "10"> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.<p> Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.<p>
Использование атрибутов hspace и vspace.

Ссылочная карта.

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

Далее рассмотрим поэтапно весь процесс создания ссылочной карты.

1. В тэг img необходимо поместить атрибут usemap, которому необходимо присвоить идентификатор (строку символов), начинающийся с символа #. Пример:

Ссылочная карта.

2. Далее создаём тэг map с атрибутом name. Этому атрибуту необходимо присвоить идентификатор без символа #, который был присвоен атрибуту usemap тэга img. Причём тэг map необходимо закрыть. Пример:

<map name = "Map_1"> </map>

3. В тэг map помещаем тэги erea, в которых указываются координаты областей (атрибут cords) и адреса ссылок (атрибут href). Пример:

<area coords = "0,0,100,100" href = "Doc_1.html"> <area coords = "100,0,200,100" href = "Doc_2.html"> <area coords = "0,100,100,200" href = "Doc_3.html"> <area coords = "100,100,200,200" href = "Doc_4.html">

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

Нумерация координат начинается с левого верхнего угла и идёт по оси X слева направо, а по оси Y сверху вниз. Первая цифра означает координату по оси Х, вторая – по оси X.

Примечание: если вы сами создали изображение, то вероятней всего вы будете знать какая область, какие координаты имеет. Если вы взяли уже готовый рисунок, то координаты вы можете узнать в программе Paint, в которой в нижнем левом углу высвечиваются координаты положения курсора мышки относительно рисунка.


Подведём итог: для того, что бы создать ссылочную карту необходимо в тэг map поместить тэги area, в которых содержится информация о координатах и адресах ссылок. Тэг map является контейнером для тэгов area. В совокупности тег map и тэги area называются картой-изображением. Атрибут name тэга map с помощью идентификатора связывает картинку и карту-изображение между собой. Как правило, карта-изображение в коде html документа помещается сразу после картинки (после соответствующего тега img).


Далее для примера весь получившийся код целиком и результат отображения:

<img src = "Ссылочная карта.png" usemap = "#Map_1"> <map name = "Map_1"> <area coords = "0,0,100,100" href = "Doc_1.html"> <area coords = "100,0,200,100" href = "Doc_2.html"> <area coords = "0,100,100,200" href = "Doc_3.html"> <area coords = "100,100,200,200" href = "Doc_4.html"> </map>
Результат отображения ссылочной карты.

Форма области рисунка, которая является ссылкой, в предыдущем примере является прямоугольником. Помимо прямоугольника она может быть кругом и многоугольником. Для этого необходимо включить в тэг area атрибут shape и присвоить ему значение либо circle (круг), либо poly (многоугольник). При этом для круга в атрибуте cords нужно указать координаты центра и радиус. Для многоугольника необходимо указывать поочерёдно все вершины. Пример:

<img src = "Ссылочная карта 2.png" usemap = "#Map_2"> <map name = "Map_2"> <area shape = "circle" coords = "50,50,30" href = "Doc_1.html"> <area shape = "poly" coords = "105,49,143,25,178,67" href = "Doc_2.html"> </map>
Пример различных областей для ссылочной карты.

Примечание: на этом параграф можно закончить. В дополнение к вышесказанному стоит сказать, что у тэга area есть атрибуты target и title. Они точно такие же как и у тэга a и имеет те же значения.

Так же у тэгов a и area есть ещё несколько одинаковых атрибутов, которые будут рассмотрены в соответствующих параграфах.

Задачи.

1. Создать структуру каталогов, представленную на рисунке в подразделе «Относительные адреса». Создать в каталоге «Папка_0» главную страницу, в остальных – произвольные. В главной странице создать ссылки на все остальные. Документы из каталогов «Папка_1», «Папка_2» должны загружаться в этом же окне браузера. Документы из каталогов «Папка_-1», «Папка_-2» должны загружаться в новом окне браузера.

2. Создать логотип для сайта с вашим текстом. Логотип должен быть рисунком в формате png с прозрачным фоном.

2. Разбить ваш текст на главы (пусть даже небольшие). Используя как шаблон страницу, которая должна была у вас получиться при решении 4-ого задания предыдущего параграфа, создать отдельные страницы с каждой главой.

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

По возможности вставить рисунки в каждую главу.

Так же создать главную страницу. На ней должна быть аннотация (краткое описание) к вашему тексту.

Главная страница и логотип должны быть в одном каталоге, а все остальные дальше по уровню.

Не забудьте, что файл главной страницы должен иметь имя «index.html». А так же то, что каждая страница должна иметь определённую структуру поэтому добавьте тэги html и body.

Примечание: в итоге у вас должен получиться полноценный сайт.


Предыдущий параграф Назад в содержание Следующий параграф