Начиная с HTML
View more Tutorials:
Чтобы изучить HTML вам понадобится инструмент редактор, имеются очень много таких инструментов, что вызывают затруднения в вашем выборе. Поэтому выделите немного времени, чтобы прочитать статью ниже, она включает некоторые полезные для вас советы:
Перед тем как начать с HTML, нам нужно различить 2 принципа Tag (Тег) и Element (Элемент).
Элемент является тегом, имеется открытый тег, имеется закрытый тег, имеется атрибут (attribute) и имеется содержание в середине, как изображение выше.
В использовании распространеные принципы Tag (Tег) и Element (Элемент), часто путаются в использовании. Это значит Tag это Elmenet и Element это Tag. Проще говоря, в данном вебсайте принципы Tag и Element буду использоваться с одинаковым значением.
Все документы 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>
