Scribd
Încărcați
24 vizualizări41 pagini

Curs 3-4 Programare

Cursul prezintă principalele instrumente de dezvoltare web, tagurile HTML de bază și ce este validarea documentelor HTML.

Încărcat de

virgilalexandru.dontu
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
24 vizualizări41 pagini

Curs 3-4 Programare

Cursul prezintă principalele instrumente de dezvoltare web, tagurile HTML de bază și ce este validarea documentelor HTML.

Încărcat de

virgilalexandru.dontu
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 41

Programarea calculatoarelor si limbaje de

programare

Limbajul HTML
Limbajul
HTML

Obiectivele cursului

Prin parcurgerea acestui curs vom:


►Descoperi intrumente de lucru cu HTML
►Putea realiza un site Web cu HTML
►Descoperi validarea
►Cunoaste instrumente de validare
►Realiza formulare cu HTML
Introducere
Introducere

Prezentare
►Un fisier HTML are extensia .html
►Un fisier HTML este construit cu tag-uri
predefinite, taguri pe care le vom invata
pas cu pas
Introducere

Prezentare
►Tagurile sunt inconjurate de < si >
<nume_tag>
►Exista doua tipuri de tag-uri
- tag-uri pereche : <p> … </p>
- tag-uri simple : <br/>
►Numele tag-urilor sunt intotdeauna litere mici
Introducere

Prezentare
Taguri “bloc”
► Afisare pe axa verticala
► Folosite pentru structurarea paginii cu/in
“blocuri”
► Exemple
Taguri <p>, <h1>, <h2>, etc…
“inline”
► Formatare date
► Afisare pe axa orizontala
► Trebuie sa fie inconjurate de tag-uri
“bloc”
Introducere

Instrumente de lucru
Exista o multime de instrumente de lucru
- Pentru a scrie cod HTML
► Editoare de cod sursa:
- Notepad++
- TextMate
► IDE
- Adobe Dreamweaver
- Aptana
- WebStorm
- Pentru a edita, depana, monitoriza HTML, CSS si JS direct
in
browser
Tag-uri de baza HTML
Tag-uri de baza
HTML

Pas cu pas …

Scrierea unei pagini Web simple cu scopul:


- De a prezenta un scurt document / material
- De a invata/descoperi unele tag-uri de baza
- In aceasta faza/etapa fara CSS
- La final veti proiecta prorpiul document /material
Tag-uri de baza
HTML

Pas cu pas …

Titlul paginii
Nume

Imagine
Lista ordonata

Legatura la ancore

Paragraf
Tag-uri de baza
HTML

Pas cu pas …

Sub titlu

Lista neordonata

Tabel

Hyperlink
Tag-uri de baza
HTML

Pasul 1: Structura

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3. <head>

4. </head>
5. <body>

6. </body>
7. </html>
Tag-uri de baza
HTML

Pasul 1: Structura
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
- Declaratia DOCTYPE specifica browserului ca
documentul este
conform specificatiilor
- Necesara in XHTML
-Document Type Declaration (DTD), declaratia tipului de
document trebuie plasata inaintea elementului “root”
(“radacina”)
documentului
Tag-uri de baza
HTML

Pasul 1: Structura

2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

7. </html>
-Tag de tip bloc
-Radacina documentului
-Contine tagurile <head> si <body>
- Necesita, obligatoriu, doua atribute:
a). xmlns
b). xml:lang
-> in XHTML 1.1 trebuie specificat namespace (spatiu de
nume)
Tag-uri de baza
HTML

Pasul 1: Structura

3. <head>
…….
4. </head>
Acest tag (eticheta) de tip bloc contine antete cum sunt:
-<title> - titlul paginii
-<style> / <link /> - include stilul
-<script> - include JavaScript
-<meta / > - ajutor pentru referinte
Tag-uri de baza
HTML

Pasul 1: Structura

5. <body>
…….
6. </body>
Acest tag (eticheta) de tip bloc cuprinde toate elementele
continute in document, cum ar fi:
- Paragrafe
- Imagini
- Tabele
- etc
Tag-uri de baza
HTML

Pasul 2: Titlul paginii

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0


Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3. <head>
<title>Document personal </title>
4. </head>
5. <body>

6. </body>
7. </html>
Tag-uri de baza
HTML

Pasul 3: Titluri

<hn> … </hn>

Exista sase taguri predefinte, astfel:


Tag-uri de baza
HTML

Pasul 3: Titluri
…
<body>
<h1>Studentul X </h1>
<h3>Limbaje de programare</h3>
<h2>Sisteme de operare</h2>
</body>
...
Tag-uri de baza
HTML

Pasul 4: Paragrafe

<p> … </p>
- defineste un paragraf
- adauga automat o linie noua
<br/>
- folosit pentru a “rupe” o linie; salt la linie noua

<body>
<p>Primul paragraf </p>
<p>Al doilea <br/> paragraf</p>
</body>
Tag-uri de baza
HTML

