Transcript
Page 1: Html e Css - 1 | WebMaster & WebDesigner

HTML e CSS [1]Synergia – Matteo Magni

Page 2: Html e Css - 1 | WebMaster & WebDesigner

whoami

• Matteo Magni

• Web Developer & System Administrator

• http://www.linkedin.com/in/matteomagni

• http://twitter.com/ilbonzo

• http://www.slideshare.net/ilbonzo

[email protected]

Page 3: Html e Css - 1 | WebMaster & WebDesigner

Corso Web Master & Web Designer

• HTML e CSS

• Dreamweaver

• SEO e Web Marketing

• Grafica per il Web

• Web Usability

• Javascript

• HTML5 e Css3

• jQuery

• Joomla

• [Progetto]

Page 4: Html e Css - 1 | WebMaster & WebDesigner

Google Course Builder

http://code.google.com/p/course-builder/

E' un progetto per avere una piattaforma di e-learning sviluppato da Google al fine di integrare i vari strumenti di Big G, come video, docs, groups, ecc...

Page 5: Html e Css - 1 | WebMaster & WebDesigner

http://cypher.informazione.me/

http://code.google.com/r/admin-cypher/

Il nostro Course Builder

Page 6: Html e Css - 1 | WebMaster & WebDesigner

Github

https://github.com/inFormazione/Cypher/

Page 7: Html e Css - 1 | WebMaster & WebDesigner

Nascita del World Wide Web

Tim Berners-Lee e Robert Cailliau nel 1990 misero a punto il protocollo HTTP e una prima specifica del linguaggio HTML, sulla base dei quali sono stati realizzati un primo programma browser/editor ipertestuale per il WWW, utilizzato all'interno del CERN nel 1991. (Wikipedia)

Page 8: Html e Css - 1 | WebMaster & WebDesigner

W3C :Nell'ottobre del 1994 Tim Berners Lee, padre del Web, fondò al MIT (Massachusetts Institute of Technology), in collaborazione con il CERN (il laboratorio dal quale proveniva), un'associazione di nome World Wide Web Consortium (abbreviato W3C), con lo scopo di migliorare gli esistenti protocolli e linguaggi per il World Wide Web e di aiutare il web a sviluppare tutte le sue potenzialità.

• Il web ormai non è più uno strumento per «appassionati», ma è diventato parte integrante della vita comune delle persone. Attualmente esistono diversi tipi di apparecchi (come cellulari e PDA) che accedono ad internet. Ciò è possibile solo grazie ad un «comune linguaggio di comunicazione» (nello specifico, il protocollo di comunicazione e linguaggio in cui è scritto il file) tra server, PC ed altri dispositivi. Il W3C si occupa di aggiornare e creare queste specifiche.

• Il Web ha un potenziale praticamente illimitato, ed apre nuove strade ai portatori di handicap, anche gravi. Il W3C cerca di studiare i modi per rendere quanto più agevole l'accesso al web da parte di questa categoria di persone.

• Il web è unico perché è libero. Chiunque può creare un documento html e metterlo liberamente online. Il W3C cerca di evitare che interessi di qualsiasi genere possano porre un freno a questa assoluta libertà ed è anche un sito per aiutare a sviluppare le potenzialità comunicative degli esseri umani.

Page 9: Html e Css - 1 | WebMaster & WebDesigner

HTTP

• L'HyperText Transfer Protocol (HTTP) (protocollo di trasferimento di un ipertesto) è usato come principale sistema per la trasmissione d'informazioni sul web. Le specifiche del protocollo sono gestite dal World Wide Web Consortium (W3C). Un Server HTTP generalmente resta in ascolto sulla porta 80 usando il protocollo TCP. (Wikipedia)

Page 10: Html e Css - 1 | WebMaster & WebDesigner

Client - Server

• Il client effettua una Request al server che a sua volta risponderà con una Response.

• Il tutto in modo Stateless

Page 11: Html e Css - 1 | WebMaster & WebDesigner

HTML

