Sunteți pe pagina 1din 18

Grafic

Cursul 2. Marcarea i
structurarea paginilor Web
cu ajutorul HTML
Lect.univ.dr. Daniel MICAN
daniel.mican@econ.ubbcluj.ro

HTML (Hyper Text Markup Language)


HTML este:
un limbaj folosit pentru a descrie coninutul i structura paginilor
web;
un limbaj de marcare alctuit dintr-un set de tag-uri de marcare.
Debutul HTML:
HTML (1991)
HTML+ (1993)
HTML 2.0 (1995)
HTML 3.2 (1997)
HTML 4.01 (1999)
XHTML (2000)
HTML5 (2012)
XHTML5 (2013)

Tag-urile de marcare HTML


Tag-urile de marcare HTML sunt:
de obicei numite simplu, tag-uri HTML;
cuvinte cheie nconjurate de paranteze unghiulare;
n mod normal prezente n perechi.
<numetag> Coninut </numetag>
Primul tag dintr-o pereche este tag-ul de nceput <numetag>
.
Al doilea este tag-ul de final </numetag> .

Elementele HTML
Un element HTML este:
ceea ce este ntre tag-ul de start i tag-ul final, inclusiv tagurile;
tag-urile HTML i elementele HTML descriu acelai lucru;
spune browserului ceva despre informaiile care se afl
ntre tag-uri.
element HTML
<p> Acesta este un paragraf.</p>

Atribute i valori
Atributele:
sunt coninute n tag-urile HTML;
furnizeaz informaii suplimentare cu privire la elemente
HTML;
sunt ntotdeauna specificate n eticheta de start;
fiecrui nume de atribut i este atribuit i o valoare.
<tag numeatribut = "valoare"> ... </tag>
Valorile atributelor trebuie:
s fie ntotdeauna nchise n ghilimele;
ghilimele duble sunt cele mai comune;
sunt de asemenea permise i cele simple.

Atribute i valori
<tag numeatribut1="valoare1"
numeatribut2="valoare2"> ... </tag>
Atribut Descriere
class
Specific una sau mai multe nume de clase pentru un
element (se refer la clasele de stiluri dintr-o foaie de sti
extern)
id
Specific un id unic pentru un element
style
Specific un stil CSS de tip inline pentru un element
title
Specific informaii suplimentare cu privire la un
element

Structura unei pagini HTML

Structura unei pagini HTML

Declaraia <!DOCTYPE>

HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

Elementul <head>
<title> definete titlul documentului HTML.
<title> Titlul documentului HTML </title>
<link> definete relaii ntre un document i o resurs extern.
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> definete stilul (style).
<style type="text/css">body {background-color:yellow} p
{color:blue} </style>
<script> este utilizat pentru a defini un script.
<meta> furnizeaz metadata (date, informaii) despre date.
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Descrierea paginii
web">
<meta name="author" content="Daniel Mican">

Tag-uri HTML de marcare structural a


textului
<h1>

formateaz textul ca titlu principal (cel mai important


titlu)

<h2>

formateaz textul ca titlu de nivel 2

<h3>

formateaz textul ca titlu de nivel 3

<h4>

formateaz textul ca titlu de nivel 4

<h5>

formateaz textul ca titlu de nivel 5

<h6>

formateaz textul ca titlu de nivel 6 (cel mai putin


important titlu)

<p>

definete un element de tip paragraf

<br />
<hr />

se folosete pentru a aduga un sfrit de linie interiorul


unui paragraf
insereaz o linie orizontal cu rol de delimitare a
seciunilor unei pagini

Tag-uri HTML de formatare semantic a


textului
<b>
<em>
<i>
<small
>
<stron
g>
<sub>
<sup>
<ins>
<del>
<mark
>
<q>

formateaz textul cu bold


formateaz textul s ias n eviden
formateaz textul cuitalic
formateaz textul astfel nct sa fie mai mic
formateaz textul s ias n eviden
formateaz
formateaz
formateaz
subliniere
formateaz

textul ca i subscript
textul ca i superscript
textul prin adugarea unei linii de
textul prin tierea acestuia cu o linie

evideniaz / marcheaz textul cu un fundal galben


formateaz textul prin adugarea acestuia ntre
ghilimele

Listele
<ol>
<li>Alexandra</li>
<li>Mihai</li>
</ol>
<ul>
<li>Alexandra</li>
<li>Mihai</li>
</ul>

<dl>
<dt>Alexandra</dt>
<dd>- are ochii albastri</dd>
<dt>Mihai</dt>
<dd>- are ochii verzi</dd>
</dl>

Tabele
<table
>

definete un tabel

<th>

defineste o celula antet ntr-un tabel

<tr>

defineste un rnd ntr-un tabel

<td>

defineste o celul ntr-un rnd dintr-un tabel

<thead
grupeaz coninutul din antetul ntr-un tabel
>
<tbody
grupeaz coninutul din corpul ntr-un tabel
>
<tfoot> grupeaz coninutul din subsolul ntr-un tabel

Tabele
<table bordercolor=blue border=5>
<tr>
<td background=imagine.gif>text celula1
rand1</td>
<td>text celula2 rand1</td>
</tr>
<tr>
<td colspan=2>text celula 1 rand 2</td>
</tr>
</table>

iframe
<iframe src="URL"> </iframe>

Cele mai importante atribute pe care le poate conine tag-ul


<iframe>:
src

specific adresa URL a documentului care va fi


ncorporat n <iframe>

srcdoc

specific coninutul HTML al documentului care va fi


ncorporat n <iframe>

height

specific nlimea unui <iframe>

width

specific limea unui <iframe>

Link-urile

<a href="URL" target="_blank">Textul link-ului / Imagine</ a>


<a id="semncarte">Ai ajuns la semnul de carte</a>
<a href="#semncarte">Click aici pentru a merge la semnul de
carte</a>
<a href="pagina.html#semncarte">Click aici pentru a merge la
semnul de carte</a>

Imaginile
<img src="url" alt="titlul sau descrierea imaginii">

Cele mai importante atribute pe care le poate conine tag-ul


<img>:
src
alt

specific adresa URL a unei imagini


specific un text alternativ pentru imagine i va fi afiat
n cazul n care imaginea nu poate fi afiat

height

specific nlimea unei imagini

width

specific limea unei imagini