Начиная с HTML

View more Tutorials:

1- Редактор HTML

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

2- Tag vs Element

Перед тем как начать с  HTML, нам нужно различить 2 принципа  Tag (Тег) и  Element (Элемент).
Элемент является тегом, имеется открытый тег, имеется закрытый тег, имеется атрибут (attribute) и имеется содержание в середине, как изображение выше.
В использовании распространеные принципы  Tag (Tег) и Element (Элемент), часто путаются в использовании. Это значит  Tag это  Elmenet и  Element это  Tag. Проще говоря, в данном вебсайте принципы Tag и  Element буду использоваться с одинаковым значением.

3- Базовый HTML 

Все документы  HTML начинаются с объявления вида документа  <!DOCTYPE html>, это способ объявления у HTML5, способ объявления  HTML4 немного отличается и доволно длинный. Вам стоит использовать способ объявления у  HTML5 так как почти все нынешние вебсайты используют  HTML5.
Все содержания документа  HTML находятся между открытым тегом  <html> и закрытым тегом  </html>.
Имеется 2 прямых подтега у  <htm> это  <head> и <body>.

<head>

Внутри  <head>..</head> вы можете настроить базовую информацию для страницы:
  • Заголовка страницы
  • Теги meta содержащие информацию ключевых слов, описание документа.
  • Тег meta объявляющие кодирование (encoding) страницы.
  • Теги <script>, <style>, <link>,...
<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <meta charset="UTF-8">
      <meta name="description" content="My First HTML5">
      <meta name="author" content="o7planning">
      ...
   </head>
   <body>

     .....

   </body>
</html>

<body>

Внутри  <body>..</body> это где вы будете писать то, что будет отображаться на браузере. Иногда вы можете расположить теги  <script>, <style>, <link> здесь.

Html Link

Например создадим ссылку на адрес  google.com.
link-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Link Example</title>
      <meta charset="UTF-8">
   </head>
   <body>

     <p>Click the link below to access google.com</p>
     <a href="https://google.com">Google</a>

   </body>
</html>
Используя редактор  Atom вы можете просмотреть отображение страницы через  Atom HTML Preview во время написания кода.

HTML List

list-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>HTML List</title>
      <meta charset="UTF-8">
   </head>
   <body>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
      </ul>  

      <ol>
        <li>HTML</li>
        <li>CSS</li>
      </ol>

   </body>
</html>

View more Tutorials: