Marcarea Si Structurarea Paginilor Web Cu Ajutorul HTML

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>
<h4>
<h5>
<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

Marcarea Si Structurarea Paginilor Web Cu Ajutorul HTML

Î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

Marcarea Si Structurarea Paginilor Web Cu Ajutorul HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Grafic

HTML (Hyper Text Markup Language)

Tag-urile de marcare HTML

Structura unei pagini HTML

Structura unei pagini HTML

Tag-uri HTML de marcare structural a

formateaz textul ca titlu principal (cel mai important

formateaz textul ca titlu de nivel 2

formateaz textul ca titlu de nivel 3

formateaz textul ca titlu de nivel 4

formateaz textul ca titlu de nivel 5

formateaz textul ca titlu de nivel 6 (cel mai putin

definete un element de tip paragraf

se folosete pentru a aduga un sfrit de linie interiorul

Tag-uri HTML de formatare semantic a

formateaz textul cu bold

evideniaz / marcheaz textul cu un fundal galben

defineste o celula antet ntr-un tabel

defineste un rnd ntr-un tabel

defineste o celul ntr-un rnd dintr-un tabel

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

specific adresa URL a documentului care va fi

specific coninutul HTML al documentului care va fi

specific nlimea unui <iframe>

specific limea unui <iframe>

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

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

specific adresa URL a unei imagini

specific nlimea unei imagini

specific limea unei imagini

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