Картинки в html

Содержание:

CSS
Как задать размер изображения html?
Вставляем видео и аудио с помощью HTML 5
Размер изображения
Какие ещё возможности предлагает ФотоМАСТЕР
Обтекание изображения текстом
Форматы графических изображений.
Трансформация только фона
§ 1. Как вставить картинку
Атрибуты
- Alt
- Width и Height
Как сделать картинки адаптивными?
Интернет-маркетинг от GeekBrains
Положение фона
Цены
Как вставить картинку в текст в Word
Заголовок для вставки изображения.
Статьи по теме
Параметры, применяемые к изображениям в HTML
Как создать страничку

Создать страницу проще, чем вы думаете

CSS

Если вам нужно, чтобы фон повторялся на всех страницах вашего сайта, то без CSS не обойтись. Конечно, можно каждый раз прописывать путь, как в предыдущей главе. Но представьте, если со временем вам будет нужно его заменить: ссылка устареет или просто захочется поменять дизайн. Заходить на каждую страничку и менять код? Так не пойдет.

CSS помогает решить эту проблему. Вам нужно создать файл с расширением css и ввести следующий код:

<style>
body { background url(путь к файлу); }
</style>

Далее подключите этот документ к основному html и готово.

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

Как задать размер изображения html?

Простой html шаблон электронного письма, html e-mail + простое редактирование

Для этого в HTML существуют специальные атрибуты для тега img

width – для задания ширины картинки
height – для задания высоты картинки

Размер картинки мы можем задавать как в пикселях так и в процентах.

Например:

PHP

1 2	<img src=»”http://site.ru/images/example.jpg»alt=»Вставка изображения»width=»500″height=»300″> <img src=»http://site.ru/images/example.jpg»alt=»Вставка изображения»width=»50%»>

Лично мне больше нравится задавать размер изображения в CSS так как там можно задавать ещё минимальную и максимальную ширину и высоту для изображений. Это особенно актуально если нужно несколько разных по размеру изображений выровнять по высоте или ширине.
Для этого можно использовать CSS свойства:

max-width – максимальная ширина изображения
min-width – минимальная ширина изображения
max-height – максимальная высота
min-height – минимальная высота

Например:

PHP

Img {
max-width: 300px;
}

1
2
3

Img{

max-width300px;

}

Так же при задании ширины или высоты изображения в CSS для того чтобы не происходило деформации изображения используется значение auto.
Например:

PHP

img {
height: 200px;
width: auto;
}

1
2
3
4

img{

height200px;

widthauto;

}

Вставляем видео и аудио с помощью HTML 5

Как конвертировать картинки и фото

В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.

Для вставки аудио HTML5 предоставляет парный тег AUDIO. Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:

Тег «audio» создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге audio необходимо указать особый атрибут autoplay. Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.

По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге «audio» поставить атрибут без значения controls, браузер выведет в том месте веб-страницы, где проставлен тег audio, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:

Для вставки видеоролика на веб-страницу предназначен парный тег video. С этим тегом все тоже самое, что и с тегом audio — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.

Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги :

для вставки изображений на html страницу пользуемся одиночным тегом img и указываем адрес файла с картинкой в атрибуте src;
с помощью атрибута alt тега img можно задавать текст замены на случай если изображение не загрузится;
с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
для вставки аудио и видео в html5 есть парные теги audio и video соответственно.

Размер изображения

Как сделать у картинки прозрачный фон в фотошопе

С тем, как вставить картинку в текст с HTML, мы разобрались. Но что если мы хотим сделать изображение чуть больше или меньше? Для этого в HTML предусмотрены специальные атрибуты: width (ширина) и height (высота). Значения данных атрибутов могут быть как в процентах, так и в пикселях. Если задать ширину в пикселях, а высоту в процентах, то код примет следующий вид:

Если указать только один из атрибутов размера, то второй будет вычислен автоматически, но так, чтобы соблюсти пропорции изображения

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

