задаёт заголовок html-документа. <br><br>Для того, чтобы соединить html с css используется тег <link>.<br><br>При создании первого сайт, в начале убирались все отступы, при помощи тегов margin и padding со значением 0. После были назначены шрифты, ширина, отображение на середине и фон страницы.<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_a33aa1ac32bb49af.png" name="ð ð¸ññð½ð¾ðº 42" align="bottom" hspace="2" vspace="2" width="466" height="105" border="0" alt="" style="max-width:100%;"> <br><br>Для создания шапки сайта применялся тег <header>. В шапку был добавлен логотип при помощи тега <img src="https://images.student-it.ru/files/241354/" alt="" style="max-width:100%;"> с атрибутом src, был использован тег <h2> для заголовка и тег <nav>, который задает навигацию по сайту при помощи тега <a> с атрибутом href. Далее было выполнено форматирование шапки сайта.<br><br>Логотип форматировался с помощью тега:<br><br>header > img {<br><br>display: inline-block; позволяет выбирать ширину и высоту элемента, не добавляя разрыв строки после элемента.<br><br>width: 10em; используется для задания ширины.<br><br>margin-left: 3em; добавляет отступ слева <br><br>vertical-align: middle; } выравнивает элемент по вертикали относительно своего родителя или окружающего текста.<br>После было отформатировано название организации: <br><br>header > nav {<br><br>display: inline-block; определяет как элемент будет показан на сайте<br><br>font-size: 7em; изменяет размера шрифта<br><br>margin-left: 3em; }<br>Далее было сделано меню сайта:<br><br>header > nav {<br><br> width: 80em;<br><br> border-top: 1px solid black;} добавляет рамку сверху.<br>После пункты меню были отформатированы: <br><br>header > nav a {<br><br> text-decoration: none; убирает подчеркивание ссылок.<br><br> font-size: 3em;<br><br> color: black;<br><br> margin-left: 3em: }<br>Далее были отформатированы посещенные ссылки: <br><br>header > nav > a:visited {<br><br> color: black; }<br>Контентная область была отформатирована при помощи селектора main:<br><br>main {<br><br>Background-color: rgba(0, 255, 0, .3); } добавляет цвет фона.<br><br> main > section:first-child > article {<br><br> position: relative;} устанавливает способ позиционирования элемента относительно окна браузера.<br>Далее мы форматируем изображение слайдера:<br><br>main > section:first-child > article > img {<br><br> width: 80em; выставляет ширину.<br><br>align-self: center; } выравнивает элемент по центральной линии на поперечной оси.<br><br>Далее мы форматируем псевдоэлементы для левой и правой стрелки слайдера:<br><br>main > section:first-child > article::before {<br><br> content: "<"; добавляет содержимое, которое визуально отображается на экране монитора.<br><br>position: absolute; выставляет абсолютное позиционирование.<br><br>color: black; добавлен черный цвет элемента.<br><br>background-color: rgba(255, 255, 255, .7); выставлен фиолетовый цвет фона<br><br>font-size: 5em; изменяет размер элемента<br><br>border-top-right-radius: 15px; устанавливает радиус скругления правого верхнего уголка рамки.<br><br>border-bottom-right-radius: 15px; устанавливает радиус скругления правого нижнего уголка рамки.<br><br>margin-top: 3.7em; добавляет отступ сверху<br><br>cursor: pointer; } изменяет вид курсора когда он находится в пределах элемента.<br><br>Правая стрелка слайдера делалась подобным образом, только менялось направление.<br>Далее идет форматирование блок предложений:<br><br>main > section:nth-child(2) {<br><br>background-color: rgba(255, 255, 0, .3); } выставлен темно-зеленый цвет фона.<br><br>main > section:nth-child(2) > article {<br><br> display: inline-block; определяет как элемент будет показан на сайте.<br><br>width: 20em; выставляет ширину.<br><br>vertical-align: top; выполняет выравнивание элемента относительно верха.<br><br>margin: 1em 0 1em 5em; } добавляет отступ. <br><br>main > section:nth-child(2) > article > h2 {<br><br> text-align: center; выравнивание текста по центру.<br><br>margin-bottom: .5em; } был выставлен отступ снизу.<br><br>main > section:nth-child(2) > article > p {<br><br>text-align: justify; выравнивание текста по ширине.<br><br>Следующим было выполнено форматирование подвала сайта. За подвал сайта отвечает тег <footer>.<br><br>footer {<br><br>background-color: rgba(50, 205, 50); } был выставлен зелёный цвет фона.<br>Далее форматировали меню подвала:<br><br>footer > nav {<br><br>display: inline-block; определяет как элемент будет показан на странице.<br><br>vertical-align: middle; } выполняет выравнивание элемента относительно центра.<br>Далее были отформатированы пункты меню подвала:<br><br>footer > nav > a {<br><br> text-decoration: none; отменяет подчеркивание ссылок.<br><br> font-size: 3em; был выставлен размер шрифта.<br><br>color: black; был изменен цвет шрифта.<br><br>margin-left: 3em; } был выставлен отступ слева.<br><br>footer > nav > a:visited {<br><br>color: black; } был выставлен цвет текста у посещенных ссылок.<br>Последним был отформатирован логотип подвала:<br><br>footer > img {<br><br>display: inline-block; определяет как элемент будет показан на странице.<br><br>width: 10em; было выполнено выставление ширины.<br><br>vertical-align: middle; выполняет выравнивание элемента относительно центра.<br><br>margin-left: 3em; } был выставлен отступ слева.<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <br><b>4</b><br> <br><b>3</b><br> <br><b>1</b><br> <br><b>2</b><br><img src="https://images.student-it.ru/files/241354/1089012_html_c5a4d42e2b39da19.png" name="ð ð¸ññð½ð¾ðº 43" align="bottom" hspace="2" vspace="2" width="501" height="403" border="0" alt="" style="max-width:100%;"> <br><br>Рисунок 61 Пример блочного сайта.<br><br>1. Шапка 2. Панель навигации 3. Основной контент 4. Подвал.<br><br>После сайта ракеты был создан следующий мини-сайт. <br><br>Для блока был задан атрибут id в теге <div> (div id=”wpapper”>). Текст был введен в теге <p>. <br><br><img src="https://images.student-it.ru/files/241354/1089012_html_21676616921d534.png" name="ð ð¸ññð½ð¾ðº 44" align="bottom" hspace="2" vspace="2" width="513" height="166" border="0" alt="" style="max-width:100%;"> <br><br>Далее, для того, чтобы этот текст был в рамках, был использован css. Использованный id был введен в css и к нему было применено форматирование для этих рамок:<br><br>#wpapper { <br><br>width: 300px; устанавливает ширину блочных элементов.<br><br>height: 100px; устанавливает высоту блочных элементов.<br><br>display: inline-block; определяет как элемент будет показан на сайте.<br><br>vertical-align: middle; выравнивает элемент по вертикале.<br><br>border: 2px solid red; ставит красные границы на блочный элемент.<br><br>overflow: auto; } управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных параметров.<br>Далее снова используется id, но уже для того, чтобы поставить отступы блока с текстом от рамок:<br><br>#wrapper p {<br><br> margin: 15px 5px 10px 20px;<br><br>padding: 15px;<br><br>text-align: center; }<br>Текст был выравнен по ширине при помощи свойства text-align:<br><br>#erapper > p:last-child {<br><br>margin-top: 20px;<br><br>padding: 5px 10px 5px 20px;<br><br>text-align: justify; }<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_76834c36cf802fc5.png" name="ð ð¸ññð½ð¾ðº 45" align="bottom" hspace="2" vspace="2" width="650" height="188" border="0" alt="" style="max-width:100%;"> <br><br>Рисунок 62 Результат применения выравнивания, границ, отступов.<br>В следующем мини-сайте в html были введены теги </p>
<div>, это универсальный блочный элемент, который предназначен для группирования элементов и для них был задан атрибут class, который объединяет элементы со схожими параметрами.<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_c9f77930ac03945f.png" name="ð ð¸ññð½ð¾ðº 47" align="bottom" hspace="2" vspace="2" width="388" height="127" border="0" alt="" style="max-width:100%;"> <br><br>Разберем .layer1 в css. Для этого блока было выполнено абсолютное позиционирование с помощью свойства position: absolute, теперь для left координаты отсчитываются от ближайшего позиционированного родителя. Желтый цвет был сделан при помощи свойства background. Далее было введено свойство margin, которое создает отступ.<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_6efa4c5bc34e5ffe.png" name="ð ð¸ññð½ð¾ðº 48" align="bottom" hspace="2" vspace="2" width="144" height="80" border="0" alt="" style="max-width:100%;"> <br><br>Разберем .layer2 в css. Было введено свойство position, которое позволяет сдвигать элемент со своего обычного места, relative делает относительное позиционирование, далее с помощью свойств left и top был сдвинут блок. Далее было введены свойства margin и padding, они задают отступы. Далее было написана свойство border, оно задает рамку у блока с текстом и также была задана ширина рамки и ее цвет.<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_ef2f84e00428d4d6.png" name="ð ð¸ññð½ð¾ðº 49" align="bottom" hspace="2" vspace="2" width="143" height="82" border="0" alt="" style="max-width:100%;"> <br><br>Далее были добавлены картинки в html, с помощью тега img и адрес файла с картинками с помощью атрибута src. <br><br><img src="https://images.student-it.ru/files/241354/1089012_html_a5c5ae8ee91ad37e.png" name="ð ð¸ññð½ð¾ðº 50" align="bottom" hspace="2" vspace="2" width="378" height="67" border="0" alt="" style="max-width:100%;"> <br><br>За то чтобы картинка становилась на передний план при наведении на них курсором отвечает псевдо-элемент :hover. <br><br><img src="https://images.student-it.ru/files/241354/1089012_html_f3218bf96352e207.png" name="ð ð¸ññð½ð¾ðº 235" align="bottom" hspace="2" vspace="2" width="454" height="280" border="0" alt="" style="max-width:100%;"> <br><br> Рисунок 63 Вставка изображений, границ, заднего фона<br><br>Далее мы создали следующий сайт, посвященный бижутерии, за основу был взят первый сайт «Ракета». Основные изменение происходили в html.<br><br>Часть html была сделана подобным образом за исключением картинок, они были вставлены в таблице и в теге <th> был отформатирован их размер. Для начала мы также убрали все отступы, далее назначили ширину, отображение на середине и фон страницы таким же образом, но изменили цвета.<br><br>Далее сделали шапку так же, как и с ракетой, но только изменив цвет, название.<br><br>Меню сделано таким же образом, как и ракета, посещенные ссылки выполнены так же. В контекстной области был изменен только цвет. Свойства в изображениях слайдера и блок предложений остались, как и в предыдущем сайте. В подвале сайта изменился только цвет и текст, добавилась контактная информация. <br><br><img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <br><b>4</b><br> <br><b>3</b><br> <br><b>2</b><br> <br><b>1</b><br><img src="https://images.student-it.ru/files/241354/1089012_html_d659b9bb64c69234.png" name="ð ð¸ññð½ð¾ðº 57" align="bottom" width="466" height="412" border="0" alt="" style="max-width:100%;"> <br><br>Рисунок 64 Пример блочного сайта.<br><br>1. Шапка 2. Панель навигации 3. Основной контент 4. Подвал.<br><br>Далее была создана форма регистрации. Форма регистрации сделана в отдельном файле html, это было сделано для того чтобы можно было переключаться между вкладками на сайте.<br><br>Первым делом убираем отступы:<br><br>* { margin: 0;<br><br>padding: 0;<br><br> outline: none; }<br><br>nav, nav ul {<br><br> list-style-type: none; } отменяет маркеры для списка.<br><br>nav {<br><br>height: 30px; была выставлена высота.<br><br>background-color: #666; был установлен красный цвет.<br><br>padding-left: 1px; устанавливает значение поля левого края содержимого элемента.<br><br>min-width: 470px; } устанавливает минимальную ширину элемента.<br><br>nav li {<br><br>float: left; выравнивает элемент по левому краю, а все остальное элементы обтекают его по правой стороне.<br><br>position: relative; выставляет относительное позиционирование.<br><br>height: 100%; } выставляет высоту на 100%.<br><br>nav li a {<br><br>display: block; элемент показывается как блочный.<br><br>padding: 6px; задает величину поля.<br><br>width: 100px; задает ширину.<br><br>color: #fff; был выставлен белый цвет.<br><br>text-decoration: none; отменено подчеркивание ссылок.<br><br>text-align: center; } текст выравнен по центру.<br><br>nav ul li {<br><br>float: none; } обтекание элемента не задается.<br><br>nav li:hover {<br><br>background-color: rgb(145, 145, 145); } был выбран цвет.<br><br>nav ul li:hover {<br><br>background-color: #666; } был выбран красный цвет.<br><br>nav ul {<br><br>display: none; добавлен для того, чтобы страница воспринимала элемент, словно его не существует.<br><br>background-color: grey; был выставлен серый цвет.<br><br>position: absolute; было выставлено абсолютное позиционирование.<br><br>top: 100%; } выставляет позиционирование от верхнего родительского края до верхнего дочернего края на 100%.<br><br>nav li:hover ul {<br><br>display: block; } элемент показывается как блочный.<br><br>table {<br><br>border: 1px; выставляет границы рамки.<br><br>margin: auto; } устанавливает величину отступа от каждого края элемента автоматически.<br><br>fieldset {<br><br>text-align: justify; } текст выравнен по ширине.<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <img src="https://images.student-it.ru/files/241354/1089012_html_3801d0b6875eedb8.gif" align="left" hspace="12" vspace="1" alt="" style="max-width:100%;"> <br><b>3</b><br> <br><b>2</b><br> <br><b>1</b><br><img src="https://images.student-it.ru/files/241354/1089012_html_115b9c8ff4d462d1.png" name="ð ð¸ññð½ð¾ðº 60" align="bottom" width="458" height="265" border="0" alt="" style="max-width:100%;"> <br><br>Рисунок 65 Пример формы регистрации.<br><br>1. Шапка 2. Панель навигации 3. Форма регистрации.<br><br>После формы регистрации, подобным образом была сделана форма для отзывов.<br><br>Все файлы html подключены к одному файлу css, потому свойства у них у всех одинаковые, меняется только html. <br><br><img src="https://images.student-it.ru/files/241354/1089012_html_94921117f8a32cef.png" name="ð ð¸ññð½ð¾ðº 88" align="bottom" hspace="2" vspace="2" width="129" height="131" border="0" alt="" style="max-width:100%;"> <br><br>Переключение между вкладок происходит благодаря тегу <a> с атрибутом href.<br><br><img src="https://images.student-it.ru/files/241354/1089012_html_82dee5815e90673b.png" name="ð ð¸ññð½ð¾ðº 59" align="bottom" hspace="2" vspace="2" width="683" height="64" border="0" alt="" style="max-width:100%;"> <br><br><h2> Заключение</h2> <br>Учебная практика помогла мне закрепить навыки, полученные во время обучения. В ходе прохождения учебной практики мною была достигнута основная её цель формирование практических профессиональных умений, приобретение первоначального практического опыта по общим и профессиональным компетенциям предусмотренными при изучении ПМ 01. В частности ПК 1.1 – обрабатывать статический информационный контент, ПК 1.6 ввод и обработка текстовых данных, ПК 1.9 – размещение информации на сайте, ОК 1 – понимание сущности и социальной значимости своей будущей профессии, проявление к ней устойчивого интереса, ОК 2 – организация собственной деятельности, определение методов и способов выполнения профессиональных задач, оценка их эффективности и качества, ОК 3 – решение проблем, оценивание риски и принимать решения в нестандартных ситуациях, ОК 4 – осуществление поиска, анализа и оценки информации, необходимой для постановки решения профессиональных задач, профессионального и личностного развития, ОК 5 – использование информационно-коммуникационных технологий для совершенствования профессиональной деятельности, ОК 6 – работать в коллективе и команде, обеспечивать её сплочение, эффективно общаться с коллегами, руководством, потребителями, ОК 7 – ставить цели, мотивировать деятельность подчинённых, организовывать и контролировать их работу с принятием на себя ответственности за результат выполнения заданий, ОК 8 – самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно планировать повышение квалификации, ОК 9 – быть готовым к смене технологий в профессиональной деятельности, ОК 10 – исполнять воинскую обязанность, в том числе с применением полученных профессиональных знаний.<br><h2> Список используемых источников</h2> <ol> <li> <br>Рудикова Л.В. Microsoft Word для студента; БХВ-Петербург – М.,2006.-400с.<br><li> <br>Долженков, Виктор Microsoft Excel 2002. Наиболее полное руководство/ Виктор Долженков, Юлий Колесников. – М.; БХВ-Петербург – М., 2017.-239 с.<br><li> <br><span>Джелен Сводные таблицы в Microsoft Excel / Джелен, Александер Билл; , Майкл. - М.: Вильямс, </span><b><span id="_2012"><span>2012</span></span></b><span>. - 320 c</span><br><li> <br>Шмелева А. Г., Ладынин А. И. Информатика. Информационные технологии в профессиональной деятельности: Microsoft Word. Microsoft Excel: теория и применение для решения профессиональных задач. М.: ЛЕНАНД, 2020. 304 с.<br><li> <br><span>Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов (+CD) / Д. Дакетт. - Москва: </span>Высшая школа, 2017<span>. - 480 c.</span><br><li> <br><span>Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, </span>2018. - 738<span> c.</span><br><li> <br><span>Фрейен, Бен HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств / Бен Фрейен. - М.: Питер, </span>2020.<span> - 304 c.</span><br><li> <br><span>Гончаров, Алексей Самоучитель HTML / Алексей Гончаров. - М.: Питер, 2000. - 240 c.</span><br><li> <br><span>Петюшкин, А. HTML в Web-дизайне / А. Петюшкин. - М.: Книга по Требованию, 2004. - 400 c.</span><br>
</ol> <br><br><br> </th>
</div>
</div></footer></nav>
</h2></header>