slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Gli standard web W3C standard HTML CSS PowerPoint Presentation
Download Presentation
Gli standard web W3C standard HTML CSS

Loading in 2 Seconds...

play fullscreen
1 / 23

Gli standard web W3C standard HTML CSS - PowerPoint PPT Presentation


  • 112 Views
  • Uploaded on

Gli standard web W3C standard HTML CSS. “ …a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.” Wikipedia. Che cosa sono gli standard web?. Quali sono le tecnologie per un design conforme agli standard?

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Gli standard web W3C standard HTML CSS' - maggie-brown


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide3

“…a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.”

Wikipedia

Che cosa sono gli standard web?

slide4

Qualisono le tecnologie per un design conformeagli standard?

  • HTML/XHTML for semantic markup of content
  • Cascading Stylesheets (CSS) for the presentation of content
  • JavaScript for functionality related to content

Tecnologie e standard web

standard consigliati
Standard consigliati

Risoluzione minima schermo : 1024 x 768

Formato immagini : Jpeg , png, gif

CSS + xhtml

PHP + css + xhtml

Controllare la validazione

Dimensioni della home page ( qualche kb almassimo)

Testi 12px di altezza

Colori fra i 256 della tavolozza web

linguaggio a marcatori html
Linguaggio a marcatori HTML

Il termine markup (o marcatura) deriva dall'ambiente tipografico dove si usava marcare con annotazioni le parti del testo che andavano evidenziate o corrette, allo scopo di segnalarle al compositore o al dattilografo.

slide7

La tecnica di composizione di un testo con l'uso di marcatori (o espressioni codificate) richiede una serie di convenzioni, ovvero di un linguaggio a marcatori di documenti. In generale un linguaggio di markup descrive i meccanismi di rappresentazione (strutturali, semantici o presentazionali) del testo che, utilizzando convenzioni standardizzate, sono utilizzabili su più supporti.

Francesca Barresi Corso HTML

slide8

Il linguaggio a marcatori che vedremo a lezione è L'XHTML (sigla di eXtensibleHyperText Markup Language, Linguaggio di marcatura di ipertesti estensibile) è un linguaggio di marcatura che associa alcune proprietà dell'XML con le caratteristiche dell'HTML: un file XHTML è un pagina HTML scritta in conformità con lo standard XML.

slide9

Il linguaggio prevede un uso più restrittivo dei tag HTML sia in termini di validità che in termini di sintassi per descrivere solo la struttura logica della pagina, mentre il layout e la resa grafica sono imposti dai fogli di stile a cascata (Cascading Style Sheets, CSS).

  • L'XHTML è nato ufficialmente il 26 gennaio 2000 come standard del World Wide Web Consortium (W3C), e può essere definito tecnicamente una riformulazione dell'HTML 4.01 in XML 1.0; è una sorta di "ponte" tra questi due linguaggi.
slide10

chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. Comunque le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica.

building markup documents
Building markup Documents
  • Struttura con START TAG – CONTENT – END TAG:

<h1> Introduction to HTML</h1>

  • Elementiche non hanno content, come l’andare a capo, sidenotano con un la chiusuraimmediata ad esempio <br />
  • Importanzadegliattributi

<imgsrc=“picture.jpg” alt= “This is my picture” />

  • Percommentareilpropriocodice

<!-- This is a comment -->

Content

Start Tag

End Tag

slide12

L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web.

Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come disporre il testo, e altre cose di questo genere.

12

slide13

Alcuni termini

CACHE: cartella in cui vengono memorizzati i files scaricati dal web .

Internet Explorer visualizza così il percorso della cache

Strumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file

rendering della pagina: visualizzazione di un file html da parte del browser.

Motore di rendering: sezione del browser che si occupa di mostrare sul video la pagina.

HTML:acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti")

