Per iniziare a conoscere HTML. Le basi - Miscellanea57

capperi
Il computer: l'universo in casa ...
il computer l'universo in casa
Vai ai contenuti
Appunti di informatica > HTML

Cos'è.
L'html è un "semplice" linguaggio di scrittura, esso è la forma abbreviata di Hyper Text Markup Language.
Direte voi: e allora?....Dunque: L'ipertesto è semplicemente un testo che funziona come un link.
Markup Language è una maniera di scrivere informazioni sul layout dei documenti, in pratica un documento in HTML è soltanto un file che contiene solamente testo e nient'altro.
Quando un browser apre un file HTML,  va cercare codici HTML nel testo e li usa per modificare il layout, inserire immagini, o creare link per altre pagine.
Essendo dei semplici file di testo, i documenti HTML possono essere scritti anche col più semplice text editor - blocco note di Windows ne è un esempio -.
Molti, tra cui il sottoscritto,  preferiscono usare uno speciale HTML editor - possibilmente in grado di evidenziare il risultato visivo piuttosto che i codici - un cosiddetto WYSIWYG ("What You See Is What You Get") in pratica; quello che vedi è quello che è.
Questi editor, danno la possibilità di creare pagine più o meno nello stesso modo in cui si scrivono documenti in Word o qualsiasi altro text editor.
Ci sono comunque alcuni buoni motivi per creare le proprie pagine - o parti di queste - a mano, ad esempio: usare tag che un editor non adopera, leggere il codice delle pagine di altre persone e "prendere in prestito" degli effetti che ci interessano, creare degli effetti quando un editor non è in grado di produrli.
Come precedentemente scritto, possiamo scrivere il nostro HTML a mano con quasi tutti i text editor disponibili, anche il blocco note incluso di norma in Windows, dobbiamo "solamente" digitare il codice, poi salvare il documento, ricordandoci di dare al file un'estensione .html oppure un'estensione .htm ( per esempio "pagina.html").
Detto questo, iniziamo ora a fare conoscenza dei "Tags".


TAGS.
In pratica, un computer vede una "A" soltanto come una "A", senza fare distinzione tra grassetto, corsivo, maiuscolo o minuscolo.
Per dire al browser che una "A" deve essere in grassetto dobbiamo aggiungere una sigla davanti alla A, questo tipo di sigla si chiama Tag.
Tutti i tag HTML sono racchiusi in < e >.
Esempio: un testo come appare sullo schermo "questo è un esempio di testo in grassetto". Lo stesso testo in HTML sarà: "questo è un esempio di testo in <b>grassetto</b>.".
Come possiamo notare, il tag iniziale <b> indica che tutto quello che segue dovrà essere scritto in grassetto. Il corrispondente tag finale </b> indica che il browser non dovrà più scrivere in grassetto.

STRUTTURA DELLA PAGINA.

in genere le pagine web consistono in una "testa", in inglese "head" e un "corpo", detto anche "body"; l'head viene usata per testo e tag che non vengono mostrati direttamente sulla pagina, il body viene usato per testo e tag che sono visibili direttamente sulla pagina.
In pratica, tutte le pagine web hanno un tag <html> all'inizio e alla fine </html>, che indicano al browser l'inizio e la fine del documento.
Il codice più semplice - quello che useremo per ogni pagina che faremo, è questo:
<html>
<head>
<!-- Questa sezione è per il titolo e le informazioni tecniche sulla pagina. -->
</head>
<body>
<!-- Questa sezione è per tutto quello che vuoi mostrare sulla pagina . -->
</body>
</html>

SEZIONE "HEAD".

La sezione "head" della pagina web comprende tutto quello che non viene mostrato direttamente sulla stessa pagina.
I tag <title> e </title> racchiudono il titolo della nostra pagina, per intenderci; quello che si vede in cima, sulla sinistra della finestra del browser, quando la pagina è scaricata.  
Un'altra cosa che capiterà spesso di vedere nella sezione "head" è metatags.
I metatag vengono adoperati, tra le altre cose, per aggiornare le classifiche nei motori di ricerca.
Spesso la sezione "head" contiene javascript, un linguaggio di programmazione per pagine HTML più complesse.
Infine, molte pagine contengono codici per CSS (cascading style sheets), una tecnica che serve ad ottimizzare i layout dei siti più complessi.
Dato la relativa complessità di questi aspetti per questo livello, continuiamo spiegando la sezione "body".

SEZIONE "BODY".

Il corpo, "body", del documento, contiene tutto ciò che è visibile quando la pagina viene scaricata.
Con questa brevissima introduzione abbiamo visto gli aspetti più basilari di HTML.

HTML Approfondimenti

... Oltre ad un breve riassunto di quanto esposto nei precedenti appunti, daremo anche un breve cenno relativo agli ultimi sviluppi di questo linguaggio.

Appunti di informatica > HTML > Le basi > Approfondimenti.

Abbiamo letto nei precedenti appunti che, le sezioni principali in un documento html sono: HEAD e BODY le quali, sono racchiuse insieme dall'elemento HTML il quale, identifica il documento alla presenza del browser come contenente codice HTML.
In genere, i documenti HTML, nella parte superiore del listato, includono spesso informazioni relative all'uso del linguaggio e dell'autore.
Facciamo un esempio riferito al nuovo codice HTML5:
Apriamo una nuova pagina con il nostro editor HTML.
Questo è quello che dobbiamo scrivere se vogliamo iniziare una pagina in HTML5:

<!DOCTYPE html>

Poi dobbiamo aprire il tag html dichiarando la lingua.

<!DOCTYPE html>
<html lang="it">
</html>

Poi apriamo il tag head dove inseriremo tutte le keywords, i meta ,gli script e quant’altro:

<!DOCTYPE html>
<html lang="it">
<head>
</head>
</html>

Aggiungiamo il tag body dove si inseriscono tutti i testi e i vari contenuti del sito:

<!DOCTYPE html>
<html lang="it">
<head>
</head>
<body>
/body>
</html>

La parte più interessante riguardante l’HTML5 sono i nuovi tag creati  per velocizzare la scrittura delle pagine web, eccone alcuni:

<!DOCTYPE html>
<html
lang="it">
 <head>
 </head>
 <body>
   <header>
   </header>
   
<nav>
   </nav>

   <section>
   </section>
 </body>
</html>


Ecco di seguito, un'esempio d'inizio "reale" di pagina WEb in codice HTML5.





In HTML4 avremmo dovuto scrivere, tenendo presente la versione utilizzata, che sono:

Rigorosa (1.1)




Allargata (1.2)




Per documenti basati su frame (1.3)





Se stiamo lavorando su un singolo sito o, più siti contemporaneamente, è sempre utile creare modelli personalizzati.
Questi modelli, non sono altro che semplici documenti HTML utilizzati con una frequenza relativa cioè; invece di scrivere ogni documento partendo da zero, potremmo tenere a portata di mano un gruppo di modelli -  "personalizzati "appunto -  da utilizzare durante la scrittura del codice.
La creazione di modelli personalizzati diventa essenziale quando desideriamo creare:
Una semplice struttura di un documento HTML con tag di commento personalizzati.
Una struttura di base con attributi BODY, come i colori del testo e dei collegamenti, uniformi nell'intero progetto (vedi esempio seguente).




Lo schema di esempio superiore, contiene tag di commento - ovvero i dati riferiti a chi ha progettato la pagina e, relativo indirizzo di posta - personalmente standardizzati e, gli attributi BODY.


Un documento HTML che includa informazioni sui fogli di stile essenziali per l'intero progetto, come da schema seguente.



Un gruppo di frame predefiniti che possiamo utilizzare nei siti basati su frame.

Alcuni editor HTML, ci consentono di creare modelli utilizzando un suffisso predefinito. Verifichiamo con l'editor da noi impiegato per maggiori dettagli in proposito.
Grazie a queste semplici tecniche possiamo ridurre gli errori e aumentare la velocità di produzione, il codice sarà più ordinato e organizzato consentendoci di lavorare più facilmente su progetti di dimensioni variabili.
Per creare uno schema personalizzato, apriamo l'editor HTML o di testo e, creiamo la struttura HTML, come descritto precedentemente in questa sezione di appunti.
Inseriamo i tag di commento per indicare le sezioni logiche.
Aggiungiamo i tag di identità.
Salviamo il file utilizzando un nome logico e,  un'estensione personalizzata in modo che non entri in conflitto con gli altri formati di file.

Questi tag, vengono impiegati in genere per:
Segnalare sezioni di codice.
Commenti per identificare parti di testo o immagini.
Inserire informazioni utili relative alle pagine per chiunque utilizzi o utilizzerà il codice.
Rammentiamo che: anche i commenti iniziano e finiscono con i simboli di maggiore < e,  minore > ma, contengono anche un punto esclamativo con alcuni trattini , ad asempio: <!-- testo --> come possiamo vedere, il commento deve essere scritto tra i trattini.
In questo tag possiamo inserire qualsiasi dato, anche immagini che non vogliamo appaiano nella pagina sempre che, rientrino nei tag di commento.

Nota:

Guestbook
Cerca in questo sito
Torna ai contenuti