Начало работы в HTML некоторые основные теги

Начало работы в HTML - некоторые основные теги

На этом втором уроке мы познакомимся с некоторыми основными тегами и атрибутами HTML..

Заголовок и заголовок

Начнем с нескольких тегов, которые используются для заголовков. Это от h1 до h6. h1 — самый большой заголовок, а h6 — самый маленький. "H" происходит от заголовка.

Эти теги важны для создания иерархии на сайтах..

На странице не должно быть более одного тега h1.

Это, наверное, вторая по важности вещь в SEO после тега title..

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

Ссылки

Используйте (якорь — якорь) для вставки ссылок.

Этот тег поддерживает атрибут href, который указывает, куда вести ссылку..

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

Абсолютные ссылки

Абсолютные ссылки — это те, которые содержат полный URL, начинающийся с http: // (или https: //)..

Относительные / относительные ссылки

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

Пример относительной ссылки — about.html. Если мы находимся на index.html на нашем сайте и у нас там есть такая ссылка, то откроется страница «О нас» сайта..

Если наш сайт имеет следующую структуру:

  • index.html
  • about.html
  • history.html (подстраница в папке / about /)

и мы хотим, чтобы index.html перешел на history.html, нам нужно будет ввести ссылку как href = "about / history.html" History / a.

Однако в противном случае нам потребуется сначала вернуться на один каталог назад. Это делается путем добавления ../ к адресу:

a href = "../ index.html"> Главная / a>

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

Читать также:  Настроить вебпакет

Затем мы можем использовать относительные ссылки на начало сайта (корень относительный). Они известны тем, что начинаются с косой черты: /. Таким образом, если у нас есть ссылка a href = "/ index.html" Home / a, она всегда будет вести на эту страницу (будь то в основной папке или во вложенной папке)..

Если мы воспользуемся тем, что узнали в предыдущем уроке, мы можем установить ссылку как:

a href = "/"> Home / a>

Поскольку index.html — это особое имя, если мы просто укажем на папку, браузер откроет этот файл..

Открывать ссылки в новом окне

тег также поддерживает целевой атрибут. Он указывает, следует ли открывать ссылку в том же окне или в новом. Открытие в том же окне является значением по умолчанию, поэтому вы можете просто пропустить его. Если хотите открыть в новом — добавьте target = "_ blank".

Стандарт xHTML Strict считает этот атрибут недопустимым. Если вы собираетесь использовать цель для ссылок и хотите использовать стандарт xHTML, он должен быть переходным, а не строгим. В противном случае ваш код не будет проверен. Не то чтобы это не сработало в браузерах, но вы не сможете похвастаться «100% действительным xHTML»..

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

Опять же о стандартах — xHTML Strict и Transitional даже не поддерживают фреймы, поэтому вам нужно использовать xHTML Frameset, чтобы ваш код был действительным..

Читать также:  Начало работы с PHP часть 2

Изображений

Теги img / (image — image) используются для добавления картинок.

Адрес загружаемого изображения устанавливается через атрибут src. Адрес снова может быть относительным или абсолютным (начиная с http: //). У этого тега есть еще один обязательный атрибут — alt (альтернатива).

В этом теге указывается текст, описывающий картинку. Используется роботами (например, Google) или людьми с нарушениями зрения. Последние используют программы, читающие контент сайта. Когда они достигают изображения, они читают текст из атрибута alt как описание того, что на картинке..

Также хорошо установить размер тега img / с помощью атрибутов ширины и высоты. В конце концов, полный тег изображения будет выглядеть так: img src = "image.jpg" width = "640" height = "360" alt = "Blue Sky" /.

Другие мультимедийные теги

Как и img /, мы можем использовать теги video / video и audio / audio. Они доступны в HTML5, а некоторые старые браузеры (Internet Explorer 7 и 8) не поддерживают эти теги..

Кроме того, есть другие ограничения со стороны кодеков и т. Д. Для получения дополнительной информации см. Мою публикацию для встраивания видео на веб-сайт. Он представляет много информации по теме видео тега и его альтернативных методах..

Контейнеры

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

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

Читать также:  Начало работы с JavaScript Возможности

Списки

Для создания списков используются два тега. Это ul (неупорядоченный список) и ol (упорядоченный список)..

Разница между этими двумя тегами заключается в том, что ul указывает точку, квадрат или что-то подобное перед элементами, которые содержит список, а ol нумерует их. Вот пример того и другого:

ПР

  1. Первый
  2. Второй
  3. В третьих

UL

  • яйца
  • молоко
  • хлеб

Оба тега должны содержать теги только одного строго определенного типа — li (элемент списка)..

Использование любых других тегов непосредственно в ol и ul запрещено. С другой стороны, в теге li вы можете иметь все, что хотите.

Котировки

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

В соответствующих случаях полезно использовать правильные теги, хотя мы можем использовать теги div практически для всего..

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

Такими новыми тегами HTML5 являются header, footer, nav, section, article и другие. Думаю, вы можете догадаться, какой из них лучше всего использовать.

Помимо этих тегов, есть много других. Скоро напишу еще один урок, в котором представлю еще несколько основных тегов и атрибутов.

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?