Site-uri și aplicații pentru web

Curs 3


Capitolul 3. HTML5

Elemente preluate din HTML 4

Elementele prezentate anterior ( p, h1, h2 etc. ) au rolul de a permite scrierea diferită a unor informaţii diferite din punct de vedere semantic. Înţelegerea faptului că un element p este un paragraf iar un element h1 este titlul documentului face inutilă orice dezvoltare a subiectului. Oricine poate indica paragrafele şi titlurile de diferite nivele dintr-un document.

Pentru a realiza documente hipertext cu conţinuturi diverse, setul de elemente HTML4 utilizat în cursurile precedente trebuie însă completat cu alte elemente care permit inserarea într-un document a unor informaţii comune: imagini, liste, tabele şi, fiind vorba de documente hipertext, a legăturilor.

img

Elementele img se folosesc pentru inserarea în fişierele hipertext a imaginilor. Exemplu:

   <img src="imagini/bran12.jpg" alt="Castelul Bran iarna">

Atributul href permite specificarea căii spre fişierul care conţine imaginea. Fişierul referit poate fi în diverse formate:

  1. JPEG (prescurtare de la Joint Photographic Experts Group) având extensia .jpg. Acest format permite memorarea imaginilor într-un format comprimat;
  2. GIF (prescutare de la Graphics Interchange Format) având extensia .gif. Imaginile în format GIF nu sunt comprimate (includ reprezentarea tuturor pixelilor care compun imaginea) dar numărul de culori este redus (255). Formatul permite şi realizarea unor mici animaţii;
  3. PNG (prescurtare de le Portable Network Graphics) având extensia .png. Imaginile în format .png sunt similare ca nivel al calității cu cele codificate în format .jpg şi admit în plus impunerea unui grad de transparenţă (pe lângă componentele Red Green şi Blue, un punct de pe ecran poate avea impusă şi valoarea transparenței - componenta alpha).

Atributul alt specifică un şir de caractere care va fi utilizat dacă imaginea nu poate fi afişată. Este cazul lipsei fişierului sau în cazul în care browser-ul este configurat astfel încât să nu afişeze imaginile.

Observație: Toate site-urile sunt "vizitate" periodic de aplicații care realizează indexarea automată a paginilor web. Pentru a crește vizibilitatea unui site, utilizarea corectă a marcajelor, în special h1, h2 dar și a atributului alt în cazul imaginilor, este deosebit de importantă. O scurtă introducere în S.E.O. (eng. Search Engine Optimization) este accesibilă la adresa https://support.google.com/webmasters/answer/7451184

Din perspectiva browser-ului, o imagine este un simbol grafic şi este tratată ca orice caracter. Ea va fi deci afişată în linie cu caracterele care o preced şi o succed. Se spune din acest motiv că img este un element "inline", spre deosebire de p, h1 etc. care sunt elemente de tip "bloc". Diferenţa dintre elemente inline şi blocuri este prezentată în imaginea următoare.

Pentru poziţionarea diferită a imaginilor se va utiliza tot CSS.

Definirea dimensiunilor la care se afişează o imagine poate pune unele probleme. Pentru a controla modul de afișare se folosesc simultan proprietăţile width şi max-width. Proprietatea width se exprimă de obicei ca procent din lăţimea spaţiului disponibil iar max-width se exprimă în pixeli, mărimea indicată corespunzând cu mărimea normală a imaginii. Exemplu:

#blLateral img {
  max-width: 320px;  /* dacă lățimea efectivă a imaginii este de 320px */
  width: 47%;        /* scalare automată daca blLateral se îngustează */
  height: auto;      /* Mentine proportiile corecte între lățime și înălțime */
}

