Файл: Основы программирования на языке HTML.pdf

Структурное форматирование.

Абзацы <p>

Для создания абзаца заключите текст в открывающий <р> и закрывающий </р> теги. По умолчанию браузер автоматически отобразит каждый абзац с новой строки, при этом абзацы будут несколько отстоять друг от друга. Абзац состоит из одного или нескольких предложений, формирующих самодостаточную часть какого-либо высказывания. Абзац начинается с красной строки. [6, c. 47] Разбиение текста на отдельные абзацы, выражающие законченную мысль, — один из первых принципов составления любых документов. HTML-документы не являются исключением из этого правила. При создании документов с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>. Как уже было сказано выше, в HTML-доку ментах символы перевода строки не приводят к образованию нового абзаца. [1, c. 40]

Возникают ситуации, когда необходимо выровнять текст не по левому краю, как по умолчанию выполняет браузер, а, например, по центру или как в нашем примере по правому краю для указания автора строк. Для этого возможно использование тега <р> с параметром ALIGN.

Существуют следующие значения параметра ALIGN, отвечающего за тип горизонтального выравнивания текста в окне браузера.

- ALIGN="Ieft" — текст выровнен по левому краю (значение параметра, принятое по умолчанию);

- ALIGN="center" — текст располагается посередине окна браузера. Не рекомендуется при работе с большими фрагментами текста, т. к. из-за различной длины слов восприятие абзаца затрудняется;

- ALIGN="right" — выравнивание текста по правому краю. Идеально подходит для создания эпиграфов, подписей, заголовков и пр. При работе с большими текстовыми фрагментами нежелательно;

ALIGN="justify" — выравнивание по ширине окна браузера. Это значение является общепринятым стандартом оформления текстовых блоков делового содержания. [1, c. 43]

Перевод строки <BR>.

Как мы уже рассмотрели раньше, браузер автоматически начинает каждый абзац с новой строки, однако если необходимо добавить перевод строки в пределах какого-либо абзаца, то нам понадобится вставить специальный тег — <br />. [6, c. 51] Этот тег из немногих, не является парным и поэтому не соответствующего закрывающего тэга. В его размещения строка заканчивается, а оставшийся один имеет месте текст печатается с новой строки. Например, такой подход может использоваться для создания структур типа списков без использования специальных тэгов разметки списка или как в нашем примере для оформления стихотворения. Для переноса на конкретное число строк тег ставится нужное количество раз. [1, c. 44]

Отступы, Пробелы.

Верстальщики веб-страниц часто добавляют дополнительные пробелы в код или даже помещают некоторые элементы на новые строки с целью повышения удобочитаемости кода.

Когда браузер встречается с двумя или более пробелами, идущими друг за другом, он отображает только один. Аналогично он поступает и с переносом строки, воспринимая его как единичный символ пробела. Данное свойство браузеров известно, как «сворачивание пробелов».

Довольно часто можно столкнуться с тем, что создатели веб-страниц пользуются сворачиванием пробелов, чтобы расставить необходимые отступы в исходном коде страниц для повышения удобочитаемости. [6, c 50] В HTML размер отступа определяется кодовой конструкцией &nbsp;, которая визуально представляет собой обычный пробел. Создавая текст в документе, не обязательно между каждым словом вставлять &nbsp;. — браузер и так поймет, что нужно сделать отступ. Но если вам потребуется сделать отступ большего размера, и вы прямо в коде создадите несколько пробелов, браузер интерпретирует такие пропуски в виде единственного пробела. [1, c 43]

Запрет перевода строки <NOBR>.

Тег этот парный и по своему действию является прямой противоположностью предыдущего. Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке, независимо от ее длины. Если при этом получающаяся строка будет выходить за пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки. [1, c 44]

Выделение отдельных слов, фраз, предложений.

Второй класс тегов физического форматирования позволяет задать акцент в отображении того или иного текста. Часть из тегов не рекомендуется к использованию спецификацией HTML 4.0 и 5.0 по целому ряду причин, или же вообще отменены, однако они продолжают поддерживаться браузерами.

Отображение полужирным шрифтом <B> (<STRONG>).

Чтобы выделить текст полужирным начертанием шрифта, нужно поместить его между тегами <B> и < /b> Элемент <b> также обозначает фрагмент текста (например, ключевые слова), внешний вид которого будет отличаться от основного текста абзаца. При этом использование данного элемента не добавляет дополнительных значений к тексту. [6, c.48]

Отображение курсивом <I> (<EM>)

Чтобы отобразить текст с курсивным начертанием шрифта, его следует поместить между тегами <i> и </ i>.

Элемент <i> определяет фрагмент текста, отличающийся от основного текста, например, технические термины, иностранные слова и прочие виды включений в текст, которые принято выделять курсивом. [6, c.48]

Шрифт текста <FONT>

Одним из основных тегов физического форматирования текста, отображающий свойства шрифтов является <FONT>. Тег является парным, для него могут использоваться следующие параметры:

FACE - cлужит для указания типа шрифта, которым программа просмотра пользователя будет выводить текст.

Значение параметра - название шрифта, которое должно в точности совпадать с названием шрифта, имеющего у пользователя. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию. [1, c 45]

SIZE - служит для указания размеров шрифта в условных единицах от 1 до 7. Конкретный размер шрифта зависит от браузера, по умолчанию - значение 3. Размер шрифта указывается как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1).

COLOR - служит для указания цвета шрифта. Значения могут быть заданы словами, числом в шестнадцатеричной системе, тройкой чисел RGB

Подстрочные <SUP> и надстрочные знаки <SUB>

Элемент <sup> используется для выделения символов, которые должны быть отображены как надстрочные, к примеру, ряд математических понятий, таких как возведение в степень (2² и т.п.).

Элемент <sub> используется для отображения символов как подстрочных. Подстрочные символы, как правило, используются в химических формулах, таких как Н₂О. [6, c. 49]

В завершение разговора о тегах физического форматирования стоит добавить, что разные теги могут использоваться одновременно в отношении одного текстового фрагмента. Например, часть текста и даже отдельного слова может быть написана и курсивом, и жирным начертанием, да еще подчеркнута и т. д. Единственное, о чем следует помнить, это сохранение последовательности указания закрывающих тегов. Другими словами, не рекомендуется, открыв фрагмент текста тегами <В> и <FONT>, закрывать HTML-конструкцию в том же порядке (т. е. порядок закрывающих тегов должен быть обратным) -должен работать эффект «Матрешки». [1, c. 46]

Теги логического форматирования

Заголовок <H1>, <H2> … <H6>

В языке HTML существует шесть уровней заголовков:

<H1> используется для основных заголовков;

с <H2> по <H6> — для подзаголовков.

Если текст разделен на фрагменты более глубокого уровня, то для них используются заголовки <H3> и ниже.

Браузеры отображают содержимое элементов-заголовков шрифтом разного размера. Текст заголовка <H1> выводится самым крупным шрифтом, текст заголовка <H6> — самым мелким. Кегль шрифта, используемый разными браузерами для отображения заголовков разного уровня, незначительно отличается. Кроме того, пользователи также могут отрегулировать кегль шрифта отображаемого текста. [6, c. 46]

Зачеркнутый <DEL>

Используется для обозначения удаленного текста.

Имеет необязательные для указания параметры DATETIME (дата удаления -YYYY-MMDDThh :mm:ssTZD, часовой пояс Time Zone) и CITE (URL-адрес документа удаления).

- источник причины [1, c. 49]

Подчеркивание <INS>

Используется для обозначения вставленного текста. Имеет необязательные для указания параметры DATETIME (дата вставки -YYYY-MMDDThh :mm:ssTZD, часовой пояс Time Zone) и CITE (URL-адрес документа - подробности внесенных дополнений). [1, c. 49]

Цитаты <BLOCKQUOTE>, <Q>

Элемент <blockquote> используется для отображения длинных цитат, занимающих целый абзац. Обратите внимание, что внутри элемента <blockquote> необходимо использовать и элемент <р>. В большинстве своем браузеры склонны к выделению содержимого элемента <blockquote> отступами, однако этот элемент не стоит использовать только лишь для того, чтобы создать фрагмент текста с отступом: лучше реализовать такое с помощью каскадных таблиц стилей (CSS).

Элемент <q> принято использовать для более коротких цитат, помещающихся внутри абзаца текста. Изначально предполагалось, что браузеры будут заключать содержимое элемента <q> в кавычки, однако Internet Explorer этого не делает, потому многие избегают использовать данный элемент.

Для обоих элементов может быть указан атрибут cite*, указывающий, с какого сайта позаимствована та или иная цитата. Значение этого атрибута — URL-адрес сайта, содержащего более подробную информацию об источнике цитирования. [6, c. 55]

Горизонтальная линии

Чтобы визуально разделить темы книги или сцены пьесы, с помощью тега <hr /> вы можете добавить в текст горизонтальную линию. В языке HTML существует несколько элементов, не содержащих текста между открывающим и закрывающим тегами. Их принято называть пустыми элементами. Написание таких тегов отличается от стандартного. Обычно пустой элемент состоит только из одного тега, перед правой, закрывающей скобкой которого вставляются пробел и слеш. Некоторые верстальщики веб-страниц опускают пробел и слеш, хотя их указание и рекомендуется для следования спецификации. [6, c. 51]

Центрирование.

Центрирование любых элементов HTML-документа может быть осуществлено с помощью тега <CENTER>. Все данные, размещенные внутри этого парного тега, подлежат горизонтальному выравниванию посередине окна браузера. В сущности, тег <CENTER> представляет собой аналог значения ALIGN="center" того тега, результат отображения которого будет отцентрирован на экране монитора. [1, c. 51]

Комментарии.

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

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

Любой HTML-комментарий должен начинаться с конструкции <! — и заканчиваться —>. Между ними может находиться любой текст, цифры, символы и прочее, за исключением тегов.

<! — Начало блока новостей —> Код блока новостей...

<! — Окончание блока новостей —>

При всем удобстве включения в HTML-код комментариев необходимо помнить, что просмотреть код электронного документа может практически любой пользователь Интернета, открыв Web-страницу в текстовом редакторе. Поэтому размещать в комментариях информацию конфиденциального, коммерческого или личного характера не рекомендуется. [1, c. 53]

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

4. Изображения, графика

Существует достаточно много оснований, чтобы добавить на веб-страницу какое-либо изображение. Этим изображением может быть, например, логотип, фотография, иллюстрация, схема или диаграмма. [6, c. 92]

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

Возможность использования графики трудно переоценить в приложении к любому виду публикации, в том числе и для Web-документов. Без иллюстраций документ однообразен, вял и скучен. Расчетливо подобранная и правильно размещенная в документе графика делает его визуально привлекательнее и, что самое важное, передает одну из основных идей документа.