Tomasco Ermenegildo
Comportamento (JS)
Presentazione (CSS)
Contenuto (HTML)
HTML per definire il contenuto delle pagine web
CSS per specificare il layout delle pagine web
JavaScript per definire il comportamento delle
pagine web
<!DOCTYPE html>
<html lang="it">
<head>
<title>Tecnologia per la comunicazione</title>
<meta name="description" content="Modulo formativo ...">
<meta name="keywords" content="HTML5, CSS, Javascript, XML">
<meta name="author" content="Ermenegildo Tomasco">
<link rel="stylesheet" href=“stile.css">
</head>
<body>
<h1>La mia prima pagina</h1>
<p>Il mio primo pragrafo.</p>
</body>
</html>
<tagname attibuti>contenuto</tagname>
Hyper Text Markup Language
<html lang="it">
<br>
<p title="Introduzione al corso">Il corso di "Tecnologia per la
comunicazione" si propone di fornire allo studente</p>
<a href="http://www.google.com">Google</a>
<img src="images/img1.jpg" alt="Fiat 500" width="150"
height="142">
<input type="button" value="Clicca qui" id="mybutton">
<video width="320" height="240" controls muted loop
poster="multimedia/HTML5.png">
<source src="multimedia/HTML5.mp4" type="video/mp4">
<source src="multimedia/HTML5.ogg" type="video/ogg">
Il tuo browser non supporta il tag video
</video>
<audio controls autoplay loop>
<source src="multimedia/TheSoundofSilence.ogg" type="audio/ogg">
<source src="multimedia/TheSoundofSilence.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio
</audio>
Attribuire uno speciale significato al testo
<b>Grassetto</b>.
<i>Corsivo</i>.
<ins>Sottolineato</ins>.
<mark>Marcato</mark>.
<em>Accentuato</em>.
<small>Piccolo</small>.
<del>Errore</del>.
<strong>Importante</strong>.
Normale<sub>pedice</sub>.
Normale<sup>apice</sup>.
Inline – attributi di stile nei tag in HTML
<h1 style="color:blue;font-family:verdana;font-size: 24pt;
text-align:center">La mia prima pagina</h1>
Interni – viene inserita una sezione
<head><style> elementi di stile </style> </head>
Esterni – vengono usati uno o più fogli di stile .CSS
esterni
<link rel="stylesheet" href="styles.css">
esempio
Interni
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>La mia pagina web</h1>
<p>Testo colorato</p>
<p>Paragrafo 2</p>
</body>
</html>
<!DOCTYPE html>
esempio.htm
<html>
<head>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<h1>La mia prima pagina</h1>
<p>Il mio primo paragrafo.</p>
<p class="error">Pagina non trovata</p>
<p id="p01">Io sono blu</p>
<p class="error">Immagine piccola</p>
<p class="noborder"><img
src="images/img1.jpg" alt="fiat 500"
style="float:left;width:259px;height:194px">La fiat
500</p>
</body>
</html>
h1 {
styles1.css
color:blue;
font-family:verdana;
font-size:24px;
}
p {
font-family:courier;
font-size:16px;
border:1px solid black;
padding:10px;
margin:30px;
}
p#p01 {
color:blue;
}
p.error {
color:red;
}
p.noborder {
border:0px;
}
Definiscono blocchi interpretati da un browser a
prescindere dall’aspetto grafico
<section>
<article>
<aside>
<header>
<footer>
<hgroup>
<nav>
JavaScript è il linguaggio di programmazione per
HTML
◦ Accedere agli elementi HTML
◦ Cambiare il valore di un attributo HTML
◦ Cambiare gli stili
◦ Rimuovere/Aggiungere elementi e attributi HTML
◦ Gestire eventi in una pagina HTML
DOM standard per l’accesso ai documenti
Definisce:
◦ Gli elementi HTML come oggetti
◦ Le proprietà degli elementi HTML
◦ I metodi per accedere agli elementi HTML
◦ Gli eventi per tutti gli elementi HTML
JavaScript può essere utile per:
◦ Leggere/Modificare una proprietà di un elemento HTML
es. modificare l’HTML di un paragrafo
◦ Validazione di un input form
es lunghezza di una stringa maggiore di 6 caratteri
◦ Visualizzare del contenuto dinamico in una pagina
es. Visualizzare il risultato di una operazione
◦ Gestione di eventi
onChange, onClick, onLoad,...
I form HTML sono usati per raccogliere dati
dall’utente.
<form action=“invia.php" method="GET" target="_blank">
…….
</form>
Form esempio
Scarica
