Html 4 01
This presentation is the property of its rightful owner.
Sponsored Links
1 / 39

HTML 4.01 PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on
  • Presentation posted in: General

HTML 4.01. Apogeo. I tag di base. Capitolo 1. I tag. Sintassi <nome_tag> </nome_tag> Esempi: <strong> <cite> <b> <em>. Attributi. Attributi nome_attributo = “ valore ” Gli attributi del tag <html> lang = “ codice lingua ” lang = “ it ” dir = “ direzione testo ”

Download Presentation

HTML 4.01

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html 4 01

HTML 4.01

Apogeo


I tag di base

I tag di base

Capitolo 1


I tag

I tag

  • Sintassi

    • <nome_tag>

    • </nome_tag>

  • Esempi:

    • <strong>

    • <cite>

    • <b>

    • <em>


Attributi

Attributi

  • Attributi

    • nome_attributo = “valore”

  • Gli attributi del tag <html>

    • lang = “codice lingua”

      • lang = “it”

    • dir = “direzione testo”

      • dir = “LTR”

  • I tag <head> e <body>


Attributi del tag body

Attributi del tag <body>

  • bgcolor = “colore”

    • Appendice A per nomi e codici dei colori

  • background = “file_immagine”

  • text = “colore_testo”

  • link alink vlink

  • Esempio javascript onLoad …


Formattazione del testo

Formattazione del testo

Capitolo 2


Header e paragrafi

Header e paragrafi

  • Tag header <h1> … <h6>

  • Tag <p>

    • attributo align = “posizione”

  • Il tag <font> con attributi

    • face = “font”

    • color = “colore”

    • size = “dimensione”


Caratteristiche

Caratteristiche

  • Caratteri speciali

    • Appendice D

  • Accenno a <div>

  • Caratteristiche del testo

    • <tt>

    • <u>

    • <strike>

    • <sub>

    • <sup>

  • Tag <hr> con attributo height


Elenchi ordinati non ordinati ed elenchi di definizioni

Elenchi ordinati, non ordinati ed elenchi di definizioni

Capitolo 3


Elenchi ordinati

Elenchi ordinati

  • tag <ol>

    • attributo type = “valore” (1 i I a A)

    • attributo start = “valore”

  • tag <li>

  • Elenchi all’interno di altri elenchi


Elenchi non ordinati

Elenchi non ordinati

  • tag <ul>

    • attributo type = “valore” (disc circle square)

  • tag <li>

  • Elenchi di definizione

    • tag <dt> <dd>


Inserimento di un immagine

Inserimento di un’immagine

Capitolo 4


Il tag img

Il tag <img>

  • Attributo src

    • <img src = “percorso_immagine”>

  • Percorsi relativi e percorsi assoluti

  • Attributo alt

    • alt = “descrizione immagine”

  • Attributi width e height

  • Attributo align = “valore” (top bottom left … )


I formati delle immagini

I formati delle immagini

  • jpg (Joint Photographic Experts Group)

    • buona compressione

    • ampia gamma cromatica

    • scelta della qualità

  • gif (Graphics Interchange Format)

    • animazione

    • trasparenza

  • png (Portable Network Graphics)

    • formato “libero”

    • più livelli di trasparenza


I link

I link

Capitolo 5


Il tag a

Il tag <a>

  • Link a una pagina dello stesso sito o di un sito diverso

  • Attributo href = “percorso_pagina”

    • <a href=“paginalocale.html”> link locale</a>

    • <a href=“http://www.altrosito.it/pagina_altro_sito.html”> link esterno</a>

  • Attributo target = “valore” (_blank)

  • Attributo alt = “testo alternativo”

  • Attributo title=“testo tooltip”


Immagine come link

Immagine come link

  • Inserimento del tag <img> all’interno del tag <a>

  • Attributo border = “valore”

    • border = “0” per eliminare il bordo


Link interni alla pagina

Link interni alla pagina

  • attributo name per definire un punto di destinazione interno a un documento (àncora)

    • <a name = “capitolo1”>

  • href = “#capitolo1”

    • (riferimento interno)

  • href = “pagina.html#capitolo1”

    • (interno ad altra pagina)


Link mailto

Link mailto

  • href = mailto:[email protected]

    • per inviare un messaggio di posta elettronica utilizzando il client e-mail predefinito sul computer

  • <a href = mailto:[email protected][email protected]&Subject=soggetto%20messaggio>


Mappe sensibili

Mappe sensibili

Capitolo 6


Tabelle

Tabelle

Capitolo 7


Table

<table>

  • Il tag <table> con attributo border = “valore”

  • all’interno di <table> vari tag <tr> (table row), uno per ogni riga

  • All’interno del tag <tr> tanti tag <td> (table data) quante sono le colonne

  • Opzionalmente il tag <th> come intestazione di colonna


Un esempio

Un esempio

<table border="1">

<tr>

<th>Mese</th>

<th>Importo</th>

</tr>

<tr>

<td>Gennaio</td>

<td>200</td>

</tr>

<tr>

<td>Febbraio</td>

<td>350</td>

</tr>

</table>


Attributi di table

Attributi di <table>

  • align = “valore” (left center right)

  • width = “valore” (in pixel o in percentuale)

  • border = “valore” (0 bordo invisibile)


Frames e iframes

Frames e Iframes

Capitolo 8


Html 4 01

Form

Capitolo 9


Form introduzione

Form - Introduzione

  • Un form html è una sezione di documento che contiene

    • Testo normale e markup

    • Elementi speciali chiamati controlli(checkbox, bottoni radio, menu ecc.)

  • Gli utenti di solito “completano” questi controlli

    • Inserimento testo, selezione voci di menu ecc.

  • Poi il form viene inviato (submit)

    • Eleborazione remota su web server

