LAYOUT e NAVIBAR. + frame e iframe

Транскрипт

1 LAYOUT e NAVIBAR + frame e iframe

2 Elementi del layout HTML Nei siti Web spesso vengono visualizzati i contenuti in più colonne (come una rivista o un giornale). l HTML5 offre nuovi elementi semantici che definiscono le diverse parti di una pagina web:

3 TAG CHE FORMANO IL LAYOUT <Header> - Definisce la testata di un documento o di una sezione. <Nav> - Definisce un contenitore per i collegamenti di navigazione, il menu classico di un sito web. <Section> - Definisce una sezione in un documento, in genere sono presenti link o widget. <Article> - Definisce un articolo autonomo indipendente, accompagnato anche da file multimediali, il corpo del sito, <p> <img> <video>. <Aside> - Definisce il contenuto a parte il contenuto (come una barra laterale). <Footer> - Definisce un piè di pagina di un documento o di una sezione.

4 ESEMPIO DI LAYOUT HTML CON CSS INTERNO

5

6 QUESTO TIPO DI LAYOUT HA DUE CARATTERISTICHE FONDAMENTALI NEL MONDO DEL WEB DESIGN MODERNO: 1) IL CSS INTERNO all HTML 2) è RESPONSIVE IL CSS è IL FOGLIO DI STILE, OVVERO UN COMANDO UNICO PER DARE UNO STILE A TUTTO QUELLO CHE ANDREMO A COSTRUIRE ALL INTERNO DEL NOSTRO SITO WEB! PER QUANTO RIGUARDA IL CSS VERRA APPROFONDITO MEGLIO NELL ULTIMA LEZIONE, OGGI VEDIAMO UNA PICCOLA PARTE PER QUANTO RIGUARDA IL LAYOUT. SICCOME SI TRATTA DEL LAYOUT IL COMANDO CSS SI RIFERIRA ALLO STILE DEL NOSTRO SITO WEB, RAGION PER CUI è UN SEMPLICE COMANDO CHE DICE AL NOSTRO BROWSER DI INTERPRETARE IL FOGLIO HTML IN UN CERTO MODO QUESTO VUOL DIRE CHE NON FA PARTE DEL <BODY> MA BENSì DEL <HEAD>, SI TRATTA DI UN COMANDO INVISIBILE CHE DICE AL BROWSER DI SISTEMARE, UNA VOLTA TERMINATO IL COMANDO HTML, TUTTI GLI ELEMENTI IN UN CERTO MODO DA NOI PRECENDENTEMENTE DEFINITO NEL ATTRIBUTO <STYLE> DELL <HEAD>.

7 <html> <head> <style> div.container { width: 100%; border: 1px solid gray; } header, footer { padding: 1em; color: white; background-color: black; text-align: center; } nav { float: left; max-width: 160px; padding: 1em; } si riferisce a tutto il contenitore del nostro sito web misura tutto lo schermo = 100% ha un bordo di 1pixel qui si può modificare l header e il footer padding = grandezza della cella color = colore del testo background-color = colore di sfondo della cella text-align =allineamento del testo attributo { nav } si riferisce al menu di navigazione meglio detto NAVIBAR; float = posizione del menu nel contesto, il menu galleggia a sx max-widht = larghezza massima del blocco padding = grandezza della cella navibar

8 nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; } </style> </head> nav ul si riferisce allo stile della lista che intendiamo utilizzare ovvero al posto di none se si mette la parola circle davanti alle voci del menu comparira un cerchietto vuoto. es: list-style-type:square; Tokio list-style-type:upper roman; III. Tokio si riferisce alla decorazione del testo, ovvero se si vuole aggiungere una riga sopra o sotto al link, o se non si vuole che il link sia sottolineato article è lo spazio centrale dove intendiamo inserire testo - immagini - video margin-left = decide quanto spazio lasciare da sinistra border-left = quanto spazio lasciare dal bordo interno sinistro padding = grandezza della cella

9 Le variazioni di text-decoration: text-decoration: overline; This is heading 1 text-decoration: line-through; This is heading 1 text-decoration: underline; This is heading 1

10 Le variazioni di LIST-STYLE-TYPE: list-style-type: circle; Tokio New York London list-style-type: square; Tokio New York London list-style-type: upper-roman; list-style-type: lower-alpha; I. Tokio II. New York III. London a. Tokio b. New York c. London

11 Le variazioni dell attributo style l attributo style come detto in precedenza è contenuto all interno dell head e ci permette di modificare in modo univoco e con un solo comando tutti gli elementi presenti nel <body>. <head> <title>home</title> <style> body {background-color: lightblue;} h1 {color: red;} p {color: blue;} </style> </head> colore dei paragrafi di testo colore dello sfondo colore degli attributi <h1><h2> e via dicendo i TITOLI dei paragrafi

12 Barra di navigazione

13 La barra di navigazione nasce dalla rielaborazione del concetto ben più semplice della cosidetta LISTA. L indice di un libro per esempio ha l aria di sembrare proprio una LISTA. Indice Libro Lista HTML

14 TAG di una semplice lista: <ul> <li>home</a></li> <li>news</a></li> <li>contact</a></li> <li>about</a></li> </ul> TAG di un NAVBAR semplice: <ul> <li><a href="index.html">home</a></li> <li><a href="news.html">news</a></li> <li><a href="contact.html">contact</a></li> <li><a href="about.html">about</a></li> </ul>

15 <ul> <li><a href="index.html">home</a></li> <li><a href="news.html">news</a></li> <li><a href="contact.html">contact</a></li> <li><a href="about.html">about</a></li> </ul> All interno de TAG della LISTA <LI> troviamo il tag di collegamento detto LINK ovvero <a href= > Questo tag permette di collegare ad ogni voce una pagina HTML Per fare in modo che i collegamenti funzionino, bisogna creare delle nuove pagine html ne rinominarle con nomi diversi, solo la pagina della HOME rimarrà di default nominata INDEX.HTML.

16 Navibar con css integrato <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } Tag <ul> si riferisce ad una LISTA non ordinata Si usa insieme al TAG <li> che è sempre di riferimento ad una LISTA come visto in precedenza è il tag per definire lo stile della lista. margin = margine sx dello schermo padding = grandezza della cella 0 è la misure minima di default, il contorno del testo. overflow = ritaglia uno spazio al contenuto che altrimenti traboccherebbe dalla barra di navigazione, se eliminato non è più visibile la barra che contiene il menu. bg color = colore sfondo float: left = dove allineare il menu se a dx o a sx di default si trova a sinistra

17 li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: black; } diplay:block ; ovvero la barra di navigazione rimane fissa in alto, non scorre con il testo color = colore del testo text-align = allineamento del testo all interno delle celle padding = grandezza delle celle text-decoration:none = se inserire una linea nel testo Evidenziare la pagina corrente con una.active class e utilizzare il selettore :hover per cambiare il colore di ogni collegamento pagina quando si sposta il mouse su di loro

18 .active { background-color: #4CAF50; } </style> </head> <body> si riferisce alla prima cella di testo ( in questo caso HOME) che viene resa attiva e quindi evidenziata sempre in verde Dopo si apre il <body> all interno si crea una LISTA non ordinata composta dai due tag <ul> e <li> <ul> <li><a class="active" href="index.html">home</a></li> <li><a href="news.html">news</a></li> <li><a href="contact.html">contact</a></li> <li><a href="about.html">about</a></li> </ul> il primo tag è class= active come visto prima è attivo e rimane sempre evidenziato anche senza il passaggio del mouse si crea per ogni pagina un coloegamento ipertestuale alle altre pagine del sito (argomento delle prossime lezioni)

19 margin:0 padding:0 overflow:hodden se viene eliminata non comparirà la barra grigia scura padding è la distanza della barra da top e left a class= active

20 Frame e IFrame

21 FRAME E IFRAME SONO IL CORRISPONDENTE ITALIANO DEI RIQUADRI. I RIQUADRI SERVONO AD INCORNICIARE ARGOMENTI DIFFERENTI ALL INTERNO DELLA STESSA PAGINA WEB. UN ESEMPIO è PROPRIO GOOGLE PLAY, MA ESISTE ANCHE AMAZON, ITUNES, YOUTUBE, ECC I RIQUADRI POSSONO ESSERE DI DUE TIPOLOGIE: FRAME OVVERO DOVE ALL INTERNO ABBIAMO SOLO DEL SEMPLICE TESTO; IFRAME DOVE SI INSERISCE UN FILE ALL INTERNO DEL RIQUADRO.

22 Esempi di Iframe

23 Tag per Frame è <FRAMESET></FRAMESET> per IFrame è <iframe src=.. ></iframe>

24 FRAME IL Tag di apertura è FRAMESET <FRAMESET cols="20%, 80%"> <FRAMESET rows="500%, 200%"> </FRAMESET> <FRAME src="pagina.html"> <FRAME src="pagina2.html"> IL primo ha come attributo COLS = Larghezza del riquadro IL secondo ha come attributo ROWS =Lunghezza del riquadro da Top, come per le Immagini. in <FRAME src pagina.html > si inserisce il rimando ad una pagina creata in precedenza, situata all interno della stessa cartella dove si salva il documento contenente il TAG <FRAME>. </FRAMESET> chiude il TAG tutto all interno del BODY

25 L'impostazione dell'attributo ROWS definisce il numero di sottospazi orizzontali in un set di frame. L'impostazione dell'attributo COLS definisce il numero di sottospazi verticali. Entrambi gli attributi possono essere impostati simultaneamente per creare una griglia. Se l'attributo ROWS non è impostato, ogni colonna estende l'intera lunghezza della pagina. Se l'attributo COLS non è impostato, ogni riga estende l'intera larghezza della pagina. Se nessun attributo è impostato, il frame occupa esattamente la dimensione della pagina.

26 2 Esempi di IFrame

27 1 Google Maps Dopo aver digitato e trovato il Luogo nella barra di ricerca si accede al menu di google maps dove si trova un link dell iframe della pagina con il luogo scelto da inserire nel proprio foglio html. Si accede al Menu laterale di Google Maps 2 si clicca su condividi o incorpora mappa

28 3 4 Si apre una finestra con due opzioni, si clicca su Incorpora Mappa, si può scegliere la dimensione della mappa ma si può anche ridimensionare in un secondo momento.

29 Questo è l Iframe pre impostato di Google Maps, basta copiarlo ed inserirlo all interno del foglio HTML nel <body> 5 Il Tag si apre con <iframe src= > <iframe src=" !3d !2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478e9b04de6137df%3A0x717c1aa09cdd3746!2s Freddie+Mercury+Memorial+Statue%2C+1820+Montreux%2C+Svizzera!5e1!3m2!1sit!2sit!4v " width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> all interno troviamo le coordinate del luogo di Google Maps. In Width - Height sono la larghezza e l altezza del riquadro della mappa frameborder = cornice style= border:.. = che stile dare alla cornice allowfullscreen= letteralmente consentire a schermo intero

30 YouTube 1 Si accede al Sito web di Youtube, nella barra di ricerca digitare il nome del video. 2 In basso a destra sotto i comandi del video si trova il comando di condivisione, si clicca su di esso...

31 3 Si clicca su INCORPORA, si apre una nuova finestra con l anteprima del video come comparirà sulla vostra pagina web ed il link Iframe in alto a destra.

32 Il codice Iframe può essere inserito in una pagina HTML, semplicemente con la tecnica copia/incolla. <html> <head> <title>youtube video</title> </head> <body bgcolor="black"> <font color="white"><h1>video Iframe YouTube</h1> <div style="position:absolute; top:100px; left:50px"> <iframe width="560" height="315" src=" m4cgll8javi?rel=0" frameborder="0" allowfullscreen></iframe> </body> </html>