• Vai alla navigazione primaria
  • Vai al contenuto
  • Passa alla barra laterale
  • Passa al pié di pagina

Il blog di HostingVirtuale

Hosting e Registrazione Domini

  • Facebook
  • Instagram
  • LinkedIn
  • Pinterest
  • RSS
  • Twitter
  • YouTube
  • Home
  • CMS
  • Social Media
  • Web Hosting
  • Web Design
  • Web Marketing
  • HostingVirtuale
    • Web Hosting
    • Cloud server
    • Server dedicati
    • Virtual Private Server
    • Sicurezza
Tu sei qui: Home / Web Design / Come funziona un sito web: HTML, PHP, CSS e JS

Come funziona un sito web: HTML, PHP, CSS e JS

Pubblicato il 31 Luglio 2015 da Salvatore Capolupo Lascia un commento Etichettato con: content marketing, wordpress

Come funziona un sito web: HTML, PHP, CSS e JS

Chiunque gestisce un sito web o un blog che sia ad uso personale, commerciale o promozionale, potrebbe trarre grande giovamento dal conoscere in modo approfondito quelli che sono, a livello di linguaggi per il web, i quattro “pezzi” basilari che costituiscono forma, contenuto, interazione e funzionalità di ogni singola pagina.

Quello che cercheremo di spiegare in questo articolo riguarda la base di come funziona un sito web e in particolare di:

  • CSS (che stabilisce la forma);
  • HTML (che regola il contenuto);
  • JavaScript (che cura l’interazione) ;
  • PHP (per le funzionalità dinamiche);

a prescindere dal tipo di CMS usato ad esempio con un Hosting WordPress, Joomla, Drupal e così via. Tutto questo rappresenta il punto di partenza anche per come creare un sito web.

Il modello client-server

Qualunque sia la tecnologia sottostante, in effetti, per gli scopi della nostra trattazione bisogna sapere che le pagine di un sito web vengono usualmente servite secondo il modello client-server: più visitatori (client) in pratica, richiedono in vari momenti della giornata le pagine di interesse ad un server, reperendole a seconda dei casi mediante motori di ricerca, social network o semplice passaparola.

Questo modello è molto consolidato nel web, per quanto venga poi implementato con alcune piccole accortezze e differenze, al fine di aumentare l’efficienza del servizio ed evitare overload (sovraccarichi) del server.

HTML: “inscatola” i contenuti delle pagine

Il markup HTML, detto impropriamente “linguaggio” HTML, serve a codificare opportunamente il contenuto di una pagina, ed aiuta gli utenti (ma anche i motori di ricerca) ad individuare le parti di ognuna più o meno rilevanti.

Mediante una serie di specifici tag, ovvero stringhe delimitate dai simboli < e >, è possibile individuare degli elementi univoci di vario tipo: i link della pagina, le parti in grassetto o corsivo del testo, i paragrafi, le sezioni ed altro ancora.

La cosa più importante è che HTML introduce una sorta di “doppio livello” nei contenuti web: da un lato quello che scriviamo in termini di tag, dall’altro quello che risulta essere visibile all’utente mediante browser (la “resa” finale della pagina).

In alcuni casi i tag possono essere accompagnati da uno o più attributi, che servono a specificare le caratteristiche intrinseche degli elementi in questione.

Eccovi due esempi di uso molto comune sulle varie pagine web:

  • <a href=”http://www.hostingvirtuale.com”>questo è un link a HostingVirtuale</a> (l’attributo è href valorizzato con il nome del sito tra virgolette; la resa sarà: questo è un link a HostingVirtuale;
  • questo è un <strong>grassetto</strong>, questo un <em>corsivo</em>; qui la resa finale sarà: questo è un grassetto, questo un corsivo.

Esistono altri tag senza effetti grafici evidenti che servono a delimitare le sezioni logiche di un sito, come ad esempio gli <span> ed i <div>; quello che bisogna ricordare in generale, è che ogni tag presenta un inizio ed una fine, cioè uno di apertura (ad esempio <a> o <span>) ed uno rispettivo, di chiusura (ad esempio </a>, </span>).

Con l’introduzione di HTML5, inoltre, sono stati resi disponibili dei tag ulteriori più avanzati, come ad esempio <article> (per individuare gli articoli di blog e riviste online) e <video>.

CSS: stabilisce lo stile della pagina

HTML di per sè fornisce informazioni sui contenuti e sulla struttura delle pagine, ma non dice nulla riguardo alla forma presentativa finale ed è quindi parte determinante per comprendere come funziona un sito web.

Per esprimere al meglio questo aspetto, ad esempio:

  • creare box rettangolari o dai bordi arrotondati;
  • inserire effetti di ombreggiatura nei box;
  • posizionare gli elementi nelle varie posizioni del testo;
  • moltissimi altri effetti di stilizzazione, al fine di rendere gradevoli i contenuti web per gli utenti.

