27 novembre 2013

HTML: formattazione del testo (1)

Nell'articolo precedente abbiamo introdotto il tag BODY. Questo tag racchiude il corpo del testo e tutto ciò che verrà visualizzato dal browser. I tag principali che vedremo sono quelli per la formattazione del testo e dei paragrafi, i tag per l'inserimento di immagini e file audio, e i tag per l'inserimento dei collegamenti ipertestuali. Negli anni passati venivano utilizzati per il tag BODY attributi come bgcolor, text, link, background, ma ora sono deprecati. Al loro posto vengono utilizzati attributi quali CLASS, ID e STYLE che vedremo con i fogli di stile. Vediamo ora i tag per la formattazione del testo.

Tag di intestazione.

Ci sono sei livelli di intestazione: <h1>, <h2>, <h3>, <h4>, <h5> e <h6> che servono a dividere il documento in sezioni e a inserire più titoli all'interno della stessa pagina, anche dello stesso livello.

Tag per stili fisici.

Questi tag indicano al browser il formato specifico del testo. Alcuni comandi non funzionano con determinati browser. Ne è un esempio il tag <blink> per il testo lampeggiante che funziona solo con Netscape Navigator.

Tag per stili logici.

Questi tag formattano il testo in base al suo significato. Da notare che il testo viene visualizzato in maniera diversa da ciascun browser. In effetti ogni browser assegna a ciascun stile una formattazione particolare. 





 beruby - Rimborsi per i tuoi acquisti e prenotazioni in Internet

25 novembre 2013

PHP HyperText Preprocessor

PHP è un linguaggio di programmazione con il quale possiamo generare dinamicamente porzioni del documento HTML, ma possiamo generare anche immagini, documenti PDF, XML, filmati Flash, ecc.. Il codice PHP viene normalmente inserito nel documento HTML racchiuso all'interno dei tag <?php e ?>. Ogni documento che contiene codice PHP va salvato con estensione .php. Vediamo come funziona la sua architettura: 
  • Il browser richiede al server un documento php. 
  • Il server invia al modulo PHP il documento richiesto.
  • Il modulo PHP interpreta solo il codice racchiuso dai tag <?php e ?>. Tutto ciò che è al di fuori viene ignorato.
  • Il server invia al browser l'output del modulo PHP.
Gli script PHP vanno inseriti nella directory associata alla direttiva DocumentRoot, che troviamo nel file httpd.conf. È qui che il server andrà a cercare i documenti richiesti dal browser. Ad esempio per chi utilizza il software MAMP sul Mac potrà inserire gli script php nella DocumentRoot "/Applications/MAMP/htdocs".
Un esempio di programma php:
<html>
<head> <title> Info PHP </title> </head>
<body>
   <?php 
      phpinfo(); 
   ?>
</body>
</html>
La funzione phpinfo() crea una pagina HTML contenente le informazioni su come PHP è stato installato.


19 novembre 2013

CSS

I CSS (Cascading Style Sheets) sono fogli di stile in cascata nati allo scopo di indicare al browser come visualizzare i vari elementi di un documento, avendo a disposizione una vasta scelta di stili. Uno foglio di stile è una collezione di regole stilistiche che definiscono il "look & feel" degli elementi. Ogni stile definisce quindi l'aspetto e la modalità di interazione di una parte di testo all'interno del documento. 
Se separiamo il documento HTML dal foglio di stile CSS otteniamo molti vantaggi quali chiarezza semantica e stilistica e uno strumento potente e generale che ci permette di separare l'aspetto delle pagine web dal loro contenuto. Con un solo foglio di stile CSS è possibile controllare più documenti HTML contemporaneamente e non solo, pensate di dover gestire e modificare l'aspetto di un enorme sito, possiamo farlo andando a modificare il foglio di stile in modo veloce e accurato senza toccare il documento HTML. 
Ma perché vengono definiti fogli di stile in cascata? Quando il browser esamina le regole lo fa in cascata, significa che le regole in un foglio esterno hanno minore priorità di regole interne ai tag di un documento HTML. 
Ci sono tre metodi per specificare uno stile:
  • Inline style e quindi all'interno di elementi (tag) HTML: <p style="text-align:center; background:blue;">. Ma come accennato prima questo metodo è sconsigliabile perché rende le pagine più confuse e difficili da leggere.
  • Internal style sheet e quindi all'interno del tag HEAD in questo modo: <style type="text/css"> P{text-align:center; background:red;} </style>.
  • External style sheet e quindi in un file esterno attraverso il tag LINK da inserire nella sezione HEAD: <link rel="stylesheet" type="text/css" href="nomefogliodistile.css">. Quest'ultimo è il metodo che preferisco per i vantaggi specificati sopra.

16 novembre 2013

HTML: il tag HEAD

Le semplice regole da seguire quando si scrive un documento HTML "corretto" non sono molte. Un documento HTML inizia con il tag di apertura <html> e termina con il tag di chiusura </html>. In questo modo indichiamo al browser di visualizzare il contenuto racchiuso tra i due tag in formato HTML. Come potete notare un tag di apertura ha un tag di chiusura. Questa regola non vale per alcuni tag, ma per una questione di ordine del documento è preferibile chiudere tutti i tag che apriamo. I tag possono avere degli attributi che danno delle informazioni aggiuntive per la formattazione delle pagine, anche se è preferibile usare i fogli di stile per indicare le caratteristiche dei tag. Nei prossimi articoli vedremo i fogli di stile css. Un documento HTML ha due parti fondamentali:
  • HEAD: è l'intestazione che viene racchiusa tra i tag <head> e </head> e che fornisce informazioni importanti al browser sul documento da visualizzare. Queste informazioni sono il titolo del documento, le parole chiavi per i motori di ricerca e i file esterni (file javascript e/o css) da includere nel documento. La parte dell'intestazione non verrà visualizzata dal browser.
  • BODY: è la parte descrittiva del documento o corpo del documento racchiuso tra i tag <body> e </body>. Il corpo contiene tutta quella parte che verrà visualizzata dal browser, contiene quindi il testo, le immagini, i link, le tabelle e molto altro ancora.
Approfondiremo ora il tag HEAD, in seguito parleremo anche del tag BODY. L'intestazione HEAD non ha attributi. Al suo interno troviamo i tag TITLE, META, BASE, SCRIPT, STYLE, LINK.
  1. <title> titolo <title>: descrive il titolo del documento che compare nella barra superiore della finestra del browser, per questo motivo è preferibile inserire un titolo piuttosto breve. Si ritiene poco professionale non inserire il titolo di una pagina web che resterebbe anonima, quindi meglio inserire una breve descrizione del documento.
  2. <meta>: il tag META non richiede il tag di chiusura, ma l'aggiunta di alcuni attributi. Con gli attributi possiamo specificare l'autore della pagina, la descrizione del documento, le parole chiave per i motori di ricerca, la lingua in cui sono scritti i contenuti del sito, i diritti di copyright. Un esempio del tag META è il seguente: <meta name="author" content="nome e cognome">. Gli attributi name che possiamo utilizzare sono oltre ad "author", "description", "keywords", "copiright", "date", "generator", "robots", "content-language". Da sottolineare che con l'attributo "robots" possiamo indicare al motore di ricerca le pagine da indicizzare. 
  3. <base href="...">: specifica la locazione iniziale per le URL relative contenute nel documento.
  4. <script>...</script>: il tag SCRIPT viene usato per inserire nel documento codice in linguaggio di scripting, in genere viene utilizzato per inserire codice Javascript (<script type="text/javascript"> codice javascript </script>).
  5. <style>...</style>: il tag STYLE viene utilizzato per inserire i fogli di stile (<style type="text/css"> css </style>).
  6. <link>: il tag LINK non richiede il tag di chiusura e viene utilizzato per includere file esterni contenenti fogli di stile o codice javascript. Un esempio del tag è il seguente <link href="fogliostile.css" rel="stylesheet" type="text/css">. Personalmente preferisco quest'ultima forma per includere i fogli di stile nel documento HTML. Avendo due documenti separati sarà più semplice in futuro dover modificare solo i fogli di stile senza dover toccare il documento HTML e viceversa. 

14 novembre 2013

HTML

HTML: programmazione? no grazie!
HTML ovvero HyperText Markup Language non è un linguaggio di programmazione ma è qualcosa di molto più semplice: un linguaggio di marcatura del testo. È una collezione di stili che permettono di definire le varie componenti di un documento ipertestuale. Un linguaggio di marcatura è costituito da un insieme di marcatori chiamati tag. In parole più semplici i tag non sono altro che delle istruzioni per descrivere la struttura, la composizione e l'impaginazione di un documento, e quindi permettono di definire l'interfaccia utente, i collegamenti ipertestuali tra i vari documenti e la formattazione del testo. L'HTML è derivato da SGML, uno standard ISO (International Standards Organization), un metalinguaggio che descrive linguaggi di formattazione di testi. Per creare un documento HTML sono necessari due strumenti: un editor di testi ASCII e un browser. Si possono anche utilizzare editor HTML visuali come  Macromedia Dreamweaver. Creato il documento verrà salvato con estensione .html o .htm.

9 novembre 2013

WWW: la più grande ragnatela del mondo!

World Wide Web o semplicemente Web è un'enorme rete di documenti collegati tra loro. Documenti contenenti testi, immagini, suoni, video, animazioni. È una trama infinita di siti web interconnessi che continua a crescere ogni giorno, ogni minuto, ogni istante. In questo preciso istante un'altra pagina è stata creata per aiutare a tessere questa ragnatela gigante.  
Il web utilizza un'architettura client-server. Ma vediamo cos'è un client e cos'è un server. 
  • Client: è il browser che apre la connessione con il Server per spedire o ricevere informazioni e poi chiude la connessione.
  • Server: è un programma continuamente in funzione che resta in attesa di richieste e che fornisce documenti ai browser.
Questa comunicazione tra browser e server web avviene tramite un protocollo chiamato HTTP (HyperText Transfer Protocol) utilizzato per il trasferimento di ipertesti. Un ipertesto non è altro che un insieme di pagine collegate tra loro tramite link. Queste pagine che il server web invia al browser sono in formato HTML (HyperText Markup Language), un linguaggio di marcatura del testo che vedremo più avanti.

3 novembre 2013

Info

Se sei alla ricerca di informazioni per creare un sito o un blog sei nel posto giusto. Con i prossimi articoli potrai capire i segreti che ci sono dietro il web con spiegazioni semplici anche per chi si affaccia a questo mondo per la prima volta.