martedì 26 marzo 2013

Guida CSS di base

Nella lezione del 15 marzo abbiamo parlato dei fogli di stile, chiamati anche CSS.

COME è FATTO UN CSS: REGOLE E COMMENTI

http://www.html.it/pag/14215/come-fatto-un-css-regole-e-commenti/

Un foglio di stile è un insieme di regole accompagnate da qualche commento.

Struttura di una regola

Questa è una regola e come possiamo vedere dall'immagine sopra, è composta da due parti : un selettore e un blocco della dichiarazione.
Il selettore serve a definire la parte del documento cui verrà applicata la regola, mentre il blocco della dichiarazione è delimitato rispetto al selettore e alle altre regole da due parentesi graffe.
All'interno del blocco ci possono essere più dichiarazioni, e tutte sono formate da una proprietà e un valore, che devono sempre essere separati da due punti.
La proprietà definisce un aspetto dell’elemento da modificare secondo il valore espresso.
Per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.

ID E CLASSI: I DUE SELETTORI

http://www.html.it/pag/14217/id-e-classi-due-selettori-speciali/

 In HTML esistono due attributi fondamentali che possono essere applicati a tutti gli elementi: sono class e id. Dichiarare questi attributi indipendentemente dai CSS non ha senso e non modifica in  nessun modo la presentazione della pagina.
Il valore dell’attributo class deve trovare una corrispondenza in un foglio di stile.
Come nell'esempio che viene riportato nella guida, di cui vi ho lasciato qui sopra il link, se  si assegna al paragrafo un attributo class="testorosso" senza però creare un foglio di stile, il valore dell'attributo class non troverà nessuna corrisponda con un CSS e di conseguenza non cambierà nulla.
Ma definendo un CSS incorporato creando un selettore di tipo classe e assegnando ad esso il nome testorosso il testo del nostro paragrafo sarà formattato secondo le nostre indicazioni.
La stessa cosa vale per i selettori di tipo ID, ma con la differenza che se assegno ad un paragrafo l’id “testorosso”, non potrò più usare questo valore nel resto della pagina.
Al contrario di una singola classe che può essere utilizzata per più elementi.
Per definire una classe si usa far precedere il nome da un semplice punto : .nome_della_classe .
La sintassi di un ID è molto semplice, il nome viene preceduto da un cancelletto(#) : #nome_id

INSERIRE I FOGLI DI STILE IN UN DOCUMENTO

http://www.html.it/pag/14211/inserire-i-fogli-di-stile-in-un-documento/

Ci sono due tipi di foglio di stile: uno esterno ed uno interno.
Un foglio di stile è esterno quando è definito in un file separato dal documento, si tratta di semplici documenti di testo ai quali si assegna 'estensione .css .
Un foglio di stile è interno invece quando il suo codice è compreso in quello del documento.
A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.

Noi ci occuperemo principalmente dei fogli di stile collegati.
Per caricare un foglio esterno in un documento esistono due possibilità.
La prima è quella che fa uso dell’elemento <LINK>, quello che noi useremo.
La dichiarazione va sempre collocata all’interno della sezione <HEAD> del documento HTML.

<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>

Come possiamo vedere dall'esempio l'elemento <link> presenta vari attributi:
  • rel = descrive il tipo di relazione tra il documento e il file collegato. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
  • type = identifica il tipo di dati da collegare. Per i CSS l’unico valore possibile è text/css.
  • href = serve a definire l’URL assoluto o relativo del foglio di stile.
L'altro modo per caricare CSS esterni è usare la direttiva @import all’interno dell’elemento <style>.


sabato 16 marzo 2013

Lezione 17: Titoli, paragrafi e blocchi di testo.



Uno degli argomenti che abbiamo affrontato durante la lezione del 15 Marzo 2013 è stato: “Titoli, paragrafi, blocchi di testo e contenitori” (Lezione 17 dal sito html.it).
Per rendere la pagina più semplice da leggere e modificare, e per ottenere una migliore formattazione esistono alcuni tag-contenitori che ci permettono di racchiudere il testo.
I principali tag che identificano dei blocchi sono:
<p> usato all’inizio della prima frase del paragrafo che si vuole creare.
</p> viene usato dopo l’ultima frase per marcare la fine del paragrafo.
Esempio: <p>paragrafo 1</p>

<div> a differenza del paragrafo non lascia spazi prima e dopo la sua apertura; per chiuderlo si utilizza </div> .
Esempio: <div>blocco di testo 1</div>

All’interno dei blocchi di testo viene utilizzato <span> se non si vuole andare a capo dopo un punto, chiudendo sempre con </span> . Se invece si vuole andare a capo viene utilizzato <br> che non bisogna chiudere.
Esempio: <span>contenitore 1</span><span>contenitore 2</span>

Per quanto riguarda il titolo viene usato il tag <h1> che lascia una riga vuota prima e dopo di sé. Eventuali sottotitoli sono espressi da <h2> (fino a 6) diventano progressivamente piccoli di carattere, ma sempre in grassetto.
Il titolo viene chiuso con </h1> o relativo numero.
Esempio: <h1>titolo 1 </h1>
<h2>titolo 2 </h2>
<h3>titolo 3 </h3>
<h4>titolo 4 </h4>
<h5>titolo 5 </h5>
<h6>titolo 6 </h6>

venerdì 15 marzo 2013

Introduzione alla programmazione: HTML e CSS

Hola!

per programmare i nostri siti web useremo due linguaggi:

  • HTML 
  • CSS

L' HTML (
Hyper Text Markup Language) è un linguaggio di markup, ovvero un linguaggio che consente di descrivere il contenuto della pagina web che si vuole creare tramite dei marcatori detti "tag". Questo linguaggio deve essere interpretato, da chi? Dai browser,come Internet Explorer, Mozilla, ecc... che sono in grado di leggere ed eseguire le istruzioni contenute in una pagina web.

Il CSS Cascading Style Sheets, in italiano: fogli di stile) è un linguaggio per la definizione del layout dei documenti HTML,e quindi per la loro presentazione.  L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare.

Una cosa fondamentale è che questi due linguaggi funzionano insieme, pertanto ricordatevi di salvarli nella stessa cartella e senza usare spazi ne maiuscole!!!

Per programmare in HTML ci sono diversi programmi, noi useremo l'editor testuale CoffeeCup

( ecco il link per scaricarlo: http://www.coffeecup.com/free-editor/  )
Chi ha già altri programmi,come Dreamweaver, è liberissimo di usarli.

Guida HTML: http://www.html.it/guide/guida-html/


Creare una nuova pagina HTML in CoffeeCup:

Per creare una nuova pagina andate su File e cliccate su New blank page/New HTML page
vi apparirà la struttura base dell' HTML, che come potete notare è composta da due blocchi principali: 

<head> nel quale vanno inserite le informazioni principali sulla pagina, utili per i motori di ricerca

<body> il contenuto


Noi, per ora, ci occuperemo principalmente del body. 

Salvare la pagina HTML in CoffeeCup:

Per salvare andate su File e cliccate Save/Save as 
rinominate la vostra pagina come volete, ma NON usate maiuscole, spazi ecc!!! E aggiungete l'estensione ".html"
esempio:  miapagina.html

Fondamentale è salvare le pagine HTML e i fogli di stile nella stessa cartella!

Visualizzare la pagina HTML:

Andate nella cartella dove avete salvato il file e cliccateci sopra, vi si dovrebbe aprire una pagina del  browser dove potrete visualizzare il vostro lavoro e vedere così se avete inserito bene tutti i codici.

I TAG:

Per programmare ci serviremo di una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione.
I tag vanno scritti dentro le parentesi angolari "< >", il testo o contenuto va inserito tra il tag d'apertura "<tag>" e quello di chiusura, nel quale si aggiunge lo slash "/" : </tag> .
Il risultato complessivo sarà una cosa di questo tipo:
<tag> testo </tag>

Ecco il link alla guida: Lezione 5: i TAG dell'HTML 


Buona programmazione a tutti! :)





Foglio di stile di base

html, body {margin: 0; padding: 0 }
#container {width: 960px; margin: 0 auto}
#header {background-color: red; }
#navigation { background-color: blue; color:white; font:16px "courier New"; }
#content { background-color: green;}
#footer {background-color: black; }