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 и на закладку результатов, где мы для примера сделали нашу собственную веб-страницу.

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

HTML Basics. Introduction to HTML #5

Части тела

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

Мы узнали о закрывающихся и отрывающихся тегах. Также узнали, что все, что помещено между ними называется элементом.

элемент = <открытый тег> + содержимое + <закрытый тег>




Обратите внимание, что у нас есть как теги заголовка, так и теги тела. Фактически на странице отображается только то, что идет внутри тега <body>  Так же надо иметь ввиду что тег <body> идет внутри тега <html> а не внутри тега <head>, например:

<html>
    <head></head>
    <body></body>
</html>




задание

1. Между тегами заголовков задайте имя вашей страницы. Это может быть что угодно!
2. После закрывающегося тега </head>, напишите открывающийся и закрывающийся тег <body>.
3. Внутри <body>, давайте создадим абзацы! Каждый абзац требует, открывающийся и закрывающийся теги: <p> и </p>. Мы помещаем содержимое между тегами.
4. Между тегами <body>, создайте два абзаца, и напишите в каждом абзаце какое-то содержимое. (Это потребует 2 пары тегов <p>).

подсказка

Под закрытым тегом <head>, код должен выглядеть примерно так:
<body>
<p> содержимое первого абзаца </p>
<p> содержимое последнего абзаца </p>
</body>
И, конечно, самая последняя строка всегда должна быть </html>.

решение

<!DOCTYPE html>
<html>
    <head>
        <title>
        Абзацы
        </title>
    </head>
    <body>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </body>
</html>

HTML Basics. Introduction to HTML #4

Создаем head(голову).

 Весь наш HTML документ сосредоточен между открывающимся <html> и закрывающимся </html> тегом. 

 Внутри которого есть два основных тега: голова <head> и тело<body>. Рассмотрим тег head.
a. Он состоит из открывающегося и закрывающегося тега.
б. В нем содержится важная информация о веб-странице, например заголовок.
в. Заголовок это надпись, которую мы можем увидеть на вкладке (например, название страницы  "Introduction to HTML").

задание

1. Добавьте открытый <head> и закрытый </head> теги. Заметили намек, на что-то большее?
2. Между тегами <head> добавтье открытый и закрытый <title></title> теги.
3. Между тегов <title> напишите название вашей страницы : Bad to the Bonez Webpage Inc. Вы сможете увидеть название в верхней части окна вашего браузера: нажмите чтобы увидеть как это выглядит.
4. Нажмите Save & Submit Code!

подсказка

HTML теги <html> и </ html>. Как вы думаете, что произойдет в заголовке? Также обратите внимание: редактор Codecademy автоматически создает закрывающий тег. Он также делает для вас отступы. Является ли это неправильным? Что произойдет, когда вы захотите написать код самостоятельно без редактора Codecademy?
Хорошие новости: редакторы, которые используются в веб-разработке, обычно имеют такую же функцию. Они призваны помогать нам. Помните, что отступы не являются технически критичными для компьютера, чтобы понять, какие операции выполнять. Они призваны помогать нам, чтобы проще ориентироваться в коде, когда нам нужно вносить изменения.

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Bad to the Bonez Webpage Inc</title>
    </head>
</html>

HTML Basics. Introduction to HTML #3

Базовый термины.

Чтобы лучше понять HTML, мы должны научиться говорить на HTML. Вы уже могли заметить что мы часто используем <>.

1. Слова внутри <> называются тегами.
2. Теги почти всегда идут в парах: открывающийся и закрывающийся тег.
3. Пример открывающего тега: <html>.
4. Пример закрывающего тега: </html>.

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

<первый тег><последний тег>Текст!</последний тег></первый тег>

Последнее упражнение научило нас как настроить HTML файл. Все что мы будем делать дальше будет внутри тегов <html> и </html>.
Повторение-мать ученья! Еще раз:

Задание

1. Напишите тег <!DOCTYPE HTML>
2. Потом напишите открывающийся и закрывающийся тег <html>
3. Между <html> тегами напишите все что угодно
4. Нажмите Save & Submit Code чтобы увидеть результат.

Подсказка

Не стесняйтесь возвращаться назад,к предыдущим упражнениям, если забыли как выглядит какой то из тегов

Ответ

<!doctype html>
<html>
    <strong>Тег из первого задания вложенный в тег html</strong>
</html>

HTML Basics. Introduction to HTML #2

HTML и CSS

HTML расшифровывается как HyperText Markup Language (гипертекстовый язык разметки). Гипертекстовые означает "текст ссылки". Каждый раз, когда вы нажимаете на слово, которое откроет для вас новый Интернет-сайт, вы нажимаете на гипертекст!

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

Что делает веб-страницы, красивее  Это CSS - Cascading Style Sheets(каскадные таблицы стилей). Представьте что это, как кожа и макияж, которые покрывают кости HTML. Мы будем изучать HTML, а о CSS в узнаем в последующих курсах.

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

a. Всегда пишите <!DOCTYPE html> в первой строке. Это скажет браузеру, на каком языке ему читать (в данном случае, HTML).

б. Всегда пишите <html> на следующей строке. Это начало HTML-документа.

c. Всегда пишите </html> на последней строке. Это означет конец HTML-документа.

Задание

1. Перейдите в test.html который на данный момент пуст и введите упомянутые ранее 3 строчки
2. В промежутке между второй и последней строкой (между тегами <html> и <htm>) введите любое сообщение по вашему желанию.

Подсказка

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

Решение

<!DOCTYPE html>
<html>
    Любой текст
</html>

HTML Basics. Introduction to HTML. #1

Введение в HTML

   Зачем изучать HTML?

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

   В редакторе справа есть закладка называемая test.html. Это файл, в котором мы будем печать наш html код. Видите код в скобках <>? Это html! Как и любой другой язык, он имеет свой собственный специальный синтаксис (правила общения).

   Когда мы нажимаем Save&Submit (сохранить и отправить), на вкладке с результатами  вы сможете увидеть, как это выглядит в интернет браузере(например. Chrome, Firefox, Internet Explorer). Работа браузера преобразовывать код  test.html в привычную  для нас веб-страницу. Он знает как выглядит страница следуя синтаксису html.

Задание

1. Справа, у нас есть закладка test.html
2. Изменить текст в строке 2 (между <strong></strong>) напишите все что угодно!
3. Нажмите Save & Submit Code, и вы увидите, как test.html будет выглядеть в браузере. Вы увидели? Тег <strong></strong> выделил наш текст жирным шрифтом!

Подсказка

Если вы незнаете что написать в строке 2 то почему бы не изменить текст на "Я собираюсь изучать HTML"? Не изменяйте и не удоляйте теги

<strong> </strong>

Мы обьясним почему в ближайшее время.