#HTML & MArkup Languages. good web design VS bad web design

Transcript

1 #HTML & MArkup Languages good web design VS bad web design

2 #standard web a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods. from Wikipedia

3 #html development good web design VS bad web design

4 #standard web Quali sono le tecnologie per un design conforme agli standard? HTML/XHTML for semantic markup of content Cascading Stylesheets (CSS) for the presentation of content JavaScript for functionality related to content

5 #linguaggio MARKUP 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.

6

7 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. good web design VS bad web design

8 #html Il linguaggio a marcatori che vedremo a lezione è L'HTML (sigla di extensible HyperText 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.

9

10 #start tag / end tag Start Tag Content End Tag <h1> Introduction to HTML</h1>

11 #body Qui è racchiuso il contenuto vero e proprio del documento Il contenuto della pagina verrà strutturato a seconda dei tag utilizzati. I tagi piu importanti per il SEO sono: Titolo di pagina - <title> meta description Titoli - <H1> Sottotitoli - <H2> Link - <a> Testi - <p> Immagini - <img>

12 #meta-tag <title> : titolo di pagina Sintassi: <title> titolo di pagina max 60 caratteri</title> Inserisce un titolo della pagina web, che compare nella parte alta della finestra del browser. E un meta-tag, poiche compare nella parte dell head di pagina e non è un tag di contenuto. Molto importante per l indicizzazione delle pagine sui motori di ricerca.

13 #meta-tag <meta name "description"> Sintassi: <meta description> descrizione max 160 caratteri </title> Inserisce una descrizione sommaria della pagina web Molto importante per l indicizzazione delle pagine sui motori di ricerca.

14 #tag <h1> e <h2> : titoli di paragrafo Sintassi: <h1> titolo (max 60 caratteri) </h1> <h2> sottoitolo (max 120 caratteri) </h2> Inserisce un titolo. Semanticamente il tag H1 è il più rilevante per il posizionamento online, in accoppiata con il tag H2, generalmente chiamato sottotitolo.

15 #tag <p> : paragrafi Sintassi: <p> paragrafo di testo (fra i 500 e i 1400 caratteri. lunghezza consigliata 600 char</p> Inserisce un paragrafo di testo continuo e terminando il paragrafo stesso con una spaziatura finale di fine pargrafo <p> 1 <p> 2

16 Cosi come un libro si costituisce di un solo titolo principale, di alcuni sottotitoli, di sottoparagrafi e di paragrafi, cosi anche la nostra pagina web dovra essere strutturata con un solo titolo per contenuto (H1), un solo sottotitolo (H2) e più paragrafi (p). good web design VS bad web design

17 Riassumendo <title> titolo di pagina - 6o caratteri <meta name "description"> - descrittore pagina caratteri <h1> titolo (max 60 caratteri) </h1> <h2> sottoitolo (max 120 caratteri) </h2> <p> paragrafo ( caratteri) </p>

18

19 Esempio corretto Keyword principale n <title> Produzione di manomentri per macchine da caffè. Leader mondiali dal n <meta description> La società Orman srl è presente sul mercato da oltre 30 anni. Leader incontrastato nella produzione di manometri e termometri per macchine da caffè. Orman mail info@orman.it Sede amm.va piazza Rossi, 2 Bergamo. n <h1>orman, produzione manometri e termometri n <h2> Termometri e manometri per macchine da caffè Keywords invertite, google long tail search

20 esempio 2 Title H1 H2 Negozio scarpe sortive a milano Negozio scarpe sportive Negozio scarpe sportive a milano. Mionegozio.it : vendita scarpe Salomon a milano p Sei alla ricerca di scarpe sportive Salomon? Il nostro negozio è il meglio per gli sportivi a Milano, che non si accontentano delle normali calzature, ma vogliono il meglio. Stai cercando un punto vendita di scarpe e attrezzature sportive a Milano che sia affidabile? Mionegozio. it è il posto che stavi cercando. Vieni a trovarci e visita il nostro store, con una vastissima scelta di scarponi da trekking e calzature sportive. Abbiamo la scarpa giusta per ogni sport, cosa aspetti? Mionegozio: Negozio scarpe sportive a milano Meta Description Miongozio.it - scarpe sportive a Milano. Via dei Tigli 1, (MI). Tel info@mionegozio.it

21 Title 31 char H1 23 char H2 81 char p 546 char Meta Description 104 char

22 #i link: tag <a> : anchor link I link sono "il ponte" che consente di passare da una pagina all altra. Sono il cuore del funzionamento ipertestuale.

23 #i link: tag <a> : anchor link Sono formati da: la risorsa verso cui il collegamento punta (hyopertext reference) contenuto che "nasconde il collegamento (non importa <a href= pagina1.html">pagina 1</a> hypertext reference link

24 #i link: tag <a> : attributo title Sintassi: <a title= commento" href=url" > testo</a> L attributo TITLE di un link, inserisce una descrizione testuale della risorsa puntata dal link

25 #<img> Sintassi: <img src URL dell immagine" alt= descrizione testuale > Nome del file immagine : vendita_scarpe_bergamo_01.jpg