Curs5 Site Web

Site-uri WEB: limbaje de realizare, arhitectura si
tehnologii utilizate
Pagini Web si site-uri WEB
Limbajul HTML site-uri statice
Site-uri dinamice. Limbajele CSS, Javascript
Tehnologii Java, XML, Ajax
Arhitectura site-urilor WEB dinamice.
Pagina WEB documentul de baza al unui site.
Limbajul de baza: HTML (Hyper Text Markup
Language)
HTML contine un set de tag-uri care se refera la
formatarea informatiei afisata de browser.
Site-ul WEB: o colectie de pagini WEB care se refera
la un anumit subiect, intre care exista
(hiper)legaturi.
Un site WEB este gazduit de un server
WEB.
Serverul WEB un tip special de software
(exemple: IIS, Apache).
In functie de complexitatea si modul de
interactiune cu user-ul site-urile WEB pot fi:
Statice (HTML)
Dinamice (DHTML)
Aplicatii WEB (3-tier)
Site-uristatice
Arhitectura unui site static:
Interfata de administrare
Limbajul in care sunt realizate paginile WEB statice:
HTML
HTML: tag (comenzi) de formatare
Fisierul HTML este un fisier text: se poate crea cu un
simplu editor (notepad) sau cu un editor WYSIWYG.
Comenzile de formatare sunt independente de
platforma (Windows, Linux, Android, IOS, MacOS-X)
HTML este dezvoltat de un consortiu: www.w3c.org
Versiuni HTML utilizate in prezent:
HTML 4
HTML 5
HTML 5 - facilitati pentru
Tratarea erorilor
Operatii de tip drag-and-drop
Suport pentru video/audio
Securitate sporita
Localizare geografica
Memorarea informatiilor in fisiere locale (pe calculatorul
utilizatorului)
Sintaxa unui tag HTML:
<tag> text/continut </tag>
Un tag poate avea atribute (parametri)
<tag atribut1=valoare1 atribut2=valoare2 >
Principalele tipuri de tag-uri
Formatarea textului
Crearea de liste
Crearea de legaturi
Inserarea de imagini
Crearea tabelelor
Exemplu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
dtd document type definition
HTML5
<!DOCTYPE html>
La urmatoarele adrese se pot gasi o serie de

tutoriale pentru invatarea limbajului HTML:
www.w3c.org
ww.w3schools.com
Structura unei pagini WEB
<HTML>
<HEAD>
</HEAD>
<BODY>
.
</BODY>
</HTML>
Antetul: titlul paginii, informatii de stil, script-uri
utilizate ,meta-informatii
Meta-informatii
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Free Web tutorials on HTML and CSS">
<meta charset="UTF-8">
<meta name="author" content=John Doe">
<meta http-equiv="refresh" content="30">
<meta name=Classification" content=Education/Tutorials">
Script-uri
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
<base href="http://www.w3schools.com/images/" target="_blank">

HTML 5 structura unei pagini
DHTML Dynamic HTML (nu e un standard W3C;
este definit de Microsoft si Netscape)
O combinatie de HTML, CSS, scripturi care
transforma paginile WEB in pagini animate.
Foloseste un model denumit DOM: Document Object
Model.
Acesta defineste un document ca fiind un obiect
format din componente (obiecte) care sunt descrise
prin atribute si au o serie de metode de acces la
aceste atribute.
DOM: documentul (pagina WEB) este vazuta ca o colectie de
obiecte cu atribute si metode, furnizand acces la fiecare
element al documentului.
Fiecare element al unui document = DOM node
Colectia de noduri formeaza un arbore.
Fiecare nod are un atribut numit id (cu valori unice in
document) cu ajutorul caruia poate fi accesat nodul
respectiv.
Obiectul document este parintele tuturor celorlalte obiecte
din pagina HTML.
Document
Elementul
radacina
<HTML>
Elementul Elementul
<HEAD> <BODY>
Elementul Elementul Elementul

TITLE <A> <H1>
Text:
Text: Prima Aceasta
Atribut
Pagina este prima
<HREF>
WEB pagina
WEB
Exemple de obiecte utilizate de DHTML DOM:
window: informatii despre fereastra unui browser
document: pagina afisata in mod current de browser
frame: setul de frame-uri (daca sunt folosite)
history: tine o lista cu site-urile vizitate
navigator: informatii despre browser
location: URL-ul paginii curente
screen: informatii de ecran/monitor
Arhitectura (structura) unui site dinamic:
CSS Cascading Style Sheets
Defineste layout-ul unei pagini WEB.
Stilurile pot fi plasate:
Inline (chiar langa un tag)
In antetul paginii (<HEAD>)
Intr-un fisier extern paginii WEB, salvat cu extensia .css si legat la
pagina WEB prin:
<LINK REL=stylesheet TYPE=text/css HREF=name.css>

Sintaxa CSS e formata din 3 elemente:
Selector
{property: value; property: value}
Exemplu:
body {
background-color: gray;
}
h1 {
color: orange;
text-align: center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
Script-uri
<script type="text/javascript" language="javascript">
..
</script>
Exemplu:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Exemplu:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
AJAX - Asynchronous JavaScript and XML.
AJAX a devenit popular in 2005, fiind creat de Google,
si utilizat in Google Suggest.
Cu ajutorul AJAX se creaza pagini interactive care
permit:
Actualizarea unei paginii Web fara a reincarca intreaga
pagina;
Cererea unor date de la serverul web dupa ce pagina a fost
incarcata;
Receptionarea/Trimiterea de date de la/catre server dupa ce
pagina a fost incarcata;
AJAX este o tehnica care permite crearea unor pagini
rapide si dinamice.
AJAX permite actualizarea asincrona a paginilor prin
transmiterea/receptionarea unor cantitati mici de
informatie de la/catre server, permitand actualizarea
doar a unor portiuni dintr-o pagina.
Paginile web clasice (care nu folosesc AJAX) se
reincarca in intregime atunci cand se schimba
continutul paginii.
Exemple de aplicatii care folosesc AJAX: Google
Maps, Gmail, YouTube, Facebook.
Bibliografie
Andrew Tanenbaum, David J. Wetherall,
Computer Networks, 5th edition, Prentice Hall,
2011.
V. Avram, D. Rizescu, Technologies for e-
Business, Editura Universitara, Bucuresti,
2015.
B. Oancea, Bazele Informaticii, Editura
Economica, 2004.

Curs5 Site Web

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs5 Site Web

Încărcat de

Drepturi de autor:

Formate disponibile

Site-uri WEB: limbaje de realizare, arhitectura si

dtd document type definition

La urmatoarele adrese se pot gasi o serie de

<base href="http://www.w3schools.com/images/" target="_blank">

Elementul Elementul Elementul

<LINK REL=stylesheet TYPE=text/css HREF=name.css>

S-ar putea să vă placă și