HTML5 и CSS3

Абсолютные и относительные ссылки html

Ссылки позволяют открывать веб ресурс на просмотр, выполнение каких-то действия или подгрузки ресурсов, например, картинок, css стилей и js скриптов. Все эти ситуации требуют указания адреса ресурса, т.е. ссылки на него. Они, в свою очередь могут быть абсолютными и относительными. Читать далее «Абсолютные и относительные ссылки html»

Как установить видеоплеер через html5

Время от времени на сайтах мне требуется размещать видеоматериал. Конечно, это можно сделать если использовать какие-нибудь js скрипты или библиотеки. Но вполне можно обойтись сервисом Youtube или используя html5 теги. Читать далее «Как установить видеоплеер через html5»

Как ограничить длину текста с помощью css

При разработке сайтов нередки случаи, когда требуется ограничивать длину текста Например, если вы используете дивовую верстку с float: left, в которой высота каждого дива должна быть одинаковой. Читать далее «Как ограничить длину текста с помощью css»

Всплывающие подсказки title на CSS

Рассмотрим возможность создания простых всплываек при наведении мыши на картинку или какой-нибудь html блок. При этом во всплывайки мы сможем добавлять только текст (ссылки и теги не вставить).

Читать далее «Всплывающие подсказки title на CSS»

Как установить frame, iframe на сайт

Фрэймы позволяют легко отображать на вашем сайте информацию с других веб ресурсов, например, погоду, курс валюты или весь сайт. Это бывает незаменимо для организации сложных сайтов или веб программ.

iframe

В современной верстке на html5 используется тег iframe. Сегодня он поддерживается практически всеми браузерами. Частым примером его использования является YouTube, где чтобы поделиться видеороликом используется iframe код.

Задать его на сайте очень просто: <iframe src="http://вашсайт.ру" width="600" height="500" frameborder="0"></iframe>

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

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

frame

Второй тип фрэймов является предшественником iframe и работает на тегах frameset (это уже устаревающий вариант). Для организации таких фрэймов создайте отдельную страницу и пропишите следующий код:

<html>
<frameset rows="20%,80%">
<frame src="http://сайт1.ру" />
<frame src="http://сайт2.ру" />
</frameset>
</html>

Важной особенностью работы таких фрэймах является отсутствие тегов <body> и <head> на странице. Здесь мы видим, что подключаются сразу два сайта внутри frameset. В нем rows означает, что фрэймы будут распологаться друг за другом в строковом виде (если поставить cols - то стобиками). 20%,80% - первый фрэйм займет 20% всего пространства, а второй 80%. Если поставить *,* - то пространство поделится поровну.