HTML Basics III. Div and span #5

Резюме

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

1. Разделить вашу страницу при помощи тега <div> чтобы легче задавать стиль
2. Выбирать куски текста и меня, их свойства при помощи тега <span>

В следующих курсах мы рассмотрим, как можно взять настройки стиля и сложить их в отдельный файл. Для этого мы сожжем использовать такие теги как <div>, <span> но при этом на не придется каждый раз писать что то вроде style=”color:red”.

Мы привели пример как, <span> может брать стиль из css. Результат выполнения вы можете видеть на вкладке с результатами. Правда, здорово?

Нажмите “Сохранить и отправить код” чтобы закончить курс и двигаться дальше в удивительный мир css.

HTML Basics III. Div and span #4

Span is the man

Долго ломал голову, но так и не придумал, как правильно перевести заголовок ну, да и не в этом суть.

Отлично! У вас действительно все получилось. Но этот тег может больше давайте, рассмотрим еще один пример.

Цвет один из немногих параметров, которые можно поменять, в теге <span> вы можете также задать в атрибуте style  стиль шрифта, размер шрифта и все остальные атрибуты применимые к шрифту. 

задание

Используя тег <span> задайте слову “Futura” шрифт Futura. Остальной текст оставьте без изменения, также восклицательный знак не должен быть в теге <span>.

подсказка

Задайте вашему <span> стиль следующим образом:
<span style=”указать нужные характеристики здесь”>

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <p>My favorite font is <span style="font-family:Futura">Futura</span>!</p>
    </body>
</html>


HTML Basics III. Div and span #3

Spantastic

В то время как <div> позволяет разделить страницу на куски и задать им индивидуальный стиль, <span> дает возможность контролировать небольшие участки страницы, такие как текст. Например, если вы хотите чтобы первое слово каждого абзаца было красным, то вы можете поместить первые слова каждого абзаца в тег <span></span> и задать им нужные характеристики при помощи css.

задание

Давайте снова воспользуемся атрибутом style чтобы изменить цвет. Обернем слово “red” в теги <span> </span> и зададим тегу <span> следующие параметры style=”color:red”. Обратите внимание как после этого слово поменяет цвет!

решение

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p>This text is black, except for the word <span style="color:red">red</span>!</p>
    </body>
</html>

HTML Basics III. Div and span #2

Ссылка!

Отличная работа! Как вы могли догадаться, рациональное использование <div>ов позволит нам визуализировать наш html и создавать разные объекты, такие как боковые панели, меню и многое другое.

Также как и изображение вы можете сделать <div> кликабельным заключив его в <a></a> теги.

задание

Сделайте из вашего желтого <div> ссылку, которая ведет на любой сайт. Воспользуйтесь подсказкой если надо освежить память.

подсказка

Напоминаем теги <a> </a> идут вокруг того из чего вы хотите сделать ссылку, например, так:
<a href=”адрес ссылки”> <div> </div> </a>

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <div style="width:50px; height:50px; background-color:red"></div>
        <div style="width:50px; height:50px; background-color:blue"></div>
        <div style="width:50px; height:50px; background-color:green"></div>
        <a href="http://ya.ru"><div style="width:50px; height:50px; background-color:yellow"></div></a>
    </body>
</html>


HTML Basics III. Div and span #1

Разделяй и властвуй

Один из самых универсальных структурных тегов доступных вам это тег <div></div>. <Div> это сокращение от “division” (пер. деление), он позволяет разделить вашу страницу на контейнеры  (т.е. разбить на части). Это пригодиться когда вы начнете изучать css, тогда вы сможете применять стили индивидуально для каждой части вашего сайта.

Посмотрите на вкладку с результатами. Вы должны увидеть три блока: красный, синий и зеленый. Каждый из них и есть <div> контейнер.

задание

Теперь попробуйте вы! В 10 строке создайте собственный <div> с желтым фоном. Остальные параметры пусть будут такими же, как у <div> которые мы использовали в качестве примеров.

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Result</title>
    </head>
    <body>
        <div style="width:50px; height:50px; background-color:red"></div>
        <div style="width:50px; height:50px; background-color:blue"></div>
        <div style="width:50px; height:50px; background-color:green"></div>
        <div style="width:50px; height:50px; background-color:yellow"></div>
    </body>
</html>