Главная страница
Навигация по странице:

  • «Знакомство с таблицами». Раздел 3 Выравнивание содержимого в ячейках

  • Раскраска таблицы

  • Размеры таблицы

  • Размеры отдельных ячеек и столбцов

  • Основы HTML и CSS - часть 2. Ссылки и изображения Ссылки


    Скачать 31.16 Kb.
    НазваниеСсылки и изображения Ссылки
    Дата29.12.2022
    Размер31.16 Kb.
    Формат файлаdocx
    Имя файлаОсновы HTML и CSS - часть 2.docx
    ТипДокументы
    #868903

    «Ссылки и изображения»

    Ссылки

    Что такое ссылка

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

    Ссылки создаются с помощью тега . Например:

    HTML Academy

    Тег 
     можно использовать вообще без адреса, то есть без атрибута href. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Часто ссылки-заглушки используют, чтобы показать, что мы находимся на текущей странице:



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

    • 1 страница

    • 2 страница

    • 3 страница

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

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

    https://site.ru/blog/index.html

    Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь.

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

    Когда файл по ссылке должен открываться локально на компьютере, используются относительные адреса. В отличие от «обычных» адресов, в нём нет адреса сайта. Например:

    day-2.html

    Относительные адреса работают не только для файлов на компьютере, но и для страниц в сети. Если выложить два каких-то файла в интернет (не меняя их взаимное расположение), то их ссылка друг на друга всё равно будет работать.

    Если в адресе нет имени сервера или протокола, то это относительный адрес.

    Ссылки на файл

    По ссылкам
    можно не только переходить, но и скачивать файлы. Для этого необходимо просто в атрибуте href прописать ссылку на этот файл. А для того чтобы предотвратить открытие файлов прямо в браузере, у тега  существует атрибут download.

    Браузер скачает меня, а не будет читать

    Ссылки-якоря

    Ссылка-якорь — это обычная ссылка, в адресе которой используется символ #, после которого следует идентификатор элемента. Идентификатор создаётся с помощью атрибута id у того тега, к которому надо перейти при щелчке по ссылке.

    Глава 1

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

    Изображения

    Подключение изображений

    Для подключения изображений существует тег , для него не требуется закрывающего тега, а путь к картинке задаётся в атрибуте src. Например:



    Форматы изображений

    Существует несколько основных форматов изображений: JPEGPNGSVG и GIF.

    Формат SVG переводится как масштабируемая векторная графика. Качество таких изображений не меняется при изменении размеров, да и вес у них небольшой. Отлично подходит для малоцветных схем, логотипов и иконок. Чаще всего используется в случаях, когда необходимо масштабировать изображение без потерь, изменять цвет элементов изображения, анимировать части изображения.

    Формат JPEG подходит для фотографий, рисунков с большим
    количеством разноцветных деталей, изображений с плавным переходом яркости и контраста. При сжатии изображения ухудшается его качество.

    Формат PNG позволяет сохранять изображения, в которых требуется особенная чёткость. Главная особенность этого формата — поддержка прозрачности. Подходит для изображений с прозрачностью и полупрозрачностью, когда необходима повышенная точность полноцветных изображений и для изображений с резкими переходами цветов.

    Формат GIF используется для простейших анимаций. В последнее время GIF-изображения становятся всё менее используемыми и заменяются на другие, более оптимальные форматы.

    Размеры изображения

    Для управления шириной или высотой изображения, используются атрибуты width и height. Размеры в этих атрибутах задаются без единиц измерения.



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

    Атрибут alt

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

    Альтернативный текст изображения задаётся с помощью атрибута alt. Например:

    кот, который гуляет сам по себе



    Figure и figcaption

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

    Для разъясняющего комментария к такому иллюстративному материалу существует тег 
    , который размещается первым или последним элементом внутри 
    . Например:



    альтернативный текст

    Подпись к содержимому






    Подпись к содержимому

    Изображение-ссылка

    Ссылки можно делать не только с помощью текста, но и с помощью изображений. Для этого нужно обернуть тег  в тег . Например:



    </span><span>Кекс</span><span>



    «Знакомство с таблицами». Раздел 3

    Выравнивание содержимого в ячейках

    За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения leftcenter и right.

    За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения topmiddle и bottom.

    Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:

    {

    vertical-align: значение;

    text-align: значение;

    }

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

    Раскраска таблицы

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

    Чтобы задать цвета для ячейки в CSS, нужен такой код:

    td {

    color: цвет;

    background-color: цвет;

    border: 1px solid цвет;

    }

    Раскрашивать можно и 
    , и , и даже . Можно использовать классы и применять стили для этих классов.

    Размеры таблицы

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

    У таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.

    Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

    table {

    width: 100px;

    height: 100px;

    }

    Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

    При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента: контейнера, окна мини-браузера, страницы.

    Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto;.

    Проценты при задании высоты обычно не работают.

    Размеры отдельных ячеек и столбцов

    Размеры ячеек задаются с помощью CSS-свойств width и height.

    Есть два варианта добавления стилей ячейкам:

    Пример второго варианта:



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

    «Формы. Знакомство». Раздел 2

    Радиокнопка


    Радиокнопка — это тег  с типом radio.

    Значение радиокнопки задаётся c помощью value. Атрибут value является для радиокнопок обязательным. Браузер отправляет на сервер значение value выбранной радиокнопки.

    Группа радиокнопок


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

    Чтобы сделать какой-либо вариант выбранным по умолчанию, нужно добавить к соответствующему тегу  атрибут checked.

    Раскрывающийся список, или «селект»


    Раскрывающийся список позволяет выбрать один вариант ответа из нескольких. Такой список создаётся с помощью парного тега . Например:



    В атрибуте value тега  задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

    Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

    «Мультиселект»


    Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать несколько вариантов. Для этого нужно добавить к тегу .

    Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам  добавить атрибут selected.

    При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута name ставятся символы квадратных скобок []. Например,  с типом file. Для этого поля обязательным атрибутом является имя.

    Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить всей форме атрибут enctype со значением multipart/form-data. Этот атрибут указывает браузеру, в каком виде пересылать данные. Если вы хотите отправить на сервер файл, данные из формы эффективнее всего передавать по частям. За это и отвечает значение multipart/form-data.

    Внешний вид полей с типом file очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.

    Скрытое поле


    Скрытое поле используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.

    Скрытое поле — это тег  с типом hidden.


    ...



    написать администратору сайта