Изучайте HTML бесплатно в [2022] — Основные HTML-коды для начинающих
Что ж, есть хорошие новости: все это на самом деле невероятно просто. Вам не нужно быть программистом или кем-то в этом роде. Хотя HTML (язык гипертекстовой разметки) обычно считается «языком кодирования», это не очень мощный язык. Другими словами, HTML сам по себе не может использоваться для выполнения всех задач, которые теоретически могут выполняться компьютерами.
Добавьте CSS3 и JavaScript, и это станет совершенно другой статьей. Или книга. Но мы не касаемся этого, потому что вам, вероятно, просто нужно обновить свой веб-сайт изображениями ваших последних предложений. Я хочу упростить вам задачу, как и HTML.
Я собираюсь провести для вас экскурсию по HTML как языку для начинающих и объяснить, как строятся веб-страницы, самым простым из возможных способов. К концу этой статьи вы сможете понять, что видите, когда смотрите, например, на код шаблона блога в своей системе управления контентом (CMS).
Прежде чем мы перейдем к практическим вещам, одно небольшое замечание: «веб-мастер» — это то, что люди называли веб-дизайнерами, веб-разработчиками и контент-менеджерами в 90-х годах. Все три перечисленные роли обычно исполнял один и тот же человек, и эти люди, как правило, были такими же большими кретинами, как я.
Основные понятия
HTML буквально создан для того, чтобы сообщать вашему браузеру (например, Chrome или Firefox): «Вот что вам нужно отобразить на экране. Сделай это.» То есть HTML определяет фактическое содержимое веб-страницы, на которой вы находитесь. Это делается с помощью тегов, которые выглядят так: <p>Это какой-то текст.</p>
Эти буквы в скобках? Это теги. Тег «p» специально определяет абзац или общий блок текста. Вы также должны обратить внимание на то, что «закрывающий тег» использует символ «/», чтобы отличать себя от «открывающего тега». Не каждый тег работает таким образом. Некоторые теги являются единственными, поэтому они «открываются» и «закрываются» сами по себе, например: <img src=»» alt=»»>
Я доберусь до этого позже. В любом случае, есть, ну… множество тегов, и я не буду вдаваться во все. У меня нет ни времени, ни места, и если вы не планируете стать веб-дизайнером, вам не нужно знать их все. Но тег «p» (также известный как тег абзаца) очень важен.
----
<p>A Turing machine is a mathematical model of computation that defines an abstract machine, which manipulates symbols on a strip of tape according to a table of rules. Despite the model's simplicity, given any computer algorithm, a Turing machine capable of simulating that algorithm's logic can be constructed.</p>
----
Кроме того, в своей самой простой форме файл HTML представляет собой обычный текстовый файл, имя которого заканчивается на «.html». На самом деле вы можете создать целый веб-сайт с помощью Блокнота в Windows, хотя для этой работы есть много лучших текстовых редакторов.
Вернемся к тегам: теги могут иметь «атрибуты». Атрибуты используются для множества вещей, например, чтобы один абзац выглядел иначе, чем другой. Обычно это достигается с помощью атрибута «class=», например:
----
<p class="intro-text">This is an introductory paragraph.</p>
<p>This is a regular paragraph.</p>
----
Теперь вам нужно использовать совершенно другой язык — в частности, CSS — чтобы абзац с классом «intro-text» выглядел по-другому, но это руководство для другого дня. Кроме того, существует множество атрибутов, и не каждый атрибут можно использовать с каждым тегом. Опять же, я не собираюсь давать вам полный список.
Ваша самая первая веб-страница
HTML как язык фактически претерпел ряд изменений за эти годы. В настоящее время стандартная версия HTML называется HTML5, хотя вряд ли ее можно назвать пятой итерацией как таковой. Это соглашение об именах, созданное для удобства и брендинга, а не для точности.
HTML5 родился из разочарования и ярости ботаников и был предназначен для того, чтобы радикально упростить процесс написания HTML вручную, а также сделать код более легким для чтения как для людей, так и для компьютеров. В частности, он был разработан, чтобы предоставить больше контекста о содержании на странице.
Очень простая, голая HTML5-страница будет выглядеть так:
----
<!DOCTYPE html>
<html>
<head>
<title>This is my awesome web page.</title>
</head>
<body>
</body>
</html>
----
Эта строка «DOCTYPE» в начале сообщает браузеру, что он просматривает веб-страницу HTML5. Тег «html» используется, чтобы сообщить браузеру, где страница начинается и заканчивается. Об остальном мы поговорим через минуту.
Эта страница, если бы вы открыли ее в своем веб-браузере, представила бы вам совершенно пустое окно. Ну, вы бы увидели «Это моя потрясающая веб-страница». на вкладке браузера, но это все. Тег title делает это. Возможно, вы заметили два набора тегов, называемых «голова» и «тело». Давайте посмотрим на них:
Получил хорошую голову на плечах
Раздел «шапка» веб-страницы — это место, где вы размещаете всю информацию о самой веб-странице, но не место, где вы размещаете контент. Единственная часть шапки, которую пользователь действительно должен видеть на своем конце, — это заголовок, и он будет не на самой странице, а в пользовательском интерфейсе браузера.
Давайте посмотрим на другой пример:
----
<html>
<head>
<title>Elephants Galore!</title>
<link rel="stylesheet" href="style.css">
<meta name="Description" content="The elephant may well be one of the world's cutest animals. Read more about elephants here!">
<meta name="Keywords" content="elephant, mammal, lemurs are cute too">
</head>
</html>
----
Как видите, у этого примера больше, чем заголовок. У него есть тег «ссылка», который используется, чтобы сказать браузеру: «Эй, загрузи и этот файл тоже», и он устанавливает связь между двумя файлами. В данном случае он загружает файл CSS, который можно использовать для определения того, как HTML выглядит для пользователя с точки зрения типографики и макета страницы.
Он также имеет два «мета»-тега, которые используются для хранения битов информации о вашей веб-странице, которая используется такими приложениями, как поисковые системы. У меня есть одно с базовым описанием страницы, которое отображается на сайтах поисковых систем, когда эта страница появляется в их результатах. Второй метатег определяет ключевые слова, которые будут использоваться поисковой системой для категоризации.
Посмотрите на этот тег тела
Тег «body» — это место, куда вы помещаете весь контент, который пользователи фактически увидят, когда загрузят вашу страницу. Это может выглядеть так:
----
<html>
<head>
…
</head>
<body>
<header>
<h1>Elephants Galore!</h1>
</header>
<section class="pagecontent">
<p>Here's some text about elephants!</p>
</section>
<footer>Copyright © Elephants Galore!, 2467</footer>
</body>
</html>
----
И да, «заголовок» сильно отличается от «головы». Мы займемся этим позже.
Получите ваши основные теги контента здесь
Так что это может быть самый важный раздел для вас, читатель. Здесь вы узнаете, как изменить свой контент, не нарушая его. Итак, мы уже рассмотрели, что делает тег «p», так что я пропущу это. Давайте перейдем к остальному вашему основному содержимому и параметрам форматирования:
Сделайте свой сайт более удобным для чтения с помощью заголовков и подзаголовков
Заголовки — это большие фрагменты текста, которые отделяют абзацы меньшего текста, чтобы вам было легче просматривать статью. Существует шесть тегов, которые можно использовать для определения заголовков и подзаголовков:
----
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
----
Следует отметить, что теги «h1» — это самые большие заголовки самого высокого уровня, а теги «h6» — самые маленькие заголовки самого низкого уровня. Теги «h1» обычно используются для таких вещей, как заголовки страниц и логотипы веб-сайтов. Теги «h2» внизу обычно используются для разделения контента на вашей странице или в публикации.
Ссылка на… Все, с тегом «а»
Ладно, пришло время поговорить о гиперссылках, также известных просто как «ссылки». Мы ссылаемся на другие страницы нашего сайта, другой контент на той же странице и другие веб-сайты с помощью тега привязки или тега «a». Чтобы превратить некоторый текст в ссылку, вы заключаете его в тег привязки и используете атрибут «href=», чтобы установить URL-адрес ссылки.
Небольшой краткий контекст для тех, кто заинтересован: URL-адрес означает унифицированный указатель ресурсов, а на обычном языке это означает «веб-адрес». URL-адрес состоит из трех частей:
- Протокол: По сути, он сообщает компьютеру, какую информацию он будет получать или отправлять. Протоколами для веб-страниц являются «HTTP» (протокол передачи гипертекста) и HTTPS (зашифрованная версия HTTP).
URL-адрес в Интернете начинается с чего-то вроде «https://», хотя многие браузеры не всегда отображают эту часть. - Доменное имя или IP-адрес: для большинства людей это будет отображаться как имя веб-сайта, например «google». Иногда адрес включает префикс «www». в начале, но это выходит из моды. Вам больше не нужно включать его.
- Домен верхнего уровня (TLD): примеры включают «.com», «.org» и «.net», хотя в настоящее время во всем мире доступны сотни доменов верхнего уровня.
Все вместе вы получаете что-то похожее на «https://www.google.com». И снова «www». обычно больше не нужно вводить.
Когда вы ссылаетесь на другой веб-сайт в HTML, вы должны использовать полный URL-адрес, например:
----
<a href=”https://google.com”>Google</a>
----
Эта ссылка приведет пользователя — как вы уже догадались — на Google.com.
Однако когда вы ссылаетесь на другую страницу на своем собственном сайте, это немного меняет ситуацию. Вероятно, вы будете использовать так называемый «относительный URL». То есть URL-адрес указывает на другой файл на том же сервере. Если у вас есть две страницы в одной папке, например ваша домашняя страница (всегда с именем index.html) и страница «О нас» (в данном случае about.html), то ссылка с одной страницы на другую будет еще проще.
Чтобы сделать ссылку с главной страницы на страницу «О нас», просто напишите:
----
<a href=”about.html”>About Us</a>
----
Теперь, если ваша страница «О нас» находится в подпапке (которая находится в той же папке, что и index.html), и эта папка называется «о нас», код будет выглядеть так:
----
<a href=”about-us/about.html”>About Us</a>
----
Наконец, вы можете ссылаться на контент на своей странице. Когда пользователи нажимают на ссылку, их браузер автоматически прокручивает вниз, чтобы сделать связанный контент видимым.
Для этого контент, на который вы хотите сослаться, должен иметь атрибут «id=». Атрибут «id=» используется для определения важных разделов веб-страницы, и каждый отдельный «id=» следует использовать только один раз на странице. Код выглядит примерно так:
----
<a href="#content2"></a>
<div id="#content1">
<p>Here's some content.</p>
</div>
<div id="content2">
<p>Here's the content you want to link to.</p>
</div>
----
Покажите свои фотографии кошек с тегом «img»
У вас есть изображение, которое вы хотите разместить на своем веб-сайте? Затем вам понадобится тег «img»:
----
<img src="images/elephants.jpg" alt="Picture of darned cute baby elephants." width="640px" height="480px">
----
Тег img имеет два основных атрибута, о которых нужно помнить. Первый — это атрибут «src=», который сообщает браузеру, где находится фактическое изображение, чтобы браузер мог его загрузить. Во-вторых, тег «alt=» используется для нескольких целей, в том числе для того, чтобы люди, которые не могут видеть изображение, знали, о чем оно, и сообщая поисковым системам, о чем изображение.
Есть много людей, которые плохо видят, и они используют программы для чтения с экрана, чтобы читать им вслух веб-страницы. Альтернативный текст, как известно, необходим для того, чтобы помочь людям получить полное представление о вашем веб-сайте, даже если они не используют свои глаза для просмотра.
Вы, наверное, догадались, что делают теги «ширина» и «высота». Однако в адаптивном, удобном для мобильных устройств дизайне эти теги используются не всегда. Размер изображений определяется другими способами, а не в HTML. Да, и размеры в этом примере указаны в пикселях, поэтому «width=’640px» означает, что изображение имеет ширину 640 пикселей.
Создавайте списки, как будто вы Buzzfeed
В HTML существует два типа форматов списков. Первый называется «неупорядоченный список», который вам может быть известен как «маркированный список». Он предназначен для перечисления вещей, где конкретный порядок списка не имеет значения. Код выглядит следующим образом:
----
<ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
----
Второй формат списка — «упорядоченный список», в котором каждому элементу списка присваивается номер в порядке возрастания. Код выглядит следующим образом:
----
<ol>
<li>This is a list item.</li>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ol>
----
Цитата
Это не тот тег, который вы будете использовать каждый день, если только вы не редактируете много статей в HTML вручную, но я все равно решил поделиться им с вами. Тег «blockquote» используется для определения цитат и отделения этих цитат (визуально) от остального текста. Вот код:
----
<blockquote>May the Force be with you. - Some Jedi, probably</blockquote>
----
А вот как это может выглядеть в контексте:
Теги структуры страницы
Теперь это «строительные блоки» веб-страницы. Пользователи, как правило, не «видят» их как таковые, поскольку они используются для определения макета и структуры веб-страницы. Однако вам нужно знать о них, чтобы знать, на что вы смотрите, когда прокручиваете код страницы.
Разделяй и властвуй
Первый и самый старый HTML-тег в этом разделе — «div». Это своего рода разделитель общего назначения, предназначенный для отделения одной группы тегов контента от другой. Например, если у вас есть два столбца абзацев, вы можете написать такой код:
----
<div class="left-column">
<p>Here's some text in the left column.</p>
</div>
<div class="right-column">
<p>Here's some more text in the right column.</p>
</div>
----
Опять же, вам нужен CSS для написания кода, который на самом деле превратит эти два тега «div» в столбцы, иначе они не будут выглядеть так много. Я хочу сказать, что именно для этого используются теги «div». Вот как они выглядят с примененным кодом CSS макета.
Начало, Середина и Конец
Здесь мы обращаемся к тегам «заголовок», «раздел» и «нижний колонтитул». По сути, они похожи на «div», но предназначены для более конкретных целей. Тег «заголовок» используется для начала области содержимого. Вы можете использовать его, например, чтобы поместить название вашего веб-сайта вверху страницы, например:
----
<header>
<h1>Elephants Galore!</h1>
</header>
----
Тег section используется для разделения вашего контента на, ну… разделы . Например, если у вас есть одна область на вашей домашней странице, которая показывает ваши сообщения в блоге, а другая — ваши продукты электронной коммерции, вы можете использовать ее следующим образом:
----
<section id="blog">
Put your blog posts here.
</section>
<section id="eCommerce">
Put your store products here.
</section>
----
Наконец, тег «нижний колонтитул» используется для закрытия области контента . На веб-странице вы можете использовать тег «нижний колонтитул» для отображения информации об авторских правах, например:
----
<footer>Copyright © Elephants Galore!, 2467</footer>
----
Тег «Статья»
Тег «статья» используется для аналогичного контента, который сгруппирован в один раздел , например сообщений в блогах, списков продуктов электронной коммерции, списков недвижимости и т. д. Вы можете использовать теги «заголовок», «раздел» и «нижний колонтитул» внутри тега «статья» для упорядоченного отображения информации.
Вот пример:
----
<article>
<header>
<h3>This is a blog post title.</h3>
</header>
<section>
<p>Blog post content goes here.</p>
</section>
<footer>
<p>This post was published on Thursday, in the Elephant category.</p>p>
</footer>
</article>
<article>
<header>
<h3>This is a blog post title.</h3>
</header>
<section>
<p>Blog post content goes here.</p>
</section>
<footer>
<p>This post was published on Thursday, in the Elephant category.</p>
</footer>
</article>
<article>
<header>
<h3>This is a blog post title.</h3>
</header>
<section>
<p>Blog post content goes here.</p>
</section>
<footer>
<p>This post was published on Thursday, in the Elephant category.</p>
</footer>
</article>
----
Это должно помочь вам начать
Естественно, HTML может быть намного сложнее, чем то, что я показал вам здесь, но основные концепции достаточно просты. С тем, что вы узнали здесь, вы сможете копаться в веб-странице или шаблоне, не слишком беспокоясь о том, чтобы все испортить, если вы вносите только небольшие изменения.
Однако каждый шаблон или тема работает немного по-своему. Все они кодируются немного по-разному. Внимательно изучите атрибуты тегов «class=» и «id=», чтобы понять, что они делают и на какую часть страницы влияют. Не каждый разработчик пишет классы или идентификаторы, которые легко понять, но они могут помочь.
Создавайте резервные копии исходных файлов, часто сохраняйте их и не забывайте о самой волшебной из кнопок: «Отменить». И самое главное, получайте удовольствие!