• L'HyperText Markup Language (HTML) (traduzione letterale: linguaggio di descrizione per ipertesti) è il linguaggio solitamente usato per i documenti ipertestuali disponibili nel World Wide Web. In tali documenti, un tratto di testo può essere contrassegnato inserendo delle etichette, tag, che ne descrivono la funzione, il colore, il link, o altre caratteristiche. Il contenuto servito dai siti web in seguito a una richiesta dell'utente solitamente consiste di un documento HTML: un web browser scarica da uno o più web server il contenuto HTML ed eventuali documenti collegati e li elabora, ossia ne interpreta il codice, al fine di generare la visualizzazione della pagina desiderata sullo schermo del computer. (wikipedia)

Page 12: Html e Css - 1 | WebMaster & WebDesigner

Browser

• Il browser è un software che ha la capacità di interpretare l'HTML e di visualizzarlo in forma di ipertesto.

Page 13: Html e Css - 1 | WebMaster & WebDesigner

“L'apparenza inganna”

Page 14: Html e Css - 1 | WebMaster & WebDesigner

HTML - Browser

Page 15: Html e Css - 1 | WebMaster & WebDesigner

Markup language

L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive le modalità di impaginazione, formattazione o visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web. Tuttavia, l'HTML supporta l'inserimento di script e oggetti esterni quali immagini o filmati. (wikipedia)

Page 16: Html e Css - 1 | WebMaster & WebDesigner

SGML -Semantica degli elementi

Lo Standard Generalized Markup Language (SGML).

La principale funzione di SGML è la stesura di testi chiamati Document Type Definition, in acronimo DTD, ciascuno dei quali definisce in modo rigoroso la struttura logica che devono avere i documenti di un determinato tipo; si dice che questi documenti rispetto a SGML costituiscono un linguaggio obiettivo, ovvero una applicazione.

Lo scopo è quello di marcare gli elementi di un documento web secondo le sue caratteristiche di contenuto. Seguendo questo approccio avremo una marcatura semantica, viceversa avremo una marcatura difficile da comprendere e incoerente.

Page 17: Html e Css - 1 | WebMaster & WebDesigner

DTD

Il Document Type Definition (definizione del tipo di documento) è uno strumento utilizzato dai programmatori il cui scopo è quello di definire le componenti ammesse nella costruzione di un documento XML.

http://www.diodati.org/w3c/html401/intro/sgmltut.html

Page 18: Html e Css - 1 | WebMaster & WebDesigner

Cosa fa il DTD

• Definisce gli elementi leciti all'interno del documento. Non si possono usare altri elementi se non quelli definiti. Una specie di "vocabolario" per i file che lo useranno.

• Definisce la struttura di ogni elemento. La struttura indica cosa può contenere ciascun elemento, l'ordine, la quantità di elementi che possono comparire e se sono opzionali o obbligatori. Una specie di "grammatica".

• Dichiara una serie di attributi per ogni elemento e che valori possono o devono assumere questi attributi.

• Fornisce infine alcuni meccanismi per semplificare la gestione del documento, come la possibilità di dichiarare entity e la possibilità di importare parti di altri DTD.

Page 19: Html e Css - 1 | WebMaster & WebDesigner

Tecnologie Client Side

• HTML → contenuto

• Css →visualizzazione

• Javascript → interazione

Page 20: Html e Css - 1 | WebMaster & WebDesigner

HTML 4

HTML 4.01 Specification

W3C Recommendation 24 December 1999

http://www.w3.org/TR/html4/

In italianohttp://www.diodati.org/w3c/html401/cover.html

Page 21: Html e Css - 1 | WebMaster & WebDesigner

Tag HTML

Apertura e chiusura

<tag>contenuto</tag>

Tag senza “contenuto”

<tag/>

Annidamento

<tag1>

  <tag2>Contenuto</tag2>

  <tag3/>

</tag1>

Indentazione1) <tag1>          

  <tag2>contenuto</tag2>   

  <tag3/>

</tag1>

2) <tag1><tag2>contenuto</tag2><tag3/></tag1>

L'output è uguale ma il primo è molto più leggibile per il programmatore

Page 22: Html e Css - 1 | WebMaster & WebDesigner

Commenti

• I commenti sono porzioni di codice che il browser ignora e non fa vedere all'utente. Tale codice risulta invece molto utile per il programmatore al fine di spiegare le porzioni di codice.

<!­­ Io sono un commento HTML­­>

Page 23: Html e Css - 1 | WebMaster & WebDesigner

Attributi

