HTML, XML e CSS
Tradotto da
ScribdTranslationsHTML, XML e CSS
Tradotto da
ScribdTranslations2 HTML, XML E CSS.
Conosci e applica le
strumenti per
costruire pagine
web, considerando la
interfaccia grafica di
utente, un linguaggio
di marcato e di
presentazione.
2 HTML, XML E CSS.
2.1 Introduzione.
2.2 Struttura globale di un documento Web.
2.3 Elementi di base: testo, link, elenchi, tabelle,
oggetti, immagini e applicazioni.
2.4 Moduli.
2.5 Linguaggi di presentazione nei documenti Web.
2.6 Selettori.
2.7 Modello di scatola.
2 LINGUAGGIO DI MARKUP.
ACTIVIDADES
Attività Valor
Esame teorico 20 %
Progetto Integratore 20%
Pratiche HTML: degli elementi di base del
linguaggi di markup, come: testo, 15%
collegamenti, liste, tabelle, oggetti e modulo.
Pratiche XML 15%
Progetto individuale 5%
2.1 INTRODUZIONE.
HTML : "HiperTesto Mark Up
Lingua
HTML è il linguaggio di markup standard
utilizzato per creare pagine web e i loro
elementi formano i blocchi di
costruzione di ditutti
HTML4: È il linguaggio i siti del
pubblicazione web.
World Wide Web. Oltre al testo, multimedia e
funzioni di collegamento ipertestuale delle versioni precedenti di HTML (HTML 3.2 [HTML32] e HTML 2.0
[RFC1866]), HTML 4 è compatibile con più opzioni multimediali, linguaggi di script, fogli di
stile, migliori strutture per la stampa e documenti più accessibili agli utenti con
discapacidad. HTML 4 también tiene grandes pasos hacia la internacionalización de los documentos,
con l'obiettivo di rendere il Web veramente per tutti.
HTML5 : Specifica due varianti di sintassi per HTML: una «classica», HTML (text/html), conosciuta
comeHTML5, e una variante XHTML conosciuta come sintassiXHTML5che dovrà servirsi con sintassi
XML. La versione definitiva della quinta revisione dello standard è stata pubblicata nell'ottobre 2014
2.1 INTRODUZIONE.
Marche
I marchi delimitano elementi di un documento come intestazioni, paragrafi,
ecc e sono utilizzate per fornire un trattamento diverso al testo che si
trova tra i marchi.
L'HTML è un linguaggio che basa la sua sintassi su un elemento di base al
cosa chiamiamo etichetta. L'etichetta presenta frequentemente due
partes: Una apertura de forma general Un cierre de tipo
...testo normale<marca>testo influenzato dal marchio</marca>resto del
Un esempio potrebbe essere evidenziare un testo in grassetto, per questo si impiega
la marca <B> e rimarrebbe nel seguente modo: ...testo normale <B>testo in
negrita</B> resto del testo...
2.1 INTRODUZIONE.
Attributi dei marchi
Alcuni marchi possono ammettere attributi, potendo avere ciascuno di questi
attributi un valore. Questo valore sarà racchiuso tra virgolette (") se tale valore è
alfanumerico.
<marca attributo1=numerico attributo2="alfanumerico">
Esempio:
<table width="50" height="70" border="20"> </table>
<a href="/home/[Link]">
<img src="imagenes/foto_01.jpg" width="600" height="337" />
2.1 INTRODUZIONE.
Attributi dei marchi
Alcuni marchi possono ammettere attributi, potendo avere ciascuno di questi
attributi un valore. Questo valore andrà tra virgolette ("), se detto valore è
alfanumerico.
<marca atributo1=numerico atributo2="alfanumetrico">
Esempio:
<table width="50" height="70" border="20"> </table>
<a href="/home/[Link]">
<img src="imagenes/foto_01.jpg" width="600" height="337" />
2.2 STRUTTURA GLOBALE DI UN DOCUMENTO
WEB.
2.2 STRUTTURA GLOBALE DI UN DOCUMENTO
WEB.
<link rel="stylesheet" href="[Link]" />
<link rel="shortcut icon" href="/[Link]" />
<link> rel="alternativo" title="Pozolería RSS" type="application/rss+xml"
href="/[Link]" />
</testa>
<body>
<intestazione>
<h1>Il mio sito web</h1>
<p>Mi sitio web creado en html5</p>
</header>
<sezione>
<articolo>
<h2>Titolo del contenuto<h2>
<p> Contenuto (oltre a immagini, citazioni, video, ecc.) </p>
</article>
</sezione>
<aside>
<h3>Titolo del contenuto</h3>
<p>contenuto</p>
</aside>
<footer>
Creato da me nel 2011
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
2.2 STRUTTURA GLOBALE DI UN DOCUMENTO <testa>
<title>Titulo de la web</title>
<meta charset="utf-8" />
WEB. <link rel="stylesheet" href="[Link]" />
<link rel="shortcut icon" href="/[Link]" />
<link> rel="alternativo" title="Pozolería RSS"
tipo="application/rss+xml" /[Link] />
</testa>
Nessun testo da tradurre è fornito. <corpo>
4.01//EN <intestazione>
<h1>Il mio sito web</h1>
"[Link] <p>Il mio sito web creato in html5</p>
</header>
<HTML> <sezione>
<articolo>
<HEAD> <h2>Titolo del contenuto<h2>
<p> Contenuto (oltre a immagini, citazioni,
<TITLE>Mi primer documento HTML</TITLE>
video ecc.) </p>
</TESTA> </article>
</section>
<BODY> <aside>
<h3>Titolo del contenuto</h3>
<P>Ciao mondo! </p> <p>contenuto</p>
</aside>
</CORPO> <footer>
Creato da me nel 2011
</HTML> </footer>
</body>
</html>
2.2 STRUTTURA GLOBALE DI UN DOCUMENTO
WEB.
Intestazione
La testata viene utilizzata per fornire informazioni riguardo al documento ed è delimitata da
<HEAD>prefazione</HEAD>
Dentro della intestazione possiamo evidenziare il titolo che indica il nome del documento <TITLE>
</TITOLO>.
<HTML>
<TESTA>
<TITLE> Bienvenido a nuestra guía rápida </TITLE>
</TESTA>
Corpo del documento
…</HTML>
2.2 STRUTTURA GLOBALE DI UN DOCUMENTO
WEB
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//EN">
<html>
<testa>
<title>MI PRIMERA PAGINA</title>
<METAname="keywords" content="HTML,realización páginas web">
<METAname="descripcion" content="Mi primera portada ">
<METAname="GENERATOR" content="BOC DE NOTAS Win95">
<METAname="autore" content="Nome Cognome">
<METAHTTP-EQUIV="Refresh" content="5";url=[Link]>
<link rel="stylesheet" href="css/[Link]">
<script src="js/[Link]"></script>
</testa>
<corpo>
</body>
</html>
2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO
WEB.
[Link]
Corpo
Il resto del documento risiederà
tra i marchi <BODY> e
</BODY>. Questa è la struttura
minima che deve possedere tutto
documento HTML:
<CORPO>
Documento...
</CORPO></HTLM>
Di seguito descriveremo
alcuni elementi che possono
apparire dentro del corpo.
2.2 STRUTTURA GLOBALE DI UN DOCUMENTO
WEB.
Intestazione
I titoli vengono utilizzati per suddividere i documenti in sezioni o più specificamente per contrassegnare i titoli di
quella sezione. I marchi sono del tipo <H#> titolo </H#>, dove # può essere un numero qualsiasi tra 1 e 6.
<H1>Tamaño mayor</H1>Tamaño menor
<H6>Tamaño menor</H6>Tamaño mayor
2.3 TIPI DI DATI BASE.
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//EN">
DOCTYPE: Fornisce informazioni al server web host della pagina
fornendo i dati necessari per la
Comunicazione tra il browser e il server. (non è obbligatorio) La sua forma
lo standard è il seguente:
HTML PUBBLICO: Il documento è pubblico.
IETF: Il tipo di HTML pubblico è gestito dall'Internet Engineering Task
Forza.
DTD HTML 4.0: La versione di HTML supportata è la 4.0.
EN:El idioma del documento es el inglés.
2.3 TIPI DI DATI BASICI.
META: Sono catene di codici che sono le prime a essere lette dai motori di ricerca.
LE PAROLE CHIAVE: Le parole chiave sono i termini che, in modo riassuntivo
descrivono il contenuto di una pagina web.
AUTORE: Autore della pagina.
DESCRIPCION:Título que aparecerá tras la búsqueda.
GENERATOR:Nombre del editor que se ha generado el Documento.
NOINDEX: È quando si desidera che una pagina NON venga indicizzata nei motori.
di ricerca.
REFRESH:Refrescar la página cada cierto tiempo.
LINGUAGGIO HTML
SEPARATORI DI BLOCCO
(Separatore di paragrafi, i suoi attributi sono sinistra, destra, centro).
<BR>(Salto di linea).
(ParagrafiTabulati).
<HR>(Linea Orizzontale, attributi: noshade, larghezza, dimensione, allineamento).
(Testo preformattato).
<CENTRO>(Centrato di blocchi)
LINGUAGGIO HTML
Fondi e colori del testo
Un certo numero di attributi del marchio BODY consentono di controllare il
colore dello sfondo della finestra del browser, il colore dei caratteri del
testo, e infine il colore dei link:
< CORPO attributo1 attributo2 attributo3 ... attributoN >
L'attributo BGCOLOR
Questo attributo consente di scegliere un colore per lo sfondo della pagina
<BODY BGCOLORS="#rrggbb"> dove "rr" "gg" e "bb" sono valori esadecimali
compresi tra 00 e FF che specificano il grado di saturazione dei colori rosso,
verde e blu.
L'attributo BACKGROUND
Questo attributo specifica un'immagine residente sul server che verrà utilizzata come
fondo pagina.
<BODY BACKGROUND="fichero_gráfi[Link]">
LINGUAGGIO HTML
Fondi e colori del testo
L'attributo TESTO
Permite controlar el color del texto estándar, es decir, todo texto que no especifique un enlace.
<BODY TEXT="#rrggbb">
Gli attributi LINK, VLINK e ALINK
Controllano il colore dei collegamenti:
LINK colore del collegamento che non è stato ancora visitato.<BODY LINK="#rrggbb">
ALINK colore molto fugace che appare quando si fa clic sul link <BODY
ALINK="#rrggbb">
VLINK è il colore di un collegamento che è già stato visitato <BODY VLINK="#rrggbb">
2.3 TIPI DI DATI DI BASE.
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//IT">
<html>
<head><title>LA MIA PRIMA PAGINA</title>
<METAname="keywords" content="HTML, realización páginas web">
<METAname="descripcion" content="Mi primera portada ">
<METAname="GENERATOR" content="BOC DE NOTAS Win95">
<METAname="author" content="Nombre Apellidos">
<METAHTTP-EQUIV="Refresh" content="5";url=[Link]>
</testa>
<body bgcolor="#AEAEFF">
Tipo di carattere <B>grassetto</B>, carattere <I>corsivo</I> e carattere <TT>courier</TT>.
<CENTER>Este texto está centrado</CENTER>
<P Align="left">Questo testo è allineato a sinistra</P>
<P Align="center">Questo testo è centrato</P>
<P Align="right">Questo testo è allineato a destra</P>
testo...
2.3 TIPI DI DATI DI BASE.
<h1>Intestazione tipo 1</h1>
<h2>Intestazione tipo 2</h2>
<h3>Intestazione tipo 3</h3>
<h4>Intestazione tipo 4</h4>
<h5>Intestazione tipo 5</h5>
<h6>Cabecera tipo 6</h6>
Internet<img src="imagenes/[Link]" width="98" height="122">
<p> separatore</p>
<ol>
<li>File immagine</li>
<li>File audio</li>
<li>File video</li>
<ol>
</body>
</html>
2.5 ELEMENTI DI BASE: TESTO, COLLEGAMENTI, LISTE,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
1. FormatoTexto
El formateo del texto, o sea, el formato del texto, son una serie de etiquetas que
scriviamo in html circondando la parola o il testo e che trasformano quel testo nel
formato che noi abbiamo voluto dare.
Negrita
Esistono due etichette che faranno sì che il nostro testo diventi in grassetto. L'utilizzo di
Qualsiasi di esse è indifferente. Puoi usare quella che preferisci.
La prima è l'etichetta <b> e l'altra è l'etichetta <strong>. Ecco un esempio:
Questa parola la metteremo in <b>grassetto</b> e quest'altra
anche
Questa parola la metteremo in grassetto e anche quest'altra
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, ELENCHI,
TABELLE, OGETTI, IMMAGINI E APPLICAZIONI.
Testo
Cursiva: Per scrivere un testo in corsivo dobbiamo utilizzare il tag <i> (e per
supposto chiuderla con il tag </i>.
Possiamoancheutilizzareiltag<em>.Comenelcasodelgrassetto,è
indifferente l'uso di una o dell'altra. Ecco un esempio:
Questa parola la metteremo in <i>corsivo</i> e quest'altra
<em>anche</em>
Questa parola la mettiamo in corsivo e anche quest'altra.
2.5 ELEMENTI BASE: TESTO, COLLEGHER
LISTE, TABELLE, OGGETTI, IMMAGINI E
APPLICAZIONI.
Testo
Sottolineato: Se vogliamo che la parola o il testo sia sottolineato, dobbiamo
rodearlo con la etichetta <u> e chiuderlo con la sua corrispondente etichetta. Cioè,
</u>. Così sottolineeremmo una frase importante:
<u>Così sottolineeremmo una frase importante</u>
Così sottolineeremmo una frase importante
2.5 ELEMENTI BASE: TESTO, COLLEGAMENTI, ELENCHI,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
TextoCabeceras
<h1>Testata tipo 1</h1>
<h2>Intestazione tipo 2</h2>
<h3>Intestazione tipo 3</h3>
<h4>Intestazione tipo 4</h4>
<h5>Header tipo 5</h5>
<h6>Intestazione tipo 6</h6>
Attributo faccia
Definisci il tipo di carattere. Questo attributo è interpretato dalle versioni di Netscape a partire dalla 3 e
di MSIE 3 o superiori. Altri browser le ignorano completamente e mostrano il testo con la
fonte che utilizzano.
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, ELENCHI, TABELLA
OGGETTI, IMMAGINI E APPLICAZIONI.
Color,tipo de letra y tamaño
Attributo facciale
Definisci il tipo di carattere. Questo attributo è interpretato dalle versioni di Netscape a partire da
da 3 e da MSIE 3 o superiori. Altri browser le ignorano completamente e
mostrano il testo con il font che utilizzano.
<font face="Comic Sans MS,arial,verdana">Questo testo ha un'altra
tipografia
faccia="Comic Sans MS,arial,verdana"
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, ELENCHI, TABELLA
OGGETTI, IMMAGINI E APPLICAZIONI.
Colore, tipo di carattere e dimensione
Attributo dimensione
Definisci la dimensione del font. Questa dimensione può essere assoluta o relativa. Se parliamo di
termini assoluti, esistono 7 livelli di dimensione diversi numerati da 1 a 7 in ordine
crescente. Sceglieremo quindi un valore size="1" per il carattere più piccolo o size="7"
per la più grande.
<font size=4>Questo testo è di dimensione 4</font>
<font size=12>Questo testo è di dimensione 12</font>
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, ELENCHI,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
Colore, tipo di carattere e dimensione
Attributo colore
Il colore del testo può essere definito tramite l'attributo colore. Ogni colore è a sua volta
definito da un numero esadecimale che è composto a sua volta da tre parti. Ogni
una di queste parti rappresenta il contributo del rosso, verde e blu al colore in questione.
<font color="red">Questo testo è in rosso</font>
<font color="#FF0000"> Questo testo è in rosso </font>
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, ELENCHI, TABELLA
OGGETTI, IMMAGINI E APPLICAZIONI.
2. Formato Paragrafi
Per indicare al browser che vogliamo mettere quel testo in un paragrafo, dobbiamo
<p>scriverlo tra i tag <p> e la loro chiusura </p>.</p>
Così il testo rimarrà all'interno di un paragrafo, separato da uno spazio bianco sopra
y uno por abajo.
Il testo del paragrafo lo puoi allineare utilizzando il tag align utilizzando i
parametri “center” (per allinearlo al centro), “right” (per allinearlo a destra), “left”
(per allinearlo a sinistra) e "giustificare" (per giustificare il testo).
Un esempio di questa etichetta con i rispettivi parametri è il seguente:
<p align="center">Questo testo si allineerà al centro</p>
<p align="right">Questo testo sarà allineato a destra</p>
<p align="left">Questo testo sarà allineato a sinistra</p>
2.5 ELEMENTI BASE: TESTO, COLLEGAMENTI, ELENCHI, TABELLA
OGGETTI, IMMAGINI E APPLICAZIONI.
Paragrafi salti di riga
Esistono due etichette per indicare che vogliamo fare un'interruzione di riga normale. Sono le
etichetta <br> e <br/> sono entrambe interpretate allo stesso modo dal browser. Questa etichetta non
Non è necessario aprirla e chiuderla, basta scriverla e il browser la interpreta già.
<p> Questo testo sarà nella prima fila<br/>
Questo testo sarà al centro <br/>
Questo testo sarà alla fine
ACTIVIDAD 1: FORMATO
Elementi di base del linguaggio di markup, come ad esempio: testo,
collegamenti, elenchi, tabelle.
Practica: Formato (practica_1_1_formato_testo.html)
Indicazioni: Elaborare un documento HTML in cui sia inclusa:
. Encabezados (h1 – h7)
. Texto tamaño (1-4)
. Estilos de texto (normal, negrita, subrayado, cursiva, subíndice, superíndice)
. Paragrafi allineati (Giustificato, Centro, destra e sinistra)
Extra:Agregar al menos tres párrafos de texto con tipos distintos de estilo,
colori, tipi di carattere, allineamento ecc.
ATTIVITÀ 1: FORMATO - ESEMPIO
ATTIVITÀ 1: FORMATO - ESEMPLARE
2.5 ELEMENTI FONDAMENTALI: TESTO, LINK, LISTE,
TABELLE, OGETTI, IMMAGINI E APPLICAZIONI.
[Link]
Una tabella in html è contrassegnata dalle etichette <table> </table>. Tra queste
Due etichette definiremo la tabella, le celle che vogliamo, le colonne e le
caratteristiche di ciascuno di questi parametri. Ma iniziamo
spiegandoti il tag <table>.
Abbiamo già detto che questa etichetta ci indica che inizia una tabella, ma...
Possiamo predefinire caratteristiche di quella tabella? Certamente sì. Una tabella
ammette molti parametri. Noi ti spiegheremo i principali.
2.5 ELEMENTOS BÁSICOS: TEXTO, VÍNCULOS, LISTAS,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
La tabella: <table>
Come già accade con l'etichetta body, anche a una tabella possiamo definire il
fondo della stessa. Possiamo ottenere questo con il parametro "bgcolor", che ci
metterà un colore di sfondo, o "background" per inserire un'immagine di sfondo.
Ricorda che se l'immagine è più piccola della tabella, essa si ripeterà sia a
largo come a lungo.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="0">
cellpadding="0">
<tr>
<td>ciao</td>
<td>holaa2</td>
</tr>
</table>
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, LISTE
TABELLE, OBIETTIVI, IMMAGINI E APPLICAZIONI.
Tabelle
Le righe: <tr>
Come abbiamo visto nell'intestazione, le righe vengono scritte grazie ai tag <tr> con il loro
corrispondente chiusura </tr>. Il contenuto delle colonne che si trovano all'interno della riga lo
possiamo allineare sia orizzontalmente che verticalmente.
Per allinearlo verticalmente utilizzeremo l'attributo "valign" per poterlo allineare in alto rispetto alla
celda ("top"), en el centro ("middle") o debajo ("bottom").
Per allinearlo orizzontalmente utilizzeremo l'attributo "align". Con questo attributo potremo
allineare il contenuto delle celle al centro ("centro"), a sinistra ("sinistra"), a destra
("giusto") o giustificato ("giustifica").
Naturalmente, anche alle righe possiamo definire il colore di sfondo ("bgcolor") e il colore del
bordo ("colore bordo").
2.5 ELEMENTI BASE: TESTO, COLLEGAMENTI, ELENCHI,
Tabelle, oggetti, immagini e applicazioni.
Tabelle
Le celle <td>
Le celle che vanno all'interno di ogni riga dobbiamo scriverle con il tag <td>
e la sua corrispondente chiusura </td>.
Analogamente alle righe, nelle celle possiamo definire l'allineamento del contenuto che
è all'interno con gli attributi 'valign' e 'align'.
Le celle possiedono alcuni attributi che ci aiutano a poter raggruppare tante celle o tante
colonne come indichiamo in esso. Per raggruppare le celle utilizzeremmo l'attributo "colspan"
e per unire celle l'attributo "rowspan".
Ad esempio, per raggruppare in una cella 2 colonne dobbiamo scrivere: <td
colspan="2"></td>. E per raggruppare due righe, l'indicazione sarebbe la seguente: <td
rowspan= "2"></td>.
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, LISTE,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
Tabelle
ACTIVIDAD 2: TABLAS Y LISTAS –
ESEMPIO
<table border="1px">
<tr> <table border="3px">
<td>Nome</td> bordercolor="#0099FF">
<td>Cognome</td> <tr>
</tr> <td>Bordo</td>
<tr> <td>3 pixel</td>
<td>Pedro</td> </tr>
<td>Garcia</td> </table>
</tr>
</table>
ATTIVITÀ 2: TABELLE E LISTE -
ESEMPIO
<table border="1px"> <table border="1px" cellspacing="15px"
colorerand = "#333333" bgcolor="#3399FF">
cellpadding="20px"> <tr>
<tr> <th bordercolor="#0033FF" >
<th bgcolor="#CCCCCC">Nombre</th> bgcolor="#ffffff">Nome</th>
<th bgcolor="#CCCCCC">Cognome</th> <th bordercolor="#0033FF" />
</tr> Cognome
<tr>
<td>Pedro</td> </tr>
<td>Garcia</td> <tr>
</tr> <td bgcolor="#CCCCCC">Pedro</td>
</tabella> <td bgcolor="#CCCCCC">Garcia</td>
</tr>
</table>
ACTIVIDAD 2: TABLAS Y LISTAS –
EJEMPLO
ACTIVIDAD 2: TABLAS Y LISTAS –
ESEMPIO
ATTIVITÀ 2: TABELLE E LISTE
Elementos básicos del lenguaje de marcas, tales como: texto,
collegamenti, elenchi, tabelle.
Pratica: Tabelle e liste (pratica_1_2_tabelle_e_liste.html)
Indicazioni: Elaborare un documento HTML in cui sia incluso:
. Diversi formati di tabelle
. Formati diversi di liste
Extra: Aggiungere 2 tabelle con formato di riempimento, colori dei caratteri e tipi di
lettera distinti.
Esempi
2.5 ELEMENTI BASICI: TESTO, LINK, LISTE,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
3. Liste
Liste non ordinate: <ul>Le liste non ordinate vanno all'interno del tag
<ul> e della sua chiusura </ul>. Ogni punto che vogliamo aggiungere alla lista, lo faremo
dentro del tag <li> e della sua chiusura.
<ul>
<li type="circle">Questo è un tipo di punto.</li>
<li type="square">Questo è un altro.</li>
<li type="disc">E questo è un altro diverso.</li>
</ul>
2.5 ELEMENTI BASE: TESTO, COLLEGAMENTI, ELENCHI
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
Listas ordinate: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>. Cada
Punto della lista si scrive con la stessa etichetta che nelle non numerate: <li>.
Ma essendo liste ordinate, i simboli saranno numeri e questi verranno generati.
automaticamente in ordine, man mano che scriviamo nuovi punti.
Nelle liste ordinate possiamo fare in modo che il primo punto inizi con il
numero che noi vogliamo. Lo otterremo grazie all'attributo “value”. I
I punti seguenti che scriviamo verranno generati automaticamente in ordine.
partendo da quel numero.
<ol>
<li value="20">Questo sarà il numero 20. </li>
<li>Questo sarà il 21.</li>
<li> Questo sarà il 22. E così via. </li>
</ol>
ACTIVIDAD 2: TABLAS Y LISTAS –
ESEMPIO
ATTIVITÀ 2: TABELLE E LISTE –
EJEMPLO
2.5 ELEMENTI BASE: TESTO, COLLEGAMENTI, ELENCHI
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
4. Oggetti
Inserire oggetti:<object>e<param>
L'etichetta <object> consente di inserire qualsiasi tipo di documento (non solo di
testo) all'interno di un documento html. Per poter visualizzare quei file, il browser
di solito richiede plug-in. Alcuni tipi di documenti necessitano di informazioni aggiuntive
che viene fornito tramite l'etichetta <param>.
Esempi di inserimento di oggetti
Inserire una pagina web
È possibile inserire una pagina web in una pagina
web mediante la etiqueta <object>, come mostra
il seguente esempio.
2.5 ELEMENTI BÁSICI: TESTO, COLLEGAMENTI, LISTE
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
4. Objetos
<iframe src="ejemplo_iframe.html">
</iframe>
2.5 ELEMENTI BASE: TESTO, LINK, LISTE,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
4. Oggetti
Esempi di inserimento di oggetti
Insertar una página web
È possibile inserire un sito web in una pagina web utilizzando il tag <object>, come
mostra il seguente esempio.
<oggetto tipo="text/html"
data=“objeto_pagina.html"
style="width: 400px; height:200px;" >
ERRORE (l'oggetto non può essere visualizzato)
</oggetto>
Dovrà creare un file html chiamato oggetto_pagina.html per inviarlo a chiamare
2.5 ELEMENTOS BÁSICOS: TEXTO, VÍNCULOS, LISTAS,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
Esempi di inserimento di oggetti
4. Oggetti Inserire una mappa di google
<oggettipo="text/html"
data="[Link]
f=q&source=s_q&
hl=es&geocode=&q=ies+abastos&
ie=UTF8&cid=11271517402525668942&
s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&
ll=39.477148,-0.382204&spn=0.023188,0.036478&
z=14&iwloc=A&output=embed
stile="larghezza: 425px; altezza: 350px;"
ERRORE (non può essere visualizzato l'oggetto)
</object>
<iframe width="425" height="350"
src="[Link]
hl=es&geocode=&q=ies+abastos&
ie=UTF8&cid=11271517402525668942&
s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&
ll=39.477148,-0.382204&spn=0.023188,0.036478&
z=14&iwloc=A&output=embed">
</iframe>
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, ELENCHI,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
4. Oggetti
Inserire un file PDF
È possibile inserire un file PDF in qualsiasi pagina web, come mostra il seguente
esempio. Per inserire un altro file PDF dovresti indicare l'URI del file tramite il
atributodata(nell'esempio, è semplicemente [Link]).
<oggetto>
tipo="application/pdf"
data="pdf/programacion_web.pdf"
stile="larghezza: 400px; altezza: 550px;" >
ERRORE (l'oggetto non può essere visualizzato)
</oggetto>
2.5 ELEMENTI BASE: TESTO, LINK,
LISTE, TABELLE, OGGETTI, IMMAGINI E
APLICACIONES.
4. Oggetti
Inserire un video di YouTube
I video di YouTube sono in formato Flash, quindi possono essere integrati in una pagina.
web mediante la etiqueta <object>, come mostra il seguente esempio. Per inserire un altro
video bisognerebbe sostituire il codice del video nell'attributo data (nell'esempio, il codice del
video esvZV-t3KzTpw).
<iframe class="youtube-player" type="text/html" width="340"
height="200" src="[Link]
frameborder="0"></iframe>
ATTIVITÀ 3: OGGETTI
Elementi di base del linguaggio di markup, come: testo, link, elenchi, tabelle.
Pratica: Tabelle e liste (pratica_1_3_oggetti.html)
Indicazioni: Elaborare un documento HTML in cui includere i seguenti oggetti:
. 1. Incorporare una pagina con Iframe.
. 2. Mappa di Google con Iframe e oggetto
. 3. Incorporare un file pdf
. 4. Incorporare un video di YouTube
Extra: Aggiungere 2 oggetti in più.
Esempi
Riproduttore audio
Reproductor video (diverso da YouTube)
ACTIVIDAD 3: OBJETOS
2.5 ELEMENTI DI BASE: TESTO, COLLEGAMENTI, ELENCHI
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
6. Immagini
Attributi di IMG
Gli attributi dell'immagine possono essere i seguenti:
ALT="Texto que aparece al situar el cursor sobre la imagen“
Mostra anche questo stesso testo nel caso in cui il browser non carichi l'immagine.
ALIGN=Indica la posizione dell'immagine rispetto al testo. Dopo il segno di uguale, possono andare i valori:TOP,
MIDDLE, BOTTOM, LEFT y RIGHT.
LARGHEZZA=80, ALTEZZA=100: Indicano la larghezza e l'altezza dell'immagine in pixel, in questo caso 80x100 pixel.
BORDER=2 Aggiungi un bordo, a mo' di cornice, all'immagine. In questo caso di 2 pixel.
2.5 ELEMENTI DI BASE: TESTO, COLLEGAMENTI, ELENCHI,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
5. Immagini
Larghezza del bordo [border-width]
Colore del bordo [border-color]
La proprietà border-color definisce il colore del bordo. I valori di questa proprietà sono i valori di colore
normales, por ejemplo, "#123456" (en notación hexadecimal), "rgb(123,123,123)" (en notación RGB) o
"yellow" (por nombre del color).
2.5 ELEMENTI BASE: TESTO, COLLEGAMENTI, ELENCHI,
Tabelle, oggetti, immagini e applicazioni.
5. Immagini
Stile di bordo [border-style]
Si può scegliere tra diversi stili di bordo. Più in basso si
mostrano 8 stili di bordo secondo l'interpretazione di Internet Explorer 5.5.
Tutti gli esempi sono mostrati con il valore del colore a "oro" e il
valore della larghezza a "spesso", ma possono essere mostrati, ovviamente,
in altri colori e spessori
<img src="imagenes/[Link]" width="259"
height="194" border="8" style="border-color:#900;
stile-bordo: tratteggiato" />
2.5 ELEMENTI BASICI: TESTO, COLLEGAMENTI, LISTE,
TABELLE, OGGETTI, IMMAGINI E APPLICAZIONI.
5. Immagini
<img src="[Link]" width="259" height="194" border="8" aling="bottom" />
vspace="10" hspace="10" alt="la playa" />
<br />
<img src="[Link]" width="259" height="194" border="8" vspace="10"
hspace="10" alt="Cascada" style="border-color:#9C0; border-style:dashed;
aling:middle" />
<br />
<img src="[Link]" width="489" height="322" border="8" aling="bottom"
vspace="10" hspace="10" alt="il ponte" style="border-color:#09F; border-
stile: scanalato" />
<div align="center"><img src="[Link]"></div>
2.7 MODULI.
I moduli interattivi consentono a
autori di pagine Web mettere elementi
interattivi nelle loro pagine, ad esempio, per
ricevere messaggi dai loro lettori, in modo
simile alle lettere di risposta che si
trova in alcune riviste.
Il lettore scrive le informazioni compilando
campi o facendo clic su pulsanti, e poi
premi un pulsante di invio per inviarla a una
dirección URLqdi solito si rivolge a una
indirizzo email o a uno script
dinamico Web come PHP, ASP o CGI.
2.7 MODULI.
L'etichetta FORM
I moduli sono delimitati dal tag <FORM> ... </FORM>, che consente di riunire
vari vari elementi di modulo, come pulsanti e caselle di testo e che deve possedere i
seguenti attributi:
METODO indica come verranno inviate le risposte
"POST" è il valore che invia i dati all'agente di processamento memorizzandoli nel corpo
del modulo, mentre che "GET" invia i dati aggiungendoli all'indirizzo URL e
separandoli dall'indirizzo con un punto interrogativo (per saperne di più sui metodi
POST e GET.
ACTION indica l'indirizzo a cui verranno inviati le informazioni (uno script CGI o indirizzo email
elettronico ([Link]
Un attributo opzionale del tag FORM è ENCTYPE, che specifica come vengono codificati i dati
del modulo. In ogni caso, questo non necessita di essere specificato, poiché il valore predefinito
(application/x-www-form-urlencoded) è l'unico valore valido. L'attributo opzionale ACCEPT viene utilizzato
per stabilirertipi MIMEpara i dati che il modulo può inviare.
2.7 MODULI.
L'etichetta FORM
Questa è la sintassi per l'etichetta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ...
</MODULO>
Ecco alcuni esempi delle etichette FORM:
<MODULO METODO=POST AZIONE="[Link]
<FORM METODO=GET AZIONE="[Link]
2.7 MODULI.
Dentro della etichetta FORM
L'etichetta FORM agisce come una sorta di contenitore per immagazzinare
elementi che consentono all'utente di selezionare o inserire dati. Tutti i dati
saranno inviati all'indirizzo URL indicato nell'attributo ACTION del tag FORM,
per il metodo indicato nell'attributo METHOD.
È possibile inserire qualsiasi elemento HTML in un tag FORM (come testo,
pulsanti, tabelle e collegamenti), ma gli elementi interattivi sono i più
interessanti. Questi elementi interattivi sono:
•L'etichetta INPUT: Tutti i pulsanti e le caselle di testo
•L'etichetta TEXTAREA: una casella di testo
•La etiqueta SELECT: una lista di opzioni multiple
2.7 MODULI.
Invio di dati
Quando viene inviato un modulo (facendo clic sul pulsante di invio), i dati del
i dati del modulo vengono inviati a uno script CGI sotto forma di coppie nome/valore, cioè
insiemi di dati rappresentati dal nome dell'elemento modulo, un segno
uguale ("=") e poi il valore associato. Queste coppie nome/valore sono separate da
altri tramite il simbolo di unione ("&"). Pertanto, i dati che vengono inviati a
script si vedranno così:
campo1=valor1&field2;=valor2&field3;=valor3
Con il metodo GET (inviare i dati tramite un indirizzoURL), la URL sarà una
catena come la seguente:
[Link]
2.7 MODULI.
L'etichetta INPUT
L'etichetta INPUT è un'etichetta essenziale per i moduli, poiché viene utilizzata per
creare molti elementi "interattivi". La sintassi di questo tag è la seguente:
<INPUT type="Nome del campo" value="Valore predefinito" name="Nome
L'attributo nome è essenziale, poiché consente allo script CGI di riconoscere
che campo è associato a una coppia nome/valore, il che significa che il nome
del campo sarà seguito da un segno uguale ("=") seguito da un valore che il
l'utente ha inserito, oppure se l'utente non ha inserito alcun valore, per il valore
predeterminato del valore dell'etichetta.
2.7 MODULI.
L'etichetta INPUT
L'attributo type si usa per specificare che tipo di elemento è rappresentato con il tag INPUT.
Questi sono i valori possibili:
checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o
non selezionato. Quando la casella è selezionata, la coppia nome/valore viene inviata al
CGI.
hidden: Este campo, que el navegador no muestra, es para definir una configuración única que se
invierà al CGI come coppia nome/valore.
file: Un campo che consente all'utente di specificare un percorso del file che porta al file che si
invierà con il modulo. I tipi di file che possono essere inviati devono essere specificati
utilizzando l'attributo ACCEPT del tag FORM.
2.7 MODULI.
L'etichetta INPUT
Un pulsante di invio personalizzato che appare quando si posiziona una
immagine nella posizione definita dall'attributo SRC.
password: Unacasilla de textodonde los caracteres escritos aparecen como
asterischi per camuffare il testo d'ingresso.
radio: Un pulsante che consente all'utente di scegliere tra varie opzioni. Ognuno
Questi pulsanti devono avere lo stesso attributo nome. La coppia nome/valore del
Il pulsante radio selezionato sarà inviato al CGI. Applicando l'attributo checked per
uno di questi pulsanti sarà definito come selezionato per impostazione predefinita.
2.7 MODULI.
La etiqueta INPUT
reset: Un bottone di ripristino per rimuovere tutti gli elementi nel
formulario e ripristina i suoi valori predefiniti.
Un pulsante di invio per inviare il modulo. Il testo sul pulsante può
definirsi usando l'attributovalue.
Una casella di testo per scrivere una riga di testo. La dimensione della casella
può essere definito usando l'attributo size e l'estensione massima del testo con il
atributomaxlength.
2.7 FORMULARIOS.
La etichetta TEXTAREA
L'etichetta TEXTAREA viene utilizzata per definire un'area di testo più ampia rispetto alla
línea simple propuesta por la etiquetaINPUT. Esta etiqueta tiene los siguientes
atributos:
cols: rappresenta il numero di caratteri che può contenere una riga
rows: representa el número de líneas
name: representa el nombre asociado con el cuadro de texto, que permite su
identificazione nella coppia nome/valore.
readonly: impedisce all'utente di modificare il testo predefinito nel campo
value: representa el valor predeterminado que se enviará al script si el usuario
non ha scritto nulla nella casella di testo
2.7 MODULI.
La etichetta SELECT
L'etichetta SELECT serve per creare un elenco a discesa di elementi
(specificati dalle etichette OPTION al suo interno). Gli attributi di questo
etichetta sono:
name: name: representa el nombre asociado con la casilla de texto, que permite
la tua identificazione nel parametro nome/valore.
disabilitato: crea un elenco disabilitato, che appare attenuato
size: representa el número de líneas de la lista (este valor puede ser más grande
che il numero di elementi reali della lista).
multiple: Permite al usuario seleccionar varios campos de la lista
2.7 MODULI.
L'etichetta SELECT
L'etichetta SELECT serve per creare un elenco a discesa di elementi
(specificati dalle etichette OPTION al loro interno). Gli attributi di questa
etichetta sono:
name: name: representa el nombre asociado con la casilla de texto, que permite
su identificazione nel pari nome/valore.
disabilitato: crea un elenco disattivato, che appare sfocato
dimensione: rappresenta il numero di righe dell'elenco (questo valore può essere più grande
che il numero di elementi reali della lista).
multiple: Permite al usuario seleccionar varios campos de la lista
<FORM method=post action="[Link]">
Registrazione di un utente
<TABELLA larghezza="346" BORDER=0>
<TR>
<TD width="140">Cognome</TD>
<TD width="196">
<INPUT type=text name="cognome">
ATTIVITÀ 4 MODULI
</TD>
</TR>
<TR>
<TD>Nome</TD>
<TD>
<INPUT type=text name="nome">
</TD>
4. Moduli </TR>
<TR>
<TD>Género</TD>
<TD>
Masculino: <INPUT type=radio name="género" value="M">
<br>Femenino: <INPUT type=radio name="género" value="F">
</TD>
</TR>
<TR>
<TD>Occupazione</TD>
<TD>
<SELECT name="occupazione">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELEZIONA>
</TD>
</TR>
<TR>
<TD>Commenti</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Scrivi qui i tuoi commenti
</TD>
</TR>
<TR>
<TD COLSPAN=2>
Inviare <INPUT type="submit" value="Inviare">
</TD>
</TR>
</TABLE>
</FORM>
ATTIVITÀ 4 MODULI
2.7 MODULI.
Attributi del modulo e ingressi
Inviare
2.7 MODULI.
Invia
2.7 MODULI.
Inviare