Резникова Л.Б.

Основы HTML. Форматирование текста и изображений

Материал опубликован 12 January 2022

Основы HTML Резникова Л.Б.

Как не нарушить авторские права? Изображения должны иметь лицензию Creative Commons Zero (CC0) — всё, что по ней предоставлено, можно использовать для чего угодно, бесплатно, и даже авторство можно не указывать.

Где скачать бесплатные фотографии для сайта? Три лучших сайта с бесплатными фотографиями: Unsplash Pexels Pixabay

Редактирование изображения Для вставки изображения в веб-страницу используется одинарный строчный тег <img>. Для него должны быть указаны следующие два атрибута: src и alt <img src="rabbit.gif"> <img src="rabbit.gif" alt="Это кролик"> Размеры изображения задаются с помощью атрибутов: width и height <img src="images/orange.jpg" alt="апельсин" width="150" height="147">

Расположение картинки в HTML Атрибут align, который выполняет выравнивание изображения <img src="foto.jpg" align="left"> - фото слева от текста <img src="foto.jpg" align="right"> - фото справа от текста <img src="foto.jpg" align="top"> - текст выше фото <img src="foto.jpg" align="bottom"> - текст ниже фото <img src="foto.jpg" align="middle "> - ну и соответственно текст посередине

Форматирование текста. HTML тег <pre> Тег <pre> (HTML Preformatted Text), он определяет предварительно отформатированный текст. Текст, который был помещён внутрь тега, по умолчанию будет отображен со шрифтом фиксированной ширины и сохранит как пробелы, так и разрывы строк.

Форматирование текста. HTML тег <pre> Все пробелы и переносы строк браузер оставил так, как мы их указали в редакторе:

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

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

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

HTML теги и Тег определяет текст, которому придают особое значение (важный текст).

Другие полезные теги - Полужирный текст - Наклонный текст - Подчеркнутый текст <strike> </strike> - Перечеркнутый <s> </s> - Перечеркнутый (второй вариант, от первого ничем не отличается) <tt> </tt> - моноширинный шрифт - Малый <big> </big> - Большой - Верхний индекс - Нижний индекс

Пример использования тегов

Шрифт Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем тег и его атрибут face Эта строчка будет написана с помощью шрифта Arial

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

Цвет текста Для изменения цвета шрифта тэг FONT имеет атрибут COLOR. Значение цвета можно задавать двумя способами: по его названию или по шестнадцатеричному значению. Обратите внимание, что при использовании шестнадцатеричного кода для указания цвета перед ним обязательно нужно вставить знак решетка #.

Цвет текста

Как выровнять текст Для выравнивания текст у тэга Р есть атрибут ALIGN. Но не достаточно просто написать . У атрибута должен быть указан параметр. Так атрибут ALIGN имеет следующие параметры: LEFT – выравнивание текста по левому краю RIGHT – выравнивание текста по правому краю CENTER – выравнивание текста по центру JUSTIFY – выравнивание текста по ширине Задание: Самостоятельно сделайте выравнивание строки «Александр Пушкин» по правому краю.

Использование заголовков для выравнивания текста У тэгов <H1>, <H2>, ..., <H6> также имеется атрибут. ALIGN определяет выравнивание заголовка. Параметр ALIGN такие же как и у атрибута ALIGN тэга P.

Использование горизонтальных разделителей У тэга HR есть параметры: SIZE - устанавливает толщину линии.

Использование горизонтальных разделителей