[TAG] Imparare Passo per Passo il HTML & CSS
×
Accedi al tuo account

Hai perso la password?
Registrati adesso è GRATUITO

Appena entrato avrai:
Norton Safe Web Connessione HTTPS Sicura

Registrati Adesso!

Menu
NAV
Pubblicità

BETA
Tag:
Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5

Tutorial [TAG] Imparare Passo per Passo il HTML & CSS

2689 Visite
Tecnico e Gestore
*******
5,056.50C
03/2013
118
1,022
Gestori
Messaggio: #1
Tutorial [TAG] Imparare Passo per Passo il HTML & CSS
04/06/2019, 00:49

Aggiorna il tuo account per nascondere gli annunci pubblicitari.

HTML o Hyper Text Markup Language è un linguaggio di markup utilizzato per descrivere documenti Web o siti Web come li chiamiamo normalmente. Per scrivere in HTML è sufficiente digitare qualcosa che può salvare documenti come file HTML. Io stesso uso Notepad ++, includerò un link per questo alla fine del tutorial. Oltre a ciò è possibile utilizzare qualsiasi browser Web, tutti i browser Web di oggi sono in grado di visualizzare HTML. HTML utilizza cose chiamate <tag>, tutti tranne alcuni hanno un <tag di apertura> e </ tag di chiusura>. Anche HTML5 non fa distinzione tra maiuscole e minuscole, ma ai fini di questo tutorial faremo tutte le lettere minuscole, perché alcune versioni precedenti fanno distinzione tra maiuscole e minuscole e devono essere così. Quindi, senza ulteriori indugi, iniziamo.


Storia dell'HTML:
L'HTML è stato sviluppato nei primissimi anni novanta del XX secolo da Tim Berners-Lee al CERN di Ginevra (Svizzera), assieme al protocollo HTTP dedicato al trasferimento di documenti in tale formato. Nel 1989 Berners-Lee propose un progetto che riguardava la pubblicazione di ipertesti, noto con il nome di "world wide web". All'interno di questo progetto in seguito nacquero sia il server web "httpd" (HyperText Transfer Protocol Daemon), sia il client WorldWideWeb (il primo browser della storia), il cui sviluppo partì nell'ottobre del 1990, e il cui uso fu esclusivamente interno al CERN fino alla sua pubblicazione nella rete internet nel corso del 1991. Assistito dai suoi colleghi all'interno dell'istituto Svizzero, Berners-Lee concorse alla definizione della prima versione dell'HTML, che fu ufficialmente resa pubblica nel giugno del 1993, co-firmata insieme a Daniel Connolly e sostenuta dal gruppo di lavoro dell'Internet Engineering Task Force (IETF) chiamato Integration of Internet Information Resources ("Integrazione delle risorse informative di Internet"), per proporla come standard IETF.[1]

Nel 1994 il linguaggio ha avuto una forte diffusione in seguito ai primi utilizzi commerciali del web, così nello stesso anno nacque il World Wide Web Consortium, e da quel momento in poi, lo sviluppo dell'HTML diverrà prerogativa del W3C.

Nel 1995 il W3C definì la versione 3.0 di HTML, a cui seguì la versione 3.2 nel 1997, e infine arrivarono nel 1998 le prime specifiche di HTML4.

La versione 4.01, pubblicata il 24 dicembre 1999 e penultima versione ufficiale, costituisce il frutto dei diversi ampliamenti e miglioramenti del decennio precedente, in particolare nella separazione del livello presentazionale della formattazione, cioè quella che descrive gli aspetti grafici del documento, in un'entità separata dall'HTML, i fogli di stile a cascata (CSS), definiti nello stesso anno nella loro prima versione, il livello 1[5]. Tale distinzione, tra contenuto e aspetto finale del documento, permette a browser e dispositivi differenti di rappresentare gli stessi contenuti in maniera consona alle diverse capacità grafiche e dimensioni disponibili. Se da una parte questo impone agli sviluppatori web la creazione di personalizzazioni dei fogli di stile, dall'altra ha garantito la massima diffusione del web ed evitato che esso diventasse un medium di élite.

Nel gennaio 2000, viene pubblicato come standard XHTML 1.0[6], una variante di HTML4 che usa XML 2.0 anziché SGML come metalinguaggio di markup, per migliorarne l'interoperabilità con altri linguaggi della famiglia come SVG e MathML[7] Il W3C decise di riformulare l'HTML4 e di continuare lo sviluppo solo su XHTML[8] e nel maggio 2011 XHTML 1.1 diventa uno standard ufficiale[9].

Nel corso del nuovo millennio, il W3C cominciò a lavorare a due nuovi progetti, uno orientato ad estendere l'XHTML, e l'altro destinato a definire un nuovo linguaggio che non sarebbe stato compatibile con le vecchie versioni di HTML e XHTML, noto con il nome di XHTML 2 (quest'ultimo progetto è stato dichiarato ufficialmente fallito alla fine del 2010, in favore di un approccio meno rigido).

Nel 2004, a seguito di una giornata di studi, nasce un gruppo di lavoro alternativo al consorzio: Apple, Mozilla Foundation, Opera Software e, in un secondo momento, anche Google, si riuniscono nel Web Hypertext Application Technology Working Group (WHATWG) e cominciano lo sviluppo di una nuova versione dell'HTML, preoccupati dal disinteresse per l'HTML dimostrato dal consorzio[10]. Nel 2006 il W3C decide di prendere parte allo sviluppo di HTML5 e nel 2007 si unì al WHATWG, i due gruppi collaborano fino al 2011, quando si rendono conto di avere obiettivi inconciliabili: il consorzio voleva tracciare una linea e pubblicare una nuova versione delle specifiche standard, mentre il WHATWG voleva uno standard in continua evoluzione[8]. Il W3C ha pubblicato la quinta revisione delle specifiche il 28 ottobre 2014.
https://it.wikipedia.org/wiki/HTML


La prima cosa che devi sapere è come dovrebbe apparire il flusso del tuo documento HTML, non può essere solo confuso. I tre tag principali da usare qui sono <head> , <body> e <footer> . Mentre non è necessario essere in ordine, è meglio tenerli in questo modo per rendere il documento più facile da leggere e modificare. Per questa parte ci occuperemo solo di ciò che ognuno di questi può contenere.

Il tag <head> in genere contiene informazioni di base sul file con cui stai lavorando, come titolo, metadati e doctype. Ognuno di questi sarà trattato in una sezione successiva del tutorial, quindi non li esamineremo molto qui. In HTML5 <head>il tag può essere omesso, ma lo useremo in questo tutorial per rendere le pagine più facili da leggere.

Il tag <body> contiene i contenuti della pagina web, tutto ciò che vedrà l'utente finale.

Il tag <footer> di solito contiene informazioni di copyright o di contatto. Può anche contenere collegamenti a cose come la mappa del sito o le informazioni dell'autore. Non è necessario che una pagina abbia un <footer> , ma può anche contenere più.

Il layout di base della pagina sarà simile.
<!DOCTYPE html>
<html>
<head>
contenuto del head
</head>

<body>
contenuto del body
</body>

<footer>
contenuto del footer
</footer>
</html>




Il Tag <head>

Il <head> viene utilizzato per definire le informazioni sulla pagina che si sta visitando, e può contenere i seguenti tag.
  • <title> Definisce il titolo della pagina, è obbligatorio in tutti i documenti HTML.
  • <style> Questo può essere incluso nella testa e determinerà il modo in cui gli elementi nella pagina vengono renderizzati.
  • <base> Il tag base determinerà l'URL di base per la pagina che stai visitando, l'utilizzo di esempio sarebbe <base href = "dominio.com /">
  • <link> Link può essere usato per collegare la pagina a una risorsa esterna come un foglio di stile. I fogli di stile sono trattati in una sezione successiva.
  • <meta> È usato per descrivere i metadati sulla pagina, avremo una sezione per questo verso la fine di questa guida per mostrare tutto ciò che puoi includere.
  • <script> Script viene utilizzato per determinare il javascript del lato client da utilizzare nella pagina.
  • <noscript> Questo è usato per visualizzare informazioni quando javascript è disabilitato.

Tutti questi tag saranno trattati in modo più dettagliato se vuoi saperne di più su di essi, questo è solo per mostrare cosa può essere incluso nel tag <head>.

Ecco un esempio di <head>.

<!DOCTYPE html>
<html>
<head>
<title>Il mio titolo</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
<base href="domain.com/">
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
</html>



<!DOCTYPE html>


<!DOCTYPE> non è un tag HTML, è una dichiarazione al browser su quale versione HTML stai usando. Dato che stiamo usando HTML5 c'è solo una dichiarazione doctype.
Questa deve essere la prima riga del documento HTML prima di ogni altra cosa.
<!DOCTYPE html>


Altri doctypes per diverse versioni di HTML.
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



Il Tag <body>

Il tag <body> definisce i contenuti della pagina Web e delinea ciò che vedrai quando visiti quella pagina. Il tag <body> supporta anche l' attributo di stile per visualizzarlo con l'

utilizzo di esempio CSS del tag <body>

<!DOCTYPE html>
<html>
<head>
<title>Il mio titolo</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body style="bgcolor:white;text-align:center">
<h1>Body</h1>
<p>Questo è il body</p>
</body>
</html>


Questo ci darebbe una pagina simile
[Immagine: RQKYmcJ.png]

Il <body> può contenere quasi tutti gli elementi in HTML alcuni esempi sarebbero
  • <Header>
  • <P>
  • <List>
  • <Table>
  • <Form>
  • <Object>
  • <Image>
  • <a href> (link)
  • e molti altri...

Esamineremo più elementi nella sezione tag vicino alla fine di questa guida.

Il Tag <heading>

Le intestazioni sono definite con i tag da <h1> a <h6> . Che vanno dal più importante al meno importante. La dimensione del testo delle intestazioni diminuisce quando diminuisce l'importanza. I tag <heading> devono essere usati solo per l'intestazione o il titolo di una pagina e non per fare testo di grandi dimensioni. Un buon esempio di utilizzo per le intestazioni sarebbe usare <h1> per il titolo e <h2> per la descrizione in questo modo.

<!DOCTYPE html>
<html>
<head>
<title>Il mio titolo</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Il mio titolo</h1>
<h2>La mia descrizione</h2>
</body>
</html>


Ecco cosa otteniamo.
[Immagine: wBpX3SQ.png]

Qualsiasi cosa dopo <h6> verrà ignorata dal browser poiché non è un codice HTML valido e verrà invece visualizzata come un paragrafo di base senza CSS.


Il Tag <p>

Il <p> viene utilizzato per definire un paragrafo, il gioco è fatto. È possibile utilizzare l' attributo di stile nel tag per riprodurre ogni singolo paragrafo con il proprio CSS, ad esempio un paragrafo

<!DOCTYPE html>
<html>
<head>
<title>Il mio titolo</title>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>Il mio titolo</h1>
<h2>La mia descrizione</h2>
<p style="color:green;text-align:right">Questo è un giusto paragrafo verde</p>
<p>Questo è un paragrafo che utilizza il CSS definito nella testa<p>
</body>
</html>


Questo ci darebbe il seguente risultato.
[Immagine: LMYcE9r.png]

Per le interruzioni di riga è possibile utilizzare il tag <p> per ciascun paragrafo oppure utilizzare l'interruzione di riga. I ritorni normali nel testo verranno ignorati dal browser in HTML5, quindi hanno qualcosa di simile
<p>Linea 1.
Linea 2.
linea 3.</p>


Si presenterebbe come
Codice:
Linea 1. Linea 2. Linea 3.

Per aggirare questo delimna spaziale possiamo usare entrambi
<p>Line 1.</p>
<p>Linea 2.</p>
<p>Linea 3.</p>

O
<p>Linea 1.<br>Linea 2.<br>Linea 3.</p>


Che apparirebbe come.
[Immagine: s1M0vlS.png]

in aggiornamento...

Firma:

Ciao Carò Utente Hai un Problema o una Domanda? bhe allora Contattaci:

Email: info@natnox.com
Twitter: Natnox
Facebook: Natnox

EMINEM & RIHANNA
[Immagine: 9vJLLEP.gif][Immagine: AUpdxc9.gif]

Rispondi


(Questo messaggio è stato modificato l'ultima volta il: 17/09/2019, 17:43 da Natnox.)
Aggiorna il tuo account per nascondere gli annunci pubblicitari.




Utenti che stanno guardando questa discussione: 2 Ospite(i)



Discussioni simili
Discussione Autore Risposte Letto Ultimo messaggio
  [INTRODUZIONE] Imparare Passo per Passo il HTML & CSS Natnox 0 327 04/06/2019, 00:38
Ultimo messaggio: Natnox
  Tutorial Scrivere un'articolo in html con immagine vicino Loois 0 438 14/06/2017, 23:40
Ultimo messaggio: Loois
  Guida HTML SEMPLICE CmsOwna 1 419 19/02/2017, 19:21
Ultimo messaggio: Kaise Kaskade
Wink Tutorial Icone social network con effetto di rotazione HTML&CSS Natnox 0 508 19/11/2016, 17:42
Ultimo messaggio: Natnox
  Tutorial [GUIDA] Capire passo passo l'HTML A-Style 1 1,014 27/07/2014, 13:27
Ultimo messaggio: Hewo ReNext
  Index [Html & CSS] Kralin 3 1,298 12/02/2014, 17:52
Ultimo messaggio: Natnox
  [Guida] Cosa sono i codici HTML, come usarli e dove, i principali più usati Ale7070 2 1,242 16/07/2013, 19:53
Ultimo messaggio: alessandro150