Web - XHTML (Lab)

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/

TehnologiiTehnologii WebWeb <?xml version=“1.0” ?><curs desc=“…” />

Tehnologii Web

Dr. SabinCorneliu BuragaFacultatea de Informatica

Universitatea “A.I.Cuza” – Iasi, Romania

http://www.infoiasi.ro/~busaco/



DetaliiDetalii in in [PSW, [PSW, 142142‐‐163163 + CD]+ CD]

XHTML



“Începutul nu lasă să se întrevadă sfârşitul.”

Herodot



HyperText Markup LanguageCaracterizare & format

De la HTML la XHTMLResurse

cuprins



intrebare

Cum putem publica pe Web?



raspuns

Via o modalitate de structuraresi de prezentare a datelor

in cazul nostru, folosind un limbaj de marcare(markup language)



XHTML

Extensible HyperText Markup Language“Lingua franca” a Web‐ului

Documente HTML ≡ pagini Web(fisiere text .html sau .htm) stocate pe un server Web şi vizualizate

de un client Web (navigator, browser)



XHTML

Format bazat pe marcatori(adnotări, markups)

<html>…</html>



XHTML

Structura: antet (head) + corp (body)

XHTML

<html> <head> 

…</head> <body> 

…</body> 

</html>



XHTML

Marcatorii trebuie sa fie inchisisi sa se imbrice corect!

Incorectitudinile sintactice/semanticenu vor fi semnalate de browser

Spațiile albe nu au semnificație



XHTML: Elemente importante

Secțiuni ale conținutului<p> paragraf<div> diviziune<hr /> linie orizontală<br /> trecere la linie nouă<h1> ... <h6> şase tipuri de titluri

<hr /><h2>Maniera de evaluare</h2>




Indicații despre conținut<b> îngroşat<i> înclinat<strong> important<em> intensificat <sub> indice<sup> exponent

<pre> text preformatat<code> cod sursa<span> proprietăți ale

conținutului

<p><strong>Orice încercare de…</strong></p>




Liste<ul> listă nenumerotată<ol> listă numerotată<li> element de listă (ne)numerotată

<ul><li><p>Mere albastre</p></li><li><p>Ferestre <em>zburlite</em></p></li>

</ul>




Imagini<img /> inserează o imagine JPG/PNG

<img src="../sigla.png../sigla.png" alt="Sigla Tehnologii Web" />

Este un URL Este un URL relativrelativ




Legături (ancore) – specifică hipertextul<a> ancoră spre o altă resursă Web

sau un fragment de document

<p><a href="http://www.xhtml.org/http://www.xhtml.org/" title="Spre situl XHTML.org">XHTML.org</a></p>

Este un URLEste un URL

De De care?care?




Tabele<table> inserează un conținut tabelar<tr> linie de tabel<td> definiție de celulă<th> antet de tabel<caption> legendă de tabel…




Formulare<form> inserează un formular electronic<input> câmp de intrare <button> buton<select> selecție de listă de opțiuni<option> opțiune ce poate fi selectată<textarea> text introdus pe mai multe linii




Includere de alte conținuturi<style> definiții de stiluri interne<script> programe JavaScript<applet> applet‐uri Java<embed> inserare a unui obiect generic<object> (audio, film, animație etc.)

<embed name="plugin" type="audio/mpeg"src="Celestial%20Celebration.mp3" />




Meta‐date (plasate în <head>…</head>) <title> titlul paginii Web<meta /> informații suplimentare – descrierea documentului, autorul, cuvintele‐cheie etc.

<link /> inserează un fişier extern – e.g., o foaie de stiluri

<meta name="description" lang="ro" content="Situl Web dedicat cursului" />



XHTML: Entități

Permit inserarea de caractere specialeentități standard –&nume_entitate;

< <> >& &" "



XHTML: Entități

Permit inserarea de caractere specialeentități simbolice –&nume_entitate;

spațiu indestructibil· ·– –© ©µ µ…



XHTML: Entități

Permit inserarea de caractere specialeentități caracter –&#cod_caracter;

© ©¶ ¶…

depind de setul de caractere ales: ISO‐8859‐1 (Latin‐1), ISO‐8859‐2 (Latin‐2),…



intrebare

De ce XHTML şi nu HTML?



XHTML

Extensibilitatepot fi incluse elemente ale altor limbaje: SVG (Scalable Vector Graphics), MathML,…

Modularizare grupare logică a seturilor de marcatori, utilizate conform necesităților

Transformare a marcajelor convertire facilă în alte tipuri de conținut



XHTML: Reguli

Elemente & atribute scrise cu minuscule– XHTML este case sensitive

Tag‐uri de sfârşit obligatorii

Tag‐urile vide scrise <tag />sau <tag></tag>



XHTML: Reguli

Valorile atributelor vor fi incluse între ghilimele<table width=600> este greşit

Atributele booleene vor trebui să aibă ataşatăşi valoarea: <hr noshade="noshade" />



XHTML: Reguli

Pentru a se indica faptul că documentul este unul XHTML, acesta trebuie să înceapă cu: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> sau<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



XHTML: Reguli

Verificarea/convertirea poate fi realizata cu Tidy,online (validator.w3.org/) sau

via FireBug / Html Validator (extensii Firefox)



XHTML: Viitor

HTML 5 – working draft din 2008compatibil cu vechiul HTML 4.01, dar il extinde

XHTML 2 – propus din 2006viitoarea versiune a XHTML 1.1, aliniat XML

A se vizita http://www.w3.org/html/



XHTML 1.0 (recomandare W3C): www.w3.org/TR/xhtml1

Modularization of XHTML: www.w3.org/TR/xhtml-modularization

Situl dedicat XHTML: www.xhtml.org/

HTML Techniques for Web Content Accessibility Guidelines:www.w3.org/TR/WCAG10/

resurse



??

Web - XHTML (Lab)

Technology

Transcript of Web - XHTML (Lab)