• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html e Css - 1 | WebMaster & WebDesigner
 

Html e Css - 1 | WebMaster & WebDesigner

on

  • 412 views

Prima lezione modulo HTML e CSS del corso per WebMaster & WebDesigner 2013

Prima lezione modulo HTML e CSS del corso per WebMaster & WebDesigner 2013

Statistics

Views

Total Views
412
Views on SlideShare
324
Embed Views
88

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 88

http://cypher.informazione.me 88

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner Presentation Transcript

    • HTML e CSS [1]Synergia – Matteo Magni
    • whoami• Matteo Magni• Web Developer & System Administrator• http://www.linkedin.com/in/matteomagni• http://twitter.com/ilbonzo• http://www.slideshare.net/ilbonzo• matteo@magni.me
    • CorsoWeb Master & Web Designer • HTML e CSS • Dreamweaver • SEO e Web Marketing • Grafica per il Web • Web Usability • Javascript • HTML5 e Css3 • jQuery • Joomla • [Progetto]
    • Google Course Builderhttp://code.google.com/p/course-builder/E un progetto per avere una piattaforma die-learning sviluppato da Google al fine diintegrare i vari strumenti di Big G, comevideo, docs, groups, ecc...
    • Il nostro Course Builderhttp://cypher.informazione.me/ http://code.google.com/r/admin-cypher/
    • Githubhttps://github.com/inFormazione/Cypher/
    • 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 allinterno del CERN nel 1991. (Wikipedia)
    • W3C :Nellottobre del 1994 Tim Berners Lee, padre del Web, fondò al MIT(Massachusetts Institute of Technology), in collaborazione con il CERN (il laboratorio dalquale proveniva), unassociazione di nome World Wide Web Consortium (abbreviatoW3C), con lo scopo di migliorare gli esistenti protocolli e linguaggi per il World Wide Webe 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 laccesso 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.
    • HTTP • LHyperText Transfer Protocol (HTTP) (protocollo di trasferimento di un ipertesto) è usato come principale sistema per la trasmissione dinformazioni 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)
    • Client - Server • Il client effettua una Request al server che a sua volta risponderà con una Response. • Il tutto in modo Stateless
    • HTML• LHyperText 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 dellutente 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)
    • Browser • Il browser è un software che ha la capacità di interpretare lHTML e di visualizzarlo in forma di ipertesto.
    • “Lapparenza inganna”
    • HTML - Browser
    • Markup language LHTML 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, lHTML supporta linserimento di script e oggetti esterni quali immagini o filmati. (wikipedia)
    • SGML -Semantica degli elementiLo Standard Generalized Markup Lo scopo è quello di marcare gliLanguage (SGML). elementi di un documento webLa principale funzione di SGML è la secondo le sue caratteristiche distesura di testi chiamati Document contenuto. Seguendo questoType Definition, in acronimo DTD, approccio avremo una marcaturaciascuno dei quali definisce in modo semantica, viceversa avremo unarigoroso la struttura logica che marcatura difficile da comprendere edevono avere i documenti di un incoerente.determinato tipo; si dice che questidocumenti rispetto a SGMLcostituiscono un linguaggio obiettivo,ovvero una applicazione.
    • DTD http://www.diodati.org/w3c/html401/intro/sgmltut.htmlIl Document Type Definition (definizione del tipodi documento) è uno strumento utilizzato daiprogrammatori il cui scopo è quello di definire lecomponenti ammesse nella costruzione di undocumento XML.
    • Cosa fa il DTD• Definisce gli elementi leciti allinterno 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, lordine, 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.
    • Tecnologie Client Side • HTML → contenuto • Css →visualizzazione • Javascript → interazione
    • HTML 4HTML 4.01 SpecificationW3C Recommendation 24 December 1999http://www.w3.org/TR/html4/In italianohttp://www.diodati.org/w3c/html401/cover.html
    • Tag HTMLApertura e chiusura Indentazione<tag>contenuto</tag> 1) <tag1>             <tag2>contenuto</tag2>   Tag senza “contenuto”   <tag3/><tag/> </tag1>Annidamento 2) <tag1><tag2>contenuto</tag2> <tag3/></tag1><tag1>  <tag2>Contenuto</tag2> Loutput è uguale ma il primo è molto più leggibile per il  <tag3/> programmatore</tag1>
    • Commenti • I commenti sono porzioni di codice che il browser ignora e non fa vedere allutente. Tale codice<!­­ Io sono un commento  risulta invece molto utileHTML per il programmatore al­­> fine di spiegare le porzioni di codice.
    • AttributiGli attributi vengono usati per aggiungere una caratteristica o unaproprietà ad un elemento.Un attributo è una coppia nome-valore che può essere presenteallinterno del tag di apertura di un elemento, dopo il nome dellelementostesso. <img src=”pippo.png”/> <a href=”http://google.com”> Google </a>
    • 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>
    • Elementi documento HTML• Lelemento HTML – http://www.diodati.org/w3c/html401/struct/global.html#h-7.3• Lelemento HEAD – http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.1• Lelemento TITLE – http://www.diodati.org/w3c/html401/struct/global.html#h-7.4.2• Lelemento BODY – http://www.diodati.org/w3c/html401/struct/global.html#h-7.5.1
    • EditorIl Webmaster duro usa Blocco note, ma ilwebmaster saggio cosa usa?
    • Editor (2)Con syntax highlighting si intende la caratteristica di un software, solitamente editor ditesto, di visualizzare un testo con differenti colori e font in base a particolari regolesintattiche. Questa caratteristica, utilizzata soprattutto per il codice sorgente, facilità lascrittura in un linguaggio strutturato come un linguaggio di programmazione o unlinguaggio di markup che dispone di una sintassi e di una grammatica precise.
    • Editor - WYSIWYG What You See Is What You Get
    • 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>
    • Entità HTML http://it.wikibooks.org/wiki/HTML/Entit%C3%A0• 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;
    • Titolihttp://www.diodati.org/w3c/html401/struct/global.html#h-7.5.5 • <h1> il tag h1 è differente dal tag <title> • <h2> • .... • </h6>
    • Elementi di Testo http://www.diodati.org/w3c/html401/struct/text.html– EM: Denota enfasi.– STRONG: Denota unenfasi più forte– CITE: Contiene una citazione o un riferimento ad altre fonti.– DFN: Indica che questa è listanza 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 dallutente.– VAR: Denota unistanza di una variabile o di un argomento di programma.– ABBR: Denota unabbreviazione (es., WWW, HTTP, URI, Mass., ecc.).– ACRONYM: Denota un acronimo (es., WAC, radar, ecc.).
    • Citazioni http://www.diodati.org/w3c/html401/struct/text.html#h-9.2.2BLOCKQUOTE• 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 dellelemento Q sia riprodotto racchiuso tra virgolette. Gli autori non dovrebbero mettere le virgolette allinizio e alla fine del contenuto dellelemento Q.
    • Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me