W3C: (World Wide Web Consortium (http://www.w3.org/)) organismo che si occupa di standardizzare la sintassi del linguaggio HTML

13

slide14

Estensioni file

Fino a qualche tempo fa si era soliti attribuire ai file l'estensione htm, ma questo avveniva perché il dos e poi Windows 3.1 non erano in grado di gestire i file con nomi di grandezza superiore a 8 caratteri ed estensione superiore alle 3 lettere. Dunque .html era diventato .htm, così come .jpeg era diventato .jpg.

Se avete dato alla pagina l'estensione .html o .htm, il browser dovrebbe essere in grado di aprire il file in automatico cliccandoci su due volte. Per modificare la pagina utilizzate i comandi Visualizza > HTML, cambiate il codice, salvate, utilizzate il pulsante "aggiorna" del browser e dovreste visualizzare le modifiche.

14

slide15

I TAG

  • Hanno il compito di visualizzare le diverse parti di una pagina web.
  • Hanno differenti nomi a seconda della loro funzione.

I tag vanno inseriti tra parentesi uncinate (<TAG>)

la chiusura del tag viene indicata con una "/" (Quindi: </TAG>).

Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:

<TAG attributi> testo </TAG>

la struttura di un attributo è: attributo="valore"

Quindi in definita la struttura di un tag sarà:

<TAG attributo1="valore1" attributo2="valore2"> testo </TAG>

Maria A.R.Consoli

Corso HTML

15

slide16

TAG PARTICOLARI

Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura.

La loro forma sarà dunque:

<TAG attributi>

Ecco un esempio di immagine:

<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">

come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".

Maria A.R.Consoli

Corso HTML

16

slide17

Annidamento e Identazione

L'annidamento ci permette di attribuire formattazioni successive al testo che stiamo inserendo.

esempio:

<TAG1 attributi> contenuto 1  <TAG2>   contenuto 2  </TAG2></TAG1>

Apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab:

Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile

esempio:

<P align="right">  testo 1   <P align="left">      testo 2   </P></P>

Maria A.R. Consoli

Corso HTML

17

slide18

I COMMENTI

indicazioni significative per il webmaster, ma invisibili al browser.

Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi.

Sintassi

<!-- questo è un commento -->

esempio:

<!-- menu di sinistra -->

<!-- barra in alto -->

<!-- eccetera -->

Maria A.R. Consoli

Corso HTML

18

slide19

STRUTTURA DI UNA PAGINA

Una apagina HTML è suddivisa in tre sezioni:

Specifiche

Inizio codice

Testata

Fine testata

Corpo

Fine corpo

Fine codice

esempio:

SPECIFICHE

<html> <!– Inizio codice --> <head> <!-- testata -->

Qui il nostro contenuto 

</head> <!– Fine testata-->

<body> <!-- Corpo --> Qui il nostro contenuto </body> <!– Fine corpo --> </html><!– Fine codice -->

Maria A.R. Consoli

Corso HTML

19

slide20

SPECIFICA !DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">

specifica il tipo di documento. E’ la prima riga da inserire.

HTML: il tipo di linguaggio utilizzato è l'HTML

PUBLIC: il documento è pubblico

W3C: il documento fa riferimento alle specifiche rilasciate dal W3C

DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento");

la versione di HTML supportata è la 4.01 "transitional"

IT: la lingua con cui è scritta la DTD è l‘italiano (EN: la lingua con cui è scritta la DTD è l'inglese)

20

slide21

HEAD

  • Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere
  • i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca),
  • script JavaScript o VbScript,
  • fogli di stile

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

<title>Nome del sito</title>

Il title è il titolo della pagina e compare in alto sulla barra del browser.

<base href=“indirizzo url ">

Il percorso assoluto a cui fare riferimento per trovare tutti i files a cui si fa riferimento.

<meta name="keywords" content=“parole da inserire nei motori di ricerca">

indica alcuni contenuti relativi al sito stesso. Le keywords compaiono separate da virgola, da punto e virgola, oppure senza alcun segno di interpunzione.

21

slide22

HEAD

ESEMPIO:

<head>   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>ISTITUTO TECNICO COMMERCIALE DE FELICE CATANIA</title><base href="http://www.itcdefelice.it/miaCartella">

<meta name="keywords" content=“scuola, istituto, tecnico, superiore,

commerciale, de felice, catania">

</head>

22

slide23

BODY

Qui è racchiuso il contenuto vero e proprio del documento

Il contenuto della pagina verrà formattato a seconda dei tag utilizzati:

Titoli

Sottotitoli

Link

Testi

Immagini

Blocchi contenitore

Tabelle

Elenchi

23