BRIDGE PKI

Construirea, testarea si exploatarea

aplicatiilor internet
Ziua 1:
Definitii, Istorie aplicatii internet
Protocolul HTTP
Limbaje adnotare – HTML/XML/XHTML
Cascading Style Sheets
HTTP: the hypertext transfer protocol

IT concepts: protocol, the RFC process,

communication protocol layers, application layer
HTTP vs HTML

HTML: hypertext markup language

Definitions of tags that are added to Web documents to
control their appearance
HTTP: hypertext transfer protocol
The rules governing the conversation between a Web client
and a Web server

Both were invented at the same time by the same person

What is a protocol?

In diplomatic circles, a protocol is the set of rules

governing a conversation between people

We have seen that the client and server carry on a

machine-to-machine conversation

A network protocol is the set of rules governing a

conversation between a client and a server

There are many protocols, HTTP is just one

 An HTTP conversation

Client Server
I would like to open a
connection
OK

GET <file location>

Send page or error message

Display response
Close connection

OK
HTTP is the set of rules governing the format and content of the
conversation between a Web client and server
An HTTP example

The message requesting a Web page must begin with the work
“GET” and be followed by a space and the location of a file on the
server, like this:

GET /fac/lpress/shortbio.htm

The protocol spells out the exact message format, so any Web
client can retrieve pages from any Web server.
Network protocols

The details are only important to developers.

The rules are defined by the inventor of the protocol –
may be a group or a single person.
The rules must be precise and complete so
programmers can write programs that work with
other programs.
The rules are often published as an RFC along with
running client and server programs.
The HTTP protocol used for Web applications was
invented by Tim Berners Lee.

RFC = request for comments

Tim Berners-Lee

Tim Berners-Lee was knighted by Queen Elizabeth for his invention of the World
Wide Web. He is shown here, along with the first picture posted on the Web and a
screen shot from an early version of his Web browser.
 HTTP is an application layer protocol

The Web client and the Web server are application programs
Application layer programs do useful work like retrieving Web
pages, sending and receiving email or transferring files
Lower layers take care of the communication details
The client and server send messages and data without knowing
anything about the communication network
 The application layer is boss – the top
layer
Layer Function
Application Do useful work like Web browsing, email,
and file transfer

Lower layers Handle communication between the client

and server

Your boss says: Send this package to Miami -- I don't care if you use Federal
Express, UPS, or any other means. Also, let me know when it arrives or if it
cannot be delivered for some reason.

The application program says: Send this request to the server -- I don't care
how you do it or whether it goes over phone lines, radio, or anything else
about the details. Just send the message, and let me know when it arrives
or if it cannot be delivered for some reason.

There are five TCP/IP layers, the application layer and four lower layers.
Many application layer protocols are
used on the Internet, HTTP is only one

Protocol Application

HTTP: Hypertext Transfer Retrieve and view Web pages

Copy files from client to server

FTP: File Transfer
or from server to client
SMTP: Simple Mail
Send email
Transport

POP: Post Office Read email

The TCP/IP protocol layers
The application program is king – it gets work done using the lower level
layers for communication between the client and server.

Get useful work done – retrieve Web pages, copy files,

Application send and receive email, etc.

Make client-server connections and optionally control

Transport transmission speed, check for errors, etc.

Route packets between networks

Internet

Route data packets within the local area network

Data link
Specify what medium connects two nodes, how binary
Physical ones and zeros are differentiated, etc,
Introduction to XHTML and CSS
EXTENSIBLE MARKUP
LANGUAGE
Extensible Markup Language

• XML is a specification for creati n g

custom markup languages
• Subset of SGML
• XML languages: RSS, MathML, SVG,
XHTML
• W3C Recommenda) o n
XML and SGML

SGML

XML

RS XHTML SV HTML
S G
 XML Example

<?xml version=“1.0” encoding=“utf-8”?>

<books>
<book id=“A01”>
<title>Designin Web Usability</title>
<author>Jako Nielsen</author>
</book>
</books>
 XML Well Formed

• XML Declaration
• One root-‐element
­
• Every tag is opened and ended
• Att ributes inside “ ”
• Case sensitivity
 XML Example
<?xml version=“1.0” encoding=“utf-8”?>
<!DOCTYPE books SYSTEM “books.dtd”>
<books>!
<book id=“A01”>
<title>Designing Web Usability</title>
<author>Jakob Nielsen</author>
<book>
</books>
DTD Example: books.dtd

<!ELEMENT >books (book+)>

<!ELEMENT book (title, author)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ATTLIST book id ID #REQUIRED>
 XML Valid

• XML document is valid, when it follows it’s

dtd
• Valida) on can be done only, if the
xml document has dtd (or schema)
• XHTML strict 1.0 dtd:
– hS p ://www.w3.org/TR/xhtml1/DTD/xh
tml1-‐­ strict.dtd
EXTENSIBLE HYPERTEXT
MARKUP LANGUAGE
 XHTML

• XHTML is a XML based

language
• XHTML 1.0 / 1.1:
– Strict
– Transitional
– Frameset
 XHTML Example

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>XHTML 1.0 Example</title>
</head>
<body>
<p>This is a example.</p>
</body>
</html>
 General Form

• XHTML consists of
– Xml-‐declaration
­
– Document type
– XHTML ‐-document
­
• head
• body
XHTML Basic Structure

• Every element is wriS en in lower case

• If element does not contain anything, it’s empty
element:
– <br></br> <!– line break ‐-‐>-­
– <hr></hr> <!– horizontal line ‐-‐>-­
– <img src=”pic.jpg" alt=”picture"></img> <!-‐-p­icture ‐>-­
• Empty elements should be wriS en like this:
– <br/>
– <hr/>
– <img src=”pic.jpg" alt=”picture"/>
 Indenti ng

• Indentation is free in XML

• It’s easier to read the document, if you use
indentation
• One indentation: 4 spaces:

• <ul>
• <li>Carrot</li>
<li> Tomato</li>
</ul>
 Commen)ng

• It’s possible to add comments to xhtml

– documents:
• <!-‐-a­ndhere we have a list ‐>-­
 Document types

<!DOCTYPE html PUBLIC "-­‐//W3C//DTD XHTML 1.0 Strict//EN" "

hS p ://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐strict.dtd">

<!DOCTYPE html PUBLIC "-­‐//W3C//DTD XHTML 1.0

Transi) o n a l / / E N" "
hS p ://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐
transi) o n a l . d td">a

<!DOCTYPE html PUBLIC "-­‐//W3C//DTD XHTML 1.0 Frameset//EN" "

hS p ://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐frameset.dtd">
 Head

• Compulsary: ti t l e
• Meta-­‐informati on
– See:
hS p ://www.cs.tut.fi/~jkorpela/webjulk/1.6.h
tml
• Possible linking to stylesheets
 Text ‐-­elements

• p • tr td
• br • i
• blockquot • b
e • big
• pre • small
• em • sub
• strong • sup
• code
 Lists

• ul: unordered list

• ol: ordered list
• dl: definition list
• ul and ol items are marked as li
• In dl items are marked as dt and
dd
 Links

• See:
– hS p ://www.cs.tut.fi/~jkorpela/webjulk/1.5.h
tml
• Link to outside
– <a href="hS p ://www.tamk.fi">tamk</a>
• Link within page
– <a href=”dog.html">Dog</a>
 Images

• Use gif, jpeg or png

• img-‐element:
­
– <img src=”pic.jpg" alt=”alterna) ve
text"/>
• Img as link
– <a href=”dog.html"><img
src=”dog.png" alt=”dog"/></a>
Tables

Title Title Title

Cell Cell Cell
Cell Cell Cell
 Tables

<table>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</
td>
<td>cell</
td>
</tr>
</table>
 Table: Heading

<table>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill
Gates</td>
<td>555 77
854</td>
<td>555 77
855</td>
</tr>
</
table>
Combining Rows and Cols

<table>
<tr>
<td
colspan="3">Title</td>
</tr>
<tr>
<td>Title</td>
<td colspan="2">cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
CASCADING STYLE
SHEETS
 Ce este CSS?

● CSS = Cascading Style Sheets

● Stilurile - definesc modul de aparitie a
elementelor HTML
● Sunt grupate/stocate in Foi de stil
● Mai multe definitii de stil se vor
combina intr-unul singur.
● Au fost introduse odata cu HTML 4.0
 Folosirea CSS in HTML

<HTML>
<HEAD>
<TITLE>Buna dimineata A02!</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css" />
<STYLE TYPE="text/css">
@import url(sheet2.css);
BODY {background: yellow;}
</STYLE>
</HEAD>
<BODY>
<H1>Brrrrr!</H1>
<P STYLE="color: gray;">A02 este cel mai mare frigider de pe
suprafata pamantului.
</P>
</BODY>
</HTML>
 Folosirea CSS in HTML cont.
Informatia CSS poate fi specificata in 3 locuri/moduri:
●In anumite taguri din "body"-ul documentului HTML
<P STYLE="color: gray;">A02 ....

●In "head-ul" documentului HTML

Folosind tag-ul <STYLE>

<STYLE TYPE="text/css">
@import
url(sheet2.css); H1
color: maroon; BODY
background: yellow;
</STYLE>

●In fisiere css comune mai multor documente HTML Foi de stil externe
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css"
TITLE="Default" MEDIA="all">
 Tag-ul LINK
● Referinta la o foaie de stil externa
<LINK REL="stylesheet" TYPE="text/css" HREF="sheet1.css"
TITLE="Default">
● Scopul de baza - sa permita asocierea altor documente
cu documentul HTML
● CSS il foloseste pentru a asocia foi de stil cu HTML
● Trebuie folosit in cadrul sectiunii HEAD
● O foaie de stil poate fi comuna mai multor documente
HTML
 Atributele tag-ului LINK

Atribute obligatorii
● TYPE descrie tipul de date din documentul referit (in cazul css este
intodeauna: "text/css")
●HREF specifica un URL cu locatia foii de stil Atribute
optionale
● REL -
"relatie
",
stylesh
eet"
● TITLE folosit pentru cazurile cand sunt incarcate mai multe foi de stil intr-
o pagina
● MEDIA specifica mediumul pt care va fi folosit CSS.
(e.g. monitor, proiector, imprimanta, IPhone)
 Tag-ul STYLE
● Stilurile definite de tag-ul STYLE sunt denumite si "document
style sheet" sau "embedded style sheet"

● Definesc stiluri care se aplica documentului

● Pot contine referinte catre foi de stil externe folosind directiva
"@import"

<STYLE TYPE="text/css">
@import url(sheet2.css);
H1 {color: maroon;}
BODY {background: yellow;}
</STYLE>
 Stiluri inline

Exemplu folosire stil inline

<P STYLE="color: gray;">A02 ....

● Folosit cand se doreste modificarea stilului

unor elemente singulare
● Atributul STYLE poate fi asociat oricarui tag folosit in
interiorul sectiunii BODY
● Nici o alta parte a documentului nu va fi afectata
de acest atribut
Sintaxa stiluri
Selectori CSS
Tag selector

● Sunt usor de identificat intr-o regula CSS deoarece poarta

acelasi nume cu tagul HTML
● Tag selector - afecteaza toate instantele de pe pagina a tagului
HTML selectat
ex:
P { margin:0 0 1em 0; text-align:center; color:#fff;}
Dar pentru cazurile in care (de exemplu) unele paragrafe trebuie sa
arate altfel, CSS ofera solutie?
 Class selector
● Permite identificare/modificarea mai precisa (sau
mai rafinata) a elementelor de formatat.
● poate fi creat si apoi aplicat selectiv unei clase de taguri
HTML de pe pagina
● numele clasei poate fi orice cuvant cu unele restrictii:
○ numele de class selector trebuie sa inceapa cu "."
○ numai litere, numere, cratima si underscore in
numele clasei
○ Dupa "." trebuie sa urmeze litera (NU cifra)
○ Numele de clase sunt "Case sensitive".
 Class selector
Definirea unui class selector
special {
color:#FF0000;
font-family:"Monotype Corsiva";
}
Folosirea unui class selector
<p class="special"> Some paragraph
content...</p> sau
<h3 class="special"> The actual
heading...</h3>

NOTE: Atributul HTML "class" are ca valoare numele class selector

FARA prefixul ".". Semnul punct este necesar pentru numele class
selector numai in cadrul foii de stil.
 ID Selector
● ID selector este similar cu class selector cu urmatoarele
deosebiri:
○ Daca un stil apare de mai multe ori pe pagina se
foloseste class selector
○ ID selector identifica o sectiune care apare doar o
singura data in pagina.
○ A se considera folosirea lor cand se doreste evitare
conflictelor. Browserul acorda ID selector o prioritate
mai mare decat class selector
● Semnul diez (#) identifica un ID selector
}
 Folosirea ID selector
Definirea ID selector
#banner {
background: #CC0000; height: 300px;
width: 720px;
}

Folosirea ID selector
<p id="copyright">…
 Pseudo-Classes
● Permite asocierea de stiluri la structuri care nu exista in
document
● CSS1, pune la dispozitie 3 pseudo-classes:
○ :link - se refera la orice tag care contine un hyperlink care
indica o adresa ce nu a fost vizitata
○ :visited - la fel ca mai sus dar catre o adresa deja
vizitata
○ :active - orice tag ce contine hyperlink si care este in
proces de a fi activat (click sau similar)
○ :hover - permite modificarea aparentei unui hyperlink
atunci cand cursorul trece peste el.
 Folosirea pseudo-classes

A:visited {color: red;

background: yellow;}

● Linkurile vizitate vor fi acum rosii si vor avea

fundalul galben.
● Semnul (:) indica faptul ca se foloseste o
pseudoclasa
 Selectori de Atribute
● E[numeAtribut] - elemente de tip E cu un atribut
"numeAtribut" CSS2
● E[numeAtribut="valoare"] - elemente de tip E cu valoarea
atributului "numeAtribut" avand exact "valoare"
- CSS2
● E[numeAtribut^="valoare"] - elemente de tip E cu valoarea
atributului "numeAtribut" care incepe cu "valoare" - CSS3
● E[numeAtribut$="valoare"] - elemente de tip E cu valoarea
atributului "numeAtribut" care se termina cu "valoare" - CSS3
● E[numeAtribut*="valoare"] - elemente de tip E cu valoarea
atributului "numeAtribut" contin substringul "valoare" - CSS3
 Descendent selectors
● Un document HTML este format din tag-uri imbricate in
alte tag-uri
● Descendent selector permit folosirea acestei ierarhii si
aplicarea reglilor de formatare diferit
● Partea de selector a regulii este compusa din 2 sau mai
multi selectori separati prin spatiu.
● Fiecare spatiu poate fi tradus: "ce poate fi gasit in",
"care este parte din"
Exemplu descendent selector

h1 strong { color: red; }

/*poate contine mai mult de 2 elemente.*/ ul li a
{ font-family: Arial; }
/* nu trebuie specificata intreaga cale a ierarhiei*/ body
li a {font-family: Arial; }
/*Nu se limiteaza doar la tag selector*/ p .intro a
{ color: yellow; }
 Selector universal (*)
● Asterisk * este denumit selector universal.
folosit pentru selectarea tuturor tag-urilor
● Poate fi folosit ca parte din descendent
selector

Exemplu:

* { font-weight: bold; } /*Vreau toate elementele bold*/

#banner * {font-weight: bold;}
 Tag-ul <DIV>
● Tag-ul <DIV> identifica o DIViziune logica a paginii
● Odata grupate in acest fel, se pot aplica instructiuni
de formatare doar tag-urilor din interior folosind
un..."class selector"
Exemplu:
<div class="photo">
<img src="flower.jpg“ alt="Big yellow flower"/>
<p>Sun flower is a beautiful flower</p>
</div>

Declaratia clasei .photo poate include instructiuni

de formatare, stiluri pentru toate elementele din
interiorul tagului DIV
 Tag-ul <SPAN>
● Poate fi folosit pentru a aplica o clasa sau un ID la doar o parte
dintr-un tag
●Se mai numesc si elemente
inline Exemplu de folosire a
<SPAN>:
<p>Welcome to
<span
class="companyName">Tratoria Il
Calcio</span>
- we have much better food than
<span
class="companyName">McDonald
</span> or
<span
class="companyName">KFC</spa
n>
</p>
 Mostenirea
● Este procesul prin care proprietatile CSS care sunt aplicate unui tag sunt transmise
tagurilor descendente
● Mostenirea functioneaza de-a lungul mai multor descendenti
Exemplu:
body { font-size:
10pt } h1 { font-
size: 130% }
...
<BODY>
<H1>A
<EM>large</EM>
heading</H1>
</BODY>

● H1 va fi cu
font-size 13pt
● EM va fi cu
font-size 13pt
 Limitari ale mostenirii

Exista unele cazuri in care mostenirea nu se aplica

strict:
● Ca regula generala, proprietatile care afecteaza
marginile sau culorile de fundal ale
elementelor nu se mostenesc.
● Browserele folosesc propriile stiluri pentru a
formata unele elemente. e.g linkuri
 Prioritatea
Ce se intampla in situatii de acest fel?
grape {color:purple;}
H1 {color:red;}
...
<H1 class="grape"> Un text</H1>

CSS asigura o formula pentru determinarea

prioritatea stilului - Specificity
 Cum se calculeaza prioritatea
● Un tag selector valoreaza 1 punct
● Un class selector valoreaza 10 puncte
● Un ID selector valoreaza 100 puncte
● Stilurile inline valoreaza 1000 puncte

Exemplu de calculare a prioritatii

● un tag selector pentru tagul <img> (specificity = 1)
● un ID selector denumite #logo (specificity = 100)
● mai mult de 1 selector #banner .byline (specificity =
100+10)
 Importanta
● Unele reguli pot fi marcate ca fiind mai importante
● se foloseste fraza "!important;"
● Regulile marcate cu "!important;" nu au o
valoare de specificitate (10000 poate fi asumat)
● O regula "!important" va suprascrie chiar si atributele
de stil inline.
!important exemplu de folosire

H1 {color: gray !important;}

..
<H1 style="color: red">text</H1>
 Cum sunt rezolvate conflictele
1. Gaseste toate declaratiile care contin un selector
pentru un anumit element.
2. Sorteaza in functie de prioritatea specificata
explicit
3. Sorteaza in functie de specificitate
4. Sorteaza in functie de ordinea aparitiei
declaratiei. Cu cat apare mai tarziu cu atat are
pondere mai mare.
 Culori
● Culori predefinite
○ preluate setul standard Windows VGA
○ aqua gray navy silver black green olive teal blue lime purple white
fuchsia maroon red yellow
● Culori specificate de RGB
○ ca procent rgb(<Rosu>%, <verde>%, <albastru>%)
○ Valori zecimale (0-255) rgb(<Red>, <Green>, <Blue>)
○ Valori Hexa - #RRGGBB
● Exemple:
H1 {color: gray;} /*Named colors*/
H1 {color: rgb(50%,50%,50%);}
/*Percentage colors*/ H1{color:
rgb(36, 66,89)} /*Decimal numbers*/
H1{color: #A03FFF} /*Hexadecimal
colors*/
 Unitati de masura
● Absolute units
○ Inches - in - 2.54 cm = 1 inch
○ Centimeters -cm
○ Millimeters -mm
○ Points- pt - folosit de printere. Sunt 72 pt intr-un
inch
○ Picas -pc - Un pica = 12 pt
● unitati relative
○ em
○ ex
 Box Model
● Fiecare tag HTML este tratat ca o cutie (box)
● In jurul continutului unui tag exista diferite
proprietati cu ajutorul carora se poate realiza
spatierea.
○ padding - spatiul dintre continut si
margine(border)
○ border - o linie trasata in jurul elementului
○ Margin - spatiu care separa un tag de altul
● Pentru un anumit tag, se pot folosi oricare din
aceste proprietati in combinatie
Box Model
 Pozitionarea folosind CSS
● CSS ofera proprietati care permit controlul pozitiei
elementelor HTML
● Exista 4 tipuri de pozitionare:
○ Absoluta: se specifica pozitia pentru sus, jos stanga
dreapta
○ Relativa: pozitia este relativa ordinea in cadrul
documentului
○ Fixed: elementul este blocat intr-o pozitie pe
ecran
○ Static: urmareste ordinea in documentul HTML
 Pozitionarea folosind CSS
#banner {
position: absolute; left: 100px;
top: 50px; width: 760px;
}

.pos_fixed { position:fixed; top:30px; right:5px;

}
 Bibliografie
http://www.w3.org/TR/css-2010/
http://www.w3.org/TR/CSS21/cover.html#minitoc