Какие ещё возможности предлагает ФотоМАСТЕР

Наша программа для обработки фото предоставляет широкий выбор возможностей по их преобразованию: тонированию, ретуши и наложению эффектов. Во вкладке «Улучшения» доступна регулировка цветовой гаммы: насыщенности, сочности, оттенка. Ниже вы можете сбалансировать тон снимка. Не знаете, как их настроить? Кликните по кнопке «Автоматическое улучшение» — программа сама подберёт необходимые настройки.

Во вкладке «Инструменты» можно обрезать и тонировать снимки. Помимо опции добавить изображение на фото, здесь есть функция замены фона картинки.
Во вкладке «Ретушь» находятся инструменты по коррекции портретов, устранению мелких дефектов. Нежелательные объекты удаляются при помощи «Корректора» и «Штампа».
Во вкладке «Эффекты» доступны тематические пресеты, которые позволяют наложить на изображение фильтр фотоплёнки или искусственных засветов.
Во вкладке «Надписи» можно вставить текст и редактировать его стиль. Также доступны стикеры, приклеив которые, вы сделаете фото ярче и заметнее.

Теперь вы узнали как на фото добавить картинку всего за несколько шагов. Основной плюс ФотоМАСТЕРа — в простом русскоязычный интерфейсе, понятном даже новичкам.

Обтекание изображения текстом

Иногда необходимо, чтобы картинка была рядом с текстом, который огибал бы ее тем или иным способом. Но если вставить картинку просто внутрь строки, то графически это будет выглядеть некрасиво, текст будет разбит неаккуратно. Так как вставить картинку в HTML, чтобы изображение органически вписывалось в дизайн страницы? Для этого нам необходим атрибут align тега <img />. Этот атрибут может принимать два значения: left и right.

При использовании значения left изображение будет размещено слева от текста, а при использовании атрибута right, соответственно, справа. Выглядеть этот код будет так:

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

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

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

Форматы графических изображений.

Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.

1. Формат JPEG (Joint Photographic Experts Group). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.

2. Формат GIF (Graphics Interchange Format). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.

3. Формат PNG (Portable Network Graphics). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.

При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:

JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;
GIF используется в основном для анимации;
PNG — формат для всего остального (иконки, кнопки и др.).

Трансформация только фона

У контейнера может не быть никаких стилей, но необходимо задать position: relative, поскольку наш псевдоэлемент располагается внутри. Также установите overflow: hidden, в противном случае фон будет выходить за пределы контейнера.

Теперь мы можем создать абсолютно позиционированный псевдоэлемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.

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

§ 1. Как вставить картинку

Для вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

src=»logo.jpg»>

Если картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:

images/logo.jpg»>

А можно не мучиться и указать полный адрес картинки. Например, так:

http://www.seoded.ru/image/seoded.png»>

В последнем случае браузер отобразит код так:

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

Помимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.

Атрибуты

Как я уже говорил выше, тег img сразу идет в комплекте с атрибутом src. Ну я думаю, что вы уже поняли это, поэтому будем изучать остальные. Здесь есть где развернуться. Атрибутов здесь просто дофигища. Простите за мой французский).

Alt

Если вдруг картинка по какой-либо причине не прогрузилась или недоступна, что вы увидите текст, который был написан в значении атрибута Alt. Обычно здесь пишется то, что изображено на картинке, т.е. если изображено что-то про национальности, то и в alt лучше всего так и написать «Мужчины и женщины разных национальностей». На примере это выглядит так:

В итоге, если картинка по какой-то причине не сможет отображаться, то вылезет наша надпись.

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

Width и Height

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

Width отвечает за ширину изображения, а в его значениях ставится сам размер. В общем если у вас есть картинка, например, 640*480 пикселей, а вам нужно отобразить ее на сайте 320*240, то вам просто нужно будет сделать следующее:

