16 октября 2021

Для группы 304 на 16.10.2021

Организация сайта. Типы сайтов.
Файловая структура сайтов. 
Графика на web-страницах

Ссылка на информацию в учебнике: 

глава 4.2: https://znanium.com/read?id=367025&pgfrom=235&pgto=241&pgsign=bc69171f59c7ed68a1730bdd1489a50f&pagenum=235 

главу 4.3 https://znanium.com/read?id=367025&pgfrom=249&pgto=255&pgsign=06526bec2db9f2165b4645dedf8b7b98&pagenum=249

ЗАДАНИЕ: 
Составить презентацию по шаблону

Ссылка на шаблон: https://graphicriver.net/item/infographics-multipurpose-powerpoint-template-updatable/22995176

Ссылка на сайт с иконками: https://www.flaticon.com/ 

Пример выполнения слайдов:

Слайд из шаблона: 


Слайд по теме: 

Видеоуроки:

Как скруглить углы: https://www.youtube.com/watch?v=h6f40JlbANU 

Изменение узлов фигуры https://youtu.be/k0IOWu57Yf8 


04 октября 2021

Для группы 104 на 05.10.2021

 Периферийные устройства ПК

Подготовить доклад к созданной презентации на выбранную тему:
  • Принтеры, 
  • сканеры, 
  • манипулятор мышь, 
  • многофункциональные устройства, 
  • веб-камера, 
  • графический планшет, 
  • требования по эксплуатации периферийного оборудования
В докладе должны быть отражены:
  • определение и назначение устройства
  • разновидности устройства
  • преимущества и недостатки каждого вида
  • технические характеристики устройства (минимальные, максимальные)

Для группы 204 на 05.10.2021

 Работа со звуком в Сони Вегас


Прочитать статью: https://video-film.su/blog/rabota-so-zvukom-v-soni-vegas

Записать в конспект:
  1. Возможности по обработке звука
  2. Как заменить часть звука в видео?
  3. Как добавить музыку к видеоряду?
  4. Как изменить громкость на части звуковой дорожки?
  5. Какие настройки звука можно произвести при помощи эквалайзера в СониВегас?

28 сентября 2021

Для группы 104 на 29.09.2021

Практическая работа №7

Тема: Изучение функций клавиатуры

1. Записать в конспект горячие клавиши Windows: 
https://stamina-online.ru/ru/hotkeys/windows 

2. Примените каждую комбинацию клавиш

3. Пройти тренажёр по горячим клавишам https://skills4u.ru/professional/goryachie-klavishi-windows.html (проходить до уровня не менее 100% за 5 минут)

ссылку с результатами отправить на почту olshost@yandex.ru

4. Пройти тренажёр по слепой печати: www.ratatype.ru/classes/25379/ - отправить запрос в класс (нужна электронная почта).


Для группы 104 на 28.09

 Цифровые фотокамеры

Как работает цифровая фотокамера: https://www.youtube.com/watch?v=N8um4yBP3e0&t=66s

2. Типы фотокамер. Основные характеристики. Выбор фотокамеры https://dphotoworld.net/school/photo_s_nulya/fotografija_s_nulja_urok_2_tipy_fotokamer_osnovnye_kharakteristiki/1-1-0-4 
3. Характеристики фотокамер https://club.dns-shop.ru/digest/12872-gid-po-vyiboru-fotokameryi/ 

Законспектировать: 

1. Принцип работы цифровой фотокамеры
2. Виды фотокамер
3. Характеристики фотокамер

18 сентября 2021

Для группы 204 на 18.09

Описание интерфейса видеоредактора Vegas Pro

https://video-photo.net/video-redaktory/programma-sony-vegas-pro-opisanie-interfejs 

https://www.sites.google.com/site/sonyvegasstudio/metodiceskie-rekomendacii-po-rabote-s-programmoj-sony-vegas/znakomstvo-s-interfejsom-programmy-sony-vegas


Для группы 104 на 18.09

 Файловая система ПК

Файловая система

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

Файл — это именованная область внешней памяти, в которую можно записывать и из которой можно считывать данные.

Файловая система (ФС) — это часть операционной системы, включающая:
● совокупность всех файлов на диске;
● наборы структур данных, используемых для управления файлами, такие, например, как каталоги файлов, дескрипторы файлов, таблицы распределения свободного и занятого пространства на диске;
● комплекс системных программных средств, реализующих различные операции над файлами, такие как создание, уничтожение, чтение, запись, именование и поиск файлов.

Основные функции файловой системы

  1. Идентификация файлов. Связывание имени файла с выделенным ему пространством внешней памяти.
  2. Распределение внешней памяти между файлами.
  3. Обеспечение надежности и отказоустойчивости.
  4. Обеспечение защиты от несанкционированного доступа.
  5. Обеспечение совместного доступа к файлам, так чтобы пользователю не приходилось прилагать специальных усилий по обеспечению синхронизации доступа.
  6. Обеспечение высокой производительности.

Атрибуты файлов

  • тип файла (обычный файл, каталог, специальный файл и т. п.);
  • владелец файла;
  • создатель файла;
  • пароль для доступа к файлу;
  • информация о разрешенных операциях доступа к файлу;
  • времена создания, последнего доступа и последнего изменения;
  • текущий размер файла;
  • максимальный размер файла;
  • признак «только для чтения»;
  • признак «скрытый файл»;
  • признак «системный файл»;
  • признак «архивный файл»;
  • признак «двоичный/символьный»;
  • признак «временный» (удалить после завершения процесса);
  • признак блокировки;
  • длина записи в файле;
  • указатель на ключевое поле в записи;
  • длина ключа.

15 сентября 2021

Для группы 104 на 15.09

 Семейства операционных систем

Используя материал https://1drv.ms/b/s!AgVDZkCfsKmummbL7AFTChYiacWA?e=YruUGS 

в файле https://docs.google.com/presentation/d/1gd_VHHdBCHI01_MO76ywxvqyrnW4pMFQs6Lr-VKQT8s/edit?usp=sharing 

создать слайд с инфографикой на тему Семейства операционных систем:

  1. OS/2
  2. UNIX, Linux
  3. Windows
по образцу:

На слайде не забудьте указать ФИО!!!

10 сентября 2021

Группа 104 на 10.09.2021

 Задание: 

  1. Создать файл MS Word "Тренажёры ФИО"
  2. Выполнить тренажеры по ссылкам (ниже)
  3. Сделать скриншоты результатов каждого тренажера (кнопка PrintScrn)
  4. Вставить 4 скриншота в файл
  5. Сохранить работу 
Тренажёры:

1. https://learningapps.org/watch?v=p5o3dhab221  - техника безопасности при работе на ПК

2. https://learningapps.org/view98605 - устройство системного блока

3. https://learningapps.org/view1471942 - устройство системного блока

4. https://learningapps.org/view1641479 - мультимедиа (виселица)

5. https://learningapps.org/view2605047 - мультимедиа (миллионер)

6. https://learningapps.org/view12311387 - мультимедиа (кроссворд) 


06 сентября 2021

Группа 104 06.09.2021

 Аналоговая и цифровая информация. Звук - основные параметры

https://1drv.ms/p/s!AgVDZkCfsKmumkJzclgqToepDePF?e=fGQaZT

 ДЗ: https://www.academia-moscow.ru/off-line/_books/fragment/102115845/102115845f.pdf 

Глава 1, Тема 1.2.1-1.2.2

Решить задачи (письменно):

1. Эфирное качество звука радио и телепередачи обеспечивается частотой дискретизации 22 кГц и 16-разрядным квантованием. Какой размер будет иметь файл, содержащий 40 с оцифрованного звука?

2. Посчитать объём файла с 10 мин музыки, записанной на компакт-диске.

3. Посчитать объём файла с записью радиотрансляции длительностью 15 мин с частотой дискретизации 22 кГц при использовании монозаписи.

02 сентября 2021

31 августа 2021

Группа 204 Дата 01.09.2021

Задание на 01.09.2021
1. Пройти по ссылке.
2. Выбрать слайд с номером ПК.
3. Написать Фамилию, имя, отчество в заголовке слайда.
4. Перечислить на слайде основные знания и умения, освоениные в рамках МДК.01.01 на 1 курсе. По возможности проиллюстрировать.
5. Оформить слайд по своему усмотрению.

03 июня 2021

УП.02

 На 03.06.2021

1. Зарегистрироваться на сайте https://htmlacademy.ru

2. Заполнить личный кабинет (в правом верхнем углу "Настройки" - "Личные данные")

3. Присоединиться к группе по ссылке (нажать кнопку "ПРИСОЕДИНИТЬСЯ")

https://htmlacademy.ru/for_schools/join/98cac9d33aad44bb31800130e8c50b5f

4. Пройти тренажер:

https://htmlacademy.ru/courses/basic-html-css 

20 мая 2021

УП.02

На 21.05.2021

 Тема:  Распределение блоков на веб-странице

Цель: Закрепить полученные знания об оформление текста на веб-странице при помощи html и css

Теоретические сведения

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

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

Далее читайте в источнике по ссылке

Ход работы

1. Скопируйте предыдущую работу на новый лист Notepad++ и сохраните под именем pz18.html в той же папке.

2. Удалите содержимое блока id='content" кроме элемента <h1> и введите новый заголовок "Виды публикаций и особенности их размещения". Не забудьте также про элемент <title>.

 

3. Ниже добавьте новый раздел с id="center", в котором разместите следующий текст:

Как и в области периодической печати, сфера интернет-журналистики включает в себя множество жанров, каждый из которых имеет свои особенности. 
Веб-обзор

Публикации проанализированных статей Интернета по определенной тематике с определением дальнейших перспектив их развития в сети. Благодаря таким обзорам можно сразу определить: удачная ли тема выбрана изданием, интересен или нет для аудитории способ раскрытия данной темы. Так как количество сайтов увеличивается, ранее созданным порталам порой сложно удержать своего читателя. Нужно каждый день производить новый, отличный от конкурентного контент.
Пользователю интересны яркие и динамичные проекты, в которых информация представлена качественно и привлекает внимание. Чтобы не тратить попросту время, достаточно прочитать обзор на интересующую тематику и выбрать сайты, ознакомиться с которыми имеет смысл более подробно. Но обзоры помогают не только пользователям - подбор информации о том, что интересно человеку сегодня, позволяет изданиям находиться на плаву, выпуская материалы на «злобу дня», давая на них комментарии ведущих специалистов в данной области знания.
Блог
Cетевой журнал-страница с короткими записями, ссылками, полем для комментариев. На сегодняшний день блогосфера, как говорилось ранее, динамично развивающаяся и набирающая популярность область массовой информации и коммуникации. Существуют разные типы блогов - текстовой, видео, аудио. Этот способ ведения новостных сообщений доступен каждому, достаточно просто зарегистрироваться на специальных сайтах, и можно начинать творить. Как правило, авторы делятся со своими читателями эмоциями, рассказывают о прошедших и будущих мероприятиях, комментируют прочитанное, увиденное как самими, так и другими членами блогосферы. Блог - это своего рода дневник или журнал событий (самый крупный портал, представляющий услуги по созданию блога так и называется Живой Журнал). Люди, ведущие такие записи, гордо носят имя блоггеров. Если раньше было принято вести личные дневники и делиться написанным в них только с самыми близкими людьми (дневники известных людей), то сейчас модно делиться своими наблюдениями со всеми. 
Авторский проект
личное мнение по поводу происходящих процессов с точки зрения одного человека. Как критерий
успешности такого автора - количество отзывов, ссылок на него в публикациях других участников
коммуникации. Авторские проекты - это первая ступень развития интернет-журналистики в
нашей стране. Именно такие проекты раскрыли возможности Интернета как средства массовой
информации. Благодаря минимальным затратам авторские проекты успешно продвигались в сетях,
завоевывая массовую аудиторию и набирая популярность.
Социальная сеть
Интерактивный многопользовательский веб-сайт, контент которого наполняется самими участниками сети. Сайт представляет собой автоматизированную социальную среду, позволяющую общаться группе пользователей, объединенных общим интересом. К ним относятся и тематические форумы, особенно отраслевые, которые активно развиваются в последнее время.

Как и в предыдущей работе данный текст необходимо разбить на отдельные части. Но теперь мы будем использовать не разделы и абзацы, а секции.

4. Каждый абзац "оберните" тегом <section>...</section>.

5. Сделайте заголовки 5-го уровня по видам публикаций.

Теперь необходимо позиционировать наши секции в отдельных блоках. Для этого нужно задать стиль для элемента <section>.

6. В файл main.css перед селектором #footer добавьте селектор section.

7. Задайте для элемента следующий стиль: 

цвет фона: #D3EFF3;
внутренний и внешние отступы по 10px;
ширина блока 45% от общей ширины окна
радиус рамки блока 6px;
расположение элемента слева от родителя.

Проверьте правильность написания кода:

Обратите внимание, где теперь размещён "подвал". Он как будто обтекает наши секции, как изображения. Для того, чтобы он размещался ниже, необходимо очистить его от этого обтекания. Для этого применяется свойство clear с различными значениями (читайте в теории). 

8. Применим значение both для свойства clear:

В селектор #footer добавим свойство clear со значением both:

14 мая 2021

УП.02

На 20.05.2021

Если сайт разноцветный ― это не означает, что он красивый.

Если на нём много информации ― это не означает, что он полезный.

Если вы используете необычный шрифт ― это не значит, что ваш сайт будут читать.

Хорошие дизайнеры знают эти факты. Делать сайт самому, не владея навыками веб-дизайна, ― гиблое дело. Но разбираться в основах правильного оформления, уметь отличать плохое от хорошего всё же стоит.

Вы же хотите, чтобы тексты на вашем сайте читали?

Предлагаем вам запомнить 10 базовых рекомендаций по типографике и смело практиковать их.

10 советов, чтобы сайт созрел

1. Правильный размер шрифта повышает читабельность текста. Пользователи не хотят настраивать шрифт на вашем сайте самостоятельно. Позаботьтесь о них заранее. Слишком маленький шрифт их отпугнет, слишком большой напряжёт. Выбрав стандартные размеры (12,13,14 кегль), вы не ошибётесь.

2. Пространство сайта не должно быть заполнено на 100 %. Это только утомит читателя, он никогда не просмотрит такую страницу целиком. Оставляйте пустые пространства, играйте с отступами. Текст должен быть окружён пустотой. Это сотворит чудо: контент начнут читать. Происходит это потому, что пользователь сразу поймёт, где начало текста, а где конец. Читательский глаз не устанет, ваш сайт будет только радовать.

3. Подчёркивать каждое слово в тексте или ставить гиперссылки на большую часть слов ― это пережитки веб-дизайна прошлого века. Именно тогда онлайн-ресурсы красовались синеньким шрифтом и возможностью кликов по словам. Сегодня постоянное выделение бьёт по глазам, раздражает, вынуждает вашего читателя скорее перейти по ссылке, лишь бы избавиться от графического наваждения. Элементарное уважение к посетителям и правила эстетичного оформления рекомендуют: воспользуйтесь курсивом, если хотите выделить отдельное слово или фразу из текста.

4. Хороший контент должен содержать изображения, так как картинки привлекают внимание посетителя. Но размещать стоит нужные картинки. Хаотично расположенные, бесполезные иллюстрации никому не интересны. Пользователь потому так и называется, что любит пользу.

5. Хороший заголовок – половина успеха статьи. Размер хорошего заголовка – дополнительная треть успеха. Самые популярные размеры заголовков находятся в диапазоне от 18 до 29 пикселей. Если название совсем короткое (одно-два слова), можно использовать более крупный кегль.

