Урок 3

Учет понятия об информационной безопасности 

при создании комплексных информационных объектов в виде веб-страниц 

Веб-сайты

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

Создание веб-страницы

Необходимо создать простой одностраничный сайт о себе, содержащий текст и фотографию. Работа будет состоять из нескольких шагов.

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

2. Создание рабочей папки

Создай на компьютере папку Мой сайт. Здесь будут храниться все файлы, необходимые для работы сайта. 

3. Создание веб-страницы

Открой программу Блокнот. Набери следующий код:

<!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.

4. Сохранение файла с расширением htm

Когда код будет набран, выбери команду Файл — Сохранить как.

В появившемся окне выбери папку Мой Сайт, тип файла — Все файлы, затем введи имя файла с расширением htm: Страница1.htm.

5. Проверка сайта в браузере

После сохранения файла можно посмотреть результат. Для этого открой файл Страница1.htm в любом браузере. Если все верно, ты увидишь четыре строчки: Приветствие, Фото, Фамилия Имя, Контакты. 

6. Добавление стилей.

Для того чтобы содержание веб-страницы преобразилось, необходимо добавить оформление. После строки <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>

7. Проверка сайта в браузере

Теперь давай посмотрим, что изменилось. Открой этот же файл в браузере. Если код набран без ошибок, ты увидишь, что страница преобразилась.

8. Добавление цвета

Перед тегом </style> добавь следующий код.

#text,#photo{background:#c7eaff}
#header,#footer{background:#ffdbc7}

Сохрани файл. Обнови страницу в браузере с помощью клавиши F5 на клавиатуре.

9. Вставка фото

Скопируй свою фотографию в формате jpg в папку Мой сайт. Переименуй ее в photo1.jpg. В строке <div id = "photo”>Фото</div> вместо Фото набери <img src="photo1.jpeg">.

Сохрани файл и проверь результат в браузере.

10. Корректное отображение фото

Скорее всего, фотография не вписывается в рамки, которые отведены для нее. Добавь после строки #footer{background: #ffdbc7} следующий код, точно «вписывающий» фото в отведенную для него область.

img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;}

Сохрани файл и проверь результат в браузере.

11. Вставка текста

Вместо Приветствие набери <h1>Hello, World!</h1>.

Вместо Фамилия Имя — <h3>Твои фамилия и имя</h3>.

Вместо Контакты — <p>Связаться по почте или через социальную сеть</p>.

12. Добавление ссылок

Чтобы сделать активными свои контакты, нужно добавить адрес электронной почты и ссылку. Для этого замени строку кода <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>

13. Проверка сайта в браузере

Сохрани файл и проверь результат в браузере. 

Понятия темы «Создание веб-страниц»

Повтори основные изученные понятия, прочитав их определения и содержание.

Веб-сайт — группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками и расположены на одном сервере. 

Гиперссылка — ссылка с возможностью перехода на другой объект. 

Карта (план) сайта — разбиение общего содержания на смысловые разделы и страницы с указанием связей между ними, изображаемое в виде графа. 

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 используется адрес документа, на который происходит переход. 


Домашнее задание. §4.2