Pasul 5: Liste
Liste ordonate Liste neordonate
Definite de tagurile Definite de tagurile
<ol> si </ol> <ul> si </ul>
Elementele listelor sunte definite de tagurile <li> si
</li>
<ol> <ul>
<li>HTLM</li> <li>HTLM</li>
<li>JavaScript</li> <li>JavaScript</li>
</ol> </ul>
Tag-uri de baza
HTML

Pasul 6: Link-uri si ancore


<a> … </a>
Folosite pentru a crea un link catre o alta resursa
Exista trei tipuri de linkuri:
- link-uri absolute
<a href=“http://web.com/Path/fisier.html”> Linkul meu</a>
- link-uri relative

<a href=“fisier.html”> Linkul meu</a>


- link-uri de tip ancora

<a href=“fisier.html#nume_ancora”> Linkul meu</a>


Tag-uri de baza
HTML

Pasul 6: Link-uri si ancore

Pentru realizarea unei ancore se


utilizeaza
atributul name al tagului <a>
<a name=“nume_ancora”> Linkul meu</a>
Tag-uri de baza
HTML

Pasul 6: Link-uri si ancore

<ol>
<li> <a href="#p1">Programarea calculatoarelor I</a></li>
<li> <a href="#p2">Programarea calculatoarelor II</a></li>
</ol>
.
.
.
<a name=“p1”> Programarea calculatoarelor</a>
Tag-uri de baza
HTML

Pasul 7: Imagini

Pentru afisarea unei imagini se foloseste un tag


“gol”
Necesita, obligatoriu, doua atribute:
- src=“url”
- alt=“alternative text” (daca URL-ul nu e
corect)
Exemplu:
<img src=“img.jpg” alt=“O imagine” title=“Poza mea”/>
Tag-uri de baza
HTML

Pasul 8: Tabele
<table> … </table>

Impartit in randuri ( <tr> … </tr>)

Fiecare rand principal contine:


- Headers (antet) (<th> … </th> )
- Date (<td> … </td>)

Tag-urile <td> si <th> formeaza coloanele


Tag-uri de baza
HTML

Pasul 8: Tabele
<table border=”1”>
<tr>
<th>Linie 1, Header 1</th>
<th>Linie 1, Header 2</th>
</tr>
<tr>
<td>Linie 2, Celula 1</td>
<td>Linie 2, Celula 2</td>
</tr>
</table>
Tag-uri de baza
HTML

Pasul 8: Tabele

Unirea celulelor:
- colspan : pe
orizontala
- rowspan : pe
verticala
Tag-uri de baza
HTML

Pasul 8: Tabele
<tr>
<th colspan="2"> Header </th>
</tr>
<tr>
<td>1</td>
<td rowspan="2"> Unirea a 2 randuri</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td colspan="2">Unirea a 2 celule</td>
</tr>
Alte elemente HTML
Care sunt alte elemente ale
HTML?

Comentarii

► Sunt invizibile pentru browserele Web


► Utilizari:
- reluarea proiectului dupa mult timp
- reluarea proiectului de alt dezvoltator
- lucru in echipa
Exemplu:
<! -- Acesta este un comentariu care va poate ajuta in viitor -->
Care sunt alte elemente ale
HTML?

Caractere speciale

► Caractere speciale
<p> Web'n'Dev &#169; </p>
► Spatiu (in codul HTML)
< p> Web'n'Dev rocks </p>
► Spatiu folosind codul &nbsp;
< p> Web'n'Dev &nbsp;&nbsp;&nbsp;rocks
</p>
Care sunt alte elemente ale
HTML?

Caractere speciale valoar


cod
e
&#25
ă
9;
&#25
Ă
8;
&#22
â
6;
&#19
Â
4;
&#23
î
8;
&#20
Î
6;
&#35
ş
1;
&#35
Ş
0;
&#35
ţ
5;
&#35
Ţ
4;
Care sunt alte elemente ale
HTML?

Alte taguri HTML

► Exista o multime de alte tag-uri in


XHTML
► O lista a acestor taguri este acest link

http://www.w3schools.com/tags/default.asp
Validarea
Validare
a

Definitie

Validarea
certifica faptul ca cerintele
(specificatiile) au fost indeplinite
Validare
a

De ce facem validarea?!

► Validarea este esentiala pentru


normalizare
- accesibilitate universala
- portabilitatea
- cresterea vitezei de lucru (a
productivitatii)
- usor de controlat
- durabilitatea documentelor
Validare
a

Tipuri de validari

► Exista trei tipuri de validare:


- tranzitie
- frameset (cadre)
- stricte
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Validare
a

Validare !!!
http://validator.w3.org/
► Posibilitatea de validare prin:
- URI, incarcarea fisierului sau
copierea codului sursa
► Limitari:
- se poate valida doar o pagina Web
Daca sunt mai multe erori, se corecteaza prima
si se (re)valideaza documentul
Limbajul
HTML

Rezumatul cursului

Instrumente
Principalele
de Ce este
taguri
dezvoltare validarea
HTML
Web

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