Introduction to HTML. Project: Build Your Own Webpage #6

Сошлись

Замечательно! Вот только есть одна проблема: страница как дом без дверей. На ней нет никакого способа войти или выйти! Мы исправим это, добавив пару ссылок.
После того как вы добавите ссылки можете считать что вы закончили. Получите удовольствие от созданной вами страницы.
Если страница все еще выглядит непривлекательно, не стоит волноваться. Скоро мы научим вас CSS  с помощью которого можно сделать вашу страницу более привлекательно.

задание

Создайте, по крайней мере, две ссылки на вашей странице. Вы можете сделать ссылку из изображения или из части текста, вы даже можете превратить в ссылку часть текста внутри тега <p>! Нажмите на подсказку, если вы забыли, как работает тег <a>.

подсказка

Помните, как создавать ссылки? Если нет, то вот так:
<a href=”ссылка”> текст или изображение! </a>

решение

<!doctype html>
<html>
    <head>
        <title>Продолжаем обучение</title>
    </head>
    <body>
        <a href="http://http://www.codecademy.com"><h1>Иванов Иван Иваныч</h1></a>
        <a href="http://mestniy.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtC1wx0LhZiKCfeBXxWOr2vVushgHSU1Nej-9f0zucdMvwDjBMLOlVPKNtSQcOva7ZDtyQakzoeOKcPcByfd_N25zFXrTc9dCaYc3cf-34t1ZnYnIvkAKkoQYN53F9r0Mudsp7fYZU14/s220/picture.png"/a></a>
        <p>Работа не волк, в лес не убежит.</p>
        <p>Сделал дело гуляй смело.</p>
        <p>Под лежачий камень вода не течет.</p>
    </body>
</html>


Introduction to HTML. Project: Build Your Own Webpage #5

Картинка стоит тысячи слов
Отличная работа! Все же ваша страница пока еще выглядит серой. Давайте добавим одно или два изображения чтобы украсить ее.
Помните, чтобы вставить изображение из Интернета, вы должны щелкнуть правой кнопкой мыши по нему и выбрать "Скопировать адрес(url) изображения" Затем использовать этот URL-адрес в теге <img>.

задание

Вставьте тег <img> между тегами <body>. Можете расположить его в любом месте. (Мы думаем, что лучше всего он будет смотреться после заголовка <h1>до начала абзацев <p>) В атрибуте src вы можете указать ссылку на любое изображение.

подсказка

Помните, как работает тег <img>? Если нет, то вот вам подсказка:
<img src=”адрес изображения”/>
Кроме того помните что, тег src должен быть написан в нижнем регистре чтобы все корректно работало.

решение

<!doctype html>
<html>
    <head>
        <title>Продолжаем обучение</title>
    </head>
    <body>
        <h1>Иванов Иван Иваныч</h1>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJtC1wx0LhZiKCfeBXxWOr2vVushgHSU1Nej-9f0zucdMvwDjBMLOlVPKNtSQcOva7ZDtyQakzoeOKcPcByfd_N25zFXrTc9dCaYc3cf-34t1ZnYnIvkAKkoQYN53F9r0Mudsp7fYZU14/s220/picture.png"/a>
        <p>Работа не волк, в лес не убежит.</p>
        <p>Сделал дело гуляй смело.</p>
        <p>Под лежачий камень вода не течет.</p>
    </body>
</html>

Introduction to HTML. Project: Build Your Own Webpage #4

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

задание

Вставьте три тега <p> после тега <h1>(он перед закрытым тегом </body>!). Напишите немного о себе в каждом из трех абзацах. Вы можете писать все что угодно! Ведь это ваша веб-страница.

подсказка

Не надо пошлости! Ведь вы знаете что дети сидят в интернете.

решение

<!doctype html>
<html>
    <head>
        <title>Продолжаем обучение</title>
    </head>
    <body>
        <h1>Иванов Иван Иваныч</h1>
        <p>Работа не волк, в лес не убежит.</p>
        <p>Сделал дело гуляй смело.</p>
        <p>Под лежачий камень вода не течет.</p>
    </body>
</html>

Introduction to HTML. Project: Build Your Own Webpage #3

Начнем с заголовка
Тут идет какой то непонятный текст отсылающий нас к статье в википедии про Защиту Чубакки. Точнее текст то понятный, непонятно как его понимать "Запомните: Если это рифмуется, то это правда! ".
Давайте используем заголовок <h1> на вашей странице чтобы дать понять что эта страница о вас.

задание

Создайте заголовок <h1> внутри body. Между открывающимся тегом <h1> и закрывающимся тегом <h1>, введите ваше имя, чтобы оно было у всех на виду.

решение

<!doctype html>
<html>
    <head>
        <title>Продолжаем обучение</title>
    </head>
    <body>
        <h1>Иванов Иван Иваныч</h1>
    </body>
</html>


Introduction to HTML. Project: Build Your Own Webpage #2

Каждый дом нуждается в фундаменте.
HTML страница похожа на дом: ей тоже нужен определенный каркас для того чтобы все заработало. Как и дому, html-странице необходим фундамент. В нашем случае фундамент состоит из тегов <!DOCTYPE>, <html>, <head>, и <body>.

задание

Ваша страница пуста. Давайте добавим необходимые нам вещи:
1. <!DOCTIPE> тег
2. <HTML> тег
3. <HEAD> тег
4. Тег <TITLE> (с любым заголовком) в вашем <HEAD> теге
5. Тег <BODY>

подсказка

Не стесняйтесь вернуться назад к HTML Basics если вы что-то забыли.

решение

<!doctype html>
<html>
    <head>
        <title>Продолжаем обучение</title>
    </head>
    <body>
    </body>
</html>


Introduction to HTML. Project: Build Your Own Webpage #1

Что вы будете делать.

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

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

Нажмите сохранить и отправить код, чтобы продолжить обучение.