Теги html картинка и выравнивание страницы по центру

Теги html выравнивание страницы по центру

Урок №2

В этом уроке рассматриваем html теги для вставки картинки и выравнивание текста по центру.

Теги html выравнивание, для того, чтобы выровнять текст или часть текста по центру, используем теги <center> </center> . Нужную часть текста заключаем между этими тегами. Для примера возьмем код, который мы составили выше.

<html>
<head>
<title>Ваша страница в интернет</title>
</head>
<body bgcolor="#00CCFF" text="#FFFF00">
<center>
Самая простая страница в интернет. <br>Сделанная за пять минут.
<br><font color="#0000FF">Нет ничего проще!</font>
</center>
</body>
</html>

Здесь мы применили тег html для выравнивания текста

Наберите  этот код в блокноте и сохраните как page.html, затем откройте и посмотрите, как это будет выглядеть в браузере.

 Html теги картинка, вставляем картинку на нашу страницу

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

Используем html тег для вставки картинки

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

Примечание: документ page.html, в котором вы сохраняете ваш код, в папке будет отображаться как значок браузера, который вы обычно используете и для того, чтобы сделать в нем правку кода, нужно нажать на него правой кнопкой мыши, а затем «открыть с помощью» / «блокнот», после изменения не забываем сохранять.

Для вставки картинки применим  html тег <img>, а конструкция целиком будет выглядеть так:

<img src="название картинки.jpg">

 Название картинки должно быть точным, например bodyart.jpg , теперь эту конструкцию вставляем в код который мы создали ранее перед закрывающим тегом </center>, либо в любое место, между тегами <center> и </center>, можете экспериментировать и смотреть, что получается.  Для того, что бы картинка не прилипала к тексту, используйте тег <br> ( например два тега <br><br> делают отступ на две строчки ниже текста)

При добавлении картинки желательно задать нужные размеры при помощи тегов vidth (ширина) и height (высота), тогда конструкция кода будет выглядеть следующим образом,

html тег картинки:

<img src="название картинки.jpg" vidth="250" height="180">

где 250 и 180 – размеры в пикселях.

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

<img src="название картинки.jpg" vidth="250" height="180" title="ваш текст">

Еще раз стоит отметить, что при составлении html кода, необходимо соблюдать синтаксис, т.е. точность знаков, пробелов, правильность написания тегов. (смотри урок №1 )

3 Responses to Теги html картинка и выравнивание страницы по центру

  1. Александр:

    Отлично все написано. Но вот про обтекание было бы хорошо добавить.

    • Спасибо Александр! В свое время я решил, что HTML верстка не тема моего блога, поэтому в этом разделе только то, что касается работы с вордпресс…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *