Scribd
Carica
13 visualizzazioni

HTML Js

Caricato da

50shadesofember
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
13 visualizzazioni

HTML Js

Caricato da

50shadesofember
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 6

Progettazi

one di </
JAV
A
UI
pagine >

web Simone Mazza 3Ft


U
X
Introduzio
</
ne
La progettazione di pagine web è
un processo che combina
l'estetica, l'usabilità e la
HT
ML > funzionalità. Consiste nella
creazione di pagine internet che
C siano attraenti, facili da usare e
+ capaci di soddisfare le esigenze
degli utenti. Due dei principali
+ linguaggi utilizzati in questo
processo sono l'HTML e il
JavaScript.
<html>
<head>
Esempio di
codice html di
<meta charset="UTF-8">

HTM
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">

una pagina web


<title>La Mia Prima Pagina Web</title>
</head>
<body>
<header>

di un azienda con
<h1>Benvenuti nella Mia Pagina
Web</h1>
</header>
<nav>

una home CS ed
<ul>
L'HTML è il linguaggio <li><a href="#home">Home</a></li>

L
<li><a href="#about">Chi

di markup standard Siamo</a></li>


S
elementi estetici
<li><a
href="#contact">Contatti</a></li>
per creare pagine </ul>
</nav>

web. È utilizzato <section id="home">


<h2>Home</h2>
<p>Questa è la sezione home della mia
per strutturare il pagina web.</p>
</section>

contenuto di una
<section id="about">
<h2>Chi Siamo</h2>
<p>Informazioni sulla nostra

pagina, includendo azienda.</p>


</section>
<section id="contact">
elementi come <h2>Contatti</h2>
<p>Compilate il form per

titoli, paragrafi, contattarci.</p>


</section>
<footer>
link, immagini e <p>&copy; 2024 La Mia Azienda</p>
</footer>

form. </body>
</html>
TUTTI I DETTAGLI SUL CODICE HTML
1. Dichiarazione del DOCTYPE
html
<!DOCTYPE html>
Questa dichiarazione informa il browser che il documento utilizza la specifica HTML5.
2. Elemento <html>
html
<html lang="it">
Questo tag avvolge tutto il contenuto della pagina. L'attributo lang="it" specifica che la lingua del documento è l'italiano.
3. Elemento <head>
html
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pagina Web Dinamica</title> </head>
Il tag <head> contiene meta-informazioni sulla pagina:
•<meta charset="UTF-8"> specifica la codifica dei caratteri.
•<meta name="viewport" content="width=device-width, initial-scale=1.0"> rende la pagina responsive, adattandosi alla larghezza del dispositivo.
•<title> definisce il titolo della pagina che appare nella scheda del browser.

4. Elemento <body>
html
<body> ... </body>
Contiene tutto il contenuto visibile della pagina web.
5. Intestazione (<header>)
html
<header> <h1>Interattività in Azione</h1> </header>
Il tag <header> contiene l'intestazione della pagina, inclusivo di un titolo di livello 1 (<h1>).
6. Navigazione (<nav>)
html
<nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">Chi Siamo</a></li> <li><a href="#contact">Contatti</a></li> </ul> </nav>
Il tag <nav> contiene un menu di navigazione con un elenco non ordinato (<ul>) di elementi di lista (<li>) e link (<a>).
7. Sezione Home (<section>)
html
<section id="home"> <h2>Home</h2> <p>Questa è la sezione home della mia pagina web.</p> <button id="toggleTextButton">Mostra/Nascondi Testo</button> <p
id="toggleText" style="display:none;">Ecco un po' di testo dinamico!</p> </section>

—SOMEONE FAMOUS
Il tag <section> rappresenta una sezione del documento:
•<h2> è un titolo di secondo livello.
•<p> è un paragrafo.
•<button> crea un bottone che verrà utilizzato per interazioni JavaScript.
•<p id="toggleText" style="display:none;"> è un paragrafo nascosto che verrà mostrato o nascosto cliccando il bottone.

8. Script JavaScript (<script>)


html
<script> document.getElementById('toggleTextButton').addEventListener('click', function() { var toggleText = document.getElementById('toggleText'); if
(toggleText.style.display === 'none') { toggleText.style.display = 'block'; } else { toggleText.style.display = 'none'; } }); </script>
Il tag <script> contiene il codice JavaScript che aggiunge interattività:
•Usa document.getElementById per selezionare gli elementi con gli ID specificati.
•Aggiunge un event listener al bottone per eseguire una funzione al click.
•La funzione mostra o nasconde il paragrafo con l'ID toggleText.

9. Footer (<footer>)
html
<footer> <p>&copy; 2024 La Mia Azienda</p> </footer>
Il tag <footer> contiene il footer della pagina con un paragrafo che mostra l'anno e il nome dell'azienda.
Esempio di
codice java di
JAVASC
<!DOCTYPE html>
<html lang="it">
<head>

una pagina web


<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0"><title>Interattività
con JavaScript</title>

di un azienda con
</head>

RIPT
<body>
<header>
<h1>
JavaScript è un
linguaggio di
Benvenuti nella Mia Pagina Interattiva
</h1>
</header> una home CS ed
S
<button id="myButton">Cliccami!</button>
programmazione che
elementi estetici
<p id="displayText" style="display:none;">
Hai cliccato il bottone!

permette di creare </p>


<script>
document.getElementById('myButton').addEventLi
contenuti interattivi stener('click', function() {var displayText =
document.getElementById('displayText');if
sulle pagine web. È (displayText.style.display === 'none')
{displayText.style.display = 'block';} else

utilizzato per {displayText.style.display = 'none';}});


</script>
</body>
aggiungere </html>

dinamismo e
reattività, come la
validazione di form e
la gestione di eventi.
Conclusi
one
La progettazione di pagine web efficaci richiede una
comprensione approfondita di HTML e JavaScript. Mentre
l'HTML fornisce la struttura, il JavaScript aggiunge
l'interattività necessaria per migliorare l'esperienza
dell'utente. Combinando questi strumenti, è possibile creare
pagine web funzionali e attraenti.

Potrebbero piacerti anche