Основы HTML и CSS - часть 2. Ссылки и изображения Ссылки
 Скачать 31.16 Kb.
|
|
«Ссылки и изображения» Ссылки Что такое ссылка Типичная ссылка представляет собой участок текста, щёлкая на который, вы переходите на другую страницу, открываете изображение, начинаете скачивать файл или перемещаетесь к какому-то месту на текущей странице. Ссылки создаются с помощью тега . Например: HTML Academy Тег можно использовать вообще без адреса, то есть без атрибута href. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Часто ссылки-заглушки используют, чтобы показать, что мы находимся на текущей странице: Когда мы удаляем атрибут href у ссылки, то лучше оставить подсказку о том, почему мы это сделали. Подсказку можно добавить с помощью атрибута title. Подсказка появится, когда курсор задержится над ссылкой некоторое время. 1 страница 2 страница 3 страница Абсолютные ссылки Если нужно сделать ссылку на другой сайт в интернете, то необходимо использовать «обычный» адрес. Этот «обычный» или полный адрес называется абсолютным. Выглядит он, например, так: https://site.ru/blog/index.html Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь. Относительные ссылки Когда файл по ссылке должен открываться локально на компьютере, используются относительные адреса. В отличие от «обычных» адресов, в нём нет адреса сайта. Например: day-2.html Относительные адреса работают не только для файлов на компьютере, но и для страниц в сети. Если выложить два каких-то файла в интернет (не меняя их взаимное расположение), то их ссылка друг на друга всё равно будет работать. Если в адресе нет имени сервера или протокола, то это относительный адрес. Ссылки на файл По ссылкам можно не только переходить, но и скачивать файлы. Для этого необходимо просто в атрибуте href прописать ссылку на этот файл. А для того чтобы предотвратить открытие файлов прямо в браузере, у тега существует атрибут download. Браузер скачает меня, а не будет читать Ссылки-якоря Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #, после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке. Глава 1 Ссылка-якорь используется для прокрутки к заданной части страницы, в том числе используется и в абсолютных адресах. Изображения Подключение изображений Для подключения изображений существует тег  Форматы изображений Существует несколько основных форматов изображений: JPEG, PNG, SVG и GIF. Формат SVG переводится как масштабируемая векторная графика. Качество таких изображений не меняется при изменении размеров, да и вес у них небольшой. Отлично подходит для малоцветных схем, логотипов и иконок. Чаще всего используется в случаях, когда необходимо масштабировать изображение без потерь, изменять цвет элементов изображения, анимировать части изображения. Формат JPEG подходит для фотографий, рисунков с большим количеством разноцветных деталей, изображений с плавным переходом яркости и контраста. При сжатии изображения ухудшается его качество. Формат PNG позволяет сохранять изображения, в которых требуется особенная чёткость. Главная особенность этого формата — поддержка прозрачности. Подходит для изображений с прозрачностью и полупрозрачностью, когда необходима повышенная точность полноцветных изображений и для изображений с резкими переходами цветов. Формат GIF используется для простейших анимаций. В последнее время GIF-изображения становятся всё менее используемыми и заменяются на другие, более оптимальные форматы. Размеры изображения Для управления шириной или высотой изображения, используются атрибуты width и height. Размеры в этих атрибутах задаются без единиц измерения. Если задать только один из размеров, ширину или высоту, то вторую размерность браузер вычислит самостоятельно исходя из пропорций изображения. Если задать картинке одновременно и высоту, и ширину, то браузер может нарушить пропорции исходного изображения. Атрибут alt В случаях, когда картинка не может отобразиться, для того, чтобы было понятно, что на ней изображено, существует альтернативный текст. Также альтернативный текст помогает сайтам оставаться доступными, например, для категории пользователей, которая не имеет возможности видеть картинки. Альтернативный текст изображения задаётся с помощью атрибута alt. Например:   Figure и figcaption Тег Для разъясняющего комментария к такому иллюстративному материалу существует тег   Подпись к содержимому Изображение-ссылка Ссылки можно делать не только с помощью текста, но и с помощью изображений. Для этого нужно обернуть тег «Знакомство с таблицами». Раздел 3 Выравнивание содержимого в ячейках За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right. За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom. Чтобы задать выравнивание содержимого ячеек, надо в стилях указать: { vertical-align: значение; text-align: значение; } Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов. Раскраска таблицы Таблицы можно раскрашивать, задавая цвет фона ячеек, фоновые изображения, цвет текста в ячейках, а также цвет рамок. Чтобы задать цвета для ячейки в CSS, нужен такой код: td { color: цвет; background-color: цвет; border: 1px solid цвет; } Раскрашивать можно и | , и | , и даже
|
|---|