HTM5&CSS3

Elementele de poziționare. Tipuri de tipărire.

 HTML5&CSS3
Autorul cursului

Viorel Popa

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Тема

Semantica HTML5.
Tag-uri noi.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Planul cursului

1. Structura paginii în HTML5.

2. Examinarea noilor tag-uri.
3. Tag-uri pentru lucrul cu video și audio.
4. Forme
5. Metatag-uri

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Semantic aspectul paginii

HTML5introduce o serie de elemente semantice noi care definesc blocurile

diferitelor părți ale paginii web. Elementele semantice descriu în mod clar ce
înseamnă acestea atât pentru browser, cât și pentru dezvoltatorul web.
Exemplele de elemente non-semantice sunt etichete
<div> si <span>. Ei nu spun nimic despre natura conținutului atunci când
elementele semantice cum ar fi <form>, <table>, descrie clar ce fel de conținut
conțin.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Elemente semantice

<article></article> - elementul definește conținut independent și autosuficient. Acesta poate fi încorporat în

tag-ul <section>, cum si <section> in <article>.
<aside></aside> - definește un conținut care este departe de conținutul în care se află
<footer></footer> - este destinat să definească "subsolul" unui document sau a unei secțiuni.
<header></header> - se intenționează să se definească un bloc de antet sau un "antet" al unui document sau al
unei secțiuni.
<main></main> - definește conținutul principal al documentului.
<nav></nav> - concepute pentru a grupa linkurile de navigare.
<section></section> - elementul definește o secțiune din document.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Audio
HTML5 oferă oportunități îmbunătățite de a lucra cu conținutul audio.

Elementul <audio> folosit pentru a adăuga conținut audio la o pagină Web.

<audio src=“name.ogg” controls>

<a href=“name.ogg”>Download</a>
</audio>
Întrucât momentan nu există un format audio care să funcționeze în toate browserele. Și pentru a
asigura disponibilitatea conținutului pentru publicul cât mai larg posibil, este recomandat să
includeți mai multe surse de sunet, utilizând elementul <source>.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Video
Inainte de HTML5, pentru a adăuga un videoclip in pagină, a trebuia de utilizat elementul
<object>, care a fost un container pentru obiecte externe, sau se utiiza un plug-in de browser,
exemplu Silverlight sau Flash. Acest lucru a dus la o mulțime de dezordine de cod.

In HTML5 se foloseste tag-ul <video> pentru a adăuga conținut video la o pagină web.

<video src=“name.ogv” controls>

<a href=“name.ogv”>Download</a>
</video>

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Forme
Formular web – un analog al formei de hârtie, chestionar formular sau o
ancheta.

Tag-ul <form> este un container pentru un formular web găzduit pe o

pagină Web. Cu ajutorul formularelor, se realizează posibilitatea
schimbului de date între client și server. Domeniul de aplicare al
formularelor nu se limitează la trimiterea de date către server, utilizând
scripturi, puteți accesa elementele formularului și puteți folosi la discreția
dumneavoastră.
Formularul are următoarele atribute:

action – link către o resursă sau o pagină unde vor fi trimise date.

method –metoda de cerere la server, există două valori de bază: POST si GET (default).
encrypte – indică tipul de date care urmează să fie transferate, implicit este /x-www-form-urlencoded.
autocomplete – controlează completarea automată a formularelor.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Metodele GET si POST

Metoda GET – este una dintre cele mai frecvente și este concepută pentru a primi informațiile necesare și a trimite
date în bara de adrese.
Pair „nume-valoare“, atașată la adresa după semnul de întrebare și sunt separate printr-un ampersand(&).

Metoda POST - trimite datele către server într-o cerere de browser. Acest lucru vă permite să trimiteți mai multe
date decât metoda disponibilă GET deoarece are o limită de 4 Kb. Cantități mari de date sunt folosite în forumuri,
servicii poștale, umplerea bazei de date, la trimiterea fișierelor.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Elementele formei
Tag-ul <input> este unul dintre elementele versatile ale formularului și vă permite să creați elemente de interfață
diferite și să oferiți interacțiunea utilizatorului. în special tag-ul <input> este conceput pentru a crea câmpuri de
text, diverse butoane, casete de selectare și butoane radio.

<input type=“text” name=“inp” value=“some value” />

Tag-ul are următoarele atribute:

name – numele elementului din forma.

value – valoarea, care este transmis la server.
type – Tipul campului.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Elementele formei
type=“password” – vă permite să introduceți parola, întregul conținut al câmpului este schimbat în marcator "punct".

type=“checkbox” – implementează o cutie pătrată cu un marcaj de selectare. Are două stări - marcate și nemarcate.

type=“radio” – element de formă care implementează un întrerupător.

type=“hidden” – element de formular care nu este afișat pentru utilizator este transmis la server când este trimis
formularul.

type=“image” – vă permite să specificați o imagine care va avea un comportament de buton. Când se face click,
aceste formulare sunt trimise la server..

type=“file” – formează elementul pentru crearea unui câmp de selecție și încărcarea unui fișier. Fiecare browser poate
avea un aspect diferit..

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Elementele formei
type=“datetime” – vă permite să setați data și ora, nu toate browserele sunt suportate.

type=“date” – oferă o casetă text cu o alegere de date

type=“time” – Vă permite să setați ora.

type=“month” – alegerea lunii.

type=“week” – vă permite să selectați o săptămână în calendarul drop-down.