è possibile fare uso del CSS, in particolare nella sua versione CSS3, che offre effetti grafici di alto livello compatibili, di solito, con la maggioranza dei browser in circolazione.

Di solito il CSS si include in fogli di stile a parte (file .CSS), oppure si integra dentro HTML direttamente.

JavaScript: regola il livello di interazione lato client

Il Javascript è forse uno degli elementi più ostici, insieme a PHP, delle pagine web: si tratta di un linguaggio di programmazione lato client che permette di inserire degli effetti che facilitino le operazioni degli utenti, implementando ad es.:

  • la possibilità di trascinare, riposizionare e dimensionare elementi (tag) HTML;
  • l’opportunità di implementare meccanismi avanzati di interazione con la pagina;
  • altri effetti di interazione atti per facilitare le operazioni che l’utente dovrà eseguire (ad esempio, durante la registrazione di un sito, la segnalazione di errori nella compilazione dei campi).

Non è raro inoltre, nelle pagine moderne, che JS interagisca con PHP (ad esempio con le funzioni di auto-completamento del testo), e che JS venga sfruttato mediante framework estensivi come jQuery, al fine di creare applicazioni complete stand alone, o addirittura videogiochi per browser.

PHP: rende le pagine dinamiche e regola l’interazione lato server

Il PHP è il linguaggio di programmazione principe per i siti base come per quelli più avanzati: interamente free ed open source, permette al webmaster di servire contenuti nella maniera più semplice o elaborata, permettendo di sfruttare ad esempio un singolo file .PHP per servire contenuti differenti.

Una trattazione approfondita di PHP richiederebbe diversi articoli e non è possibile affrontarla per esteso in questa sede. Potrebbe essere la base per un articolo su come funziona un sito e-commerce e che ci riserviamo di pubblicare in seguito.

Basti sapere, a questo livello, che i maggiori CMS si basano su di esso e sulle sue ricchissime librerie e che esso prevede meccanismi di interazione con il database, di creazione dinamica di pagine, di filtraggio delle informazioni, di realizzazione di motori di ricerca interni e di interazione con API (librerie) di servizi esterni, quali Google Analytics ed altri ancora.

Articoli correlati:

Come costruire una landing page che funziona Pinterest come funziona e come si usaPinterest come funziona e come si usa Le nuove funzioni di HVCP: Softaculous, Web Guard e HTML CacheLe nuove funzioni di HVCP: Softaculous, Web Guard e HTML Cache

Interazioni con il lettore

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Barra laterale primaria

  • Presenta un amico a HostingVirtuale: scopri come funziona l’offerta
  • Come fare un cloud backup del sito web
  • Programma di affiliazione hosting: guadagna pubblicizzando i servizi HostingVirtuale

La newsletter di HostingVirtuale

Iscriviti per ricevere aggiornamenti di Web Hosting, Web Design e Web Marketing e un codice sconto per provare subito i nostri servizi hosting.

Trasferimento gratis hosting e dominio
Ordina adesso

Offerta trasferimento hosting

Trasferisci hosting e dominio quasi gratis, dal secondo anno 15 euro per sempre! Dominio di secondo livello, 20 GB di spazio web, 10 email e 5 database MySQL inclusi.

Ordina adesso

Articoli recenti

  • Le nuove funzioni di HVCP: File Manager 20 Febbraio 2019
  • Le nuove funzioni di HVCP: introduzione alla versione 2.0 20 Febbraio 2019
  • Come fare screenshot: i migliori tool 12 Febbraio 2019
  • Cos’è il Business Manager di Facebook? 7 Febbraio 2019
  • Presenta un amico a HostingVirtuale: scopri come funziona l’offerta 5 Febbraio 2019

Footer

HostingVirtuale

  • Registrazione domini
  • Web Hosting
  • Posta Elettronica Certificata
  • Cloud server
  • Server dedicati
  • Virtual Private Server
  • Hosting reseller
  • Sicurezza siti web
  • Cloud Backup

Tag Cloud

app backup business cloud content marketing cpanel domini ecommerce email email marketing facebook freelance ftp google grafica hosting condiviso hosting gratuito hostinterview inbound marketing infografica instagram joomla malware mobile mysql news pannello clienti pec personal branding pinterest plugin prestashop reseller sconti seo server sicurezza ssl storytelling telegram tools tutorial twitter vps wordpress

Articoli recenti

  • Le nuove funzioni di HVCP: File Manager
  • Le nuove funzioni di HVCP: introduzione alla versione 2.0
  • Come fare screenshot: i migliori tool
  • Cos’è il Business Manager di Facebook?
  • Presenta un amico a HostingVirtuale: scopri come funziona l’offerta

© 2019 All Rights Reserved Hosting Virtuale srl Chieti Pescara Roma Partita IVA IT02586030690