CATEGORIES расположила внутри элемента <table>

Введение в данную задачу

В соответствии с поставленной задачей мне нужно было создать два разных шаблона веб-сайтов и добавить по 2 бонусные страницы для каждого. Я использовал базовую и стандартную оболочку html и css.

Introductiontothisproblem

In accordance with the task at hand, I needed to create two different website templates and add 2 bonus pages for each. I used basic and standard wrapper html and css.

----------------

Задача 1: «Креативнаястудия»

Вот краткое описание важных частей со скриншотами завершения работы: -

Главная страница:

Я разделил весь сайт на 6 частей. Тело сайта находится внутри класса «PAGE» и имеет ширину 960 пикселей. В головной части я определил мета страницы и включил внешний CSS.

Task 1: " Creative Studio" Here is a summary of the important parts with shutdown screenshots: Home page: I have divided the entire site into 6 parts. The body of the site is inside the " PAGE" class and is 960 pixels wide. In the head section, I defined the page meta and included external CSS.

-----------------------

Первая часть:

Во-первых, в файле HTML, который я создал в < divclass = head0>, он действует как черная линия сверху. Затем меню составляется с использованием " ul, li". Как показано на рисунке, li- HOME имеет класс firstN, который окрашивает его в черный цвет. Также есть таргетинг на черные ссылки.

Firstpart:

First, in the HTML file I created in < div class = head0>, it acts like a black line on top. Then the menu is composed using " ul, li". As shown in the figure, li- HOME has a class firstN which colors it black. Thereisalsoblacklinktargeting.

-----------------------------

Часть вторая:

В каждом разделе была строка с < hr>. Поскольку < hr> рисует горизонтальную линию, внешний вид которой зависит от используемых параметров. Я вставил картинку в качестве фона блока. Затем для надписи «вот хорошая работа» и «посмотреть портфолио > > » я создал класс < divclass = " logo2" > и < divclass = " logo2_text" >.

Part two:

Each section had a line with < hr>. Because < hr> draws a horizontal line, the appearance of which depends on the parameters used. I have inserted a picture as the background of the block. Then I created a class < div class = " logo2" > and < div class = " logo2_text" > for the caption “here's a good job” and “view portfolio > > ”.

------------------------------

Часть третья:

Для информации о сайте я создал < divclass = " asite" > и разделил внутри них на три части. Конечно, я не забыл про маленькие стрелки и значки на фотографиях.

Часть четвертая:

НАШЕ ПОРТФОЛИО Я дал ссылку на картинки, чтобы будущее можно было туда посмотреть.

Часть пятая:

Для ОБНОВЛЕНИЙ БЛОГА и CONNECT US создан общий < divclass = " post" >. С помощью класса пост сделал отображение гибким.

Часть шестая:

Для последней части я создал < нижний колонтитул>. Поскольку он может содержать имя автора, дату документа, контактную и юридическую информацию.

Part three:

For site information, I created < div class = " asite" > and divided them into three parts inside them. Of course, I haven't forgotten about the small arrows and icons in the photos.

Part four:

OUR PORTFOLIO I gave a link to the pictures so that the future can be viewed there.

Part five:

A common < div class = " post" > has been created for BLOG UPDATES and CONNECT US. With the help of the class, the post made the display flexible.

Part six:

For the last part, I created a < footer>. As it may contain the name of the author, the date of the document, contact and legal information.

-------------------------------------------------------

3 бонусные страницы

Я создал 3 бонусные страницы, страницу О НАС, страницу БЛОГА, страницу КОНТАКТЫ

3 bonus pages

I have created 3 bonus pages, an ABOUT page, a BLOG page, a CONTACTS page.

------------------------------------

· О НАС страница:

Я разделил нашу историю на три части, и для них создал три блока с карточками, при наведении на них появляется текст со значком.

• ABOUT US page:

I divided our story into three parts, and for them I created three blocks with cards, when you hover over them, a text with an icon appears..

------------------------------------------------

· Страница БЛОГА:

Здесь я сделал как на предыдущей странице, но больше фото, а в начале есть видео. Он был размещен с помощью тега < video>, и видео начинает воспроизводиться автоматически после загрузки страницы. Повторяет воспроизведение видео с начала после его окончания.

• BLOG page:

Here I did the same as on the previous page, but more photos, and at the beginning there is a video. It was posted using the < video> tag and the video starts playing automatically after the page loads. Repeats video playback from the beginning after it ends.

--------------------------------------

· СВЯЖИТЕСЬ С НАМИ страница:

На последней странице я заполнил небольшую информацию, разместил карту с помощью JavaScript.

• CONTACT US page:

On the last page, I filled in a little information, placed the map using JavaScript.

+++++++++++++++++++++++++++++++++++++++++++

Задача 2: Дизайн «Журнала»

На следующих скриншотах вы можете увидеть окончательный результат моей работы на домашней странице MagazineDesign.

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

Основное отличие здесь заключалось в том, что в теле в качестве фона используются изображения;

Здесь я разделил на 4 части: заголовок, информация, сторона, нижний колонтитул.

Task 2: Design of the " Journal"

In the following screenshots, you can see the final result of my work on the Magazine Design home page.

When I was making two sites, I noticed that in general the construction of the site structure is not too different from each other. I've seen a lot of video tutorials or you go to a regular site, it all starts with a header, ends with a footer.

The main difference here was that the body uses images as the background;

Here I have divided into 4 parts: header, information, side, footer

-1

На Header что расположить картинки я открыла class=" logo" и id=" flag" и изменила стиль в css с помощю «margin и float»

Для меню создала class=" menu", Затем меню составляется с использованием " ul, li". Как показано на рисунке, li- HOME имеет класс class=" nav", который окрашивает его в черный цвет. Также есть таргетинг на черные ссылки.

Спомощю(. menu__linka: hover: not(. nav) ) им дала ховерский стиль, светом серово

-one

I opened class = " logo" and id = " flag" on the Header to place the pictures and changed the style in css using " margin and float"

For the menu created class = " menu", Then the menu is composed using " ul, li". As shown in the figure, li- HOME has a class = " nav" which makes it black. Thereisalsoblacklinktargeting.

With the help of (. menu__link a: hover: not (. nav)) they gave them a hover style, light gray

-2

Дляinformationсоздала< div class=" info" > который

width: 60%;

float: inline-start;

padding-bottom: 30px;

padding-right: 10px;

Потом Для всех картинок в боди создала один < divclass=" images" > который

width: 30%;

margin-bottom: 110px;

потом для текста в бодисоздала< divclass=" post" >

потом их делила на 4 класс

txt_1, txt_2, txt_3, txt_4- так как там 4 вида font-size

Для линия в боди создала < hrclass=" lines" > который

color: серый

border-top: 1px dashed;

Для номеров создала < divclass=" san" > и < ulclass=" number" >

И им дала сылка, и ховерский стиль

-2 For information created < div class = " info" > which width: 60%; float: inline-start; padding-bottom: 30px; padding-right: 10px; Then for all the pictures in the body I created one < div class = " images" > which width: 30%; margin-bottom: 110px; then for the text in the body I created < div class = " post" > then I divided them into 4th grade txt_1, txt_2, txt_3, txt_4- since there are 4 types of font-size For the line in the body created < hr class = " lines" > which color: gray border-top: 1px dashed; For numbers created < div class = " san" > and < ul class = " number" > And they were given a link, and a hover style

-3

Дляsideсоздала< divclass=" side" > внутри него делила на

class=" side__1", class=" side__2"

, class=" side__3", class=" side__4"

И для их текста создала индивидуальный класс каждому

CATEGORIES расположила внутри элемента < table>

Потому что элемента < table> служит контейнером для элементов, определяющих содержимое таблицы и Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов < tr> и < td>

-3

For side I created a < div class = " side" > inside it I divided it into

class = " side__1", class = " side__2"

, class = " side__3", class = " side__4"

And for their text I created an individual class for each

CATEGORIES nested inside the < table> element

Because the < table> element serves as a container for the elements that define the contents of the table and any table consists of rows and cells that are specified using the < tr> and < td> tags

-4

И последний часть footer, черную картинку расположила как на боди с помощью

background-image: url(images/footer_bottom_bg.png);

Длялиний создала< hr class=" footer__line" >

Для текстов создала в< p class=" final" > которыйcss

color: серый

font-family: Arial

-4

And the last part of the footer, the black image was positioned like on a body using

background-image: url (images / footer_bottom_bg.png);

For lines created < hr class = " footer__line" >

For texts created in < p class = " final" > which css

color: gray

font-family: Arial

-------------------------------------------------------

2 бонусных старницы

· Журнал - Бизнес-страница:

На этой странице нет ничего сложного, для СКАЧАТЬ ЖУРНАЛ я использовал эффект наведения

· Журнал - Контактная страница:

Здесь я сделал то же самое, что и на первом сайте, только добавил форму обратной связи

2 bonus pages

• Magazine - Business Page:

There is nothing difficult on this page, for DOWNLOAD LOG I used the hover effect

• Magazine - Contact page:

Here I did the same as on the first site, only added a feedback form

-----------------------------------------------

Вывод

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

Рекомендации:

В основном все, что мне нужно, смотрели на YouTube:

1) WAYUP и Андрей Гаврилов

https: //youtu. be/DH2dxSkwI_M

2) BrainsCloud

https: //youtu. be/ltMSrSis9ww

Работа с тегами брала информацию на сайте:

W3Schools HTML

Популярные имена классов HTML / CSS:

https: //tpverstak. ru/common-css-class-names/

++++++++++++++++++++++

In conclusion, I want to say that personally, if I had more time and more practice, my bonus pages would be more creative, I could achieve more. This project gave me a good start personally, I think there is always room for improvement.

Recommendations:

Basically all I needed was watched on YouTube:

1) WAYUP and Andrey Gavrilov

https: //youtu. be/DH2dxSkwI_M

2) BrainsCloud

https: //youtu. be/ltMSrSis9ww

Working with tags took information on the site:

W3Schools HTML

Popular HTML / CSS class names:

https: //tpverstak. ru/common-css-class-names/

+++++++++++++++++++++++++++++++++++++++++++++++++++

Ховерный эффект -Баттомдардыбаскадаозггер

<! --... -->	Используется для добавления комментариев.
<! DOCTYPE>	Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
< a>	Создаёт гипертекстовые ссылки.
< abbr>	Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
< address>	Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
< area>	Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега < map>.
< article>	Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
< aside>	Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
< audio>	Загружает звуковой контент на веб-страницу.
< b>	Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
< base>	Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
< bdi>	Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
< bdo>	Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
< blockquote>	Выделяет текст как цитату, применяется для описания больших цитат.
< body>	Представляет тело документа (содержимое, не относящееся к метаданным документа).
< br>	Перенос текста на новую строку.
< button>	Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
< canvas>	Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т. п. Для рисования используется скриптовый язык JavaScript.
< caption>	Добавляет подпись к таблице. Вставляется сразу после тега < table>.
< cite>	Используется для указания источника цитирования. Отображается курсивом.
< code>	Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
< col>	Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
< colgroup>	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
< data>	Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
< datalist>	Элемент-контейнер для выпадающего списка элемента < input>. Варианты значений помещаются в элементы < option>.
< dd>	Используется для описания термина из тега < dt>.
< del>	Помечает текст как удаленный, перечёркивая его.
< details>	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег < summary>.
< dfn>	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
< dialog>	Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
< div>	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
< dl>	Тег-контейнер, внутри которого находятся термин и его описание.
< dt>	Используется для задания термина.
< em>	Выделяет важные фрагменты текста, отображая их курсивом.
< embed>	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
< fieldset>	Группирует связанные элементы в форме, рисуя рамку вокруг них.
< figcaption>	Заголовок/подпись для элемента < figure>.
< figure>	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
< footer>	Определяет завершающую область (нижний колонтитул) документа или раздела.
< form>	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
< h1-h6>	Создают заголовки шести уровней для связанных с ними разделов.
< head>	Элемент-контейнер для метаданных HTML-документа, таких как < title>, < meta>, < script>, < link>, < style>.
< header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
< hr>	Горизонтальная линия для тематического разделения параграфов.
< html>	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
< i>	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
< iframe>	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
< img>	Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
< input>	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
< ins>	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
< kbd>	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
< label>	Добавляет текстовую метку для элемента < input>.
< legend>	Заголовок элементов формы, сгруппированных с помощью элемента < fieldset>.
< li>	Элемент маркированного или нумерованного списка.
< link>	Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
< main>	Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента < main>.
< map>	Создаёт активные области на карте-изображении. Является контейнером для элементов < area>.
< mark>	Выделяет фрагменты текста, помечая их желтым фоном.
< meta>	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке < head> может быть несколько тегов < meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
< meter>	Индикатор измерения в заданном диапазоне.
< nav>	Раздел документа, содержащий навигационные ссылки по сайту.
< noscript>	Определяет секцию, не поддерживающую сценарий (скрипт).
< object>	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег < param>.
< ol>	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
< optgroup>	Контейнер с заголовком для группы элементов < option>.
< option>	Определяет вариант/опцию для выбора в раскрывающемся списке < select>, < optgroup> или < datalist>.
< output>	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
< p>	Параграфы в тексте.
< param>	Определяет параметры для плагинов, встраиваемых с помощью элемента < object>.
< picture>	Элемент-контейнер, содержащий один элемент < img> и ноль или несколько элементов < source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
< pre>	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т. д.
< progress>	Индикатор выполнения задачи любого рода.
< q>	Определяет краткую цитату.
< ruby>	Контейнер для Восточно-Азиатских символов и их расшифровки.
< rb>	Определяет вложенный в него текст как базовый компонент аннотации.
< rt>	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе < ruby>, выводится уменьшенным шрифтом.
< rtc>	Отмечает вложенный в него текст как дополнительную аннотацию.
< rp>	Выводит альтернативный текст в случае если браузер не поддерживает элемент < ruby>.
< s>	Отображает текст, не являющийся актуальным, перечеркнутым.
< samp>	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
< script>	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
< section>	Определяет логическую область (раздел) страницы, обычно с заголовком.
< select>	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в < option>.
< small>	Отображает текст шрифтом меньшего размера.
< source>	Указывает местоположение и тип альтернативных медиаресурсов для элементов < picture>, < video>, < audio>.
< span>	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
< strong>	Расставляет акценты в тексте, выделяя полужирным.
< style>	Подключает встраиваемые таблицы стилей.
< sub>	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
< summary>	Создаёт видимый заголовок для тега < details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
< sup>	Задает надстрочное написание символов.
< table>	Тег для создания таблицы.
< tbody>	Определяет тело таблицы.
< td>	Создает ячейку таблицы.
< template>	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
< textarea>	Создает большие поля для ввода текста.
< tfoot>	Определяет нижний колонтитул таблицы.
< th>	Создает заголовок ячейки таблицы.
< thead>	Определяет заголовок таблицы.
< time>	Определяет дату/время.
< title>	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
< tr>	Создает строку таблицы.
< track>	Добавляет субтитры для элементов < audio> и < video>.
< u>	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
< ul>	Создает маркированный список.
< var>	Выделяет переменные из программ, отображая их курсивом.
< video>	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
< wbr>	Указывает браузеру возможное место разрыва длинной строки.

Тег < li> определяет отдельный элемент списка.

Внешний тег < ul> или < ol> устанавливает тип списка — маркированный или нумерованный.

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

display: flex; -Барынтузептуратын, олболмасашашылып калу шеды

Атрибут CSS	Функция
background	Атрибут фона
background-attachment	Как ведет себя фон при прокручивании страницы
background-color	Цвет фона
background-image	Фоновый рисунок
background-position	Положение фонового рисунка
background-repeat	Повторение фона
border	Форматирование границ (бордюра) элемента
border-collapse	Слияние границ таблицы
border-color	Цвет границ элемента
border-spacing	Расстояние между границами ячеек таблицы
border-style	Вид рамки элемента
border-width	Ширина линии рамки
bottom	Положение нижней границы элемента
caption-side	Положение заголовка таблицы
clear	Отмена обтекания элемента текстом
color	Цвет
cursor	Курсор
direction	Направление вывода текста
display	Вид отображаемого элемента
empty-cells	Границы и фон пустых ячеек таблицы
float	Стороны смещения и обтекания элемента
font	Шрифт
font-family	Семейство шрифта
font-size	Кегль (размер) шрифта
font-style	Начертание шрифта
font-variant	Малые прописные буквы
font-weight	Насыщенность шрифта
height	Высота
left	Расстояние от левого края
letter-spacing	Межсимвольный интервал
line-height	Межстрочный интервал
list-style	Вид списочного маркера
list-style-image	Адрес файла картинки, используемой в качестве списочного маркера
list-style-position	Положение маркера
list-style-type	Вид маркера
margin	Внешний отступ
max-height	Максимальная высота
max-width	Максимальная ширина
min-height	Минимальная высота
min-width	Минимальная ширина
overflow	Управление выводом содержания блочного элемента
padding	Внутренний отступ
position	Положение элемента
right	Расстояние от правого края
table-layout	Подгонка ячеек таблицы по высоте и ширине
text-align	Выравнивание по горизонтали
text-decoration	Оформление текста
text-indent	Красная строка
text-transform	Преобразование текста
top	Расстояние от верхнего края
vertical-align	Выравнивание по вертикали
visibility	Видимость
white-space	Отделение слов друг от друга
width	Ширина
word-spacing	Интервал между словами
z-index	Порядок вывода слоев

align-items--Флексы выравниваются по линии поперечной оси.

transform — это translate(), с помощью которой можно переместить элемент с его начальной точки.

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

Применяется совместно с псевдоэлементами: after и: before, они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

Язык HTML (HyperTextMarkupLanguage) - набор команд (тегов), которые вставляются в текст web-страницы и определяют форматирование абзацев, вид шрифта, ссылки на внешние файлы, другие веб-страницы или части той же web-страницы. HTML-разметка страницы сообщает браузеру как нужно правильно отображать веб-страницу.

CSS (каскадная стилевая разметка) - это специальная технология, которая дает возможность веб-мастеру разделять содержание и форматирование веб-страниц при помощи создания " шаблонных" наборов параметров оформления тех или иных фрагментов текста, которые называются стилями.