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>

HTML Basics III. Better tables #5

Резюме

Мы много чего узнали.

Чему же вы научились?

1. Писать комментарии в html
2. Создавать списки (нумерованные и маркированные)
3. Выделять текст при помощи тегов <em> и <strong>
4. Изменять цвет, размер и выравнивание текста при помощи атрибута style
5. Создавать html таблицы

Нажмите “Сохранить и Отправить код” чтобы закончить этот курс и перейти к знакомству с двумя невероятно полезными тегами <div> и <span> !

HTML Basics III. Better tables #4

Стиль всему голова!

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

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

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

<th style="font-size:12px; color:red"></th>

задание

1. Выделите "Famous Monster" и "Birth Year" курсивом
2. Сделайте заголовок "Famous Monsters by Birth Year" красным

подсказка

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

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table style="border-collapse:collapse;">
            <thead>
                <tr>
                    <th colspan="2" style="color:red">Famous Monsters by Birth Year</th>
                </tr>
                <tr style="border-bottom:1px solid black;">
                    <th style="padding:5px"><em>Famous Monster</em></th>
                    <th style="padding:5px;border-left:1px solid black"><em>Birth Year</em></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:5px;">King Kong</td>
                    <td style="padding:5px;border-left:1px solid black;">1933</td>    
                </tr>
                 
                <tr>
                    <td style="padding:5px;">Dracula</td>
                    <td style="padding:5px;border-left:1px solid black;">1897</td>
                </tr>
                 
                <tr>
                    <td style="padding:5px;">Bride of Frankenstein</td>
                    <td style="padding:5px;border-left:1px solid black;">1944</td>
                </tr>
            </tbody>
        </table>
         
    </body>
 
</html>


HTML Basics III. Better tables #3

Название вашей таблицы

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

Для этого нам надо добавить атрибут colspan (пер. объединение) в тег <th>. По умолчанию значение равно единице, если мы хотим объединить 3 столбца, то мы должны присвоить атрибуту colspam значение 3

Это выглядит вот так:

<th colspam=”3”>объединяем 3 колонки</th>

задание

1. Посмотрите, что у нас есть. Мы уже добавили заголовок, но он сейчас расположен только в одном столбце.
2. Сделайте так, чтобы наш заголовок занимал оба столбца, для этого добавьте тегу <th> атрибут colspan=”2”
3. Взгляните на результат, наш заголовок должен занять оба столбца.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table border="1px">
            <thead>
                <tr>
                    <th colspan="2">Famous Monsters by Birth Year</th>
                </tr>
                <tr>
                    <th>Famous Monster</th>
                    <th>Birth Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>    
                </tr>
                 
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
                 
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            </tbody>
        </table>
         
    </body>
 
</html>


HTML Basics III. Better tables #2

Невидимая голова

Вы заметили, что мы добавили тег <thead> перед <tbody>. Принцип  его работы такой же как и у <tbody> мы можем добавлять данные в <thead>.

Зачем же изучать <thead> и <tbody> если изменения не видны? Это сделано, чтобы разделить страницу на составляющие, т.е. голову и тело, это будет удобно, когда мы начнем изучать таблицы стиля css, о котором вы скоро узнаете.

задание

1. добавьте одну строку (<tr>) в голове таблице
2. в этой строке добавьте две ячейки со значениями “Famous Monster” и ” Birth Year”. (Если ячейки создавались при помощи тега <td>, как вы думаете, получаться ли ячейки в заголовке? Воспользуйтесь подсказкой, если вам нужна помощь.)

подсказка

Помните, что строки таблицы создаются при помощи тегов <tr> </tr>.
Вы можете создать ячейки в заголовке таблицы тегами <th> <th>
И не забывайте о том как правильно теги вкладываются друг в друга.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table border="1px">
            <thead>
                <tr>
                    <th>Famous Monster</th>
                    <th>Birth Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>    
                </tr>
                 
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
                 
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            </tbody>
        </table>
         
    </body>
 
</html>


HTML Basics III. Better tables #1

Голова таблицы

Вот таблица которую мы сделали ранее. Она выглядит вполне нормально, но, по сути, у нас есть список голливудских знаменитостей (монстров) и даты их рождения. Чтобы наша таблица выглядела более убедительно, мы будем использовать теги <thead>, <tbody>. Эти теги идут внутри тега <table> и являются головой и телом таблицы соответственно.

<Head> html тег содержащий информацию о странице (например, ее название), а в теге <body> размещено содержимое страницы. Аналогично тег <thead> содержит информацию о таблице, а <tbody> заполняется табличными данными.

задание

Так как у нас уже имеются табличные данные, оберните их в теги <tbody> </tbody>. Голову мы добавим позже.

подсказка

Изначальные <tr> должны быть в <tbody>. <tbody> должен быть внутри <table>.
Вы не заметите визуальный разницы между тем что стало и тем что было.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <tbody>
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>    
                </tr>
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>


HTML Basics III. Learning about tables #5

Добавление второго столбца

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

Теперь посмотрим, что у нас есть. Заметьте в первой строке таблицы у нас теперь два столбца.

Добавление второго столбца в таблицу придает более привычный вид. Но во втором столбце всего одна строка давайте исправим это! 

задание

1. добавьте во вторую строку второй столбец со значением 1897
2. добавьте в третью строку второй столбец со значением 1935
3. посмотрите на результаты. Теперь у нас есть 2 столбца и 3 строки и каждой строке есть данные
4. Классно! Теперь вам известны основы работы с таблицами. Перейдите к следующему разделу, чтобы узнать, как добавлять таблицам заголовки и названия.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>King Kong</td>
                <td>1933</td>    
            </tr>
             
            <tr>
                <td>Dracula</td>
                <td>1897</td>
            </tr>
             
            <tr>
                <td>Bride of Frankenstein</td>
                <td>1935</td>
            </tr>
        </table>
    </body>
</html>


HTML Basics III. Learning about tables #4

Один столбец

Рассмотрите код html сейчас. Можете ли вы сказать, что есть еще три строки? Мы добавили небольшой отступ, чтобы было проще воспринимать деление на строки и столбцы.

Мы добавили единственный тег <td> (“таблица данных”) который, по сути, является первым столбцом таблицы. Если вы посмотрите на вкладку с результатами, вы увидите нарисованную границу вокруг него, это не сильно впечатляет, но не стоит беспокоиться, мы собираемся добавить еще несколько ячеек. Прежде чем начать править  код html убедитесь, что сделали, нужны отступы, чтобы в дальнейшем не запутаться.

задание

1. Добавьте тег <td> </td> во вторую строку таблицы между тегами напишите “два”
2. В третью строку добавьте еще ячейку и напишите в ней “три”
3. Посмотрите на результат. Должна получиться таблица в которой один столбец и три строчки.

подсказка

Между вторым и третьим тегом <tr> вам надо добавить свою ячейку <td> два <td>. Не забывайте про отступы чтобы не запутаться.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
     
    <body>
         
        <table border="1px">
            <tr>
                <td>Один</td>
            </tr>
                <td>Два</td>   
            <tr>
                <td>Три</td>
            </tr>
                 
            <tr>
                 
            </tr>
        </table>
         
    </body>
 
</html>


HTML Basics III. Learning about tables #3

Строки информации.

Таблица  - это просто набор информации помещенное в строки и столбцы.

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

задание

Добавьте одну стоку в таблиц используя теги <tr> и </tr> на 9 строке нашего кода. Также добавьте еще две дополнительные строки в таблицу на 11 и 12 строке нашего кода.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table>
            <tr></tr>
            <!-- Add two more rows below this! -->
            <tr></tr>
            <tr></tr>
        </table>
    </body>
</html>

HTML Basics III. Learning about tables #2

Какие таблицы?

Таблицы очень полезны. Мы используем их для хранения табличных данных, поэтому они легко читаются! Если нам надо предоставить информацию аккуратно сложенную в столбцы и строки, как вы могли догадаться,  тег <table> это то, что нам нужно.

Есть много тегов связанных с таблицами, но все начинается с тега <table>, поэтому давайте добавим его первым.

задание

1. Добавьте открытый и закрытый тег <table> в теле html документа
2. Посмотрите на результат. Вы заметите, что ничего не изменилось. Это потому что таблица еще не заполнена. Мы узнаем, как заполнить ее в ближайшее время.

подсказка

Напоминаем что после открытого тега <table> всегда должен идти закрывающий тег </table>.

решение

<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
    <table></table>
    </body>
</html>

HTML Basics III. Learning about tables #1

Введение

Наше html - путешествие проходит очень хорошо. Мы уже рассмотрели:

1. как настроить скелет html файла
2. заголовки, абзацы, картинки и ссылки
3. цвет шрифта, размер и тип
4. цвет фона, выравнивание текста, жирный и курсивный шрифт

В этом курсе мы рассмотрим некоторые важные структурные аспекты html: <table>, <div> и  <span>!

задание

Давайте разогреемся:
1. Задайте заголовку, стиль пусть он будет красного цвета и шрифт Garamond
2. Добавьте изображение
3. Добавьте второе изображение и сделайте его ссылкой
(Если что то забыли воспользуйтесь подсказкой)

подсказка

Не забудьте обернуть img тег вот так:
<a href="адрес ссылки"><img src="адрес изображения" /></a>

решение

<!DOCTYPE html>
<html>
    <head>
        <title>Table Time</title>
    </head>
    <body>
        <h1 style="color:red; font-family:Garamond">Продолжаем обучение</h1>
        <img src="http://yandex.st/www/1.607/yaru/i/logo.png"/>
        <a href="http://ya.ru"><img src="http://yandex.st/www/1.607/yaru/i/logo.png"/></a>
        
    </body>
</html>