Верстка web-страницы
Ознакомление с описанием тегов. Определение целей их использования. Рассмотрение особенностей каталога с сайтом на рабочем компьютере. Характеристика стилей главного блока и шапки страницы. Исследование и анализ специфики используемых атрибутов.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 02.10.2021 |
| Размер файла | 1,1 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РФ
Факультет информационных технологий
Кафедра «Компьютерные системы и технологии»
Лабораторная работа: «Верстка web-страницы»
Выполнил: студент группы О-20-ИСТ-итпк-Б
Власов С.А.
Руководитель: Кузьменко А.А
Брянск 2021
Оглавление
1. Работа с HTML кодом
1.1 Описание тегов
1.1.1 Использование используемых тегов
1.1.2 Цель использования
1.2 Описание используемых атрибутов
2. Работа с CSS
2.1 Описание стилей главного блока и шапки страницы
2.2 Описание стилей центрального блока
2.3 Описание тегов и стилей нижнего блока
3. Каталог с сайтом на рабочем компьютере
1. Работа с HTML кодом
1.1 Описание тегов
1.1.1 Использование используемых тегов
Для создания страницы было использовано 14 тегов
Рис.1.
Рис.2.
<!DOCTYPE html> -- 1раз
<html> -- 1 раз
<head> --1 раз
<link> -- 1 раз
<body> -- 1 раз
<div> -- 10 раз
<img> -- 2 раза
<a> -- 8 раз
<section> - 2 раза
<span> - 2 раза
<h1> - 1 раз
<h2> - 1 раз
<h3> - 2 раза
<ul> - 1 раз
<li> - 2 раза
1.1.2 Цель использования
<!DOCTYPE html> -- используется для указания типа страницы и языка разметки, который на ней применяется.
<head> -- предназначен для хранения других элементов, цель которых -- помочь браузеру в работе с данными.
<html> -- является контейнером, который заключает в себе все содержимое веб-страницы. тег сайт компьютер
<link> -- устанавливает связь с внешним файлом со стилями (рис.3).
Рис.3. Первая часть html-кода.
<body> -- предназначен для хранения содержания веб-страницы, отображаемого в окне браузера.
<header> - задает «шапку» сайта или раздела, в которой обычно располагается заголовок.
<div> -- блочный элемент, предназначен для выделения фрагмента документа с целью изменения вида содержимого.
<div> -- используется для хранения логотипа страницы.
<img> -- загружает изображение (логотип) с сайта по указанной ссылке.
<div> -- хранит еще один маркированный список.
<a> - преобразует текст в ссылку
Рис.4. Вторая часть HTML кода.
<section> - Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок.
<div class=” first_wrapper”> - блочный элемент, предназначен для выделения фрагмента документа с целью изменения вида содержимого.
<div class=” first_inner”> - блок содержащий визитку сайта
<span class="first_description"> - строчный элемент документа.
<h1 class="texton_title"> - Заголовок 1 уровня.
<br> - используется для добавления межстрочного отступа.
<h2 class="first_subtitle"> - Заголовок 2 уровня.
<img> - загружает изображение (Визитка) с сайта по указанной ссылке.
Рис.5. Третья часть HTML кода.
<div> - блочный элемент, предназначен для выделения фрагмента документа с целью изменения вида содержимого.
<section> - Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок.
<div class="pcatalog_wrapper"> - создает блок в каталоге.
<h3> - Заголовок 3 уровня
<ul> - устанавливает маркированный список.
<span> - Строчный элемент документа
<li> - определяет отдельные пункты маркированного списка, а именно пункты: Бочки, Кадки.
<a> - преобразует текст в ссылку
Рис.6. Четвертая часть HTML кода.
1.2 Описание используемых атрибутов
При создании веб-страницы были использованы атрибуты и свойства:
“сlass” - 21 раз
“href” - 9 раз
“src” - 2 раза
“width” -1 раз
“height” - 1 раз
“alt” - 1 раз
Каждый атрибут и свойство выполняет свою функцию, а именно:
.class -- задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением.
href -- задает адрес документа, на который следует перейти.
src -- указывает адрес файла (URL), который будет загружаться во фрейм. Это может быть HTML-документ, изображение или серверная программа.
width -- изменяет ширину изображения.
height -- изменяет высоту изображения.
alt -- атрибут, который устанавливает альтернативный текст для области изображения.
2. Работа с CSS
2.1 Описание стилей главного блока и шапки страницы
1) Import url() - подключает сторонний шрифт
2) header{
background-color: rgb(255, 255, 255); - устанавливает задний фон снежного цвета
height: 100px - устанавливает высоту в 100 пикселей
}
3) .logo{ text-align: center; font-family: Verdana; }
text-align: center - выравнивает текст по центру;
font-family - устанавливает шрифт тексту;
4) .barrel_name{ text-align: center; font: 15px; font-size: 17px; font-family: 'Roboto Slab', serif; margin-top: -5px; }
font-size - Устанавливает размер шрифта в 17 пикслей:
margin-top: -5px - отступ от верхнего края в -5 пикселей;
5) .btn1, btn2, btn3, btn4, btn5{ display: inline-block; color: rgb(0, 0, 0); padding: 0.3rem 1.5rem; text-decoration: none; font-size: 20px; font-family: 'Didact Gothic', sans-serif;}
Display: inline-block - генерирует блочный элемент, который обтекается другими элементами веб-страницы;
padding: 0.3rem 1.5rem - создает границы вокруг элемента;
text-decoration: none - убирает декор текста(подчеркивание);
font-family: 'Didact Gothic', sans-serif; - задает тексту указанный шрифт
6) .btn1(2,3,4,5,6):hover{color: brown;}
Подсвечивает текст коричневым при наведении.
7) .btn6{ display: inline-block; color: rgb(0, 0, 0); padding: 0.3rem 1.5rem; text-decoration: none; border-radius: 1px; float: right; font-size: 20px; font-family: 'Didact Gothic', sans-serif; } - float: right - выравнивание по правому краю.
Рис.6. Header страницы.
Рис.7-8. Первая часть CSS кода.
2.2 Описание стилей центрального блока
1) Body - убирает отступ центрального блока страницы и устанавливает фон.
2) .c_barell - устанавливает положение для картинки бочки.
3) .first_description - устанавливает шрифт, цвет и отступы для визитки.
4) .first_title - устанавливает позицию и отступы для центрального блока
5) .png - выравнивает картинку по правому краю. Устанавливает позицию относительно его исходного места и ставит отступ в -390px
6) .texton_title - задает размер отступ, шрифт, и местоположение заголовку.
7) .first_subtitle - задает отступ и шрифт.
Рис.9. Центральный блок.
Рис.10. Вторая часть CSS кода.
2.3 Описание тегов и стилей нижнего блока
1) .pcatalog - задает стили для нижнего блока
2) .pcatalog_wrapper - задает отступ и рамку для блока каталога
3) .pcatalog_title - задает стили для “каталога”
4) .pcatalog_list - задает стили для маркированного списка
5) .pcatalog_item - задает стили элементу каталога
6) .pcatalog_item-title - задает стили названию элемента каталога
7) .pcatalog_item-price - задает стили цены элемента каталога
8) .pcatalog_item-link - задает стили цене элемента каталога
9) .pcatalog_ssilka - задает поле вокруг элемента
10) .pcatalog_item-2 - задает стили для второго элемента каталога
11) .pcatalog_item-price-2 - задает стили для цены.
12) .pcatalog_item-title-2 - задает стили для заголовка второго элемента
13) .pcatalog_ssilka-2 - задает поле для ссылки второго элемента каталога
14) .pcatalog_item-link-2 - задает стили для ссылки 2 элемента каталога.
Рис.11. Нижний блок.
Рис.12-13 Третья часть HTML кода.
3. Каталог с сайтом на рабочем компьютере
Сайт расположен в каталоге “веб”. Папка содержит один html файл и один css файл.
Рис.14. Каталог с web-страницей.
Размещено на Allbest.ru
Подобные документы
HTML как язык разметки гипертекста, его структура, элементы. Каскадные таблицы стилей, их разработка. Верстка: страницы как мы их видим. Новые технологии – HTML5, CSS3. LESS. Динамический язык стилевой разметки. Технологии упрощенной разметки HAML, SASS.
дипломная работа [3,4 M], добавлен 19.04.2013Физическая структура сайта. Шаблон оформления страницы. Исходный текст шаблона главной HTML-страницы (верстка с использованием фреймов). Фрагмент кода, содержащий карту сайта. Каскадные таблицы стилей. Программное обеспечение, использованное при работе.
курсовая работа [1,3 M], добавлен 02.07.2014Особенности разработки Web-страницы, с использованием Microsoft Word. Алгоритм работы: сохранение документа Word, как веб-страницы; просмотр веб-страницы, создание гиперссылок. Настройка и проверка Web-страницы с помощью программы Internet Explorer.
контрольная работа [2,4 M], добавлен 03.04.2010Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Понятие web-страницы, классификация. Принципы создания и основные элементы. Пример контента сайта "Академия детства". Стандарты разработки дизайна для сайтов дошкольных учреждений. Шаблон главной страницы. Программный инструментарий по разработке.
курсовая работа [409,2 K], добавлен 13.01.2014Возможности использования Word для создания web-страницы. Использование таблицы и шаблонов оформления документа. Создание гиперссылок и закладок в Word. Обзор визуальных и текстовых редакторов для верстки веб-страниц. Веб-презентация в PowerPoint.
реферат [312,6 K], добавлен 06.04.2010Знакомство с основными принципами построения Web-сайтов. Рассмотрение этапов создания простой страницы HTML. Анализ способов форматирования сайтов. Общая характеристика видов списков: маркированные, нумерованные. Особенности таблиц каскадных стилей.
курсовая работа [2,5 M], добавлен 18.07.2014Характеристика транспортного и сетевого протокола TCP/IP. Уровни его стека (физический, канальный, сетевой, транспортный, прикладной). Распределение протоколов по ним. Скорость загрузки Web-страницы, факторы, влияющие на нее и возможности ее ускорения.
контрольная работа [15,9 K], добавлен 06.06.2011Аппаратные и программные средства для разработки веб-сайта. Ознакомление с характеристиками мобильных устройств фирмы Nexus. Установка логотипа сайта. Создание главной страницы. Активация слайдера и панели виджетов. Конфигурирование настроек слайдера.
дипломная работа [11,2 M], добавлен 10.10.2016Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа [86,7 K], добавлен 25.03.2013
