Картинки в HTML
В четвертом уроке нашего обучения, мы будем вставлять картинки html на страницу.
Но прежде чем приступить, изучим новую пару тегов, это <center> </center>, нужны они для выравнивания по центру. Выровнять можно все, что угодно, можно картинки html, а можно и все, что есть на сайте.
Итак, заключим содержимое нашей страницы между тегами <center> </center>.
В итоге получим следующий html код:
<html><head>
<title>Название страницы моего первого сайта</title>
</head>
<body text="#CC0000" bgcolor="#494949">
<center>
Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>
</center>
</body>
</html>
Заметьте, что можно выровнять по центру только то, что находится между тегами <body> </body>.
html код картинки
Теперь мы подобрались к главной теме этого урока создания сайта, использование html кода картинки на странице нашего сайта.
Задача состоит в том, чтобы вставить, расположенную ниже, картинку у себя на странице.
Для начала необходимо скопировать эту картинку к себе на компьютер. Для этого нажмите правую кнопку мыши на картинку, в выпадающем меню выберите пункт «Сохранить изображение как…»
Далее в появившемся окне выберите директорию для сохранения. Нужно выбрать ту папку, в которой находиться ваша страница. Если вы следовали инструкциям, то она находится на диске С и называется web.
Нажимаете сохранить. Имя картинки html менять не нужно. Проследите, чтобы название было kartinka, а формат JPEG.
Тогда расширение у картинки будет .jpg, а полное название kartinka.jpg. Если при сохранении не будет видно .jpg – ничего страшного.
Итак, после сохранения картинки, необходимо прописать html код картинки на нашей страничке.
Картинки html, вставка
Сейчас будет изучен новый тег, позволяющий вставлять картинки html.Вот так он выглядит <img>, заметьте, что это непарный тег. Чтобы компьютер знал, какую именно html картинку нужно вставить, необходимо прописать параметр src= в теге <img>, а в значении параметра указать путь к картинке html.
То есть, должно получиться так <img src="kartinka.jpg"> , при условии, что картинка находиться в той же папке, что и страница.
Пришло время попрактиковаться. Вставьте html код картинки в нашу страницу. После изменений html код выглядит так:
<html><head>
<title>Название страницы моего первого сайта</title>
</head>
<body text="#CC0000" bgcolor="#494949">
<center>
Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>
<br><br>
<img src="kartinka.jpg">
</center>
</body>
</html>
Обратите внимание, что перед картинкой html есть два тега <br><br>, они нужны, чтобы картинка располагалась на две строчке ниже текста.
Помимо параметра указывающего адрес картинки html (src=""), в тег <img> можно вставлять параметры высоты и ширины картинки. Делать это не обязательно, но рекомендуется.
Итак? параметр шитаты - width="" высоты - height="". В кавычках указывается размер в пикселях.
Еще один параметр, который можно использовать в теге <img>, носит название title="", в кавычках нужно написать текст. Он будет всплывать при наведении на картинку html.
При внесении выше указанных изменений, получается следующий код:
<html><head>
<title>Название страницы моего первого сайта</title>
</head>
<body text="#CC0000" bgcolor="#494949">
<center>
Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>
<br><br>
<img src="kartinka.jpg" width="500" height="242" title="Эмблема сайта">
</center>
</body>
</html>
Если вы все сделали, согласно инструкции создания сайта, то получится
следующее > картинки html
Теперь вставка html кода картинки на сайт для вас не проблема. Вот так с каждым шагом, становится известно что-то новое.
Урок 5: форматируем текст html тегами.
Урок 6: вставляем ссылки в html код сайта.
Урок 8: таблицы в html, продолжение.