Sunteți pe pagina 1din 48

Centrul de Instruire pentru

Tehnologia Informației și
Apărare Cibernetică
CURS 1-Bazele HTML
Part 1: HTML Structure, Text, Images

Întocmit:
Lt.drd. Alexandru-Gabriel ROMANIUC
romaniuc_alexandrugabriel@yahoo.com
Ce este limbajul HTML?
• HTML - Hypertext Markup Language (este limbajul standard pentru
fișierele care urmează să fie afișate într-un browser). Totodată,
limbajul de programare HTML reprezintă limbajul pe care
browserele de internet îl înțeleg și cu ajutorul lui pot fi
afișate paginile web.
• Paginile WEB– sunt fișiere text care conțin cod HTML și care sunt
mai apoi compilate pentru a afișa pagina Web.
• Compilatoare HTML – se mai numesc și editoare de cod HTML și pot
fi de două tipuri:
editoare clasice : Notepad++, etc.
editoare de tipul WYSIWYG - What You See Is What You Get, care
se traduce prin ceea ce vezi este ceea ce obții). În acest caz,
utilizatorii nu trebuie decât să se ocupe de partea grafică a
paginii Web, de așezarea în pagină etc., scrierea codului HTML
rămânând în seama acestor programe (ex. Microsoft FrontPage).
Crearea paginilor HTML
• Un fișier HTML are extensia .htm sau .html și poate fi creat cu
ajutorul editoarelor de cod enumerate anterior.

Pagini Web statice vs. dinamice


• Statice vs. Dinamice:
- au conținut fix, în timp ce paginile web dinamice pot avea
conținut în schimbare.
- paginile Web statice trebuie să fie schimbate manual, în
timp ce modificările la o pagină dinamică pot fi încărcate
printr-o aplicație în care resursele sunt stocate într-o bază
de date.
- paginile web statice utilizează numai un server Web, în ​timp
ce paginile web dinamice utilizează un server web, un server
de aplicații și o bază de date.
Acronime folosite în Programare Web – Definiții 1
• WWW – World Wide Web, arhitectură clasică client / server folosită la
nivel mondial.
• HTTP - Hypertext Transfer Protocol (text-based request-response
protocol), este un protocol de tip text , implicit al WWW, pe care
îl găsim la nivelul Aplicație (OSI Model).
• HTTPS - Hypertext Transfer Protocol Secure, extensie a HTTP,
folosit pentru a securiza comunicațiile.
• Site WEB - este o colecție de pagini web construite prin coduri -
coduri care descriu aspectul, formatul și conținutul unei pagini.
• Serverul WEB - este un computer conectat la internet care primește
solicitarea unei pagini web trimise de browserul dumneavoastră.
• Browserul - vă conectează computerul la server printr-o adresă IP.
Adresa IP este obținută prin traducerea numelui de domeniu.
Browser Web – Server Web – Site Web
• Clienții= sunt dispozitivele conectate la internet
ale utilizatorului web (de exemplu, computerul
conectat la Wi-Fi sau telefonul conectat la rețeaua
dvs. mobilă) împreună cu software-ul de accesare web
disponibil (de obicei un browser web precum Firefox
sau Chrome).
• Serverele: sunt calculatoare care stochează pagini
web, site-uri sau aplicații. Când un dispozitiv
client dorește să acceseze o pagină web, o copie a
paginii web este descărcată de pe server, pe
computerul client pentru a fi afișată în browserul
web al utilizatorului.
Browser Web – Server Web – Site Web
!!În momentul în care dorim să accesăm o pagină Web, Browser-ul Web
trimite un Page Request prin intermediul protocolului HTTP/HTTPS
către Serverul Web, și solicită ca pagina Web pe care dorim să o
accesăm, să ne fie afișată. In momentul în care serverul Web
primește solicitarea, acesta trimite un răspuns către noi sub forma
unui Server response!!
Cele mai folosite servere Web: Apache Web Server, IIS, NGINX, Apache
Tomcat, Lighthttpd.
HTTP
Page request
HTTP Serverul Web livrează
Server response la cerere fișiere HTML.
Client running a Web Server running Web Server
Browser Software (IIS, Apache, etc.)
Domain Name – Website Hosting
Def: Domanin name/Numele de domeniu = reprezintă un nume unic
asociat cu o adresă IP fizică în Internet. Serverele de domeniu
(DNS) se ocupă de traducerea numelui de domeniu în adrese IP.
Serverul DNS convertește domeniul solicitat în adresa IP
corespunzătoare, care direcționează solicitarea dumneavoastră către
serverul Web corespunzător.

