La guida HTML definitiva per principianti

Ultimo aggiornamento su 15 May 2018

Venti anni fa, anche se sei solo un blogger per hobby, dovevi conoscere alcuni codici Web per proteggerti o per aggiungere una semplice funzione al tuo sito. Ma ora ci sono così tanti editor e plug-in che non è più necessario nemmeno conoscere le basi dell'HTML fare un sito or gestire un blog.

Il problema è che se non conosci alcune nozioni di base, puoi facilmente metterti nei guai reali nel tuo blog e assumere uno sviluppatore costoso per risolvere quello che potrebbe essere un problema minore. Non solo, ma la creazione di modifiche al tuo blog come l'aggiunta di un widget di testo personalizzato richiede un po 'di conoscenza.

E se stai riscontrando che il layout dei contenuti non sembra corretto, la conoscenza dell'HTML può farti tornare in carreggiata.

Ecco alcune delle nostre versioni di guide HTML per i blogger e i proprietari di attività online non techie.

HTML è la spina dorsale di internet di oggi. Milioni di siti Web hanno formato Internet. Dove HTML è l'elemento costitutivo di tutti questi siti web.

Q & A per principianti

1- Che cos'è l'HTML?

HTML è l'abbreviazione di Hyper Text MArkupe Language. È la lingua standard per la codifica dei contenuti per i browser web.

HTML è rappresentato da "Elementi". Gli elementi sono anche noti come "tag".

2- Perché è necessario HTML?

I browser Web possono solo eseguire il rendering di un sito Web quando è scritto nella lingua supportata. HTML è il linguaggio di marcatura più comune e ha la massima accettazione per i browser web.

Ecco perché hai bisogno di HTML.

3- La maiuscole / minuscole HTML è sensibile?

HTML non è case sensitive. Ma la cosa migliore è scrivere HTML con casi appropriati.

Passi per la creazione del primo file HTML

Puoi creare un file HTML di base utilizzando il Blocco note sul tuo computer. Ma sarà doloroso scrivere molte righe di codici.

Hai bisogno di un editor di codice. Un buon editor di codice faciliterà la scrittura e l'organizzazione di codici di grandi dimensioni.

Io uso e consiglio Notepad + + (gratuito e open source) per scrivere linguaggi web. Ci sono altri editori che puoi usare come Sublime Text, Atomo ecc.

Ecco cosa devi fare:

  1. Installa un editor di codice
  2. Aprilo
  3. Crea un nuovo file
  4. Salvalo come un file .html

Sei pronto per andare!


Andare in cima

1- Ciao mondo!

Copia e incolla il seguente codice nel tuo nuovo file HTML e salvalo. Ora eseguilo sul tuo browser web.

Codice:

<! DOCTYPE html> <html> <head> <title> La mia prima pagina web </ title> </ head> <body> <p> Ciao mondo! </ P> </ body> </ html>

Produzione:

Congratulazioni! Hai creato il tuo primo file HTML. Non devi capirlo a questo punto. Lo copriremo a breve.

Capire la struttura HTML

Ogni file HTML ha una struttura nuda comune. Questo è dove tutto inizia. E ogni grande pagina di codici arriverà a questa struttura dopo il taglio verso il basso.

Quindi proviamo a capirlo dal codice "Hello World!". I seguenti elementi sono le parti obbligatorie per ogni file HTML.

  • <! DOCTYPE html> = È una dichiarazione al browser che si tratta di un file HTML. Devi specificarlo prima del tag <html>.
  • <html> </ html> = Questo è l'elemento principale di un file HTML. Tutto ciò che scrivi va tra <html> e </ html>.
  • <head> </ head> = Questa è la parte meta informazioni per un browser. I codici all'interno di questo tag non hanno output visivo.
  • <body> </ body> = Questa è la parte che viene resa da un browser web. Quello che vedi esattamente su un sito web è il rendering di codici tra <body> e </ body>.


Andare in cima

2- Tag HTML

HTML è la collaborazione di centinaia di tag diversi. Devi imparare come funzionano. Devi anche assicurarti che li abbiano usati nel modo giusto.

I tag HTML di solito hanno un'apertura e un tag di chiusura. Il tag di apertura ha la parola chiave circondata da un segno minore di (<) e maggiore di (>). Il tag di chiusura ha tutto uguale ma una barra in avanti (/) dopo il segno minore di (<).

