Azimut Vision
HTML
Trainer: Constantin Paolo
[Link].
ro
Azimut Vision
Ce este HTML?
HyperText Markup Language (HTML) este un limbaj de marcare utilizat
pentru crearea paginilor web ce pot fi afișate într-un browser (sau
navigator). Scopul HTML este mai degrabă prezentarea informațiilor –
paragrafe, fonturi, tabele ș.a.m.d. – decât descrierea semanticii
documentului. În cadrul dezvoltării web de tip front-end, HTML este
utilizat împreună cu CSS și JavaScript.
[Link].
ro
Azimut Vision
Crearea unei pagini web
Pentru a crea o pagină HTML se poate utiliza orice editor de text (Notepad, Notepad++,
Visual Studio Code, Wordpad, FrontPage, Dreamweaver etc.), iar atunci când se salvează
se folosește extensia .html.
Tagurile HTML sunt marcaje pe care limbajul HTML le foloseşte alături de texte pentru a
ajuta browser-ul de internet să afişeze corect conţinutul paginii web. Acestea sunt încadrate
de parantezele unghiulre „<” și „>”.
Declarația <!doctype html> sau Document Type Declaration arată validatorului html ce
versiune de html a fost folosită.
[Link].
ro
Azimut Vision
Tagurile HTML
Taguri pereche (unul de început şi unul de încheiere). Tagul de
încheiere are semnul / la începutul lui.
Exemple: <html> şi </html>; <body> şi </body> etc.
Taguri simple (nu au un tag de încheiere). Aceste taguri, de obicei, nu
au conținut și se mai numesc și elemente vide. Elementele vide sunt
închise în tagul de început.
Exemple: <hr />, <br />.
[Link].
ro
Azimut Vision
Atributele tagurilor HTML5
Atributele sau parametrii pot fi definite ca nişte proprietăţi ale tagurilor. Ele oferă
informații suplimentare pentru tagul resectiv. Atributele se pun doar în cadrul tagului de
început, înainte de închiderea parantezei unghiulare. Atributele au un nume și o valoare
setată, de genul nume = "valoare". Daca un tag nu are nici un atribut, atunci browser-ul va
lua în considerare valorile implicite al tagului respectiv.
Exemplu: <body bgcolor="red"> - atributul bgcolor stabilește culoarea de fundal al paginii
web.
[Link].
ro
Azimut Vision
Structura unei pagini HTML5
O pagină web este compusă din 2 secțiuni: secțiunea HEAD și secțiunea BODY:
Secțiunea HEAD este delimitată de tagurile <head> și </head>. În cadrul acestei secțiuni se definește titlul paginii web precum și
informații meta, php scripturi, javascripturi și css-uri. De asemenea este o bună practică includerea charset-ului pentru a indica
browserului ce tip de caractere să afișeze la încărcarea paginii.
Exemplu:
<head>
<title>...</title>
<meta charset="UTF-9" />
</head>
Secțiunea BODY este delimitată de tagurile <body> și </body>. Aceasta este principala secțiune a paginii html, iar textul cuprins în
cadrul ei reprezintă conținutul vizibil al paginii web.
Exemplu:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="UTF-9" />
</head>
<body>
<!--conținut -->
</body> </html>
[Link].
ro
Azimut Vision
Titluri
Titlurile HTML se definesc cu taguri de la <h1> la <h6>.
<h1> definește titlul cel mai important.
<h6> definește titlul cel mai puțin important.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
[Link].
ro
Azimut Vision
Paragrafe
Paragraful se definește cu tag-ul <p>
Un paragraf începe întotdeauna pe o linie nouă, și browserele adaugă
automat ceva spații la margini înainte și după paragraf. (ex: lorem
ipsum)
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
[Link].
ro
Azimut Vision
Linie orizontală
Tagul <hr> definește o pauză tematică într-o pagină HTML.
[Link].
ro
Azimut Vision
Sfârșit de linie de text
Tagul <br> se pune la sfarsitul unei linii pentru a trece pe randul
urmator.
[Link].
ro
Azimut Vision
Text preformatat
Textul din interiorul unui element <pre> este afișat într-un font cu lățime
fixă (de obicei Courier) și păstrează atât spațiile, cât și întreruperile de
linie:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
[Link].
ro
Azimut Vision
Formatarea textului
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
[Link].
ro
Azimut Vision
Citate
<blockquote> - definește o secțiune cu un citat dintr-o altă sursă
<q> - definește un scurt citat
[Link].
ro
Azimut Vision
Comentarii
Comentariile oferă posibilitatea ca în documentul HTML să putem avea o
zonă cu text sau cod care să nu fie afișată utilizatorului în browser.
<!-- Write your comments here -->
[Link].
ro
Azimut Vision
Link-uri
<a href=“url”>text</a> definește un link către o sursă interioară sau
exterioară
Atribute:
target=“_blank” va deschide url-ul in tab nou
<a href="[Link] email</a> pentru a
deschide aplicatia de email
Marcaje
<a href="#C4">Jump to Chapter 4</a>
<h2 id="C4">Chapter 4</h2>
[Link].
ro
Azimut Vision
Imagini
Imaginile pot fi inserate intr-o pagina web cu ajutorul tag-ului
<img src=‘[sursa imaginii]’ alt=‘[text ce se afiseaza la mouse-over
pe imagine]’>
Se pot adauga imaginii cu o paleta foarte larga de extensii, chiar si
imagini animate (.gif)
[Link].
ro
Azimut Vision
Tabele
Tag-ul <table></table> definește un table HTML
<tr></tr> definește un rând de tabel
<th></th> definește o celulă pentru header-ul tabelului (bold și
centrat)
<td></td> definește o celulă pentru restul tabelului
[Link].
ro
Azimut Vision
Liste
Listă neordonată:
• Item
• Item
• Item
• Item
Listă ordonată:
1. First item
2. Second item
3. Third item
4. Fourth item
[Link].
ro
Azimut Vision
Listă neordonată
<ul></ul> este tagul pentru listă neordonată
<li></li> reprezintă fiecare item din listă
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
[Link].
ro
Azimut Vision
Listă ordonată
<ol></ol> este tagul pentru listă ordonată
<li></li> reprezintă fiecare item din listă
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
[Link].
ro
Azimut Vision
Elemente de așezare a contentului
<div></div> - incepe si se finalizeaza cu un rand nou
<span></span> - incepe si se finalizeaza pe acelasi rand
[Link].
ro
Azimut Vision
HTML – pagina Web Responsive
Arata bine pe toate dispozitivele
[Link].
ro
Azimut Vision
Formulare
<form>
.
form elements
.
</form>
Atribute:
action – defineste locatia catre care se trimit informatiile
din interiorul formularului
target – spune unde sa se afiseze raspunsul primit in urma
trimiterii formularului
method - Datele formularului pot fi trimise ca variabile in
URL (cu method = "get") sau ca tranzacție prin protocolul
HTTP (cu metoda = "post")
[Link].
ro
Azimut Vision
Formulare - elemente
<input> - diverse tipuri de informatii pot fi introduce in functie de
tipul inputului
<textarea> - defineste un saptiu unde poate fi introdus mult text
<label> - defineste textul care indica la ce se refara un input
<select> - defineste o lista de elemente din care poate fi selectata o
informatie
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> [Link].
ro
Azimut Vision
Formulare – tipuri de input-uri
<input type="button"> <input type="radio">
<input type="checkbox"> <input type="range">
<input type="color"> <input type="reset">
<input type="date"> <input type="search">
<input type="datetime-local"> <input type="submit">
<input type="email"> <input type="tel">
<input type="file"> <input type="text">
<input type="hidden"> <input type="time">
<input type="image"> <input type="url">
<input type="month"> <input type="week">
<input type="number"> [Link].
ro
<input type="password">
Azimut Vision
Formulare – atribute pentru input-uri
value – specifica valoarea initiala a unui input
readonly – specifica despre un input ca informatia doar poate fi citita,
nu modificata
disabled – sepcifica despre un input ca este inactive
min, max – specifica minimul si maximul valorilor care se pot afla intr-
un input
multiple – specifica faptul ca un input poate contine multiple valori
placeholder – permite introducerea unui text care sa spuna ce fel de
informatii trebuie sa se afle in acel input
required – specifica faptul ca acel input trebuie neaparat completat
pentru a finaliza completarea formularului
[Link].
ro
Azimut Vision
Id
Atributul id este folosit pentru a indica un element html unic intr-o
pagina.
[Link].
ro
Azimut Vision
Clasa
Atributul class este utilizat pentru a indica o grupare de elemente.
[Link].
ro