Documente Academic
Documente Profesional
Documente Cultură
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.
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”.
• Rulare cod:
• Rulare cod:
<!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>
Rulare cod:
• Rulare cod:
Rulare cod:
Rulare cod:
c) Putem seta Font-ul:
• font-family = definește fontul pentru un element HTML:
Rulare cod:
e) Putem seta Text Alignment:
Rulare cod:
Rulare cod:
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.
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:
Rulare cod:
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ă.
Rulare cod:
Rulare cod:
• <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.
• <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.