Задача: Необходимо создать простой одностраничный сайт о себе, содержащий текст и фотографию. Работа будет состоять из нескольких шагов. Разработка макета сайта. Описание логической структуры сайта, планирование контента. Оформление сайта. Добавление личной информации. Ход работы: Разработка макета сайта. На одной веб-странице нам необходимо разместить фото, фамилию, имя, контакты. В заголовке страницы будет приветствие. Так как информации немного, можно попробовать нарисовать макет схематично на листе бумаги. Создание рабочей папки Создай на компьютере папку Мой сайт. Здесь будут храниться все файлы, необходимые для работы сайта. Создание веб-страницы Открой программу Блокнот. Набери следующий код: <!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% - четко , быстро, качественно! Спасибо большое 🙏👌
Ruslan
РАНХиГС
Полина-мегамозг. Все к Полине. Полина молодец. Из трех человек Полина набрала больше всех ...
Диана
Юр
Это самый лучший исполнитель за все время сотрудничества на данном сайте (4 года). Очень р...
Эвелина
Самгупс
Рекомендую , автор очень отзывчивый. Сделал свою работу на 5++++++++++++. Ещё и у меня оц...