Изучите HTML за 5 минут

1656649813 izuchite html za 5 minut

Эрик Тирадо

Краткое руководство, которое поможет вам начать создание веб-сайтов.

HTML – это язык разметки, используемый для структурирования и представления содержимого во Всемирной паутине. Вместе с CSS и JavaScript это позволяет нам создавать красивые и интерактивные веб-сайты.

Поскольку HTML является основой Интернета, он также является важнейшим языком любой карьеры веб-разработчика. В этом быстром учебнике я научу вас самим основам.

И когда вы закончите, Я уже запустил бесплатный курс из 14 частей из HTML5 на Scrimba.com — интерактивная платформа, где вы можете в любое время перейти к коду воспроизводимого скринкаста.

Просмотреть первую лекцию можно здесь:

oq6Q3enVyEjlrywgdjb6A4Sti2KLmGkl-j5i

Ладно, прежде чем мы перейдем к HTML, я хочу начать с того, что расскажу вам немного об архитектуре Интернета. Это рассмотрит для нас роль HTML.

Базовая веб-архитектура

После того, как вы создали веб-сайт, вам нужно будет разместить его на сервере, чтобы сделать его доступным во всемирной сети. Все серверы имеют IP-адрес (т.е. 149.56.240.169), который можно считать номером телефона. Обычно мы размещаем доменное имя (т.е. scrimba.com) над этим IP-адресом, чтобы его было легче запомнить.

При вводе этого доменного имени в браузере он отправляет вызов серверу. Затем сервер пришлет кучу файлов HTML, CSS и JavaScript, как это:

BRF0UCTRXQwPmChUfudbIZnnelGaVxlnpiN1

Ваш браузер начинает загружать основной файл HTML, а затем продолжает работу с CSS и JavaScript. Эти файлы позволяют браузеру воспроизводить красивый интерактивный веб-сайт.

Теперь давайте поближе рассмотрим роль этих трех языков.

Что такое HTML?

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

VjV6nvDloznKazqZhXbn6tXzcb5zVPleJLn5

Что такое CSS?

Однако простой веб-сайт в формате HTML выглядит довольно уродливо, поэтому вам придется стилизовать его с помощью CSS. Его можно рассматривать как кожу и одежду сайта.

lZv-vAkRnVxCmzO0utjYN6iAa8bQxRveAY4n

Что такое JavaScript?

После того, как вы освоите CSS, вам следует продолжить работу с JavaScript. В нашей аналогии это как мозг и мышцы нашего сайта:

dsna40xpfnzPvB8Nymr1UbyfcUdXc6e7PfGa

Написание вашего первого файла HTML

Чтобы писать HTML, вам понадобится документ HTML, который является только документом из .html расширение. Неважно, каким текстовым редактором вы пользуетесь, но наиболее популярны сегодня Sublime Text, VS Code и Atom. Вы также можете использовать Scrimba в качестве редактора в браузере.

Давайте создадим новый файл и назовем его index.html, и писать Hello world! в этом.

Hello world!

Если мы перетащим этот файл в браузер или укажем браузер по адресу этого файла, мы получим следующее.

rTzDGGpCh3jeFfxV-AcUrppuVUP1Ao003VXj
Как это выглядит в Scrimba, когда вы открываете наш index.html в открывшемся окне браузера.

Добро пожаловать, теперь вы создали свой первый веб-сайт!

Ваш первый тег HTML

Однако мы еще не написали HTML теги. Для этого давайте завернем Hello world! текст в <h1> теги, например:

<h1>Hello world!</h1>

Первый <h1> — начальный тег, а второй one,

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

-MC8Z3OmD4TJUQXM5ZXe7HuQdLAQwA7tDFcL

Теперь вы сообщили браузеру, что хотите Hello world! текст будет заголовком. Таким образом, браузер применяет к нему некоторые стили, в основном увеличивая размер текста.

Вот так просто начать писать HTML.

Написание правильного документа HTML

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

Вот как наши Hello world! пример должен выглядеть так:

<!DOCTYPE html><html>  <head>  </head>  <body>    <h1>Hello world!</h1>  </body></html>

Вам не нужно беспокоиться о <!DOCTYPE>, tml>; и тег поскольку мы будем писать просто our conпалатка в тезисе . Продолжим это!

Абзацы

Под тегом h1 мы добавим абзац. Этот тэг обычно используется для абзацев текста.

<h1>Hello world!</h1><p>Hello, and welcome to my website!<p>

Вот как это выглядит:

ENf-gB8JjSydpHEnFQ2P23EU1ED6sq59Ex6q

Списки

Теперь давайте добавим список. Для этого нам нужно добавить два разных тега, <ul>; and

  • . Бывший означает unoупорядоченный список и последний стоит fили элемент списка. Нам понадобится to wрэп
  • ; tags внутри тега
      .

      <ul>  <li>Eat</li>  <li>Sleep</li>  <li>Code</li></ul>
      8R5TVf7aPKSVX-KjJKDhFCkfAyQ-Yi32sAR8

      Если вы измените <ul> to an

        то маркеры будут заменены цифрами, как это означает oупорядоченный список.

        Поля ввода

        Получение информации от пользователей является важной деятельностью на веб-сайтах. Добавим поле ввода.

        <input type="text" placeholder="Enter your email" />

        Это добавило бы поле ввода внизу нашего сайта:

        eWzjBQ8hS6ACs66Ptp4tlBtSiegkxBuK-eJj

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

        В нашем случае мы добавляем два атрибута: типа и заполнитель. The типа сообщает браузеру, что это должно быть текстовое поле. Здесь мы могли выбрать между разными типами (радио, выбор, флажок, дата), которые превратили бы его в совсем другие элементы.

        The заполнитель диктует текст справки внутри элемента.

        Наконец, тег ввода также самозакрывание элемент (также известен как элемент пустоты.)что означает, что он состоит не из открывающего и закрывающего тегов, а только из одного закрывающегося тега.

        Следующие шаги

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

        Если вам хочется еще, у нас есть бесплатный обед из 14 блюд.
        на моем курсе «Изучите HTML5 бесплатно» на Scrimba.com.

        Увидимся. ?

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *