5 passaggi per comprendere il codice HTML di base

5 passaggi per comprendere 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 conoscerlo un po'.





Vedremo alcune nozioni di base del linguaggio, incluso cos'è realmente l'HTML, alcuni concetti fondamentali e come interagisce con altri linguaggi. Pensa a questo come a un corso accelerato 'HTML for dummies'.



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

HTML sta per Hyper Text Markup Language . E mentre a volte è aggregato ai linguaggi di programmazione, questo non è accurato.





Come un linguaggio con marcatori , 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 sul 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 la fonte della pagina o simili per vedere l'HTML dietro di loro. Questo probabilmente conterrà anche molto codice che non è HTML, ma puoi setacciarlo.

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: comprendere il concetto di tag

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

La maggior parte dei tag viene fornita in coppia per avvolgere il testo interessato al loro interno. Ecco un semplice esempio (il



il tag fa il testo grassetto ; ne discuteremo di più tra un momento.)

This is some bold text .

Nota 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 in poi avrà quell'attributo.

come aggiungere righe in Word

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: layout HTML scheletro

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. Quindi, il suo tag di chiusura, |_+_| , è l'ultimo elemento in un file HTML.
  • Successivamente, il |_+_| 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 |_+_| il tag contiene il testo della pagina che il lettore vede (e molto altro ancora). Qui troverai immagini, link e altro ancora.

Dal momento che

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

Successivamente, diamo un'occhiata ad alcuni tag comuni che compongono i documenti HTML. Naturalmente, 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 semplici, ricorda che l'HTML è stato creato nel lontano 1993. Il Web all'epoca era molto basato sul testo nelle sue fasi iniziali.

Formattazione semplice del testo

HTML supporta stili di testo di base come quelli che troveresti in Microsoft Word:

  • |_+_| i tag fanno il testo grassetto .
  • |_+_| i tag (che sta per 'enfasi') lo faranno corsivo testo.

HTML supporta anche il vecchio

tag per grassetto e

per il corsivo. Tuttavia, è preferibile utilizzare quelli sopra.

In breve,

e

mostra come dovrebbe essere inteso qualcosa, mentre questi ultimi 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

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

Il

tag ti consente di dividere il testo in paragrafi. I browser inseriranno automaticamente dello spazio prima e dopo questi, permettendoti di suddividere naturalmente il testo.

Puoi aggiungere intestazioni al tuo documento e renderlo più facile da seguire usando il

attraverso

tag. H1 è l'intestazione più importante, mentre H6 è la meno importante. Quasi tutti gli articoli di MakeUseOf utilizzano le intestazioni H2 e H3 per organizzare le informazioni.

colpire accedere per aggiungere interruzioni di riga nel documento HTML non verranno effettivamente visualizzate. Invece, puoi usare

per aggiungere un'interruzione di riga.

Ecco un esempio che utilizza tutti questi:

Passaggio 4: inserimento delle 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. Combinando questo con il

L'attributo consente di specificare da dove si desidera caricare l'immagine.

Un altro importante attributo di

perché ho bisogno di una carta SIM?

tag è

. Il testo alternativo consente di descrivere l'immagine per gli screen reader o nel caso in cui l'immagine non venga caricata correttamente. Puoi passare il mouse su un'immagine per vedere il suo testo alternativo.

Utilizzare il

e




elementi per specificare il numero di pixel in cui appare l'immagine.

Metti tutto insieme e un tag immagine avrà questo aspetto:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



Il World Wide Web non sarebbe un granché senza collegamenti ad altre pagine. Usando il

tag, puoi collegarti ad altre pagine su qualsiasi testo.

Dentro il

src

tag, il

attributo dice dove stai collegando. Semplicemente incollando l'URL funzionerà bene. Puoi usare il

alt

elemento per aggiungere un po' di testo che appare quando qualcuno passa con il mouse sul link.

Un collegamento di base è simile a questo:

width

Il

height

tag ha molti altri possibili elementi, ma non li approfondiremo qui.

Come HTML si connette con CSS e JavaScript

Abbiamo esaminato le basi dell'HTML e come crea una pagina web. Ma come puoi immaginare, l'HTML da solo non è adatto al web moderno. Le pagine Web HTML semplici erano comuni ai tempi del 'Web 1.0', quando la maggior parte dei siti Web non era altro che testo statico.

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

Dr. Phil

tag di cui abbiamo discusso? All'interno di questo (e di altri tag), puoi definire a

attributo. Quindi, nel documento CSS di accompagnamento, puoi scrivere istruzioni su come farlo

dovrebbe guardare.

Puoi definire questi elementi di stile in linea nel tuo codice HTML, ma questa è considerata una cattiva pratica in quanto è molto più difficile da mantenere. Scopri di più con questi semplici esempi CSS . Dai anche un'occhiata come ottimizzare i tuoi file CSS .

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 che hai inserito 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 l'input all'utente.

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

Esaminare l'ambito completo del web design va oltre lo scopo di questo articolo, ma basti dire che l'HTML interagisce con altri linguaggi 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 è l'HTML 5. In particolare, questo standard supporta l'incorporamento di video nativi invece di affidarsi a formati proprietari come Adobe Flash.

Le nuove iterazioni dell'HTML dichiarano anche alcuni tag arcaici come deprecati di tanto in tanto. Questi includono tag orribili come

href

e

title

(rispettivamente testo a scorrimento e flash) comunemente visto nel design di siti Web degli anni '90. Quindi tieni presente che gli standard cambiano nel tempo.

Un po' di conoscenza dell'HTML fa molta strada

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

come lasciare una chat di gruppo iphone

Per saperne di più, aggiorna le tue capacità di sviluppo web con gli strumenti essenziali e poi dai un'occhiata la nostra guida su come progettare il tuo primo sito web .

Credito immagine: Belyaevskiy/ Depositphotos

Condividere Condividere Tweet E-mail 5 suggerimenti per potenziare le tue macchine Linux VirtualBox

Stanchi delle scarse prestazioni offerte dalle macchine virtuali? Ecco cosa dovresti fare per aumentare le prestazioni di VirtualBox.

Leggi Avanti Argomenti correlati
  • Programmazione
  • HTML
  • Sviluppo web
  • JavaScript
  • Strumenti per i Webmaster
  • Programmazione
  • HTML5
Circa l'autore Ben Stegner(1735 articoli pubblicati)

Ben è un vicedirettore e l'onboarding manager di MakeUseOf. Ha lasciato il suo lavoro IT per scrivere a tempo pieno nel 2016 e non si è mai guardato indietro. Si occupa di tutorial tecnici, consigli sui videogiochi e altro ancora come scrittore professionista da oltre sette anni.

Altro da Ben Stegner

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti