Содержание
HTML существует уже давно, поэтому самое время изучить основы. Что это, как это работает, и как написать некоторые общие элементы в HTML.
Прежде чем начать, обязательно ознакомьтесь с нашим руководством по бесплатным онлайн-редакторам HTML.
и лучшие сайты для качественных примеров HTML
,
Что такое HTML?
HTML — это язык, используемый для создания веб-страниц. HTML расшифровывается как Язык гипертекстовой разметки и просто набор инструкций для вашего веб-браузера. Используя эти инструкции, ваш браузер отображает, как должна выглядеть веб-страница.
Важно понимать, что это наценка язык, а не программирование язык. Языки программирования позволяют решать задачи, такие как математические уравнения, манипулирование данными или перемещение персонажа видеоигры.
Вы не можете написать какую-либо логику в HTML. Это касается только макета.
Как выглядит HTML?
HTML состоит из нескольких элементов, известных как «теги». Теги — это инструкции для стилизации определенной части вашей веб-страницы. Возвращаясь к построению, HTML — это планы, а теги — это особые функции, такие как окна или двери.
Вот как выглядит базовая веб-страница в HTML:
MUO Website
Теги в HTML предопределены и определяют общие функции, такие как изображения, ссылки на другие веб-страницы, кнопки и многое другое.
Подавляющее большинство тегов должно быть открыть а также закрыто. Это просто определяет некоторую особенность с текстом, изображениями или другими тегами внутри, а затем завершает определение. Если вернуться к домам, открыть тег — это все равно, что сказать «запусти окно здесь», а закрыть тег — значит сказать «вот где окно заканчивается».
HTML-теги не будут отображаться на вашем сайте. Ваш браузер следует инструкции, но никогда не показывает ее посетителям. Это не секрет, однако. Любой может посмотреть ваш HTML, как только вы опубликуете свои веб-страницы.
Несмотря на большое количество различных HTML-тегов, вам не нужно изучать их все, прежде чем вы сможете кодировать веб-сайт. Сегодня вы узнаете, как писать некоторые общие теги и для чего они могут быть использованы.
Что такое атрибуты HTML-тегов?
Последнее, что нужно знать о тегах, это атрибуты. Атрибуты определяют особенности тегов. Если тегами являются окна и двери, то атрибуты определяют конкретные детали здания. Это может быть ширина и высота рамы, независимо от того, открывается ли окно или если дверь имеет замок.
Атрибуты включены в открывающий тег, например:
Вы не можете просто создать свои собственные теги или атрибуты. Атрибуты и теги предварительно определены Консорциумом World Wide Web (W3C).
Что такое HTML5?
HTML5 — это последняя версия HTML. Он содержит несколько новых тегов, атрибутов и функций.
Поскольку HTML представляет собой набор инструкций, разные веб-браузеры иногда интерпретируют его по-разному. Один браузер может решить, что окна и двери должны быть окрашены в черный цвет, если вы не скажете иначе.
Хотя браузеры наконец-то стали полностью соответствовать друг другу, иногда вы все равно можете быть замечены с совершенно новыми функциями. Возможно, в Google Chrome реализован новый тег, а в Microsoft Internet Explorer — нет.
По большей части ваши веб-страницы будут выглядеть одинаково во всех основных браузерах, но все же стоит провести быструю проверку, прежде чем что-либо публиковать, особенно если вы используете новые теги, которые пока могут поддерживаться не всеми браузерами.
Если вы хотите узнать больше о HTML5, ознакомьтесь с нашим руководством по началу работы с HTML5.
,
Как закомментировать HTML
Как и многие другие языки, разметка или программирование, HTML имеет возможность «закомментировать» блоки разметки. Комментарий — это то, что игнорируется браузером. Это может быть примечание, чтобы напомнить себе о том, что делает этот конкретный фрагмент вашего сайта.
Комментируя разметку, вы указываете браузеру игнорировать один или несколько тегов. Это может быть полезно для удаления функциональности или для скрытия части вашего сайта без удаления кода.
Когда веб-браузер видит комментарий, он понимает его как «не используйте эти инструкции, пока я не скажу иначе». Комментарии состоят из «вступительного» комментария и «закрывающего» комментария — как теги.
Вот пример:
Комментирование кода выполняется точно так же:
Вместо сообщения поместите свою разметку между тегами комментариев.
Как вставить изображения в HTML
Вставка изображений в ваш HTML выполняется с помощью тега image:
Обратите внимание, как называется имя тега IMG, и есть два атрибута. ЦСИ атрибут указывает, где найти изображение, и альт tag — это альтернативное текстовое описание, если изображение не может быть загружено по какой-либо причине.
Тег изображения не нуждается в закрытии, в отличие от большинства других тегов.
Как изменить шрифт в HTML
Шрифты могут быть изменены с помощью шрифт тег и лицо атрибут:
MUO Arial Text
Размер шрифта можно легко изменить с помощью размер атрибут:
MUO Big Text
Если вы хотите изменить цвет шрифта, это легко сделать с помощью цвет атрибут:
MUO Red Text
Эти атрибуты являются уникальными для шрифт тег. Если вы хотите использовать другой тег, вы можете гнездо теги, поместив один внутри другого:
MUO Red Text
Как добавить ссылку в HTML
Ссылки могут быть добавлены с помощью тег:
MakeUseOf.comHREF Атрибут является местом назначения вашей ссылки.
Как сделать таблицу в HTML
Таблицы HTML включают в себя несколько разных тегов. Вам нужно начать с Таблица тег:
Теперь добавьте несколько строк, используя тр тег:
Наконец, используйте тд тег для создания ячеек таблицы, который также будет создавать столбцы:
Можно переборщить и сойти с ума с разметкой стола, но обычно лучше по возможности быть проще. В прошлом таблицы использовались для структурирования веб-страницы, но эта практика устарела и выглядит ужасно. Держите таблицы просто для передачи данных читателю.
Использование CSS с HTML
Эти примеры охватывают основы, но если вы хотите стать действительно креативным, вам нужно использовать CSS. Каскадные таблицы стилей позволяют намного лучше контролировать дизайн вашего сайта и позволяют повторно использовать довольно много кода между различными частями вашего сайта.
Пока у нас есть учебники по изучению CSS
и быстрые примеры CSS
Есть еще некоторые настройки, которые вы можете сделать в HTML.
Если вы хотите написать CSS вместе с вашим HTML, вы можете использовать стиль приписывать. Этот атрибут просто применяет CSS к тегу, в котором он используется:
Хотя этот способ работает хорошо, вам будет сложно поддерживать его, если у вас много разметки, требующей аналогичного стиля.
Лучше всего использовать стиль тег, расположенный внутри голова тег. Здесь вы можете определить CSS для всей вашей страницы:
MANY CSS RULES
Тег стиля имеет атрибут текст / CSS. Это необходимо для того, чтобы ваш браузер точно знал, какой стиль следует ожидать в теге.
Третий и последний способ использования CSS — через внешний файл, используя ссылка на сайт тег. Это связывает ваш HTML с CSS, хранящимся в его собственном файле, и это здорово, если у вас его много:
Здесь используется несколько атрибутов. отн Атрибут объявляет вашу ссылку в виде таблицы стилей. Тип «text / css» еще раз определен в тип атрибут, а HREF атрибут, где найти внешний файл.
Как вы делаете сайт с HTML?
Как вы видели, HTML действительно не так уж и плох, не так ли? Используя несколько простых тегов и атрибутов, вы можете быстро собрать веб-страницу, даже если вы никогда раньше не писали HTML!
Если вы хотите написать полноценный веб-сайт, обязательно посмотрите наше руководство для начинающих по созданию веб-сайта.
,
