Ies C4

Integrarea Electronic a Serviciilor
CURS 4
l.dr.ing JANOS GAL
2011
Introducere n limbajul HTML

- elemente de baza, formulare, tabele, cadre -

l.dr.ing Gl Jnos
Limbajul HTML
Scopul acestui capitol nu este acela de a face o descriere a tuturor acestor directive. Exista numeroase documente i cari publicate inclusiv n limba romna care conin informaii complete n domeniu. Prezentam n continuare doar o trecere in revista a limbajului cuprinzand directivele uzuale.

l.dr.ing Gl Jnos
Generalitati
n HTML pentru a diferenia directivele de restul elementelor acestea se pun ntre paranteze ascuite: <directiva> O mare parte a lor au efect asupra unei ntregi poriuni din fiier, ncadrata de inceput sfarsit : <directiva> ........... </directiva>

l.dr.ing Gl Jnos
Format general
<html> <head>
Directive continnd informatii generale despre pagina

</head> <body> Continutul paginii incluznd texte si directive </body> </html>

l.dr.ing Gl Jnos
Hello World
<html> <head> <title>Hello world title</title> </head> <body> HELLO WORLD! </body> </html> Sau, mai simplu: HELLO WORLD!

l.dr.ing Gl Jnos
Erori
Nu putem vorbi de semnalarea erorilor in HTML Daca un Browser un recunoaste o directiva pur si simplu o ignora. Exemplu:
<html> <hed> <turtle>Hello world title</turtle> </hed> <bady> <h 1>HELLO WORLD!</h 1> <mimi>Directiva <upb>necunoscuta</upb></mimi> </bady> </html>
l.dr.ing Gl Jnos
Erori
Rezultatul va fi:

l.dr.ing Gl Jnos
Stiluri
In zona de continut a paginii (intre <body> si </body>) putem folosi elemente ca: Stiluri (headings): Acestea sunt asemanatoare ca efect selectarii n Microsoft Word a stilurilor Heading 1, Heading 2, etc. Exemplu: <h1> Titlu principal </h1>, <h2> Titlu secundar </h2> ...
l.dr.ing Gl Jnos
Liste neordonate
Lista fara numere de ordine (unordered list) <ul> <li> </ul>: <ul> <li>Primul element n lista <li>Al doilea element n lista ....... <li>Ultimul element din lista </ul>

l.dr.ing Gl Jnos
Liste ordonate
Lista cu numere de ordine (ordered list) <ol> <li> </ol>: <ol> <li>Primul element n lista <li>Al doilea element n lista ....... <li>Ultimul element din lista </ol>

l.dr.ing Gl Jnos
Liste de definitii
<dl> <dt>Primul termen</dt> <dd>Definiia primului termen</dd> <dt>Al doilea termen</dt> <dd>Definiia celui de-al doilea termen</dd> ....... <dt>Ultimul termen</dt> <dd>Definiia ultimului termen</dd> </dl>

l.dr.ing Gl Jnos
Rezultat

l.dr.ing Gl Jnos
Alte directive de formatare

Trecere pe linia urmatoare (break): Linie orizontala (horizontal ruler): <hr> Paragraf: . Observaie: este facultativ. Subliniere: Italice: ngroare (bold): 
l.dr.ing Gl Jnos
Exemplu
Text subliniat, caractere italice, ingrosat sau Toate cele trei combinate.

l.dr.ing Gl Jnos
Exemplu
Fiecare pereche de directive de formatare isi face efectul independent de celelalte: Toate cele trei combinate dar intercalate.