Website Hosting = presupune găzduirea website-ului dumneavoastră pe


servere Web care sunt deținute și întreținute de companii, contra
cost. Serverele Web mențin o conexiune constantă la Internet astfel
încât site-urile care sunt în hosting, să fie disponibile 24 ore pe
zi.
Acronime folosite în Programare Web – Definiții 2

• Sintaxă= este setul de reguli care definește combinațiile de


simboluri care sunt considerate a fi afirmații sau expresii
structurate corect în limbajul de programare.
• Tag-urile= sunt niște marcaje sau etichete pe care limbajul HTML
le folosește alături de texte pentru a ajuta browser-ul să
afișeze corect conținutul paginii web. Sunt cuprinse mereu între
două < >.
• Start tag/Opening tag= reprezintă o instrucțiune care începe
declararea unui element din cadrul conținutului unei pagini Web.
• End tag/ Closing tag= termină instrucțiunea de declarare a unui
element din cadrul conținutului unei pagini Web.
• OBSERVAȚIE: De obicei tag-urile se pun în pereche, adica start
tag- closed tag, dar există și tag-uri simple, ex: <br/>
Acronime folosite în Programare Web – Definiții 2
• Tag-urile pot fi de două tipuri:
a) tag-uri pereche: de exemplu <html> și </html>; <title> și
</title>; <head> și </head>.
b) tag-uri singulare: de exemplu <hr>, <br>.
• Elementele= sunt definite fiecare de câte un Start tag + End tag.
• Atributele= sunt calități care descriu acel element (cum ar fi
lățimea, înălțimea, culoare, etc).
1. Structura unui fișier HTML – Elemente/Tag-uri de Bază
• Un fișier HTML este format din “elemente” și “tag-uri”
• De principiu, toate documentele HTML încep cu următorul tip de
declarație: <!DOCTYPE HTML> după care ,,opening tag-ul”
<html> și se termină cu “closing tag-ul” </html>.
 Def. Elementele unei pagini HTML sunt definite de un “Opening
tag/Start tag” și un “Closing tag/End tag”

1.
2.
3.

HTML Element
1. Structura unui fișier HTML – Elemente/Tag-uri de Bază
• HTML Element este definit de un “start tag” și un “end tag”.

• Syntax: • <tagname>Content goes here...</tagname>

• Exemplu: • <h1>My First Heading</h1>


• <p>My first paragraph.</p>

• Rulare cod:

• Observație: Elementele HTML pot fi imbricate, acest lucru


înseamnă că elementele pot conține alte elemente.
1. Structura unui fișier HTML – Elemente/Tag-uri de Bază
• HTML Empty Element este definit de tag-ul <br> și definește un
line break adică trece pe linia următoare.

• Exemplu: • <p>This is a <br> paragraph with a line break.</p>

• Rulare cod:

• Observație: Elementele HTML nu sunt sensibile la majuscule și


la minuscule asta înseamnă că tag-ul <P> este același cu <p>
1. Structura unui fișier HTML- Elemente/Tag-uri de Bază
• <html> - cu acest tag începe orice document HTML. Prin folosirea
acestui tag îi spunem browser-ului ca este vorba de un fișier HTML.
• <head> - între aceste tag-uri sunt trecute, pe langa titlul
paginii, diverse informații folositoare pentru browser.
• </head> - acesta este tag-ul de incheiere al tag-ului <head>.
• <title> - titlul paginii Web se va seta cu ajutorul acestei perechi
de tag-uri.
• </title> - este tag-ul de încheiere al tag-ului <title>.
• <body> - odata cu acest tag începe conținutul paginii web. Tot ce
este scris între tag-urile <body> si </body> va fi afișat, de către
browser, pe ecranul monitorului.
• </body> - îi spui browser-ului că s-a terminat conținutul paginii.
Tot ceea ce este scris dupa acest tag nu va mai fi afișat.
• </html> - este tag-ul de încheiere al tag-ului <html>. Codul
oricărui document HTML se termină cu acest tag.
• OBSERVAȚIE: Tag-urile pot fi scrise atat cu litere mari cat si cu
litere mici.
1. Structura unui fișier HTML- Elemente/Tag-uri de Bază
Structura_fișier_HTML.html
<!DOCTYPE HTML>
<html>
<head> • În continure, vom explica
<title>My First HTML Page</title> fiecare linie de cod în
parte pentru a înțelege
</head>
sintaxele folosite in
<body> pagina Web
<p>This is some text...</p> Structura_fișier_HTML.html
</body>
</html>

• Linia 1: <!DOCTYPE HTML> Această declarație definește faptul că


acest document este un HTML5 și îi indică browser-ului faptul că
urmează să primească în execuție un cod HTML.
1. Structura unui fișier HTML- Elemente/Tag-uri de Bază
• Linia 2: <html> este un “opening tag” care se încheie cu un
“closing tab” pe Linia 8: </html>. Aceste două elemente reprezintă
rădăcina unei pagini HTML. Primul se pune la începutul paginii
HTML iar cel de-al doilea la finalul paginii HTML.

• Linia 3: <head> este un “opening tag” care se încheie cu un


“closing tab” pe Linia 5: </head>. Prin intermediul lor, îi spunem
browser-ului titlul paginii, unde sunt situate fișierele CSS etc.
• Linia 4: <title> și </title> pe aceeași linie. Prin intermediul
lor, specificăm browser-ului un titlu pentru pagina HTML, titlul
va fi afișat în bara de titlu a browser-ului
• Linia 6: <body> este un “opening tag” care se încheie cu un
“closing tab” pe Linia 8: </body>. Prin intermediul lor se
definește corpul documentului/conținutul vizibil, precum titluri,
paragrafe, imagini, hyperlinkuri, tabele, liste etc.
1. Structura unui fișier HTML- Elemente/Tag-uri de Bază
• Linia 7: <p> este un “opening tag” care se încheie cu un “closing
tab” </p> pe aceeași linie. Cele 2 elemente definesc un paragraf.
În interiorul celor 2 elemente se poate introduce un paragraf.

<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
2. HTML Header

<!DOCTYPE HTML>
HTML header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
3. HTML Body
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body
Atenție: Doar conținutul cuprins în <body> respectiv </body> va fi
afișat în momentul în care deschideți pagina Web.
4. HTML-Tag-uri <!DOCTYPE HTML>
Opening tag
<html>
<head>
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>

Atenție: Un element HTML este format


întotdeauna de un ,,opening tag,, și un
,,closing tag,, iar in interiorul celor două se
pune conținutul în funcție de specificul
fiecărui element constituit.
4. HTML-Tag-uri
a) <br>: este un tag care face trecerea pe următorul rând, practic
inserează un rând gol în pagina Web. Tag-ul <br> nu are un tag de
închidere.
b) <div>…</div>: denumit și tag de divizare, este utilizat pentru a
diviza conținutul în pagina Web și care acționează ca un
container pentru celelalte elemente.
c) <span>…</span>: este folosit pentru a grupa conținutul cuprins
între cele două tag-uri. Totodată, separă proprietățile aplicate
elementelor HTML cuprinse între aceste două tag-uri, de
proprietățile celorlalte elemente din pagină.
d) <a href="http://www.scoalamilitara.ro/" title="SMCIS">Link către
site-ul WEB al școlii militare</a>: tag-ul <a>…</a> denumit și
Hyperlink Tag, este un tag utilizat pentru a insera un link în
pagina Web, către un URL specificat în atributul “href”.
4. HTML-Tag-uri
e) <img src="logo.gif" alt="logo" />: tag-ul <img……/> este utilizat
pentru a introduce o imagine în pagina Web. Atributul “src” este
utilizat pentru a specifica locația, denumirea și extensia
imaginii. Atributul “alt” este utilizat pentru a afișa un text în
cazul în care din anumite motive, imaginea nu este disponibilă.
f) <b>: stilizează textul cu bold.
g) <center>…</center>: aliniază elementul/elementele din interior,
în centrul paginii Web.
h) <h1> până la <h6>: inserează un heading pe diferite nivele de la
1 până la 6 cu diferite dimensiuni.
i) <i>: stilizează textul cu italic.
j) <img>: este utilizat să insereze o imagine în pagina Web.
k) <link>: tag utilizat pentru a importa un stylesheet extern, care
va stiliza automat pagina Web, în funcție de codul CSS din
fișier.
4. HTML-Tag-uri
l) <nav>: tag utilizat pentru a declara un grup de link-uri pentru
naivigație (meniu pagină Web)
m) <p>…</p>: introduce un paragraf în pagina Web.
n) <script>…</script>: introduce un script JavaScript în pagina Web.
o) <style>…</style>: utilizat pentru a declara stiluri CSS.
p) <u>…</u>: utilizat pentru a sublinia un text.
q) <ol>…</ol>: declară o listă ordonată.
r) <ul>…</ul>: introduce o listă neordonată cu bullet-uri.
s) <li>: declară elementele listei.
t) <!--COMENTARIU-->: introduce un comentariu în codul paginii Web.
Acesta nu va fi vizibil pe pagina Web însă va fi vizibil în codul
sursă al paginii Web (culoare verde, de obicei).
u) <table>…</table>: introduce un tabel în pagina Web.
v) <tr>…</tr>: introduce un rând în tabel.
w) <td>…</td>: introduce datele în celula tabelului.
5. HTML-Tag-uri-Mod de utilizare
Exemplu-taguri.html
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Tags Demo</title>
</head>
<body>
<a href="http://www.telerik.com/" title=
"Telerik site">This is a link.</a>
<br />
<img src="logo.gif" alt="logo" />
<br />
<strong>Bold</strong> and <em>italic</em> text.
</body>
</html>
6. HTML-Atribute
• Def: Atributele pot fi definite ca niște proprietăți ale tag-
urilor. Atributele se inserează numai în interiorul tagului de
început. Dacă un tag nu are nici un atribut, atunci browser-ul va
lua în considerare valorile implicite ale tag-ului respectiv.
• Atribute uzuale:
1. href = atribut cu valoare URL, utilizat pentru a face trimitere
către un document, imagine, etc.
2. background = atribut utilizat pentru a seta un background paginii
web (culoare sau imagine).
3. bgcolor = atribut utilizat pentru a seta culoarea fondului.
4. color = culoarea fontului (cod de culoare/nume culoare).
5. size = marimea fontului (numar de la 1 la 7, sau valoare px).
6. action = adresa scriptului care prelucrează date din cadrul unui
formular (adresă URL). Se aplică pentru <form>.
6. HTML-Atribute
7. method = metoda de prelucrare a datelor formularului (GET sau
POST). Se aplică pentru <form>.
8. src = atribut utilizat pentru a specifica URL-ul unui document.
9. align = atribut utilizat pentru aliniere unui element. Poate lua
valorile left, center, right, justify.
10. width = lățimea unui element (imagine, etc.), poate lua valori
de forma procent din lățimea paginii sau număr de pixeli(px).
11. height = înălțimea unui element (imagine, etc.), valoarea poate
fi de forma procent număr de pixeli.
12. Border = chenarul unui tabel, valori = procent număr de pixeli.
13. cellpadding = spațiu între conținutul celulelor tabelului și
marginile lor, poate lua valori de forma număr pixeli(px).
14. cellspacing = spațiu între celulele tabelului, poate lua valori
de forma număr pixeli(px).
15. style = ATRIBUT FOARTE IMPORTANT, utilizat pentru stilizarea
unui element.
7. HTML-Atribute-Mod de utilizare
1. <img src="img_girl.jpg" width="250" height="250">

2. <p style="color:red;">This is a red paragraph.</p>


7. HTML-Atribute-Mod de utilizare
7.1 Atributul href:

• <a href="https://www.cissb.com">Visit Military School Site</a>

• Tag-ul <a> definește un hyperlink. Atributul href specifică


adresa URL a paginii către care merge linkul.

7.2 Atributul scr:

Exemplu: • <img src="img_girl.jpg">

• Tag-ul <img> este utilizat pentru a insera o imagine într-o


pagină HTML. Atributul src specifică calea către imaginea de
afișat.
7. HTML-Atribute-Mod de utilizare
7.3 Atributul alt:
• Atributul alt necesar tag-ului <img> specifică un text
alternativ pentru o imagine. Dacă imaginea, din anumite motive
(conexiune lentă, etc.) nu poate fi afișată,atunci textul va
fi afișat.

Exemplu: • <img src="img_girl.jpg" alt="Girl with a jacket">

Rulare cod:

7.4 Atributul style:


• Atributul style este utilizat pentru a adăuga stiluri unui
element, ca de exemplu culoarea, fontul, dimensiunea etc.
Exemplu: • <p style="color:red;">This is a red paragraph.</p>

• Rulare cod:

Aplicații ale atributului style


a) Putem seta un Background Color:

• background-color: este o proprietate CSS care definește culoarea


de fundal a unui element HTML.
Exemplu 1:
Rulare cod:
• <body style="background-color:red;">
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
Exemplu 2: • <body>
• <h1 style="background-color:powderblue;">This is a heading</h1>
• <p style="background-color:tomato;">This is a paragraph.</p>
• </body>

Rulare cod:

b) Putem seta Text Color:


• color = Proprietatea a CSS care definește culoarea textului:

Exemplu: • <h1 style="color:blue;">This is a heading</h1>


• <p style="color:red;">This is a paragraph.</p>

Rulare cod:
c) Putem seta Font-ul:
• font-family = definește fontul pentru un element HTML:

Exemplu: • <h1 style="font-family:verdana;">This is a heading</h1>


• <p style="font-family:courier;">This is a paragraph.</p>
Rulare cod:

d) Putem seta Text-Size:


• font-size = Proprietatea a CSS care definește dimensiunea
textului pentru un element HTML:

Exemplu: • <h1 style="font-size:160%;">This is a heading</h1>


• <p style="font-size:300%;">This is a paragraph.</p>

Rulare cod:
e) Putem seta Text Alignment:

• Text-align = Proprietatea a CSS care definește alinierea pe


orizontală a unui text.

Exemplu: • <h1 style="text-align:center;">Centered Heading</h1>


• <p style="text-align:center;">Centered paragraph.</p>

Rulare cod:

7.5 Atributul title:

• Atributul title este utilizat pentru a seta și afișa informații


suplimentare despre un element, valoarea acestuia va fi afișată
în momentul în care cursorul trece pe deasupra textului:
Exemplu: • <p title="I'm a tooltip">This is a paragraph.</p>

Rulare cod:

• Observație: Valoarea atributelor trebuie pusă în ghilimele, ca de


exemplu, atributul title are pusă valoarea în ghilimele
"I'm a tooltip".
8. HTML Colors
• Limbajul de programare HTML
acceptă atât nume de culori,
cât și coduri de culori în ceea
ce privește stilizarea unui
anumit element din pagină.

Tabel 1 culori:
9. HTML Headings
• HTML Headings sunt definite de tag-urile <h1> până la <h6>.
• <h1> definește cel mai important heading iar <h6> pe cel mai
puțin important. Heading-urile sunt importante într-o pagină Web
deoarece prin imtermediul lor, structurăm conținutul paginii.
10. HTML Paragraphs
• HTML Paragraphs sunt definite de tag-urile <p> până la </p>.
• Observație: În exemplul de mai jos, se poate observa faptul ca
între primul și al doilea paragraf există o linie goală, asta
deoarece browser-ul adaugă automat una, pentru a face distincție
între primul și al doilea paragraf.

Exemplu: • <p style="color:#D02090; font-size:44px">This is a


VIOLET paragraph.</p>

Rulare cod:
11. HTML Links
• HTML Links sunt definite de tag-ul <a>.
• Syntax: <a href="https://www.google.com">This is a link</a>
• href= atribut specific unui link, este folosit pentru a furniza
informații adiționale despre elementele din HTML.
Exemplu 1: <a href=“https://www.google.com">
<img src="smiley.gif" alt="Smiley" style="width:42px;height:42px;">
</a>

• Rulare cod:

În momentul în care apăsăm pe


imaginea, vom fi redirecționați
către link-ul pe care l-am
introdus în codul nostru, adică
href=“https://www.google.com”
11. HTML Links
Exemplu 2:
<!DOCTYPE html>
<html>
<body>
<h2>Button as a Links</h2>
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='https://www.google.com'">Tutorial</button>
</body>
</html>