Alberto Ferrari


Form action and method

Formaction and method

  • I form sonoracchiusidai tag <form> e </form>

  • Il tag <form> ha

    • Un attributoaction – url a cui inviareidati del form

    • Un attributomethod – metodo http da usare per sottomettereidati del form (get o post)

  • Esempio

    • <form action="http://www.miocomputer.it/mioscript.cgi" method="post">

Alberto Ferrari


Form coppie nome valore

FormCoppienome/valore

  • Ogni campo di input in un form ha:

    • Un nome, definito dall’attributo name (o id) del tag <input>, <select>, o <textarea>

    • Un valore, che l’utente imposta immettendo testo o cliccando col mouse

  • I dati del form vengono inviati (submit) allo script sul server come un insieme di coppie nome/valore

    • Campi di testo vuoti sono inviati come una coppia nome/valore, in cui il valore è una stringa vuota

    • Checkbox e pulsanti radio non selezionati non vengono inviati

Alberto Ferrari


Altri usi del form

Altri usi del form

  • E’ possibile utilizzare i form per altri scopi:

    • per mandare un e-mail con il contenuto del form, in questo caso method sarà POST e action sarà:action="mailto:[email protected]"

    • oppure come aree attive per script eseguiti sul client (es. per realizzare una calcolatrice in javascript): in questo caso action mancherà.

Alberto Ferrari


Form tag per i campi

Form - Tag per i campi

  • <input>

    • Campi per l’immissioneditesto, checkbox, bottoni radio, obottoninormali

  • <select>

    • Menu a discesae box diselezione

  • <textarea>

    • Campi per l’immissioneditestosurighe multiple

Alberto Ferrari


Form il tag input

Form - Il tag input

  • Il tag <input> crea diversi tipi di campi, a seconda del valore dell’attributo type

  • text – Campo normale per l’immissione di testo (default)

  • password – Identico a text, ma nasconde il testo inserito

  • checkbox – Per semplici valori on/off

  • radio – Pulsante per scegliere una tra diverse opzioni

  • submit – Bottone per inviare i dati inseriti nel form

  • reset – Buttone che riporta tutti i campi al valore iniziale

  • image – Come submit, ma immagine come bottone

  • hidden – ulteriori coppie nome/valore da inviare al server, ma non visualizzate all’utente

Alberto Ferrari


Attributi del tag input

Attributi del tag input

  • Insieme di attributi variabile a seconda dell’attributo type

  • text, password

    • value – Valore di default per il campo

    • size – Dimensione visualizzata del campo

    • maxlength – Quantità di dati che si può inserire

  • checkbox, radio

    • value – Valore del campo quando è selezionato; default = "on"

    • checked – Se il campo per default è selezionato

  • submit,reset

    • value – Etichetta del bottone

  • image

    • src – Url dell’immagine da visualizzare

    • maggior parte degli attributi del tag img

Alberto Ferrari


Esempio input text

Esempio input text

  • <input type=”text" name="nome" maxlength="40" size="33" value="Il tuo nome”

  • text ha tre attributi aggiuntivi:

    • maxlength (il numero massimo di caratteri inseribili nel campo)

    • size (la larghezza della stringa all'interno della pagina)

    • value (valore di default della stringa).

Alberto Ferrari


Esempio con tag input

<form action="http://myhost.com/myscript.cgi" method="post">

<br />State: <input type="text" name="state" value="IT" size="2" maxlength="2" />

<br />Password: <input type="password" name="password" />

<br /><input type="checkbox" name="moreinfo" value="yes" checked="checked" />Send me more info.

<br />Select your gender below:

<br /><input type="radio" name="gender" value="F" />Female

<br /><input type="radio" name="gender" value="M" />Male

<br /><input type="submit" name="okbutton" value="OK, submit!" />

<br />

<input type="reset" value="Whoops - erase that" />

<input type="image" src="hand.gif" />

<input type="hidden" name="totalsofar" value="1290.65" />

</form>

Esempio con tag input

Alberto Ferrari


Esempio con tag input1

<form action="http://myhost.com/myscript.cgi" method="post">

<br />State: <input type="text" name="state" value="IT" size="2" maxlength="2" />

<br />Password: <input type="password" name="password" />

<br /><input type="checkbox" name="moreinfo" value="yes" checked="checked" />Send me more info.

<br />Select your gender below:

<br /><input type="radio" name="gender" value="F" />Female

<br /><input type="radio" name="gender" value="M" />Male

<br /><input type="submit" name="okbutton" value="OK, submit!" />

<br />

<input type="reset" value="Whoops - erase that" />

<input type="image" src="hand.gif" />

<input type="hidden" name="totalsofar" value="1290.65" />

</form>

Esempio con tag input

Alberto Ferrari


Il tag select

Choose your favorite color:

<select name="favcolor">

<option>green</option>

<option>aquamarine</option>

<option selected="selected">emerald</option>

<option>turquoise</option>

<option>aqua</option>

<option value="green2">green</option>

<option value="green3">green</option>

</select>

Il tag select

Alberto Ferrari


Il tag textarea

<textarea name="stuff" rows="5" cols="10">Enter stuff here</textarea>

Il tag textarea

  • Il tag <textarea> crea aree per l’inserimento di testo su più linee, con barre di scorrimento

  • Tutto ciò che si trova tra i tag di apertura e chiusura costituisce il contenuto iniziale del campo

Alberto Ferrari


Cenni sui fogli di stile

Cenni sui fogli di stile

Capitolo 10


  • Login