5 шагов к пониманию базового HTML-кода

5 шагов к пониманию базового HTML-кода

HTML - это жизненно важная часть всемирной паутины, какой мы ее знаем. И хотя немногие веб-дизайнеры создают страницы, вручную набирая HTML, все же полезно немного узнать об этом.





Мы собираемся рассмотреть некоторые основы языка, включая то, что на самом деле представляет собой HTML, некоторые фундаментальные концепции и то, как он взаимодействует с другими языками. Думайте об этом как об ускоренном курсе «HTML для чайников».



Основы HTML: что такое HTML?

HTML означает Язык гипертекстовой разметки . И хотя иногда это относится к языкам программирования, это не совсем верно.





Как язык разметки , Только HTML позволяет создавать макет отображения страниц. Правда язык программирования , как Java или C ++, содержит логику и выполняемые команды.

Хотя это просто, HTML лежит в основе каждой страницы в Интернете. Он отвечает за то, какой текст будет отображаться полужирным шрифтом, за добавление изображений и ссылки на другие страницы. У нас есть ответы на часто задаваемые вопросы в формате HTML, которые объясняют больше.



Вы можете щелкнуть правой кнопкой мыши большинство веб-страниц в своем браузере и выбрать Просмотреть исходный код страницы или что-то подобное, чтобы увидеть скрытый за ними HTML. Скорее всего, он также будет содержать много кода, отличного от HTML, но вы можете его просмотреть.

Даже если у вас нет опыта работы с языками разметки или программирования, небольшое изучение HTML сделает вас более информированным пользователем сети. Давайте рассмотрим пять основных шагов, которые помогут вам понять, как работает HTML. Мы будем приводить примеры по ходу дела.



Шаг 1: понимание концепции тегов

HTML использует систему теги для классификации различных элементов документа.

Большинство тегов идут парами, чтобы заключить в них затронутый текст. Вот простой пример (



тег делает текст жирный ; мы обсудим это позже.)

This is some bold text .

Обратите внимание, как закрывающий тег начинается с косой черты (/). Это означает закрывающий тег, что важно. Если вы не закроете тег, все с самого начала будет иметь этот атрибут.

как подключить airpods к ноутбуку с windows 10

Однако не все теги имеют пару. Некоторые элементы HTML, называемые пустые элементы , не имеют содержания и существуют сами по себе. Примером может служить


тег, который является разрывом строки. Вы можете «закрыть» такие теги, добавив косую черту (например,


) но это не обязательно.

Шаг 2: макет скелета HTML

В правильном HTML-документе должны быть определены определенные теги, чтобы он был правильно оформлен. Это основные части:

  • Каждый документ HTML должен начинаться с заявить о себе в качестве такового. Таким образом, его закрывающий тег , является последним элементом HTML-файла.
  • Затем Раздел включает такую ​​информацию, как заголовок страницы, различные сценарии, выполняемые на странице, и т.п. Как следует из названия, это обычно идет сразу после начального ярлык. Конечный пользователь не видит большой части содержимого этих тегов.
  • Наконец, тег содержит текст страницы, которую видит читатель (и многое другое). Здесь вы найдете изображения, ссылки и многое другое.

Поскольку

Раздел составляет основную часть HTML-документа, остальная часть нашего пошагового руководства рассматривает элементы, которые к нему относятся.

Шаг 3. Основные HTML-теги для форматирования

Затем давайте рассмотрим некоторые общие теги, из которых состоят документы HTML. Конечно, невозможно охватить все элементы, поэтому мы рассмотрим некоторые из наиболее важных. Мы покрыли еще много примеров HTML если это вас не устраивает.

Если эти теги кажутся довольно простыми, помните, что HTML был создан еще в 1993 году. Интернет тогда был в значительной степени текстовым.

Простое форматирование текста

HTML поддерживает основные стили текста, как в Microsoft Word:

  • теги делают текст жирный .
  • теги (что означает 'акцент') будут выделить курсивом текст.

HTML также поддерживает старые

тег для жирного и

для курсива. Однако предпочтительнее использовать указанные выше.

Суммируя,

а также

показывают, как что-то следует понимать, а последние теги только говорят вам, как это должно выглядеть. Эти прежние теги более доступны для программ чтения с экрана, используемых людьми с ослабленным зрением.

Абзац и другие разделы

HTML

тег позволяет определить раздел документа. Обычно это используется в паре с CSS (см. Ниже), чтобы отформатировать раздел определенным образом.

В

тег позволяет разделить текст на абзацы. Браузеры автоматически оставляют место до и после них, позволяя вам естественным образом разбивать текст.

Вы можете добавить заголовки в свой документ и упростить отслеживание с помощью

через

теги. H1 - самый важный заголовок, а H6 - наименее важный. Почти в каждой статье MakeUseOf используются заголовки H2 и H3 для организации информации.

Удары Входить добавление разрывов строк в ваш HTML-документ на самом деле их не отображает. Вместо этого вы можете использовать




чтобы добавить разрыв строки.

Вот пример, в котором все это используется:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



Шаг 4: Вставка изображений

Изображения являются важной частью большинства веб-страниц. Вы можете легко добавлять их с помощью HTML и даже устанавливать для них различные свойства.

Вы вставляете изображение, используя

ярлык. В сочетании с

Microsoft печать в PDF для Windows 8
src

Атрибут позволяет указать, откуда вы хотите загрузить изображение.

Еще один важный атрибут

теги это

alt

. Альтернативный текст позволяет описать изображение для программ чтения с экрана или в случае, если изображение не загружается должным образом. Вы можете навести указатель мыши на изображение, чтобы увидеть его замещающий текст.

Использовать

width

а также

height

элементы, чтобы указать количество пикселей, в которых появляется изображение.

Сложите все вместе, и тег изображения будет выглядеть так:

Dr. Phil

Всемирная паутина не была бы такой же сетью без ссылок на другие страницы. С помощью

тег, вы можете ссылаться на другие страницы с любым текстом.

Внутри

тег,

href

Атрибут сообщает, куда вы ссылаетесь. Просто вставьте URL-адрес. Вы можете использовать

title

элемент, чтобы добавить немного текста, который появляется, когда кто-то наводит курсор на ссылку.

Базовая ссылка выглядит так:

Visit Google

В

В теге есть много других возможных элементов, но мы не будем углубляться в них.

Как HTML соединяется с CSS и JavaScript

Мы рассмотрели основы HTML и то, как он создает веб-страницу. Но, как вы понимаете, сам по себе HTML не подходит для современной сети. Простые веб-страницы в формате HTML были обычным явлением во времена «Сети 1.0», когда большинство веб-сайтов представляли собой не что иное, как статический текст.

Но теперь у нас есть намного больше. CSS (каскадные таблицы стилей) - это язык, используемый для описания того, как должен выглядеть текст, подготовленный вами в HTML. Помните

тег мы обсуждали? Внутри этого (и других тегов) вы можете определить

class

атрибут. Затем в сопроводительном документе CSS вы можете написать инструкции, как это

class

надо смотреть.

Вы можете определить эти элементы стиля в своем HTML-коде, но это считается плохой практикой, так как поддерживать их намного сложнее. Узнать больше с эти простые примеры CSS . Также проверьте как оптимизировать ваши файлы CSS .

JavaScript

Мы видели, что HTML определяет содержимое, а CSS определяет внешний вид. JavaScript, последний член трио жизненно важных для Интернета, позволяет веб-страницам реагировать на действия людей, не загружая каждый раз новую страницу.

Например, JavaScript позволяет веб-сайту предупреждать вас о том, что введенный вами пароль не соответствует его требованиям, прежде чем вы попытаетесь его отправить. Веб-дизайнер может использовать JavaScript для циклического просмотра изображений в слайд-шоу или для запроса ввода данных пользователем.

Это всего лишь несколько элементарных примеров. JavaScript - это язык сценариев, способный делать очень многое, и он сравнительно намного сложнее, чем HTML и CSS. Видеть наш обзор JavaScript для гораздо большего.

Рассмотрение всего объема веб-дизайна выходит за рамки этой статьи, но достаточно сказать, что HTML взаимодействует с другими языками для создания веб-страниц, которые мы знаем сегодня.

Эволюция HTML

Важно отметить, что HTML не статичен. HTML претерпел несколько изменений, последней из которых является HTML 5. Примечательно, что этот стандарт поддерживает встроенное видео, вместо того, чтобы полагаться на проприетарные форматы, такие как Adobe Flash.

В новых версиях HTML также время от времени объявляются устаревшие некоторые устаревшие теги. К ним относятся ужасные теги вроде

а также

(прокручиваемый и мигающий текст соответственно), часто встречающийся в дизайне веб-сайтов 1990-х годов. Так что имейте в виду, что стандарты меняются со временем.

Небольшие знания HTML имеют большое значение

Мы кратко рассказали, как работает HTML-документ. Теперь вы знаете основы структуры веб-страниц. Даже если вы не собираетесь создавать веб-страницы, вы немного больше осведомлены о сети, которую используете каждый день.

нашел iphone 6, могу ли я его использовать

Чтобы узнать больше, улучшите свои навыки веб-разработки с помощью основных инструментов, а затем ознакомьтесь с наше руководство о том, как создать свой первый веб-сайт .

Кредит изображения: Беляевский / Depositphotos

Делиться Делиться Твитнуть Эл. адрес 5 советов, как зарядить ваши машины VirtualBox Linux

Устали от низкой производительности виртуальных машин? Вот что вам нужно сделать, чтобы повысить производительность VirtualBox.

Читать далее Похожие темы
  • Программирование
  • HTML
  • Веб-разработка
  • JavaScript
  • Инструменты для веб-мастеров
  • Программирование
  • HTML5
Об авторе Бен Стегнер(Опубликовано 1735 статей)

Бен - заместитель редактора и менеджер по адаптации в MakeUseOf. Он оставил свою работу в сфере ИТ, чтобы писать полный рабочий день в 2016 году, и никогда не оглядывался назад. В качестве профессионального писателя он освещал технические руководства, рекомендации по видеоиграм и многое другое уже более семи лет.

Ещё от Ben Stegner

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться