Где все становится очень серьезно.

С Новым Годом! Надеюсь, у тебя все хорошо.

Теория - это круто, но я думаю, что пора начать писать реальный код. Эта серия называется Давайте создадим веб-сайт, а не Давайте скопируем и вставим код из лучшего блога в мире. Хотя я мог бы подумать о его переименовании.

Давайте сделаем это (изменение веб-сайта, а не названия).

Ваша первая настоящая страница

Примечания по дизайну

Хорошо, давайте будем реалистами. Это, вероятно, будет некрасиво, потому что я еще не показал вам, как добавить потрясающий стиль на ваш сайт. Это целая тема, которую мы изучим позже.

Так что да, твоя первая настоящая страница будет выглядеть ужасно.

Но он будет твоим. Что я считаю красивее всего остального.

Содержание

Почему бы не попробовать воссоздать что-то похожее на эту статью? Ага, давай сделаем это! Для этой первой страницы мы собираемся сделать такую ​​же запись в блоге, как эту. Но уродливее! О, да.

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

Не волнуйся! Этот проект может показаться сложным, но я знаю, что вы справитесь. Я проведу вас через все шаги.

Код код кодек *

* (немного) смешнее по-французски

Откроем блокнот и напишем базовые теги для HTML-кода.

Помните их? Что-то вроде этого:

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

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

Заголовок

Добавим заголовок. Вы действительно умеете это делать! Правильно, тег <h1>.

<html>
  <body>
    <h1>Awesome blog!</h1>
  </body>
</html>

Хорошо, мы получили титул! Сохраните свою страницу и откройте ее, и вы должны ее увидеть. Обратите внимание, что вы можете написать любой текст вместо «Отличный блог!».

Некоторые абзацы на всякий случай

Как насчет абзаца сейчас? Сообщение в блоге, состоящее только из заголовка, не очень увлекательно.

В HTML абзацы записываются с помощью тега <p>. Давай добавим еще один!

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
  </body>
</html>

Хорошо, это хорошо, но как насчет второго абзаца? На самом деле это действительно просто. Просто добавьте еще один тег!

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>
  </body>
</html>

Давайте добавим несколько списков

И, как мы все знаем, для каждого хорошего сообщения в блоге абсолютно нужен список из 10 вещей, в которые вы бы не поверили этой 35-летней одинокой маме, благодаря этой странной простой уловке, которую дерматологи ненавидят. !!!! 1 !! 1! 1!

К тому же №7 взорвет ваш мозг, черт возьми.

В HTML вы можете создавать списки двух типов: упорядоченные и неупорядоченные. Что касается разницы между ними, то в основном упорядоченный список перечисляет разные вещи по порядку (например, рецепт), тогда как в неупорядоченном списке порядок не имеет значения (например, список стран в Европе). Вы создаете упорядоченный список с помощью тега <ol> и используете тег <ul> для неупорядоченных. Каждый элемент в списке (будь то упорядоченный или неупорядоченный список) должен находиться внутри тега <li>.

Составим неупорядоченный список крутых персонажей комиксов. И пока мы это делаем, давайте добавим заголовок в этот список!

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>
    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>
  </body>
</html>

OK. Я уже слышу, как ты говоришь:

Но погоди ты, великолепный ублюдок, зачем ты поставил <h2>, когда сказал в начале статьи, что заголовки создаются с помощью <h1>?

Я действительно сказал что-то подобное? Еще раз проверьте начало статьи.

* самодовольная улыбка, гордый за себя *
* сомневается *
* проверяет начало статьи, чтобы быть уверенным *
* понимает, что именно он написал *
* надеется, что читатели не станут проверять начало статьи *
* делает вид, что этого никогда не было *

Так что да, как я уже сказал, <h1> предназначена только для самых важных титулов. Думайте об этом как о заголовках и подзаголовках в документе. В HTML существует шесть уровней важности. У вас также есть <h2>, <h3>, <h4>, <h5> и <h6>. При этом <h6> является наименее важным. В сообщении блога вы можете использовать <h1> для заголовка статьи, <h2> для заголовков основных частей, <h3> для заголовков подпунктов и т. Д.

Как насчет ссылок?

Помните предыдущую статью? В этом я сказал, что HTML означает язык гипертекстовой разметки.

Теги, которые вы изучали, являются частью разметки.

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

Вы, наверное, уже знаете, что такое ссылка, но на всякий случай вот краткое изложение: на странице ссылка - это, по сути, некоторый текст, при нажатии на который вы перейдете на другую страницу.

Например, все известные результаты поиска Google - это ссылки. И нажав эту ссылку, вы перейдете на главную страницу Medium.

В HTML вы создаете ссылку с помощью тега <a>.

<a>This is a link to the Medium homepage</a>

Хорошо. Если вы внимательно прочитаете несколько строк выше, где я объясняю, что такое ссылка, возможно, чего-то не хватает. Сможете угадать, что это?

Да, точно. Мы получили текст, но как сообщить браузеру, какую страницу он должен отображать при нажатии на ссылку?

Нам нужно добавить то, что называется атрибутом к нашему тегу <a>. Я не говорил о них раньше, чтобы упростить задачу, но думаю, пора вам о них узнать.

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

Поскольку это объяснение совершенно не помогает, давайте переведем его в код.

<a href="http://www.medium.com">This is a link to the Medium homepage</a>

Видите новую href вещь? Это атрибут. Этот конкретный атрибут сообщает браузеру, куда идти, когда пользователь щелкает текст из тега <a>.

Что касается синтаксиса: сначала вы указываете имя атрибута (в данном случае href), затем знак равенства и значение этого атрибута в двойных кавычках.

Как это: name="value"

Я знаю, что сейчас это, должно быть, сбивает с толку (если это не так, я горжусь тобой!), И это нормально. В следующих уроках мы рассмотрим многие другие атрибуты, и я гарантирую, что вы быстро их поймете.

Давайте добавим нашу новую ссылку на нашу страницу.

<html>
  <body>
    <h1>Awesome blog!</h1>
    <p>Hello, reader. This is my first post on this great blog. I hope you'll like it!</p>
    <p>And since you like paragraphs so much, here's another one!</p>
    <h2>List of badass comics characters</h2>
    <ul>
      <li>Batman</li>
      <li>Batman</li>
      <li>Batman</li>
      <li>Bruce Wayne</li>
      <li>Batman</li>
    </ul>
    <a href="http://www.medium.com">This is a link to the Medium homepage</a>
  </body>
</html>

И, наконец, образы!

Итак, у вас есть текст и все такое на вашей странице, и это действительно здорово. Но что, если сейчас 2018 год, и вы хотите добавить несколько классных изображений?

Что ж, вот и ваш захватывающий момент: мы увидим это подробно в следующем уроке!

В качестве спойлера: если вы хотите взглянуть на него сейчас, HTML-тег для изображений называется <img>. Кто бы мог подумать?

Увидимся в следующий раз!

Следующая статья доступна здесь!

Примечание. Этот пост является частью серии.

Как обычно, не стесняйтесь поделиться этой статьей, если она вам понравилась!