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

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

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

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

Редактирование изображения Для вставки изображения в веб-страницу используется одинарный строчный тег <img>. Для него должны быть указаны следующие два атрибута: src и alt <img src="rabbit.gif"> <p><img src="rabbit.gif" alt="Это кролик"></p> Размеры изображения задаются с помощью атрибутов: 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 теги <i> и <em> HTML позволяет выводить текст с курсивным начертанием текста, для этого используются теги <i> и <em>.

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

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

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

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

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

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

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

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

Цвет текста

Цвет текста

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

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

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

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

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