Come aprire un sito web in html

Come aprire o creare un sito Web HTML

Vorresti condividere i tuoi pensieri i tuoi lavori in uno spazio tuo? Che sia accessibile a tutte le persone che conosci, ma anche a nuove persone? Vuoi farlo su internet, ma non con una pagina pre-impostata? Non hai idea di come si faccia? In questa pagina ti spiegheremo i primi passi del linguaggio Web. I perchè, in caso, affidarsi ai professionisti.

Qui troverai molti dettagli su come utilizzarlo e come funziona, appunto la creazione di un sito. Anche se non sei molto portato per la tecnologia, utilizzeremo semplici passaggi automatici, per la creazione di un tuo piccolo sito che potrà crescere e migliorare col tempo!

Inizia a leggere! E se lo ritieni utile cominciare a provare a realizzare, allo stesso tempo, mentre continui a leggere l’articolo, forse sarà più semplice. Quindi prenditi del tempo, leggi, prendi appunti e se ti va prova i piccoli procedimenti.

Invece, se vuoi creare il tuo sito web allora contattaci subito per avere un preventivo accurato dove analizzeremo le tue richieste e così potrai avere un sito web adatto a te.

Creare un sito Web HTML – Premesse

Prima di partire col linguaggio HTML sarebbe molto meglio chiarire un po’ le idee rispetto a tutto ciò che può essere utile per la preparazione del sito.

Innanzitutto è bene capire il significato dell’acronimo HTML, che non è legato assolutamente alla programmazione quindi non ha niente a che fare con gli algoritmi, come normalmente si pensa, ma appartiene alla categoria di linguaggi che fanno mettere in atto e specificano la funzione di una parte di testo a cui sono riferiti. Forse ancora non è molto chiaro, ma sarà più semplice capirlo una volta che lo mettiamo in atto.

HTML significa Hyper Text Markup Language, cioè linguaggio di marcatura di ipertesti, quindi da’ un’impronta al testo di riferimento secondo un codice che andremo ad inserire e che influirà dopo sulla visione (tipo di scrittura, carattere, posizione) della scritta stessa sul nostro sito.

Quindi ciò di cui si occupa il linguaggio HTML è di indicare al programma, il quale interpreta il codice, i tipi di elementi, la loro disposizione sulla pagina. Questo avviene attraverso l’inserimento dell’oggetto o della frase all’interno delle due “freccette”: <>. Per esempio e scriviamo su HTML <img> questo codice indichera al programma l’inserimento di un immagine.

Il programma di HTML del momento (HTML5) ha in più, rispetto a quelli passati, la possibilità di gestire in modo autonomo degli elementi in più. Gestisce file multimediali, flussi audio, percentuale di luminosità dello schermo… Spesso questo evita, quindi, la necessità di utilizzare elementi come Applet Java o Flash.

Perciò HTML5 viene usato anche nella produzione di app dedicate a smarphone o altri dispositivi, che normalmente non posseggono alcune tecnologie aggiuntive.

Allora se creassimo una pagina con solo HTML ci ritroveremmo di fronte ad un sito statico, ossia che mostra sempre lo stesso contenuto e non  modificabile e che quindi per esempio un’utente che visualizza quel sito non può accedere ad un’altra pagina del sito stesso.

Ma, come scoprirete leggendo questo articolo, esistono molti linguaggi che interagiscono con HTML per creare siti web dififcili e non, pieni di contenuti: due dei linguaggi che vale la pena menzionare sono i CSS, che definiscono lo stile degli elementi delle pagine del sito, e JavaScript, un linguaggio di programmazione manipola la pagina dinamicamente e la rende interattiva se vogliamo.

Porzioni di Pagina Web HTML

Ora che hai capito il funzionamento dell’HTML, è il momento di capire la composizione delle pagine scritte con questo linguaggio. prima di continuare, però, è indispensabile fare una distinzione più che necessaria: il programmatore scrive il codice di una pagina HTML all’interno di un semplice file di testo, che può essere modificato sia con programmi di manipolazione del testo (come Blocco di Note e WordPad su Windows o TextEdit su MacOS) e attraverso editor molto più complessi (come Dreamweaver di Adobe), ma ciò che è contenuto nell’ HTML  appare nel sito vero e proprio navigando su internet.

Quindi il Browser rappresenta un’interprete internet, il quale segue tutti i comandi, traducendo i codici inseriti dal programmatore su HTML, in modo da mostrare tutto quello che il programmatore disegna mentalmente. Così il Browser ci mostrerà nella pagina la creazione del programmatore  con tutta la sua struttura e forma. Ovviamente noi entrando in un sito non vediamo i suoi “codici”, essi sono presenti ma nascosti.

Finita la premessa possiamo ora entrare più nel dettaglio di HTML. Come accennato si utilizzano le freccette per racchiudere gli elementi della pagina, questi vengono chiamati Tag o Marcatori, un d’inizio e uno di fine frase o argomento, mentre quello di fine stabilito con uno slash / , il quale indica la fine della disposizione di quell’argomento.

I valori sono precisati all’interno dei tag con le virgolette, mentre per inserire un’immagine , e quindi poter indicare il suo percorso si utilizza la scritta src=, e per la grandezza useremo width=. Perciò se vogliamo un immagine da 500 px, da un sito chiamato www.x.it inseriremo <img src=”https://www.x.it” width=”500″/> .

Una pagina HTML è un file di testo in .html dove al suo interno vengono specificati gli elementi che ne fanno parte. Alcuni di essi sono obbligatori per l’esistenza della pagina stessa.

<!DOCTYPE html> il più importante, perchè rappresenta le specifiche contenute in un file, indicando anche la versione HTML utilizzata,

<body> questo contiene tutto ciò che riguarda gli elementi che verranno visualizzati nella pagina, titoli principali o secondari, paragrafi, immagini, tabelle…

<head>  rappresenta l’icona della pagina o il titolo o altre info specifiche con cui la pagina viene gestita,

<html> questo contiene la pagina intera e viene utilizzata per definire la struttura tipo il markup e la lingua.

Creazione Base Sito HTML

Se fin qui è tutto comprensibile, siamo a buon punto! Difatti con qualche piccolo codice saremo già in grado di creare un nostro sito.

<body>  per il titolo principale, le caratteristiche proprie della pagina

<head>  come già detto, icona di pagina, titoli o info sulla gestione stessa della pagina

<html> il contenuto completo della pagina, markup e lingua

<h1>, <h2>, <h3>  suddividere i titoli in più o meno importanti. I precedenti codici servono appunto per cambiarne la grandezza a seconda della loro importanza

<p></p>  in questi codici puoi racchiudere un paragrafo

<br> questo è il tag per indicare che il testo seguente deve essere a capo

<img src=”…”> come già abbiamo visto questo tag serve a caricare un immagine da un determinato sito

<a href=””></a> questo sarà utile ad inserire un link in un piccolo testo, dentro il primo inseriamo il sito da collegare, nel secondo il testo che vogliamo che si legga nel momento in cui si clicca <a href=”https://www.x.it”>testo</a>, dove per testo intendiamo quello che si legge

<strong></strong>, <em></em>,<u></u> questi definiscono il testo al loro interno come grassetto nel primo caso, corsivo nel secondo e sottolineato nel terzo.

Prova sito HTML

Mettiamo il tutto alla prova! Apri il Blocco di Note di Windows o TextEdit per macOS, ad esempio

<!doctype html>

<html lang=”it”> 

<head>

<title>testoTitoloPrincipale</title>

</head>

<body>

<h1>altro piccolo testo da utilizzare come secondo titolo</h1>

<h2> Titolo del paragrafo</h2>

<p> Paragrafo completo </p>

<div class=”colore”>Non preoccuparti di questo div, presto lo capirai in seguito.</div>

<p> altro paragrafo</p>

<img src=”https://www.x.it/immagine.jpeg” width=”640″ height=”480″ />

<p>Per accedere ad un sito con un link -> <a href=”https://www.x.it” target=”_blank” />clicca qui.</a></p>

</body>

</html>

Metodi CSS

Adesso che abbiamo scoperto le basi per la formazione di una pagina web, vediamo come potergli dare miglior vita. Css è un secondo linguaggio che si utilizza nella produzione di siti web, molto diverso da HTML. Il linguaggio Cascading Style Sheets, CSS serve quindi a stabilire nello specifico  i dettagli di presentazione dell’intero documento scritto e della pagina stessa.

Ad esempio se vogliamo colorare il testo di rosso con spazio dei caratteri di 5 px e sfondo grigio:
colore { color:red; background-color:black; text-decoration:overline; letter-spacing: 5px;};

 salvalo in  file di testo con nome stile.css, all’interno della caretta dei file  HTML. Arrivati ad adesso, per incorporare il documento, bisogna aprire modifica nella pagina di cui abbiamo parlato poco fa e fare clic destro con il mouse sul file .html, seleziona Apri con dal menu contestuale e scegli il programma Blocco note/TextEdit, inserisci il testo <link href=”stile.css” rel=”stylesheet” type=”text/css”>  sotto il tag <head> e salva il file.

Tutto questo unito al Javascript danno vita a pagine web complete e più funzionali, per questo spesso ci si affida a dei professionali per questo lavoro.

Alle volte i professionali stessi ricorrono a Framework, strumento contenente pagine di HTML, Javascript e file di Css o HTML  che comunque servono a distinguere i vari siti prodotti. Uno di questi Framework più conosciuti e impiegati è Bootstrap, mentre poi i più comodi e completi sono i CMS (content management system) come  WordPress, Drupal, Magento, Joomla e Prestashop.

Queste sono semplici regole che ti porteranno a preparare una semplice pagina, ma che ti darà molta soddisfazione nella riuscita se non l’hai mai fatto. Ma considera sempre che dietro questi sistemi c’è uno studio lungo anni per il raggiungimento di costruzione di siti professionali che abbiano velocità e visibilità migliore. Per questo si consiglia di affidarsi a professionisti esperti che conoscono tutti i dettagli, i codici, ed eventuali mezzi per il raggiungimento più veloce e più effettivo della realizzazione dei siti.

E’ vero che chi fa da sé fa per tre, ma è anche vero che l’unione fa la forza! chiedi informazioni ad un professionista. Non te ne pentirai!

Contattaci
1
Chiedi il tuo preventivo
Ciao 👋
Come posso aiutarti?