###### tags: `МДК02.04 Сетевые языки` # Лабораторная работа. Создание каркаса Web страници ## Теоретическая часть Для тех кому видео формат нравится: - [Введение в HTML](https://www.youtube.com/watch?v=4jYYHaTwWvY&pp=ygUR0L7RgdC90L7QstGLIGh0bWw%3D) - [Плейлист Изучение HTML с нуля!](https://www.youtube.com/watch?v=_R5a-Kc0pRc&list=PLDyJYA6aTY1nlkG0gBj96XDmDSC4Fy1TO) Документация по HTML: https://html5book.ru/osnovy-html/ HTML структура Web страницы: https://smartiqa.ru/courses/web/lesson-3-html :::success Так как это практический предмет то обращаю ваше внимание на то, что весь необходимый материал показываеться преподавателем на паре. ::: ## Практическая часть. 1. Создайте базовую структуру веб страницы. ```html= <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ``` 2. Измените код так чтобы в заголовке странице была ваша фамилия. 3. Добавьте в тег body структурные теги: ```html= <header></header> <main></main> <footer></footer> ``` 4. В теге `<header>` создайте заголовок первого уровня с текстом "Привет HTML" 5. В теге main создайте заголовок второго уровня "Закон Мерфи". 6. Создайте абзац и запишите в него закон мерфи: ``` Если что-нибудь может пойти не так, оно пойдёт не так. ``` 7. Далее создайте нумерованый список из трех высказываний, демонстрирующих данный закон. Элементы списка должны быть записанны курсивом. Пример фразы: *Когда опаздываешь, маршрутка едет очень медленно и останавливается у каждого светофора.* 8. Вставьте эту картинку в качестве ширены укажите `200px` а в тег `alt` впишите текст. "Сенсей": ![](https://hackmd.io/_uploads/HkXwn7l16.png) 9. Ознокомьтесь с философией языка python: ```= Красивое лучше, чем уродливое. Явное лучше, чем неявное. Простое лучше, чем сложное. Сложное лучше, чем запутанное. Плоское лучше, чем вложенное. Разреженное лучше, чем плотное. Читаемость имеет значение. Особые случаи не настолько особые, чтобы нарушать правила. При этом практичность важнее безупречности. Ошибки никогда не должны замалчиваться. Если они не замалчиваются явно. Встретив двусмысленность, отбрось искушение угадать. Должен существовать один и, желательно, только один очевидный способ сделать это. Хотя он поначалу может быть и не очевиден, если вы не голландец [^1]. Сейчас лучше, чем никогда. Хотя никогда зачастую лучше, чем прямо сейчас. Если реализацию сложно объяснить — идея плоха. Если реализацию легко объяснить — идея, возможно, хороша. Пространства имён — отличная штука! Будем делать их больше! ``` 10. Создайте блок `<div></div>` в блоке main. Создайте новый абзац и впишите в него жирным текст "Дзен питона:". После создайте маркированный список где каждый из элементов списка это строка из дзена питона. Впишите первые 7 строк дзена, последнию строку выделете жирным и подчеркните. 11. В тег `footer` добавьте тег `hr`. Далее впишите следующие: ``` <p>&copy; ФИО 2023г</p> ``` ## Контрольные вопросы 1. Расскажите про все использованные вами теги? Как они записываються какие функции выполняют? 2. Прочитайте про [спец символы](https://html5book.ru/specsimvoly-html/) в HTML и приведите пример их использования.