HTML Basics. Adding images to your site #5

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

HTML Basics. Adding images to your site #4

Изображения и ссылки

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

задание

1. Между тегами <body> добавьте два изображения одно из них должно быть ссылкой, другое нет. Ссылка может вести куда угодно.
2. После двух изображений добавьте просто текстовую ссылку. Ссылка может вести куда пожелаете.
Нажмите на подсказку, если вам нужна помощь.

подсказка

Изображения задаются так:
<img src="адрес картинки" />
Ссылки задаются так:
<a href="ссылка"></a>
Вы можете сделать ссылку из изображения:
<a href="ссылка"><img src="адрес картинки" /> </a>

решение

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtC1wx0LhZiKCfeBXxWOr2vVushgHSU1Nej-9f0zucdMvwDjBMLOlVPKNtSQcOva7ZDtyQakzoeOKcPcByfd_N25zFXrTc9dCaYc3cf-34t1ZnYnIvkAKkoQYN53F9r0Mudsp7fYZU14/s220/picture.png" />
        <a href="http://mestniy.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtC1wx0LhZiKCfeBXxWOr2vVushgHSU1Nej-9f0zucdMvwDjBMLOlVPKNtSQcOva7ZDtyQakzoeOKcPcByfd_N25zFXrTc9dCaYc3cf-34t1ZnYnIvkAKkoQYN53F9r0Mudsp7fYZU14/s220/picture.png" /></a>
        <a href="http://mestniy.blogspot.com">codecademy по русски</a>
    </body>
</html>


HTML Basics. Adding images to your site #3

Кликните по изображению

Отличная работа! Теперь вы знаете, как добавить изображение на ваш сайт. Но что если вы хотите чтобы клик по картинке вас перевел куда-нибудь?

Тег <a> используется для создания гиперссылок (или просто ссылок) на веб-страницах. Именно в этот тег помещаются, слова или изображения, нажимая которые вы попадаете на новую страницу.

Также как <img> тег <a> имеет атрибут, который указывает, куда надо перейти. Только вместо src в <a> используется href вот как это выглядит:

<a href="http://www.codecademy.com">Научитесь программированию!</a>

src означает «источник». Он указывает <img>  адрес где находиться изображение!

herf расшифровывается как "hypertext reference"(гипертекстовые ссылки). Помните когда мы говорили  про гипертекст (т.е. ссылка) что это текст на который мы можем нажать как на 

кнопку? А href как раз задает путь, куда ведет ссылка! Текст написанный после href не виден на странице, а видно на ней только то, что вы написали между тегами <a> и </a>.

задание

Давайте превратим изображение в ссылку. Для этого поставим, тег <a href=”url”> перед тегом <img> и поставим тег </a> в конце. В кавычках после href= напишем любой веб-адрес.

подсказка

Убедитесь, что вы указали адрес полностью, например: “ http://www.google.com”. Ах да не забудьте, что адрес должен находиться в кавычках. Ваш код должен выглядеть примерно так: <a href="LINK url"><img src="IMAGE url" /></a>. Попробуйте добавить изображение со ссылкой на “"http://codecademy.com"” и нажмите на него, чтобы увидеть, как это работает. Если вы используете другой адрес, есть шанс что ничего не будет работать, это связано с настройками безопасности на сайте.

решение

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
        <a href="http://ya.ru"><img src="http://yandex.st/www/1.587/yaru/i/logo.png"/></a>
    </body>
</html>

HTML Basics. Adding images to your site #2

Добавление изображений

Вы можете добавлять изображения, на страницы своего сайта сделав его еще более фантастичным. Для этого нужно использовать тег <img>  Этот тег немного отличается от других. Вместо того чтобы поместить ваше содержимое между тегами вы указываете тегу место откуда он получает картинку при помощи src  Он также отличается тем, что он самостоятельно закрывается, т.е. не требует отдельного закрывающего тега. Обратите внимание на / закрывающею его <img src="url" />.

Посмотрите как выглядит тег в редакторе, он добавляет изображение резиновой утки на страницу!(Вы можете посмотреть результат, нажав кнопку просмотр.)


Видите веб-адрес (URL - Uniform Resource Locator(универсальный адрес ресурса)) после src= ? Вот этот http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg". Он говорит тегу <img> откуда ему брать изображение.
Каждое изображение в интернете имеет свой URL – адрес изображения. Достаточно щелкнуть правой кнопкой мыши на изображении и выбрать «Копировать адрес изображения». Затем вставить полученный URL в кавычках после src= в вашем теге <img> .

задание

Добавьте второе изображение ниже первого. (Проверти что вы добавили его до закрытого тега <body> ) Если вам на ум не приходит хорошая картинка то просто воспользуйтесь этим ниндзя: http://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg

решение

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtC1wx0LhZiKCfeBXxWOr2vVushgHSU1Nej-9f0zucdMvwDjBMLOlVPKNtSQcOva7ZDtyQakzoeOKcPcByfd_N25zFXrTc9dCaYc3cf-34t1ZnYnIvkAKkoQYN53F9r0Mudsp7fYZU14/s220/picture.png" />
    </body>
</html>


HTML Basics. Adding images to your site #1

Давайте сделаем передышку в середине пути

Вы проделали великолепную работу! Вот краткий перечень того, что мы узнали:
1. HTML используется чтобы придать структуру сайту.
2. Мы открываем html файл через браузер, а он обрабатывает (показывает нам) файл.
3. У html файлов иметься <head> и <body> (как и у вас!).
4. В <head> мы используем тег <title> для указания названия страницы.
5. Так же мы узнали как создавать заголовки и абзацы.

задание

1. Добавьте название страницы между тегов <title>
2. Создайте <h3> заголовок в теле страницы. Напишите в вашем заголовке все что угодно! (Только не забудьте закрыть тег)
3. Создайте три абзаца, используя теги <p> и заполните их содержимым (например, об автомобилях, о вашем питомце, любимом городе, путешествиях пишите все что угодно!)

решение

<!DOCTYPE html>
<html>
    <head>
        <title>название страницы</title>
    </head>
    <body>
        <h3>Заголовок</h3>
        <p>Бентли</p>
        <p>Рыбки</p>
        <p>Кукуево :)</p>
    </body>
</html>