6. Точка в конце заголовка никогда не ставится; вопросительный и восклицательный знаки — могут.

7. Акцентируйте внимание на словах с помощью разных размеров шрифтов, стилей текста (капслок, курсивное и полужирное начертание). Хороший вариант – сочетать шрифты с засечками и без. Раньше все старались пользоваться шрифтами без засечек в заголовках, основной текст писать с засечками. Сегодня тенденция изменилась в сторону микса.

8. Размеры строк имеют значение. Ширина строки во весь экран понравится только фанатикам вашего сайта и его тематики, другой человек прекратит чтение. Слишком узкая колонка тоже не подойдет, так как глаза устанут прыгать от строчки к строчке. Самая приятная для человека строка содержит от 55 до 75 символов. Помимо размера, для восприятия важно расстояние между абзацами и строками.

9. Цветовые комбинации шрифтов и фона для восприятия играют важную роль. Выворотный текст (белый на черном фоне), как уже было доказано много раз, читается хуже. Но и от угольно-черных букв на слепяще белом фоне дизайнеры стараются сегодня уходить – чтобы глазам не было больно при просмотре. Черный шрифт заменяется ими на чуть более мягкий тон, белый фон стремится к молочному или иным оттенкам.
В конце концов, какой бы палитрой вы не пользовались, правил несколько: если шрифт похож по цвету на фон, то читается он плохо. Играясь с другими цветами и оттенками, кроме черных и белых, помните: текст должен быть контрастен по отношению к фону.

10. Типографика существует для текста, а не текст — для типографики. Оформление должно подчеркивать смысловую нагрузку текста, помогать пользователю понять, что важнее, на чем необходимо остановить взгляд.

Эти основные правила легко запомнить и применить. 

©https://www.optimism.ru/blog/10-pravil-oformleniya-teksta-na-sajte/

Ход работы

В текстовом редакторе Notepad++ открыть страницу index.html, созданную в ПР№12. Скопировать содержимое страницы и вставить на новый лист. Удалить содержимое раздела "id=content". Сохранить новый документ под именем pz16.html. Изменить название веб-страницы на "Особенности проектирования сайтов".

Между блоками header и footer вставьте текст:

Избыток информации. Сейчас в Интернете скопился огромный объём информации и пользователя подчас даже приходится уберегать от него, упорядочивая информацию, делая работу с ней более понятной и удобной.
Люди не читают веб-страницы, а просматривают. Вместо подробного чтения текста посетители бегло его просматривают, задерживаясь на словах и выражениях, которые привлекают их внимание, важны для них. Поэтому важно грамотно оформить текст и заголовки, чтобы максимально быстро донести основную мысль статьи до посетителя сайта, заинтересовать его.
Пользователи избегают медленно загружающих сайтов. В большинстве случаев посетители не дожидаются полной загрузки медленных сайтов и уходят, так как есть возможность найти другой, "быстрый", сайт с той же направленностью. Сайт может загружаться медленно по разным причинам: страницы перегружены графикой или Flash-содержимым, он расположен на web-сервере c узкой пропускной способностью, возникли проблемы на линии связи. Web-дизайнер может решить только первую проблему — делать дизайн сайта более легким, свести графическое оформление к минимуму.
Люди плохо ориентируются в большом количестве информации. В отличие от операционной системы, которая является стандартизованной и содержащей единые элементы интерфейса, web-сайты имеют разное представление данных. Это создает определённые трудности для его посетителя, он должен за несколько секунд разобраться в системе навигации по сайту. В этом ему поможет продуманное планирование сайта, которое также ложится на web-дизайнера.
Трудности чтения с экрана монитора. Конечно, мы каждый день читаем электронную почту, новости и другую информацию, несмотря на то, что на мониторе буквы видны хуже, чем на бумаге, — с этим все давно смирились. Но эту особенность следует учитывать при составлении текстов для web-страниц, выбирать четкий «читабельный» шрифт на контрастном фоне.

