Задача: Необходимо создать простой одностраничный сайт о себе, содержащий текст и фотографию. Работа будет состоять из нескольких шагов. Разработка макета сайта. Описание логической структуры сайта, планирование контента. Оформление сайта. Добавление личной информации. Ход работы: Разработка макета сайта. На одной веб-странице нам необходимо разместить фото, фамилию, имя, контакты. В заголовке страницы будет приветствие. Так как информации немного, можно попробовать нарисовать макет схематично на листе бумаги. Создание рабочей папки Создай на компьютере папку Мой сайт. Здесь будут храниться все файлы, необходимые для работы сайта. Создание веб-страницы Открой программу Блокнот. Набери следующий код: <!DOCTYPE html> <html> <head> <title>Страница обо мне</title> </head> <body> <div id = "main"> <div id = "header">Приветствие</div> <div id = "photo">Фото</div> <div id = "text">Фамилия Имя</div> <div id = "footer">Контакты</div> </div> </body> </html> Обрати внимание у нас есть четыре блока с идентификаторами header, photo, text, footer. Сохранение файла с расширением htm Когда код будет набран, выбери команду Файл — Сохранить как. В появившемся окне выбери папку Мой Сайт, тип файла — Все файлы, затем введи имя файла с расширением htm: Страница1.htm. Проверка сайта в браузере После сохранения файла можно посмотреть результат. Для этого открой файл Страница1.htm в любом браузере. Если все верно, ты увидишь четыре строчки: Приветствие, Фото, Фамилия Имя, Контакты. Добавление стилей Для того чтобы содержание веб-страницы преобразилось, необходимо добавить оформление. Открой файл Страница 1 с помощью программы Блокнот. После строки <title>Страница обо мне</title> добавь следующий фрагмент. <style> #main{ width: 710px; margin: 0px auto; border: 3px solid #edc7ff; } #header{ height: 120px; display: flex; align-items: center; justify-content: center; border-bottom: 3px solid #fff7c7; } #photo{ width: 450px; height: 500px; float: left; border-right: 3px solid #fff7c7; } #text{ width: 255px; height: 500px; float: right; text-indent: 20px; display: flex; align-items: flex-end; } #footer{ height: 25px; display: flex; align-items: center; justify-content: center; clear: both; border-top: 3px solid #fff7c7; } </style> Обрати внимание на отступы при записи тегов. Сравни свой HTML-код с приведенным на рисунке. Проверка сайта в браузере Теперь давай посмотрим, что изменилось. Открой этот же файл в браузере. Если код набран без ошибок, ты увидишь, что страница преобразилась. Добавление цвета Перед тегом </style> добавь следующий код. #text,#photo{background:#c7eaff}; #header,#footer{background:#ffdbc7}; Сохрани файл. Обнови страницу в браузере с помощью клавиши F5 на клавиатуре. Вставка фото Скопируй свою фотографию в формате jpg в папку Мой сайт. Переименуй ее в photo1.jpg. В строке <div id = "photo”>Фото</div> вместо Фото набери <img src="photo1.jpg">. Сохрани файл и проверь результат в браузере. Корректное отображение фото Скорее всего, фотография не вписывается в рамки, которые отведены для нее. Добавь после строки #footer{background: #ffdbc7} следующий код, точно «вписывающий» фото в отведенную для него область. img { object-fit: cover; object-position: center; width: 100%; height: 100%;} Сохрани файл и проверь результат в браузере. Вставка текста Вместо Приветствие набери <h1>Hello, World!</h1>. Вместо Фамилия Имя — <h3>Твои фамилия и имя</h3>. Вместо Контакты — <p>Связаться по почте или через социальную сеть</p>. Добавление ссылок Чтобы сделать активными свои контакты, нужно добавить адрес электронной почты и ссылку.
яна
имэс
Спасибо большое! Не первый раз уже обращаюсь, всегда выполняете работу вовремя и без замеч...
Дарья
СПБГАУ
Очень хороший исполнитель) дистанционный тест выполнил быстро. результаты пока не знаю, ду...
Василий
АГПУ
Исполнителя рекомендую 100% - четко , быстро, качественно! Спасибо большое 🙏👌
Екатерина
ИВГУ
Всё замечательно, быстро и аккуратно сделано с объяснениями. Спасибо огромное!))