l.dr.ing Gl Jnos
Ancora (link)
Acest tip de directiva este esenial i este cel care implementeaza de fapt conceptul de hipertext. n cadrul unei pagini HTML unul sau mai multe cuvinte consecutive pot sa aiba asociata o alta pagina HTML. n momentul n care utilizatorul selecteaza (click) zona respectiva, automat browserul cere documentul asociat i l afieaza pe ecran. Forma cea mai simpla a unei astfel de directive este: <a href=URL-adresa paginii asociate> Cuvinte care se pot selecta </a>
l.dr.ing Gl Jnos
URL
Adresa specificata prin href poate fi: Relativa la pagina curenta (exemplele 1 i 2 de mai jos) 1. Exemplul 1: <a href=pag1.html>Pagina 1</a> 2. Exemplul 2: <a href=documente/pag2.html>Pagina 2</a> 
l.dr.ing Gl Jnos
URL
Sau poate fi: Absoluta, n care caz se specifica o cale completa pe acelai server de web (exemplul 3) sau o adresa completa (exemplul 4) 3. Exemplul 3:
<a href=/documente/pag3.html>Pagina 3</a> 
4. Exemplul 4:
<a href= http://www.un.server.web/doc/pag4.html >Pagina 4</a> 

l.dr.ing Gl Jnos
URL
n primul caz noua pagina se gasete pe acelai server i n acelai director cu pagina curenta. n al doilea caz, pentru gasirea paginii pag2.html serverul web pornete din directorul paginii curente i cauta n subdirectorul documente. 1. Exemplul 1: <a href=pag1.html>Pagina 1</a> 2. Exemplul 2: <a href=documente/pag2.html>Pagina 2</a> 
l.dr.ing Gl Jnos
URL
n al treilea caz, pentru gasirea paginii pag3.html serverul web pornete din radacina arborelui de documente (DOCUMENT_ROOT) i cauta n subdirectorul documente. n ultimul caz noua pagina se poate gasi pe alt server de web dect cea curenta. Browserul va contacta acest server care i va livra pagina aflata n subdirectorul doc.
3. Exemplul 3: <a href=/documente/pag3.html>Pagina 3</a> 

4. Exemplul 4:
<a href= http://www.alt.server.de.web/doc/pag4.html>Pagina 4</a> 

l.dr.ing Gl Jnos
Bookmark
Trimiteri n interiorul unui document: n acest caz marcarea locului referit se face cu: <a name=marcaj-tinta>. . . </a> Referina are forma <a href=adresa-document#marcaj-tinta> . . . </a> unde adresa documentului poate fi relativa sau absoluta. Iata un exemplu cu doua documente HTML n care primul reprezinta cuprinsul (tabla de materii) pentru al doilea. De remarcat ca prin selectarea unei ancore care trimite spre o poriune a unui document acesta este ncarcat n ntregime de browser dar poziionarea se face nu la nceputul sau ci n punctul inta marcat.
l.dr.ing Gl Jnos
Exemplu - cuprins
<html> <head> <title>Cuprins</title> </head> <body> <h1>Cuprinsul lucrarii</h1> <hr> <ul>
<li><a href=Continut.html#cap1>Capitolul 1</a> <li><a href=Continut.html#cap2>Capitolul 2</a> <li><a href=Continut.html#cap3>Capitolul 3</a>

</ul> </body> </html>

l.dr.ing Gl Jnos
Exemplu - documentul
<html> <head> <title>Lucrare</title> </head> <body> <h1><a name=cap1>Capitolul 1</a></h1> . . . Continutul capitolului 1 <h1><a name=cap2>Capitolul 2</a></h1> . . . Continutul capitolului 2 <h1><a name=cap3>Capitolul 3</a></h1> . . . Continutul capitolului 3 </body> </html>

l.dr.ing Gl Jnos
Rezultat - cuprins

l.dr.ing Gl Jnos
Rezultat - document

l.dr.ing Gl Jnos
Imagini
Documentele HTML pot conine directive de includere imagini (includerea imaginii in document se face la afisarea acestuia). Sintaxa (simplificata) este: <img src= "IMG_0415.jpg" width="200" height="150" alt="Poza"> src specifica adresa fiierului coninnd imaginea (relativa sau absoluta), width i height elemente de scalare a imaginii i alt un text alternativ pentru browserele care nu afiseaza imagini (textul poate apare si la pozitionarea pe imagine).
l.dr.ing Gl Jnos
Imagini
Fiecare tip de browser lucreaza cu un anumit set de formate de imagine. Formatele JPEG i GIF sunt cele mai folosite dar nu sunt singurele. Subdirectivele width, height i alt sunt opionale.

l.dr.ing Gl Jnos
Exemplu
<img src="IMG_0415.jpg" width="100" height="200" alt="Poza">Poza
Se observa deformarea Imaginii din cauza lui width si height

l.dr.ing Gl Jnos
Imagine link
O imagine poate fi folosita la link: <BODY> <a href="test2.html"><img src="IMG_0415.jpg" width="100" height="200" border="0" alt=Poza"></a> Poza </body>
Border=0 elimina chenarul plasat de browser automat in jurul imaginii-link (vezi dreapta).

l.dr.ing Gl Jnos
Imagine link
Link-ul poate cuprinde atat imagini cat si text: <body> <a href="test2.html"> <img src="IMG_0415.jpg" width="100" height="200" alt=Poza"> Poza</a> </body>

l.dr.ing Gl Jnos
Background
Se poate seta o culoare sau o imagine de fundal: <html> <head> <title>Culori</title> </head> <body bgcolor="#CCFFCC"> Fundal colorat </body> </html>

l.dr.ing Gl Jnos
Imagine fundal
<html> <head> <title>Pagina mea</title> </head> <body background= "IMG_0415.jpg"> <h1>Fundal imagine</h1> </body> </html>

l.dr.ing Gl Jnos
Linii orizontale
Cu <hr> putem genera linii orizontale: <BODY> Prima parte <HR> A doua parte <HR WIDTH=60% ALIGN="right"> A treia parte <HR WIDTH=60% size=10 color="blue"> </BODY> Alinierea implicita este CENTER

l.dr.ing Gl Jnos
Culori ancore
Se pot seta culori pentru ancore (link-uri) functie de tipul lor: pagina, pagina vizitata, pagina activa cea selectata (click)
<BODY BGCOLOR="#33FFFF" TEXT="#330033" LINK="#33CC00" VLINK="#FF00CC" ALINK="#009900"> <a href="test2.html"> Pagina <a href="test1.html"> Pagina vizitata <a href="test.html"> Pagina activa 

l.dr.ing Gl Jnos
Font - Face
Se poate schimba fontul de scriere cu FONT FACE:
<body> Arial Arial Black Times Rew Roman Georgia Verdana</body> Garamond Comic Sans MS Courier New Impact Trebuchet MS </html>

l.dr.ing Gl Jnos
Font Size
Se poate dimensiona fontul cu FONT SIZE:
<TABLE BORDER=0><TR> <TD>Size 1</TD> </TR><TR> <TD>Size 2</TD> </TR><TR> <TD>Size 3</TD> </TR><TR> <TD>Size 4</TD> </TR><TR> <TD>Size 5</TD> </TR><TR> <TD>Size 6</TD> </TR><TR> <TD>Size 7</TD> </TR></TABLE>

l.dr.ing Gl Jnos
Combinatii
Directivele anterioare se pot combina:
<body> Directive combinate </body>

l.dr.ing Gl Jnos

Ies C4

Încărcat de

Informații document

Titlu original

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

Ies C4

Încărcat de

Drepturi de autor:

Formate disponibile

Integrarea Electronic a Serviciilor

Introducere n limbajul HTML

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Directive continnd informatii generale despre pagina

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Alte directive de formatare

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

3. Exemplul 3: <a href=/documente/pag3.html>Pagina 3</a><br>

Integrarea Electronic a Serviciilor

<li><a href=Continut.html#cap1>Capitolul 1</a> <li><a href=Continut.html#cap2>Capitolul 2</a> <li><a href=Continut.html#cap3>Capitolul 3</a>

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Se observa deformarea Imaginii din cauza lui width si height

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Se poate schimba fontul de scriere cu FONT FACE:

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

Integrarea Electronic a Serviciilor

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