Посмотрите в браузере, что получилось. Обратите внимание на недостатки:

Текст нечитаемый вообще!!! Надо срочно исправлять!

1.Начнём с выделения раздела:

Оберните текст тегом <div id="content">

2. Далее введём заголовок 1 уровня <h1>Особенности проектирования сайтов</h> и добавим раздел с идентификатором id="center":

Стало немного лучше - теперь понятно о чём текст и стало виднее, где начало и где конец.

3. Следующий этап - разбить текст на абзацы и подзаголовки:

Найдите в тексте и оберните тегом <h3> следующие заголовки (не забудьте убрать точки):

Избыток информации
Люди не читают веб-страницы, а просматривают
Пользователи избегают медленно загружающихся сайтов
Люди плохо ориентируются в большом количестве информации
Трудности чтения с экрана монитора

Абзацы поместите в тег <p>...</p>.

Сохраните index.html (ctrl+S), обновите страницу в браузере(F5).

Стиль заголовка h3 почти не отличается от h1, поэтому стоит поменять его размер в css-файле main.css со значения 35px, на значение 25px. Также нужно настроить отступ от текста абзаца до следующего заголовка. Для этого селектору #content h3 зададим свойство margin-top со значением 20px, отступ снизу (margin-bottom) поменяем на 25px.

получится так:

4. Немного лучше, но глаза устанут бегать по строкам.Легче текст читается "сверху вниз". Давайте сделаем текстовый блок немного Уже. 

Для этого изменим название блока c id="center" на id="center_text" в index.html, а в файле main.css добавим новый стиль для этого блока с шириной 750px:

Вот так текст уже "можно" прочитать:

4. Аналогичным способом создайте страницу pz17.html и разместите текст:

Облачные технологии.
Термин "облачные технологии" появился в 2008 г. Суть облачных технологий заключается в предоставлении пользователям удалённого доступа к услугам, вычислительным ресурсам и приложениям (включая операционные системы и инфраструктуру) через Интернет.
При этом программное обеспечение (приложение, пакет офисных программ, операционную систему и т.д.) устанавливать на компьютер не обязательно. При облачных вычислениях данные постоянно хранятся на виртуальных серверах, расположенных в облаке, а также временно кэшируются на клиентской стороне не компьютерах, ноутбуках, мобильных устройствах и т.д.
Типы облаков. Частное облако - инфраструктура, предназначенная для использования одной организацией, включая несколько потребителей (например, подразделений одной организации).
Публичное облако (англ. public cloud) - это инфраструктура, предназначенная для свободного использования широкой публикой. Публичное облако может находиться в собственности, управлении и эксплуатации коммерческих, научных и правительственных организаций (или какой-либо их комбинации).
Гибридное облако (англ. hybrid cloud) - это комбинация из двух и более различных облачных инфраструктур (частных, публичных), остающихся уникальными объектами, но связанных между собой стандартизованными или частными технологиями передачи данных и приложений (например, кратковременное использование ресурсов публичных облаков для балансировки нагрузки между облаками).
Общественное облако (англ. community cloud) - это вид инфраструктуры, предназначенный для использования конкретным сообществом потребителей из организаций, имеющих общие задачи.
На практике границы между всеми этими типами вычислений размыты.
Три уровня облачных сервисов:
- инфраструктура как сервис (IaaS). Инфраструктура в аренду. Пользователю предоставляется "чистый" экземпляр виртуального сервиса с уникальным IP-адресом или набором адресов и часть системы хранения данных;
- платформа как сервис (PaaS). PaaS можно представить как готовую к работе виртуальную платформу, состоящую из одного или нескольких виртуальных серверов с установленными операционными системами и специализированными приложениями;
- программное обеспечение как сервис (SaaS). Концепция SaaS предоставляет возможность пользоваться программным обеспечением как услугой и делать это удаленно через Интернет. Данный подход позволяет не покупать программный продукт, а временно воспользоваться им при возникновении необходимости.
Примеры облачных технологий:
- Google-calendar - онлайн-календарь;
- Google-maps - онлайн-набор карт;
- Google-Docs - онлайн-офис;
- YouTube - видеохостинг;
- Яндекс-диск - сервис для хранения файлов.


