Documente Academic
Documente Profesional
Documente Cultură
Noțiuni de Bază În HTML5
Noțiuni de Bază În HTML5
HTML5 este cea mai recentă versiune de HTML, în scopul de a simplifica dezvoltarea de aplicatii web.
Sintaxa HTML5 este mult mai ușoară în comparație cu HTML4, și oferă multe caracteristici noi. Acest articol
oferă o introducere în HTML5.
Aplicațiile HTML5 pot fi pornite pentru a rula offline. HTML5 oferă funcția de stocare offline, numit un cache
al cererii pentru stocarea de fișiere. Deci, dacă utilizatorul este offline, browser-ul încă mai are acces la
fișierele necesare. Acesta poate fi HTML, CSS, Javascript, sau orice alte resurse necesare pentru a vizualiza
pagina de web.
HTML5 oferă o funcție incorporată Drag and Drop, care permite dezvoltarea de aplicații interactive. Cu Drag
& Drop aveți posibilitatea să mutați orice element în locul potrivit.
Geolocation
Geolocation API în HTML5, permite să partajați locația dvs. cu site-uri de încredere. Confidențialitatea este
importantă în funcția de geolocalizare. Browserele nu au nevoie să trimită informații despre locație la site-uri
Web, fără permisiunea expresă a utilizatorului. De exemplu, dacă un utilizator accesează o pagină web, în
care, de asemenea,este prezentă funcția de geolocalizare folosind browser-ul Firefox. Browser-ul va cere
permisiunea, dacă utilizatorul dorește să împărtășească locația lui. Dacă utilizatorul consimte, Firefox va
aduna informații despre punctele de acces fără fir în apropiere și adresa IP a computerului vizitatorilor și va
trimite aceste informații în Google Location Services, care este un serviciu de geolocalizare Firefox implicit.
Audio și video
În prezent, există facilități HTML necesare pentru punerea în aplicare a fișierelor multimedia. De aceea,
fișierele media se includ în HTML folosind diferite plugin-uri . De exemplu, Flash este utilizat pe scară largă
pentru a încorpora video și fișiere audio. Cu toate acestea, acest lucru poate fi foarte ușor de făcut în HTML5
cu ajutorul elementelor audio și video, fără utilizarea de plugin-uri.
Formulare de introducere
HTML5 introduce mai multe elemente noi de intrare, cum ar fi pop-up calendare, selectoare de culori și multe
altele. Cu aceste funcții de intrare se poate crea o forma foarte eficienta, cu un control mai bun al intrării și
verificării.
Sintaxa simplificată
Doctype:
Declarația DOCTYPE este primul lucru, ce trebuie de făcut într-un document HTML. Ea indică browser-ui
web versiunea limbajui de marcare a paginii.
Exemplu: Versiunea HTML 4.01 Transitional DOCTYPE este definit ca:
https://web.ceiti.md/lesson.php?id=5 1/7
3/22/2020 Noțiuni de bază în HTML5
1 <!DOCTYPE html>
Codificarea caracterelor:
Pentru XHTML:
1 <meta charset="utf-8">
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Exemplu de document</title>
6 </head>
7 <body>
8 <b>Hello, World</b>
9 </body>
10 </html>
Tag-ul script
Tag-ul script este folosit pentru a defini partea de client, cum ar fi JavaScript. În HTML 4 este necesar de
folosit atributul type, dar nu este necesar în HTML5.
De exemplu, în HTML4, tag-ul script este folosit astfel:
Iar în HTML 5:
1 <script src="/scripts/something.js">
În tag-ul script în HTML5 este introdus un nou atribut opțional «async», care indică browser-ului să execute
script-ul asincron cu restul paginii, astfel încât script-ul va fi executat până când pagina încă se încarcă.
Acest lucru se scrie astfel:
sau
https://web.ceiti.md/lesson.php?id=5 2/7
3/22/2020 Noțiuni de bază în HTML5
1 <script src="/scripts/something.js" async="async">
Tag-ul link
Tag-ul link defineste o relație dintre documente și resursele externe. Această etichetă este frecvent utilizată
pentru a include fișiere CSS.
De exemplu:
În HTML5, atributul type este opțional pentru tag-ul link, similar și pentru tag-ul script.
De exemplu:
Tag-ul header
Tag-ul header conține titlul paginii web, care este, de obicei, în partea de sus a paginii care conține logo-ul și
alte informații, cum ar fi un slogan, și meniuri, etc. În loc de a folosi:
1 <div id="header">
1 <header>
Tag-ul nav
Tag-ul nav este folosit pentru a naviga prin meniu. De exemplu, în loc de
1 <div id="nav">
1 <nav>
pentru navigare.
Tag-ul arcticle
Tag-ul arcticle prezintă conținutul independent și separate. Un exemplu de utilizare a tag-ul poate fi un post
pe blog, articol de știri, postare pe forum, comentariul utilizatorului, etc.
Tag-ul section
https://web.ceiti.md/lesson.php?id=5 3/7
3/22/2020 Noțiuni de bază în HTML5
Tag-ul section este folosit pentru a separa diferite secțiuni ale paginii. Tag-ul grupează conținutul care, de
obicei, vine după antet sau înaintea subsolului. Dacă este necesar, secțiunile pot fi imbricate între ele.
Tag-ul aside
Tag-ul aside definește o secțiunea de pagină cu conținut care este tangențial legat de conținutul din jurul lui.
Tag-ul poate fi folosit pentru panourile laterale sau orice alt conținut care poate fi analizat separat de
conținutul principal al paginii.
Tag-ul figure
Tag-ul figure este folosit pentru comentarii la ilustrații, diagrame, fotografii, și la listele de cod, etc.Tag-
ul figcaption este utilizat ca titlu pentru tag-ul figure.
Tag-ul footer
Este folosit pentru a reprezenta secțiunea subsol și este, de obicei, situat în partea de jos a
paginii. Footer conține de obicei informații precum numele autorului, privind drepturile de autor, link-uri către
termenii de utilizare și politica de confidențialitate, etc. Informațiile de contact în footer trebuie să fie scrisă în
tag-uladdress.
Elementele exluse
În afară de cele noi, există unele elemente care nu mai sunt acceptate în HTML5. Aici sunt unele dintre
elementele șterse:
1 <frameset>
2 <frame>
3 <noframes>
După cum a-ți văzut, elemente cum ar fi cadrele - frame, frameset și noframes au fost eliminate din
HTML5.
Tag-ul Font
Elementul font se utiliza pentru a determina fontul, dimensiunea și culoarea textului.
Tag-ul strike
Elementul strike a fost necesar pentru a determina textul tăiat cu o linie. În schimb, utilizați acum
1 <del>
Eticheta
1 <u></u>
1 <center></center>
1 <big></big>
https://web.ceiti.md/lesson.php?id=5 4/7
3/22/2020 Noțiuni de bază în HTML5
1 <applet></applet>
utilizată pentru a determina applet-ul încorporat. HTML5 suportă tag-ul object în loc.
1 <acronym></acronym>
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Web Development Cursuri si Tutoriale</title>
6 <meta name="description" content="Examplu document in HTML5, template, cursuri si tutoriale" />
7 <meta name="keywords" content="html5, tutoriale html5, cursuri" />
8 <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!
9 [endif]-->
10 <link rel="stylesheet" type="text/css" href="style.css" />
11 </head>
12 <body>
13
14 <header id="page_header">
15 <h1>Web Development Cursuri și Tutoriale</h1>
16 <nav>
17 <ul>
18 <li><a href="http://ciobanu.cich.md/" title="Principala">Home</a></li>
19 <li><a href="http://ciobanu.cich.md/lectii.php" title="Lectii">Lecții</a></li>
20 <li><a href="http://ciobanu.cich.md/lucrari.php" title="Lucrari">Lucrări</a></li>
21 <li><a href="http://ciobanu.cich.md/teste.php" title="Teste">Teste</a></li>
22 <li><a href="http://ciobanu.cich.md/referinte.php" title="Referinte">Referințe</a></li>
23 <li><a href="http://ciobanu.cich.md/descarca.php" title="Descarca">Descarcă</a></li>
24 <li><a href="http://ciobanu.cich.md/contacte.php" title="Contacte">Contacte</a></li>
25
26 </ul>
27 </nav>
28 </header>
29
30 <section id="posts">
31 <header id="posts_header">
32 <h2>Tutoriale HTML5</h2>
33 </header>
34 <article class="post">
35 <header>
36 <h3>Învață rapid HTML5</h3>
37 </header>
38 <div class="ctext">
39 Invata despre noile caracteristici din HTML5.<br />
40 Tag-uri noi, si elemente pentru structura.
41 </div>
42 <aside class="post_baner">Aici poate fi un banner</aside>
43 <p>
44 Noile caracteristici din <b>HTML5</b> sunt bazate pe HTML, CSS, DOM, și JavaScript; si reduc
45 necesitatea plugin-urilor externe (precum Flash).<br />
46 Multe alte noi caracteristici HTML5 sunt centrate pe crearea unei mai bune platforme pentru
47 aplicatiile web, <a href="http://www.w3schools.com/html/html5_intro.asp" title="HTML5">Cititi
48 mai mult</a> ...
49 </p>
50 </article>
51 <article class="post">
52 <header>
53 <h3>Elemente si attribute noi pentru formular in HTML5</h3>
54 </header>
55 <div class="ctext">
56 Formularele HTML sunt folosite in general ca sa transfere date adaugate de utilizator la un
57 script de pe server sau JavaScript, ca sa fie procesate de un limbaj de programare.
58 </div>
59 <p>
60 HTML5 adauga mai multe tipuri de casute input noi, pentru formular (datetime, datetime-
61 local, date, month, week, time, number, range, email, url, search, and color),
62
https://web.ceiti.md/lesson.php?id=5 5/7
3/22/2020 Noțiuni de bază în HTML5
63 <ahref="http://ciobanu.cich.md/lectii.php" title="Elemente de formular noi">Cititi mai mult</a>
64 ...
65 </p>
66 </article>
67 <footer id="post_footer">
68 <p>Mai multe lectii si tutoriale HTML: <a href="http://www.w3schools.com" title="Lectii si
69 tutoriale">Lectii și tutoriale</a>.</p>
70 </footer>
71 </section>
72
73 <section id="sidebar">
74 <nav>
75 <ul>
76 <li><a href="http://ciobanu.cich.md/lectii_view.php?id=1" title="Initiere in HTML">Initiere
77 in HTML</a></li>
78 <li><a href="http://ciobanu.cich.md/lectii_view.php?id=2" title="Stiluri CSS">Stiluri CSS</a>
79 </li>
<li><a href="http://ciobanu.cich.md/lectii_view.php?id=6" title="Initiere in PHP">Initiere in
PHP</a></li>
<li><a href="http://ciobanu.cich.md/lectii_view.php?id=4" title="Macromedia
Dreamweaver">Macromedia Dreamweaver</a></li>
</ul>
</nav>
<aside class="sidebar_baner">Banner in sidebar</aside>
</section>
<footer id="page_footer">
<p>De la: <a href="http://ciobanu.cich.md/" title="Lectii WEB">http://ciobanu.cich.md/</a></p>
</footer>
</body>
</html>
1 body {
2 width: 99%;
3 margin: 2px auto;
4 font-family: Arial, "MS Trebuchet", sans-serif;
5 text-align: center;
6 }
7 header, footer, section, aside, nav, article { display: block; }
8
9 header#page_header {
10 width: 100%;
11 margin: 4px auto;
12 border: 2px solid blue;
13 }
14 header#page_header nav ul {
15 list-style: none;
16 margin: 0;
17 padding: 0;
18 }
19 #page_header nav ul li {
20 display:inline;
21 margin: 0 20px 0 0;
22 padding: 1px;
23 }
24 section#posts {
25 float: right;
26 width: 79%;
27 background-color: #f1f2fe;
28 border: 1px solid yellow;
29 }
30 section#posts header#posts_header {
31 background-color: #abcdef;
32 border: 1px solid green;
33 }
34 article.post {
35 margin:10px;
36 background-color: yellow;
37 text-align: left;
38 }
39 article.post aside {
40 float: right;
41 margin-top: -58px;
42 width: 250px;
43 height: 120px;
https://web.ceiti.md/lesson.php?id=5 6/7
3/22/2020 Noțiuni de bază în HTML5
44 background-color: #fefefe;
45 }
46 article.post p { clear: right;}
47 section#sidebar {
48 float: left;
49 width: 18%;
50 background-color: #d7d8fe;
51 border: 1px solid green;
52 padding:5px;
53 }
54 section#sidebar nav ul {
55 margin: 3px auto;
56 text-align: left;
57 padding: 0 0 0 15;
58 }
59 section#sidebar aside {
60 width: 160px;
61 height: 250px;
62 margin: 10px auto;
63 background-color: #fefefe;
64 }
65 footer#page_footer {
66 clear: both;
67 width: 100%;
68 margin: 4px auto;
69 border: 2px solid blue;
70 }
Rezumând, putem spune cu siguranță că viitorul este, în principiu, în orice caz,este pentru HTML5. Având în
vedere faptul că Apple și deja Microsoft au abandonat utilizarea Flash-ilor, este logic de înțeles
că HTML5 este cel mai bun, pentru ziua de azi.
https://web.ceiti.md/lesson.php?id=5 7/7