Когда я начал изучать HTML, я столкнулся с этой досадной проблемой, когда ни в одном из просмотренных мною руководств не было согласовано, что такое основной, базовый, простой код для HTML-документа. Некоторые будут включать этот тег ‹meta› с информацией, которую я никогда раньше не видел, а другие сказали бы, что вам абсолютно необходимо раздел ‹main› или теги ‹header› и ‹footer› для разделения контента. Даже когда эти руководства были согласованы, они не всегда объясняли зачем мне нужен небольшой код .
Теперь, когда я провел несколько месяцев в сфере HTML, я обнаружил, каковы основные строительные блоки для HTML-документа. Я имею в виду то, что некоторые люди могут назвать шаблонным или скелетным кодом, но все эти термины означают одно и то же. В принципе, каков минимум кода, который должен быть в файле HTML для правильной работы?
tl;dr
Если вас действительно не волнует назначение тегов, скопируйте этот код прямо здесь, и все будет готово.
‹! DOCTYPE›
Этот тег сообщает браузеру, какую версию HTML вы используете. Если вы посмотрите на код, использующий более старые версии HTML (например, HTML 4.01), вы увидите что-то вроде этого:
Если вы не работаете с устаревшим кодом, вы, вероятно, используете последнюю версию (HTML5). В этом случае вы будете использовать этот тег: ‹! DOCTYPE html›. Поместите его в самом верху вашего HTML-документа над всем остальным.
‹html›
Теги ‹html› - это просто «контейнеры» для вашего HTML-кода. Они говорят вашему браузеру: «Эй, здесь весь HTML». Это так просто. Самое важное, что нужно запомнить: как и большинство тегов в файле HTML, вам необходимо использовать открывающий ‹html› и закрывающий ‹/html› тег. Разместите их под тегом ‹! DOCTYPE›.
‹head›
Здесь вы, по сути, создаете настройку для своего веб-сайта. В тегах ‹head› вы будете включать ссылки на свои таблицы стилей (то есть ваш CSS), ссылки на ваш JavaScript, заголовок вашего веб-сайта и метаданные. Все это обсуждается ниже. Используйте открывающий ‹head› и закрывающий ‹/head› тег. Поместите их в свои теги ‹html›.
‹meta›
Здесь живут все ваши метаданные. Метаданные - это причудливый технический термин для «данных, описывающих другие данные». Думайте об этом как о настройках вашего HTML. Наиболее распространенный атрибут метаданных - charset, который описывает кодировку символов вашего файла или то, как браузер читает ваши файлы. Подавляющее большинство веб-браузеров умеют читать набор символов utf-8, что делает его наиболее подходящим кодировкой. Короче говоря, используйте этот тег: ‹meta charset =’ UTF-8 ’›. Поместите это в свои теги ‹head›. Примечание. НЕ ТРЕБУЕТСЯ закрывающий тег для ‹meta›. Это означает, что это самозакрывающийся тег.
‹title›
Возможно, это самый простой для запоминания тег. То, что вы помещаете в теги ‹title›, отображается на вкладках вашего браузера. Если я дам своему веб-сайту название «Doggos R Cute», он будет выглядеть так:
Или я мог бы сделать что-нибудь вроде:
Используйте открывающий ‹title› и закрывающий ‹/title› тег. Поместите эти теги в теги ‹head›.
‹body›
Здесь происходит все действие. Основная часть вашего HTML-кода будет находиться в тегах ‹body›. Вы можете добавлять такие вещи, как изображения, абзацы, заголовки, разделы, видео, музыкальные файлы и многое другое. Используйте открывающий ‹body› и закрывающий ‹/body› тег. Поместите их внутри тегов ‹html›, но вне тегов ‹head›. ‹Head› и ‹body› должны быть как два отдельных раздела в ваших тегах ‹html›.
Связывание с CSS и JavaScript
Большинство людей согласны с тем, что приведенный выше код - это все, что необходимо для работы веб-сайта. Это технически правильно, но приведенный выше скелетный код HTML не будет красивым или функциональным без добавления к нему CSS и JavaScript. Поскольку 99,9% посещаемых вами веб-сайтов будут иметь этот дополнительный код, мы также должны рассматривать теги, которые ссылаются на этот код, как необходимые.
‹link›
Тег ‹link› - это то, как вы прикрепляете свой CSS к HTML-файлу. В большинстве проектов есть несколько файлов, которые создаются в зависимости от языка или функциональности кода внутри них. Хотя вы можете поместить CSS прямо в свой HTML-файл, скорее всего, это не жизнеспособное решение для большинства проектов. Вместо этого вы создадите отдельный файл CSS, связанный с вашим файлом HTML. Тег ‹link› состоит из трех основных частей:
rel определяет отношения между вашим HTML-файлом и файлом, на который вы ссылаетесь. В случае CSS используйте rel = ’stylesheet’.
type - именно то, на что это похоже. Он сообщает браузеру тип файла, на который вы ссылаетесь. Для CSS используйте type = ’text / css’.
href - это расположение файла, на который вы ссылаетесь. Знание того, как связать файл, требует некоторых знаний о путях, но простой способ получить доступ к связанному файлу, когда вы начинаете, - это убедиться, что все ваши файлы находятся в одной папке. В этом случае используйте href = ’NameOfCSSFile.css’. Для получения более подробной информации о путях к документам ознакомьтесь с этой статьей.
Со всем этим добавленным полный тег будет выглядеть так:
‹Link rel =’ stylesheet ’type =’ text / css ’href =’ MyCSSFile.css ’›
Поместите этот тег в теги ‹head›. Примечание. ‹link› - это самозакрывающийся тег, что означает, что вам НЕ НУЖНО иметь закрывающий тег.
‹Script›
Теги ‹script› используются для связывания вашего HTML-файла с вашим JavaScript. Как и в случае с CSS, вы можете технически поместить свой скрипт непосредственно в эти теги в вашем HTML-файле, но лучше - особенно для крупных проектов - иметь ваш JavaScript в отдельном файле и использовать теги ‹script› для ссылки на него. В теге ‹script› есть две необходимые части:
type аналогичен атрибуту type , используемому в ‹link›. Для JavaScript используйте type = ’text / JavaScript’.
src является ‹script› эквивалентом href . Здесь вы указываете местоположение вашего файла JavaScript. Используйте src = ’SomeJavaScriptFile.js’.
Полный тег будет выглядеть так:
‹Script type =’ text / JavaScript ’src =’ MyJavaScript.js ’› ‹/script›
Хотите получить скидку 500 долларов на обучение в Bloc?
Если вы серьезно относитесь к обучению программированию, подумайте о подписке на учебный курс по программированию, например Bloc. Если вы отправите мне сообщение в LinkedIn со своим полным именем и адресом электронной почты, я могу порекомендовать вас. Я получу денежный бонус, а вы получите скидку 500 долларов на обучение. Безвоздмездно. Как только я отправлю ваше электронное письмо, с вами свяжется член команды Bloc, чтобы вы начали.
Нравится то, что вы читаете?
Дай ему и следуй за мной! Вы также можете найти похожие статьи в серии Программирование непрофессионала, где я описываю концепции кодирования с очень небольшим количеством жаргона и большим количеством изображений. Не понравилось? Это круто. Мы можем остаться друзьями.
