HTML

TEXT-LEVELSEMANTICELEMENTS
2014-2015
ProgrammazioneWeb
1
ElencoA-Z
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
<a> Iperlink
<abbr>abbreviazione
<b>evidenziareparole,keyword
<bdi>IndicatestextthatmayhavedirecBonalrequirements
<bdo>BidirecBonaloverride;explicitlyindicatestextdirecBon(leHto
right,ltr,orrighttoleH,rtl)
<br>Linebreak
<cite>CitaBon;areferencetotheBtleofawork,suchasabookBtle
<code>Computercodesample
<data>Machine-readableequivalentdates,Bme,weights,andother
measurablevalues
<del>Deletedtext;indicatesaneditmadetoadocument
<dfn>Thedefininginstanceorfirstoccurrenceofaterm
<em>Emphasizedtext
<i>AlternaBvevoice(italic)
<ins>Insertedtext;indicatesaninserBoninadocument
2014-2015
ProgrammazioneWeb
2
ElencoA-Z
• 
• 
• 
• 
• 
• 
• 
• 
<kbd>Keyboard;textenteredbyauser(fortechnicaldocuments)
<mark>Contextuallyrelevanttext
<q>Short,inlinequotaBon
<ruby>,<rt>,<rp>ProvidesannotaBonsorpronunciaBonguidesunder
EastAsiantypographyandideographs
<s>Incorrecttext(strike-through)
<samp>Sampleoutputfromprograms
<small>Smallprint,suchasacopyrightorlegalnoBce(displayedina
smallertypesize)
<span>Genericphrasecontent
•  <strong>Contentofstrongimportance
• 
• 
• 
• 
• 
• 
<sub>Subscript
<sup>Superscript
<Fme>Machine-readableBmedata
<u>Underlined
<var>Avariableorprogramargument(fortechnicaldocuments)
<wbr>Wordbreak
2014-2015
ProgrammazioneWeb
3
ElemenF<em>,<strong>
•  em:testoenfa*zzato
–  normalmentemostratoincorsivo
•  strong:testofortementeenfa*zzato
–  normalmentemostratoingrasse3o
<p>
HTML is <em>really</em>,
<strong>REALLY</strong> fun!
</p>
HTML is really, REALLY fun!
HTML
output
LineBreaks<br>
•  interruzionedilineanelmezzodiunelemento
<p>
HTML
Balaustrata di brezza<br>per appoggiare stasera<br>la
mia malinconia
</p>
Balaustrata di brezza
per appoggiare stasera
la mia malinconia
–  Nota:nonusarepiùdidue<br>consecuBvi
output
Elemento<q>
•  testocitato
<p>WWF's goal is to: <q>Build a future where people HTML
live in harmony with nature.</q></p>
output
WWF's goal is to: "Build a future where people live in harmony with nature."
–  alcunibrowserinserisconogliapici
Elemento<code>
•  codicediunprogramma
<code>
var x = 5;
var y = 6;
var z = x + y;
</code>
HTML
output
var x = 5; var y = 6; var z = x + y;
–  nonèpreforma^ato
–  èmostratoinmonospace
Elemento<abbr>
•  codicediunprogramma
HTML
<p>The <abbr title="World Health Organization">WHO</
abbr> was founded in 1948.</p>
output
The WHO was founded in 1948.
–  ilsignificatodellasiglaèmostratoconl'hoverdelmouse
that computers can use. The content of the element presents the information to people, and the datetime attribute presents the same information in
a machine-readable way.
<Fme>
• 
The time element indicates dates, times, or date-time combos. It might be
used to pass the date and time information to an application, such as saving
<BmedateBme="...">...</Bme>
event to a personal calendar. It might be used by search engines to find
– anhuman-readabledate/Bme
the most recently published articles. Or it could be used to restyle time information into an alternate format (e.g., changing 18:00 to 6 p.m.).
<p>We open at <time>10:00</time> every morning.</p>
N OT E
The ti
markin
time or
as “the
the cen
Figure
The datetime attribute specifies the date and/or time information in a stan- syntax.
<p>I have a date on <time datetime="2008-02-14
dardized time formatday</time>.</p>
illustrated
20:00">Valentines
in Figure 5-14. It begins with the
+ or - for hours ahead
date (year, month, day), followed
or behind Greenwich
•  A^ributodateFme
Mean Time
by the letter T to indicate time,
– listed
specificaladatapericomputer
in hours, minutes, seconds
year month day
hour minutes
(optional), and milliseconds (also
TIME
optional). Finally, the time zone
YYYY-MM-DD Thh:mm:ss±HH:MM
is indicated by the number of
DATE
TIME ZONE
hours behind (–) or ahead (+) of
Greenwich Mean Time (GMT).
A “T” always hour
For example, “–05:00” indicates
minute
precedes time
the Eastern Standard time zone,
second
2014-2015
ProgrammazioneWeb information
9
(optional)
which is five hours behind GMT.
dateFme
h^p://www.w3schools.com
2014-2015
ProgrammazioneWeb
10
ProgrammazioneWeb
11
CaraJeriUnicode
•  Alcunicara^eridevonoesseresosBtuiB
–  perchénonASCIIoperchéusaBneitagHTML
•  Lasequenzadiescapeiniziacon&esichiudeconun;
–  Es:&copy;,&#169;
•  SonodefiniBperognicara^ereunidenBficatoreoppure
unnumero
•  spazio,&,‘,<,>,©,®,TM,£,¥,€,–,—,‘,’,",",•,...
2014-2015
ProgrammazioneWeb
12
AlcunicaraJeri
CaraJere
sequenza
<>
&lt;&gt;
éèñ
&eacute;&egrave;&nBlde;
™©
&trade;&copy;
πδΔ
&pi;&delta;&Delta;
И
&#1048;
"&
&quot;&amp;
ProgrammazioneWeb
13
ProgrammazioneWeb
14
ALTRITAGBASE
ProgrammazioneWeb
15
Elemen+ancora
<ahref="...">...</a>
•  Esempio
–  <ahref="h^p://www.oreilly.com">O'Reillywebsite</a>
•  Ilcontenutodell'elementodiventaa}vo
–  ilbrowsercambiailcursore
–  untempovenivacoloratodiblueso^olineato
–  leimmaginiavevanounbordoblu
–  ilinkgiàvisitaBeranorappresentaBincolorporpora
2014-2015
ProgrammazioneWeb
16
AJributohref
•  SpecificalaURLdiundocumentonelweb
–  Vascri^ofradoppiapici
DuemodiperspecificareleURL
•  URLassolute
–  inizianoconh^p://
–  href="h^p://www.oreilly.com/"
•  URLrelaBve
–  allaURLdeldocumentocorrente
–  href="recipes/index.html"
–  href="spoon.gif"
2014-2015
ProgrammazioneWeb
17
Immagini<img>
•  <imgsrc="happyface.gif"alt="happy">
•  Duea^ribuB
–  src:laURLdell'immagina
–  alt:testoalternaBvo
an idea of what is missing. The handling of alternative text is inconsistent
The img
among modern browsers, however, as shown in Figure 7-3.
With image displayed
Firefox (Windows and Mac)
2014-2015
Chrome (Mac & Windows)
Internet Explorer (Windows)
Safari (Mac)
ProgrammazioneWeb
18
ProgrammazioneWeb
19
CommenF<!--…-->
•  testononmostratoall'utenteenoninterpretatodal
browser
<!-- This is a comment -->
HTML
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
output
This is a paragraph.
MetatdaF<meta>
•  InformazionirelaBveallapagina
–  usatedaibrowser,daimotoridiricerca,etc.
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta http-equiv="refresh" content="30">
</head>
•  Vannoinseritenellohead
•  Normalmentehannonameecontent
•  Alcuniusanoh^p-equivalpostodiname
•  LadichiarazionedelcharsetèobbligatoriainHTML5
HTML
Elemento<link>
•  Allegaunfileallapaginacorrente
–  vaposizionatonellasezionehead
<link href="filename" type="MIME type" rel="shortcut icon" />
•  Favicon
<link rel="icon" href="demo_icon.gif" type="image/gif"
sizes="16x16">
•  CSS
<link rel="stylesheet" type="text/css"
href="theme.css">
ProgrammazioneWeb
23
W3CHTMLValidator
<p>
<a href=http://validator.w3.org/check/referer>
<img src="http://ppl.eln.uniroma2.it/pw/img/w3c-html.png"
alt="Validate" />
</a>
</p>
•  validator.w3.org
•  controllailcodicehtmlenevalidalasintassi
•  ilbrowsermascheramolBerrori