-
Mazzeo
.User deleted
HTML
L'html è un linguaggio di formato utilizzato per dichiarare la struttura che un documento ipermediale deve assumere.
Un documento html è, pertanto, un unico file coodificato in ASCII che include sia il contenuto che vogliamo far visualizzare sia le istruzioni usate per l'elaborazione di quel contenuto.
Strutturazione : è composto da una sequenza di elementi ognuno dei quali è caratterizzato da codici, racchiusi tra parentesi angolari, che prendono il nome di TAG o MARCATORI
L'html inoltre non è un linguaggio case-sensitive, cioè non è sensibile al fatto che i caratteri siano scritti in maiuscolo o minuscolo, a differenza del Css.
Strutturazione tipica documento htmlCODICE<html>
<head>
<title></title>
<head>
<body>
Corpo vero e proprio della pagina
<body>
<html>
*Per creare un documento html è sufficiente scrivere sul blocco note il codice a modificare l'estensione da .txt a .html
I Commenti
I commenti alle istruzioni rappresentato la prima e la più immediata documentazione disponibile. I commenti aiutano a capire e a giustificare la presenza di alcune istruzione e sopratutto a comprenderle.
<!-- Questa è la struttura di un commento -->
Struttura del testo : elementi P, BR, HR e Hn
In molti documenti il testo viene diviso in blocchi (capoversi), in modo da aumentarne la leggibilità.
Anche un documento Html può essere diviso in capoversi, usando l'elemento P, caratterizzato dai tag <p'>CODICE<html>
<head>
<title>Esempio paragrafo</title>
<head>
<body>
<p> Questa ripa appare
<p> spezzata
<body>
Adesso vi chiedere : e se voglio allineare il testo in una determinata zona visiva?
Per risolvere questo problema sono stati introdotti attributi e proprietà che assumo questo forma:
<elemento attributo1="valore" attributo2=valore">
Nel caso del paragrafo possiamo usare l'attributo ALIGN:CODICE<p align = left> <-- Allinea il testo al margine sinistro.
<p align = right> <-- Allinea il testo al margine destro.
<p align = center> <-- Centra il testo rispetto alla pagina.
<p align = justify> <-- Allinea il testo al margine sinistro e destro della pagina.
• L'elemento BR (break) è caratterizzato dal solo tag di apertura
• L'elemento HR è caratterizzato dal solo tag di apertura
• L'elemento Hn ha come funziona quella di creare un titolo con una grandezza decisa da dai noi che da H1 ad H6 :CODICE<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
Formattazione del testo
Spesso capita di dover formattare il testo anche nella sua estetica; ad esempio scrivere un termine in grassetto o in corsivo.
Nella tabella che vi rappresenterò ci sono i tag più utilizzati per la formattazione del testo.CODICE<u>...</u>Testo sottolineato CODICE<b>...</b>Testo in grassetto CODICE<i>...</i>Testo in corsivo CODICE<del>...</del>Testo sbarratoCODICE<sub>...</sub>Esempio di pedice CODICE<sup>...</sup>Esempio di apice CODICE<cite>...</cite>Serve per le citazioni
Caratteri speciali
Quando scriviamo un testo capita l'occasione di dover inserire caratteri speciali come ">" o "<" o "="
Potete consultare tutti i caratteri speciali a questo link.
CSS
Il css è un linguaggio di formattazione stilistica e strutturale di un documento html o di una serie di documenti in cascata, da qui il nome.
Il codice CSS può essere implementato in 3 modi diversi :
• Css il linea : modifica diretta su un elemento html.
• Css incorporato : nell'header della pagina.
• Css esterno : con un file esterno di estensione .css
1) Fogli di stile in linea: si utilizzano quando si ha la necessità di impostare uno stile a uno specifico elemento o blocco di elementi, senza che questo vada ad influire su altre parti del documento.
CODICE<head>
<title></title>
</head>
<body>
<h1 STYLE="color:RGB(0,0,0); background:magenta"> Questo paragrafo assumerà determinate caratteristiche</h1>
</body>
2) Fogli di stile incorporati: i fogli di stile incorporati sono utilzzati quando allo stesso stile fanno riferimento diversi elementi html.
CODICE<head>
<style TYPE="TEXT/CSS">
P{color: RGB(0,0,0)}
h3{color: RGB(4,0,233)}
</style>
</head>
<body>
<p> Questo paragrafo assumerà le caratteristiche definite nell'head 1</p>
<p> Questa intestazione assumerà caratteristiche presenti nell'head</p>
</body>
Prima di introdurre i fogli di stile esterni, voglio parlarvi dei selettori e classi. I selettori rivestono un ruolo importante poichè all'interno di documenti html, ricchi di elementi, è utile poterne selezionare solo alcuni, ed è quello che fanno i selettori.
Una classe serve invece per raggruppare logicamente elementi anche di tipo diverso
Esempio selettore
CODICE<head>
<style TYPE="TEXT/CSS">
#primo {color: RGB(0,0,0)}
</style>
</head>
<body>
<p ID="<b>primo</b>"> Questo paragrafo assumerà le caratteristiche del selettore</p>
<p>Questo paragrafo NON assumerà le caratteristiche del selettore</p>
</body>
Esempio Classe
CODICE<head>
<style TYPE="TEXT/CSS">
.nuovo
{ font-family: verdana;
color: red;
text-align: center
}
</style>
<head>
<body>
<p CLASS="nuovo"> Questo paragrafo assumerà le caratteristiche della CLASS</p>
<h2 CLASS="nuovo">Questo paragrafo assumerà le caratteristiche della CLASS</h2>
3) Fogli di stile esterni : sono dei fogli di stile presenti su un file esterno, cioè separato dal documento html.In questo file sono scritti tutti gli stili che necessitano, comprese le classi.
[Codice HTML]CODICE<html>
<head>
<link REL="Stylesheet" HREF="esempio.css" TYPE="Text/css">
<head>
<body>
<p CLASS="codice"> Prova 1 </p>
<p CLASS="codicedue"> Prova 2 </p>
</html>
[CSS ESTERNO - esempio.css]
p.codice {color: RGB(255,0,0)}
p.codicedue {color: RGB(0,255,0)}
N.B : Per utilizzare il css esterno e sufficiente creare con il blocco nuovo un file e modificare l'estensione da .txt a .css;
inoltre il file css deve essere presente nella stessa cartella di quello dell'html.
Elenchi
Rappresentano uno dei modi più naturali per informazioni; sono divisi in due categorie:
• Elenchi ordinati o <òl></òl>
• Elenchi non ordinati <ùl></ùl>
La creazione di questi elenchi è molto facile :
CODICE<b> Elenco ordinato</b>
<body>
<ol>
<li> 1
<li> 2
<li> 3
</ol>
</body>CODICE<b>Elenco non ordinato</b>
<body>
<ul>
<li> 1
<li> 2
<li> 3
</ul>
Tabelle
Le tabelle sono fondamentali per completare una pagina in html.
Come abbiamo visto il pc legge le informazioni da una pagina web a cascata, ossia dalla prima all'ultima in ordine di altezza.
Visto questo abbiamo già capito che è molto difficile inserire scritte o immagini dove vogliamo, per questo ci vengono in aiuto le tabelle.
I tag per scrivere una tabella sono i seguenti:CODICE<table border="2">
<tr>
<td>
contenuto della tabella
</td>
</tr>
</table>
Adesso dobbiamo inserire due attributi essenziali: rowspan e colspan
Con questi due attributi possiamo costruire tabelle con colonne o righe multiple, in pratica colonne o righe che possono occupare più spazi (più colonne o più righe) contemporaneamente.
Capirete meglio dagli esempi:CODICE<table border="1">
<tr>
<td>
prima colonna
</td>
<td>
seconda colonna
</td>
</tr>
<tr>
<td' colspan="2">
colspan="2", ossia della larghezza di due colonne </td>
</tr>
</tàble>
Altri attributi delle tabelle :
• Bgcolor=" " nome in inglese o esadecimale del colore.
• Background=" " nome sfondo con estensione gif, jpg, jpeg o png.
• Align=" " può essere right, left, center, justify ed allinea il contenuto delle celle in senso orizzontale.
• Valign=" " può essere top (sopra), middle (centro - default browser), bottom (sotto), baseline (alla base) ed allinea il contenuto delle celle in senso verticale.
• Width=" " unità di misura (px od altro) o in % determina le dimensioni in larghezza.
• Height=" " unità di misura (px od altro) o in % determina le dimensioni in altezza.
Bordi e spazi :molti attributi possono variare la grandezza, il colore o la visuale dei bordi. Vediamo con degli esempi alcuni di questi:
border=" " Può variare partendo da zero (senza bordo).CODICE<table border="10" >
<tr><td>
contenuto della tabella
</td></tr>
</table>
Link
I tag usati per generare i link sono e e la meta del link viene specificata aggiungendo al tag <a> usando l'attributo href="http://gamengine.forumcommunity.net/".
CODICE<a href=http://gamengine.forumcommunity.net/> clicca qui </a>
Form (moduli)
I form HTML permettono solo la realizzazione dell'interfaccia del modulo, ma da soli non offrono il controllo lagestione sui dati.
Vediamo ora di capire come si creano form.
I principali attributi, come visto nell'esempio, sono i seguenti:
•method - specifica il metodo di invio dei dati ed accetta i valori get o post;
•action - specifica lo script che riceverà, controllerà ed elaborerà i dati.
Passiamo adesso in rassegna i singoli tag che generano gli elementi dei form HTML:
•input - genera la maggior parte degli elementi dei form HTML, a seconda del type specificato;
•select - crea una casella di riepilogo a scorrimento, chiamata in gergo selectbox;
•textarea - genera un'area di testo in cui è possibile andare a capo e viene utilizzata per permettere di inserire descrizioni, commenti o comunque testi lunghi.CODICE<body>
<form>
<b>Informazioni personali</b>
Nome: <input type="text">
Cognome: <input type="text">
<b>Sesso</b>
<input type="radio" name="sesso" value="maschio">Maschio
<input type="radio" name="sesso" value="femmina">Femmina
<b> Sport praticati </b>
Nuoto <input name="n" type="checkbox">
Calcio <input name="c" type="checkbox">
Basket <input name="b" type="checkbox">
<b> Provincia di residenza</b>
<select name="utenti" size="4" multiple>
<option value="nome1">Sava
<option value="nome2">Manduria
<option value="nome3">Avetrana
<b>Hobby</b>
<textarea name="a3" rows="4" cols="30">
Inserisci qui i tuoi Hobby
</textarea>
<input type="submit" value="Invia">
<input type="Reset">
</body>
Vediamo quindi quali sono le caratteristiche e gli attributi più importanti degli elementi dei form HTML:
• Caselle di testo - permettono di inserire testi brevi ed il type da impostare è text;
• Selectbox - permettono di selezionare da un elenco il valore desiderato;
• Radiobutton - permettono di selezionare una ed una sola opzione per gruppo ed il type da impostare è radio;
• Checkbox - permettono di selezionare una o più opzioni per gruppo ed il type da impostare è checkbox;
• Textarea - permettono di inserire testi lunghi e di impostare l'altezza (rows) e la larghezza (cols) dell'area;
• Bottoni di invio - permettono di inviare i dati, specificando il type submit o button.
• L'attributo value imposta il valore di default dei singoli elementi.
La guida è stata realizzata da me, ma con l'ausilio, talvolta, del mio libro su Html&Css.
Enjoy
Edited by Mazzeo - 13/4/2012, 17:55
. -
Koskha .
User deleted
Salve, invece di accentare e apostrofare tutti i tag potresti metterli tra i BBCode [C0DE] e [/C0DE] esempio: CODICE<html> sample
<a href="http://google.it"> link
etc...
A presto
NB: per i siti senza supporto bbcode usa:CODICE< simbolo: <
> simbolo: >
(per i siti che non supportano le lettere accentate ad esempio si usano le ASCII entities &ID; ). -
Mazzeo .
User deleted
Grazie mille, putroppo non ho mai frequentato molti forum, quindi non sapevo di questa funzionalità, ti ringrazio ancora 
. -
.
Ottimo Mazzeo, fai come sempre un ottimo lavoro! 
Utilissimo!
. -
Mazzeo .
User deleted
Ma figurati, è un piacere essere utile
. -
Koskha .
User deleted
Molto utile per chi è alle prime armi, ma ti sei scordato di mettere una delle cose più importanti: CODICE<br> (HTML 4.01)
<br/> (XHTML 1.0)
Per andare a capo, che servirebbe proprio ovunque in quel form da compilare se no viene tutto attaccato.
Comunque davvero completa (io avrei messo in più qualche controllo JavaScript per il modulo da compilare (del genere devi compilare tutti i campi). -
Mazzeo .
User deleted
Nono non ho dimenticato il Br, l'ho inserito nella parte della struttura del testo.
Non ho messo però il br nel form come mi hai detto, per far vedere che è un esempio, grazie comunque che me lo hai fatto notare
. -
.Dennytor .
User deleted
Molto utile! Ti seguirò
. -
Mazzeo .
User deleted
Grazie denny 
. -
Koskha .
User deleted
Nono non ho dimenticato il Br, l'ho inserito nella parte della struttura del testo.
ops scusa non l'avevo notato perché non era presente nei codici invece tu l'hai scritto testuale senza fare l'esempio. Ancora scusa.. -
Mazzeo .
User deleted
Ma dai, tranquillo non c'è bisogno che mi chiedi scusa per un errore di lettura, tranquillo
.
Html & Css - Metodo di studio |
Web