Embedded Files
Практическая работа
Создание веб-страницы
Создание веб-страницы
Необходимо создать простой одностраничный сайт о себе, содержащий текст и фотографию. Работа будет состоять из нескольких шагов.
Разработка макета сайта.
Описание логической структуры сайта, планирование контента.
Оформление сайта.
Добавление личной информации.
Разработка макета сайта
На одной веб-странице нам необходимо разместить фото, фамилию, имя, контакты. В заголовке страницы будет приветствие. Так как информации немного, можно попробовать нарисовать макет схематично на листе бумаги.
Создание рабочей папки
Создание рабочей папки
Создай на компьютере папку Мой сайт. Здесь будут храниться все файлы, необходимые для работы сайта.
Создание веб-страницы
Создание веб-страницы
Открой программу Блокнот. Набери следующий код:
<!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
Когда код будет набран, выбери команду Файл — Сохранить как.
В появившемся окне выбери папку Мой Сайт, тип файла — Все файлы, затем введи имя файла с расширением htm: Страница1.htm.
Проверка сайта в браузере
Проверка сайта в браузере
После сохранения файла можно посмотреть результат. Для этого открой файл Страница1.htm в любом браузере. Если все верно, ты увидишь четыре строчки: Приветствие, Фото, Фамилия Имя, Контакты.
Добавление стилей
Добавление стилей
Для того чтобы содержание веб-страницы преобразилось, необходимо добавить оформление. После строки <title>Страница обо мне</title> добавь следующий фрагмент.
Обрати внимание на отступы при записи тегов. Сравни свой HTML-код с приведенным на рисунке.
<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>
Проверка сайта в браузере
Проверка сайта в браузере
Теперь давай посмотрим, что изменилось. Открой этот же файл в браузере. Если код набран без ошибок, ты увидишь, что страница преобразилась.
Добавление цвета
Добавление цвета
Перед тегом </style> добавь следующий код.
#text,#photo{background:#c7eaff}
#header,#footer{background:#ffdbc7}
Сохрани файл. Обнови страницу в браузере с помощью клавиши F5 на клавиатуре.
Вставка фото
Вставка фото
Скопируй свою фотографию в формате jpg в папку Мой сайт. Переименуй ее в photo1.jpg. В строке <div id = "photo”>Фото</div> вместо Фото набери <img src="photo1.jpeg">.
Сохрани файл и проверь результат в браузере.
Корректное отображение фото
Корректное отображение фото
Скорее всего, фотография не вписывается в рамки, которые отведены для нее. Добавь после строки #footer{background: #ffdbc7} следующий код, точно «вписывающий» фото в отведенную для него область.
img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;}
Сохрани файл и проверь результат в браузере.
Вставка текста
Вставка текста
Вместо Приветствие набери <h1>Hello, World!</h1>.
Вместо Фамилия Имя — <h3>Твои фамилия и имя</h3>.
Вместо Контакты — <p>Связаться по почте или через социальную сеть</p>.
Добавление ссылок
Добавление ссылок
Чтобы сделать активными свои контакты, нужно добавить адрес электронной почты и ссылку. Для этого замени строку кода <div id = "footer"><p>.Связаться по почте или через социальную сеть </p></div> на следующую:
<div id = "footer"><p>Связаться по <a href="mailto:EMAIL@mail.ru">почте</a> или через <a href="https://vk.com/">социальную сеть</a></p></div>
Проверка сайта в браузере
Проверка сайта в браузере
Сохрани файл и проверь результат в браузере.
Понятия темы «Создание веб-страниц»
Понятия темы «Создание веб-страниц»
Повтори основные изученные понятия, прочитав их определения и содержание.
Веб-сайт — группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками и расположены на одном сервере.
Гиперссылка — ссылка с возможностью перехода на другой объект.
Карта (план) сайта — разбиение общего содержания на смысловые разделы и страницы с указанием связей между ними, изображаемое в виде графа.
HTML (HyperText Markup Language) — стандартизированный язык разметки документов для просмотра веб-страниц в браузере.
HTML — это именно язык разметки, в отличие от языков программирования в нем нет переменных, циклов, ветвлений, процедур и функций, но есть теги.
Тэг — команда языка HTML.
Каскадные таблицы стилей CSS (Cascading Style Sheets) — язык, который специально предназначен для описания внешнего вида веб-страницы, задания цветов, шрифтов, стилей отдельных блоков.
<!DOCTYPE html> — тег, предназначенный для указания типа текущего документа — DTD (от англ. document type definition, описание типа документа).
<html>…</html> — контейнер, в котором содержится вся веб-страница, включая теги <head> и <body>.
<head>…</head> — контейнер, в который помещаются метаданные документа. Они не видны пользователям, но считываются поисковыми роботами. Исключение составляет тег <title>.
<title>…</title> — задает название страницы, отображаемое на вкладке браузера.
<body>…</body> — обрамляет видимую пользователям часть документа. Все, что указано внутри этого контейнера, отобразится на странице в браузере.
<div>…</div> — определяет блок, внутри которого будет находиться информация. В блоке определяется фрагмент, к которому потом может применяться стиль, задающий внешний вид.
<style>…</style> — применяется для определения стилей элементов веб-страницы. Тег <style> необходимо использовать внутри контейнера <head>.
HTML предлагает шесть заголовков разного уровня. Тег <h1> представляет собой наиболее важный заголовок первого уровня.
<p>…</p> — задаёт абзац текста.
<br> — непарный тег, обозначающий переход на новую строку внутри абзаца.
<img> — предназначен для отображения на веб-странице изображений. Адрес файла с изображением задается через атрибут src. Закрывающий тег не требуется.
<a>…</a> — предназначен для создания ссылок. В качестве значения атрибута href используется адрес документа, на который происходит переход.
Page updated
Google Sites
Report abuse