Всё. Теперь, когда вы сохраните документ и откроете его с помощью браузера, то вы увидите уменьшенную кртинку. Причем заметьте, мы изменили только параметр ширины, а картинка уменьшилась пропорционально, т.е. высота уменьшилась автоматически.

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

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

Давайте ради интереса попробуем поставить атрибуты и ширины, и высоты одновременно, только зададим им непропорциональные параметры. Ну а потом посмотрим, что у нас получится.

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

Как сделать картинки адаптивными?

Для того чтобы ваши изображения подстраивались под ширину экрана мобильного устройства достаточно задать их ширину в процентах.
Это можно сделать двумя способами:

1.При помощи html с использованием атрибута width
Например:

PHP

<img src=»images/example.jpg» alt=»Вставка изображения» width=»100%»>

1 <img src=»images/example.jpg»alt=»Вставка изображения»width=»100%»>
2.При помощи CSS. Например:

PHP

img {
width: 100%;
height: auto;
}

1
2
3
4

img{

width100%;

heightauto;

}

Так же не стоит забывать о свойстве max-width, которое позволяет сделать так чтобы на больших экранах ваша картинка занимала не более 300 пикселей, к примеру. А на маленьких оно было на всю ширину.

Делается это следующим образом:

PHP

img {
width: 100%;
max-width: 300px;
height: auto;
}

1
2
3
4
5

img{

width100%;

max-width300px;

heightauto;

}

Так же перед тем как загружать картинку на сайт не забывайте его оптимизировать.

О том как это можно сделать я писала в отдельной статье:«Оптимизация изображений для сайта»

Думаю, что описанной выше информации будет достаточно для того чтобы вы без проблем могли вставить любое изображение на сайт, задать ему нужные атрибуты и сделать его адаптивным.

Успехов вам и процветания!

С уважением Юлия Гусарь

Интернет-маркетинг от GeekBrains

Положение фона

Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat. Также можно воспользоваться универсальным background, как показано в примере 4.

Пример 4. Положение фона

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Положение фонового рисунка</title>
<style>
body {
background: url(/example/image/tomato.jpg) right bottom no-repeat fixed; /* Параметры фона */
margin-right: 200px; /* Отступ справа */
}
</style>
</head>
<body>
<h1>Консервы из помидор</h1>
<p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по
размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г
поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и
ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8,
трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.</p>
<p>Примерный расход сырья и продуктов на литровую банку: помидоров
красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.</p>
</body>
</html>

Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right.

Рис. 5. Фоновая картинка в правом нижнем углу окна

Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:

top left = left top = 0% 0% (в левом верхнем углу);
top = top center = center top = 50% 0% (по центру вверху);
right top = top right = 100% 0% (в правом верхнем углу);
left = left center = center left = 0% 50% (по левому краю и по центру);
center = center center = 50% 50% (по центру);
right = right center = center right = 100% 50% (по правому краю и по центру);
bottom left = left bottom = 0% 100% (в левом нижнем углу);
bottom = bottom center = center bottom = 50% 100% (по центру внизу);
bottom right = right bottom = 100% 100% (в правом нижнем углу).

Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100%. Они равнозначны и дают одинаковый результат.

Цены

Как вставить картинку в текст в Word

Открываем приложение Microsoft Word для написания текста. Чтобы вставить картинку в текст, надо на панели инструментов нажать на вкладку «Вставка». А затем нажать на вкладку «Рисунок».

Откроется диалоговое окно для выбора изображения. Находим нужную картинку в наших папках с изображениями. Выделяем изображение. Нажимаем на выбранное изображение левой кнопкой мыши. Затем нажимаем на «Вставить». Картинка откроется в текстовом документе, но она будет очень большой. Если вас устраивает такой размер, то можете ничего не менять. Возможно, вам именно большие картинки нужны для иллюстрации вашего текста.

Чтобы отредактировать изображение, нажимаем на него один раз левой кнопкой мыши. Вокруг изображения появится рамка. Мы можем менять размер, потянув за уголки или за края рамки.

А можем перейти на вкладку «Работа с рисунками. Формат».

Справа находятся два окошка для изменения параметров ширины и высоты картинки. Можно выбрать только один параметр для изменения. Второй выставится сам автоматически. После того, как будет выбран новый размер картинки, его надо закрепить. Щелкните по чистому полю листа за пределами картинки. Новый размер сохранится.

Картинку можно обрезать по краям. Нажимаем на картинку, затем на вкладку «Формат», затем на «Обрезка». Вокруг картинки появится рамка с маркерами. Двигая эти маркеры, мы выполняем обрезку ненужных фрагментов картинки. После обрезки сохраняем результат. Щелкаем по чистому полю листа за пределами картинки.

Картинку можно обрезать по фигуре, сделать ее еще более интересной.

Обрезка по фигуре позволяет выбрать не только плоские форматы, но и объемные. Например, вот такой.

Маленькая картинка будет не очень хорошо смотреться на большом листе с текстом. Поэтому лучше выбрать более выигрышный вариант расположения картинки. На вкладке «Положение» представлено несколько вариантов обтекания картинки текстом. Ее можно переместить в любое место на странице с текстом. Нажимаем на выбранный вариант и перемещаем картинку.

Вкладка «Экспресс-стили» позволяет выбрать стиль оформления картинки. Это могут быть тени, рамки, отражение, поворот картинки.

Можем добавить рамку вокруг изображения. Выбрать цвет границы рамки, ширину и тип линии для контура.

Применить эффекты для рисунка. Сделать их объемными, светящимися, с наклоном или тенью. Есть эффекты сглаживания и отражения.

Всем удачи и красивого оформления текстов! Теперь при написании текстов вы сможете вставить картинку в текст. Не только вставить, но и красиво оформить картинку. И даже обойтись без редактора изображений.

Заголовок для вставки изображения.

Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст
Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст Какой-то текст

Статьи по теме

Параметры, применяемые к изображениям в HTML

Для того чтобы проводить небольшие манипуляции с изображениями, в HTML используются определенные параметры для картинок. Например:

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

При несоответствии оригинального размера и указанного в атрибутах, браузер принудительно отображает то, что вы указали. Если вы указываете пропорции отличающиеся от пропорций оригинала, браузер будет искажать картинку. Например:

Для решения этой проблемы (например если лень высчитывать пропорции и смотреть оригинальное разрешение), можно указать один параметр по которому браузер и будет высчитывать пропорции. Кстати, не обязательно писать «20px», можно просто написать «20». Идем дальше, на очереди параметр alt.

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

Пример HTML-кода:

Результат:

Подсвечивается при наведении пользователем мышки на картинку и также используется в поисковой оптимизации.

Пример HTML-кода:

Результат:

Следующие атрибуты это vspace, hspace и border.

Пример HTML-кода:

Результат:

Код:

Результат:

Помимо этого можно использовать обычный атрибут style, если вам так хочется:

Вот что получится:

Сайты иногда присваивают картинкам классы в эстетических целях, чтобы все картинки имели одинаковый стиль обрамления (например, какие-нибудь красивые border). В .css файле задается общий параметр для одного класса, например, pic. Затем он указывается в HTML:

На этом базовая часть теории закончена, перейдем к дополнительным возможностям.

Как создать страничку

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

Откройте документ.

Вставьте в него вот этот код.

Моя первая страница

Создать страницу проще, чем вы думаете

Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учитьВажно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.

Простой код позволяет сделать текст красным
Написать жирным не намного сложнее

Мы дошли до самого низа

Теперь вы знаете чуть больше о тегах и можете использовать их

Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино.

К примеру, вот ссылка на мой блог — Start-Luck — рассказывает просто о «сложном».

Ну вот и все. Ваша первая страница готова

Теперь нажмите «Сохранить как…». Это очень важный момент.

Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.

Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.

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

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

Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.