Author Archives: admin

Attributi comuni

Alcuni attributi possono essere utilizzati all’interno di tag diversi.

Valori
class “testo” Nome della classe per il foglio di stile
dir
  • “ltr”
  • “rtl”
Direzione del testo
hidden “hidden” Elemento nascosto (non visibile)
id “testo” Tutti gli elementi con id possono essere manipolati tramite
lang “testo” Lingua…
name “nome” Un elemento con nome può essere manipolato tramite
style Specifiche di stile
tabindex “numero” L’ordine nella sequenza di navigazione con il tasto TAB
title “testo” Il suggerimento (tooltip) che appare al passaggio del mouso sull’elemento

Attributi comuni

Alcuni attributi possono essere utilizzati all’interno di tag diversi.
Alcuni attributi comuni sono specifici dei moduli.

Valori Nel tag
autofocus “autofocus” L’elemento riceve il fuoco quando la pagina viene caricata
class “testo” Nome della classe per il foglio di stile
disabled “disabled”
  • BUTTON
  • FIELDESET
  • INPUT
  • OPTGROUP
  • OPTION
  • SELECT
  • TEXTAREA
Il campo disabilitato non viene inviato, non permette l’accesso al valore per copia, incolla, modifica
form “testo” Specifica a quale form appartiene il campo
formaction URL Per un pulsante “submit” è possibile specificare un’URL diverso da quello del form
id “testo” Tutti gli elementi con id possono essere manipolati tramite
readonly “readonly”

 

  • INPUT
  • TEXTAREA
Il valore può essere copiato ma non può essere modificato
style Specifiche di stile
tabindex “numero” L’ordine nella sequenza di navigazione con il tasto TAB

Colori RGB – 2

RGB
Red
Green
Blue

Calcoli – 2

Operazioni con due argomenti numerici

x
y
+ < |
> &
* <= ^
** >= <<
/ == >>
% != >>>
Math.max() ||
Math.min() &&
Math.pow()

Calcoli – 1

Operazioni con un argomento numerico

Valore della x
+ Segno più ! Not logico
Segno meno ~ Not dei bit
typeof Tipo?
Math.abs() Valore assoluto
Math.ceil() Arrotondamento verso l’alto
Math.floor() Arrotondamento verso il basso
isFinite() È finito?
isNaN() Non è un numero?
Math.round() Arrotondamento all’intero più vicino
Math.sqrt() Radice quadrata

Accesso agli elementi

Le possibilità per accedere a un elemento della pagina sono tante… ed è facile confondersi

L’elemento possiede un identificativo unico nella pagina
L’elemento possiede un nome unico nella pagina
L’elemento possiede un nome unico nella pagina
L’elemento possiede un identificativo unico nella pagina
Elenco degli elementi di un certo tipo.
Seleziona il 2°…
Elenco degli elementi con una certa classe
Elenco delle immagini nella pagina
… moduli, …
La larghezza dell’immagine con l’identificativo …

Raccomandazioni

Osserva

  • HTML5 semplifica molte cose del passato!
  • Alcune richieste di XHTML sono state abbandonate in HTML5
  • Ma XML incombe sugli standard futuri quindi…
  • E non tutte le novità sono implementate…

Pagina web conforme


Osserva

  1. Specificare il tipo di documento: <!doctype html>
  2. Specificare la codifica: <meta charset=”UTF-8″>
  3. Utilizzare i tag obbligatori del passato: html, head, body, title
  4. Utilizzare i nuovi tag per le sezioni: ARTICLE, ASIDE, FOOTER, …
  5. NON utilizzare la tecnica precedente per le sezioni: <div id=”…”>
  6. Chiudere i tag vuoti: <br/>, <img … />, …
  7. Delimitare con le doppie virgolette i valori degli attributi: “left”, …
  8. Scrivere tutto minuscolo (tag, attributi, valori, nomi dei file): <img align=”left” … />
  9. Non lasciare spazi prima e dopo del segno =: <img align=”left” … />
  10. Specificare l’attributo alt delle immagini: <img alt=”titolo” … />
  11. Specificare le dimensioni delle immagini: <img alt=”titolo” style=”height:…px;width=…px” … />
  12. Per indentare usare 2 spazi invece delle tabulazioni
  13. Non andare a capo, o lasciare righe vuote, senza motivo
  14. L’attributo type non è necessario:

