Следуйте, где это начинается
Нет, пожалуйста, подпишитесь, иначе вы можете пропустить отличный контент. Также следуй за мной на dev.to
На дворе 2021 год, а мир все еще находится под атакой коронавируса. У большинства из нас появилось новое хобби и интерес. Возможно, кто-то из них делал веб-сайты или даже делал их, чтобы иметь дополнительный источник дохода. Но в любом случае, вы все равно должны знать, как использовать HTML, чтобы сделать себе сайт.
Основное понимание
Html — это очень простой и понятный язык программирования, который в наши дни составляет большую часть контента в Интернете. Каждый может просто найти несколько учебных пособий или руководств по использованию HTML. Черт возьми, даже ты только что это сделал, иначе зачем тебе это находить. Каждый также имеет возможность понять, как работает HTML и его элементы. Вы открываете элемент, а затем вам нужно его закрыть. Например, когда вы открываете холодильник, вы должны закрыть его, потому что, если вы его не закроете, все внутри испортится. Как и в случае с HTML, если вы откроете тег, но не закроете его, элемент не появится или может нарушить работу вашего сайта. Но вы еще не знаете, что такое элемент, так что это может показаться немного запутанным.
Простые факты
Когда вы смотрите на сайт, вы видите текст и текст, выделенный жирным шрифтом или подчеркнутый, текст, к которому прикреплена ссылка, большой или маленький текст, вы видите изображения и графику, которые помогут вам понять. Все эти «элементы» требуют своего рода тега. Для текста или абзацев требуется тег ‹p›, чтобы сайт или сервер знали, что этот текст является абзацем, поскольку он находится внутри тега ‹p›. Сайт узнает, когда прекратить чтение текста как абзаца, когда пользователь добавит ‹/p› в конец тега абзаца. Причина, по которой вы используете ‹/p›, заключается в том, что это то, что закрывает элемент, и если вы этого не сделаете, с вашим сайтом произойдет то, что описано выше. Так что найдите время после каждого элемента, который вы используете, чтобы закрыть его. Чтобы закрыть элементы, какой бы тег вы ни использовали, добавьте ‹/(элемент, который вы использовали)› в конце, чтобы закрыть его. Также, как упоминалось выше, я сказал теги, а не теги, так что это подводит нас к остальным тегам.
Теги
Существует множество различных тегов, которые вы можете использовать на своем веб-сайте. Один для изображения, один для абзаца, один для видео, один для подчеркивания, один для выделения текста жирным шрифтом, один для улучшения SEO вашего сайта, один для добавления таблиц и списков. Это одни из самых популярных тегов в Интернете.
<h1></h1>
Это тег, который сделает текст большим, как название этого абзаца. Вы используете тег h1 везде, где хотите выделить текст, обычно это название статьи или сайта.
<h2></h2>
Эти теги обычно используются под тегом h1 для слогана или какого-либо текста, который также важен, но не так важен, как тег h1. Большинство людей действительно используют этот тег для своего слогана.
<h3></h3>
Это самый распространенный тип тегов. Добавляется к каждому абзацу статьи или просто какое-то название чего-то. Большинство людей используют этот тип тега для разделов статей или названий статей на главной странице, поскольку это оптимизировано для SEO.
Это одни из наиболее распространенных тегов заголовков, используемых на разных веб-сайтах, которые используют люди. При создании веб-сайта они на самом деле важны, если вы планируете, чтобы ваш веб-сайт был популярным или просто был обнаружен в целом. Они отмечают содержимое и обычно содержат ключевые слова.
‹изображение›
Этот тег используется для добавления изображения на веб-сайт, чтобы помочь людям понять ваш сайт или просто заинтересовать людей вашим сайтом. Большинство пользователей веб-сайта с большей вероятностью покинут его, если на нем нет изображений или визуальных элементов. Однако использование этого тега немного отличается от того, к чему вы привыкли. Прежде чем закрыть ‹img›, вам нужно добавить src="" для добавления файла img. Сделайте это, используя следующее и используя свой собственный img и каталог. Закрывающий тег не нужен.
‹img src="/path/to/your/file.jpg"›
<a></a>
Теперь этот тег в некотором роде подобен тегу img. Чтобы использовать его, вам нужно использовать специальную строку внутри него, чтобы добавить ссылку в текст. Его очень легко использовать, и большинству поисковых систем нравится, когда вы добавляете ссылки на свой контент, но не слишком много ссылок. Вы можете добавить тег ‹a› на свой сайт, используя следующее.
- ‹a href="https://example.com"›текст ссылки здесь‹/a›
- ‹a href="/path/to/a/html/file/in/your/site.html"›текст ссылки здесь‹/a›
‹сильный›‹/сильный›
Если вы хотите выделить какой-либо текст на своем сайте жирным шрифтом, вам нужно использовать тег ‹strong›. Он очень прост и удобен в использовании. Найдите текст, который вы хотите выделить жирным шрифтом, и поместите его между тегами ‹strong›‹/strong›.
‹мета›‹/мета›
Это очень важный тег, если вы хотите, чтобы ваш сайт был в Google. По сути, метатеги — это то, что добавляет ключевые слова, описание и многое другое на ваш сайт. Пользователи вашего сайта не могут видеть содержимое этих тегов, так как они находятся в ‹шапке› вашего сайта. Поисковые системы, такие как Google, используют эти теги для ранжирования вашего сайта и поиска по нему.
‹название›‹/название›
Еще один очень важный тег для вашего сайта. Это делает текущую страницу, на которой вы находитесь, и делает имя вкладки красивым и аккуратным, а не уродливым файлом и каталогом. Требуется большинство поисковых систем.
‹голова›‹/голова›
Сюда идут любые SEO-теги, такие как метатег и тег title. Контент внутри этого элемента не будет показан пользователям вашего сайта. Он содержит контент для поисковых систем, такой как описание сайта и данные SEO.
‹тело›‹/тело›
Контент сайта, который вы будете показывать своим пользователям, будет находиться внутри этого элемента. Это необходимо, так как контент не будет отображаться, если вы не используете этот тег.
Теперь, когда вы знаете некоторые из наиболее важных тегов HTML, пришло время создать сайт с помощью HTML. Сначала это может показаться немного запутанным, но когда вы знаете, это очень просто понять.
Создание сайта
Чтобы создать HTML-сайт, вам сначала понадобится простой макет, чтобы убедиться, что у вас есть правильные теги. Используя следующий фрагмент, вы увидите тип документа, теги HTML для объявления содержимого HTML, а затем теги заголовка и тела.
Затем вы хотите добавить заголовок внутри тега head, а затем некоторый контент внутри тега body. Как только у вас это есть, вы готовы к работе. Поздравляю, вы только что создали простой HTML-сайт. Теперь вперед, изучайте CSS и js и делайте потрясающие вещи. Узнайте больше об HTML, чтобы расширить свой сайт.
Полный исходный код смотрите здесь: https://github.com/Grantrocks/htmltutorial/blob/main/index.html