Rulare cod:

• Dacă apăsăm butonul, se


deschide o altă fereastră în
browser în care se va deschide
link-ul introdus in cod.
• Width= lățimea
12. HTML Images imaginii și
• Height= înălțimea
HTML Images sunt definite de tag-ul <img>. imaginii
• Sintaxă generală:

numele imaginii.extensia alt= alternative text,


este un atribut, folosit
src= source file
pentru a specifica un
text alternativ pentru
Rularea codului-> imagine în cazul în care
aceasta nu este
disponibilă
12. HTML Images
• Background Images
• <style>
• body {
• background-image: url('img_girl.jpg');
• }
• </style>

Rularea codului->
13. HTML Horizontal Rules
• Def: Tag-ul <hr> definește o pauză tematică într-o pagină HTML
și este afișată cel mai adesea ca o linie orizontală.

Exemplu: • <h1>This is heading 1</h1>


• <p>This is some text.</p>
• <hr>
• <h2>This is heading 2</h2>
• <p>This is some other text.</p>
• <hr>

• Observație: Tag-ul <hr> este un empty


tag, asta înseamnă că nu trebuie asignată
nicio valoare în momentul în care este
inițializată.
14. HTML Line Breaks
• Def: Prin intermediul tag-ului <br> se trece la o linie nouă (un
line break)

Exemplu: • <p>This is<br>a paragraph<br>with line breaks.</p>

Rulare cod:

15. HTML Comment Tags


• Def: Ca orice alt limbaj de programare, prin intermediul acestui
tag putem adauga comentarii in codul HTML sursă fără ca acesta să
fie vizibil în pagina Web.
Exemplu: • <!-- This is a comment -->
• <p>This is a paragraph.</p>
• <!-- Remember to add more information here -->

Rulare cod:

• Observație: După cum puteți observa, comentariul ,,This is a


comment” nu apare când rulăm codul. La fel și pentru ultimul
comentariu.
15. Text Formatting
• Definiție: Tag-urile de formatare a text-ului, modifică textul ce
se află între opening tag și closing tag.

Exemple: <b> Text here </b> bold


<i> Text here </i> italicized
<u> Text here </u> underlined
<sup> Text here </sup> Samplesuperscript
<sub> Text here </sub> Samplesubscript
<strong> Text here </strong> strong
<em> Text here </em> emphasized
<pre> Text here </pre> Preformatted text
<blockquote> Text here </blockquote> Quoted text block
<del> Text here </del> Deleted text – strike through
• Exemplu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>
16. HTML Frameset (Cadre)
• Def: Framesets (cadre/ferestre) = Cu ajutorul lor putem împărți
fereastra browser-ului în mai multe ferestre distincte.

Exemplu 1: 2 ferestre = 3 pagini HTML, una master și două cu


conținutul celor două ferestre.

• <html>
• <head>
• <title>Cadre</title>
• </head> Rulare cod:
• <FRAMESET COLS="40%,*">
• <FRAME SRC="stanga.html">
• <FRAME SRC="dreapta.html">
• </FRAMESET>
• </html>
16. HTML Frameset (Cadre)
• Observație: Framesets (cadre/ferestre) pot fi imbricate, adică
cadru într-un alt cadru.

Exemplu 2: 4 ferestre = 5 pagini HTML, una master și 4 cu conținutul


celor 4 ferestre.

• <FRAMESET COLS="90,*,2*">
• <FRAME SRC="stanga.html">
• <FRAME SRC="mijloc.html">
Rulare cod:
• <FRAMESET ROWS="50%,50%">
• <FRAME SRC="dreapta1.html">
• <FRAME SRC="dreapta2.html">
• </FRAMESET>
• </FRAMESET>
17. HTML Errors
• Observație: Dacă un browser nu recunoaște un anumit element din
codul sursă, în marea majoritate a cazurilor acesta îl ignoră.
Totodată, dacă există greșeli în ceea ce privește liniile de cod
HTML, CSS sau JavaScript, browser-ul nu va afișa acel element.

Web page Inspect element = Ctrl+Shift+I

Marea majoritate a browser-elor,


permit inspectarea paginilor și
realizarea “depanării codului”
astfel încât să aflăm erorile și
sursa erorii.

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