Noțiuni de Bază În HTML5

3/22/2020 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.
Cum să utilizați HTML5?

Offline aplicații cache
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.
Drag and Drop
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:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
Iar versiunea XHTML 1.0 Transitional DOCTYPE este definită ca:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
În HTML5, declarația DOCTYPE este mult mai ușoară, și arată astfel:
https://web.ceiti.md/lesson.php?id=5 1/7
1 <!DOCTYPE html>
Codificarea caracterelor:
Pentru a afișa documentul HTML, programul ar trebui să selecteze o codificare. Codificarea

caracterelorindică browser-ului ce set de caractere să utilizeze la conversia biților în caractere.
Exemplu: Codificarea caracterelor UTF-8 în HTML 4.01:
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Pentru XHTML:
1 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
Sintaxa de codificare a caracterelor este foarte simplă în HTML 5, și anume:
1 <meta charset="utf-8">
Astfel, cel mai simplu documentul HTML5 ar fi:
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:
1 <script type="text/javascript" src="/scripts/something.js">
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:
1 <script async="async" />
sau
1 <script src="/scripts/something.js" async="async">
Tag-ul link
1 <link rel="stylesheet" type="text/css" href="style.css" />
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:
1 <link rel="stylesheet" href="style.css" />
În HTML5, atributul type este opțional pentru tag-ul link, similar și pentru tag-ul script.
De exemplu:
1 <link rel="stylesheet" href="style.css" />
Elemente noi în HTML5

În HTML5 s-au adăugat unele etichete foarte interesante și utile pentru structurarea aspectului și dezvoltarea
mai ușoară. Aici sunt unele dintre cele mai importante tag-uri:
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">
puteți scrie pur și simplu
1 <header>
Tag-ul nav
Tag-ul nav este folosit pentru a naviga prin meniu. De exemplu, în loc de
1 <div id="nav">
aveți posibilitatea să utilizați
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
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>
Tag-urile u, center, big, applet și acroniym
Eticheta
1 <u></u>
utilizată pentru a determina textul subliniat.
1 <center></center>
ajustă textul și conținutul în centru.
1 <big></big>
folosit pentru a mari textul.
1 <applet></applet>
utilizată pentru a determina applet-ul încorporat. HTML5 suportă tag-ul object în loc.
1 <acronym></acronym>
Exemplu, de cod complet pentru o pagină simplă în HTML5:
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 
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
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>
Cod CSS, în fișierul style.css:
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;
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 {
56 text-align: left;
57 padding: 0 0 0 15;
58 }
59 section#sidebar aside {
60 width: 160px;
61 height: 250px;
63 background-color: #fefefe;
64 }
65 footer#page_footer {
66 clear: both;
67 width: 100%;
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.

Noțiuni de Bază În HTML5

Încărcat de

Informații document

Titlu original

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

Noțiuni de Bază În HTML5

Încărcat de

Drepturi de autor:

Formate disponibile

3/22/2020 Noțiuni de bază în HTML5

Cum să utilizați HTML5?

Drag and Drop

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Iar versiunea XHTML 1.0 Transitional DOCTYPE este definită ca:

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

În HTML5, declarația DOCTYPE este mult mai ușoară, și arată astfel:

Pentru a afișa documentul HTML, programul ar trebui să selecteze o codificare. Codificarea

1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

1 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

Sintaxa de codificare a caracterelor este foarte simplă în HTML 5, și anume:

Astfel, cel mai simplu documentul HTML5 ar fi:

1 <script type="text/javascript" src="/scripts/something.js">

1 <script async="async" />

1 <link rel="stylesheet" type="text/css" href="style.css" />

1 <link rel="stylesheet" href="style.css" />

1 <link rel="stylesheet" href="style.css" />

Elemente noi în HTML5

puteți scrie pur și simplu

aveți posibilitatea să utilizați

Tag-urile u, center, big, applet și acroniym

utilizată pentru a determina textul subliniat.

ajustă textul și conținutul în centru.

folosit pentru a mari textul.

Exemplu, de cod complet pentru o pagină simplă în HTML5:

Cod CSS, în fișierul style.css:

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