Tehnici Web

HTML

Claudia Chiriță . 2023/2024

https://html.spec.whatwg.org/

HTML = HyperText Markup Language

limbaj de marcare folosit pentru
- definirea structurii
- descrierea conținutului
unei pagini web

Documente HTML

conțin elemente (tags) care descriu diferite tipuri de conținut: paragrafe, ancore, liste, imagini, tabele ș.a.
browserele interpretează elementele și afișează documentele HTML într-o formă grafică

Documente HTML

pot fi scrise folosind orice editor text
au extensia htm sau html

Elemente HTML

<tag> conținut </tag>
tag de deschidere tag de închidere

nu sunt case sensitive (<tag>, <TAG>, <tAg>)

Elemente HTML

cu conținut - au tag de deschidere și de închidere
ex. <p> un paragraf despre ornitorinci </p>
elemente fară conținut - au doar tag de deschidere
ex. <br>, <hr>, <img>, <link>, <meta>

Structura unui document HTML

Document HTML = arbore de elemente

DOM = Document Object Model

Imbricare

elementele HTML trebuie să fie corect imbricate

<p><b> greșit imbricat </p></b>

<p><b> corect imbricat </b></p>

Imbricare

https://validator.w3.org/

flow content

Elemente block

încep și se termină cu o linie nouă și ocupă întreaga lățime a elementului părinte
pot conține alte elemente block sau inline
în HTML5 corespund categoriei flow content
ex: <p>, <div>, <h1>-<h6>

Elemente block

Elemente inline

ocupă doar spațiul rezervat elementului, fără a ocupa toată lățimea părintelui
nu încep neapărat cu o linie nouă
pot conține alte elemente inline
în HTML5 corespund categoriei phrasing content
ex: <span>, <img>, <a>

Elemente inline

Atribute

elementele HTML pot avea atribute
atributele specifică o informație adițională asociată elementului respectiv

nume-atribut="valoare"

Atribute

globale (se pot asocia tuturor elementelor)
```
...
```
specifice unui element anume
href este atribut al elementelor a, link
src este atribut al elementelor img, iframe

Istoric HTML

HyperText Markup Language (HTML)
Tim Berners-Lee, 1989, CERN
Extensible Markup Language (XML)
W3C, 1996
HTML4 (1997); XHTML(2000)
HTML5 (2012)

HTML5

HTML Living Standard
specificația HTML = living document, fără număr de versiune din 2011
adaugă tag-uri multimedia: <video>, <audio>
adaugă tag-uri pentru grafică: <svg>, <canvas>

HTML5

îmbunătățește conținutul semantic prin elemente structurale noi:
<main>, <section>, <article>, <header>, <footer>, <aside>, <figure>, <figcaption>, ...

Structura unui document HTML


<!DOCTYPE html> 
<html lang="ro">  
<head>      
     <meta charset="utf-8"> 
     <title> titlul documentului </title>
       ...
</head>
<body> 
    
</body>
</html>

Semantic Web

Web 3.0

“ Web pages are designed to be read by people, not machines. The semantic web is a vision of information that can be readily interpreted by machines, so machines can perform more of the tedious work involved in finding, combining, and acting upon information on the web. ”

Semantic HTML

“ Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look. ”

Semantics

“ Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). ... Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page. ”

Elemente semantice

structură mai clară a documentului HTML
evaluare optimă pentru motoarele de căutare (SEO)
paginile web pot fi mai bine înțelese de diverse aplicații (ex. aplicații text-to-speech)

structurare semantică vs non-semantică

<header></header>
<section>
   <article>
      <figure>
         <img>
         <figcaption></figcaption>
      </figure>
   </article>
</section>
<footer></footer>

<div id="header"></div>
<div class="section">
   <div class="article">
      <div class="figure">
         <img>
         <div class="figcaption"></div>
      </div>
   </div>
</div>
<div id="footer"></div>

Elementele heading

h1, ..., h6 - pentru structurarea documentului
1 cel mai important, 6 cel mai puțin important
stil implicit: text bold și mare
folosite de motoarele de căutare pentru indexarea conținutului paginii
marchează titlurile elementelor de secționare article, section, nav, aside

Elementele heading

Elementul article

<article> conținut articol </article>

element cu conținut de sine stătător, poate fi folosit independent de restul site-ului
fiecare element <article> trebuie să fie identificat printr-un titlu (element <h1> - <h6>)

Elementul article

<article> conținut articol </article>

nu are efecte vizuale
ex: postare într-un forum, un articol de revistă online, un articol de blog

Elementul section

<section> conținut secțiune </section>

definește o secțiune generică într-un document, având o temă clară dar subordonată temei generale a documentului
tema trebuie indicată printr-un titlu
(element <h1> - <h6>)
nu are efecte vizuale
ex: capitolele unei cărți

secțiuni cu articole

articol cu secțiuni

Elementul nav

<nav> elemente de navigare </nav>

reprezintă o porțiune a unei pagini cu hiperlegături
marchează blocuri de navigare importante
grupuri de linkuri pot apărea și în elemente footer sau header

Elementul nav

Elementul aside

<aside> conținut </aside>

reprezintă o porțiune a paginii cu conținut tangențial legat de conținutul paginii
ex: pentru reclame

Elementul aside

Elementul header

<header> conținut </header>

conținut introductiv pentru pagină sau pentru un element (secțiune, articol)
de obicei conține un heading h1,...,h6

Elementul footer

<footer> conținut </footer>

conținut adițional despre elementul de secționare cel mai apropiat
ex. autorul, drepturi de copyright
poate conține un element address cu datele de contact ale autorului

Elementul main

<main> conținut </main>

conținutul propriu-zis al paginii
există un singur main pe pagină

Elemente semantice strong, em, small

<strong> text important, de atenționare </strong>

<em> text accentuat </em>

<small> comentarii adiționale </small>

Elemente semantice strong, em, small

elementele b (bold), i (italic) au devenit și ele semantice în HTML5

<b> cuvinte cheie </b>

<i> termeni științifici / cuvinte în altă limbă
    / text alternativ </i>

Elementele p și hr

<p> reprezintă un paragraf (fragment de text ce evidențiază o idee)

<hr> reprezintă o pauză tematică între grupuri de paragrafe

Elementele div, span

<div> conținut </div>

<span> conținut </span>

<div>, <span> nu au înțeles special
folosite pentru stilizare, de obicei cu atributele id și class
înainte de <div> și după </div> se trece la rând nou

Elementul br

<br> pentru întreruperea liniei

nu se folosește pentru a marca trecerea la o idee nouă
versurile unei
poezii, componentele unei
adrese poștale

Liste neordonate

<ul> o listă în care ordinea elementelor (item-urilor)
     nu are importanță

<li> folosit pentru a crea elementele unei liste

Liste ordonate

<ol> o listă în care ordinea elementelor este importantă

atribute specifice: type, start, reversed

Liste de descrieri

<dl>, <dt>, <dd>

Elementul a - ancoră, hiperlegătură

<a href="URL"> conținut </a>

referință către o resursă
atribute:
- href: destinația linkului (un URL sau id al unui element din pagină)
- download: descărcarea resursei țintă (în loc de vizualizare)
- target = modul în care este încărcată în browser resursa țintă
  _blank | _parent | _self | _top| framename

legături interne = legături la un fragment din pagină

<a href="#id-meniu"> legătură la meniu
...
apasă

Elementul a - ancoră, hiperlegătură

Elementul img

<img src="adresa-imaginii" alt="text-explicativ">

atributele src și alt sunt obligatorii
alt = text alternativ care va fi afișat dacă imaginea nu poate fi procesată
atributele width și height pentru specificarea dimensiunii în pixeli
formate acceptate: PNG, GIF, JPEG, PDF, XML, APNG, SVG, MNG

Elementul img

Elementele figure și figcaption

<figure>
  <img src="adresa-imaginii" alt="text-explicativ">
  <figcaption> Figura 1. Descriere </figcaption>
</figure>

figure, împreună cu figcaption, formează un element de sine stătător (flow content)
pot fi utilizate și cu alte elemente, precum
<pre>, <code> și <video>

Elementele figure și figcaption

Elementele audio și video

<audio src="URL-audio" controls> mesaj </audio>

<video src="URL-video" controls autoplay> mesaj </video>

<video src="URL-video" controls poster="URL-img"> mesaj </video>

poster: imaginea va fi afișată când elementul video nu poate fi redat
mai multe surse alternative pot fi precizate în elemente copil de tipul <source>

Elementul iframe

<iframe src="URL" width="n1" height="n2"> text afișat
dacă website-ul nu poate fi inclus </iframe>

înglobarea unei pagini în interiorul paginii curente

Tabele

se folosesc numai pentru reprezentarea datelor
NU pentru layoutul paginii

<table> conținutul tabelului, linie cu linie </table>
<caption> descrierea tabelului (opțională) </caption>
<tr> linie formată din celule </tr> 
<td> celulă date </td>
<th> celulă header </th>

Tabele

pentru definirea tabelelor se pot folosi și elementele
thead, tbody, tfoot, colgroup, col
atribute specifice pentru td și th: colspan și rowspan
pentru celule care ocupă mai multe coloane/linii


          
                                        ,=.
                          ,=""""==.__.="  o".___
                    ,=.=="                  ___/
              ,==.,"    ,          , \,===""
             <     ,==)  \"'"=._.==)  \
              `==''    `"           `"
              
                         întrebări?