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

Как выделить абзац в html

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

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

Правильный — сделать специальным кодом в текстовом редакторе. Этот код выглядит так:

Вставляете это код в начале каждого абзаца, и он получается именно с таким отступом, как этот абзац. 25 — это расстояние от края в пикселях, которое можно менять. И не забывайте закрывать абзац тегом </p>.

А вот как это выглядит в тестовом редакторе:

Коды HTML для блоков, рамок, картинок, ссылок

Код активной ссылки

Теперь рассмотрим код активной ссылки. Такая ссылка нужна для перенаправления посетителя на какую-то страницу сайта, или на другой сайт, или еще куда-то. Ссылка выглядит так:

https:// — здесь вставляете адрес нужной страницы или адрес сайта. Название ссылки — тут можно вставить нужное слово (перейти, посмотреть, ознакомиться и т.д.). Это слово называется «анкор».

Пример готовой активной ссылки:

В итоге вся конструкция будет выглядеть так: перейти.

Чтобы активная ссылка открывалась в новом окне, при этом и ваш сайт оставался открытым, в этот код необходимо добавить:

target="_blank" 

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

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

Например,  если нажать на картинку ниже, вас перенаправит на главную страницу сайта — она откроется в новой вкладке.

Обтекание блока рекламы текстом в CSS

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

Теперь разберем, что это значит. Обтекание мы назначили слева, поскольку:

float: left; — это обтекание текстом слева,

float: right; — справа.

Значение margin — это свободный отступ, чтобы текст не прилипал к объявлению. В примере выше мы сделали везде по 5 пикселей. Этот параметр можно изменить по своему желанию.

Так же можно вставить вместо рекламного блока любую картинку. Эта картинка будет обтекаться текстом вот так. Здесь я задала обтекание справа.

Обтекание изображения текстом в html

Чтобы сделать обтекание какого-то кода или изображения текстом в html, потребуется такой код:

<img align=left src="foto.jpg">

У нас получается

обтекаемое изображение такого вида.

Вместо left — обтекания слева, как и в случае с рекламным блоком, можно использовать right — справа, а также:

  • bottom — выравнивание по первой строке текста,
  • top — по верхней строке,
  • middle — по базовой строке текста.

Теперь пример обтекания

с отступами, которых явно не хватало в примере выше.
Чтобы текст не прилипал к изображению, добавляем значение hspace и vspace — это задаст отступы. Атрибут hspace задает горизонтальный отступ в пикселях, vspace — вертикальный.

Код уже получится таким:

То же самое можно сделать через значения margin или padding:

Пример обтекания

со значением padding.

Получились такие же аккуратные отступы.

Как сделать код HTML видимым на странице сайта

Иногда при создании страницы возникает необходимость выложить на странице какой-то скрипт для того, чтобы посетители могли его скопировать. Чтобы этот скрипт был виден на странице и не занимал много места, можно воспользоваться такими тегами:

<textarea>место для кода скрипта </textarea>

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

Кнопка «Вернуться»

Иногда возникает необходимость вернуться с одной страницы на ту с которой попали на эту страницу. Есть несколько вариантов для этого. Можно поставить код активной ссылки, а можно установить внизу посередине страницы кнопочку «Вернуться».

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

Как правильно прописать rel=nofollow и <noindex>

Для закрытия ссылок от индексации с помощью rel=»nofollow» используется простая схема:

Перехода поисковиками по ссылке не будет.

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

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

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

Этот блок не будет проиндексирован в Яндекс, со всеми содержащимся в нем ссылками.

Текст в рамке

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

Пример рамки в виде точек:

Выделим эту строчку рамкой.

Этот код делает рамку штрих-пунктирной линией:

Пример рамки в виде штрих-пунктира:

Выделим эту строчку рамкой

Теперь сделаем обводку жирной линией:

Выделим эту строчку рамкой

Если нужна очень красивая рамка, можно использовать такой код html (цвет поменяете на свой)

Вот так это будет выглядеть на странице сайта:

ваш текст

Вообще рамки — это отдельная большая тема, поэтому ее стоит рассмотреть отдельно.

Выделить часть текста цветом

Чтобы выделить несколько слов, абзац или блок текста отдельным цветом, понадобится такой код:

Пример:

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

 

Статья была полезной?