Интернет, компьютеры, софт и прочий Hi-Tech

Начало этой статьи доступно по ссылке «Что такое теги разметки текста»:

Вы открываете документ и восхищаетесь его вёрсткой, оформлением, чёткой структурой. Картинки и прочие объекты расставлены по местам, текст форматирован и распределён удобно для восприятия, элементы расфасованы по тематическим блокам. Так вот, вёрстка возможна благодаря тегам (дескрипторам) разметки. Это служебные данные, невидимые для пользователя. »»» Читать полностью

Что такое теги разметки текста. Часть 2

Разметка элементов страницы

Теперь, когда текст оформлен графически, его нужно расставить по нужным местам. Впрочем, начнём с самого простого случая: текст плюс картинка.

Картинка вставляется с помощью тега <img>, где в значении атрибута src непременно указывается путь к графическому файлу:

<img src="picture.jpg">

Обходясь одними лишь средствами HTML, можно оформить выравнивание относительно текста, создание рамки и отступов, чтобы буквы не лепились вплотную.

<img src="picture.jpg" align="left"
     border="1" hspace="5" vspace="5">

Здесь атрибут hspace ответственен за отступ от текста по горизонтали (в пикселях), а vspace — соответственно, по вертикали.

Но всё это, конечно, слишком просто. Настоящая вёрстка осуществляется методом создания таблицы и распределения всех смысловых блоков по её ячейкам. Причём, если в теге <table> поставить атрибут border="0", то границы таблицы станут невидимыми (впрочем, это, как и остальное оформление, лучше делать тоже с помощью CSS).

Что самое главное при вёрстке вручную? Не допустить несоответствия количества ячеек (тег <td>) в рядах (тег <tr>). И объединять ячейки тоже надо очень внимательно. Иначе всё перекосится. Пример простой таблицы с двумя рядами по две ячейки в каждом:

<table>
<tr>
    <td>Это текст в первой ячейке верхнего ряда.</td>
    <td>Это текст в другой.</td>
</tr>
<tr>
    <td>Перешли во второй ряд, как видите.</td>
    <td>Ну и четвёртая ячейка.</td>
</tr>
</table>

Атрибутов здесь можно указать великое множество, но, конечно, ваш учебник по HTML содержит достаточно подробные сведения, правда?

В ячейки таблиц вставляют что угодно: текст, изображения, inline-фреймы, формы авторизации etc.

Классическая схема вёрстки веб-страницы: широкий столбик по центру плюс один или два небольших сбоку (по бокам), плюс «шапка» вверху и «footer» («подножие») снизу.

По центру — основной контент, по бокам — меню и дополнительная информация, в «подножии» — указание копирайта и счётчики посетителей. В итоге всё выглядит чётко структурированным.

Гиперссылки

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

Атрибут href для тега <a> является обязательным, ведь именно в его значении указывается, куда именно ведёт ссылка. Если никуда не ведёт, то какой с неё толк. Например:

<a href="http://yandex.ru">Яндекс</a>

Впрочем, гиперссылки и все их атрибуты, со всеми возможным значениями, — это, как говорится, отдельный разговор и отдельная печаль. Что важно запомнить прямо сейчас, так это железная необходимость закрывать тег <a>. Иначе гиперссылкой станет всё, что следует далее, до самого конца содержимого страницы.

Заключение

Конечно, рассказанное выше, — это всего лишь краткое ознакомление даже не столько с тегами разметки текста, сколько с принципом их реализации на примере HyperText Markup Language.

Думаете, всё это слишком сложно, вам не осилить HTML никогда? А вы взгляните на теги разметки в документе RTF (Rich Text Format), содержащем одно лишь слово «Абракадабра» курсивом:

{\f0\fs24\i\lang1049{\*\listtag0}\abinodiroverride\ltrch Абракадабра {\f0\fs24\lang1049{\*\listtag0}\par}}

Ужаснулись? Теперь сравните с простеньким

<p><i>Абракадабра</i></p>

Осознаёте, как сильно повезло с HTML веб-мастерам всей планеты? То-то же.

Автор: vanilinkin, специально для xBB.uz, 14.05.2012

Предыдущие публикации:

Последнее редактирование: 2012-05-14 15:57:52

Метки материала: что такое, что, текст, теги, что такое теги, такое, текста, разметка, разметки, разметка текста, теги разметки, теги разметки текста, что такое гипертекст, информационные технологии, ит, it, тег, гипертекст, цифровые технологии, язык разметки html, html

Оставьте, пожалуйста, свой комментарий к публикации

Представиться как

Антибот:

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.