5 основных правил HTML для начинающих
13 ноября 2024 г.Язык разметки HTML обеспечивает основу для веб-разработчиков или владельцев бизнеса, работающих над собственными сайтами или CMS. Особенно если вы добавляете CSS и JavaScript, изучение HTML означает, что у вас будет прочная основа для создания и редизайна веб-сайтов.
Прежде чем начать создавать свою страницу, вам нужно будет определиться с базовым макетом. Для этого сядьте со старомодной бумагой и карандашом и начните делать наброски, намечая элементы страницы. Вам может не хватать желания заняться кодированием, но, нарисовав сначала свой сайт, вы сможете перестраивать дизайн по своему вкусу без кодирования и перекодирования.
Как только вы определились с организацией своего сайта, пришло время начать создавать страницы с помощью HTML-тегов — инструкций, которые окружают материал, такой как текст, изображения и ссылки на другие страницы, и сообщают веб-браузеру пользователя, как их отображать. Если вы хотите, чтобы изображение отображалось в левой части страницы, определенное слово отображалось жирным шрифтом или другое слово ссылалось на внешний ресурс, вы будете использовать HTML-теги для этого.
Пять правил кодирования с помощью HTML-тегов
Существует пять важных правил кодирования с использованием HTML-тегов.
- Теги всегда заключены в угловые скобки (символы «меньше/больше»), как в .
Большинство тегов идут парами и окружают материал, на который они влияют. Они работают как выключатель света: первый тег включает действие, а второй — выключает его. (Есть некоторые исключения. Например, тег
создает пустую строку и не имеет «выключателя». После того, как вы сделали перенос строки, вы не можете его отменить.) Второй тег — «выключатель» — всегда начинается с косой черты. Например, вы включаете полужирный шрифт с помощью , выкрикиваете свою часть, а затем возвращаетесь к обычному тексту с помощью . Первый тег включен, последний тег выключен. Теги встроены, поэтому, когда вы начинаете тег внутри другого тега, вам нужно закрыть этот внутренний тег перед закрытием внешнего тега. Например, страница не будет отображаться правильно с тегами в следующем порядке:
(абзац) позволяет изменить выравнивание абзаца по умолчанию (по левому краю). Например,
центрирует следующий абзац на странице.
Помните также, что HTML постоянно развивается, и старые браузеры часто не поддерживают новейшие теги. Когда браузер встречает HTML-тег, который он не понимает, он обычно игнорирует как тег, так и материал, на который он влияет. Таким образом, новейшие элементы будут отображаться для зрителей с новыми браузерами, не вызывая проблем для зрителей, использующих старые браузеры, которые будут видеть только материал, распознаваемый их браузерами. С другой стороны, браузеры рассматривают ошибки кодирования как незнакомый код. Если вы допустили ошибку при создании своей страницы, вы не обязательно увидите сообщение об ошибке; вы можете просто ничего не увидеть.
СМ.: Получите ответы на реальные вопросы от коллег-веб-разработчиков на форумах TechRepublic.
Вам следует всегда внимательно проверять все страницы в браузере, чтобы убедиться, что все, что должно там быть, отображается правильно. Мы рекомендуем просматривать страницы в нескольких версиях Google Chrome, Microsoft Edge и Safari от Apple — на платформах ПК и Mac, а также на мобильных устройствах, если это возможно, — чтобы убедиться, что все выглядит так, как вы задумали. Не все типы или версии браузеров ведут себя одинаково.
Каковы 10 основных тегов HTML?
: этот тег создает текстовые заголовки. H1 создает заголовок самого большого размера. Размеры заголовков идут от одного до шести, в порядке убывания. Как и в случае с большинством тегов html, закройте тег заголовка обратной косой чертой (
в случае размера заголовка 1).: этот тег обозначает основной текст.: Этот тег указывает на разрыв абзаца. Заключите начало и конец абзацев, чтобы разделить их. Например:
Эта статья представляет собой введение в HTML.
HTML помогает форматировать веб-контент.
:
создает разрыв строки. Вы можете предпочесть его тегу абзаца, если хотите разделить текст определенным количеством строк, а не только одной. Вам не нужно закрывать
. По сути, это заполнитель.
: Этот тег форматирует шрифт курсивом.
: Этот тег форматирует шрифт жирным шрифтом.
: Элемент немного сложен, но очень полезен. Он встраивает ссылки. HTML-код для добавления ссылок:
Добавьте URL-адрес, где указано, не забудьте включить кавычки. Измените текст ссылки на текст, который вы предпочитаете. Результат: Щелчок по тексту ссылки откроет URL-адрес.
: Этот тег встраивает изображения. Обычно этот тег используется следующим образом:
<код>
Атрибут src направляет браузер к изображению. Если вы размещаете изображение на своем собственном веб-сайте или сервере, вы можете использовать имя файла, как показано выше. Если нет, вы можете вместо этого направить атрибут src на URL.
Атрибут alt содержит место для альтернативного текста. Это важно для доступности или когда медленный интернет может помешать загрузке изображения. Напишите краткое описание изображения в разделе альтернативного текста, не забыв включить кавычки.
Вы можете изменить размер изображений, добавив style в скобках. Это будет выглядеть так:
<код>
Здесь вы можете настроить ширину и высоту.
Тег не обязательно закрывать.
: этот тег делает отступ в тексте, чтобы выделить его и показать, что текст является цитатой.Это лишь некоторые из множества тегов, которые у вас есть. W3Schools предлагает бесплатный учебник для большего количества. Вот некоторые другие:
Цвет текста можно задать либо с помощью предустановленных названий цветов, либо с помощью значений цветов в RGB, HEX или HSL. Это выглядит так:
<код>
…
создает таблицу. Создайте строки с помощью
и заполните столбцы с помощью .