Exemplu Raport PDF

Министерство Образования, Культуры и
Исследований Технический Университет Молдовы

Департамент Программной Инженерии и
Автоматики
ОТЧЕТ
Лабораторная работа №1
По предмету: Tehnologii WEB
Тема: Создание веб-страницы с помощью HTML, CSS и Bootstrap
Подготовила:
Проверила :
Кишинев 2018г.
Цель работы:
Изучение основ HTML, CSS и Bootstrap.
Задания к лабораторной работе:
Имплементировать полученные знания в создании веб-страницы
Краткая теория:
HTML (от англ. Hyper Text Markup Language —
«язык гипертекстовой разметки») — стандартизированный язык
разметки документов во Всемирной паутине. Большинство веб-страниц содержат
описаниеразметкинаязыкеHTML (или XHTML). ЯзыкHTML
интерпретируется браузерами; полученный в результате интерпретации
форматированный текст отображается на экране монитора компьютера или

мобильного устройства.
CSS (/siːɛsɛs/ англ. Cascading
Style Sheets — каскадные
таблицы
стилей) — формальный язык описания внешнего вида документа, написанного с
использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего
вида веб-страниц, написанных с помощью языков разметки HTML
Способы подключения CSS к документу
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах
стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей
могут располагаться как в самом веб-документе, внешний вид которого они
описывают, так и в отдельных файлах, имеющих формат CSS. (По сути, формат CSS
— это обычный текстовый файл. В файле .css не содержится ничего, кроме
перечня правил CSS и комментариев к ним.) То есть, эти таблицы стилей могут
быть подключены, внедрены в описываемый ими веб-документ четырьмя
различными способами:
когда таблица стилей находится в отдельном файле, она может быть

подключена к веб-документу посредством тега <link> , располагающегося в
этом документе между тегами <head> и </head> . (Тег <link> будет иметь
атрибут href, имеющий значением адрес этой таблицы стилей). Все правила
этой таблицы действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" href="style.css">
</head>
<body>
.....
</body>
</html>
• когда таблица стилей находится в отдельном файле, она может быть

подключена к веб-документу посредством директивы @import,
располагающейся в этом документе между тегами <style></style> (которые, в
свою очередь, располагаются в этом документе между тегами <head></head> )
сразу после тега <style> , которая также указывает (в своих скобках, после
слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют
на протяжении всего документа;
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>
• когда таблица стилей описана в самом документе, она может располагаться в

нём между тегами <style> и </style> (которые, в свою очередь, располагаются в
этом документе между тегами <head> и </head>). Все правила этой таблицы
действуют на протяжении всего документа;
<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>
• когда таблица стилей описана в самом документе, она может располагаться в
нём в теле какого-то отдельного тега (посредством его атрибута style) этого
документа. Все правила этой таблицы действуют только на содержимое этого
тега.
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
</p>
</body>
</html>
В первых двух случаях говорят, что к документу применены внешние таблицы

стилей, а во вторых двух случаях — внутренние таблицы стилей.
Bootstrap (фреймворк) (также известен как Twitter Bootstrap) —

свободный набор инструментов для создания сайтов и веб-приложений. Включает
в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок,
меток, блоков навигации и прочих компонентов веб-интерфейса, включая
JavaScript-расширения.
Bootstrap использует современные наработки в области CSS и HTML,
поэтому необходимо быть внимательным при поддержке старых браузеров
Выполнение задания:
Был сделан адаптивный сайт, поэтому и на телефонах и планшетах он будет

отлично работать
Основные, используемые мною, теги:
Div (англ. division — раздел) — блочный тег в языке разметки html.

Позволяет выделить в структуре документа несколько разделов рисунок 1
Рисунок 1 – Пример работы тега <div>

• Тег <span> предназначен для определения строчных элементов документа.
В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью
тега <span> можно выделить часть информации внутри других тегов и
установить для нее свой стиль рисунок 2.
Рисунок 2- Пример использования тега <span>
• Тег <form> устанавливает форму на веб-странице. Форма предназначена

для обмена данными между пользователем и сервером рисунок 3
Рисунок 3- Пример использования тега <form>
• Тег <input> является одним из разносторонних элементов формы и позволяет

создавать разные элементы интерфейса и обеспечить взаимодействие с
пользователем. Главным образом <input> предназначен для создания текстовых
полей, различных кнопок, переключателей и флажков рисунок 4.
Рисунок 4 – Пример использования тега <input>
• Тег <nav> задает навигацию по сайту. Если на странице несколько блоков

ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо
использовать несколько тегов <nav> в документе рисунок 5
Рисунок 5 – Пример работы тега <nav>
• Тег <button> создает на веб-странице кнопки и по своему действию

напоминает результат, получаемый с помощью тега <input> рисунок 2
Рисунок 2 – Пример работы тега <button>
• Тег <a> является одним из важных элементов HTML и предназначен для

создания ссылок. В зависимости от присутствия атрибутов name или href тег
<a> устанавливает ссылку или якорь.
• HTML предлагает шесть заголовков разного уровня, которые показывают
относительную важность секции, расположенной после заголовка. Так, тег
<h1> представляет собой наиболее важный заголовок первого уровня, а тег
<h6> служит для обозначения заголовка шестого уровня и является наименее
значительным.
• Тег <ul> устанавливает маркированный список. Каждый элемент списка
должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей,
то элементы <li> наследуют эти свойства.
• Тег <img> предназначен для отображения на веб-странице изображений в
графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся
через атрибут src.
• HTML тег link определяет связь между текущим документом и внешним
ресурсом, чаще всего он используется для подключения внешних таблиц
стилей.
• Тег <p> является блочным элементом, всегда начинается с новой строки,
абзацы текста идущие друг за другом разделяются между собой отбивкой.
Результат:
Вывод:
В данной лабораторной работе, мы изучили основы работы html,css. Так же
я использовала bootstrap для адаптивности сайта и облегчения верстки. В
завершении работы мы получили готовы сайт.
Список используемой литературы:
1. HTML, CSS [Электронный ресурс] - htmlbook.ru/html

2. Bootstrap (фреймворк) — Википедия [Электронный ресурс] - ru.wikipedia.org
Листинг программы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type='text/javascript' src="js/jquery-
1.11.1.min.js"></script> 
<link href="css/style.css" rel='stylesheet' type='text/css' />


<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Gretong Responsive web template, Bootstrap Web Templates, Flat Web
Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"
/> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet'
type='text/css'> <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900' rel='stylesheet'
type='text/css'> 
<link href="css/megamenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/megamenu.js"></script>
<script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
<script src="js/menu_jquery.js"></script>
<script src="js/simpleCart.min.js"> </script>
<style>
body {
background-image: url(background_solid_bright_44011_2560x1600.jpg); /*Путь к фоновому изображению */
background-repeat: no-repeat;
background-attachment: fixed;
/* background-color: #ff9999; Цвет фона */
}
</style>
</head>
<body>
<div class="header_bg">
<div class="container">
<div class="header">
<div class="head-t">
<div class="logo" >
<a href="index.html" style="color: #eab1e1"> <img src="images\logo0.jpg" alt=""></a>
</div>

<div class="header_right">
<div class="rgt-bottom">
<div class="log">
<div class="login" >
<div id="loginContainer"><a href="#" id="loginButton" style="color:
#eab1e1"><span>Войти</span></a>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email">
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password"
id="password">
</fieldset>
<input type="submit" id="login" value="Sign in">
<label for="checkbox"><input type="checkbox"
id="checkbox"> <i>Remember me</i></label>
</fieldset>
<span><a href="#">Forgot your password?</a></span>
</form>
</div>
</div>
</div>
</div>
<div class="reg">
<a href="register.html" style="color: #eab1e1" >Регистрация</a>
</div>
<div class="cart box_1">
<a href="checkout.html">
<h3 style="color: #eab1e1"> <span class="simpleCart_total">$0.00</span>
(<span id="simpleCart_quantity" class="simpleCart_quantity">0</span> объектов)<img
src="images/bag.png" alt=""></h3>
</a>

<div class="clearfix"> </div>
</div>

</div>
<div class="search">
<form>
<input type="text" value="" placeholder="search...">
</form>
</div>
</div>
</div>
<nav class="navbar navbar-inverse">

<div class="container-fluid">
<div class="navbar-header">

<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Навигация</span>
<span class="icon-bar"> </span>
</button>
</div>
<div class="navbar-collapse collapse">

<ul class="nav navbar-nav " >
<li class="active"><a href="#" style="color: #eab1e1">Главная
страница</a></li> <li class="dropdown dropdown-inverse">
<a href="#" class="dropdown-tpggle" data-toggle="dropdown" style="color: #eab1e1"> Категории
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" style="color:
#d04bbd">Букеты</a></li> <li class="divider"></li>
<li><a href="#" style="color: #d04bbd">Подарочные
коробочки</a></li> <li class="divider"></li>
<li><a href="#" style="color: #d04bbd">Букеты для

невест</a></li> <li class="divider"></li>
<li><a href="#" style="color: #d04bbd">Оригинальные

букеты</a></li> <li class="divider"></li>
</ul>
</li>
<li><a href="#" style="color: #eab1e1">Доставка и оплата</a></li>
<li><a href="#" style="color: #eab1e1">Отзывы</a></li>
<li><a href="#" style="color: #eab1e1">Обратная связь
</a></li> </ul>
</div>
</div>
</nav>
<div class="arriv">
<div class="arriv-top">
<h1 style="color:#eab1e1; text-align: center"> Один прекрасный букет вместо тысячи
слов <p></p>
</h1>
<div class="col-md-6 arriv-left">
<img src="images\359.970_cached600x500.jpg" class="img-responsive"
alt=""> <div class="arriv-info">
<h3>НОВИНКИ</h3>
<p></p>
<div class="crt-btn">
<a href="details.html">SHOP NOW</a>
</div>
</div>
</div>
<div class="col-md-6 arriv-right">
<img src="images\Frut-12.jpg" class="img-responsive" alt="">
<div class="arriv-info">
<h3>ОРИГИНАЛЬНЫЕ</h3>
<p></p>
</div>
</div>
</div>
</div>
<div class="arriv-las">
<div class="col-md-6 arriv-left">
<img src="images\rose-korsina-8.jpg" class="img-responsive" alt="">
<div class="arriv-info2">
<a href="details.html"><h3>___ Голландские розы<i
class="ars"></i></h3></a>
</div>
</div>
<div class="col-md-6 arriv-right">
<img src="images\pionovidnye-rozy-red-piano-v-korobke-baby-foto-1.jpg" class="img-
responsive" alt="">
<div class="arriv-info3">
<h3>ЦВЕТЫ В ИЗЯЩНОЙ КРОБОЧКЕ</h3>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="foot">
<div class="col-md-6 s-c">
<li>
<div class="fooll">
<h5 style="color: #eab1e1">follow us on</h5>
</div>
</li>
<li>
<div class="social-ic">
<ul>
<li><a href="#"><i class="facebok"> </i></a></li>
<li><a href="#"><i class="twiter"> </i></a></li>
<li><a href="#"><i class="goog"> </i></a></li>
<li><a href="#"><i class="be"> </i></a></li>
<div class="clearfix"></div>
</ul>
</div>
</li>
</div>
</div>
<div class="footer">
<div class="col-md-3 cust" >
<h4 style="color: #eab1e1" >ПОДДЕРЖКА КЛИЕНТОВ</h4>
<li><a href="#" style="color: #eab1e1">Help Center</a></li>
<li><a href="#" style="color: #eab1e1">FAQ</a></li>
<li><a href="buy.html" style="color: #eab1e1">Как купить?</a></li>
<li><a href="#" style="color: #eab1e1">Доставка</a></li>
</div>
<div class="col-md-5 our-st">
<div class="our-left">
<h4 style="color: #eab1e1">КАК СВЯЗАТЬСЯ С НАМИ</h4>
</div>

<li style="color: #eab1e1"><i class="add" > </i>мун. Кишинев ул. А. Руссо 18/1 кв.
120</li>
<li style="color: #eab1e1"><i class="phone" > </i>022-34-73-25</li>
<li><a href="mailto:cerneiiriska@gmail.com" style="color: #eab1e1"><i
class="mail"> </i>cerneiiriska@gmail.com </a></li>
</div>
<p style="color: #eab1e1">© 2018 FLOWER_BUTIQUE by Cernei Irina TI-164 </p>
</div>
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>

Exemplu Raport PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Exemplu Raport PDF

Загружено:

Авторское право:

Доступные форматы

Министерство Образования, Культуры и

Исследований Технический Университет Молдовы

форматированный текст отображается на экране монитора компьютера или

когда таблица стилей находится в отдельном файле, она может быть

• когда таблица стилей находится в отдельном файле, она может быть

• когда таблица стилей описана в самом документе, она может располагаться в

В первых двух случаях говорят, что к документу применены внешние таблицы

Bootstrap (фреймворк) (также известен как Twitter Bootstrap) —

Был сделан адаптивный сайт, поэтому и на телефонах и планшетах он будет

Div (англ. division — раздел) — блочный тег в языке разметки html.

Рисунок 1 – Пример работы тега <div>

Рисунок 2- Пример использования тега <span>

• Тег <form> устанавливает форму на веб-странице. Форма предназначена

Рисунок 3- Пример использования тега <form>

• Тег <input> является одним из разносторонних элементов формы и позволяет

Рисунок 4 – Пример использования тега <input>

• Тег <nav> задает навигацию по сайту. Если на странице несколько блоков

Рисунок 5 – Пример работы тега <nav>

• Тег <button> создает на веб-странице кнопки и по своему действию

• Тег <a> является одним из важных элементов HTML и предназначен для

1. HTML, CSS [Электронный ресурс] - htmlbook.ru/html

<nav class="navbar navbar-inverse">

<li><a href="#" style="color: #d04bbd">Букеты для

<li><a href="#" style="color: #d04bbd">Оригинальные

<div class="clearfix"> </div>

<div class="clearfix"> </div>

Вам также может понравиться