Gli attributi vengono usati per aggiungere una caratteristica o una proprietà ad un elemento. Un attributo è una coppia nome-valore che può essere presente all'interno del tag di apertura di un elemento, dopo il nome dell'elemento stesso.

<img src=”pippo.png”/>

<a href=”http://google.com”>

Google

</a>

Page 24: Html e Css - 1 | WebMaster & WebDesigner

Struttura di un documento HTML

<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

   <HEAD>

      <TITLE>Il mio primo documento HTML</TITLE>

   </HEAD>

   <BODY>

      <P>Ciao mondo!</P>

   </BODY>

</HTML>

Page 25: Html e Css - 1 | WebMaster & WebDesigner

Elementi documento HTML

• L'elemento HTML

– http://www.diodati.org/w3c/html401/struct/global.html#h-7.3

• L'elemento HEAD

– http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.1

• L'elemento TITLE

– http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.2

• L'elemento BODY

– http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.1

Page 26: Html e Css - 1 | WebMaster & WebDesigner

Editor

Il Webmaster duro usa Blocco note, ma il webmaster saggio cosa usa?

Page 27: Html e Css - 1 | WebMaster & WebDesigner

Editor (2)

Con syntax highlighting si intende la caratteristica di un software, solitamente editor di testo, di visualizzare un testo con differenti colori e font in base a particolari regole sintattiche. Questa caratteristica, utilizzata soprattutto per il codice sorgente, facilità la scrittura in un linguaggio strutturato come un linguaggio di programmazione o un linguaggio di markup che dispone di una sintassi e di una grammatica precise.

Page 28: Html e Css - 1 | WebMaster & WebDesigner

Editor - WYSIWYGWhat You See Is What You Get

Page 29: Html e Css - 1 | WebMaster & WebDesigner

Righe e Paragrafi

• <p>

• <br/>

• <pre>

<pre>

       Higher still and higher

         From the earth thou springest

       Like a cloud of fire;

         The blue deep thou wingest,

And singing still dost soar, and soaring ever singest.

</pre>

Page 30: Html e Css - 1 | WebMaster & WebDesigner

Entità HTML

• Le entità sono dei particolari codici che servono per rappresentare caratteri speciali, i quali potrebbero avere problemi di visualizzazioni su computer e sistemi operativi differenti. Il codice per inserire una entità nella pagina è: &entità.

< &lt;

>   &gt;

Ci permette di fare:

<pre>   &lt;pre&gt; →

<br/>   &lt;br/&gt;→

http://it.wikibooks.org/wiki/HTML/Entit%C3%A0

Page 31: Html e Css - 1 | WebMaster & WebDesigner

Titoli

• <h1> il tag h1 è differente dal tag <title>

• <h2>

• ....

• </h6>

http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.5

Page 32: Html e Css - 1 | WebMaster & WebDesigner

Elementi di Testo

– EM: Denota enfasi.

– STRONG: Denota un'enfasi più forte

– CITE: Contiene una citazione o un riferimento ad altre fonti.

– DFN: Indica che questa è l'istanza di definizione del termine racchiuso.

– CODE: Designa un frammento di codice informatico.

– SAMP: Designa un campione prodotto da programmi, script, ecc.

– KBD: Denota del testo che deve essere immesso dall'utente.

– VAR: Denota un'istanza di una variabile o di un argomento di programma.

– ABBR: Denota un'abbreviazione (es., WWW, HTTP, URI, Mass., ecc.).

– ACRONYM: Denota un acronimo (es., WAC, radar, ecc.).

http://www.diodati.org/w3c/html401/struct/text.html

Page 33: Html e Css - 1 | WebMaster & WebDesigner

Citazioni

BLOCKQUOTE

• I programmi utente di tipo visuale generalmente riproducono BLOCKQUOTE come un blocco rientrato.

Q

• I programmi utente di tipo visuale devono garantire che il contenuto dell'elemento Q sia riprodotto racchiuso tra virgolette. Gli autori non dovrebbero mettere le virgolette all'inizio e alla fine del contenuto dell'elemento Q.

http://www.diodati.org/w3c/html401/struct/text.html#h-9.2.2

Page 34: Html e Css - 1 | WebMaster & WebDesigner

Domande?

Slide:

http://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

[email protected]


Top Related