HTML è la spina dorsale di ogni pagina web.  Se sei un principiante, ti guidiamo attraverso i passaggi di base per comprendere l'HTML.

5 passaggi per comprendere il codice HTML di base

Annuncio pubblicitario L'HTML è una parte vitale del Web così come lo conosciamo. E mentre pochi web designer creano pagine digitando manualmente HTML, è comunque utile conoscerne un po '. Analizzeremo alcune nozioni di base sulla lingua, tra cui cos'è veramente l'HTML, alcuni concetti fondamentali e come interagisce con altre lingue. Pe

Annuncio pubblicitario

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

Analizzeremo alcune nozioni di base sulla lingua, tra cui cos'è veramente l'HTML, alcuni concetti fondamentali e come interagisce con altre lingue. Pensa a questo come a un corso intensivo "HTML for dummies".

Nozioni di base HTML: che cos'è HTML?

HTML è l'acronimo di Hypertext Markup Language . E mentre a volte è confuso con i linguaggi di programmazione, questo non è accurato.

Come linguaggio di markup, HTML ti 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.

Sebbene sia semplice, l'HTML è alla base di ogni pagina del Web. È responsabile di ciò che il testo appare in grassetto, aggiungendo immagini e collegando ad altre pagine. Abbiamo una FAQ HTML Le FAQ HTML essenziali che dovresti aggiungere ai segnalibri Le FAQ HTML essenziali che dovresti aggiungere ai segnalibri HTML è in circolazione da un po 'di tempo, quindi è giunto il momento di imparare le basi. Ecco cos'è, come funziona e come puoi scrivere alcuni elementi comuni in HTML oggi! Leggi di più che spiega di più.

Puoi fare clic con il pulsante destro del mouse sulla maggior parte delle pagine Web nel browser e scegliere Visualizza sorgente pagina o simile per visualizzare l'HTML dietro di esse. Probabilmente conterrà anche molto codice che non è HTML, ma è possibile setacciarlo.

Visualizza esempio di sorgente HTML

Anche se non hai esperienza con il markup o i linguaggi 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 la strada.

Passaggio 1: comprensione del concetto di tag

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

La maggior parte dei tag viene fornita in coppie per avvolgere il testo interessato al loro interno. Ecco un semplice esempio (il tag rende il testo in grassetto ; ne discuteremo più tra un momento).

 This is some bold text . 

Notare come il tag di chiusura inizia con una barra (/). Questo significa un tag di chiusura, che è importante. Se non chiudi 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, che è un'interruzione di riga. Puoi "chiudere" tali tag aggiungendo una barra (come
) ma non è strettamente necessario.

Passaggio 2: il layout Skeleton HTML

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

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

Dal momento che il sezione costituisce la maggior parte di un documento HTML, il resto della nostra procedura dettagliata esamina gli elementi che lo riguardano.

Passaggio 3: tag HTML di base per la formattazione

Quindi, diamo un'occhiata ad alcuni tag comuni che compongono i documenti HTML. Certo, non è possibile coprire tutti gli elementi, quindi esamineremo alcuni dei più importanti. Abbiamo coperto molti altri esempi HTML 17 Semplici esempi di codice HTML che puoi imparare in 10 minuti 17 Semplici esempi di codice HTML che puoi imparare in 10 minuti Vuoi creare una pagina web di base? Scopri questi esempi HTML e provali in un editor di testo per vedere come appaiono nel tuo browser. Leggi di più se questi non ti soddisfano.

Se questi tag sembrano piuttosto semplici, ricorda che l'HTML è stato creato nel lontano 1993. Il web era molto basato sul testo ai suoi inizi.

Formattazione semplice del testo

HTML supporta gli stili di testo di base come in Microsoft Word:

  • i tag rendono il testo in grassetto .
  • i tag (che sta per "enfasi") rendono il testo in corsivo .

HTML supporta anche il tag precedente per grassetto e corsivo. Tuttavia, è preferibile utilizzare quelli sopra.

In breve, e mostra come qualcosa dovrebbe essere compreso, mentre questi ultimi tag ti dicono solo come dovrebbe apparire. Questi tag precedenti sono più accessibili per gli screen reader utilizzati dai non vedenti.

Paragrafo e altre divisioni

HTML di tag consente di definire una sezione del documento. Di solito, questo è associato al CSS (vedi sotto) per formattare una sezione in un certo modo.

Il

tag consente di dividere il testo in paragrafi. I browser inseriranno automaticamente uno spazio prima e dopo questi, consentendo di spezzare naturalmente il testo.

È possibile aggiungere intestazioni al documento e semplificarne la consultazione utilizzando il

attraverso

tag. H1 è l'intestazione più importante, mentre H6 è meno importante. Quasi ogni articolo di MakeUseOf utilizza le intestazioni H2 e H3 per organizzare le informazioni.

Premere Invio per aggiungere interruzioni di riga nel documento HTML non li visualizzerà effettivamente. Invece, puoi usare
per aggiungere un'interruzione di riga.

Ecco un esempio che utilizza tutti questi:

Intestazione di esempio

Questo è un paragrafo.

Questo è un secondo
paragrafo diviso tra due righe.

Passaggio 4: inserimento di immagini

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

Inserisci un'immagine usando il etichetta. La combinazione di questo con l'attributo src consente di specificare da dove si desidera caricare l'immagine.

Un altro attributo importante di i tag è alt . Il testo alternativo consente di descrivere l'immagine per gli screen reader o nel caso in cui l'immagine non venga caricata correttamente. È possibile passare il mouse su un'immagine per visualizzarne il testo alternativo.

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

Metti tutto insieme e un tag immagine si presenta così:

 Dr. Phil 

Passaggio 5: aggiunta di collegamenti

Il World Wide Web non sarebbe molto simile a un web senza collegamenti ad altre pagine. Usando il tag, puoi collegarti ad altre pagine su qualsiasi testo.

Dentro il tag, l'attributo href indica dove stai collegando. Basta incollare l'URL funzionerà bene. Puoi usare l'elemento title per aggiungere un po 'di testo che appare quando qualcuno passa sopra il link.

Un link di base è simile al seguente:

 Visit Google 

Il tag ha molti altri elementi possibili, ma non ci immergeremo qui.

Come HTML si connette con CSS e JavaScript

Abbiamo esaminato la base dell'HTML e come viene creata una pagina Web. Ma come puoi immaginare, HTML da solo non lo taglia per il web moderno. Le pagine Web HTML semplici erano comuni ai giorni del "Web 1.0", quando la maggior parte dei siti Web non erano altro che testo statico.

Antico sito Web HTML

Ma ora ne abbiamo molto di più. CSS (fogli di stile a cascata) Il cheat sheet delle proprietà CSS3 essenziali Il cheat sheet delle proprietà CSS3 essenziali Gestisci la sintassi CSS essenziale con il nostro cheat sheet delle proprietà CSS3. Leggi di più è un linguaggio usato per descrivere come dovrebbe apparire il testo che hai preparato in HTML. Ricorda il tag di cui abbiamo discusso? All'interno di questo (e di altri tag), puoi definire un attributo di class . Quindi, nel documento CSS di accompagnamento, puoi scrivere istruzioni su come dovrebbe apparire quella class .

Puoi definire questi elementi di stile in linea nel tuo codice HTML, ma questo è considerato una pratica inadeguata in quanto è molto più difficile da mantenere. Scopri di più con questi semplici esempi CSS 10 Semplici esempi di codice CSS che puoi imparare in 10 minuti 10 Semplici esempi di codice CSS che puoi imparare in 10 minuti Vedremo come creare un foglio di stile in linea in modo da poter esercitare le tue abilità CSS. Quindi passeremo a 10 esempi CSS di base. Da lì, la tua immaginazione è il limite! Leggi di più .

JavaScript

Abbiamo visto che HTML definisce il contenuto e CSS determina l'aspetto. JavaScript, l'ultimo membro del trio vitale 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 avvisarti 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 l'input.

Questi sono solo alcuni esempi elementari. JavaScript è un linguaggio di scripting che è in grado di fare molto, ed è comparativamente molto più complicato di HTML e CSS. Vedi la nostra panoramica di JavaScript Che cos'è JavaScript e come funziona? Che cos'è JavaScript e come funziona? Che cos'è Javascript? È un linguaggio di programmazione utilizzato per migliorare le pagine Web. Include l'aggiornamento dinamico di pagine Web, interfacce utente e altro. Immergiamoci nel significato di Javascript. Leggi di più per molto di più.

Osservare 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 l'HTML non è statico. L'HTML ha subito diverse revisioni, la più recente delle quali è HTML 5. In particolare, questo standard supporta l'incorporamento di video nativi invece di fare affidamento su formati proprietari come Adobe Flash.

Nuove iterazioni di HTML dichiarano inoltre di volta in volta alcuni tag arcaici deprecati. Questi includono tag orribili come e (che scorrono e lampeggiano rispettivamente il testo) comunemente visto nel design del sito web degli anni '90 Quindi tieni presente che gli standard cambiano nel tempo.

Un po 'di conoscenza HTML fa molta 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 creare pagine Web, sei un po 'più consapevole del Web che usi ogni giorno.

Per saperne di più, aggiorna le tue capacità di sviluppo web con strumenti essenziali Aggiorna le tue abilità di sviluppo Web con questi 10 strumenti essenziali Aggiorna le tue abilità di sviluppo Web con questi 10 strumenti essenziali Pronto per iniziare a sviluppare siti Web? Questi strumenti online per sviluppatori web nuovi ed esperti sono garantiti per migliorare le tue abilità! Leggi di più e poi consulta la nostra guida su come progettare il tuo primo sito Web Come creare un sito Web: per principianti Come creare un sito Web: per principianti Oggi ti guiderò attraverso il processo di creazione di un sito Web completo da zero. Non preoccuparti se questo sembra difficile. Ti guiderò attraverso ogni passaggio. Leggi di più .

Credito di immagine: Belyaevskiy / Depositphotos

Ulteriori informazioni su: HTML, HTML5, JavaScript, programmazione, sviluppo Web, Strumenti per i Webmaster.