Tutorial Html

Inainte >>

Introducere

Html (Hypertext Markup Language), este limbajul folosit pentru crearea de pagini web. Este alcătuit dintr-un set de instrucţiuni, adăugate prin tag-uri. Versiunea curentă este Html5.

Pentru început, aveţi nevoie de un simplu editor de text , cum ar fi Notepad sau Textpad. Recomand Textpad pentru că are mai multe facilităti.


Html editor

După tastarea codului html si salvarea paginii cu extensia .html, se poate vedea rezultatul in browser, apăsand > View şi apoi > In Web Browser.
Un browser este o aplicaţie folosită pentru afişarea paginilor web (fişiere cu extensia: html, php, asp, jsp). Cele mai cunoscute browsere sunt: Google Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari.


Html editor

Structura minimală a unei pagini web este următoarea:


<!DOCTYPE html>
<html dir="ltr" lang="ro">
<head>
<meta charset="UTF-8">
<title>Titlul paginii web</title>
</head>
<body>
Conţinutul paginii: imagini, text, ...
</body>
</html>


Html minimal

O pagină html incepe cu un antet ce conţine informaţii despre versiunea de Html (in cazul nostru, Html5):

<!DOCTYPE html>

O altă instrucţiune care urmează după antet se referă la direcţia de afişare a textului (de la stânga la dreapta sau de la dreapta la stânga) şi la limba folosită. Practic, pagina html începe cu instrucţiunea <html> şi se termină cu </html>:

<html dir="ltr" lang="ro">

Secţiunea următoare, care începe cu <head> şi se termină cu </head>, este un container pentru elementele pe care le conţine. În browser nu se afişează nimic din secţiunea <head>.
Utilizând instrucţiunea:<meta charset="UTF-8">, browserul va putea afişa aproape orice caracter sau simbol din lume. Html5 foloseşte numai UTF-8 (Unicode).
Acest sistem de codare este urmaşul codului ASCII, care avea 128 caractere şi a codului ISO-8859-1 de 256 caractere (utilizat de Html4).

Secţiunea următoare, care începe cu <body> şi se termină cu </body>, reprezintă corpul paginii. Elementele din această secţiune: imagini, text, media, vor fi afişate in browser.


Secţiunea <head>

În această secţiune se plasează elementele: <title>, <meta>, <style>, <link>, <script>, <base>.
Titlul paginii se plasează între tag-urile <title> si </title>, aşa cum am arătat mai sus.
Între tag-urile <meta> si </meta> se găsesc meta date sau meta elemente care deţin informaţii despre descrierea paginii, cuvinte de căutare, autor, viewport sau alte date, folosite de roboţii de căutare sau de browsere.
Un exemplu de instrucţiuni <meta> este prezentat mai jos:


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="JWeb - tutoriale gratuite">
<meta name="keywords" content="Web design, limbaje de programare, microcontrollere">
<meta name="author" content="Dan Cojocariu">
<meta name="robots" content="index, all">
</head>


Elementul <meta> viewport dă indicaţii browserului despre cum să afişeze viewport-ul (partea vizibilă a paginii web) şi să o scaleze astfel incât pagina să fie afişată corect în browser, indiferent de dimensiunile şi rezoluţia dispozitivului pe care se vizualizează: pc, laptop, tabletă, telefon mobil.
Elementele <meta> description, keywords, author, robots, sunt folosite de roboţii de căutare pentru indexarea paginilor.
Stilul afişarii componentelor paginii este descris in tag-ul <style> din sectiunea <head>. Rezultatul stilizarii elementelor se observă în secţiunea <body>, în figura următoare:


Stil Html

În tag-ul <link> din secţiunea <head>, nu este vorba despre link-uri cu alte pagini web, ci despre link-uri spre unele fişiere pe care browserul le va folosi în afişarea corectă a paginii web.
Exemplu de elemente <link>:


<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.png" type="image/x-icon">


În primul caz, stilul elementelor paginii web este descris într-un fişier extern denumit style.css.
În cazul al doilea, se crează o legatură către o imagine de mici dimensiuni intitulată favicon (favorite icon), care poate avea extensia ico, png sau gif şi care va fi afişată în stânga titlului paginii, ca in figura următoare:


Favicon Html

În tag-ul <script> din secţiunea <head>, se indică locaţia unui javascript extern care va fi folosit de browser în afişarea paginii web.
În cazul nostru se face apel la fişierul javascript numit jquery.js. Codul corect este:


<script src="jquery.js"></script>


În tag-ul <base> din secţiunea <head>, se va specifica un URL (locator universal de resurse), care va fi ţinta oricărui link din pagina către o imagine.
Deci, dacă imaginile din site se găsesc în calea: https://www.jweb.ro/img/ şi dacă vom specifica:


<base href="https://www.jweb.ro/img/" target="_blank">


atunci la afişarea imaginii "test.jpg", nu vom scrie:


<img src="https://www.jweb.ro/img/test.jpg">


ci numai:


<img src="test.jpg">:


Secţiunea <body>

Reprezintă corpul paginii web şi toate elementele conţinute se afişează în browser.


Fundalul paginii web (background):

Background-ul paginii web reprezintă fundalul paginii. El poate fi o culoare sau o imagine. Pentru o culoare vom avea:


Bg color Html

Pentru o imagine de fundal, vom avea:


<body background="photo.jpg">

Însă, Html5 recomandă folosirea stilului Css pentru inserarea imaginii de fundal, astfel:


Bg imagine Html

Elementul <hr>:

<hr> reprezintă o bară orizontală care desparte anumite secţiuni din pagina web. În secţiunea Css vom vedea cum se poate modifica stilul acesteia: (lungime, grosime, culoare, imagine). O simplă bară <hr> se introduce astfel:


Hr Html

Elementele <h1>, ..., <h6> (headings):

Aceste elemente reprezintă nişte mărimi predefinite a textului (fonturilor). Acestea sunt:


h1 are 32px (2em)
h2 are 24px (1.5em)
h3 are 20.8px (1.3em)
h4 are 16px (1em)
h5 are 12.8px (0.8em)
h6 are 11.2px (0.7em)


Headings Html

Însă şi acestor elemente li se poate aplica un stil Css, ca să devină mai elegante. Spre exemplu:


Headings Html

Elementul paragraf: <p>

Este cuprins între tag-urile <p> si </p> şi defineşte o noua linie de text. Şi paragraful poate fi modificat folosind stiluri:


Paragraf Html

Elementul font: <font>

Descrie caracteristicile textului folosit: familia fontului, mărimea şi culoarea.


Font Html

De asemenea, un text mai poate fi formatat, folosind şi alte tag-uri, astfel:


Formatare Html

Se poate folosi un bloc compact de text pentru a insera un citat, folosind instrucţiunea <blockquote>, astfel:


Blockquote Html

Tot pentru formatarea textului se foloseşte si tag-up <pre>. Acesta se utilizează pentru ca textul afişat in browser să fie identic cu cel cuprins între tag-urile <pre> si </pre> inclusiv spaţiile libere şi liniile de text libere:


Pre tag Html

În Html, în mod normal, un spaţiu liber se introduce folosind caracterele &nbsp; , iar pentru trecerea pe un rând nou se foloseşte tag-ul <br>:


Br tag Html

În codul sursă al paginii web, pot fi introduse şi comentarii, care ajută la înţelegerea mai bună a codului sau la delimitarea unor blocuri de cod. Aceste comentarii nu sunt afişate in browser şi ele sunt cuprinse între caracterele: <!-- si -->:


Comentariu Html

Link-uri Html

Link-urile sunt folosite pentru a naviga de la o pagină web la alta. Ele folosesc tag-ul <a>, astfel:


<a href="https://www.jweb.ro/test.html">Text link</a>


Adresa de după href, reprezintă adresa paginii care va fi afişata când este accesat link-ul. Fiecare link are un atribut ţintă (target), care transmite browserului cum să afişeze pagina cerută.
Acest atribut poate fi:
_blank - când pagina accesată prin link se afişează intr-o fereastră nouă;
_self - când pagina accesată prin link se afişează in aceeaşi fereastră;
_parent - când pagina accesată prin link se afişează in cadrul părintelui;
_top - când pagina accesată prin link se afişează în tot corpul ferestrei;
framename - când pagina accesată prin link se afişează într-un cadru specificat: <iframe>
De asemenea, un link poate fi accesat printr-o imagine.
Textul vizibil pentru un link este in mod normal subliniat, dar aplicând un stil, se pot modifica uşor caracteristicile acestuia.


Link html

Utilizarea imaginilor în Html

Inserarea unei imagini, se face folosind instructiunea:


<img src="test.jpg">


Pentru a stabili dimensiunile imaginii, setăm lăţimea şi înălţimea astfel:


<img src="test.jpg" width="280px" height="130px">


Pentru a stabili poziţionarea imaginii faţă de marginea de sus şi din stânga, vom seta vspace si hspace:


Imagini html

La orice imagine inserată, trebuie setată o scurtă descriere in cadrul elementului alt, care va fi afişată în cazul în care imaginea nu există sau nu este gasită, şi o etichetă în cadrul elementului title, care va fi afişată când mouse-ul se suprapune peste imagine (tooltip).


Elementul formă în Html

Acest element, definit de tag-urile <form> si </form>, găzduieşte elementele de tip <input>, care sunt intrări de la utilizator. Acestea pot fi: câmpuri de text, arii de text, butoane radio, căsuţe de validare, butoane:


Forme html

Elementele acestor forme, dupa completare, vor fi trimise către serverul web. Cele mai importante atribute ale formelor sunt: acţiunea, ţinta şi metoda.
Acţiunea indică procesul care se va executa la trimiterea formei (formularului) la serverul web.
Ţinta va indica în ce tip de fereastră să fie prezentat rezultatul execuţiei procesului.
Metoda, care poate fi get (cere date de la server) sau post (trimite date spre server):


Formulare html

În cazul nostru, la trimiterea formularului, prin apăsarea butonului formei, se va executa fişierul test.php de pe serverul web, iar rezultatul va fi prezentat într-o fereastra noua.


Liste html

Listele sunt definite de tag-urile <ul> si <li> astfel:


Liste html

Liste de selecţie html

Acestea folosesc opţiunea <select> pentru a selecta un articol dintr-o listă derulantă:


Liste derulante html

Elementul <iframe>

Este folosit pentru a afişa o pagina web în interiorul altei pagini web, astfel:


<iframe src="test.html" width="200" height="100"></iframe>


Elementul iframe

Elementul <frame>

O pagină web poate fi imparţită in două sau mai multe cadre (frame):


Elementul frame

Culorile in html

În html, culorile se definesc prin: numele culorii, culoare reprezentată prin RGB sau culoare reprezentată în hexazecimal (HEX). Se mai pot folosi şi culori HSL, culori RGBA sau culori HSLA.
Dacă folosim numele culorilor, acestea vor fi: red, green, yellow, blue, brown,...
Culorile RGB (red, green, blue), definesc intensitatea celor 3 nuanţe între 0 si 255. Culoarea albă este: rgb(255,255,255) şi culoarea neagră este: rgb(0,0,0).
Culorile HEX, reprezintă valorile hexazecimale: #rrggbb (ex. #0000FF este afişată ca albastru).
Culorile HSL (hue, saturation, lightness), utilizează valorile în procente (ex. hsl(0, 80%, 45%)).
Culorile RGBA (red, green, blue, alpha). Alpha este utilizat pentru transparenţă şi are valoarea intre 0.0 şi 1.0.
Culorile HSLA (hue, saturation, lightness, alpha). Exemplu: hsla(7, 5%, 48%, 0.3).


Culori html

Tabele in html

Se utilizează tag-ul <table>
Elementul <tr> se foloseşte pentru linii, elementul <th> pentru coloane şi elementul <td> pentru datele din tabel.


Tabele html

Blocuri html

Blocurile html includ elementele <div> şi <span>.
Elementul <div> este folosit ca un container pentru alte elemente şi incepe o nouă linie în pagina web.


Elementul div html

Un alt exemplu de utilizare a elementului <div>:


Elementul div html

Elementul <span> se foloseşte pentru a impune un anumit stil unei porţiuni de text şi continuă aceeaşi linie de text (nu începe o linie nouă).


Elementul span html

În tutorialul despre Css, se va prezenta folosirea atributelor id si class pentru apelarea blocurilor <div> si <span>.


Elementul canvas html5

Elementul <canvas> este utilizat pentru introducerea de grafică în pagina web, folosind javascript-uri. Se foloseşte astfel:


<canvas id="testcanvas" width="200" height="100"></canvas>


Elementul canvas html5

Caractere speciale folosite în Html

Mai jos sunt prezentate câteva caractere speciale mai des folosite:


Caractere speciale in Html

Multimedia în Html

Multimedia înseamnă muzică, video, filme şi animaţii. Elementele multimedia sunt stocate in fişiere cu diferite extensii, ca: .mp3, .mp4, .wav, .mpeg, .swf, .svg.
Fişierele audio, pot fi introduse si redate în paginile web folosind elementul <audio> astfel:


<audio src="sound.mp3" controls="true" autoplay="true"></audio>


Audio in Html

Fişierele video, pot fi introduse şi redate în paginile web folosind elementul <video> astfel:


<video width="240" height="200" controls><source src="movie.mp4" type="movie/mp4"></video>


Video in Html

Şabloane în Html

Şabloanele sunt schiţe prestabilite de prezentare a paginilor web. Spre exemplu, putem folosi elementul <iframe> pentru a împărţi pagina web principală în 3 secţiuni, în fiecare din acestea încărcându-se o altă pagină html.


Sabloane in Html

De asemenea, putem crea un şablon folosind elementele <div> si <span>:


Sabloane in Html

Iar rezultatul în browser va fi:


Sabloane in Html

Protecţia paginilor Html

O protecţie simplă se poate realiza prin dezactivarea click-ului dreapta şi a meniurilor asociate (contextmenu).
Astfel, nu se mai poate afişa codul sursă al paginii, nu se mai poate selecta text în vederea copierii, nu se mai pot downloada imaginile din pagină. Acestea se realizează folosind instrucţiunea:


<body oncontextmenu="return false">


Inainte >>