Верстка html для начинающих

Язык html для начинающих. В предыдущей статье мы с вами обсудили самые основы языка ХТМЛ. Немного поговорили о теории, немного было практики. Научились делать «стандартную заготовку» интернет страницы, а также получили основы форматирования текста. Хотя, о последнем нас ждёт ещё достаточно долгий и объёмный разговор.

Сегодня же мы поговорим о том, как осуществлять вставку мультимедиа объектов на нашу страницу. Сначала давайте поговорим о том, что такое эти загадочные «мультимедиа объекты»? Это — музыка, видео, флеш-ролики, любой аудио и видео контент.

Давайте начнём с самого простого — с изображений. Для того чтобы вставить изображение, есть тег ХТМЛ. Он имеет следующий вид — <img>. Естественно, что закрывать тег не нужно. Но мало просто написать этот тег, необходимо же ещё и указать какое именно изображение мы желаем вставить в нашу страницу!

Давайте вновь обратимся к теории. Все теги ХТМЛ делятся на две большие группы (на самом деле, их можно разделить по целому комплексу разных признаков и свойств, но нас, в данном случае, интересует именно этот признак) — те теги, у которого имеются какие-то атрибуты, и те теги, у которых никаких атрибутов нет.

Атрибут — дополнительная, если угодно, «корректирующая» информация о разметки нашей страницы. У описываемого тега <img> такой атрибут есть и он — обязателен. Атрибут — src. Все атрибуты тегов ХТМЛ пишутся внутри треугольных скобок с пробелом. У каждого атрибута имеется какое-то значение, которое пишется в кавычках.

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

Итак, предположим, что мы хотим вставить файл 1.jpg. Тогда наш код будет выглядеть так <img src=’1.jpg’>. Как видим, ничего сложного.

У тега <img> имеются также и дополнительные необязательные атрибуты. Речь идёт о выравнивании. Перечислим их:
атрибут align задаёт выравнивание вашего изображения. Он может иметь несколько значений: top — выравнивание происходит по самому высокому элементу в строке.

Другими словами, рисунок будет вверху, bottom – изображение внизу, right, left — выравнивание изображения, соответственно, справа и слева.

Атрибут border задаёт толщину рамки вокруг изображения. Указывается в пикселях, где 0 — отсутствие рамки.
Атрибут height – высота вашего изображения. Можно указывать как в пикселях, так и в процентах, где 100% — высота экрана монитора. Заметим, что если вы ставите значение у этого атрибута больше, чем высота самого рисунка, то он будет повторяться.

Атрибут width — ширина вашего изображения. Аналогично с предыдущим.

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

Код должен получиться примерно такой.

<html>
<head>
<title>Вставка мультимедиа</title>
</head>
<body>
<img src=’/pics/1.jpg’ width=’50’ height=’50’ border=’0′ align=’top’>
</body>
</html>

Теперь попробуем вставить музыку. Теперь, когда мы научились вставлять изображение, это не должно быть сложным. Для того, чтобы вставить музыку (или фильм!) воспользуемся тегом <embed> с известным нам атрибутом src.

Более подробно начатую тему мы обсудим в следующий раз.