Самостоятельно внесите корректировки в main.css.

13 мая 2021

УП.02

 14.05.2021

Теоретические сведения

Главной называется веб-страница, с которой обычно начинается просмотр сайта. Она открывается при наборе адреса сайта и в каком-то смысле является его «лицом». 

Для того, чтобы при вводе адреса сайта в браузере открылась именно главная страница, необходимо, чтобы она имела определённое название. Главную страницу сайта принято называть index.html

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

Главная страница обычно состоит из "Шапки", "Основного раздела" сайта и "Подвала".

Стиль главной страницы, а также остальных страниц сайта прописывается в отдельном CSS-файле main.css

Ход выполнения практической работы

1. В текстовом редакторе Notepad++ создать новую страницу. Ввести шаблон веб-страницы, сохраните страницу под именем index.html.

2. В тело документа (внутри элемента <body> - строка 8) добавить заголовок и изображение. Фотографию необходимо сохранить в подкаталоге img под именем photo.png в той же папке, в которой находится наш index.html.

3. Добавим информацию о себе. Для этого используем парный тег <p> и одинарный <br>. Добавьте под тегом img следующий текст:

Должно получиться примерно так:

4.Парный тег <a></a> указывает браузеру, что содержимое элемента (это может быть и текст, и картинка) является ссылкой, и, при щелчке по ссылке (то есть по содержимому), браузер попытается перейти по адресу указанном в атрибуте href:

5. Тег <a> поддерживает атрибут target, который указывает в какой вкладке открыть страницу, указанную в ссылке. Например, target=”_blank” - указание загрузить страницу в новой вкладке: 

6. Добавьте перед тегом <h1> сразу после <body> следующий текст:

Атрибут href=”#” - указание, что при щелчке по этой ссылке никуда переходить не нужно.

<span>

Парный тег <span></span> - это, наверное, самый трудный для понимания тег. Он как бы говорит, что внутри заключен кусочек текста. На самом деле в HTML есть еще теги, которые позволяют задать некоторую логику страницы, span один из них. Он не влияет непосредственно на сам вывод, но позволит в дальнейшем элементам, заключенным в этот тег, придать стиль с помощью CSS. С помощью <span> и CSS мы добавим промежутки между пунктами меню.

7.В нижнюю часть добавим ссылки на будущие веб-страницы и ссылку на группу "ППТ" в соц.сети ВКонтакте.

DIV - разделяй и властвуй

Пока сайт выглядит очень невзрачно. Для того, чтобы он стал более красивым, нужно задать стили оформления, но перед этим нужно задать логику сайта с помощью тегов <div> и атрибутов id.

Сам тег <div>, так же как и <span>, не влияет на вывод информации на экран. Но он позволяет разделить веб-страницу на разделы, на которые можно будет потом влиять с помощью CSS кода.
Атрибут ID дает название разделам, чтобы по ID можно было обратиться к нужному разделу и изменить его стиль оформления.

Подключим CSS

Добавьте в <head> тег загрузки стиля <link rel= "stylesheet" href= "main.css">

В текстовом редакторе Notepad++ создайте новый документ и сохраните его в папке, где размещён index.html под именем main.css. Содержимое CSS-документа можно скопировать тут и вставить в main.css

Если вы всё сделали правильно, веб-страница должна будет выглядеть примерно так:

Самостоятельно замените цвета блоков. Можно пользоваться сервисом https://colorscheme.ru/:

Например назначим:

    1. Цвет элементов с ID header и footer на #b5b7ba
    2. Цвет фона веб-страницы на #C8EDF3
    3. Цвет текстового блока на #D3EFF3

Сохраните css-файл, обновите страницу в браузере: