Основы HTML - синтаксис языка, теги (tags)
Дата создания: 2012-03-04 00:50:20
Последний раз редактировалось: 2012-10-25 07:15:35
Современную жизнь практически невозможно представить без интернета. Чтобы мы делали без всевозможных Одноклассников, Вконтактов и Живых Журналов? Даже страшно представить, как оскуднела бы наша жизнь, если б ОН вдруг пропал! Как бы мы жили без смешных картинок, дурацких видео, мегабайтов африканского спама? Нет, друзья, я отказываюсь жить в таком ужасном мире!
Что такое интернет? (Internet)
Интернет - это все компьютеры (вычислительные устройства) в мире, соединённые между собой.
Синоним понятия Интернет - веб. Слово веб - калька с английского web (паутина). А web в свою очередь - часть понятия World Wide Web (всемирная глобальная паутина). Огромную долю интернета занимают всевозможные сайты.
Что такое сайты (Site)
Сайт (site) - это некоторое количество текстовых файлов в формате html. Т.е. это обычные файлы, которые хранятся на каком-то компьютере.
И тут мы подходим к нашей теме: а что же это за формат такой - HTML, и зачем он нужен?
Что такое HTML?
HTML (HyperText Markup Language - язык разметки гипертекста) - это такой специальный язык. Но надо сразу заметить, что это не язык программирования. Это язык разметки текста.
Свою историю HTML берёт со специальных программ для разметки газетных статей. Эти программы позволяли указать как располагать текст на странице, где будут картинки. То же самое позволяет делать и HTML, только на экране цифрового устройства (компьютера, телефона...).
Если вы откроете любой текстовый файл в блокноте, то увидите только скучный текст. HTML же позволяет превратить такой скучный текст в более интересный: где-то добавить картинку, где-то разбить текст на блоки.
Ещё одной отличительной особенностью HTML является гипертекст. Гипертекст - это ссылки. Т.е. это возможность пометить текст специальным образом и нажатие на этот текст приведёт к переходу на другую страницу. Т.е. гипертекст (ссылки) позволяет связать между собой разные страницы (файлы, так как каждая страница в интернете - это файл).
Использование HTML - синтаксис языка разметки
HTML-текст состоит из тегов, в которые помещают информацию.
Тег состоит из двух частей: открывающий тег и закрывающий тег. И в открывающем, и в закрывающем тегах записывается имя тега. Но в закрывающем перед именем ставится косая черта / - чтобы отличить закрывающий, от открыающего. Вот несколько примеров:
<p>Содержимое тега</p> <a>Содержимое тега</a> <div>Содержимое тега</div> <span>Содержимое тега</div>
Слово tag переводится как - этикетка, ярлык. Т.е. тег как бы приявязывается к содержимому - размечает его.
У каждого тега своё значение. Какие значения имеют теги, которые мы видели выше? p - абзац. a - ссылка. div - блок. span - кусочек текста. Мы ещё рассмотрим значения этих тегов в следующих уроках.
Одиночные теги
Некоторые теги не имеют закрывающей пары. А это значит, что у таких тегов нет содержимого. Например, тег br - разрывает строку:
Простой текст,<br/> на примере<br> которого показан разрыв<br/> строк.
Там где находится тег br браузер сделает разрыв строки. В результате конечный пользователь вышеприведённое предложение вот в таком виде:
Простой текст,
на примере
которого показан разрыв
строк.
Ещё теги, которые не имеют закрывающей пары: hr (горизонтальная черта) и img (картинка).
Иерархия тегов
Теги можно встраивать друг в друга.
<div> <p>Просто текст. <a>Ссылка</a>. Продолжение текста. </p> <p> Ещё один абзац. </p> </div>
Здесь div содержит два абзаца, а первый абзац в свою очередь содержит ссылку.
При создании иерархии тегов главное, чтобы они не пересекались:
<div> <p>Так нельзя!!! </div> </p>
Здесь сначала должен закрыться тег p, потом div.
Атрибуты тегов
Атрибуты позволяют указать дополнительную информацию. Атрибуты записываются через пробел после имени отрывающего текста:
<тег атрибут1="Значение атрибута" атрибут2="Значение атрибута" атрибут3="Значение атрибута">Содержимое тега</тег>
Например, у ссылки есть атрибут href, который позволяет указать адрес страницы, куда будет осуществлён переход, при щелчке на эту ссылку:
<a href="http://shatalov.su">Ссылка на главную страницу</a>
Вот так это будет выглядеть на готовой странице:
Ещё один пример атрибута - src у img. Этот атрибут позволяет указать путь к картинке, которая должна загрузиться:
<img src="Адрес картинки">
Значения атрибутов можно записывать как в вдойных кавычках, так и в одинарных:
<img src='Адрес картинки'> <img src="Адрес картинки">Оба варианта правильные.
Вот в общем-то и всё. Теперь мы готовы приступить к созданию HTML-документов.