(2a) Head Tags

Tutti i tag principali vanno tra <head> e </ head>. Contengono le meta informazioni per il browser web e i motori di ricerca. In pratica non hanno output visivo.

<title> </ title>

Il tag Title definisce il titolo di una pagina web visibile nella scheda del browser. Questa informazione viene utilizzata dai programmi Web e dai motori di ricerca. Puoi avere il titolo più alto per file HTML.

Codice:

<title> La mia prima pagina web </ title>
Il tag del titolo viene visualizzato nella parte superiore del browser.

<Link>

Link tag collega la tua pagina HTML con risorse esterne. Il suo uso principale è il collegamento di pagine HTML con fogli di stile CSS. È un tag che si chiude automaticamente e non ha bisogno del finale </ link>. Qui rel sta per relazione con il file e src indica la fonte.

Codice:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<Meta>

Meta è un altro tag a chiusura automatica che fornisce le meta informazioni di un file html. I motori di ricerca e altri servizi Web utilizzano queste informazioni. I meta tag sono indispensabili se vuoi ottimizzare la tua pagina per i motori di ricerca.

Codice:

<meta name = "description" content = "Questa è la breve descrizione che i motori di ricerca mostrano"

<script> </ script>

Il tag script viene utilizzato per includere uno script sul lato server o creare un collegamento a un file di script esterno. Può avere due attributi nel tag di apertura. Uno è il tipo e un altro è la fonte (src).

Codice:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

Il tag Noscript funziona quando gli script sono disabilitati in un browser web. Rende compatibile una pagina per coloro che non autorizzano gli script nei loro browser web.

Codice:

<Noscript> <p> Ahimè! Gli script sono disabilitati. </ P> </ noscript>

(2b) Body Tag

Tutti i tag del corpo vanno tra <body> e </ body>. Hanno uscite visive. Qui è dove si lavora di più. Devi usare questi tag per strutturare il contenuto della pagina principale.

<h1> </ h1> a <h6> </ h6>

Questi sono i tag di intestazione. L'intestazione più importante è contrassegnata con <h1> e la meno importante con <h6>. Dovresti usarli nella gerarchia corretta.

Codice:

<h1> Questa è una intestazione h1 </ h1> <hNUMMX> Questa è una intestazione h2 </ h2> <hNUMMX> Questa è una intestazione h2 </ h3> <hNUMMX> Questa è una intestazione h3 </ h3> <hNUMUMX > Questa è una intestazione h4 </ h4> <h4> Questa è una intestazione h5 </ h5>

Produzione:

Tag di formattazione

Il testo in un file html può essere formattato usando molti tag di formattazione. Sarà necessario quando si desidera evidenziare una parola o una linea dal contenuto.

Codice:

<p> Puoi evidenziare il tuo testo in molti modi. </ p> <p> Puoi <strong> grassetto </ strong>, <u> sottolineare </ u>, <em> corsivo </ em>, <mark > contrassegna </ mark>, <sub> subscript </ sub>, <sup> superscript </ sup> e altro ancora! </ p>

Produzione:

<->

Puoi deviare alcuni codici da rending usando il tag comment. Il codice apparirà nel codice sorgente ma non sarà reso. L'uso principale di questo tag è per la creazione di documentazione di file html per riferimenti futuri.

esempio:

<! - <p> Puoi commentare qualsiasi codice circondandoli in questo modo </ p> ->

(2c) Altri tag HTML importanti

<a> </a>

L'ancoraggio è un tag inestimabile che viene utilizzato quasi ovunque. Non vedrai nessuna pagina web online senza almeno un link di ancoraggio.

La struttura è la stessa. Ha un'apertura <a> e una parte finale </a>. Il testo che vuoi ancorare va tra <a> e </a>.

Ci sono alcuni attributi che definiscono dove e come l'utente va dopo aver cliccato su di esso.

  • ahref = "" = Definisce il link di destinazione. Il collegamento va tra le virgolette.
  • target = "" = Definisce se l'URL si aprirà in una nuova scheda del browser o nella stessa scheda. target = "_ blank" è per la nuova scheda e target = "_ self" è per l'apertura nella stessa scheda.
  • rel = "" = Definisce la relazione della pagina corrente con la pagina collegata. Se non ti fidi della pagina collegata, puoi definire rel = "nofollow".

Codice:

<p> <a target="_blank" href="https://www.google.com/"> Fai clic qui </a> per andare su Google. Si aprirà in una nuova scheda. </ P> <p> <a target="_self" href="https://www.google.com/"> Fai clic qui </a>. Ti porterà anche a Google ma si aprirà nella scheda corrente. </ P>

Produzione:

<img />

Il tag immagine è un altro tag importante senza il quale non è possibile immaginare molti siti Web basati su immagini.

<img /> è un tag che si chiude automaticamente. Non ha bisogno della chiusura tradizionale come </ img>. Ci sono alcuni attributi che devi sapere prima di poterlo usare correttamente.

  • src = "" = Questo serve per definire il link sorgente dell'immagine. Inserisci il link tra le doppie virgolette.
  • alt = "" = Sta per testo alternativo. Quando l'immagine non viene caricata, questo testo darà agli utenti un'idea sull'immagine mancante.
  • width = "" = Definisce la larghezza di un'immagine in pixel.
  • Altezza = "" = Definisce l'altezza di un'immagine in pixel.

esempio:

<p> Questo è il Googleplex in agosto 2014. </ p> <p> Questa immagine ha una larghezza di 500 pixel e un'altezza di 375 pixel. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Sede centrale di Google in agosto 2014 "width =" 500 "height =" 375 "/>

Produzione:

Suggerimenti: vuoi inserire un'immagine cliccabile? Avvolgi il codice dell'immagine con un tag <a>. Guarda come va.

<ol> </ ol> o <ul> </ ul>

Il tag lista serve per creare un elenco di elementi. <ol> sta per liste ordinate (elenco numerato) e <ul> sta per liste non ordinate (punti elenco).

Gli elementi dell'elenco all'interno di <ol> o <ul> sono contrassegnati con <li> </ li>. li sta per lista. Puoi avere quanti <li> vuoi nel tag genitore <ol> o <ul>.

Codice:

<p> Questo è un elenco ordinato: </ p> <ol> <li> Elemento 1 </ li> <li> Elemento 2 </ li> <li> Elemento 3 </ li> </ ol> <p> Questo è un elenco non ordinato: </ p> <ul> <li> Elemento 1 </ li> <li> Elemento 2 </ li> <li> Elemento 3 </ li> </ ul>

Produzione:

<table> </ table>

Il tag table serve per creare una tabella di dati. Esistono alcuni tag di livello interno che definiscono intestazioni, righe e colonne della tabella.

<table> </ table> è il codice padre esterno. In questo tag, <tr> indica la riga della tabella, <td> indica la colonna della tabella e <th> indica l'intestazione della tabella.

Codice:

<table> <tr> <th> Nome </ th> <th> Età </ th> <th> Professione </ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td> Uomo d'affari </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Infermiere </ td> </ tr> <tr> <td> Simone < / td> <td> 39 </ td> <td> Professore </ td> </ tr> </ table>

Produzione:

Nota: i valori all'interno del primo <tr> sono titoli. Quindi, abbiamo usato <th> che applica effetti di testo in grassetto al testo.

Raggruppamento delle tabelle

È possibile estendere la funzionalità di una tabella utilizzando gli elementi di raggruppamento della tabella. Ci saranno momenti in cui è necessario creare tabelle di grandi dimensioni che si suddividono in più pagine.

Raggruppando i dati della tabella in intestazione, corpo e piè di pagina, è possibile consentire lo scorrimento indipendente. L'intestazione e la parte del corpo verranno stampate su tutte le pagine su cui è stata eseguita la spaziatura della tabella.

I tag di raggruppamento della tabella sono:

  • <thead> </ thead> = Per avvolgere i titoli di un tavolo. Stampa su ogni pagina divisa del tavolo.
  • <tbody> </ tbody> = Per avvolgere i dati principali di una tabella. Puoi avere tanti <tbody> di cui hai bisogno. Un tag <tbody> indica un gruppo separato di dati.
  • <tfoot> </ tfoot> = Per avvolgere le informazioni del piè di pagina di una tabella. Stampa su ogni pagina divisa del tavolo.

Si noti che non è obbligatorio utilizzare il raggruppamento. Puoi usarlo per rendere le tabelle più grandi più leggibili. Mentre alcuni sviluppatori speciali usano marcatamente questi tag come selettori CSS.

Ecco come possiamo raggruppare la nostra tabella esemplificata in <thead>, <tbody> e <tfoot>:

Codice:

<table> <thead> <tr> <th> Nome </ th> <th> Età </ th> <th> Professione </ th> </ tr> </ thead> <tbody> <tr> <td> John </ td> <td> 27 </ td> <td> Uomo d'affari </ td> </ tr> <tr> <td> Carol </ td> <td> 26 </ td> <td> Infermiere </ td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td> Professore </ td> </ tr> </ tbody> <tfoot> <tr> <td> Persone totali: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

Produzione:

<form> </ form>

L'elemento del modulo viene utilizzato per la creazione di moduli interattivi per le pagine Web. Un modulo HTML contiene diversi elementi consecutivi. Ad esempio: <etichetta>, <input>, <textarea> ecc.

L'attributo di azione nella forma è molto importante. Indica una pagina lato server o di terze parti per l'elaborazione delle informazioni. Per l'elaborazione, è necessario prima definire un metodo.

Puoi utilizzare uno dei due metodi, ottenere o pubblicare. Ricevi invia tutte le informazioni nel formato dell'URL in cui Post invia le informazioni nel corpo del messaggio.

Esistono molti tipi di input per i moduli. Il tipo di input di base è il testo. È scritto come <input type = "text">. I tipi potrebbero anche essere radio, casella di controllo, e-mail e così via. Ci dovrebbe essere un input di tipo submit in basso per creare un pulsante di invio.

Il tag <label> viene utilizzato per creare etichette e associarle agli input. La regola di associare le etichette agli input è che hanno lo stesso valore in for = "" attributo di label e id = "" attributo di input.

Codice:

<form action = "#"> <label for = "firstname"> Nome: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Cognome: </ label> <input type = "text" id = "lastname"> <br> <label for = "bio"> Breve biografia: </ label> <textarea id = "bio" rows = "10" cols = " 30 "placeholder =" Inserisci la tua biografia qui ... "> </ textarea> <br> <label> Sesso: </ label> <br> <label for =" male "> Male </ label> <input type = "radio" name = "gender" id = "male"> <br> <label for = "female"> Femmina </ label> <input type = "radio" name = "gender" id = "female"> <br > <input type = "submit" value = "Submit"> <form>

Produzione:

Nota: ho indicato un'azione su un valore nullo perché non era connesso a nessun server per elaborare le informazioni.


Andare in cima

3- Attributi HTML

Gli attributi sono un tipo di modificatori per i tag HTML. Aggiungono nuove configurazioni ai tag HTML.

Un attributo sembra attributename = "" e si trova nel tag HTML di apertura. Il valore dell'attributo va tra le virgolette.

id = "" e class = ""

id e class sono gli identificatori dei tag HTML. Diversi nomi sono designati a diversi elementi HTML usando identificatori. È possibile utilizzare un identificatore di classe per più elementi. Ma non puoi usare un identificativo id per più elementi.

Codice:

<h1 class = "heading"> Questo è il titolo principale </ h1>

href =””

href sta per Hypertext Reference. Indicano agli utenti di fare riferimento ai collegamenti. Il tag di ancoraggio <a> utilizza href per inviare utenti a un URL di destinazione.

Codice:

<a href="https://www.google.com/"> Google </a>

src =””

src è sinonimo di origine. Definisce l'origine di un supporto o risorsa che stai utilizzando nel file HTML. La fonte può essere l'URL locale o di terze parti.

Codice:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

alt =””

alt sta per alternativa. È un testo di backup che viene utilizzato quando un elemento HTML non può essere caricato.

Codice:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Sede di Google" />

style =””

l'attributo style è spesso usato nei tag HTML. Fa il lavoro di CSS all'interno del tag HTML. Le tue proprietà di stile vanno tra le virgolette.

Codice:

<h2 style = "color: red"> Questo è un altro titolo </ h2>


Andare in cima

4- Visualizzazione del codice: Block vs Inline

Alcuni elementi iniziano sempre su una nuova riga e prendono l'intera larghezza disponibile. Questi sono elementi "Block".

Es: <div>, <p>, <h1> - <h6>, modulo ecc.

Alcuni elementi prendono solo lo spazio richiesto e non iniziano su una nuova riga. Questi sono elementi "in linea".

Es: <a>, <span>, <br>, <strong>, <img> ecc.

Dovrai differenziare gli elementi di blocco da inline quando userai gli stili CSS. In questa guida HTML, non è molto necessario.

Codice:

<! DOCTYPE html> <html> <head> <title> La mia prima pagina web </ title> </ head> <body> <h2> Questa è un'intestazione H2. Ha una visualizzazione a blocchi. </ H2> <h2> Questa è <u> un'altra intestazione H2 </ u>. Qui il tag di sottolineatura ha la visualizzazione Inline. </ H2> </ body> </ html>

Produzione:


Andare in cima

5- Doppia quota vs virgoletta singola in HTML

Questa domanda è molto ovvia. Cosa dovresti usare in HTML? Citazione singola o doppia citazione? Le persone sembrano usare entrambi ma quale è corretto?

In HTML, virgolette singole e virgolette sono uguali. Non fanno alcuna differenza nell'output.

Puoi usare chiunque tu preferisca. Ma mescolare entrambi in una pagina di codici è considerata una cattiva pratica. Dovresti essere coerente con qualcuno di loro.


Andare in cima

6: HTML semantico rispetto a HTML non semantico

L'HTML semantico è l'ultima versione di HTML, che viene anche chiamata HTML5. È la versione sviluppata di HTML non-semantico e XHTML.

Perché HTML5 è migliore? Nelle versioni precedenti, gli elementi HTML sono stati identificati dai nomi id / classe. Ad esempio: <div id = "article"> </ div> è stato considerato un articolo.

In HTML5, il tag <article> </ article> si rappresenta come un articolo senza bisogno di identificatore di id / classe.

Per motivi di HTML5, ora i motori di ricerca e altre applicazioni Web possono comprendere meglio una pagina web. I siti web semantici hanno dimostrato di fare meglio per il SEO.

Ecco una lista di alcuni popolari tag HTML5:

  • <main> </ main> = Questo è per il wrapping del contenuto principale che vuoi mostrare ai tuoi spettatori.
  • <header> </ header> = Questo è per segnare la parte di intestazione di un contenuto come meta del titolo o dell'autore.
  • <articolo> </ articolo> = Specifica un contenuto definito dall'utente o indipendente per i tuoi spettatori.
  • <section> </ section> = Può raggruppare qualsiasi codice come intestazione, piè di pagina o barra laterale. Puoi dire, è la forma semantica di un div.
  • <footer> </ footer> = Qui si trova il contenuto del footer, la dichiarazione di non responsabilità o il testo del copyright.
  • <audio> </ audio> = Ti consente di inserire file audio senza problemi di plugin.
  • <video> </ video> = Come <audio>, puoi inserire video usando questo tag senza problemi di plugin.

Una semplice struttura HTML5 sarebbe simile a questa:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> La mia prima pagina web </ title> </ head> <body> <header> <nav> <ul> < li> Menu 1 </ li> <li> Menu 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> Questo è il titolo dell'articolo </ li> h2> <p> Inserito da John Doe </ p> </ header> <p> Il contenuto dell'articolo va qui </ p> </ article> </ main> <footer> <p> Copyright 2017 John Doe </ p> </ footer> </ body> </ html>


Andare in cima

7- Validazione HTML

La maggior parte dei professionisti del web convalidano il loro codice dopo averlo terminato. Perché è necessario convalidare un codice quando funziona correttamente?

Esistono due possibili motivi per convalidare i tuoi codici:

  1. Ti aiuterà a rendere il tuo codice cross-browser e multipiattaforma compatibile. Il codice potrebbe non mostrare alcun errore nel tuo browser corrente, ma potrebbe esserlo in un altro. La convalida del codice lo risolverà.
  2. I motori di ricerca e altri programmi Web potrebbero interrompere la scansione della pagina se si verificano errori. È possibile confermare tramite convalida che non si riscontrano errori gravi.

W3C Validator è il servizio più popolare per la convalida del codice. Hanno diversi metodi per la convalida dei codici. Puoi caricare un file o inserire direttamente il codice nel loro motore di convalida.


Andare in cima

8- Altre risorse utili

L'HTML è un argomento in continua evoluzione. Le versioni più aggiornate di HTML potrebbero venire prima. Quindi devi rimanere aggiornato e continuare a praticare. La pratica è ciò che è l'HTML.

Ecco alcune risorse utili per te: