HTML существует уже давно, поэтому самое время изучить основы. Что это, как это работает, и как написать некоторые общие элементы в HTML.
Прежде чем начать, обязательно ознакомьтесь с нашим руководством по бесплатным онлайн-редакторам HTML. и лучшие сайты для качественных примеров HTML примеров
Что такое HTML?
HTML — это язык, используемый для создания веб-страниц. HTML расшифровывается как Hypertext Markup Language и представляет собой простой набор инструкций для вашего веб-браузера. Используя эти инструкции, ваш браузер отображает, как должна выглядеть веб-страница.
Важно понимать, что это язык разметки , а не язык программирования . Языки программирования позволяют решать задачи, такие как математические уравнения, манипулирование данными или перемещение персонажа видеоигры.
Вы не можете написать какую-либо логику в HTML. Это касается только макета.
Как выглядит HTML?
HTML состоит из нескольких элементов, известных как «теги». Теги — это инструкции для стилизации определенной части вашей веб-страницы. Возвращаясь к построению, HTML — это планы, а теги — это особые функции, такие как окна или двери.
Вот как выглядит базовая веб-страница в HTML:
<html> <head> <title>MUO Website</title> </head> <body> </body> </html> Теги в HTML предопределены и определяют общие функции, такие как изображения, ссылки на другие веб-страницы, кнопки и многое другое.
Подавляющее большинство тегов должны быть открыты и закрыты . Это просто определяет некоторую функцию с текстом, изображениями или другими тегами внутри, а затем завершает определение. Если вернуться к домам, открыть тег — это все равно, что сказать «запусти окно здесь», а закрыть тег — значит сказать «вот где окно заканчивается».
HTML-теги не будут отображаться на вашем сайте. Ваш браузер следует инструкции, но никогда не показывает ее посетителям. Это не секрет, однако. Любой может посмотреть ваш HTML, как только вы опубликуете свои веб-страницы.
В то время как существует большое количество различных HTML-тегов, вам не нужно изучать их все, прежде чем вы сможете кодировать сайт. Сегодня вы узнаете, как писать некоторые общие теги и для чего они могут быть использованы.
Что такое атрибуты HTML-тегов?
Последнее, что нужно знать о тегах, это атрибуты . Атрибуты определяют особенности тегов. Если тегами являются окна и двери, то атрибуты определяют конкретные детали здания. Это может быть ширина и высота рамы, независимо от того, открывается ли окно или если дверь имеет замок.
Атрибуты включены в открывающий тег, например:
<p width="123" height="567"></p>
Вы не можете просто создать свои собственные теги или атрибуты. Атрибуты и теги предварительно определены Консорциумом World Wide Web (W3C).
Что такое HTML5?
HTML5 — это последняя версия HTML. Он содержит несколько новых тегов, атрибутов и функций.
Поскольку HTML представляет собой набор инструкций, разные веб-браузеры иногда интерпретируют его по-разному. Один браузер может решить, что окна и двери должны быть окрашены в черный цвет, если вы не скажете иначе.
Несмотря на то, что браузеры наконец-то стали полностью соответствовать друг другу, иногда вы все равно можете быть замечены с совершенно новыми функциями. Возможно, в Google Chrome реализован новый тег, а в Microsoft Internet Explorer — нет.
По большей части ваши веб-страницы будут выглядеть одинаково во всех основных браузерах, но все же стоит провести быструю проверку, прежде чем что-либо публиковать, особенно если вы используете новые теги, которые пока могут поддерживаться не всеми браузерами.
Если вы хотите узнать больше о HTML5, ознакомьтесь с нашим руководством по
Как закомментировать HTML
Как и многие другие языки, разметка или программирование, HTML имеет возможность «закомментировать» блоки разметки. Комментарий — это то, что игнорируется браузером. Это может быть примечание, чтобы напомнить себе о том, что делает этот конкретный фрагмент вашего сайта.
Комментируя разметку, вы указываете браузеру игнорировать один или несколько тегов. Это может быть полезно для удаления функциональности или для скрытия части вашего сайта без удаления кода.
Когда веб-браузер видит комментарий, он понимает его как «не используйте эти инструкции, пока я не скажу иначе». Комментарии состоят из «вступительного» комментария и «закрывающего» комментария — как теги.
Вот пример:
<!-- Don't forget to add the XYZ here! --> <p width="123" height="567"></p>
Комментирование кода выполняется точно так же:
<!-- <p width="123" height="567"></p> -->
Вместо сообщения поместите свою разметку между тегами комментариев.
Как вставить изображения в HTML
Вставка изображений в ваш HTML выполняется с помощью тега image:
<img src="MUO_logo.jpg" alt=" Logo">
Обратите внимание, как имя тега называется img , и есть два атрибута. Атрибут src указывает, где найти изображение, а тег alt является альтернативным текстовым описанием, если изображение не может быть загружено по какой-либо причине.
Тег изображения не нуждается в закрытии, в отличие от большинства других тегов.
Как изменить шрифт в HTML
Шрифты можно изменить с помощью тега шрифта и атрибута лица :
<font face="arial">MUO Arial Text</font>
Размер шрифта можно легко изменить с помощью атрибута размера :
<font size="12">MUO Big Text</font>
Если вы хотите изменить цвет шрифта, это легко сделать с помощью атрибута color :
<font color="red">MUO Red Text</font>
Эти атрибуты являются уникальными для тега шрифта . Если вы хотите использовать другой тег, вы можете вложить теги, поместив один внутри другого:
<p><font color="red">MUO Red Text</font></p>
Как добавить ссылку в HTML
Ссылки могут быть добавлены с помощью тега:
<a href="//www..com">.com</a>
Атрибут href является местом назначения вашей ссылки.
Как сделать таблицу в HTML
Таблицы HTML включают в себя несколько разных тегов. Вам нужно начать с табличного тега:
<table> </table>
Теперь добавьте несколько строк, используя тег tr :
<table> <tr> </tr> <tr> </tr> <tr> </tr> </table>
Наконец, используйте тег td для создания ячеек таблицы, которые также будут создавать столбцы:
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
Можно переборщить и сойти с ума со своей раскладкой стола, но обычно лучше, если это возможно, делать проще. В прошлом таблицы использовались для структурирования веб-страницы, но эта практика устарела и выглядит ужасно. Держите таблицы просто для передачи данных читателю.
Использование CSS с HTML
Эти примеры охватывают основы, но если вы хотите стать действительно креативным, вам нужно использовать CSS. Каскадные таблицы стилей позволяют намного лучше контролировать дизайн вашего сайта и позволяют повторно использовать довольно много кода между различными частями вашего сайта.
В то время как у нас есть учебные пособия по изучению CSS и быстрые примеры CSS , есть еще некоторые настройки, которые вы можете сделать в HTML.
Если вы хотите написать CSS вместе с вашим HTML, вы можете использовать атрибут style . Этот атрибут просто применяет CSS к тегу, на котором он используется:
<p ></p>
Хотя этот способ работает хорошо, вам будет сложно поддерживать его, если у вас много разметки, требующей аналогичного стиля.
Лучше всего использовать тег стиля , размещенный внутри тега head . Здесь вы можете определить CSS для всей вашей страницы:
<html> <head> <style type="text/css"> MANY CSS RULES </style> </head> </html>
Тег стиля имеет атрибут text / css . Это необходимо для того, чтобы ваш браузер точно знал стиль, ожидаемый в теге.
Третий и последний способ использования CSS — через внешний файл, используя тег link . Это связывает ваш HTML с CSS, хранящимся в его собственном файле, и это здорово, если у вас его много:
<link rel="stylesheet" type="text/css" href="muostyle.css">
Здесь используется несколько атрибутов. Атрибут rel объявляет вашу ссылку в виде таблицы стилей. Тип «text / css» снова определяется в атрибуте type , а атрибут href — это место, где находится внешний файл.
Как вы делаете сайт с HTML?
Как вы видели, HTML действительно не так уж и плох, не так ли? Используя несколько простых тегов и атрибутов, вы можете быстро собрать веб-страницу, даже если вы никогда раньше не писали HTML!
Если вы хотите написать полноценный веб-сайт, обязательно посмотрите наше руководство для начинающих по созданию веб-сайта.