Tre semplici modi per creare un sito Web: Guida per principianti passo dopo passo

Articolo scritto da:
  • Guide di hosting
  • Aggiornato: maggio 10, 2019

Creare un sito Web è semplicissimo in 2019.

Non devi essere un fanatico della tecnologia né un programmatore.

Segui il metodo giusto. Seleziona le piattaforme giuste. Usa gli strumenti giusti. Sarai 100% bene.

Avevo zero conoscenze nello sviluppo web quando ho iniziato la mia attività online su 2004. Non ho assunto uno sviluppatore web fino a undici anni dopo. E ho fatto bene.

Oggi abbiamo strumenti di sviluppo innovativi e piattaforme di pubblicazione web migliori.

Tre semplici modi per creare un sito web:

Collegamento veloce:

  1. Creare da zero
  2. Utilizzo di un sistema di gestione dei contenuti (CMS)
  3. Utilizzando un costruttore di siti web

Ottieni una maggiore flessibilità nei progetti e nelle funzioni del sito con il metodo #1 ma richiede una buona conoscenza dei linguaggi web.

La procedura di creazione e gestione del sito Web è molto più semplice con il metodo #2 e #3. Dovresti scegliere uno di questi metodi in base alla tua competenza.

Analizzeremo brevemente ciascuno di questi tre metodi.

Ma prima di iniziare ...

Prima di iniziare, abbiamo bisogno di due cose per il tuo sito web: 1- Un nome di dominio e 2- Web hosting.

1- Registra un dominio

Un dominio è il nome del tuo sito web. Deve essere unico e trasmettere il marchio della tua attività.

Il modo più semplice per cercare e registrare un dominio è andare a un registrar di domini.

Un registrar di domini ti consente di registrare il tuo nome di dominio tramite contratti annuali o contratti a lungo termine.

Cerca e registra il tuo nome di dominio su NameCheap
Cerca e registra i nomi di dominio presso Nome economico.

Ecco alcuni registrar di dominio affidabili da considerare.

registrarPrezzo di partenza
.com .net
123 Reg£ 11.99£ 11 .99
Domain.com$ 9.99 / anno$ 10.99 / anno
Gandi€ 12.54 / anno€ 16.50 / anno
Vai papà$ 12.17 / anno$ 12.17 / anno
Nome economico$ 10.69 / anno$ 12.88 / anno
Soluzioni di rete$ 34.99 / anno$ 32.99 / anno

Leggi anche - Nome di dominio per manichini.

2: acquista un hosting web

A host web è un grande computer (aka, server) che memorizza i tuoi siti web. Alcune società giganti - come Amazon, IBM e FB - possiedono e gestiscono i loro server web; altre aziende semplicemente noleggiano i loro server da un fornitore di hosting (che è molto più economico e facile).

Nota: saltare questo passaggio se si sta optando per un costruttore di siti Web per creare il proprio sito (vedere il passaggio #3).

Sito Web Hosting

Alcuni servizi di hosting per i neofiti da verificare.

Host WebRegistratiCommento
A2 Hosting$ 4.90 / moHost web veloce, neofiti amichevole.
BlueHost$ 3.95 / moPrezzo di iscrizione economico, newbies amichevole.
Hostgator Cloud$ 8.95 / moPrezzo ragionevole, server affidabile.
HostPapa$ 3.36 / moHost web ecologico, sconto esclusivo.
InMotion Hosting$ 3.49 / moPrezzo di registrazione economico, server affidabile.
SiteGround$ 5.95 / moIndustry #1 supporto per live chat, web host solido.

Ad oggi abbiamo firmato, testato e recensito più di 60 società di hosting. Guarda il nostro le migliori selezioni di hosting 10 or l'elenco completo delle recensioni di hosting.

Leggi anche - Quanto costa costruire un sito web.


FTC Disclosure

WHSR riceve commissioni di riferimento da alcune delle società menzionate in questo articolo. Ci vuole un sacco di sforzi e denaro per creare contenuti utili come questo - il tuo supporto è molto apprezzato.


Dopo aver impostato il nome di dominio e l'hosting web, è tempo di rimboccarsi le maniche e iniziare a creare!

Metodo #1: creazione di un sito Web da zero

Competenze e strumenti richiesti

Puoi creare il tuo sito web unico e distintivo da solo se conosci le principali lingue web e il fondamentale di un sito web.

Altrimenti, è consigliabile saltare al metodo #2 / 3; oppure, mettiti in contatto con uno sviluppatore web.

Linguaggi web / strumenti di base che dovresti sapere:

  • HTML (Hyper Text Markup Language)
    HTML è la struttura di base delle pagine Web e delle applicazioni Web che rende il contenuto semantico al browser web. È composto da tag sequenziali che hanno un'apertura e una chiusura e strutturalmente una parola chiave racchiusa tra parentesi angolari. Es: <strong> </ strong>
  • CSS (Cascading Style Sheets)
    CSS è il linguaggio di stile che viene utilizzato per decorare il markup HTML di una pagina web. Senza CSS, una pagina Web non apparirebbe nient'altro che una grande pagina bianca con testo e immagini non ordinati. Il CSS è la cosa che rende idealmente la pagina come vogliamo.
  • Lingue di scripting
    HTML e CSS non sono nulla senza linguaggi di scripting perché non sono interattivi. Per creare una pagina web dinamica che risponda agli utenti, hai bisogno di linguaggi come JavaScript e jQuery. Anche i linguaggi lato server come PHP, Python e Ruby potrebbero essere necessari nel tempo.
  • Gestione dei database
    Per archiviare, gestire e accedere ai dati di input dell'utente di un sito Web, viene considerata una grande tabella di informazioni che si chiama database. Un sistema di gestione dei database come MySQL, MongoDB e PostgreSQL viene utilizzato sul lato server per svolgere questo lavoro in modo efficiente.
  • FTP (File Transfer Protocol)
    FTP viene utilizzato per trasferire più facilmente i file di origine di un sito Web sul server ospitato. Ci sono client FTP basati su web e su software che possono essere usati per caricare i propri file sul computer server.

Processo di creazione di siti Web passo passo usando IDE

Ecco la panoramica del processo su come creare un sito Web di prima mano, assumendo che tu conosca le lingue web di base e gli elementi essenziali del sito web menzionati sopra.

Passo 1: imposta un ambiente di lavoro locale

Creare un sito con il testo di sottofondo
Screenshot dell'ambiente di lavoro del testo di sottorete.

Per creare e organizzare i file sorgente di un sito Web, è importante un buon ambiente di lavoro locale. È possibile creare un ambiente di sviluppo Web sul dispositivo del computer installando un IDE (Integrated Development Environment). Un IDE consiste fondamentalmente in un editor di testo, in una build automation e in un debugger.

Sublime Text e Atomo sono alcuni degli IDE di base per lo sviluppo web che supportano HTML, CSS, JS, PHP, Python e linguaggi web simili.

D'altra parte, ci sono IDE estesi come Adobe Dreamweaver che offre una manciata di altre funzionalità (Es .: Connettività server, FTP).

Passo 2: progetta e progetta il tuo sito web usando Adobe Photoshop

La struttura del sito Web di pianificazione e il sistema di navigazione sono di fondamentale importanza. In primo luogo, devi capire come vuoi consegnare i tuoi contenuti. Pianifica quanti menu di navigazione, quante colonne o campi di contenuti, quante immagini vuoi includere e dove.

La migliore pratica è l'apertura di Adobe Photoshop e la creazione di un disegno approssimativo delle tue pagine web. Potrebbe essere necessario eseguire diverse operazioni preliminari per pagine diverse, ad esempio la pagina iniziale, la pagina, la pagina di contatto, la pagina di servizio, ecc.

Mockup di progettazione che abbiamo utilizzato durante la creazione di questo sito Web
Esempi: design mock up che abbiamo fatto durante il rinnovo del sito a dicembre 2016.

Passo 3: codifica il design usando HTML e CSS

Dopo aver finito di realizzare progetti grezzi per le tue pagine Web in Adobe Photoshop, puoi iniziare a scrivere i codici sorgente.

Questa è la parte più facile. Crea markup HTML per gli elementi web che desideri includere e usa i CSS per decorarli in base ai disegni che hai realizzato.

Passo 4: rendilo dinamico usando JavaScript e jQuery

Solo i siti Web basati su HTML e CSS non esistono ai giorni nostri perché le interazioni degli utenti front-end non possono essere controllate tramite HTML o CSS.

È possibile utilizzare linguaggi di scripting come JavaScript e possibilmente la sua libreria migliorata, jQuery per controllare l'attività dell'utente per moduli, login, slider, menu o ovunque sia necessario.

Passo 5: carica file locali sul server usando il client FTP

Software FTP per la creazione di siti

Il passo finale è caricare tutti i tuoi file sorgente sul server web. Il modo migliore e più semplice per gestirlo è attraverso un client FTP.

Per prima cosa, scaricare un client FTP sul dispositivo del computer e collegarlo al server Web utilizzando un account FTP. Dopo averlo collegato correttamente all'account FTP, copia tutti i tuoi file locali nella directory principale della tua directory web. Alcuni buoni client FTP sono fileZilla, WinSCP e Cyberduck.


Metodo #2: creazione di un sito Web con CMS

Competenze e strumenti richiesti

  • Knwoledge: funzionamento di base di Computer e Internet; HTML, CSS e PHP (non obbligatorio ma meglio se conosci le basi)
  • Strumenti: WordPress, Joomla e Drupal

Un CMS o un sistema di gestione dei contenuti è costruito in modo talmente tattico da adattarsi ai principianti del primo giorno di lavoro agli sviluppatori Web esperti.

È un'applicazione software che semplifica la creazione e la gestione di contenuti online. Molti di questi sono open-source e gratuiti.

Se conosci le basi di HTML, CSS o PHP, è vantaggioso per te. Non è un grosso problema se non lo sai perché queste piattaforme sono molto intuitive. Ecco le prime tre scelte gratuite di piattaforme CMS che puoi scegliere in base alle tue esigenze.

Confronti rapidi

WordPressJoomlaDrupal
CostoGratuitoGratuitoGratuito
Impiego311,682 milioni26,474 milioni31,216 milioni
Temi gratuiti4,000+1,000+2,000+
Plugin gratuiti45,000+7,000+34,000+

Leggi anche - Top CMS rispetto (2018) - WordPress vs Joomla vs Drupal

WordPress

WordPress, secondo varie statistiche, viene utilizzato nel numero massimo di blog e siti web di piccole e medie dimensioni. Tuttavia, molti potenti siti Web preferiscono WordPress per la sua semplicità. L'Editor WYSIWYG è l'unica cosa che devi imparare per fare il tuo primo contenuto.

Questa piattaforma è istituzionale per i principianti e fortemente sviluppata da diverse classi di sviluppatori web. Ha molti plugin e temi gratuiti sul proprio repository. Per la sua scelta #1 CMS, molte risorse di terze parti sono disponibili sul lato.

temi
Scelte di temi WordPress.

Professionisti

  • Altamente flessibile e personalizzabile
  • Facile da usare,
  • Tonnellate di risorse per l'apprendimento,
  • Eccellente comunità e supporto

CONTRO

  • Richiede il codice per le principali personalizzazioni visive
  • Gli aggiornamenti potrebbero causare problemi con i plugin

Scopri di più

Joomla

Joomla è simile a WordPress in molti modi. È anche facile da usare, facile da installare e può essere facilmente ampliato con l'aiuto di moduli - l'equivalente dei plugin WordPress. Di conseguenza, è la seconda opzione migliore per i principianti.

Tuttavia, i principianti potrebbero essere più intimiditi nell'esplorare Joomla a causa del numero di opzioni disponibili. Oltre al menu di sinistra, c'è anche un menu sulla barra in alto a destra sopra il logo "Pannello di controllo". Per evitare confusione, ricorda che alcuni degli elementi dei menu a sinistra e in alto sono simili, tra cui "Contenuto", "Utenti" e "Estensioni".

Proprio come WordPress, Joomla ha alcuni stili e modelli che possono dare rapidamente al tuo sito un aspetto distintivo. Ma tra tutti e tre i sistemi di gestione dei contenuti, Joomla offre la soluzione più semplice quando si tratta di creare un social network. Con piattaforme come EasySocial e JomSocial, sei a pochi minuti dal tuo sito di social networking.

trattino
All'interno del sistema Joomla.

Professionisti

  • Più tecnicamente avanzato
  • I siti Web generalmente hanno un rendimento migliore
  • Sicurezza a livello aziendale

CONTRO

  • I moduli sono difficili da mantenere
  • CMS di medio livello - Non facile come WordPress, non così avanzato come Drupal

Ulteriori informazioni

Drupal

Gli sviluppatori web esperti attestano che Drupal è il CMS più potente.

Tuttavia, è anche il più difficile da usare. Grazie alla sua flessibilità, Drupal è il secondo CMS più usato al mondo, ma non è il preferito tra i principianti. Per creare con successo un sito Web "completo" utilizzando Drupal, è necessario sporcarsi le mani e apprendere le basi della codifica. Conoscere la strada attorno al CMS è anche una sfida per i principianti.

drupal
Installazione di un nuovo Drupal: nonostante le complicate funzioni di Drupal, il CMS offre un'interfaccia semplice e minimalista.

Professionisti

  • Facile da imparare
  • Grande portale di aiuto
  • Gli aggiornamenti si integrano perfettamente
  • Altre opzioni integrate

CONTRO

  • Curva di apprendimento ripida nella fase iniziale: consigliata per utenti esperti

Ulteriori informazioni

Processo di creazione di siti Web passo passo con WordPress

Per questo metodo, utilizzeremo WordPress come esempio. Ormai dovresti già averlo un account di hosting web e un nome di dominio registrato.

Passo 1: trova l'installer di WordPress nel tuo pannello di hosting web

I servizi di hosting Web di solito dispongono di un programma di installazione rapida per l'installazione di WordPress e altre piattaforme comuni.

Quindi accedi al tuo account di hosting web e scopri quale programma di installazione hai. I nomi popolari che dovresti cercare sono Softaculous, QuickInstall o Fantastico.

Alcuni provider di hosting (esempio: SiteGround) usa gli installatori integrati nella loro dashboard utente (lo schermo che vedi subito dopo l'accesso a cPanel). In tal caso, prova a trovare il titolo che include 'WordPress'.

Esempio: dashboard SiteGround cPanel.

Passo 2: Installa WordPress attraverso il programma di installazione

Softaculous è l'autoinstaller più popolare ed è disponibile su cPanel. Ti guiderò attraverso l'installazione tramite Softculous. Gli altri programmi di installazione sono praticamente uguali.

Fare clic su Softaculous e quindi fare clic su "Installa" su WordPress per iniziare l'installazione.

Installazione di WordPress per creare il tuo sito web

Ecco la parte importante.

Configurazione sito

Configurare le opzioni nel modo seguente, lasciare gli altri campi alla configurazione predefinita (verrà risolto in seguito) e fare clic su Installa.

  • Protocollo: è necessario decidere se si desidera installare http: // o http: // www. versione dell'URL. Qualunque cosa tu scelga, non vedrai molta differenza. Dal punto di vista tecnico, http: // www. è migliore in termini di flessibilità e gestione dei cookie. Nota che se hai un certificato SSL valido e vuoi installare WordPress su di esso, seleziona https invece di http.
  • Dominio: selezionare il dominio su cui si desidera installare il sito Web.
  • Directory: specificare dove si desidera installare il sito WordPress. Se vuoi installarlo sul tuo URL di root (es: http://www.yourwebsite.com/), tienilo in bianco. Se lo si desidera su un URL secondario (ad esempio: http://www.yourwebsite.com/myblog/), specificare la directory nel campo.
  • Account amministratore: imposta il nome utente, la password e l'e-mail che utilizzerai per accedere al tuo sito WordPress.

Se sei riuscito negli ultimi passaggi, ben fatto. Il tuo sito web è in diretta!

Ora accedi al tuo sito WordPress. La pagina di accesso del tuo sito sarà simile a wp-login.php che segue l'URL del sito web impostato.

Passo 3: installa un tema e alcuni plugin importanti

Successivamente, devi installare un tema e i plugin obbligatori. Dai un'occhiata alla barra laterale sinistra del tuo WordPress Dashboard.

Ci sono tonnellate di temi gratuiti già pronti disponibili nella directory di WordPress.

Per sfogliare questi temi gratuiti, vai su "Aspetto> Temi> Aggiungi nuovo", cerca il tema che soddisfa i tuoi requisiti e fai clic sul pulsante Installa.

Directory di temi WordPress
Directory del tema WordPress.

Puoi anche installare temi di terze parti dalla sezione "Carica temi". Per i temi WordPress a pagamento, professionali, consiglio Temi eleganti (per il suo codice efficiente e i bellissimi disegni front-end).

Per i plugin, sfoglia "Plugin> Aggiungi nuovo".

Cerca e installa i plugin di cui hai bisogno. 3rd I plug-in di Party possono anche essere installati dalla sezione "Carica plug-in".

Directory dei plugin WordPress
Directory dei plugin di WordPress.

Qui voglio suggerire alcuni importanti plugin gratuiti. Cerca con i loro nomi nella directory dei plugin di WordPress per trovarli. Si noti che l'installazione di un solo plugin per ogni categoria è sufficiente.

  • Per SEO: Yoast SEO, All in One Pacchetto SEO
  • Per sicurezza: iThemes Security, Wordfence Security
  • Per le statistiche del sito: Jetpack di WordPress.com, Google Analytics per WordPress di Monster Insights
  • Per la creazione di moduli: modulo di contatto 7
  • Per prestazioni: W3 Total Cache, WP Super Cache

Leggi anche - 9 Essential WordPress Plugin per nuovi siti WP

Passo 4: sei pronto!

Il tuo sito dovrebbe essere attivo e funzionante nell'ultimo passaggio. Ma ci sono alcune altre cose che dovrebbero essere risolte.

  • In "Impostazioni> Generali": imposta il titolo del tuo sito e la tagline.
  • In "Impostazioni> Lettura": quale dovrebbe essere la tua home page e quanti post del blog desideri mostrare su una singola pagina.
  • In "Impostazioni> Permalink": imposta quale sarà la struttura dell'URL del tuo post sul blog.

Impostazione di base per un nuovo sito WP
Impostazioni di base per il nuovo sito WordPress.


Metodo #3: creazione di un sito Web con i builder del sito

Abilità e strumenti richiesti

  • Knwoledge: operazioni di base di computer e Internet
  • Strumenti: Wix e Weebly

I costruttori di siti hanno reso semplice e immediato l'installazione di un sito Web. Senza la conoscenza dei linguaggi Web, è possibile avviare il suo sito Web completo in pochi minuti. Offrono ai costruttori di siti Web Drag & Drop che richiedono una conoscenza del codice zero.

Ci sono molti costruttori di siti sparsi su Internet - coperti da Disha Costruttori di siti gratuiti 26 in questo blogpost; ma non tutti possono soddisfare i bisogni.

I seguenti tre sono i costruttori di siti Web più chiacchierati e potenziali che è possibile utilizzare.

Wix

Usare Wix per creare un sito web

Wix è uno dei costruttori di siti più facili sul mercato che presenta modelli 500 + completamente personalizzabili ordinati in varie categorie. Quindi è quasi certo che ne troverai uno che fa al caso tuo.

Stanno offrendo un editor di siti Web Drag & Drop flessibile che è sempre visibile sul contenuto. È possibile trascinare un elemento dall'elenco e rilasciarlo in qualsiasi punto del sito Web per aggiungerlo. Qualsiasi elemento visibile su di esso può essere spostato o modificato.

L'unico inconveniente è che ci sono annunci pubblicitari in loco sul piano Wix gratuito. Puoi sbarazzartene aggiornandolo al loro piano combinato, che ti riporta indietro al minimo $ 12 / mese.

Leggi anche - La nostra recensione approfondita su Wix.

Weebly

Usando Weebly per creare un sito web

Weebly è più facile in molti modi come la navigazione, la facilità d'uso. Offrono centinaia di modelli tra cui scegliere, ma le opzioni di personalizzazione potrebbero sembrare limitate.

Hanno un buon numero di layout di pagina pre-progettati (ad esempio: pagina, pagina dei prezzi, pagina di contatto) che possono essere utilizzati e modificati.

Il builder Drag & Drop è più facile da usare ma a volte sei limitato alle aree designate per la personalizzazione. Anche la disponibilità di estensioni e app di terzi è limitata.

Leggi anche - La nostra recensione approfondita Weebly.

Processo di creazione di siti Web passo passo usando Wix

Passo 1: iscriviti per Wix

Crea un account su Wix.com.

Ci sono piani premium 5 e piano 1 gratuito (i prezzi vanno da $ 0 a $ 24.50 / mese). Vedrai le opzioni di aggiornamento dopo aver creato con successo un sito.

Consulta i piani Wix e i prezzi qui.

Iscrizione Wix
Wix pagina di iscrizione.

Raccomando il piano di pagamento base Wix - Combo. Il piano combinato Wix ($ 8.50 / mo) include un nome di dominio gratuito, più risorse della CPU e nessun annuncio Wix.

Passo 2: scegli un modello

Wix ti chiederà come vuoi creare un sito web. Il modo più rapido che suggerirebbe è Wix ADI (Artificial Design Intelligence) che alla fine non è molto fruttuoso.

Quindi ti guiderò un po 'più a lungo, ma nel modo migliore, il costruttore del sito web!

Vedrai che ci sono modelli classificati in diverse etichette. Sfoglia la tua categoria futura e scegli quella che fa per te.

Dopo aver trovato un tema Wix che ti piace, fai clic su "modifica" per procedere.

Modifica di una pagina Web su Wix
Il pulsante "modifica" viene visualizzato quando si passa il mouse su un tema.

Passo 3: Progetta il tuo sito web usando Wix Website Builder

Dopo pochi istanti, atterrerai direttamente sul loro intuitivo costruttore di siti web.

Progettare un sito Web è semplice. Vedrai diversi strumenti a sinistra e a destra dello schermo. Inoltre, fai clic in qualsiasi punto del sito Web per modificare il blocco o spostarlo in un altro luogo.

Elementi Wix
Costruisci i tuoi elementi della pagina web usando l'editor drag-and-drop di Wix.

Passo 4: pubblica il sito web

Quando premi il pulsante di pubblicazione, ti verrà chiesto se desideri un sottodominio gratuito o un dominio completo. È la tua chiamata

Sono consigliati alcuni aggiustamenti.

Vai su "Wix Dashboard> Gestisci e modifica sito" e configura SEO, Favicon, Social e Upgrade, se necessario.

Configurazione del sito Wix
Configura il tuo sito Wix. Clicca per ingrandire l'immagine.

E una volta che hai finito con queste impostazioni di base, il tuo sito web è pronto.

A proposito di Jerry Low

Fondatore di WebHostingSecretRevealed.net (WHSR) - una recensione di hosting fidata e utilizzata dagli utenti di 100,000. Più di 15 anni di esperienza in web hosting, affiliate marketing e SEO. Collaboratore di ProBlogger.net, Business.com, SocialMediaToday.com e altro.