type=“datetime-local” – vă permite să setați data și ora în format local.

type=“search” – câmpul de căutare.

https://html5test.com/ https://caniuse.com/

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Elementele formei

type=“number ” – vă permite să introduceți numere, săgeți pentru a comuta valori.

type=“range” – un cursor care poate trage pentru a selecta numere într-un interval predeterminat.

type=“color” – care vă permite să alegeți o culoare din paleta de culori.

type=“email” – un camp pentru intruducerea

adreselor de e-mail.

type=“url” – pentru a introduce adresa URL.

type=“phone” – vă permite să introduceți numere prin telefon. În browserele normale nu funcționează, dacă îl
deschideți, faceți clic pe acest câmp în browser-ul telefonului, apoi se va deschide tastatura numerică

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Elementele formei
Tag-ul <select> - un container care conține o descriere a listei derulante. Fiecare element din listă este descris
intern cu un tag separat. <option>.

Conținutul tag-ului va fi afișat utilizatorilor sub forma unei liste drop-down, dar valoarea atributelor indicate vor fi
trimise la server name si value.

<select name=“select”>
<option
Dacă trebuie să implementați o listă cu o
value=“f1”>Text
alegere multiplă, trebuie să specificați
1</option>
atributul multiple=“multiple”
<option
value=“f2”>Text
2</option>
<option
value=“f3”>Text
3</option>
<option ReignCode -We Build IT http://reigncode.com/
 HTML5&CSS3
Elementele formei
Tag-ul <fieldset> - concepute pentru a grupa elemente de formă. Această grupare facilitează lucrul cu
formularele care conțin o cantitate mare de date.

Tag-ul <legend> - utilizat pentru a crea un antet pentru un grup de elemente de formă, care este definit
folosind tag-ul <fieldset>.

<fieldset name=“select”>
<legend >Gruparea elementelor</ legend >
…
Orice conținut al formei
…
</ fieldset >

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Elementele formei

Tag-ul <textarea> - tag-ul, este proiectat pentru a crea un câmp de intrare multi-linie. Ea are atribute speciale rows
și cols, care indică respectiv înălțimea și lățimea în caractere vizibile.

<textarea cols=“50” rows=“4”> conținutul de câmp </ textarea

>

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Atribute

accept – vă permite să setați un filtru pentru tipurile de fișiere pe care utilizatorul le poate selecta.
accesskey – setează combinația de taste rapide pentru a merge la element.
autocomplet – Activează sau dezactivează completarea automată.
e autofocus – vă permite să setați focalizarea într-un câmp de formă.
checked – setează starea inițială a elementului ca fiind activată.
disabled – blochează accesul și schimbarea elementului.
list – indică o listă de opțiuni pe care o puteți alege în timp ce tastați.
max – setează valoarea superioară pentru câmpurile de introducere a numărului și datei.
maxlength – Numărul maxim de caractere permise într-un câmp.
min – stabilește marginea minimă pentru elementele de intrare pentru date și număr.
multiple – vă permite să încărcați mai multe fișiere.
name – numele câmpului este utilizat pentru a identifica formatorul de formular.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Atribute

pattern – vă permite să setați un șablon pentru introducerea valorilor în câmp.

placeholde – afișează un indiciu în câmp.
r readonly – stabilește modul de „doar pentru citire“, utilizatorul nu poate modifica valoarea câmpului
requierd – . vă permite să setați camp obligator in formă.
size – stabilește lățimea câmpului de text.
src – specifică adresa imaginii câmpului cu imaginea.
step – trepte pentru câmpurile numerice.
type – setează tipul elementului din formă.
value – stabilește valoarea elementului care va fi în cele din urmă trimis la server.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Metatag-uri
Metatag-uri – Acestea sunt etichete HTML care sunt necesare pentru a furniza metadate structurate ale unui
document electronic - o pagină a site-ului. Indicat în antetul paginii(in tag-ul <head>) și sunt utilizate de motoarele
de căutare pentru a determina informațiile de pe paginile de a gestiona aceste date atunci când se clasifică în
căutare.
Metatag-ul <title></title> - Acesta este titlul paginii din browser, care este afișat și în motoarele de căutare.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Metatag-uri
Metatag-ul description –Aceasta este o scurtă descriere a paginii site-ului din browser, care este afișată sub
metatag-ul<title>.
Acesta este luat în considerare de către motoarele de căutare pentru a determina conținutul paginii pentru a utiliza
algoritmi în distribuția de site-uri în rezultatele căutării, pagina este vizibilă pentru vizitatori.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3
Metatag-uri

Metatag-ul keywords – Aceasta este o etichetă pentru specificarea cuvintelor cheie, adică acele cuvinte care
caracterizează conținutul paginii și vor fi cheia acesteia. Acestea pot fi fie cuvinte individuale, fie expresii, dar trebuie să
apară neapărat în textul paginii. Potrivit lui, roboții de căutare determină relevanța unei pagini pentru o anumită
interogare.
Metatag-ul content-type – determină tipul de document și codarea lui.
Metatag-ul content-language – determină limba documentului. Valoarea etichetei meta este folosită de motoarele
de căutare și serverele web.

Metatag-ul refresh – acesta este timpul în secunde după care documentul se va reîncărca automat sau se va trece la o
altă pagină.

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3

Q&A

ReignCode -We Build IT http://reigncode.com/

 HTML5&CSS3

ReignCode -We Build IT http://reigncode.com/