... Programare Multimedia ...

Cap 3. Aplicatii Web multimedia. HTML, XHTML, CSS.

Reteaua de resurse globale de informare Web are la baza notiunea de hipertext. Prin hipertext se întelege un document care contine, pe lânga text, grafica, imagini, animatie, înregistrari audio si legaturi (referinte) catre alte documente. Ulterior acesta a fost extins la termenul de hipermedia, acesta avand un sens mai larg. Conotatia este insa aceiasi si anume semnifica resurse care contin legaturi la alte resurse media.

3.1. HTML

Limbajul HTML (HyperText Markup Language), a fost proiectat sa poata opera cu functionalitatile multimedia ale retelei Web. El este un limbaj de marcare care permite editarea sau transformarea oricarui text sub forma de hipertext prin introducerea unor marcaje, care vor indica pe langa modul cum se efectueaza legaturile documentului cu alte resurse externe si modul cum vor aparea formatate paginile documentului. Un document HTML poate fi facut public prin instalarea lui pe un server Web. Marcajele introduse de HTML poarta numele de tag-uri HTML.

Versiunile cele mai importante de HTML:

  • HTML 1.0 (~1991) - draft CERN, 20 de taguri
  • HTML 2.0 (~1995) - standard, 49 taguri
  • HTML 3.2 (~1997) - standard, adopta mare parte din tagurile propuse de Netscape, asigura suport pentru tabele, a fost propusa extinderea prin MathML pentru a permite includerea de formule matematice
  • HTML 4.0 (~1998) - standard, primul conform International Standard ISO 8879, suport CSS, obiecte multimedia, limbaj script extins, facilitati pentru tiparirea paginilor etc.  
  • HTML 5.0 (~2008) - draft, include MathML si SVG in documente HTML, adauga tag-uri pentru dialog, video, audio, embed, progress, canvas etc.

Exemplu de document HTML:

<!doctype html>
<html>
  <head>
    <title>Exemplul1 HTML</title>
  </head>
  <body>
    <p>Textul meu!</p>
  </body>
</html>

Tipuri de taguri HTML:

  1. Taguri pentru descrierea structurii:
  • document: <html><head><title></title></head> <body></body></html>
  • text: paragrafe (<p></p>), rand nou (<br>), text preformatat (<pre></pre>), subscript (<sub></sub), superscript (<sup></sup>), citate (<blockquote cite="adresa_citat"></blockquote>)
  • liste: neordonate (<ul> <li></li>... </ul>), ordonate (<ol> <li></li>... </ol>), lista definitii (<dl> <dt></dt><dd></dd> ... </dl>)
  • tabele: <table><caption></caption><tr> <th></th> ... </tr><tr> <td></td> ... </tr> </table>
    Exemplu:

    <table border="1">
         <caption>
            <em>Iepuri de casa (merged cells)    </em>
          </caption>
          <tbody>
          <tr>
            <th rowspan="2">
            <th colspan="2">Media
            <th rowspan="2">Blana<br>maro
          <tr>
            <th>lungime
            <th>greutate
          <tr>
            <th>Masculi
            <td>0.93
            <td>4.5
            <td>80%
          <tr>
            <th>Femele
            <td>0.91
            <td>4.2
            <td>67% 
          </tr>
          </tbody>
    </table>

    Iepuri de casa (merged cells)
    Media Blana
    maro
    lungime greutate
    Masculi 0.93 4.5 80%
    Femele 0.91 4.2 67%

  • legaturi: <a href="adresa">text</a>, adresa poate fi un URL sau o ancora "#numeAncora", deninita cu ajutorul tagului <a name = "numeAncora"></a>. Numele ancorelor nu este case-sensitive.
  • imagini: <img src="adresaImg" alt="text alternativ">
  • appleturi: <applet code="numeFisier.class" width="dx" height="dy">Titlu applet.</applet> sau <object codetype="application/java"       classid="java:numeFisier.class" width="dx" height="dy"> Titlu applet.</object>
  1. Taguri pentru descrierea prezentarii:
  • style sheets:<tag class="numeClasaCSS" ...>, poate fi defint cu <style type="text/css"> tag.numeClasaCSS {atribute}</style>
  • fonturi, culori, alinieri : <b>bold</b>,
    <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
    <big>big</big> and <small>small</small>, <font size="2" color="#ff0000" face="Verdana"> ... </font>
  • frame-uri:
    <frameset cols="20%, 80%">
      <frameset rows="100, 200">
          <frame src="frame1.html">
          <frame src="frame2.gif">
      </frameset>
      <frame src="frame3.html">
      <noframes>
          <p>Documentul contine:
          <ul>
             <li><a href="frame1.html"> pag1</a></li>
             <li><img src="frame2.gif" alt="img2"></li>
             <li><a href="frame3.html">pag3</a></li>
          </ul>
      </noframes>
    </frameset>
  1. Taguri pentru implementarea interactivitatii:
  • formulare (HTML forms):
    <form action="URL(php, asp ...)" method="post">
    <p>
        <label for="prenume">Prenume: </label>
                  <input type="text" id="prenume"><br>
        <label for="nume">Nume: </label>
                  <input type="text" id="nume"><br>
        <label for="email">email: </label>
                  <input type="text" id="email"><br>
        <input type="radio" name="tip" value="barbat"> Barbat<br>
        <input type="radio" name="tip" value="femeie"> Femeie<br>
        <input type="submit" value="Trimite">
        <input type="reset" value="Initializeaza">
    </p>
     </form>
  • scripturi: <script type="text/vbscript" src="URLVBScript"> sau <script type="text/javascript">
    ...program Javascript...
    </script>

    Pentru mai multe informatii despre taguri se poate consulta HTML Tutorial de la w3Schools.


3.2. XHTML

XHTML = EXtensible HyperText Markup Language

Este o versiune stricta si "curata" de HTML 4.01. Este un standard W3C. Se bazeaza pe XML.

Nu accepta marcaje incorecte. Tagurile sunt scrise cu litere mici si nu se accepta lipsa marcajelor de inchidere. Nu se accepta imbricarea incorecta a tagurilor (ex. <b><i>Acest text este bold-italic</b></i>). Tagurile singulare trebuiesc de asemenea inchise (ex. <br /> sau <img src="img.gif" alt="My image" />).

Documentul trebuie sa fie inclus intr-o structura fixa(trebuie sa existe un "root element")
<html>
<head> ... </head>
<body> ... </body>
</html>

Nu este permisa minimizarea atributelor (ex. <input disabled> se va scrie <input disabled="disabled" />).

Sprijina specificarea limbajului in care sunt scrise datele (ex. <div lang="it" xml:lang="it">Ciao bella!</div>).

Documentul trebuie sa aiba precizat tipul prin specificarea unui DTD (Document Type Definition). Exista 3 DTD-uri specifice pentru XHTML si anume:
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Un document XHTML poate fi validat la adresa:
http://validator.w3.org/ .

Pentru mai multe informatii se poate consulta XHTML Tutorial de la w3Schools.


3.3. CSS

Tehnologia CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Ea a aparut in primul rand din dorinta de a putea formata unitar toate paginile unei aplicatii intr-o maniera usoara si flexibila.

Menirea pricipala este acea de a specifica cum vor fi afisate diversele entitati HTML. CSS a aparut odata cu HTML 4.0. Stilurile CSS pot fi definite in pagina sau intr-un fisier separat (de obicei cu extensia .css). Exemplu de CSS utilizat in pagina:
<head>
...
<style type="text/css">
ol.roman { list-style-type: lower-roman }
</style>
</head>
<body>
<ol class="roman">
<li> Step one ... 
<li> Step two ...
</ol>
...

Prin utilizarea unor fisiere .css se poate schimba foarte usor modul de afisare a informatiei in aceiasi pagina: exemplu CSS. 

Din punct de vedere sintactic CSS este formata din trei parti: un selector, o proprietate si o valoare: selector {property:value}. Pentru a creste lizibilitatea mai multe proprietati pot fi grupate pentru acelasi element:
p
{
    text-align:center;
    color:black;
    font-family:arial
} 

De asemenea se permite si gruparea mai multor selectori pentru aceleasi proprietati:

h1,h2,h3,h4,h5,h6
{
color:green
}

Pentru a putea varia definitia pentru un selector a fost introdusa notiunea de clasa. In felul acesta doata entitati HTML de acelasi tip pot fi formatate diferit daca se va preciza o clasa diferita pentru fiecare.
In fisierul css:
p.right {text-align:right}
p.center {text-align:center}
In fisierul html:
<p class="right">Acest paragraf va fi aliniat la dreapta.</p>
<p class="center">Acest paragraf va fi aliniat central.</p>
Daca la definitia unei clase este omis selectorul atunci clasa se va putea aplica la orice entitate html care suporta acea proprietate:
.center {text-align:center}
.green {color:green}
Daca se doreste, unei entitati html i se pot aplica simultan mai multe clase:
<p class="center green">Textul paragrafului.</p>

Exista 3 moduri diferite de a adauga elemente css la un document:

  • Internal Style Sheet
    Se defineste cu ajutorul tagului <style> in interiorul sectiunii <head> din document.
  • Inline Style
    Se defineste ca atribut in interiorul unui tag:
    <p style="color:sienna;margin-left:20px">Text paragraf.</p>
    Nu se recomanda utilizarea acestui stil pentru ca se pierde din lizibilitate.
  • Extenal Style Sheet
    Se defineste in fisiere externe paginii html si are avantajul ca este aplicabil mai multor pagini prin simpla incluziune a unelui fisierului prin intermediul unui tag <link>. Ex:
    Fisierul stil1.css
    hr {color:green}
    p {text-align:center}
    Fisierul p.html
    <html><head>
    <link rel="stylesheet" type="text/css" href="stil1.css" />
    </head> ...
Daca mai mult stiluri sunt definite pentru acelasi element html ordinea prioritatilor este urmatoarea:
  1. Inline style
  2. Internal style sheet
  3. External style sheet
  4. Browser default

Petru tipurile de propritati css aplicabile diverselor entitati html se poate consulta tutorialul CSS de la w3Scools.