factsGalary

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

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

Создай тег «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 свойство «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»