C1 HTML Basics Part1

Centrul de Instruire pentru
Tehnologia Informației și
Apărare Cibernetică
CURS 1-Bazele HTML
Part 1: HTML Structure, Text, Images
Întocmit:
Slt. ROMANIUC Alexandru-Gabriel
romaniuc_alexandrugabriel@yahoo.com
Ce este o pagină Web?
• HTML - Hypertext Markup Language (este limbajul standard pentru
fișierele care urmează să fie afișate într-un browser
• Web pages – sunt fișiere text care conțin cod HTML
Crearea paginilor HTML

 Un fișier HTML are extensia .htm sau .html și poate fi creat cu
editoare de text: NotePad, NotePad ++ etc.
 Sau editoare de HTML (WYSIWYG Editors):Microsoft FrontPage,
Macromedia Dreamweaver, Netscape, Composer, Microsoft Word,
Visual Studio
Rolul unui Browser Web

• Def: Scopul unui browser web (Chrome, Edge, Firefox, Safari) este să citească
documente HTML și să le afișeze corect.
Cum funcționează o pagină Web? – Definiții
• 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 dvs.
• Browserul= vă conectează computerul la server printr-o adresă IP.
Adresa IP este obținută prin traducerea numelui de domeniu. (Nu vă
faceți griji, această parte este realizată automat de browserul
dvs., astfel încât să nu trebuie să căutați singur adresele IP.)
• Calculatoarele conectate la web se numesc clienți și servere.
• Clients= sunt dispozitivele conectate la internet ale utilizatorului web (de
exemplu, computerul conectat la Wi-Fi sau telefonul conectat la rețeaua dvs.
mobilă) și software-ul de accesare web disponibil (de obicei un browser
web precum Firefox sau Chrome).
• Serverele: sunt computere 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.
HTTP
Page request
HTTP
Server response
Client running a Web Server running Web Server

Browser Software (IIS, Apache, etc.)
În momentul în care dorim să accesăm o pagină Web, Browser-ul Web trimite un Page Request
prin intermediul protocolului HTTP 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.
Observații organizatorice
• Atenție: pentru un lucru mai eficient cu limbajul de programare
HTML, în acest curs vom folosi următoarele noțiuni absolut
necesare:
• Syntax= 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 cuprinse mereu între două < > și sunt formate
din elemente și atribute.
• Start tag/Opening tag= reprezintă o instrucțiuni care începe o
secțiuni a conținutului unei pagini Web.
• End tag/ Closing tag= termină acea instrucțiune.
• OBSERVAȚIE: De obicei tag-urile se pun în pereche, adica start
tag- closed tag, dar există și tag-uri simple, ex: <br/>
• Element= este un obiect dintr-o pagină (cum ar fi un heading,
un paragraph sau o imagine).
• Atributele= sunt calități care descriu acel element (cum ar fi
lățimea și înălțimea, etc).
1. Structura unui fișier HTML
• 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. Structura unui fișier HTML- Prima voastră pagină HTML
test.html
<!DOCTYPE HTML> • În primă faza, propunem
<html> să analizăm o pagina Web
<head> foarte simplă.
<title>My First HTML Page</title> • În continure, vom explica
</head> fiecare linie de cod în
<body> parte pentru a înțelege
<p>This is some text...</p> sintaxele folosite in
</body> pagina Web test.html
</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
• 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.
• Linia 7: <p> este un “opening tag” care se încheie cu un “closing
tab” </p> pe ceeaș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>
</head>
<body>
</body>
</html>
3. HTML Body
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</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-Tags <!DOCTYPE HTML>
<html> Opening tag
<head>
</head>
<body> Closing tag
</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.Exemple de Tag-uri
• Hyperlink Tags
<a href="http://www.scoalamilitara.ro/"
title=“SMCIS">Link to SMCIS Web site</a>
• Image Tags
<img src="logo.gif" alt="logo" />
• Text formatting tags

This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more emphasized.</strong>
4.Exemple de Tag-uri
some-tags.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>
5. 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.
6. 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.
7. HTML Links
• HTML Links sunt definite de tag-ul <a>.
• Syntax: <a href="https://www.w3schools.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="HTML tutorial" style="width:42px;height:42px;">
</a>
• În momentul în care apăsăm pe
• Rulare cod: imaginea în formă de față
zâmbitoare, vom fi redirecționați
către link-ul pe care l-am
introdus in codul nostru, adică
href=“https://www.google.com”
<!DOCTYPE html>
• Exemplu 2: <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'">HTML Tutorial</button>
</body>
</html>
• Dacă apăsăm butonul, se deschide

• Rulare cod: link-ul introdus in cod.
• Width= lățimea
8. HTML Images imaginii și
• Height= înălțimea
HTML Images sunt definite de tag-ul <img>.
imaginii sunt atribute
• Syntax:
• numele imaginii.extensia
• alt= alternative
text, este un
• scr= source file atribut, folosit
pentru a specifica
un text alternativ
pentru imagine în
• Rularea codului-> cazul în care
aceasta nu este
disponibilă
Background Image
• <style>
• body {
• background-image: url('img_girl.jpg');
• }
• </style>
• Rularea codului->
9. HTML Elements
• 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.
10. Empty HTML Elements
• HTML Element Empty este definit de tag-ul <br> și definește un
line break adică se trece pe linia următoare.
• Exemplu: • <p>This is a <br> paragraph with a line break.</p>
• Rulare cod:
• Observație: Elementele HTML nu este sensibil la majuscule și

la minuscule asta înseamnă că tag-ul <P> este același cu <p>
10. HTML Attributes
• Def: Atributele HTML oferă informații suplimentare despre
elementele HTML.
• Toate elementele HTML pot avea atribute
• Atributele oferă informații suplimentare despre elemente
• Atributele apar de obicei în perechi name/value precum:
name="value"
• 10.1 Atributul href:
• <a href="https://www.w3schools.com">Visit W3Schools</a>
• Tag-ul <a> definește un hyperlink. Atributul href specifică

adresa URL a paginii către care merge linkul.
• 10.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.
• 10.3 Atributul alt:

• Exemplu: • <img src="img_girl.jpg" alt="Girl with a jacket">
• Atributul alt necesar pentru tag-ul <img> specifică un text

alternativ pentru o imagine, dacă imaginea din anumite motive
(conexiune lentă, etc.) nu poate fi afișată. În imaginea de mai
jos veți vedea ce se întâmplă dacă o imagine nu poate fi afișată:
• 10.4 Atributul style:
• Atributul style este utilizat pentru a adăuga stiluri unui
element, cum ar fi culoarea, fontul, dimensiunea și multe altele.
• Exemplu: • <p style="color:red;">This is a red paragraph.</p>
• Rulare cod:
Ce altceva putem face cu atributul 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:
• <body style="background-color:red;"> • Rulare cod:
• <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

pentru un anumit element HTML:
• <h1 style="color:blue;">This is a heading</h1>

• Exemplu:
• <p style="color:red;">This is a paragraph.</p>
• Rulare cod:
c) Putem seta Font-ul:
• font-family = Proprietatea a CSS care 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:
• 10.5 Atributul title:
• Atributul title este utilizat pentru a defini și afișa informații

suplimentare despre un element, valoarea acestuia va fi afișată în
momentul în care cursorul trece pe deasupra textului. Vezi
exemplul pe pagina următoare:
• Exemplu: • <p title="I'm a tooltip">This is a paragraph.</p>
• Observație: Valoarea atributelor trebuie pusă în ghilimele, ca

de exemplu, atributul title are pusă valoarea în ghilimele
"I'm a tooltip"
11. 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ă.
12. 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:
13. 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: • 
• <p>This is a paragraph.</p>
• 
• 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.
14. Text Formatting
• Definiție: Tag-urile de formatare a text-ului, modifică textul ce
se află între opening tag și closing tag.
• Exemplu: • <b>Hello</b> face cuvântul “Hello” să fie bold
<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>

C1 HTML Basics Part1

Î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

C1 HTML Basics Part1

Încărcat de

Drepturi de autor:

Formate disponibile

Centrul de Instruire pentru

Crearea paginilor HTML

Rolul unui Browser Web

Client running a Web Server running Web Server

• HTML este format din “elemente” și “tag-uri”

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

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

Atenție: Un element HTML este format

• Text formatting tags

• Dacă apăsăm butonul, se deschide

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

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

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

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

• Observație: Elementele HTML nu este sensibil la majuscule și

• 10.1 Atributul href:

• <a href="https://www.w3schools.com">Visit W3Schools</a>

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

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

• 10.3 Atributul alt:

• Atributul alt necesar pentru tag-ul <img> specifică un text

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

Ce altceva putem face cu atributul style?

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

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

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

c) Putem seta Font-ul:

• font-family = Proprietatea a CSS care definește fontul pentru

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

d) Putem seta Text-Size:

• font-size = Proprietatea a CSS care definește dimensiunea

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

e) Putem seta Text Alignment:

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

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

• Exemplu: • <p title="I'm a tooltip">This is a paragraph.</p>

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

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

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

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

13. HTML Comment Tags

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

• Exemplu: • <b>Hello</b> face cuvântul “Hello” să fie bold

<b> Text here </b> bold

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

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