Guida HTML di base per manichini

Ultimo aggiornamento il 05 ottobre 2020


Vent'anni fa, anche se eri 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 plugin disponibili che anche la conoscenza delle basi dell'HTML non è più necessaria.

Il problema è che se non conosci alcune nozioni di base, puoi facilmente metterti nei guai nel tuo blog e dover 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.

HTML code.
"Codici" HTML.

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.

L'HTML è la spina dorsale di Internet di oggi. Milioni di siti web insieme hanno formato Internet. Dove HTML è il file elemento costitutivo di tutti questi siti web.

Prima di iniziare ...

1. 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 noti anche come "tag".

2. Perché è necessario l'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. L'HTML fa distinzione tra maiuscole e minuscole?

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!

Example of code editor Atom
Editor di codice - Atom

1. Hello World!

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

Codice:

La mia prima pagina web Ciao mondo!

Produzione:

Congratulazioni! Hai creato il tuo primo file HTML. Non devi capirlo a questo punto. Ci occuperemo 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 "Hello World!" codice. I seguenti elementi sono le parti obbligatorie per ogni file HTML.

  • = È una dichiarazione al browser che questo è un file HTML. È necessario specificarlo prima del file etichetta.
  • = Questo è l'elemento radice di un file HTML. Tutto quello che scrivi va in mezzo e .
  • = Questa è la parte meta informazioni per un browser. I codici all'interno di questo tag non hanno output visivo.
  • = Questa è la parte che esegue il rendering di un browser web. Quello che vedi esattamente su un sito web è il rendering di codici tra e .

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 tag di apertura e uno 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 lo stesso, ma una barra in più (/) dopo il segno di minore (<).

(2a) Head Tags

Tutti i tag head vanno in mezzo e . Contengono meta informazioni per browser web e motori di ricerca. Fondamentalmente non hanno output visivo.

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:

La mia prima pagina web
Tag del titolo: esempi HTML
Il tag del titolo viene visualizzato nella parte superiore del browser.

Il tag di collegamento collega la tua pagina HTML a risorse esterne. Il suo utilizzo principale è il collegamento di pagine HTML con fogli di stile CSS. È un tag a chiusura automatica e non ha bisogno della fine . Qui rel sta per relazione con il file e src significa la fonte.

Codice:

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="This is the short description that search engines show"

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:

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

Codice:

Ahimè! Gli script sono disabilitati.

(2b) Body Tag

Tutti i tag del corpo vanno in mezzo e . Hanno output visivi. È qui che si fa la maggior parte del lavoro. Devi usare questi tag per strutturare il contenuto della tua pagina principale.

per

Questi sono i tag di intestazione. L'intestazione più importante è contrassegnata con e il meno importante con . Dovresti usarli nella gerarchia corretta.

Codice:

Questa è un'intestazione h1 Questa è un'intestazione h1 Questa è un'intestazione h1 Questa è un'intestazione h2 Questa è un'intestazione h2 Questa è un'intestazione h2

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:

Puoi evidenziare il tuo testo in molti modi. Puoi grassetto , sottolineato , corsivo , marchio , pedice , apice e altro!

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 di calcolo dei costi nella Domanda:

You can comment out any code by surrounding them in this way -->

(2c) Altri tag HTML importanti

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 una parte di apertura e una di chiusura . Il testo che vuoi ancorare va tra e .

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:

Fare clic qui per accedere a Google. Si aprirà in una nuova scheda. Fare clic qui . Ti porterà anche a Google ma si aprirà nella scheda corrente.

Produzione:

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

è un tag a chiusura automatica. Non necessita della tradizionale chiusura come . Ci sono alcuni attributi che devi conoscere prima di poterlo utilizzare 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.
  • larghezza = "" = Definisce la larghezza di un'immagine in pixel.
  • Altezza = "" = Definisce l'altezza di un'immagine in pixel.

esempio di calcolo dei costi nella Domanda:

Questo è il Googleplex nell'agosto 2014. Questa immagine ha una larghezza di 500 pixel e un'altezza di 375 pixel.

Produzione:

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

o

Il tag elenco serve per creare un elenco di elementi. sta per elenchi ordinati (elenco numerato) e sta per elenchi non ordinati (elenchi puntati).

Gli elementi dell'elenco all'interno di o è contrassegnato con . li sta per elenco. Puoi averne tanti come vuoi all'interno del genitore o etichetta.

Codice:

Questa è una lista ordinata: Articolo 1 Articolo 2 Articolo 3 Questa è una lista non ordinata: Articolo 1 Articolo 2 Articolo 3

Produzione:

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

è il codice genitore esterno. In questo tag, sta per riga del tavolo, sta per colonna della tabella e sta per intestazione della tabella.

Codice:

Nome Età Professione Jo 27 Uomo d'affari Carol 26 Infermiera Simone 39 professoressa

Produzione:

Nota: valori all'interno del primo sono titoli. Quindi, abbiamo usato che applica l'effetto 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:

  • = Per avvolgere i titoli di un tavolo. Stampa su ogni pagina divisa del tavolo.
  • = Per avvolgere i dati principali di una tabella. Puoi averne tanti di cui hai bisogno. UN tag indica un gruppo separato di dati.
  • = 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 , e :

Codice:

Nome Età Professione John 27 Uomo d'affari Carol 26 Infermiera Simone 39 professoressa Persone totali: 3

Produzione:

L'elemento modulo viene utilizzato per creare moduli interattivi per le pagine web. Un modulo HTML contiene diversi elementi consecutivi. Ad esempio:, , eccetera.

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 . I tipi potrebbero anche essere radio, casella di controllo, e-mail e così via. Ci dovrebbe essere un input per il tipo di invio in basso per la creazione di un pulsante di invio.

tag viene utilizzato per creare etichette e associarle agli input. La regola per associare le etichette agli input è che hanno lo stesso valore nell'attributo for = ”” dell'etichetta e nell'attributo id = ”” dell'input.

Codice:

Nome di battesimo: Cognome: Breve biografia: Genere: Maschio Femmina

Produzione:

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

3. Attributi HTML

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

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

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:

Questo è il titolo principale

href = ""

href sta per Hypertext Reference. Indirizzano gli utenti a link di riferimento. Il tag di ancoraggio utilizza href per inviare gli utenti a un URL di destinazione.

Codice:

Google

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:

alt =””

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

Codice:

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:

Questo è un altro titolo

4. Visualizzazione del codice: blocco vs in linea

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

Ex: , , - , modulo ecc.

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

Es: ,, ,, eccetera.

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

Codice:

La mia prima pagina web Questa è un'intestazione H2. Ha la visualizzazione a blocchi. Questa è un'altra intestazione H2. Qui il tag di sottolineatura ha la visualizzazione in linea.

Produzione:

5. Virgolette doppie vs virgolette singole 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, virgoletta singola e virgoletta doppia 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.

6. HTML semantico vs 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 erano identificati da id / nomi di classe. Per esempio: era considerato un articolo.

In HTML5, tag si presenta come un articolo senza bisogno di alcun 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:

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

Una semplice struttura HTML5 sarebbe simile a questa:

La mia prima pagina web Menù 8 Menù 1 Questo è il titolo dell'articolo Inserito da John Doe Il contenuto dell'articolo va qui Copyright 2 John Doe

7. Convalida 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 in caso di errori. Puoi confermare attraverso la convalida che non hai alcun errore grave.

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.

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: