<imgsrc=”example.png” align=”top”> — картинка располагается выше текста;

Гиперссылки в HTML

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

При наведении мыши на них курсор принимает форму руки, а при клике в окне браузера открывается другая веб-страница или определённый документ. Гиперссылки могут представлять собой как текст, так и изображение.

Как сделать гиперссылку в HTML? Гиперссылка задаётся при помощи парного тега < a> (от английского слова Anchor — якорь). Параметр href тега < a> содержит адрес документа.

В HTML теги гиперссылки представлены в виде < a> и < /a>, а ссылкой считается вся информация, которую < a> и < /a> содержат:

< a href=”адрес гиперссылки в html ”> текст ссылки< /a>

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

Сработает он в том случае, если конечный документ располагается в той же директории (папке), что и текущий. Также, вы можете указать путь к файлу относительно корневой директории веб-сайта с помощью символа « / ».

Например:

< a href=”/example. html”> имя страницы< /a>

Абсолютный адрес представляет собой ссылку в полном виде на документ, расположенный в сети интернет.

Например:

< a href=”http: //sitename. com/sitepage. html”> имя страницы< /a>

Создание гиперссылок в HTML — процесс несложный. По умолчанию они подчёркиваются и выделяются синим цветом, а посещённые — фиолетовым.

Изменить цвет гиперссылки в HTML можно в параметрах тега < body>:

· link – цвет ссылок веб-страницы;

· vlink – цвет посещённых гиперссылок веб-страницы;

· alink – цвет активных ссылок веб-страницы.

Например:

< body link=”black” vlink=” #8AA080” alink=”grey”>

Указанные атрибуты определяют цвета ссылок всего HTML-документа. Если вставить такой код в тег < body>, каждый раз задавать цвет шрифту не придётся.

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

Основные атрибуты гиперссылок

В рамках HTML гиперссылки могут иметь следующие параметры:

1. title – позволяет создать текст подсказки, которая всплывает при наведении курсора мыши на гиперссылку.

Например:

< a href=”http: //sitename. com/” title=”Текст_всплывающей_подсказки”> Имя ссылки< /a>

2. target – указывает браузеру в каком окне следует открыть ссылку.

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

· _blank – ссылку необходимо открыть в новой вкладке;

· _self – гиперссылка в HTML должна быть открыта в текущей вкладке. Значение по умолчанию;

· _parent – браузер должен загрузить ссылку в родительском окне;

· _top – гиперссылка загружается по всему пространству окна браузера (разбиение на фреймы в данном случае исчезает).

Например:

< a href=http: //sitename. com/ target=”_blank”> Имяссылки< /a>

Таким образом, ответ на часто задаваемый начинающими веб-мастерами вопрос «как вставить гиперссылку в HTML» получен.

Картинки в HTML

Прежде, чем ответить на вопрос «как вставить картинку в HTML? », следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG, GIF и JPEG, а для дизайнерских работ с изображениями — графический редактор AdobePhotoshop, обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

Содержание

Как вставить изображение в HTML?

Назначение размеров картинки в HTML
Расположение картинки в HTML
Картинка-ссылка
Как можно сделать картинку фоном в HTML?

Как вставить изображение в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

< imgsrc=”xxx”>,

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

< imgsrc=”image.png”>

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

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок». Добавляется он с помощью атрибута alt тега < img>.

Пример добавления альтернативного текста к графическому файлу:

<! DOCTYPE html>

< html>

< head>

< meta charset=" utf-8" >

< title> Альтернативный текст< /title>

< /head>

< body>

< p> < imgsrc=" images/example.png" alt=" Альтернативныйтекст" > < /p>

< /body>

< /html>

Назначение размеров картинки в HTML

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

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

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

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

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

< imgsrc=”example.png” height=”40”>

или

< imgsrc=”example.png” height=”10%”>

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

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

Расположение картинки в HTML

Как и ко многим тегам HTML, к тегу imgsrc применим атрибут align, который выполняет выравнивание изображения:

< imgsrc=”example.png” align=”top”> — картинка располагается выше текста;

12 3 Следующая ⇒