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>


HTML Basics. Body elements #3

Используем все заголовки.

Хорошая работа! До сих пор мы использовали заголовки трех разных размеров. Учитывая, что существуют заголовки шести размеров, то и мы должны использовать все шесть. (Даже <h6>, наш скромный разносчик кофе, должен ощущать себя востребованным)

задание

1. Добавьте еще три заголовка в код, используя теги <h2>, <h4> и <h6>. Убедитесь в том, что все ваши теги закрыты.
2. Под каждым заголовком добавьте короткий абзац. Не забывайте, абзацы добавляются при помощи открытого и закрытого тегов <p></p>!

ответ

<!DOCTYPE html>
<html>
    <head>
        <title>
            Headings & Paragraphs
        </title>
    </head>
    <body>
        <h1>Заголовок h1</h1>
        <p>Первый абзац</p>
        <h3>Заголовок h3</h3>
        <p>Второй абзац</p>
        <h5>Заголовок h5</h5>
        <p>Третий абзац</p>
        <h2>Заголовок h2</h2>
        <p>абзац</p>
        <h4>Заголовок h4</h4>
        <p>абзац</p>
        <h6>Заголовок h6</h6>
        <p>абзац</p>
    </body>
</html>

HTML Basics. Body elements #2

Подробнее о заголовках!

HTML позволяет нам создавать заголовки разного размера. Заголовки бывают шести размеров, где <h1> босс, а <h6>  слабак!

<h1> - Генеральный директор

<h2> - Вице-президент Fancy Towne

<h3> - Директор некого направления

<h4> - Руководитель среднего звена

<h5> - Младший помощник

<h6> - Тот, кто разносит кофе

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

задание

1. Ваш код на данный момент имеет один абзац <h1> для двух параграфов.
2. Добавьте <h3> заголовок перед вторым абзацем.
3. Добавьте <h5> заголовок после второго абзаца, а затем добавьте третий абзац после этого заголовка.

ответ

<!DOCTYPE html>
<html>
    <head>
        <title>
            Headings & Paragraphs
        </title>
    </head>
    <body>
        <h1>Заголовок h1</h1>
        <p>Первый абзац</p>
        <h3>Заголовок h3</h3>
        <p>Второй абзац</p>
        <h5>Заголовок h5</h5>
        <p>Третий абзац</p>
    </body>
</html>

HTML Basics. Body elements #1

Абзацы и заголовки.

Мы определенно делаем успехи! Мы узнали, как и когда мы используем html. Также мы узнали как:
a. Установить теги в html - файле
b. Создать заголовок (в <head>)
c. Создать абзац (в <body> с помощью тега <p>).
Следующим шагом будет добавление заголовков для наших абзацев при помощи тегов заголовков. Давайте начнем с тега <h1> который обозначает что то важное.(Всем известно что самый важный шрифт является самым большим!)

задание

1. Спросите себя: почему эта страница так называется?
2. В основной части создайте заголовок. Чтобы это сделать создайте тег <h1>.
3. Добавьте содержимое в заголовок. Это может быть все что угодно!
4. Закройте элемент закрывающим тегом </h1>. (Ваш заголовок должен быть между <h1> и </h1>)
5. Под заголовком добавьте два абзаца с помощью тегов <p> с любым содержимым которое вам нравиться.

подсказка

Помните: для абзацев нужны теги <p> и </p>!

ответ

<!DOCTYPE html>
<html>
    <head>
        <title>
            Headings & Paragraphs
        </title>
    </head>
    <body>
        <h1>Заголовок</h1>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </body>
</html>

Web Fundamentals

Основы Web

   Новичок в программирование? Начните изучение с этого! Вы научитесь делать сайты используя блоки HTML и CSS, а также создадите собственный сайт после прохождения курса.

   Чему вы научитесь

• Как создать веб-сайты
• HTML и CSS
• Стиль и дизайн

  В этом курсе вас ожидает 6 лекций с практическими заданиями:

1. Введение в HTML: Эти уроки познакомит Вас с основами HTML, языком который используется  для создания веб-сайтов.
2. HTML Структура: Использование списков: В этом курсе мы рассмотрим более развернуто структуру HTML и начнем настройку страницы.
3. HTML Структура: Table, Div, и Span: В этой главе мы будем использовать таблицы, элементы div и диапазоны, чтобы научиться более широкому диапазону изменения содержания и стиля наших веб-страниц.
4. Введение в CSS: CSS-это то, что придает блеск вашей веб-странице: это тоже самое что кожа, на костях HTML. В этой главе мы начнем изучать стили для нашего веб-сайта.
5. CSS Классы и Идентификаторы: В этой главе мы поговорим о том, как группировать CSS-селекторы в классы, или указать единый селектор по идентификатору.
6. CSS элемент позиционирования: Здесь мы рассмотрим, как управлять тем, где и как ваши HTML элементы отображаются на странице.

Codecademy.com по русски

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

   Плюсы обучения на codecademy на лицо вам не надо ставить кучу программ настраивать что то на своем компьютере, чтобы начать обучение вам нужен браузер (по моим наблюдениям лучше всего пользоваться хромом) и подключение к интернету. Но не смотря на все плюсы у него есть небольшой недостаток ресурс на английском языке. Я решил это исправить и помочь людям плохо знакомым с английским языком переведя для них уроки и задания. Так как не всегда есть свободное время то сказать о частоте выходов переводов ничего не могу, но постараюсь делать их как можно чаще. В целом перевод будет выглядеть следующим образом:

Перевод урока с codecademy

Задание

Перевод задания

Подсказка с codecademy.com

Перевод подсказки

Мои коментарии если будут

Текст с коментариями

Решение

Решение урока для тех у ково что то не получаеться