Astfel stilizate, imaginile conţinute în blocul blLateral vor fi afişate la mărimea normală sau vor fi redimensionate astfel încât să ocupe 47% din lăţimea disponibilă. Dacă fereastra de afişare a browser-ului este mărită astfel încât 47% din spațiul disponibil ar însemna mai mult de 320px (mărimea efectivă a imaginii), scalarea nu se mai produce, imaginea rămânând la această mărime (320px). Altfel spus, scalarea va opera doar "în jos", în sensul micşorării imaginilor.

Observaţie: Încărcarea imaginilor folosite ca fundal în diferite regiuni ale paginii se realizează prin CSS, nu prin folosirea elementelor img.

a

Elementele a (eng. anchor) sunt fundamentale în Web deoarece ele materializează noţiunea de hiperlegătură. Un element a are un atribut, href, care permite specificarea paginii care va fi încărcată dacă elementul este selectat cu mouse-ul. Exemple de utilizare:

   <a href="info.html">informaţii suplimentare ...</a>
Vizitaţi <a href="https://www.louvre.fr/en/visites-en-ligne">muzeul virtual Luvru</a>  şi descoperiţi...

Observaţie: Dacă pagina referită prin atributul href aparţine aceluiaşi site, adresa sa va fi relativă la locaţia de pe disc a paginii curente. De cele mai multe ori va fi simpla denumire a fişierului .html, deoarece fişierele .html se pun de regulă în acelaşi director. Dacă este referită o pagină dintr-un alt site, adresa folosită va avea structura oricărei adrese din Internet, respectiv va începe cu specificarea protocolului (http:// sau https://), apoi va fi indicat numele site-ului (nume de domeniu, de exemplu www.louvre.fr) după care se va scrie calea spre fişierul referit. Dacă numele fişierului referit nu apare, se subînţelege că fişierul referit este index.html.

Frecvent selectarea unei hiperlegături se realizează folosind o imagine. În această situaţie, între marcajele <a> şi </a> se inserează un element img. Exemplu:

   <a href="afisare_cos.php"><img src="cos_mare.gif" alt="Cos"></a>

Protocolul indicat în referinţa spre fişier poate fi http:// sau https://. A doua variantă corespunde accesării unei pagini folosind o conexiune securizată. Este varanta obligatorie în cazul paginilor magazinelor online deoarece acestea expun formulare destinate culegerii unor date: articolele cumpărate, identitatea cumpărătorului şi datele cardului bancar folosit la plata online.

Observație: De câțiva ani securizarea a devenit oarecum obligatorie. Aplicațiile de indexare automată a paginilor web (denumite web crawler-e, de exemplu Googlebot), adevărații arbitrii ai WWW, tratează diferit site-urile securizate față de cele nesecurizate. O diferențiere similară se face și în funcție de posibilitatea de a le accesa de pe telefoane mobile. Evident, cele securizate și accesibile de pe toate terminalele sunt avantajate. Deci pentru a câștiga la capitolul vizibilitate, trebuie să securizăm site-urile și să le facem "responsive" (accesibile de pe diferite dispozitive).

ul

Elementul ul (eng. unordered list) este folosit pentru inserarea în documente a listelor neordonate. Un element ul este compus din elemente li, ambele elemente fiind de tip "bloc". Exemplu:

<ul>
    <li>Portocale</li>
    <li>Banane</li>
    <li>Lămâi</li>
</ul>

Pictograma folosită la marcare (bulina) şi chiar modul de dispunere a intrărilor în listă (vertical, ca în exemplu, sau orizontal, una lângă alta), pot fi impuse folosind reguli CSS.

ol

Elementul ol (eng. ordered list) este destinat inserării în documente a listelor ordonate. Un element ol conţine elemente li. Exemplu:

<ol>
    <li>Cafea</li>
    <li>Ceai</li>
    <li>Lapte</li>
</ol>

Dacă numerotarea nu începe de la 1 ci de la o valoare n, elementului ol i se va adăuga atributul start. Exemplu:

  <ol start="7">

Dacă marcarea listei nu se face cu cifre arabe ci cu litere sau cifre romane, marcajului ol i se va adăuga atributul type. Valorile pe care le poate lua acest atribut sunt următoarele:

type = "1" Numerotare cu numere (cazul implicit)
type = "A" Numerotare cu litere mari (A, B, ...)
type = "a" Numerotare cu litere mici (a, b, ...)
type = "I" Numerotare cu cifre romane (I, II, ...
type = "i" Numerotare cu cifre romane (i, ii, ...



table

Elementul table permite inserarea în documentele hipertext a tabelelor. Din perspectiva aplicaţiilor de navigare, un tabel este un bloc format din linii (elemente tr, table row). La rândul lor liniile sunt compuse din celule care pot fi elemente td, în cazul celulelor obişnuite sau th pentru celulele ale căror conținut trebuie scris cu bold (de regulă cele care formează capul tabelului, dar nu-i obligatoriu). Exemplu:

<table>
<thead>
<tr>
   <th>Produs</th>
   <th>Pret</th>
   <th>Cantitate disponibila</th>
</tr>
</thead>
<tbody>
<tr>
   <td>Pantofi Lux</td>
   <td>156</td>
   <td>243</td>
</tr>
<tr>
   <td>Pantofi Carmen</td>
   <td>174</td>
   <td>189</td>
</tr>
</tbody>
</table>

Conţinutul unei celule dintr-un tabel poate fi o secvenţă de text, ca în exemplul dat, o imagine inserată folosind un element img sau orice combinaţie din cele două.

Ca şi în Microsoft Word, un tabel poate avea şi celule unite. Pentru a indica acest lucru elementele td sau th afectate vor avea atribute colspan (unire de celule dispuse pe orizontală, una lângă alta) şi rowspan (unire de celule dispuse una sub alta).

Pentru a nu greşi la descriere, în cazul unui tabel având celule unite se recomandă să se pornească de la o reprezentare grafică a acestuia pe care să se indice celulele care trebuie efectiv descrise, ca în figură:

<table>
. . .
<tbody>
<tr>
    <td> ... </td>
    <td colspan="2"> ... </td>
    <td> ... </td>
</tr>
<tr>
    <td rowspan="3"> ... </td>
    <td> ... </td>
    <td colspan="2"> ... </td>
</tr>
<tr> 
    <td> ... </td>
    <td colspan="2" rowspan="2"> ... </td>
</tr>
<tr>
    <td> ... </td>
</tr>
</tbody>
</table>

Observaţie: Afișarea îngrijită a informaţiei în celulele tabelului va fi realizată folosind CSS.


Elementele div şi span

Codificarea paginilor Web necesită uneori utilizarea unor elemente care nu au o semnificaţie în raport cu conţinutul pe care îl delimitează ci realizează doar un efect de grupare. Un astfel de grup de elemente va putea primi în CSS un set comun de reguli de afişare. Elementele folosite în astfel de situaţii sunt div şi span.


div

Un element div (eng. Content Division element) este de tip "bloc". El este de cele mai multe ori folosit ca element de grupare, deci va conține un ansamblu de elemente cărora trebuie să li se impună un anumit set de proprietăţi CSS. Un exemplu clasic este blocul utilizat pentru a centra conţinutul unei pagini în fereastra browser-ului. Acest bloc este primul inserat în body.

<body>
  <div class="container">
   ...   <!-- continutul paginii -->
  </div>
</body>

span

Elementul span este tot un element de grupare, dar de tip "inline". El permite de exemplu delimitarea unei zone dintr-un paragraf care trebuie afişată altfel decât restul paragrafului.

Exemplu:

  <p>Este <span class="important">un lucru bine făcut </span> care va produce 
  în timp <span class="important">efecte interesante</span>.</p>

TOP

Elemente noi, introduse în HTML5

Ansamblul elementelor HTML4 descris anterior este completat în HTML5 cu alte câteva elemente noi, tot cu semnificaţie bine definită din punct de vedere semantic: main, article, section, header, footer, nav şi aside. Toate aceste elemente sunt de tip "bloc". Modul lor de utilizare pentru descrierea unei pagini Web rezultă din imaginea următoare.


article

Un element article conţine un ansamblu de informaţii care are sens şi în afara paginii, deci poate fi copiat şi folosit în altă parte. Exemple: o postare într-un blog, un eseu, un text care tratează un subiect precizat.


section

Un element section este tot un element de grupare, folosit pentru a grupa un ansamblu de elemente unite semantic. Elementele unei secţiuni nu au sens în afara zonei în care sunt inserate. Un exemplu ar putea fi porțiunea dintr-o pagină web care afișează o galerie de imagini sau porțiunea care afișează produsele de un anumit fel dintr-un magazin virtual.

Exemplu:

Secțiunea prezintă categoriile de specialiști ai unei firme. Evident secțiunile alăturate, cea precedentă și cea care urmează, prezintă alte lucruri.


header

Elementul header este folosit pentru a delimita zona de cap a paginii, a unui element section sau a unui element article. Un header poate conţine imagini, logo-uri şi secvenţe de text, dar de cele mai multe ori conține un element heading (h1 ... h6).

Observație: Indiferent de poziţia în care apare, un element h indică un titlu. Utilizarea elementelor h, precum şi a celorlalte marcaje care au un conţinut semantic, nu are legătură atât cu stilizarea cât cu structurarea corectă a documentului. Aceasta este deosebit de importantă, multe dintre elementele definite în HTML5 fiind destinate de altfel acestui scop. Structurarea corectă produce trei efecte:

  1. creează premisele citirii corecte a paginii de către persoanele cu deficienţe de vedere (care folosesc aplicaţii de navigare speciale sau activează facilităţi specifice existente în browser-ele uzuale) şi
  2. ajută la crearea de către browser a unui model corect al paginii (denumit DOM – DOcument Model). Paginile pot conţine secvenţe de cod scrise în limbajul JavaScript care realizează navigarea prin DOM, selectează elementele acestuia şi modifică dinamic unele atribute.
  3. ajută aplicațiile de indexare automată (web crawler-ele) în procesul de stabilire a cuvintelor cheie specifice site-ului.

footer

Un element footer este acea zonă de la sfârşitul paginii care conţine informaţii privind autorul paginii precum și diverse alte informații generale și hiperlegături care realizează trimiteri la alte pagini din site sau la pagini conexe. Şi elementele article sau section pot conţine elemente footer.


main

Elementul main al unei pagini Web conţine informaţia principală din pagină, structurată de regulă pe articole şi secţiuni. O pagină nu poate avea decât un element main. Elementul main nu poate fi continut în header, nav, aside, footer, article sau section.


nav

Un element nav este destinat navigării. Poate fi vorba de navigarea în site sau navigarea în interiorul paginilor lungi.

Elementul nav va conţine hiperlegături (elemente a) sau, în cadrul site-urilor complexe, meniuri derulante. Un element nav poate fi plasat înainte de header, în header, după header sau pe o coloană, lateral.


aside

Un element aside reprezintă o zonă a paginii sau a unui article care conține informații legate doar tangenţial de conţinutul paginii sau articolului. Un exemplu ar fi zona care conţine reclame ale unor sponsori sau o zonă cu informaţii complementare conținutului unui articol.


figure

Elementul figure este folosit pentru a insera o imagine într-un document. Spre deosebire de varianta din HTML4, în HTML5 figure este de tip bloc. El conţine un element img (similar celui din HTML4) şi, opţional, un element figcaption care permite inserarea după imagine sau înaintea ei a unui text explicativ. Exemplu:

<figure> 
   <img src="imgCurs3/fig8.png" alt="Pretty Woman">
   <figcaption style="text-align: center;">Pretty Woman, 1990.</figcaption>
</figure>
Pretty Woman
Pretty Woman, 1990.

TOP

Aplicație

Tema propusă

Se propune reproducerea unei părți dintr-o pagină a site-ului revistei Vogue.

Pagina poate fi accesată la adresa: https://www.vogue.com/article/nantucket-fall-vacation-holiday-guide.

Prima parte a paginii este prezentată în imaginea următoare:


Observație: În web design realizările unor stiliști care lucrează pentru firme prestigioase (mai ales a celor implicate în vânzarea unor produse de lux, ca Vogue) reprezintă frecvent surse de inspirație. Un model de site (eng. template) reușit poate deveni o bază pentru realizarea mai multor site-uri.


Rezolvare

Înainte de a începe reproducerea site-ului, se va realiza o analiză a soluțiilor utilizate de designer. De exemplu se poate vedea cum au fost realizate două elemente importante, respectiv a logo-ul și meniul. Se poate observa că logo-ul este de fapt o imagine iar intrările în meniul paginii sunt șiruri de caractere, în imagine evidențiindu-se efectul selectării.

În lipsa stilizării, conținutul acestei regiuni s-ar putea codifica astfel:

<header>
    <ul>
       <li>NEWSLETTER</li>
       <li>SUBSCRIBE NOW</li>
    </ul>
    <nav>
       <img src="imgCurs3/logo.jpg" alt="logo" />
       <ul>
          <li>FASHION</li>
          <li>BEAUTY</li>
          <li>CULTURE</li>
          <li>LIVING</li>
          <li>RUNWAY</li>
          <li>SHOPPING</li>
          <li>VIDEO</li>
          <li>GOOD MORNING VOGUE</li>
      </ul>
    </nav>
</header>
<main>
    <div>LIVING</div>
    <h2>21 Reasons to Visit Nantucket This Fall, From Drive-In Movies to Vintage Shopping</h2>
    <img src="imgCurs3/autor.jpg" alt="autor" />
    <p>BY ZACHARY WEISS</p>
    <p>September 18, 2020</p>
</main>

Sau, afișat în browser:

  • NEWSLETTER
  • SUBSCRIBE NOW
logo
  • FASHION
  • BEAUTY
  • CULTURE
  • LIVING
  • RUNWAY
  • SHOPPING
  • VIDEO
  • GOOD MORNING VOGUE
LIVING

21 Reasons to Visit Nantucket This Fall, From Drive-In Movies to Vintage Shopping

autor

BY ZACHARY WEISS

September 18, 2020


Observaţie: De regulă listele de adrese din nav sunt marcate ca liste neordonate, ul. Dispunerea pe orizontală şi stilizarea afişării legăturilor se realizează folosind reguli CSS specifice. O tratare detaliată a modului de construire a unui <nav> poate fi accesată aici

Pagina analizată continuă cu o imagine de mari dimensiuni:


Mai departe este inclus un text care conține și link-uri:

There was—at one point in the not so distant past—a defined high season for coastal destinations 
like the island getaway of <a href="#">Nantucket</a>. Namely, the strict Memorial Day 
to Labor Day <a href="#">window</a> in which the local population usually swelled 
with city escapists, their bags full of rosé and white denim. But, as our offices become more 
mobile, and our tether to a single home base becomes increasingly slack, these rules have 
changed. With that in mind, find here a one-stop <a href="#">guide</a> for everything 
an impromptu Nantucket dweller might want or need during the typical—or, in this case, 
<a href="#">not-so-typical</a>—fall vacation season.

Sau, inserat în pagină:

There was—at one point in the not so distant past—a defined high season for coastal destinations like the island getaway of Nantucket. Namely, the strict Memorial Day to Labor Day window in which the local population usually swelled with city escapists, their bags full of rosé and white denim. But, as our offices become more mobile, and our tether to a single home base becomes increasingly slack, these rules have changed. With that in mind, find here a one-stop guide for everything an impromptu Nantucket dweller might want or need during the typical—or, in this case, not-so-typical—fall vacation season.


TOP