Сайты, блоги, веб-страницы - уже привычные понятия в наше время. С развитием интернета площадки для размещения веб-страниц стали невероятны популярны, и это неудивительно: для одних людей наличие собственного сайта - необходимость, для других - приятное развлечение. В первом случае обычно речь идет о фирмах, корпорациях, частных предпринимателях, когда ими рекламируется какой-либо товар или востребованная услуга. Во втором - о блогерах.
Кроме этого, существуют пользователи интернета, которые просто ищут информацию, читают блоги, смотрят видео и так далее.
Чтобы создать качественный сайт, существует много вариантов. Мы остановимся на веб-программировании посредством HTML.
Что такое HTML
HTML расшифровывается как Hyper Text Mark-Up Language. В переводе с английского это означает «язык гипертекстовой разметки».
Иными словами, HTML - это набор кодов, с помощью которых можно создать основные элементы сайта, его каркас, подобно тому, как из слов составляются предложения.
Коды в HTML пишутся исключительно латинскими буквами и называются тегами, и каждый код заключается в угловые скобки. Часть тегов парные, часть - непарные.
Под парными подразумевается то, что они должны быть использованы в паре в обязательном порядке. Например, открывающий тег указывает на то, в каком месте веб-страницы он начинает действовать, а закрывающий указывает на то, где его действие прекращается. Последний отличается от первого наличием символа «слэш» после открывающей угловой скобки. Например, <b> - открывающий тег, </b> - закрывающий.
Непарные теги в «напарнике» не нуждаются.
Многие теги могут иметь атрибуты - дополнительные элементы, которые придают ему какое-либо более конкретное значение. Например, тег <body>.
Где используется HTML
Классическое понимание того, где нужен HTML, - создание сайтов.
На практике этого может быть достаточно, так как HTML позволяет создать основные элементы сайта, меню (в том числе многоуровневое), задать фон, вставить текст, изображения, аудио, видео, редактировать шрифты и многое другое.
Однако есть другие языки, которые позволяют добавить более интересные и нередко необходимые элементы веб-страницы:
- CSS задает стили для всего сайта без необходимости постоянно прописывать с помощью тегов стилевые особенности отдельных элементов - цвета и шрифта текста, например.
- Язык скриптов позволяет разрабатывать и вставлять на сайт мини-программы (скрипты), начиная от банальных эстетических вещей (смена цвета ссылки при наведении мышкой) и заканчивая функциональными (сбор адресов электронной почты клиентов, номеров телефонов).
- С помощью PHP можно разработать собственную гостевую книгу или систему комментирования.
Также HTML применяется в создании электронных писем для рассылки.
Что такое ссылка
Они позволяют осуществить переход на другую веб-страницу, как внутри сайта, так и внешнюю.
Ссылки HTML обычно используются:
- Для перехода на внешний веб-ресурс.
- Для передвижения по страницам внутри сайта.
- Для перехода на google-формы.
Ссылка на источник в HTML тоже часто указывается, тем более что при копировании материала с другого сайта необходимо указать автора. В противном случае, копирование без указания авторства может попасть под определения нарушения авторского права, кражи контента и иметь неприятные последствия. Кроме этого, использование заимствованных, не уникальных материалов снижает показатели SEO, а указание ссылки на источник снижает риски.
Виды ссылок
В классическом понимании ссылка - это адрес веб-ресурса, на который можно перейти, кликнув по нему.
Кроме этого, существуют гиперссылки: текстовые и изображения. В этих случаях ссылка HTML «прячется» под каким-либо предложением (словом) или картинкой, и, чтобы перейти по ней, нужно кликнуть на текст или изображение.
Другие виды ссылок:
- Непосещенная - ссылка, по которой еще не был совершен переход во время конкретной сессии. Например, если вы переходили по этой ссылке вчера, затем выключили компьютер, а сегодня вновь его включили, то сейчас ссылка вновь непосещенная, так как началась новая сессия.
- Активная - в этом состоянии ссылка сохраняется в течение очень короткого времени: промежуток между кликом по ссылке и переходом по ней.
- Посещенная - ссылка, по которой уже переходили как минимум один раз в течение одной сессии.
Если речь идет об обычных текстовых ссылках, то посещенные, как правило, меняют свой цвет, если не было задано обратное.
Изображение-гиперссылка внешний вид не меняет вне зависимости от того, посещенная она или нет.
Как вставить обычную ссылку
Многие веб-ресурсы воспринимают адрес сайта как ссылку, сразу делают ее кликабельной и выделяют цветом. Например, если адрес отправляется в мессенджере или по электронной почте, кликнув по нему, можно перейти на сайт.
В случае с созданием сайта самостоятельно с помощью HTML необходимо вставить ссылку с помощью специального тега. Это будет выглядеть так: <a href=“адрес сайта”>адрес сайта</a>. Текст ссылки в HTML нужно указывать полностью, с протоколом.
Как вставить текстовую гиперссылку
Ранее говорилось, что текстовая гиперссылка выполняет ту же функцию, что и обычная ссылка, но выглядит более эстетично: вместо адреса сайта, который часто бывает излишне длинным, указывается какое-либо слово или фраза. Например, в предложении «Ищите информацию здесь» можно спрятать ссылку в слове «здесь». Оно будет выделено цветом и при клике на него пользователь перейдет на нужный сайт.
О том, как сделать ссылку HTML, уже говорилось ранее. Вставить текстовую гиперссылку можно с использованием того же тега. Разница только в том, что нужно указать между тегами текст, под которым ссылка будет спрятана: <a href=“адрес сайта”>видимый текст</a>.
Как вставить гиперссылку-изображение
Здесь немного сложнее. Мы используем тот же тег, но вместо текста нужно указать путь к изображению.
Путь - это месторасположение изображения. Если картинка (фото) находится на файлообменнике, то нужно указать все папки по пути к изображению через слэш. Также можно вставить ссылку на изображение, если возможно.
<a href=“адрес сайта”><img src=“путь к изображению/ссылка на изображение”></a>
К тегу <img> помимо src применимы и другие атрибуты, позволяющие регулировать высоту, ширину и месторасположение картинки и многое другое. Некоторые из них:
- Src - определяет путь к изображению.
- Lowsrc - идентичный предыдущему атрибуту, но указывается для низкокачественных изображений.
- Height - высота картинки.
- Width - ее ширина.
- Alt - описание изображения. При наведении на фотографию или картинку, всплывет текст, указанный в этом атрибуте.
- Border - определяет толщину рамки, находящейся вокруг изображения.
Атрибуты указываются после тега и входят в его состав. После атрибута нужно указать его значение. Например, для атрибутов «высота» или «ширина» (height, width) указывается высота изображения на веб-странице. Единица измерения - пиксели, если не задано другое.
Это будет выглядеть так: <a href=“адрес веб-страницы”<img src=“путь к изображению/ссылка на изображение” heigh=“высота изображения в пикселях” width=“ширина изображения в пикселях”></a>. Эти атрибуты помогут установить подходящий размер для картинки. Border помогает создать невидимую рамку вокруг изображения.
Вышеперечисленные атрибуты применимы и отдельно для тега вставки изображения. Например: <img=“путь к изображению/ссылка на изображение” alt=“описание”>.
Что такое ссылки-якори
Создавать ссылки-якори - очень полезное умение. Нередко возникает необходимость сверстать веб-страницу с длинным текстовым блоком или с несколькими подразделами на одной странице. В этом случае можно сделать сразу в начале список ссылок на подразделы текста или веб-страницы, и при нажатии на них пользователь будет переходить непосредственно к запрашиваемому разделу.
Для создания ссылок-якорей понадобится более активное использование тегов с атрибутами, чем при создании других видов ссылок.
Сначала нужно задать общее значение для каждого блока информации или подраздела текста с помощью атрибута top, а потом связать его с соответствующей ссылкой.
Их особенности более обширные, потому желательно сначала освоить создание более простых ссылок, а потом уже переходить к формированию ссылок-якорей.
Советы
Помощь от бывалых программистов:
- Можно сделать так, чтобы информация отображалась о ссылке при наведении в HTML. Для этого может пригодиться атрибут alt, который мы используем и для графических элементов.
- Есть возможность сделать с помощью HTML список ссылок. В частности, это может пригодиться при ссылках-якорях, а также когда нужно сделать перечень веб-ресурсов, на которые можно перейти по ссылке прямо с текущей веб-страницы.
- С помощью CSS и JavaScript, а также некоторых функций HTML можно создать другой дизайн текстовых ссылок и гиперссылок, отличающийся от обычного. Например, при наведении курсором на ссылку она может сменить свой цвет и вернуть прежний, когда курсор находится от нее в стороне. Это можно реализовать с помощью специального скрипта в JavaScript. Кроме этого, цвет ссылки можно задать другим, а не синим для непосещенной или фиолетовым для посещенной. Это задача CSS.
- Не злоупотребляйте ссылками. Веб-страница, в которой много неуместных ссылок, выглядит неряшливо и неаккуратно.
- Следите за тем, чтобы пользователю было понятно, что гиперссылка с изображением действительно ею является, а не просто картинка.
Заключение
В HTML ссылку на страницу сделать очень легко. Важно соблюдать все основные моменты этого языка, поскольку даже небольшая ошибка может привести к тому, что результата не будет, и код не станет работать.
