factsGalary

factsGalary

Наши цели

1) Познакомится с тегом «tabel»

2) Потренироваться работать с классами

3) Познакомится с новыми CSS-свойствами: «text-align», «font-family», «font-family», «font-size», «display»

Начинаем работу с HTML

Уже умеешь

Сегодня мы делаем сайт про разные факты со всего мира. Однако тебе не обязательно делать проект на ту же тему, ты можешь придумать что-то свое.

К примеру ты можешь сделать проект, где расскажешь про себя :)

Уже умеешь

Создай тег «h1» и укажи в него вот такой текст: «Факты со всего мира!»

Создай тег «p» и укажи в него вот такой текст: «Здесь вы узнаете много всего интересного»

Уже умеешь

Создай тег, который добавит на сайт горизонтальную разделительную линию.

Создай тег заголовка третьего уровня и укажи туда вот такой текст: «Галерея фактов»

Уже умеешь

Создай тег «p» и укажи туда вот такой текст: «Содержание:»

Уже умеешь

Создай тег «ul» и укажи внутри него тег «li» с классом «upper».

Там же укажи еще один тег «li» с классом «lower».

Внутри элементов «li» укажи какой-нибудь текст

Уже умеешь

После этого добавь тег «br»

Создай тег «tabel»

Тег «tabel» создает коробку для нашей таблички.

Уже умеешь

Внутри тега «tabel» создай тег «tr»

Тег «tr» создает строчку нашей таблицы.

Уже умеешь

Внутри тега «tr» создай тег «td»

Тег «td» создает колонку нашей таблички.

Уже умеешь

Внутри тега «td» создай тег «img» с классом «fact»

Уже умеешь

Сделай еще два тега «td» и добавь им внутрь тег «img» с классом «fact»

Уже умеешь

После закрывающегося тега «tr» создай еще один тег «tr». Создай в нем три тега «td» и добавь им внутрь тег «img» с классом «fact»

Уже умеешь

После закрывающегося тега «table» создай тег, который добавит на сайт горизонтальную разделительную линию.

Уже умеешь

После этого добавь тег «p» с классом «autorDes». Внутрь этого тега укажи вот такой текст: «Список авторов, которые трудились над проектом:»

Уже умеешь

Создай тег «ol»

Внутрь него добавь три элемента «li» с классом «autorName».

Внутрь элементов «li» добавляем какие-нибудь имена

Уже умеешь

После закрывающегося тега «ol» создаем тег «br»

Уже умеешь

После тега «br» создаем тег «tabel»

Внутрь тега «tabel» указываем тег «tr»

Уже умеешь

Внутрь тега «tr» укажи три тега «td» и добавь им внутрь тег «img» с классом «author»

Начинаем работу с CSS

Что-то новое

CSS свойство «font-family» помогает нам указать шрифт на нашем сайте.

Пример: font-family: Arial

Что-то новое

Обратись к элементу «body» и укажи у него свойство «font-family»

Что-то новое

CSS-свойство «text-align:center» помогает нам поместить все строчные элементы по центру.

Что-то новое

Обратись к элементу «body» и укажи у него CSS-свойство «text-align:center»

Что-то новое

Обратись к элементу «h1» и укажи у него CSS-свойство «color»

Что-то новое

Обратись к элементу «p» и укажи у него CSS-свойство «letter-spacing»

PS: CSS-свойство «letter-spacing» указывает какое количество свободного места должно быть между буквами.

Пример:

letter-spacing: 2px

Что-то новое

Обратись к элементу «p» и укажи у него CSS-свойство «font-size».

PS: CSS-свойство «font-size» указывает размер букв

Пример:

font-size: 20px;

Интересный факт

Стандартный размер текста в CSS составляет 16px.

То-есть если ты воспользуешься тегом «p», то текст в нем будет как раз 16px.

Что-то новое

Создай класс «upper» и укажи у него CSS-свойство «text-transform: uppercase».

PS: CSS-свойство «text-transform: uppercase» делает все буквы заглавными.

Что-то новое

Создай класс «lower» и укажи у него CSS-свойство «text-transform: lowercase».

PS: CSS-свойство «text-transform: lowercase» делает все буквы строчными.

Что-то новое

Создай класс «autorName» и укажи у него CSS-свойство «text-transform: capitalize».

PS: CSS-свойство «text-transform: capitalize» делает первую букву нового слова заглавной.

Что-то новое

Создай класс «autorDes» и укажи у него CSS-свойство «font-weight: 700».

PS: CSS-свойство «font-weight: 700» задает жирность нашего текста.

Что-то новое

Обратись к элементу «td» и укажи у него какую-нибудь рамочку.

Если ты забыл как создавать рамку, то смело можешь это загуглить.

Что-то новое

Мы можем обращаться сразу к нескольким элемента с помощью запятой в CSS.

Пример h1, p, h3{

color:red;

{

Что-то новое

Попробуй обратиться к элементам:

«ol», «table», «ul»

Укажи у них CSS-свойство «display:inline-block»

PS: CSS-свойство «display:inline-block» меняет тип отображения элемента на строчно-блочный

Какие бывают элементы?

В HTML у нас есть блочные и строчные элементы.

Строчные элементы отображаются на одной строке.

Блочные элементы отображаются на новой строке.

Строчные элементы

Что-то новое

Теперь попробуем задать div-элементу и заголовку первого уровня CSS-свойство «display:inline-block».

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

Уже умеешь

Создай класс «fact» и укажи туда CSS-свойство «width»

Уже умеешь

Создай класс «author» и укажи туда CSS-свойство «width»