Тимур Машнин

Введение в веб-разработку с HTML, CSS, JavaScript


Скачать книгу

вкладке или в новом окне.

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

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

      Такая ссылка имеет специфический формат атрибута href. Здесь есть символ #, за которым следует идентификатор фрагмента, как в этом примере section1, section2.

      Таким образом эта ссылка указывает на раздел страницы внутри элемента, который имеет идентификатор с атрибутом id.

      И вы можете использовать любой тег с идентификатором раздела.

      Обратите внимание, что имя раздела не содержит знака #. Только ссылка на этот раздел содержит знак #.

      И здесь у нас даже есть ссылка «назад к началу», которая указывает на начало документа – тег h1 с идентификатором top.

      И если вы щелкнете по такой ссылке, идентификатор фрагмента появится в URL-адресе, например index.html#section1, и вы можете скопировать и использовать этот URL-адрес в качестве другой ссылки. Так что при открытии страницы можно будет сразу перейти к разделу, на который указывает идентификатор.

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

      В этом примере первое изображение отображается прямо перед цитатой.

      И здесь у нас есть соответствующий комментарий. Так выглядит HTML-комментарий.

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

      И браузер полностью проигнорирует этот комментарий и не отобразит его.

      Теперь давайте посмотрим на тег изображения <img>.

      Изображение отображается в HTML с помощью этого тега img, который является сокращением от слова image. А атрибут src тега img – это URL-адрес, указывающий на файл изображения.

      И вы можете заметить, что этот URL-адрес ничем не отличается от href, который вы видели у тега ссылки <a>. Это может быть относительный URL-адрес или абсолютный URL-адрес, если он содержит внешнюю ссылку.

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

      Как вы видите, это изображение отображается в браузере в одной строке с текстом, так как тег img является встроенным элементом. Если бы это было не так, изображение было бы на своей собственной строке.

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

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