HTML Basics II. Styling the font! #5

Подведем итоги 

Потрясающая работа! Теперь мы умеем менять цвет, размер и тип шрифта на нашей странице. Напомним еще раз, что для этого мы используем атрибут style в открывающем теге,  в котором мы задаем  нужные нам параметры, например:
a. font-size:14px
b. color:orange
c. font-family:Bodoni
<p style=”font-size:14px; color:orange; font-family:Bodoni”>
Главное помнить что вы можете использовать атрибут style для абзацев, заголовков и даже ссылок!

задание

Для абзаца в седьмой строке укажите следующие параметры:
a. размер 20px
b. цвет blue(пер. синий)
c. семейство шрифтов Garamond

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Putting it all together</title>
    </head>
    <body>
        <p style="font-size:20px; font-family: Garamond; color:blue">A truly spectacular paragraph!</p>
    </body>
</html>


HTML Basics II. Styling the font! #4

Семейство шрифтов


Мы узнали как задать цвет и размер шрифтам. Но нам хочется большего! Мы хотим сами решать какой шрифт нам использовать, в html за это отвечает параметр font-family (пер. семейство шрифтов).
Чтобы поменять шрифт достаточно в теге добавить атрибут стиля и после знака равно написать “ font-family:Helvetica” (либо любой другой шрифт который вам нравиться). Например:
<h2 style="font-family:Garamond">
Список доступных шрифтов можно посмотреть здесь.

задание

1. Измените размер шрифта первого пункта списка на 16px и задайте ему шрифт Garamond
2. Измените размер шрифта второго пункта списка на 12px и задайте ему шрифт Verdana
3. Измените размер шрифта третьего пункта списка на 10px и задайте ему шрифт Impact
Убедитесь что вы задали правильные шрифты Garamond, Verdana и Impact.

подсказка

Если вы получаете сообщение об ошибки которое говорит о странном размере шрифта например 16.88888px или 8.181818px попробуйте сбросить значение зума вашего браузера в ноль нажав Cmd+0 или Ctrl+0
Убедитесь что, Garamond, Verdana, и Impact написаны с заглавной буквы!
Не забывайте что после того как вы написали атрибут стиля вы должны поставить знак равенства и все элементы должны быть в кавычках.
И наконец не забывайте что элементы стиля между собой разделяются точкой с запятой!

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Loving the font changes</title>
    </head>
    <body>
        <h1>Big title</h1>
         <ol>
            <li style="font-family: Garamond; font-size: 16px">This item is big Garamond.</li>
            <li style="font-family: Verdana; font-size: 12px">This item is medium Verdana.</li>
            <li style="font-family: Impact; font-size: 10px">This item is small Impact.</li>
         </ol>
    </body>
</html>


HTML Basics II. Styling the font! #3

Цвет шрифта

Что самое удивительное то что атрибутов у стиля много! И мы можем использовать их не только с тегами абзаца <p>. Давай поменяем цвет нашего заголовка.
Чтобы изменить цвет текста достаточно просто добавить атрибут стиля(style) в открывающем теге а затем сделать style равен “color:blue” (пер. цвет: синий) (или другой цвет который вам нравиться). Например:
<h2 style=”color:red”>
Что делать если вы хотите изменить не только цвет, но и размер шрифта? Все очень просто! Перечислите все нужные вам параметры, разделив их точкой с запятой. Например:
<h2 style=”color:green; font-size: 12px”>
Полный список доступных цветов можно посмотреть здесь.
Примечание: не пишите что-то вроде:
<h2<h2 style=”color:green; font-size: 12px”>
Если вы неправильно напишите код html, то у вас ничего не заработает.

задание

1. измените цвет заголовка на зеленый (green) и задайте ему размер 16px.
2. измените цвет первого абзаца на фиолетовый (violet)
3. измените цвет второго абзаца на красный (red) и задайте ему размер 10px

подсказка

Важно помнить, что кавычки должны окружать все характеристики стиля, которые написаны после знака равно.
Помните: если в стиле у вас более одного элемента (например, цвет и размер шрифта) то они должны быть разделены точкой с запятой.
Если у вас возникли какие-то проблемы с отображением размера шрифтов, сбросьте настройки увеличения вашего браузера, нажав Cmd+0 или Ctrl+0.

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Changing the colors!</title>
    </head>
    <body>
        <h1 style="color:green; font-size: 16px">Big Heading</h1>
            <p style="color:violet">A giant bear and a little duck were friends.</p>
            <p style="color:red; font-size: 10px">But the bear got hungry and ate the duck.</p>
    </body>
</html>


HTML Basics II. Styling the font! #2

Размер шрифта

Напоминаем, что абзац создается при помощи открывающегося и закрывающегося тега <p>.
Мы можем модифицировать теги, задав им дополнительные атрибуты. Атрибут это одна или несколько характеристик описывающих  содержимое элемента. Мы сталкивались с подобным: src в теге <img> и  href в <a>.
Давайте изменим размер текста. Как? Мы используем атрибут style. В нем мы зададим font-size (пер. размер шрифта) поставим двоеточие и напишем нужный размер шрифта, а в конце припишем px (сокращение от pixels(пер. пиксели)). Например:
<p style="font-size: 12px">
Примечание: Если у вас возникли какие-то проблемы с отображением размера шрифтов, сбросьте настройки увеличения вашего браузера, нажав Cmd+0 или Ctrl+0
Будьте внимательны, чтобы не расположить эти атрибуты неправильно. Если вы введете:
<p <p style="font-size: 10px;"></p>
или
<p> <p style="font-size: 10px;"></p>
Ваш код работать не будет.

задание

1. В строке 7 создайте текст размером 10px.
2. В строке 8 создайте текст размером 20px.
3. В строке 9 создайте текст размером 40px.

подсказка

Будьте внимательны пишите атрибуты <p> правильно. Если вы напишите:
< p<p style=”font-size: 10px”> </p>
Отобразиться все правильно ну упражнение не будет считаться выполненным.
Если у вас возникли какие-то проблемы с отображением размера шрифтов, сбросьте настройки увеличения вашего браузера, нажав Cmd+0 или Ctrl+0

решение

<!DOCTYPE html>
<html>
    <head>
        <title>First font size change</title>
    </head>
    <body>
        <p style="font-size: 10px"> Some text for you to make tiny! </p>
        <p style="font-size: 20px"> Some text for you to make normal size!</p>
        <p style="font-size: 40px"> Some text for you to make super big!</p>
    </body>
</html>


HTML Basics II. Styling the font! #1

Создаем комментарии

Мы немного поговорили о списках. Давай сменим тему и поговорим о стилях. Если вы не забыли, то html это каркас страницы, а css это то, что помогает нам украсить его.

Но в некоторых случаях можно обойтись и без css. Это означает, что мы можем задать некоторый стиль прямо в нашем html файле, не создавая отдельный файл css для этого. Мы узнаем, как это сделать заранее, это поможет нам в дальнейшем проще изучать css.

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

задание

1. комментарий начинается с <!—и заканчивается -- > что то вроде этого:
<!— Это пример комментария-- >
2. закомментируйте(превратите в комментарий) текст в строке 1. Оставьте текст в строке 3 без изменений

решение

<!--Make me into a comment.-->

<p>But leave me visible to the user!</p>

<!-- comment -->