На первый взгляд HTML-код кажется абракадаброй сложным набором знаков и символов. Но это совершенно не так. Есть куда более сложные вещи в IT. Давайте же познакомимся с этим "монстром".
Если почитать об HTML статью в Википедии, с первого раза новичку в Айти понятно станет совсем немного. Но почему бы это на всякий случай и для общего развития не сделать? Вот ссылка: https://ru.wikipedia.org/wiki/HTML.
А теперь простым языком:)!
HTML - это НЕ язык программирования!
Это определенный код. Или разметка. Она делается не для людей, а для браузеров (например, наиболее часто используемые браузеры, которые известны всем: Chrome, Opera, Mozilla, Yandex и т.п.).
Код информирует браузер о том, как именно ему следует отображать содержание сообщения на странице в интернете. То есть он форматирует размечает определенным образом текст: указывает, где заголовок, а где абзац, где цитата, а где таблица, куда нужно вставить фотографию (и откуда ее взять) или ссылку, как оформить тот или иной элемент.
Хотя более подробно оформлением текстов - параметрами цвета, размера, трансформации и т.п. - на веб-страницах управляет другая система - CSS. Но о ней в другой статье.
Таким образом разметка HTML чем-то напоминает манипуляции, которые мы проделываем с текстом в Word, когда его оформляем форматируем. И она точно не сложнее Ворда! Просто она менее привычна.
Если вы увидите документ вот с таким или похожим названием index.htm, знайте, что это документ, написанный в HTML.
История HTML
Совсем короткая историческая справка - откуда есть пошла, что называется:):
Вот посмотрите на самый первый вебсайт. Во так он выглядел.
Можно даже заглянуть на архивную страничку и потыкать по ссылкам:
http://info.cern.ch/hypertext/WWW/TheProject.html
6 августа 1991 года - 31 год назад (сегодня, кстати, годовщина) - был опубликован первый сайт. Именно там и был использован код HTML. Тогда он был еще очень мало разработанным. Поэтому и страница такая скучная. То там уже есть и ссылки, и заголовки, и списки. Вот отсюда и пошло развитие World Wide Web - сокращенно WWW.
Как записывается код HTML?
Основными единицами кода являются теги или элементы. Они записываются вот в таких скобках: <>. Чтобы браузер понимал, где начало и где конец определённой части текста, большинство тегов имеет открывающую и закрывающую части: соответственно <> и </>.
Например, абзац текста мы оформим вот таким образом:
<p> Любой текст </p>
Не так уж и сложно, правда?
Поехали дальше!
У тегов также могут быть и как правило бывают атрибуты. Если тег как бы отвечает на вопрос что?, то его атрибут - на вопрос как или какой?
Например, давайте оформим кнопку. Ее тег <button>кнопка</button>.
Это кнопка. Но нужно уточнить, что это за кнопка - что будет, если на нее нажать. Для этого уточнения к тегу добавляется атрибут, допустим, вот такой: type="reset". Это тип кнопки и в кавычках ее функция, действие, которое данная кнопка провоцирует.
Например, кнопка с этим атрибутом должна очистить все содержимое формы. Вот как это выглядит в коде:
<button type="reset">Очистить</button>
Вот еще один пример кнопки:
<button type="submit">Отправить</button></p>
Тем, кто знает английский, ориентироваться в коде HTML предельно просто, так как теги имеют в большинстве случаев прямое отношение к значению обозначаемых ими слов. Например, уже знакомый нам тег <p> - это производное от paragraph. Ну а с кнопкой еще проще: button и есть в переводе кнопка. Reset - это и есть сбросить или очистить, а submit - подтвердить или отправить.
Где писать HTML-код?
Можно, конечно, и в Word, но лучше в специальном редакторе. Ворд совершенно не предназначен для написания кода.
На сегодняшний день существует много инструментов для написания кода. Им будет посвящена отдельная статья с подробным разбором преимуществ и основных способах работы в них. В данной статье перечислим лишь наиболее удобные.
Вот некоторые наиболее популярные:
- Номер 1 (на мой взгляд) - Visual Studio Code.
Вот ссылка на данный бесплатный и очень удобный редактор:
- Номер 2 - Sublime Text
Этот редактор является условно платным. Вы можете им пользоваться, но система будет периодически приглашать вас зарегистрироваться и оформить подписку. Однако отказ от подобного действия не мешает продолжать комфортно работать.
Ссылка на этот также очень удобный редактор: https://www.sublimetext.com/
- Номер 3 - Atom
Мой учитель рекомендовала именно Атом, но мне, если честно, гораздо больше понравился редактор от Microsoft - Visual Studio Code.
Ссылка: https://atom.io. Обожаю плавающего "осми-котика":)
- И номер 4 - Notepad ++
Тоже на мой взгляд, очень неплохой и удобный редактор кода. С некоторыми весьма важными преимуществами.
Вот ссылка: https://notepad-plus-plus.org
Для выбора редактора кода нужно не только следовать чьим-то рекомендациям, но и попробовать их и выбрать тот самый любимый в соответствии со своими предпочтениями к функционалу, цветовому исполнению, доступным плагинам и т.п.
Итак, писать код совсем несложно. В следующей статье мы попробуем вместе начать кодить. Не пропустите!