A presentation about HTML5 and CSS3. It presents the main features of the two essential programming languages for the web. There are animation and sound in it.
2. Какво ще разгледаме в презентацията?
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
3. Какво представлява HTML страницата?
комбинация от цветове
текст и картинки;
HTML, CSS и Javascript.
7. Какво е HTML?
HTML е език за описване на
съдържанието на уеб страницата;
HTML е markup език т.е. комбинация
от маркиращи тагове;
таговете са ключови думи определят
съдържанието в HTML страницата.
<body></body>
<img></img>
8. Малко история…
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.
9. Как можем да създадем HTML страница?
Текстови редактори:
• NotePad;
• NotePad ++;
• Editpad.
HTML редактори (WYSIWYG):
• Microsoft Expression Web;
• Microsoft FrontPage;
• Adobe Dreamweaver;
• Netscape Composer.
10. Основна структура на HTML страницата
<!DOCTYPE html>
<html>
<head>
<title>Нашата първа HTML страница</title>
<meta charset="windows-1251">
</head>
<body>
<p>Това е параграф с текст, който ще се
покаже на нашата първа страница.</p>
</body>
</html>
11. Елементи и атрибути
елементите винаги започват с отварящ таг и завършват със затварящ таг;
елемент е всичко между отварящия и затварящия таг;
някои елементи имат празно съдържание;
елементите с празно съдържание имат 1 таг;
елементите обикновено имат атрибути;
<!DOCTYPE html>
<html>
<head>
<title>Нашата първа HTML страница</title>
<meta charset="windows-1251">
</head>
<body>
<p>Това е параграф с текст, който ще се покаже на нашата първа страница.</p>
<br/>
<p>Втори параграф</p>
</body>
</html>
отварящ таг
затварящ таг
12. Елементи и атрибути
елементите обикновено имат атрибути;
атрибутите съдържат допълнителна информация за елемента;
атрибутите винаги се задават в отварящия таг;
атрибутите имат име и стойност;
всички елементи могат да имат атрибути class, id, style, title.
<!DOCTYPE html>
<html>
<head>
<title>Нашата първа HTML страница</title>
<meta charset="windows-1251">
</head>
<body>
<p>Това е параграф с текст, който ще се покаже на нашата първа страница.</p>
<br/>
<a href="http://www.youtube.com/">YouTube</a>
</body>
</html>
13. 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="html.png" alt=""/>
</div>
<br/>
<a href="http://www.youtube.com/" style="background:#0170BA">YouTube</a>
</body>
15. Хиперлинкове
Линк към документ 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="apply-now-button.jpg" /></a>
16. Картинки
Синтаксис за дефиниране на картинка:
<img src="html.png" alt="HTML 5"/>
src атрибут – задава мястота където се намира картинката;
аlt атрибут – задава текст, който се озписва в случай че картинката
на може да бъде показана
<img> тага има атрибути за задаване размерите на картинката.
<img src="html.png" alt="HTML 5" width="304" height="228" />
17. 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
18. 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
19. Таблици
<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>
<td>Cell 3</td> <td>0283</td> <td>0283</td>
</tr>
<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
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 атрибут – слива
клетки по колони.
28. Синтаксис на правилата
h1 {
color: orange;
text-align: center;
}
Selector
Property Value
Declaration = Property + Value
29. Селектори
.header a { color: green }
#menu>li { padding-top: 8px }
Селекторите определят към кой
елемент се отнася даденото
правило:
Всички елементи от
определен тип (tag);
Само тези, на които отговаря
определен атрибут;
В зависимост от положението
им в йерархичното дърво.
Селектор
Декларация
30. Йерархично дърво в HTML документа
Element Parent Ancestor
Descendent Child Element
UL
DIV
class=“lister”
LI LI LI
DIV
id=“container”
H2
H1 P P
EM
Sibling
/ OR /
31. Типове селектори: основни
Селекторите са 3 основни типа:
По таг (типови селектори):
h1 {font-family: verdana,sans-serif;}
По ‘ID’ на елемента:
#element_id {color: #ff0000;}
По клас на елемента:
.myClass {border: 1px solid red;}
Селекторите могат да се комбинират , чрез запетаи:
h1, .link, #top-link {font-weight: bold}
32. Типове селектори: вложени
Последователно според йерархичното дърво:
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;}
34. Стойности за големина
Когато се задава големина (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;}
35. Стойности за цвят
Цветове в 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);
36. Дължина и широчина (Width & Height)
width – задава дължината на даден елемент чрез числена стойност;
width се задава само на block елементи;
Inline елементите имат дължина равна на дължината на съдържанието на
елемента;
min-width – задава минимална дължина на елемента;
max-width – задава максимална дължина на елемента;
height – всички правила за width важат и за height.
37. Фон (Background)
background – задава фон на страницата;
background-color – фона на страницата е един цвят;
background-color: #000;
background-image – фона на страницата е картинка;
background-image:url("back.gif");
Правило за комбинация:
background: #FFF0C0 url("back.gif") no-repeat fixed top;
е все едно:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
38. Шрифт (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.
39. 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;
40. 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-а.
42. Позициониране (Position)
position:static; – основното позициониране, зададено по
подразбиране;
position:fixed; – заемащо определен участък от наличния
прозорец на браузъра;
position:relative; – позициониране, спрямо нормалното
положение на даден обект;
position:absolute; – при абсолютно позициониране, елемента се
отхвърля от нормалния поток на документа.
43. Float & Display
Display:
display:inline; – без
прекъсване преди или след
елемента;
display:block; – прекъсване
преди И след елемента;
display:inline-block; – без
прекъсване, но може да се
третира като блоков
елемент;
display:none; – елементът не
се показва *различно от
“visibility: hidden” *
Float:
float:left; – поставя елемента от ляво,
всичко останало – вдясно, спрямо него;
float:right; – поставя елемента вдясно,
всичко останало – от ляво, спрямо него;
*може а се прилага височина на флоутнати
inline елементи!
*всички margin-и се запазват!
1991 - дошла идеята за HTML, започнала неговата разработка,
1993 - излиза първата версия на HTML
1993 - излиза HTML 2 draft, т.е. не го това версия на HTML 2, а нещо което загатва какво ще има в следващата версия на HTML
1995 - появява се W3C (организация, която установява международни стандарти)
1995 - нови идеи за HTML 3
1997 - следваща версия (без осбено значение)
1997 - появява се HTML 4 и идеята за CSS
1999 - HTML 4.01 - финална версия на HTML 4
2000 - появява се идеята за XHTML (по-гъвкав от стандартния HTML)
2001 - завършен е XHTML
2008 - появява се идеята за HTML 5 и XHTML 5
wse o]e e nezawyr[en
2022 - очаква се завършване на HTML5
Syntax for defining an image:
<img src="url" alt="some_text">
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML Images - The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat">
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).