Prima Pagina > Creazione Siti Web > Introduzione html - xhtml

News
Pubblicità

Introduzione html - xhtml

Chiariamo un punto: saper usare Front Page (orrore) o Dreaweaver (va già meglio) non fa di te un bravo web designer. Il segreto per diventare un bravo web designer è conoscere il codice, saper lavorare direttamente in html - magari usando il Notepad

Le istruzioni che seguono servono per creare lo scheletro di una pagina. Tutto il resto e' compito dei Css: layout struttura e formattazione del carattere.

Creare una pagina

Per iniziare a fare un sito basta copiare queste righe all'interno di un nuovo file di testo appositamente creato (magari nel desktop per ritrovarlo facilmente).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="it">
<head>
<title>Titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
Ciao Mondo!
</body>
</html>

Dopo aver copiato il testo nel file txt basta rinominare il file .html invece di .txt e il gioco è fatto: abbiamo creato una perfetta pagina web

Scarica la pagina di esempio in formato txt (tasto destro-salva con nome....)

All'interno di HEAD troviamo informazioni sulla pagina destinate al browser e ai motori di ricerca
All'interno di BODY troviamo tutte informazioni che vuoi siano visibili per chi leggerà
la pagina.

Cosa si può fare con l'HTML?

I tag sono dei comandi che il browser interpreta per eseguire determinate operazioni
HTML: Ciao io mi chiamo <strong>Claudio</strong>
RISULTATO: Ciao io mi chiamo Claudio

Niente di piu' semplice......

Formattazione Carattere

strong - Grassetto: <strong>Testo in Grassetto </strong> Testo in Grassetto
em - Corsivo: <em> Testo in Corsivo</em> Testo in Corsivo
em+strong <strong><em>Testo Cors/Gras</em></strong>
Rispettare l'ordine di apertura chiusura dei tag
Testo Cors/Gras
p - paragrafo <p>Claudio</p><p>Santori</p>

Claudio

Santori

br - a capo

Claudio<br />Santori

Claudio
Santori

Codificare il significato - heading

Titoli e sottotitoli si creano con le heading h1 h2....h6: il browser da un senso e riconosce che h1 e' piu' importante di h2 e cosi' via

Claudio

Colore preferito
Blu
Frutto preferito
Limone
<h4>Claudio</h4>
<h5>Colore preferito</h5>
<h6>Blu</h6>
<h5>Frutto preferito</h5>
<h6>Limone</h6>

Creare Tabelle

<table></table> e' il tag per creare una tabella. Una volta definite righe e colonne

<table>
<tr><td>Testo Colonna 1 riga 1</td><td>Testo Colonna 2 riga 1</td></tr>
<tr><td>Testo Colonna 1 riga 2</td><td>Testo Colonna 2 riga 2</td></tr>
</table>

Testo Colonna 1 riga 1 Testo Colonna 2 riga 1
Testo Colonna 1 riga 2 Testo Colonna 2 riga 2

....to be continued