5 passaggi per capire il codice HTML di base

L'HTML è una parte vitale del web come lo conosciamo. E mentre pochi web designer creano pagine digitando manualmente HTML, è comunque utile conoscerne un po '.

Analizzeremo alcune nozioni di base della lingua, compreso ciò che è realmente l'HTML, alcuni concetti fondamentali e il modo in cui interagisce con altre lingue. Pensa a questo come un corso accelerato "HTML for dummies".

Nozioni di base HTML: cos'è l'HTML?

HTML sta per Hypertext Markup Language . E mentre a volte è accontentato con i linguaggi di programmazione, questo non è accurato.

Come linguaggio di markup , HTML consente solo di creare il layout di visualizzazione delle pagine. Un vero linguaggio di programmazione , come Java o C ++, contiene logica e comandi che vengono eseguiti.

Mentre è semplice, l'HTML è alla base di ogni pagina del web. È responsabile del testo visualizzato in grassetto, dell'aggiunta di immagini e del collegamento ad altre pagine. Abbiamo una FAQ HTML che spiega di più.

Puoi fare clic con il pulsante destro del mouse sulla maggior parte delle pagine Web nel browser e scegliere Visualizza origine pagina o simile per visualizzare il codice HTML sottostante. Probabilmente questo contiene anche molto codice che non è HTML, ma puoi setacciarlo.

Visualizza l'esempio di origine HTML

Anche se non hai esperienza con i linguaggi di markup o di programmazione, imparare un po 'di HTML ti renderà un utente web più informato. Esaminiamo cinque passaggi di base per aiutarti a capire come funziona l'HTML. Forniremo esempi lungo il percorso.

Passo 1: Comprensione del concetto di tag

HTML utilizza un sistema di tag per categorizzare diversi elementi del documento.

La maggior parte dei tag viene in coppia per avvolgere il testo interessato al loro interno. Ecco un semplice esempio (il tag <strong> rende il testo in grassetto , ne discuteremo di più in un momento.)

 <strong>This is some bold text</strong>. 

Nota come il tag di chiusura inizia con una barra (/). Questo significa un tag di chiusura, che è importante. Se non si chiude un tag, tutto dall'inizio avrà quell'attributo.

Tuttavia, non tutti i tag hanno una coppia. Alcuni elementi HTML, chiamati elementi vuoti , non hanno contenuto ed esistono da soli. Un esempio è il tag <br> , che è un'interruzione di riga. Puoi "chiudere" tali tag aggiungendo una barra (come <br /> ) ma non è strettamente necessario.

Passaggio 2: il layout Skeleton HTML

Un documento HTML corretto deve avere determinati tag definiti in modo che siano disposti correttamente. Queste sono le parti essenziali:

  • Ogni documento HTML deve iniziare con <!DOCTYPE html> per dichiararsi come tale. Pertanto, il suo tag di chiusura, </html> , è l'ultimo elemento in un file HTML.
  • Successivamente, la sezione <head> include informazioni come il titolo della pagina, vari script eseguiti sulla pagina e simili. Come suggerisce il nome, questo di solito arriva subito dopo il <html> iniziale <html> . L'utente finale non vede gran parte del contenuto di questi tag.
  • Infine, il tag <body> contiene il testo della pagina che il lettore vede (oltre a molto altro). Qui troverai immagini, collegamenti e altro.

Poiché la sezione <body> costituisce la maggior parte di un documento HTML, il resto del nostro walkthrough esamina gli elementi che lo riguardano.

Passaggio 3: tag HTML di base per la formattazione

Successivamente, esaminiamo alcuni tag comuni che costituiscono documenti HTML. Ovviamente non è possibile coprire tutti gli elementi, quindi esamineremo alcuni dei più importanti. Abbiamo coperto molti altri esempi HTML se questi non ti soddisfano.

Se questi tag sembrano piuttosto elementari, ricorda che l'HTML è stato creato nel lontano 1993. Il web era molto basato sul testo e poi nelle sue fasi iniziali.

Semplice formattazione del testo

HTML supporta gli stili di testo di base come quelli che potresti trovare in Microsoft Word:

  • <strong> tag <strong> rendono il testo in grassetto .
  • <em> tag <em> (che significa "enfasi") saranno in corsivo .

HTML supporta anche il tag <b> per il grassetto e <i> per il corsivo. Tuttavia, è preferibile utilizzare quelli sopra.

In breve, <strong> e <em> mostrano come qualcosa dovrebbe essere compreso, mentre i tag di quest'ultimo ti dicono solo come dovrebbe apparire. Questi tag precedenti sono più accessibili agli screen reader utilizzati dagli ipovedenti.

Paragrafo e altre divisioni

Il tag <div> dell'HTML ti consente di definire una sezione del documento. Di solito, questo è abbinato al CSS (vedi sotto) per formattare una sezione in un certo modo.

Il tag <p> ti consente di dividere il testo in paragrafi. I browser posizioneranno automaticamente uno spazio prima e dopo di essi, consentendoti di suddividere il testo in modo naturale.

Puoi aggiungere intestazioni al tuo documento e renderlo più facile da seguire utilizzando i <h1> fino a <h6> . H1 è l'intestazione più importante, mentre H6 è meno importante. Quasi ogni articolo MakeUseOf utilizza intestazioni H2 e H3 per organizzare le informazioni.

Premere Invio per aggiungere interruzioni di riga nel documento HTML in realtà non li visualizzerà. Invece, puoi usare <br> per aggiungere un'interruzione di riga.

Ecco un esempio che utilizza tutti questi:

 <div class="example"> <h2>Example Heading</h2> <p>This is one paragraph.</p> <p>This is a second<br>paragraph split between two lines.</p> </div> 

Passaggio 4: inserimento di immagini

Le immagini sono una parte vitale della maggior parte delle pagine web. Puoi aggiungerli facilmente con HTML e persino impostarne diverse proprietà.

Inserisci un'immagine usando il tag <img> . Combinando questo con l'attributo src puoi specificare da dove vuoi caricare l'immagine.

Un altro attributo importante dei tag <img> è alt . Il testo alternativo consente di descrivere l'immag
ine per gli screen reader o nel caso in cui l'immagine non si carichi correttamente. Puoi passare il mouse su un'immagine per vedere il suo testo alternativo.

Usa gli elementi width e height per specificare il numero di pixel in cui appare l'immagine.

Metti tutto insieme e un tag immagine ha il seguente aspetto:

 <img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720"> 

Passaggio 5: aggiunta di collegamenti

Il World Wide Web non sarebbe molto di una rete senza collegamenti ad altre pagine. Usando il tag <a> , puoi collegarti ad altre pagine su qualsiasi testo.

All'interno del tag <a> , l'attributo href indica dove stai collegando. Semplicemente incollando l'URL funzionerà correttamente. Puoi usare l'elemento title per aggiungere un po 'di testo che appare quando qualcuno passa il mouse sopra il link.

Un collegamento di base ha questo aspetto:

 <a href="https://www.google.com/" title="Click here to search the web">Visit Google</a> 

Il tag <a> ha molti altri possibili elementi, ma non ci immergeremo in essi qui.

Come si collega HTML con CSS e JavaScript

Abbiamo esaminato le basi dell'HTML e come stabilisce una pagina web. Ma come puoi immaginare, l'HTML da solo non lo taglia per il web moderno. Semplici pagine Web HTML erano comuni nei giorni "Web 1.0", quando la maggior parte dei siti Web non erano altro che testo statico.

HTML antico sito web

Ma ora abbiamo molto di più. CSS (Cascading Style Sheets) è un linguaggio usato per descrivere come dovrebbe apparire il testo che hai preparato in HTML. Ricorda il tag <div> abbiamo parlato? All'interno di questo (e di altri tag), puoi definire un attributo di class . Quindi, nel tuo documento CSS di accompagnamento, puoi scrivere le istruzioni su come dovrebbe apparire quella class .

È possibile definire questi elementi di stile in linea nel codice HTML, ma questo è considerato di scarsa pratica in quanto è molto più difficile da mantenere. Scopri di più con questi semplici esempi CSS .

JavaScript

Abbiamo visto che HTML definisce il contenuto e CSS determina l'aspetto. JavaScript, l'ultimo membro del trio di vitale importanza per il Web, consente alle pagine Web di rispondere alle azioni delle persone senza caricare una nuova pagina ogni volta.

Ad esempio, JavaScript consente a un sito Web di avvisare l'utente che la password inserita non soddisfa i suoi requisiti prima di provare a inviarla. Un web designer potrebbe utilizzare JavaScript per scorrere le immagini in una presentazione o richiedere all'utente di inserire.

Questi sono solo alcuni esempi elementari. JavaScript è un linguaggio di scripting che è in grado di fare molto, ed è relativamente molto più complicato di HTML e CSS. Guarda la nostra panoramica di JavaScript per molto altro.

Guardare l'ambito completo del web design va oltre lo scopo di questo articolo, ma è sufficiente dire che l'HTML interagisce con altre lingue per creare le pagine web che conosciamo oggi.

L'evoluzione dell'HTML

È importante notare che HTML non è statico. L'HTML ha subito diverse revisioni, la più recente delle quali è l'HTML 5. In particolare, questo standard supporta l'incorporamento video nativo invece di affidarsi a formati proprietari come Adobe Flash.

Nuove iterazioni di HTML dichiarano anche alcuni tag arcaici come deprecati di volta in volta. Questi includono tag terribili come <marquee> e <blink> (rispettivamente scroll e flash text) comunemente visti nel design del sito web degli anni '90. Quindi tieni presente che gli standard cambiano nel tempo.

Una piccola conoscenza dell'HTML ha una lunga strada

Abbiamo fatto un breve tour su come funziona un documento HTML. Ora conosci i fondamenti di come sono strutturate le pagine web. Anche se non continui a costruire pagine web, sei un po 'più consapevole del web che usi ogni giorno.

Per saperne di più, consulta la nostra guida su come progettare il tuo primo sito web .

Immagine di credito: Belyaevskiy / Depositphotos

Leggi l'articolo completo: 5 passaggi per capire il codice HTML di base

Fonte: Utilizzare