Изучаем HTML. Ссылки, списки, таблицы.

В предыдущем уроке мы познакомились с основами языка HTML, а в этом продолжим его изучение. В этом уроке вы узнаете еще больше тегов и возможностей языка HTML для отображения на странице ссылок, таблицы, различных видов списков и даже видео. Если вам все еще интересно, Добро Пожаловать под кат.

Для начала напомним на чем мы остановились в прошлый раз.

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

Тег <a>.

Базовые сведения о языке HTML можно получить с сайта Wikipedia. Давайте дадим такую возможность пользователям нашего сайта. Для добавления ссылки на страницу в языке HTML определен тег <a>:

Атрибут href задает значение ссылки. Текст ссылки заключается внутри тегов <a></a>.

Отлично! Перейдя по данной ссылке вы попадете на нужную страничку Википедии.

Давайте еще немного изменим нашу страницу. Во-первых, изменим ее заголовок на «Учебник по HTML». Во-вторых, уберем фразу «Hello, World!». Все же мы уже знакомы с основами и готовы двигаться дальше.

Списки.

Напомним, что HTML — это стандарт, определяемый консорциумом W3C. Подробнее почитать о данной организации можно на их официальном сайте.

Давайте добавим на наш сайт ссылку и на этот стандарт как рекомендуемый к изучению. Кажется, у нас набирается небольшой список материалов! Неплохо было бы его как-то организовать.

Для создания маркированных или нумерованных списков средствами HTML используются теги <ul> и <ol> соответственно. Каждый элемент списка заключается внутрь тега <li>.

На нашем примере:

Получаем результат:

Используя тег <ul> мы создали маркированный список. Каждый элемент списка расположен внутри тега <li>. Давайте теперь воспользуемся тегом <ol> для создания нумерованного списка:

Таблицы.

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

Таблица описывается совокупностью основных тегов <table>, <tr> и <td>. Тег <table> является корневым. Помещая его внутрь html-документа мы говорим браузеру о том, что в этом месте должна быть таблица. Тег <tr> описывает строку таблицы, а тег <td> — одну из ячеек в строке.

Тег <caption> задает название таблицы. Давайте пока выведем на экран название таблицы и строку заголовков столбцов.

Атрибут border тега <table> задает рамку таблицы. В нашей таблицы объявлена только одна строка(тег <tr>). Внутри описываются данные ячеек. Тег <th> аналогичен тегу <td>, но предназначен для описания столбцов-заголовков таблицы. Данные в ячейках заголовков автоматически выделяются жирным.

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

Давайте теперь заполним таблицу.

Здесь есть одна проблема. В столбце Тег должны отображаться HTML-теги, которые при загрузке документа обрабатываются браузером. Чтобы использовать их только для отображения, нужно их экранировать. Для этого угловые скобки < и > записываются как &lt; и &gt; соответственно. В этом случае браузер будет воспринимать их как обычный текст.

Заполним нашу таблицу несколькими известными нам тегами:

Откроем документ:

Дополнительные возможности. Тег <video>.

С помощью тега <video> можно описать видео, которое должно быть загружено на странице, а также управлять его настройками. Данный тег является новой возможностью стандарта HTML5. Данный пример здесь приводится только для того, чтобы продемонстрировать некоторые расширенные возможности того, что можно делать с помощью HTML5.

Источник видеофайла задается внутри тега <source>. У тега <video> также задано несколько атрибутов, которые отвечают за размер окна проигрывателя и за показ элементов управления.

Вот что получилось в итоге:

Итоги.

В данном уроке мы еще больше попрактиковались с написанием разметки HTML-документа, узнали несколько новых тегов, позволяющих на нашем сайте создавать списки, таблицы и ссылки на другие веб-странички. Помимо этого мы познакомились с одной из новых возможностей стандарта HTML5 для отображения видео прямо в окне браузера.

В следующем уроке мы узнаем, как придать нашей странице цвета и стиля, разобрав возможности технологии CSS3(Cascading Style Sheets).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *