Embedded Files
Учет понятия об информационной безопасности
при создании комплексных информационных объектов в виде веб-страниц
Требования к сайтам государственных органов
Требования к сайтам государственных органов
Рассмотри плакат.
Рассмотри плакат.
Разработка сайтов для государственных организаций предполагает выполнение обязательных требований.
Ответь на вопрос
Открой сайт Федеральной налоговой службы, сайт НИУ МЭИ, сайт Российские железные дороги. Какие из требований, обозначенных на плакате, ты видишь на перечисленных сайтах?
Веб-сайты
Веб-сайты
Посмотри видеоролик.
Посмотри видеоролик.
Прочитай статью, обращая внимание на ключевые моменты.
Прочитай статью, обращая внимание на ключевые моменты.
Общие сведения о HTML и CSS
Для просмотра веб-страниц мы используем специальную программу — браузер.
Однако веб-страницу можно открыть и как обычный текстовый файл — в текстовом редакторе. В этом случае мы увидим перед собой тот же документ, что и в браузере, только иначе — перед нами HTML -документ.
--------------------------------------------------------------
HTML (HyperText Markup Language) — язык разметки гипертекста — это стандартизированный язык разметки документов для просмотра веб-страниц в браузере.
--------------------------------------------------------------------
Браузеры получают HTML-документ от сервера, используя протоколы http или https или открывая их с локального диска. Затем следует преобразование кода в интерфейс, который и будет транслировать на экран монитора. Из отдельных элементов HTML строятся целые HTML-страницы. HTML — это именно язык разметки, в отличие от языков программирования в нем нет переменных, циклов, ветвлений, процедур и функций. А вот что есть в этом языке, называется тегами .
------------------------------------------------
Тег — специальная метка, обозначающая начало или конец элемента.
---------------------------------------------------------
Теги — это команды особого типа. Они используются для выделения заголовков, абзацев, списков, вставки изображений и видео.
Несмотря на существующие стандарты языка HTML, разные браузеры могут по-разному показывать одну и ту же веб-страницу. Поэтому профессиональные разработчики обязательно проверяют, чтобы сайт выглядел по возможности одинаково в разных браузерах. Это свойство называется кроссбраузерностью сайта.
Начинаться HTML-документ должен со строки, которая будет говорить браузеру, какого типа документ находится в этом файле. Это не тег языка HTML, но этот элемент должен присутствовать в самом начале.
2. Первый тег — HTML.
Тег HTML является контейнером, который заключает в себя все содержимое веб-страницы. Закрывающий тег слэш HTML должен стоять в документе последним.
3. Следующий тег — head.
Содержимое тега head не отображается напрямую на веб-странице и содержит в себе в основном служебную информацию для браузеров и поисковых систем. Например, тег meta с атрибутом charset задает кодировку документа. Кодировка нужна для того, чтобы браузер смог правильно отобразить текст на странице. В противном случае мы рискуем увидеть вместо букв иероглифы.
Единственный тег, который находится внутри тега head и отображается напрямую, — это тег title, устанавливающий заголовок окна веб-страницы.
4. Следующий тег — body.
Он обрамляет видимую пользователям часть документа. Все, что мы укажем внутри этого контейнера, отобразится на странице.
На нашей странице присутствует заголовок первого уровня, заданный между тегами h1, и текст абзаца, который находится внутри тегов p.
Мы рассмотрели пример простой веб-страницы, сделанной целиком на языке HTML. Однако для верстки веб-страниц инструментария языка HTML может быть недостаточно. Для оформления веб-страницы используют другой язык — CSS (CSS (CascadingStyle Sheets) — каскадные таблицы стилей — язык описания внешнего вида веб-страницы.) , который специально предназначен для описания внешнего вида веб-страницы: для задания цветов, шрифтов, стилей отдельных блоков.
Рассмотрим пример. Здесь у нас страница с заголовком первого уровня, обозначенным тегом h1, и текст внутри тега p. Для обозначения перехода на новую строку используется тег br. Закрывающий тег для него не требуется.
2. Есть несколько способов подключения стилей к документу. Рассмотрим один из них. А именно — стили в самом файле веб-страницы, внутри элемента style, который находится внутри элемента head. Обрати внимание на пример. Рядом соседствуют два языка — HTML и CSS. Фрагмент кода на языке CSS находится между двумя тегами — открывающим и закрывающим тегами style. В данном примере стиль применяется ко всему, что находится внутри тегов body, то есть ко всему документу. Здесь задан красный цвет шрифта.
3. Один из способов применения языка CSS — это применение стиля к конкретному элементу, обозначенному идентификатором. Например, на странице есть заголовок с идентификатором header, и к нему применены свойства с заданными значениями.
Здесь заданы высота 120 пикселей, положение блока по центру по горизонтали, содержимое блока тоже расположено по центру.
Другие свойства со значениями применены к тегу p.
Теперь, после краткого знакомства с веб-страницами, языком HTML и каскадными таблицами стилей CSS, можно приступать к практическим занятиям — созданию собственной веб-страницы.
Создай простой одностраничный сайт о себе, содержащий текст и фотографию.
Создай простой одностраничный сайт о себе, содержащий текст и фотографию.
Работа будет состоять из нескольких шагов:
Разработка макета сайта.
Описание логической структуры сайта, планирование контента.
Оформление сайта.
Добавление личной информации.
Практическая работа
Создание веб-страницы
Создание веб-страницы
Необходимо создать простой одностраничный сайт о себе, содержащий текст и фотографию. Работа будет состоять из нескольких шагов.
Разработка макета сайта.
Описание логической структуры сайта, планирование контента.
Оформление сайта.
Добавление личной информации.
Разработка макета сайта.
На одной веб-странице нам необходимо разместить фото, фамилию, имя, контакты. В заголовке страницы будет приветствие. Так как информации немного, можно попробовать нарисовать макет схематично на листе бумаги.
2. Создание рабочей папки
2. Создание рабочей папки
Создай на компьютере папку Мой сайт. Здесь будут храниться все файлы, необходимые для работы сайта.
3. Создание веб-страницы
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
4. Сохранение файла с расширением htm
Когда код будет набран, выбери команду Файл — Сохранить как.
В появившемся окне выбери папку Мой Сайт, тип файла — Все файлы, затем введи имя файла с расширением htm: Страница1.htm.
5. Проверка сайта в браузере
5. Проверка сайта в браузере
После сохранения файла можно посмотреть результат. Для этого открой файл Страница1.htm в любом браузере. Если все верно, ты увидишь четыре строчки: Приветствие, Фото, Фамилия Имя, Контакты.
6. Добавление стилей.
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. Проверка сайта в браузере
7. Проверка сайта в браузере
Теперь давай посмотрим, что изменилось. Открой этот же файл в браузере. Если код набран без ошибок, ты увидишь, что страница преобразилась.
8. Добавление цвета
8. Добавление цвета
Перед тегом </style> добавь следующий код.
#text,#photo{background:#c7eaff}
#header,#footer{background:#ffdbc7}
Сохрани файл. Обнови страницу в браузере с помощью клавиши F5 на клавиатуре.
9. Вставка фото
9. Вставка фото
Скопируй свою фотографию в формате jpg в папку Мой сайт. Переименуй ее в photo1.jpg. В строке <div id = "photo”>Фото</div> вместо Фото набери <img src="photo1.jpeg">.
Сохрани файл и проверь результат в браузере.
10. Корректное отображение фото
10. Корректное отображение фото
Скорее всего, фотография не вписывается в рамки, которые отведены для нее. Добавь после строки #footer{background: #ffdbc7} следующий код, точно «вписывающий» фото в отведенную для него область.
img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;}
Сохрани файл и проверь результат в браузере.
11. Вставка текста
11. Вставка текста
Вместо Приветствие набери <h1>Hello, World!</h1>.
Вместо Фамилия Имя — <h3>Твои фамилия и имя</h3>.
Вместо Контакты — <p>Связаться по почте или через социальную сеть</p>.
12. Добавление ссылок
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. Проверка сайта в браузере
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
Page updated
Google Sites
Report abuse