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
  • INPUT
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” / “center” / “justify” / “left” / “middle” / “right” / “top” CAPTION / DIV / H1 H2 H3 H4 H5 H6 / HR / IMG / LI / P / TABLE / TD TH / 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 _blank / _parent / _self / _top A
text Text color colore BODY
title testo ABBR ACRONYM / IMG /
type “1” / “A” “a” / “circle” / “disc” / “I” “i” / “square”

application/javascript
text/css / text/html / text/plain / text/tcl / text/vbscript / text/xml

OL / UL / LINK / 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 percentuale / pixel HR / IMG / TABLE / TD TH

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 width HR / TABLE / TD TH / TR
testo alt / name / title / id A / IMG / …
URL src / href IMG / A / LINK
“1”
“A” “a”
“I” “i”
type OL
application/javascript type SCRIPT
“bottom” align / valign IMG / TD TH / TR
“center” align DIV / H1…H6 / HR / P / TABLE / TD TH / TR
“circle” type UL
“disc” type UL
“justify” align DIV / H1…H6 / HR / P / TD TH / TR
“left” align DIV / IMG / H1…H6 / HR / P / TABLE / TD TH / TR
“middle” align / valign IMG / TD TH / TR
“right” align DIV / IMG / H1…H6 / HR / P / 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

...