Задача 16. Створити веб сторінку застосовуючи групування всі заголовки мають шрифт Times New Roman , абзац - Arial. При цьому кожен заголовок свого розміру та кольору

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="16.css"> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <h2>Donec a diam lectus.</h2><h3> Sed sit amet ipsum mauris.</h3><h4>Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</h4> <h5>Donec et mollis dolor.</h5> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><p>Donec a diam lectus. </p><p>Sed sit amet ipsum mauris. </p> </body> </html>

h1, h2, h3, h4, h5{ font-family:Times New Roman; } p {font-family:arial} h1 {color: black} h2 {color: green} h3 {color: red} h4 {color: blue} h5 {color: yellow}

HTML

<html>

<head>

</head>

<body>

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <h2>Donec a diam lectus.</h2><h3> Sed sit amet ipsum mauris.</h3><h4>Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</h4> <h5>Donec et mollis dolor.</h5>

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p><p>Donec a diam lectus. </p><p>Sed sit amet ipsum mauris. </p>

</body>

</html>

CSS

h1, h2, h3, h4, h5{

font-family:Times New Roman;

}

p {font-family:arial}

h1 {color: black}

h2 {color: green}

h3 {color: red}

h4 {color: blue}

h5 {color: yellow}

Задача 17. Поясніть як будо відтворено нданий документ в браузері та поясніть чому?

Ідентифікатор має віщий приорітет ніж клас, тому у першому рядку немає рамки, а колір тексту зелений.

Клас b має вищий приорітет ніж клас a, тому що він знаходиться нижче у стилі, тому у другому рядку текст червоний і є рамка.

Задача 18. Від коректуйте вебсторінку, що було розроблено в 1-ій ЛБ (Задача 3) з застосуванням стилів, псевдо класів, псевдо елементів, ідентифікаторів.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Lt;title>Идентификаторы</title

<style type="text/css">

#A, .a {

border: none;

background: #808080;

color: green;

padding: 15px; }

.b {

border: 10px solid red;

color: red;

padding: 0; }

</style>

</head>

<body>

<p id="A" class="b">Первая строка</p>

<p class="a b">Вторая строка</p>

<p class="b">Третья строка </p>

</body>

</html>

HTML

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="includes/base.css">

<link rel="stylesheet" href="includes/amazium.css">

<link rel="stylesheet" href="includes/layout.css">

<script src="includes/smoothscroll.js"type="text/javascript" ></script>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>

<script src="includes/jquery.easing.1.3.js" type="text/javascript"></script>

<script src="includes/jquery.ui.totop.js" type="text/javascript"></script>

<title>Adidas</title>

</head>

<body>

<div class="row">

<div class="grid_4 offset_4">

<img src="logo.jpg" class="max-img">

</div>

<div class="navigation">

<div class="row">

<div class="grid_8 offset_2">

<ul class="nav">

<li><a href="index.html">Главная</a></li>

<li><a href="catalog.html" class="current">Каталог</a></li>

<li><a href="order.html">Заказать</a></li>

</ul>

</div>

<div class="row">

<div class="grid_2 offset_2">

<h3>Черные кроссовки</h3>

<hr>

<img src="black.jpg" class="max-img">

</div>

<div class="grid_2">

<h3>Розовые кроссовки</h3>

<hr>

<img src="pink.jpg" class="max-img">

</div>

<div class="grid_2">

<h3>Женская футболка</h3>

<hr>

<img src="women.jpg" class="max-img">

</div>

<div class="grid_2">

<h3>Мужская футболка</h3>

<hr>

<img src="man.jpg" class="max-img">

</div>

<div class="row">

<div class="grid_8 offset_2"><hr></div>

</div>

<div class="row">

<div class="grid_2 offset_2">

<h3>Шапка оранжевая</h3>

<hr>

<img src="hat1.jpg" class="max-img">

</div>

<div class="grid_2">

<h3>Спортивный костюм</h3>

<hr>

<img src="coat1.jpg" class="max-img">

</div>

<div class="grid_2">

<h3>Футболка желтая</h3>

<hr>

<img src="yellow.jpg" class="max-img">

</div>

<div class="grid_2">

<h3>Сумка спортивная</h3>

<hr>

<img src="bag.jpg" class="max-img">

</div>

<div class="row">

<div class="grid_8 offset_2"><hr></div>

</div>

</body>

</html>

CSS

body { line-height:1; }

ol, ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,

q:before, q:after { content:''; content:none; }

table { border-collapse:collapse; border-spacing:0; }

/***** Basic Styles *****/

html { overflow-y:scroll; overflow:-moz-scrollbars-vertical; }

body { margin:20px 0 0 0; padding:0; background-color:#fff; font:13px "Century Gothic", "Trebuchet MS", Helvetica, sans-serif; color:#333; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; }

/***** Typography *****/

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-family:"Georgia", "Times New Roman", Helvetica, Arial, sans-serif; font-weight:normal; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; }

h1 { margin:0 0 10px 0; padding:0; font-size:36px; line-height:40px; color:#333; }

h2 { margin:0 0 10px 0; padding:0; font-size:30px; line-height:34px; color:#333; }

h3 { margin:0 0 10px 0; padding:0; font-size:24px; line-height:28px; color:#333; }

h4 { margin:0 0 10px 0; padding:0; font-size:18px; line-height:22px; color:#333; }

h5 { margin:0 0 10px 0; padding:0; font-size:14px; line-height:16px; color:#333; }

h6 { margin:0 0 10px 0; padding:0; font-size:12px; line-height:16px; color:#333; }

p { margin:0; padding:0 0 10px 0; line-height:20px; }

strong { font-weight:bold; color:#333; }

em { font-style:italic; color:#666; }

small { font-size:80%; }

sup, sub { height:0; line-height:5px; vertical-align:baseline; _vertical-align:bottom; position:relative; font-size:80%; }

sup { bottom:5px; }

sub { top:5px; }

code, pre { padding:0 3px 2px; color:#333; font-size:11px; }

code { padding:0 4px 2px 4px; background-color:#000; border:1px solid #000; color:#f1f1f1; }

ul, ol { margin-bottom:20px; }

ul { list-style:none outside; }

ul li { margin:0 0 5px 0; padding:0 0 0 18px; line-height:18px; background:transparent url('../images/bullet.png') no-repeat 0 3px; }

ul ul, ul ol { margin:5px 0 5px 0; }

ol ol, ol ul { margin:5px 0 5px 20px; }

ul ul li, ul ol li, ol ol li, ol ul li { margin:0 0 6px 0; }

ul.square, ul.square ul { list-style:square outside; }

ul.circle, ul.circle ul { list-style:circle outside; }

ul.disc, ul.disc ul { list-style:disc outside; }

ul.square li,

ul.circle li,

ul.disc li { margin:0 0 5px 15px; padding:0; line-height:18px; background:none; }

ol { margin:0 0 20px 20px; list-style:decimal; }

ol li { margin:0 0 5px 0; padding:0; line-height:18px; }

blockquote, blockquote p { font-size:12px; line-height:24px; color:#777; font-style:italic; }

blockquote { margin:10px 0 15px 0; padding:0 0 0 5px; border-left:1px solid #747474; }

blockquote cite { display:block; font-size:12px; color:#555; }

blockquote cite:before { content:"\2014 \0020"; }

blockquote cite a,

blockquote cite a:visited,

blockquote cite a:visited { color:#555; }

blockquote span { width:15px; display:inline-block; }

hr { margin:20px 0 20px 0; border:0; border-top:1px solid #999; height:2px; width:100%; text-align:left; }

a:link { color:#333; text-decoration:none; outline:0; transition-property:color .1s linear 0s; -moz-transition:color .1s linear 0s; -webkit-transition:color .1s linear 0s; -o-transition:color .1s linear 0s; }

a:visited { color:#333; text-decoration:none; outline:0; }

a:active { color:#333; text-decoration:none; outline:0; }

a:hover { color:#999; text-decoration:underline; outline:0; }

a:focus { -moz-outline-style:none; }

img { border:0; -ms-interpolation-mode:bicubic; }

.max-img { width:100%; height:auto; }

.media { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:1px solid #ccc; }

.media iframe,

.media object,

.media embed { position:absolute; top:0; left:0; width:100%; height:100%; }

Висновок

Я ознайомився зі створенням Web – сторінок на основі стандарту HTML, а також з використанням фреймів (Frames).