File HTML: come aprirli e creare un sito web

Ecco perché oggi parleremo del file HTML. Sapremo di cosa si tratta esattamente e a cosa serve, così come la sua origine. Vedremo anche come funziona, come crearne uno facilmente o quali sono i migliori programmi per aprirli e modificarli.

Cosa sono i file HTML

Quando si parla di HTML ( Hyper Text Markup Language) file, lo facciamo su un formato di file di lingua di mercato ipertestuale, che viene utilizzato come base di una pagina web. È memorizzato in un formato di testo standard e contiene diversi tag che sono responsabili della definizione sia del design che del contenuto della pagina Web, inclusi il testo, le tabelle, le immagini e i collegamenti ipertestuali che vengono visualizzati su di essa. Il loro utilizzo è principalmente online e vengono visualizzati nei browser web. Questo linguaggio è facile da imparare e può essere tradotto in altri come JavaScript, XML o CSS.

dove sorge

È stato nel 1991 che Tim Berners-Lee, insieme ad altri ingegneri del CERN, si è incaricato di farlo introdurre file HTML come un modo per i browser web di interpretare, leggere e visualizzare le pagine web. Da allora e fino ad oggi, è diventato uno standard nello sviluppo web. Lungo la strada ci sono state diverse revisioni come HTML 2 (1995), HTML 3 (gennaio 1997), HTML 4 (dicembre 1997) e, infine, HTML 5 (2014).

Nel 2004 un gruppo composto dai principali sviluppatori di browser, tra cui Google, Apple, Mozilla e Firefox, creato il COSA? (The Web Hypertext Application Technology Working Group) che in spagnolo sarebbe il Technology Working Group of Web Hypertext Applications. Questo gruppo è responsabile dello sviluppo e dell'avanzamento del formato HTML.

Come funziona

Attraverso il linguaggio di marcatura, vengono presentati gli elementi HTML che compongono le strutture delle pagine web. Tipicamente, ogni elemento include un tag di apertura racchiuso tra parentesi angolari ( ) e un tag di chiusura anch'esso racchiuso tra parentesi quadre, ma con una barra tra i tag ( ).

Successivamente, nel tempo, sono state introdotte nelle attuali pagine web HTML altre tecnologie web come il codice CSS (.css) e JavaScript (.js). In generale, gli sviluppatori creano e modificano i file HTML e poi li caricano sui server web dei browser, che sono responsabili dell'analisi e dell'interpretazione in pochi secondi, mostrandoci il risultato finale quando visitiamo la pagina. Questo è il motivo per cui non vediamo mai il codice sorgente HTML nel browser.

Per spiegare la struttura di base di un documento HTML, dobbiamo sapere che ci sono tre tag che lo descrivono e attraverso i quali vengono offerte semplici informazioni su di esso. Questi tag non influiscono affatto sull'aspetto del documento, ma semplicemente inquadrano e strutturano il file HTML:

• e : circonda il documento e indica la lingua in cui è scritto.
• : specifica la prefazione per il resto del file. All'interno sono presenti alcuni tag, evidenziando il titolo che è responsabile dell'identificazione del contenuto della pagina. Può esserci un solo titolo in ogni documento e, se possibile, mantienilo breve e significativo. Inoltre, nell'intestazione non dovrebbe esserci testo dal documento.
• : qui troviamo il contenuto o la causa principale del documento. Questa è la parte del documento HTML che viene visualizzata sul computer.

Visualizza l'anteprima HTML dal browser

Come accennato, i browser web sono responsabili dell'interpretazione del codice HTML per mostrarci graficamente tutto il contenuto, sia come testo, immagini o video, proprio come è stato progettato. Tuttavia, è possibile vedere un'anteprima di una pagina Web HTML di qualsiasi web dal browser, seguendo determinati passaggi a seconda di quello che utilizziamo

• Google Chrome: dal suo menu delle opzioni, cliccando su “Altri strumenti” e “Strumenti per sviluppatori”.
• Mozilla Firefox : Nel suo menu delle opzioni selezionate “Altri strumenti” e “Fonte pagina”.
• Microsoft Edge – Facendo clic su "Altri strumenti" e "Strumenti per sviluppatori" nel menu delle opzioni.
• apple Safari : nel suo menu delle opzioni cliccando su “Visualizza codice sorgente”.

Questi sono solo alcuni esempi all'interno dei browser più diffusi, ma praticamente qualsiasi browser web in commercio ha la possibilità di poter visualizzare il codice HTML.

Come creare facilmente un file HTML

Se vogliamo creare rapidamente e facilmente un file HTML, possiamo utilizzare questi editor di testo gratuiti, che ci permetteranno di crearlo e salvarlo in pochi secondi.

memo pad

È un semplice editor integrato in Windows, attraverso il quale può essere utilizzato per scrivere piccoli documenti di testo come note. Allo stesso tempo può anche essere usato per creare facilmente un file HTML. Per fare ciò, sarà solo necessario aprirlo dal motore di ricerca del menu Start.

Una volta aperto dobbiamo solo scrivere il codice che ci serve. Una volta terminato, facciamo clic sulla scheda "File", si aprirà un menu a discesa in cui selezioniamo "Salva come" .