Non utilizzare (sostituire con)

  • Tag: APPLET (EMBED, OBJECT), BIG (H1), CENTER, FONT, FRAME FRAMESET NOFRAMES (IFRAME, CSS), MARQUEE, STRIKE (DEL, S), TT (KBD)
  • Attributi di BODY: alink, bgcolor, link, text, vlink, …
  • Attributi di HR: align, color, noshade, size, width
  • Attributi di IMG: align, border, hspace, lowsrc (.jpg), name (id), vspace
  • Attributi di TABLE: align, bgcolor, border, cellpadding, cellspacing, width, …
  • Attributo di UL: type
  • Continua…

Riepilogo attributi

Un attributo può assumere valori predefiniti, numerici, testuali, … e può comparire in diversi tag

Per esteso Valori Con i tag
align Alignment
  • bottom | middle | top
  • center | justify | left | right
CAPTION DIV H1 H2 H3 H4 H5 H6 HR IMG LI P TABLE TD TR
alink Active link color colore BODY
alt Alternative text testo IMG
background Background immagine BODY
bgcolor Background color colore BODY TABLE TD TH TR
border pixel IMG TABLE
cellpadding pixel TABLE
cellspacing pixel TABLE
class testo
color colore FONT HR
colspan column span numero TD TH
face nome FONT
height pixel IMG (TD TH) TR
href Hypertext reference URL A
hspace Horizontal space pixel IMG
id Identifier testo
link Link color colore BODY
name testo A …
noshade noshade HR
rel Relantionship stylesheet | …
LINK
rowspan numero TD TH
size pixel FONT HR
src Source URL IMG SCRIPT
start valore OL
style testo
target
  • testo
  • _blank | _parent | _self | _top
A
text Text color colore BODY
title testo ABBR ACRONYM IMG …
type
  • circle | disc | square
  • 1 A|a I|i
  • application/javascript
  • text/css | text/html | text/plain | text/tcl | text/vbscript | text/xml
LINK OL UL SCRIPT
valign Vertical alignment bottom middle top TD TH TR
value numero LI (OL)
vlink Visited link color colore BODY
vspace Vertical space pixel IMG
width pixel | percentuale HR IMG TABLE TD

Un valore costante può comparire in diversi attributi…

Per esteso Con gli attributi Con i tag
colore alink | bgcolor | color | link | text | vlink BODY HR TABLE TD TH TR
numero border | cellpadding | cellspacing | colspan | height | hspace | rowspan | size | start | value | vspace | width HR IMG LI OL TABLE TD TH TR
percentuale height | width HR IMG TABLE TD TH TR
testo alt | id | name | title IMG …
URL href | src A IMG LINK
1 numeric… type OL
A | a
alphabetic… type OL
application/javascript type SCRIPT
bottom align | valign IMG TD TH TR
center align DIV P H1… TABLE TD TH TR
circle type UL
disc type UL
I | i
italian? type OL
justify align DIV P H… TD TH TR
middle align | valign IMG TD TH TR
right align DIV IMG TABLE TD TH TR
square type UL
stylesheet rel LINK
text/css text/html
text/plain text/tcl
text/vbscript text/xml
type LINK
top align | valign IMG TD TH TR

INPUT > range

Prova a interagire con il campo di tipo range, cambiando anche browser.




Trascina il cursore e il valore corrispondente apparirà nella casella di testo sottostante

Orologio digitale 2


...