Есть ли в HTML тег «size»?

picture-crops-56a9f6c53df78cf772abc727

Чтобы сайт выглядел согласно вашему дизайну, придется менять размер текста или размер изображений HTML. Чтобы сделать это, вы, вероятно, будете искать тег «size», но вскоре поймете, что в гипертексте такого нет.

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

Единственный способ изменять размеры шрифта — это устаревший тег <font>, который имеет атрибут size. Имейте в виду, что этот тег отсутствует в текущих версиях HTML, и в будущем может перестать поддерживаться браузерами! Изменять размеры элементов и стили сайта следует с помощью CSS.

Размеры шрифтов

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

Чтобы получить абзац со шрифтом 12pt, нужно задать ему свойство font-size:

h3 {
	font-size: 24px;
	}

Это изменит размер заголовков третьего уровня до 24 пикселей. Можно добавить это свойство к внешней таблице стилей, и это значение будут использовать все заголовки < h3>.

Чтобы применить к тексту дополнительные стили типографики, добавьте следующие CSS-правила:

h3 {
	font-size:24px;
	color: #000;
	font-weight:normal;
	}

Это не только установит размер шрифта для заголовков третьего уровня, но и сделает текст черным (о чем говорит hex-код #000), а также установит начертание в значение «normal». По умолчанию, браузеры отображают заголовки h1—h6 в виде полужирного текста. Этот стиль переопределит значение по умолчанию и сделает шрифт нежирным.

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

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

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

Чтобы задать изображению размер в HTML, используйте тег <img> с атрибутами height и width.

Например, изображение должно иметь размер 400 на 400 пикселей:

height="400" width="400" alt="image" />

Чтобы задать размеры изображения в CSS, используйте свойства height и width. Вот то же изображение, для определения размера которого используется CSS:

style="height:400px; width:400px;" alt="image" />

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

Чаще всего для основных блоков на странице задается ширина. Сначала нужно определиться с типом дизайна: статичный или адаптивный. Нужно решить, хотите ли вы задать ширину в абсолютных единицах измерения — пикселях, дюймах, точках? Или же размер блоков должен быть адаптивным, и для определения размеров должны использоваться em или проценты? Чтобы задать размеры основных блоков, как и в случае с HTML изображениями по размеру окна, нужно применять CSS-свойства height и width.

Фиксированная ширина:
style="width:600px;">

Адаптивная ширина:
style="width:80%;">

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

Перевод статьи “Does an HTML Size Tag Exist?” был подготовлен дружной командой проекта Сайтостроение от А до Я.

09 июня 2017 в 10:19
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок