Realizăm întâi o pagină Web obişnuită ("statică") - analog în principiu, cu maniera de lucru pe care am folosi-o în Word. În a doua variantă, generăm "dinamic" documentul (folosind elementar javascript) - asigurând astfel o întreţinere mai comodă.

Varianta statică

Am putea realiza foarte uşor documentul necesar, folosind Microsoft-Word (sau analogul necomercial OpenOffice.org Writer); se deschide Word şi se face click pe iconul Table iar în fereastra de dialog apărută se indică numărul de coloane şi numărul de rânduri; în tabelul creat se înscriu apoi, datele respective. Apoi, prin selectare de elemente putem aplica diverse formatări, folosind iconurile puse la dispoziţie. În final, salvăm documentul; când va fi nevoie ulterior de document - intrăm în Word şi folosim meniul File / Open pentru a deschide documentul respectiv (modificăm dacă este necesar, salvăm, tipărim, etc.).

Word permite salvarea documentului în diverse formate: .DOC corespunde formatului specific Word (şi fişierul respectiv nu poate fi deschis decât lansând în prealabil Word); .HTML produce o pagină Web (nu "direct", ci prin convertirea corespunzătoare a formatului .DOC). Şi un format şi celălalt conduc la fişiere mult mai voluminoase decât dacă am realiza "direct" pagina Web respectivă.

Pentru a realiza "direct" pagina Web intenţionată, putem proceda oarecum analog manierei de lucru utilizate în Word (dar vom vedea ca putem proceda mai bine altfel). În loc să deschidem Word-ul, lansăm un editor de text obişnuit (poate fi şi Notepad); nu mai avem la dispoziţie iconuri, ca în Word - dar putem folosi pentru a defini un tabel, elementele HTML <table>, <tr> ("table row"), <th> ("table head", pentru antetul tabelului), <td> (pentru celulele rândului). Pentru "formatare" vom putea constitui un fişier de stiluri independent de conţinutul propriu-zis. Dar iată un mic exemplu:

Edităm fişierul-text următor, fie el "test.html":

<table border="1">
   <tr>
       <th>Ora</th> <th>Luni</th> 
                    <th>Marţi</th>
   </tr>
   <tr>
       <td>I</td> <td>Română</td> 
                  <td>Informatică</td>
   </tr>
   <tr>
       <td>II</td> <td>Fizică</td> 
                   <td>Biologie</td>
   </tr>
</table>

Încărcând "test.html" din browser:

Ora Luni Marţi
I Română Informatică
II Fizică Biologie

Tag-ul de start <table> şi cel de sfârşit </table> delimitează conţinutul tabelului. Tabelul este compus din mai multe secţiuni (thead, tbody, tfooter), dar deocamdată aici e compus din mai multe rânduri (acestea aparţin de obicei secţiunii tbody); conţinutul fiecărui rând este delimitat prin marcajele <tr> şi </tr>. Un rând este compus din mai multe celule, fiecare fiind marcată prin tag-urile <td> şi </td> (exceptând eventual primul rând, corespunzător secţiunii thead, pentru care tag-ul obişnuit este <th>).

^TOP^
Asupra unor elemente HTML

Pentru conţinutul documentului vom alege următoarea structură simplă:
— un titlu, de exemplu "Orarul clasei a IX-a A";
— tabelul în care se redă orarul respectiv

Pentru "titluri" (de document, de capitol, de secţiune, etc.) putem folosi elementele HTML <h1>, <h2>,..., <h6> (denumite Heading tags). Înscrieţi într-un fişier-text <h1>titlu H1 ("heading tag 1")</h1> (analog, pentru H2, etc.) salvaţi-l cu extensia .html şi apoi deschideţi-l în browser (dar vezi şi exerciţiul subordonat mai jos).

Dar "titlu" mai are un sens, aproape obligatoriu. Aşa cum indici altuia o carte spunând titlul ei şi aşa cum cauţi o carte pe baza în primul rând, a titlului ei - tot aşa, documentele Web circulă şi sunt căutate pe Internet în primul rând pe baza titlului. Elementul HTML <title> trebuie să fie prezent în secţiunea de head a documentului; titlul indicat astfel va fi afişat de browser în "bara de titlu" a ferestrei în care s-a deschis documentul.

Secţiunea de head a documentului (marcată prin elementul HTML <head>) cuprinde şi alte informaţii (într-o sintaxă corespunzătoare, HTTP) pe lângă cea de titlu; aceste informaţii nu sunt destinate să fie afişate de către browser, ci sunt folosite de browser pentru a interpreta cât mai corect conţinutul documentului (conţinut marcat prin <body> în cadrul documentului). De exemplu, <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> permite informarea browserului asupra faptului că documentul conţine text marcat eventual cu HTML, iar acest text este codificat după standardul Unicode/UTF-8. Unicode a fost inventat de Ken Thompson (coautor al sistemului de operare Unix, al limbajului C, al hardware-ului şi soft-ului pentru celebrul calculator de şah Belle).

UTF-8 este în primul rând, un tabel de coduri: fiecărui caracter (dintr-o limbă sau alta, sau de exemplu pentru piesele din jocul de şah) îi este asociat (în mod biunivoc) un număr întreg; codul ASCII face acelaşi lucru, dar pentru maximum 256 de caractere - adică are în vedere doar caractere pe 8 biţi (un singur octet); UTF-8 are în vedere un set de caractere pe 31 de biţi, asociind fiecărui caracter un număr de până la 8 octeţi. Caracterul obişnuit a este reprezentat intern pe un singur octet (acelaşi, în ASCII sau UTF-8) de valoare numerică 97; dar caracterul ă (care are numele "LATIN SMALL LETTER A WITH BREVE") este reprezentat intern prin 2 octeţi (de valoare numerică 0x0103); caracterul ♔ "WHITE CHESS KING" este reprezentat pe 2 octeţi, 0x2654 (iar în HTML - prin entitatea numerică &#9812;).

Înscrieţi într-un fişier-text <p>Pot să mănânc sticlă și ea nu mă rănește.</p>, salvaţi cu extensia .html şi deschideţi-l în browser. Apoi, completaţi fişierul-text respectiv, inserând la început <head> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"> </head>, salvaţi, deschideţi în browser (eventual, deschideţi un alt browser şi repetaţi). A... nu reuşiţi să tastaţi caracterele româneşti? Atunci, folosiţi entităţile HTML: tastaţi &#259; pentru ă şi &#351; pentru ş. Altfel? - pentru Windows: apăsaţi tasta ALT şi apoi tastaţi (pe tastatura numerică) 0259 (un zero, urmat de codul numeric zecimal al caracterului). Altfel? - în meniul View al browserului, căutaţi un submeniu pentru "Character Encoding" şi optaţi pentru "Unicode/UTF-8".

Astăzi Unix, Linux şi alte sisteme similare (ca şi diverse ţări) au adoptat ca implicit ("default") modelul Unicode; utilizatorii acestor sisteme au acum posibilitatea de a configura uşor tastatura, aplicaţiile, etc. pentru a folosi Unicode (asigurându-se codare / decodare "automată"). La noi sistemele Windows domină, dar... încă se foloseşte limba română şi s-a găsit ca soluţie (de către majoritatea instituţiilor) eliminarea "diacriticelor" (nu te mai numeşti să zicem, Cătălina Hăulică, ci eşti denumit HAULICA CATALINA, desigur cu majuscule pentru a atenua eludarea limbii române).

^TOP^
Exerciţiu (generarea conţinutului; UTF-8)

Mai sus am exemplificat tagurile h1..h6, înscriind într-un fişier .html itemuri corespunzătoare; dar cele 6 itemuri pot să fie generate ("automat") în cadrul documentului, implicând un element <script> şi vreo două instrucţiuni javascript simple:

<!-- fişierul sursă "gtest.html" -->
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>Generarea elementelor</title>
</head>

<body>
    <p>Heading tags: h1, h2, h3, h4, h5, h6 (generate printr-un script javascript):</p>
    <script>
        for(var i = 1; i <= 6; i++)
            document.write("<h" + i + ">Heading tag " + i + "</h" + i + ">");
    </script>

    <h1>Test caractere româneşti</h1>
    <p>Pot să mănânc sticlă și ea nu mă rănește.</p>

    <h1>Exerciţiu</h1>
    <p>Eliminaţi linia a treia (care impune <i>Content-Type</i>) din fişierul-sursă 
       şi apoi reîncărcaţi (tasta <b>F5</b>).</p>
</body>

Scrieţi acest fişier (sau selectaţi de aici cu mouse-ul, copiaţi cu CTRL+C, treceţi în editorul de text (Notepad) şi folosiţi CTRL+V pentru "paste"), salvaţi ca "gtest.html" şi deschideţi-l în browser.

Avem de dat câteva explicaţii asupra fişierului redat mai sus. Mai întâi, secvenţa <!-- ... --> marchează un comentariu; comentariile sunt ignorate de către browser (deci nu sunt "afişate"), dar ele există ca obiect în DOM (încât este posibil următorul truc pentru modificarea dinamică a paginii redate de browser: înscriem în comentarii informaţii corespunzătoare modificării intenţionate şi furnizăm funcţii javascript care să acceseze DOM-ul documentului şi să extragă informaţiile din comentariile găsite, urmând ca pe baza acestora să efectueze anumite modificări asupra DOM-ului şi deci, asupra paginii redate de browser).

Content-Script-Type (v. linia a doua din <head>) precizează browserului că elementele <script> din cadrul documentului conţin formulări în limbajul javascript (în cazul de faţă), permiţând şi o simplificare a scrierii (altfel, ar trebui scris <script type = "text/javascript">, la fiecare element <script> din document).

Elementele <script> se pot afla în orice loc, în cadrul documentului; când browserul "citeşte" conţinutul fişierului .html în scopul de a afişa în mod corespunzător pagina respectivă şi întâlneşte un element <script>, atunci şi pune în execuţie secvenţa de instrucţiuni conţinută de acel <script> (continuând apoi să interpreteze şi să redea restul fişierului).

Scriptul de mai sus conţine două instrucţiuni; for este desigur binecunoscută (de exemplu din limbajul C), iar document . write("şir de caractere") asigură înscrierea în document (ţinând cont de poziţia în document a scriptului respectiv) a textului furnizat între paranteze.

document.write() nu este chiar o instrucţiune (precum "for"), ci reprezintă apelarea metodei write() a obiectului "document"; document este un obiect "global" al browserului, prin intermediul căruia pot fi accesate şi eventual manipulate, toate elementele (ca obiecte DOM) din pagina deschisă.

În general un "obiect" este un container de memorie în care se păstrează valorile diverselor proprietăţi (sub forma "nume_proprietate = valoare"), precum şi "handlere" sau metode de operare corespunzătoare (adică de obicei, adresele unor funcţii de prelucrare asociate). De exemplu, obiectul document conţine proprietatea title, având ca valoare titlul existent în elementul <head> al documentului. Pentru accesarea unei proprietăţi sau a unei metode a obiectului se foloseşte de regulă punctul (ca "operator de selectare"); astfel, var Titlu = document . title; (inclusă într-un element <script>) va crea variabila "Titlu" şi-i va atribui ca valoare titlul documentului.

În ceea ce priveşte şirul transmis în cazul nostru metodei write(): în javascript un şir este orice secvenţă de caractere încadrată între ghilimele, sau între apostrofuri; + este operatorul de concatenare (alipire a şirurilor).

Pentru completarea explicaţiilor: <p> marchează un paragraf în cadrul documentului; <b> marchează un text care urmează să fie prezentat prin aplicarea unui stil bold, iar <i> serveşte în acelaşi scop de prezentare, pentru italic.

^TOP^
Fişierele "orar-1.html" şi "stiluri.css"

S-a furnizat următorul orar al clasei:

Luni: informatica informatica informatica informatica Ed Fizica Matematica Biologie
Marti: Franceza Romana Matematica Fizica Religie Engleza Logica
Miercuri: Informatica Informatica Fizica Biologie Matematica Romana Muzica
Joi: Chimie Geografie Romana Matematica Romana Engleza Franceza
Vineri: Istorie Ed Fizica Chimie Fizica Desen Matematica Dirigintie

Indicaţiile privind <table> (vezi începutul acestei pagini) sunt desigur suficiente, pentru a scrie - Exerciţiu! - codul HTML necesar producerii tabelului corespunzător orarului. Totuşi, sunt posibile multe variante şi vom schiţa şi noi una (diferenţa fiind probabil, că vom folosi un singur <tr> şi nu 7); facem de asemenea unele completări şi prezentăm o modalitate tipică pentru stilare.

În general este suficientă, folosirea elementelor <tr>, <th> şi <td>. Dar există fel de fel de tabele de date şi fel de fel de necesităţi, care vor impune folosirea şi a altor elemente subordonate elementului <table>. În HTML4, rândurile tabelului pot fi grupate în mai multe secţiuni: una de <thead> ("capul" tabelului), una de <tfoot> ("subsolul" de tabel) şi una sau mai multe secţiuni <tbody> (conţinând datele propriu-zise). Marcând aceste secţiuni, se asigură satisfacerea unor cerinţe tipice, de exemplu: scrollarea rândurilor de date din <tbody> (păstrând fix antetul şi subsolul), sau repetarea informaţiei din antet pe fiecare pagină pe care ar fi tipărit tabelul; browserele dispun sau nu dispun în mod nativ, de asemenea posibilităţi de operare - dar capabilităţile lor pot fi extinse prin încorporarea de biblioteci javascript corespunzătoare.

Făcusem la început, un plan de structură a documentului: să conţină un titlu şi apoi tabelul orelor. Dar - ca de obicei pe parcursul investigării posibilităţilor - ar fi de făcut nişte corecţii: de vreme ce documentul nu conţine alte informaţii decât cele cuprinse în tabel, nu prea are sens să punem un titlu în <body> - e suficient să titrăm însuşi tabelul, folosind elementul caption subordonat lui <table>; apoi, fiindcă sunt numai 7 ore pe zi nu este necesar să implicăm 7 elemente <tr> (împreună cu cele 5×7=35 de elemente <td> corespunzătoare) - este suficient să folosim un singur <tr>, ale cărui <td>-uri (câte unul pentru fiecare zi) să conţină "una sub alta" cele 7 ore din ziua corespunzătoare (desigur, va trebui să implicăm alte elemente—de exemplu <p> sau poate numai <br>—pentru a satisface sintagma "una sub alta"; dar acestea sunt mai uşor de gestionat şi de scris, decât <td>-urile şi <tr>-urile).

Iar punând orele dintr-o aceeaşi zi "una sub alta", într-un acelaşi <td>, apare şi o posibilitate foarte simplă de stilare (tipică de altfel), bazată pe folosirea atributului class al elementelor HTML; declarând <td>-urile zilelor 2 şi 4 ca fiind de clasă "altern" şi definind stilul elementelor din această clasă printr-o culoare de fundal diferită de aceea a celorlalte <td>-uri, asigurăm o mai bună vizualizare a orarului prin faptul că vor alterna culorile de fundal pe care se scriu orele dintr-o zi în raport cu orele din zilele vecine.

<!-- fişierul "orar-1.html" -->
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="stil-1.css" type="text/css">
    <title>Orar cl. a IX-a A</title>
</head>

<body>
<table>
    <caption>Clasa a IX-a A</caption>
    <thead>
        <tr><th>Luni</th><th>Marţi</th><th>Miercuri</th><th>Joi</th><th>Vineri</th></tr>
    </thead>
    <tfoot>
        <tr><td colspan="5">Program: 13<sup>10</sup>—20<sup>00</sup></td></tr>
    </tfoot>
    <tbody>
        <tr><td>
                Informatică<br>
                Informatică<br>
                Informatică<br>
                Informatică<br>
                Ed. fizică<br>
                Matematică<br>
                Biologie
            </td>
            <td class="altern">
                Franceză<br>Română<br>Matematică<br>Fizică<br>
                Religie<br>Engleză<br>Logică
            </td>
            <td>
                Informatică<br>Informatică<br>Fizică<br>Biologie<br>
                Matematică<br>Română<br>Muzică
            </td>
            <td class="altern">
                Chimie<br>Geografie<br>Română<br>Matematică<br>
                Română<br>Engleză<br>Franceză
            </td>
            <td>
                Istorie<br>Ed. fizică<br>Chimie<br>Fizică<br>
                Desen<br>Matematică<br>Dirigenţie
            </td>
        </tr>     
    </tbody>        
</table>
</body>

Stilarea a fost lăsată în seama unui fişier CSS independent (vezi linia a doua din <head>). Dacă acesta nu există, atunci browserul va reda "orar-1.html" folosind numai stilurile implicite proprii (de exemplu, <th> are proprietăţile implicite "text-align: center" şi "font-weight: bold"):

Clasa a IX-a A
LuniMarţiMiercuriJoiVineri
Program: 1310—2000
Informatică
Informatică
Informatică
Informatică
Ed. fizică
Matematică
Biologie		 Franceză
Română
Matematică
Fizică
Religie
Engleză
Logică 		Informatică
Informatică
Fizică
Biologie
Matematică
Română
Muzică 		Chimie
Geografie
Română
Matematică
Română
Engleză
Franceză 		Istorie
Ed. fizică
Chimie
Fizică
Desen
Matematică
Dirigenţie

Dar definind stiluri corespunzătoare (v. "stil-1.css" mai jos), tabelul va putea arăta cu totul altfel:

Clasa a IX-a A
LuniMarţiMiercuriJoiVineri
Program: 1310—2000
Informatică
Informatică
Informatică
Informatică
Ed. fizică
Matematică
Biologie 		Franceză
Română
Matematică
Fizică
Religie
Engleză
Logică 		Informatică
Informatică
Fizică
Biologie
Matematică
Română
Muzică 		Chimie
Geografie
Română
Matematică
Română
Engleză
Franceză 		Istorie
Ed. fizică
Chimie
Fizică
Desen
Matematică
Dirigenţie 

/* fişierul "stil-1.css" */

table {
  border-collapse: collapse;
  font-family: verdana, arial, sans-serif; font-size: 12px; font-weight: normal;
  color: #363636; background: #FFD800;
}

caption {
  text-align: center;
  padding: 6px 4px 8px 0px;
  font-size: 18px; font-weight: bold;
  color: #03476F;
}

td, th { padding: .4em; }

thead th, tfoot td {
  font-size: 11px;
  padding-top: 3px;
  background: #4591AD; color: #FFFFFF;
}

thead th { text-align: left; border: 1px solid #03476F; }
tfoot td { text-align: center; border-top: 1px solid #03476F; }

td.altern { background: #FFD866; }

table tr td br {
  display: block;
  margin-bottom: 3px;
  padding: .25em;
}

Sintaxa CSS, ca şi denumirile proprietăţilor referitoare la stilul de prezentare a elementelor HTML sunt suficient de sugestive (dar vom reveni cu alt prilej). O metodă la îndemâna fiecăruia, pentru a înţelege rostul uneia sau alteia dintre proprietăţi este experimentarea; copiaţi într-un director propriu cele două fişiere; accesaţi din browser fişierul "orar-1.html"; modificaţi sau eliminaţi diverse proprietăţi din "stil-1.css" şi reîncărcaţi în browser "orar-1.html" (şi observaţi efectul modificării, desigur; experimentul poate să angajeze mai multe browsere).

De exemplu, eliminaţi (sau comentaţi, folosind ca şi în C marcarea /* ... */) proprietatea border-collapse din cadrul stilului asociat pentru elementul "table" şi observaţi că efectul acestei eliminări este similar declarării în HTML prin <table border="1">; sau, iarăşi interesant - eliminaţi setarea display: block din definiţia de stil pentru elementele <br> (vezi ultima definiţie din "stil-1.css") şi observaţi drept efect că se micşorează în mod neplăcut, distanţa pe verticală dintre itemurile înscrise în <td>-uri.

De obicei, dacă se fac modificări în fişierele CSS (sau în fişierele de funcţii javascript), atunci "reîncărcarea" obişnuită (butonul Reload, sau exact cu acelaşi efect - tasta F5) nu este suficientă pentru reflectarea imediată a modificărilor: trebuie folosită eventual, combinaţia de două taste CTRL + F5 (echivalent cu "clear Cache", de prin meniul Tools).

^TOP^
Bibliografie

 — Cascading Style Sheets (CSS)
 — CSS Programming From Wikibooks, the open-content textbooks collection