В этой части учебника вы узнаете для чего нужны атрибуты HTML тега, и как вообще с ними работать.
Что такое атрибуты в HTML:
Мы в этом учебнике уже использовали атрибуты, они нужны для того, что бы более глубоко настроить HTML элементы, если грубо говоря, то это параметры элемента.
Примеры работы с атрибутами HTML:
Я точно не знаю как объяснить работу с ними, да и перечислять их тоже не имеет смысла, так как, их очень много, да и за чистую каждый атрибут используется для определённых тегов.
Пример 1:
В первом примере я хочу использовать атрибут ширины и высоты в HTML, для изменений размеров фотографии, вот пример кода
1 | <img src="cat-1046544_1920.jpg" width="300" height="300"> |
Не много разберём это, мы создаём картинку использовав тег <img>
и три атрибута, первый src
, который назначает путь до картинки, второй width
, он назначает ширину в пикселях, height
, назначает высоты, тоже в пикселях, вот результат.
Как видите картинка не чуть-чуть сплюснутая, это потому что за счёт атрибутов я сделал её идеально квадратной, хотя она была не много вытянутая.
Пример 2:
Во втором примере я буду уже менять расположение текста, так как, у многих возникает вопрос, к примеру, как выровнять заголовок по центру в HTML, сейчас дам на него ответ.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <h1 align="center">Это заголовок</h1> <p align="left"> - Скажи, а чайки тоже плачут,<br> Когда их море предает?<br> Спросила девочка у мальчика,<br> Когда весной кололся лед.<br> </p> <p align="right"> Деревья на ветру качались,<br> И он ответил на вопрос:<br> - Чайки разбиваются о скалы,<br> Когда их море предает.<br> </p> <p> Летели годы, словно ветер,<br> Летели, оставляя след.<br> И вот, они уже не дети,<br> Им стало восемнадцать лет. </p> |
Как видите для выравнивания текста, мы используем атрибут align
, для заголовка используется значение center
, что значит выравнивание по центру, для первого абзаца значение left
, будет выравнивание по левой стороне, во втором абзаце, значение right
, что значит выравнивание по правой стороне, и в третьим абзаце ни чего не используется, значит там значение по умолчанию, что означает выравнивание по левой стороне, вот что получилось.
Как видите всё работает так, как надо.
Пример 3:
В последним примере покажу атрибут цвета текста в HTML, то есть здесь будим менять цвет текста.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <p><font color="green"> - Скажи, а чайки тоже плачут,<br> Когда их море предает?<br> Спросила девочка у мальчика,<br> Когда весной кололся лед.<br> </font></p> <p> <font color="blue">Деревья</font> на ветру качались,<br> И он ответил на вопрос:<br> - Чайки разбиваются о скалы,<br> Когда их море предает.<br> </p> <p> <font color="red">Л</font>етели годы, словно ветер,<br> Летели, оставляя след.<br> И вот, они уже не дети,<br> Им стало восемнадцать лет. </p> |
Как можете заметить, для назначения атрибута color
, который задаёт цвет, мы использовали тег <font>
, так как, стандартный тег абзаца <p>
не имеет этот атрибут, поэтому обязательно нужен этот тег, вот результат.
Как видите, у нас везде где есть текст в теги <font>
, с атрибутом color
, поменялся цвет.
Вывод:
В этой части учебника HTML, мы разобрали для чего нужны атрибуты тега и как с ними работать, также надо сказать, что в будущих частях будут ещё показываться другие атрибуты.