Ora nella scheda Tipo nella parte inferiore della finestra, dobbiamo modificare l'opzione "Documenti di testo (*.txt)" in "Tutti i files (*.*)" . In questo modo, il nostro file verrà salvato come documento HTML. Non resta che selezionare la posizione del file e aggiungervi un nome insieme all'estensione "html". Non resta che cliccare su Salva per convertire il nostro documento di testo in un file HTML.

NotePad ++

Questo è forse il miglior editor di testo alternativo al Blocco note di Windows. È un programma gratuito e open source compatibile con diversi linguaggi di programmazione, ha il supporto nativo per Windows e con il quale possiamo creare un file HTML molto facilmente. Per iniziare, scaricalo dal sito web dello sviluppatore .

Una volta scaricato e installato, dobbiamo solo eseguirlo in modo che appaia la sua interfaccia. Scriviamo il codice desiderato e una volta terminato clicchiamo sulla scheda “File”. Si aprirà un menu a discesa in cui sceglieremo il file "Salva come" opzione.

Nella nuova finestra che appare, andiamo alla scheda Tipo, dove visualizziamo tutte le opzioni e selezioniamo "Lingua di markup ipertestuale (*.hmtl, *.htm, *.shtl, *.shtm, *.xhtml, *.xht, *.hta)" . Ora dobbiamo solo inserire il nome desiderato per il file HTML e la posizione in cui vogliamo che venga archiviato. Infine, fai clic su "Salva".

EditPad Lite

Un altro programma di editor di testo molto popolare è EditPad Lite, che ha una versione gratuita per uso personale. Ha il pieno supporto Unicode e consente la modifica diretta dei file di testo utilizzando le codifiche di testo di Windows e le interruzioni di riga. Nonostante la sua interfaccia sia in inglese e facile e intuitiva, ci permette di creare il nostro file HTML in pochi secondi. Per fare questo, la prima cosa è scaricalo dal suo sito ufficiale .

Lo installiamo e lo eseguiamo in modo che appaia la sua interfaccia. Qui scriviamo il codice di cui abbiamo bisogno e una volta terminato facciamo clic sulla scheda File. Si aprirà un menu a discesa in cui selezioniamo il file Opzione "Salva con nome".

Nella nuova finestra pop-up che compare, andiamo alla sezione Tipo, situata in basso. Qui visualizziamo l'elenco e scegliamo “Documenti HTML (*.html, *.htm, *.shtml, *.hta)” . Ora non ci resta che dargli un nome e un percorso per salvare il file. Infine, fai clic su Salva e abbiamo già creato il nostro file HTML.

I migliori programmi per aprire e modificare un file HTML

Per poter vedere un'anteprima dei file HTML, il nostro browser web potrebbe essere sufficiente. Tuttavia, se vogliamo aprire e modificare file HTML, è meglio utilizzare diversi tipi di programmi di sviluppo web come quelli che vedremo di seguito.

Visual Studio Code

Microsoft è l'azienda incaricata di sviluppare questo editor di codice sorgente che funziona con più linguaggi di programmazione, compreso HTML . È dotato del supporto per il debug del controllo integrato di Git, l'evidenziazione della sintassi, il completamento del codice intelligente, i frammenti e il refactoring del codice. Supporta anche l'uso di snippet, che ci aiuta a ridurre drasticamente il tempo impiegato per scrivere il codice. Naturalmente, il software è personalizzabile, il che ci consentirà di configurare tutto, dall'area di lavoro alla configurazione HTTP o CCS.

Visual Studio Code è un'applicazione multisistema che possiamo scarica gratis dal suo sito web.

SublimeTesto

Questa applicazione di modifica del testo per professionisti è diventata una delle migliori opzioni per aprire e modificare file HTML e CSS , insieme ad altri linguaggi di programmazione. Con esso saremo in grado di saltare a stringhe o simboli, definire diverse sintassi, evidenziare il codice, selezionare più righe ed eseguire un'edizione divisa. È anche compatibile con le scorciatoie da tastiera, che ci consentiranno di dominare e ridurre i tempi di programmazione e debug. È rivolto soprattutto ad utenti avanzati, quindi non è indicato per utenti inesperti che stanno iniziando a fare i loro primi lavori di programmazione.

Sublime Text è multipiattaforma e ha una versione gratuita che possiamo scaricare dal sito web dello sviluppatore .

Adobe Dreamweaver CC

Questa applicazione è stata creata e sviluppata da Adobe diventare uno degli standard del settore quando si tratta di progettare una pagina web in HTML , poiché ha alcune funzioni per creare pagine con le ultime innovazioni di design insieme a un aspetto moderno e consentendo una certa flessibilità per facilitare il nostro lavoro. La sua evoluzione nel tempo ha portato questo software a diventare una delle opzioni preferite dai web designer. Inoltre, se non sappiamo come programmare, include una serie di moduli predefiniti per aiutarci a creare siti web.

Siamo in grado di scaricare una versione di prova di Dreamweaver dal sito Web di Adobe. Se vogliamo usarlo in modo permanente, dobbiamo pagare un abbonamento di 24.19 euro al mese.