�ݺ�ߣ

&
Изготвили:
Владимир Вълков
Иванин Иванов
БУРГАС
2013

Какво ще разгледаме в презентацията?
I. Въведение
 Какво е уеб страница?
 Какво е HTML?
 Малко история…
 Създаване на уеб
страница
II. HTML 5
 Структура
 Елементи и атрибути
 Block и Inline елементи
 Заглавия и параграфи
 Хиперлинкове
 Картинки
 Ordered листове
 Unordered листове
 Таблици
III. CSS 3
 Какво е CSS?
 Видове CSS
 CSS файл
 Синтаксис на правилата
 Селектори
 Йерархично дърво в HTML
документа
 Стойности (Values)
 Дължина и широчина
 Фон (Background)
 Шрифт (Font)
 CSS Box Model
 Позициониране (Position)
 Float & Display

Какво представлява HTML страницата?
 комбинация от цветове
текст и картинки;
 HTML, CSS и Javascript.

Какво е HTML?
 HTML е език за описване на
съдържанието на уеб страницата;
 HTML е markup език т.е. комбинация
от маркиращи тагове;
 таговете са ключови думи определят
съдържанието в HTML страницата.
<body></body>
<img></img>

Малко история…
 1991 – HTML споменат за първи път от Тим Бърнърс-Лий – HTML tags;
 1993 – HTML (първа публична версия публикувана в IETF);
 1993 – HTML 2 draft;
 1995 – HTML 2 – W3C;
 1995 – HTML 3 draft ;
 1997 – HTML 3.2 – “Wilbur”;
 1997 – HTML 4 – ”Cougar” – CSS;
 1999 – HTML 4.01 (final);
 2000 – XHTML draft ;
 2001 – XHTML (final);
 2008 – HTML5 / XHTML5 draft;
 2011 – feature complete HTML5;
 2022 – HTML5 – final specification.

Как можем да създадем HTML страница?
 Текстови редактори:
• NotePad;
• NotePad ++;
• Editpad.
 HTML редактори (WYSIWYG):
• Microsoft Expression Web;
• Microsoft FrontPage;
• Adobe Dreamweaver;
• Netscape Composer.

Основна структура на HTML страницата
<!DOCTYPE html>
<html>
<head>
<title>Нашата първа HTML страница</title>
<meta charset="windows-1251">
</head>
<body>
<p>Това е параграф с текст, който ще се
покаже на нашата първа страница.</p>
</body>
</html>

Елементи и атрибути
 елементите винаги започват с отварящ таг и завършват със затварящ таг;
 елемент е всичко между отварящия и затварящия таг;
 някои елементи имат празно съдържание;
 елементите с празно съдържание имат 1 таг;
 елементите обикновено имат атрибути;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Това е параграф с текст, който ще се покаже на нашата първа страница.</p>
<br/>
<p>Втори параграф</p>
</body>
</html>
отварящ таг
затварящ таг

Елементи и атрибути
 елементите обикновено имат атрибути;
 атрибутите съдържат допълнителна информация за елемента;
 атрибутите винаги се задават в отварящия таг;
 атрибутите имат име и стойност;
 всички елементи могат да имат атрибути class, id, style, title.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Това е параграф с текст, който ще се покаже на нашата първа страница.</p>
<br/>
<a href="http://www.youtube.com/">YouTube</a>
</body>
</html>

Block и Inline елементи
 Block елементите завършват винаги на нов ред, докато при Inline елементите това не е
задължително;
 Block елементи са <h1>, <p>, <ul>, <table>, <div>;
 Inline елементи са <b>, <td>, <a>, <img>, <span>;
 <div> елемента е Block елемент и се използва за структуриране на html страницата
 <span> елемента задава определени свойства на определена част от текста в параграфа.
<body>
<div style="background:#0170BA;">
<h1>KEEP CALM AND LEARN <span style="color:#fff;">HTML</span>!</h1>
</div>
<div style="background:#29A9DF;">
<p>Това е параграф с текст, който ще се покаже на <b>нашата първа
страница</b>.</p>
<img src=/slideshow/html-css-improved/40747317/"html.png" alt=""/>
</div>
<br/>
<a href="http://www.youtube.com/" style="background:#0170BA">YouTube</a>
</body>

Заглавия и параграфи
 Заглавия (Headings):
<h1>Първо заглавие</h1>
<h2>Второстепенно заглавие</h2>
<h3>Трето заглавие</h3>
 Параграфи (Paragraphs):
<p>Първи параграф.</p>
<p>Втори параграф.</P>
<p>Трети параграф.</p>

Хиперлинкове
 Линк към документ form.html на един и същи сървър и в една
директория:
<a href="form.html">Fill Our Form</a>
 Линк към външен уеб сайт:
<a href="http://www.youtube.com">YouTube</a>
 Линк към документ apply-now.html на един и същи сървър и в една
директория, използвайки картинка:
<a href="apply-now.html"><img src=/slideshow/html-css-improved/40747317/"apply-now-button.jpg" /></a>

Картинки
 Синтаксис за дефиниране на картинка:
<img src=/slideshow/html-css-improved/40747317/"html.png" alt="HTML 5"/>
 src атрибут – задава мястота където се намира картинката;
 аlt атрибут – задава текст, който се озписва в случай че картинката
на може да бъде показана
 <img> тага има атрибути за задаване размерите на картинката.
<img src=/slideshow/html-css-improved/40747317/"html.png" alt="HTML 5" width="304" height="228" />

Ordered листове
 Създаване на Ordered List - тага <ol></ol>:
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
 Атрибутни стойности за тип са 1, A, a, I, или i:
a. HTML
b. CSS
c. JavaScript
1. HTML
2. CSS
3. JavaScript
A. HTML
B. CSS
C. JavaScript
i. HTML
ii. CSS
iii. JavaScript
I. HTML
II. CSS
III. JavaScript

Unordered листове
 Създаване на Unordered List - тага <ul></ul>:
<ul type="disk">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
 Атрибутни стойности за тип са disk, circle или square:
 HTML
 CSS
 JavaScript
• HTML
• CSS
• JavaScript
o HTML
o CSS
o JavaScript

Таблици
<table border=2 cellpadding=4 cellspacing=4>
<tr>
<th rowspan=3 style="background:#99ccff;">rowspan=3</th>
<td>Cell 1</td> <td>1493</td> <td>0283</td>
</tr>
<tr>
<td>Cell 2</td> <td colspan=2>colspan=2</td>
</tr>
<tr>
</tr>
<tr>
<th rowspan=3 style="background:#99ccff;">rowspan=3</th>
</tr>
<tr>
<td>Cell 2</td> <td colspan=2
rowspan=2>colspan=2</br>rowspan=2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
</table>
 <tr> таг – ред в таблицата;
 <td> таг – клетка в таблицата;
 <th> таг – header клетка
 border атрибут – задава
рамка на таблицата;
 cellpadding атрибут –
разстояние между
съдържанието в клетката и
рамката на клетката;
 cellspacing атрибут -
растояние между клетките в
таблицата;
 rowspan атрибут – слива
клетки по редове;
 colspan атрибут – слива
клетки по колони.

Упражнения
 Създайте HTML максимално близка до тази от картинката:
Всичко необходимо се намира в:
(директория)
Приятна работа!

Какво е CSS ?
HTML
BODY
H1 P P
color: red

Има 3 вида CSS:
 Inline CSS:
Видове CSS
<p style=“color:#fff; font-weight:bold; font-size:30px”;
font-family:Arial>Това е стилизиран параграф.</p>
 Embedded CSS:
<head>
<style type="text/css">
ul {list-style-type: none;}
p, h1 {margin:0;}
ul {margin:0; padding:0}
img{width:250px; height:100%}
</style>
</head>
 Външен CSS:
<link rel="stylesheet" type="text/css" href="style.css">

Как изглежда един CSS файл ?
Правила
(Rules)

Синтаксис на правилата
h1 {
color: orange;
text-align: center;
}
Selector
Property Value
Declaration = Property + Value

Селектори
.header a { color: green }
#menu>li { padding-top: 8px }
 Селекторите определят към кой
елемент се отнася даденото
правило:
 Всички елементи от
определен тип (tag);
 Само тези, на които отговаря
определен атрибут;
 В зависимост от положението
им в йерархичното дърво.
Селектор
Декларация

Йерархично дърво в HTML документа
Element Parent Ancestor
Descendent Child Element
UL
DIV
class=“lister”
LI LI LI
DIV
id=“container”
H2
H1 P P
EM
Sibling
/ OR /

Типове селектори: основни
Селекторите са 3 основни типа:
 По таг (типови селектори):
h1 {font-family: verdana,sans-serif;}
 По ‘ID’ на елемента:
#element_id {color: #ff0000;}
 По клас на елемента:
.myClass {border: 1px solid red;}
Селекторите могат да се комбинират , чрез запетаи:
h1, .link, #top-link {font-weight: bold}

Типове селектори: вложени
 Последователно според йерархичното дърво:
p a {text-decoration: underline;}
 Селектор „>“ – директен child:
p > .error {font-size: 8px;}
 .class.class2 – елементи, притежаващи и двата класа:
p.post-text.special {font-weight: bold;}
 Селектор „+“ - следващ sibling:
img + .link {float:right;}

Типове селектори: атрибутни и псевдо селектори
Атрибутни селектори:
a[title] {color:black;}
input[type=text] {font-family:Consolas;}
a[title*=logo] {border:none;}
Псевдо селектори:
a:hover {color:red;}
p:first-line {text-transform: uppercase;}
.title:before {content: "»";}
.title:after {content: "«";}

Стойности за големина
Когато се задава големина (width, height, font-size…) стойностите се записват с
числа:
 Различни формати / единици могат да бъдат използвани;
 Pixels, ems, - 12px , 1.4em:
h1 {font-size:20px;}
h2 {font-size:1em;}
 Points, inches, centimeters, millimeters - 10pt , 1in, 1cm, 1mm:
img {
height:200pt; width:100pt
}
 Percentages - 50%:
div.box {width:50%;}
 Нула се използва за означаване липса на дадено property: border: 0:
div.box {margin:0;}

Стойности за цвят
Цветове в CSS се задават по няколко начина:
 Използвайки red-green-blue (RGB):
color: #f1a2ff
color: rgb(241, 162, 255)
color: rgba(241, 162, 255, 0.1)
 Използвайки hue-saturation-light (HSL):
color: hsl(291, 85%, 89%);
color: hsl(291, 85%, 89%, 0.1);

Дължина и широчина (Width & Height)
 width – задава дължината на даден елемент чрез числена стойност;
 width се задава само на block елементи;
 Inline елементите имат дължина равна на дължината на съдържанието на
елемента;
 min-width – задава минимална дължина на елемента;
 max-width – задава максимална дължина на елемента;
 height – всички правила за width важат и за height.

Фон (Background)
 background – задава фон на страницата;
 background-color – фона на страницата е един цвят;
background-color: #000;
 background-image – фона на страницата е картинка;
background-image:url(/slideshow/html-css-improved/40747317/"back.gif");
 Правило за комбинация:
background: #FFF0C0 url(/slideshow/html-css-improved/40747317/"back.gif") no-repeat fixed top;
е все едно:
background-color: #FFF0C0;
background-image: url(/slideshow/html-css-improved/40747317/"back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;

Шрифт (Font)
 color – цвят на текста;
 font-size – големина на текста с помощта на цифри;
 font-family – шрифта на страницата ;
Пример: verdana, sans-serif, и т.н.;
 font-weight – normal, bold, bolder, lighter или стойност [100 … 900];
 font-style – normal, italic, oblique;
 text-decoration – none, underline, line-trough, overline, blink;
 text-align – left, right, center, justify.

CSS Box Model
Border
 border – задава рамка на елемента;
 border-width: thin, medium, thick or numerical value (примерно 10px);
 border-color: color alias or RGB value;
 border-style: none, hidden, dotted, dashed, solid, doubleи др
 всяко property може да бъде зададено по отделно;
 border-top-style, border-left-color и т.н.
Правило за съкръщаване:
border:1px red solid;
е все едно:
border-width:1px;
border-color:red;
border-style:solid;

CSS Box Model
Margin & Padding
 margin и padding – задават разстоянието около елемента;
 Може да се зададе за всяка страна на елемента по отделно;
 margin: 5px:
 Четирите страни имат margin - 5 px;
 margin: 10px 20px:
 горе и долу - 10px, ляво и дясно - 20px;
 margin: 5px 3px 8px:
 горе 5px, ляво/дясно 3px, долу 8px;
 margin: 1px 3px 5px 7px:
 горе, дясно, долу, ляво;
 Същото се отнася и за padding-а.

CSS Box Model
margin-top
border-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
Content
border-top
border-left
border-right
width
height
background-color

Позициониране (Position)
 position:static; – основното позициониране, зададено по
подразбиране;
 position:fixed; – заемащо определен участък от наличния
прозорец на браузъра;
 position:relative; – позициониране, спрямо нормалното
положение на даден обект;
 position:absolute; – при абсолютно позициониране, елемента се
отхвърля от нормалния поток на документа.

Float & Display
Display:
 display:inline; – без
прекъсване преди или след
елемента;
 display:block; – прекъсване
преди И след елемента;
 display:inline-block; – без
прекъсване, но може да се
третира като блоков
елемент;
 display:none; – елементът не
се показва *различно от
“visibility: hidden” *
Float:
 float:left; – поставя елемента от ляво,
всичко останало – вдясно, спрямо него;
 float:right; – поставя елемента вдясно,
всичко останало – от ляво, спрямо него;
*може а се прилага височина на флоутнати
inline елементи!
*всички margin-и се запазват!

БЛАГОДАРИМ
ЗА
ВНИМАНИЕТО!

�ݺ�ߣ

Html & css improved

More Related Content

Html & css improved

Editor's Notes