Коды html, рассмотренные ниже, пригодятся в работе с сайтом. С их помощью можно вставить изображения в нужном положении, рекламные коды, правильно оформить анкорные ссылки, сделать обтекаемые картинки и блоки рекламы, оформить текст рамкой.
Как выделить абзац в html
Если при написании текста нужно каждый абзац начинать с красной строки, то это можно сделать двумя способами — правильным и неправильным.
Неправильный — в визуальном редакторе сделать это кнопкой «пробел», но в этом случае в общий код страницы попадает много ненужных знаков, которые считаются мусором.
Правильный — сделать специальным кодом в текстовом редакторе. Этот код выглядит так:
1 2 3 | <p style="text-indent: 25px;">тут ваш текст</p> |
Вставляете это код в начале каждого абзаца, и он получается именно с таким отступом, как этот абзац. 25 — это расстояние от края в пикселях, которое можно менять. И не забывайте закрывать абзац тегом </p>.
А вот как это выглядит в тестовом редакторе:
Код активной ссылки
Теперь рассмотрим код активной ссылки. Такая ссылка нужна для перенаправления посетителя на какую-то страницу сайта, или на другой сайт, или еще куда-то. Ссылка выглядит так:
1 2 3 | <a href="http://адрес направления">название ссылки</a> |
https:// — здесь вставляете адрес нужной страницы или адрес сайта. Название ссылки — тут можно вставить нужное слово (перейти, посмотреть, ознакомиться и т.д.). Это слово называется «анкор».
Пример готовой активной ссылки:
1 2 3 | <a href="https://mehelps.ru/">перейти</a> |
В итоге вся конструкция будет выглядеть так: перейти.
Чтобы активная ссылка открывалась в новом окне, при этом и ваш сайт оставался открытым, в этот код необходимо добавить:
target="_blank"
тогда код активной ссылки будет выглядеть следующим образом:
1 2 3 | <a href="https://адрес направления"target="_blank">название ссылки</a> |
Вместо «название ссылки» можно вставить не только ссылку, но и какую-нибудь картинку, то есть вписывается полный пусть изображения, взятый из файлового менеджера или из медиабиблиотеки. В итоге получается кликабельная картинка. Пример:
1 2 3 | <a href="https://адрес направления/" target="_blank"><img src="https://адрес изображения.img" /></a> |
Например, если нажать на картинку ниже, вас перенаправит на главную страницу сайта — она откроется в новой вкладке.
Обтекание блока рекламы текстом в CSS
При установке на страницы сайта небольших блоков рекламы остаётся пустое пространство. Чтобы заполнить его текстом, который будет обтекать блок рекламы, можно воспользоваться следующим кодом:
1 2 3 | <div style="float:left; margin:5px 5px 5px 5px;">сюда вставляете код рекламного блока</div> |
Теперь разберем, что это значит. Обтекание мы назначили слева, поскольку:
float: left; — это обтекание текстом слева,
float: right; — справа.
Значение margin — это свободный отступ, чтобы текст не прилипал к объявлению. В примере выше мы сделали везде по 5 пикселей. Этот параметр можно изменить по своему желанию.
Так же можно вставить вместо рекламного блока любую картинку. Эта картинка будет обтекаться текстом вот так. Здесь я задала обтекание справа.
Обтекание изображения текстом в html
Чтобы сделать обтекание какого-то кода или изображения текстом в html, потребуется такой код:
<img align=left src="foto.jpg">
У нас получается
обтекаемое изображение такого вида.
Вместо left — обтекания слева, как и в случае с рекламным блоком, можно использовать right — справа, а также:
- bottom — выравнивание по первой строке текста,
- top — по верхней строке,
- middle — по базовой строке текста.
Теперь пример обтекания
с отступами, которых явно не хватало в примере выше.
Чтобы текст не прилипал к изображению, добавляем значение hspace и vspace — это задаст отступы. Атрибут hspace задает горизонтальный отступ в пикселях, vspace — вертикальный.
Код уже получится таким:
1 2 3 | <img hspace="10" vspace="10" align="left" src="foto.jpg"> |
То же самое можно сделать через значения margin или padding:
1 2 3 | <img style="margin:10px 10px 0px 0px" align="left" src="foto.jpg">; |
Пример обтекания
со значением padding.
Получились такие же аккуратные отступы.
Как сделать код HTML видимым на странице сайта
Иногда при создании страницы возникает необходимость выложить на странице какой-то скрипт для того, чтобы посетители могли его скопировать. Чтобы этот скрипт был виден на странице и не занимал много места, можно воспользоваться такими тегами:
<textarea>место для кода скрипта </textarea>
В результате получится рамочка, в которой будет расположен скрипт или какая-то другая информация. Размер рамки корректируется с помощью мышки — просто потяните за нижний правый угол. Для примера размещу скрипт календаря с моего сайта:
Кнопка «Вернуться»
Иногда возникает необходимость вернуться с одной страницы на ту с которой попали на эту страницу. Есть несколько вариантов для этого. Можно поставить код активной ссылки, а можно установить внизу посередине страницы кнопочку «Вернуться».
Ниже два кода такой кнопки и один код якорной ссылки:
1 2 3 4 5 6 7 | <input ENGINE="button" onclick="history.back();" value="Назад"/> <div align="center"><input onclick="window.history.back();" type="button" value="Вернуться"/></div> <a href="#" onclick="history.back();return false;" class="history-back">Вернуться назад</a> |
Как правильно прописать rel=nofollow и <noindex>
Для закрытия ссылок от индексации с помощью rel=»nofollow» используется простая схема:
1 2 3 | <a rel="nofollow" href="http://www.site.com" title="Подсказка">Ссылка на сайт</a> |
Перехода поисковиками по ссылке не будет.
Для закрытия блока текста тегом <noindex> со всем содержимым, в том числе и с анкорами ссылок, используется конструкция:
1 2 3 | <!--noindex-->Блок вашего закрываемого текста<!--/noindex--> |
Этот текстовый блок не будет проиндексирован в Яндекс, как и все имеющиеся в нем ссылки.
Для закрытия блока текста тегом и ссылок в блоке, используется схема:
1 2 3 | <!--noindex-->Блок закрываемого текста <a rel="nofollow" href="http://www.site.com" title="Подсказка">анкор ссылки</a> блок закрываемого текста<!--/noindex--> |
Этот блок не будет проиндексирован в Яндекс, со всеми содержащимся в нем ссылками.
Текст в рамке
Если вдруг возникнет необходимость выделения какой-то строчки или куска теста рамочкой, то можно воспользоваться таким кодом:
1 2 3 | <span style="border-width:thin; border-style:dotted; border-color:#FF5730">Выделяемый текст</span> |
Пример рамки в виде точек:
Выделим эту строчку рамкой.
Этот код делает рамку штрих-пунктирной линией:
1 2 3 | <span style="border-width:thin; border-style:dashed; border-color:#FF5730">Выделяемый текст</span> |
Пример рамки в виде штрих-пунктира:
Выделим эту строчку рамкой
Теперь сделаем обводку жирной линией:
1 2 3 | <span style="border-width:thick; border-style:groove; border-color:#FF5730">Выделяемый текст </span> |
Выделим эту строчку рамкой
Если нужна очень красивая рамка, можно использовать такой код html (цвет поменяете на свой)
1 2 3 | <p style="border: 20px #FF1493 ridge; solid; padding: 5px; background: #FF97BB;">ваш текст</p> |
Вот так это будет выглядеть на странице сайта:
ваш текст
Вообще рамки — это отдельная большая тема, поэтому ее стоит рассмотреть отдельно.
Выделить часть текста цветом
Чтобы выделить несколько слов, абзац или блок текста отдельным цветом, понадобится такой код:
1 2 3 | <span style="color: код цвета;">Тут цветной текст.</span> |
Пример:
Сначала идет текст без выделения цветом текста, теперь выделяем часть текста через код html, дальше опять простой черный текст.
Статья была полезной?