После того, как вы выполнили задание по уроку Делаем таблицы — HTML-старт для детей, у вас должна была получится такая таблица:

Теперь мы соберем на ее основе настоящий макет веб-страницы:

Для этого вам понадобится .psd макет, скачайте его по этой ссылке: table_maket1

Итак, что тут у нас. У нас есть наша таблица. Первым делом нужно удалить все background-color ячеек и вместо них дать им border сиреневого цвета.

Из элементов у нас есть два заголовка разных уровней (h1 и h2), картинка, параграфы с разным размером шрифта, кнопка Read more >, которую нужно оформить как <button></button>, а также 2 пункта меню, которые мы пока оставим как уже существующие ячейки таблицы.

На что обратить внимание:

Вам понадобится свойство float. Это слово переводится как «плавать», в нашем случае — как «обтекать». Легко запомнить по фразе «float, boat» — «плыви, лодка».

Текст должен обтекать картинку с правой стороны.

float работает так: если текст должен обтекать СПРАВА, то на картинку нужно поставить свойство float: left, то есть — наоборот, left — «ЛЕВО». Картинка как бы плывет в левую сторону ячейки и тянет за собой текст, как мусор на воде. Соответственно, если картинка должна быть справа, то float: right;.

Что важно помнить — любой элемент после элемента с флоатингом будет подтягиваться к нему, как к магниту. Если бы текста было мало, а за этой картинкой следовала еще одна, ее бы тоже прибило к верхней как мусор. С этой проблемой мы будем справляться позже.

Для того, чтобы выставить шрифтам нужные размеры — выделите текст (или щелкните внутри него инстурментом Текст) и посмотрите значения в окне со свойствами шрифта:

В данном случае мы видим, что размер шрифта — 20 пунктов. Внимание — в css мы ставим размеры шрифтов не в пунктах, а в ПИКСЕЛЯХ, то есть выглядеть будет:

font-size: 20px;

Обратите внимание — между цифрами и px нет пробела — это касается любых размеров в css.

Размеры шрифтов можно ставить также в единицах em, но лучше не идите по этому ложному пути. Вроде бы em должны отвечать за процентное отношение шрифтов к размеру окна, и мы все радостно бежим использовать эти емы. Это не так! EM отвечает за процентное отношение не к окну браузера, а к размеру шрифта по умолчанию! В разных браузерах размер по умолчанию разный, самый распространенный — 14px, то есть все ваши размеры будут всего лишь процентным отношением к 14-ти пунктам. В этом нет никакого практического смысла, наоборот — вносит хаос и сумятицу, так как шрифт начинает выглядеть по-разному в разных браузерах. Подточил все под Хром, в ИЕ открываешь — и глаза вытекают от ужаса — что с моим макетом?!?)).

В тех же свойствах шрифта в фотошопе мы видим, что шрифт у нас Georgia.

В html есть шрифты, которые поддерживаются по умолчанию, и кастомные шрифты (от слова custom — изготовленный на заказ).

Пока что мы будем использовать шрифты по умолчанию, и Georgia — один из таких шрифтов.

Чтобы начать пользоваться поиском Google в решении своих задач, выполните задание — найдите, как задать шрифт через css.

Если ничего не нашли — подсказка — самый лучший ресурс для поиска всего необходимого для HTML — это, конечно, ресурс создателей этого самого HTML — W3C. Если видите, что ссылка из Гугла ведет на адрес http://www.w3schools.com/ — смело идите туда!

Например, по шрифтам урок от W3C: http://www.w3schools.com/css/css_font.asp. Чуть ниже, в боксах с кнопками Try it Yourself — примеры кода. Вы можете пройти по кнопке и увидеть работу кода в действии. Вы даже можете поменять значения слева, нажать зеленую кнопку Run, и вуаля — справа получите новый результат.

Да, на заметку. Почему мы ставим больше одного шрифта за раз? Это на случай, если какой-то браузер не поддерживает данный шрифт. Мы даем второй в качестве дублера, а если уж и его браузер не нашел, то в самом конце — serif или sans-serif.

serif и sans-serif произошли от французских слов «с засечками» и «без засечек». То есть sans — это «без». Наш шрифт Georgia — с засечками, то есть serif.

Чем они отличаются — вы также можете увидеть здесь W3C: http://www.w3schools.com/css/css_font.asp.