Esercitazione 1 parte 1

Transcript

1 Esercitazione 1 parte 1 Usare Chrome per vedere una pagina h>p://ppl.eln.uniroma2.it/pw/ex1/kitchen.html Vedere il sorgente html Komodo edit, Sublime Text, Notepad++ Aprire i Developer Tools Descrizione generale DT Vedere il sorgente della pagina Pagine web h>p://ppl.eln.uniroma2.it/pw/ex1/kitchen.html 1

2 Il file html Il file sorgente h>p://ppl.eln.uniroma2.it/pw/ex1/kitchen.html File - > Salva pagina e Selezionare il formato HTML Only Aprire la pagina con un editor txt (es. Komodo Edit) Markup Il documento è pieno di tag <!DOCTYPE html>, <html>,<head>, <atle>... testo fra parentesi acute non vengono mostraa dal browser sono definia dallo standard Mola tag sono a coppie <body>... </body> tag di apertura e tag di chiusura Alcuni tag non hanno chiusura <hr>, <img... > 2

3 Stru=ura di una pagina I tag definiscono degli elemena cooking and eaang Ogni elemento può contenere altri elemena del testo niente Tag annidaa if you love to read about cooking and eaang, would like to find out about of some of the best restaurants in the world, or just want a few choice recipes to add to your collecaon, this is the site for you! Stru=ura ad Albero Codice HTML <elem1>! <elem2>! <elem3>! </elem3>! </elem2>! </elem1>! Stru>ura rappresentata Elem1 Elem2 Elem3 Elem4 Ogni pagina HTML ha una stru>ura ad albero Tug gli elemena sono contenua nell elemento <html> </html> Lo standard il significato semanaco dei diversi elemena I tag sono definia dallo standard HTML h>ps://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5/ HTML5_element_list 3

4 kitchen.html A=ribuA Alcuni elemena hanno a>ribua coppie chiave- valore definite nei tag di apertura sono specificaa dallo standard per I diversi tag forniscono informazioni aggiunave <img src="foods.gif" alt="food illustraaon"> chiave src, valore food.gif 4

5 <!DOCTYPE html> <html> <head> <title>jen's Kitchen</title> <link rel="stylesheet" href="kitchen.css" type="text/css" > </head> Dove sono le figure copyright 2011, Jennifer Robbins Ogni figura è in un file separato </body> </html> L'elemento img dice al browser dove è la figura mediante l'a>ributo src body Quando { font: normal il browser 1em Verdana; trova margin: l'elemento 1em 10%;} img, questo fa una nuova richiesta h>p per l'immagine e quindi la img { margin: 0 20px 0 0; } posiziona nella pagina h1 img { margin-bottom: -20px; } small { per color: i video, #666666; audio, etc. } è più o meno la stessa cosa <img src="" alt="spoon illustration"> Your pal, Jen at Jen's Kitchen <hr> copyright 2011, Jennifer Robbins </body> </html> kitchen.css <body> <h1><img src="foods.gif" alt="food illustration"> Jen s Kitchen</h1> AA body { font: normal 1em Verdana; margin: 1em 10%;} h1 { font: italic 3em Georgia; color: rgb(23, 109, 109); margin: 1em 0 1em;} img { margin: 0 20px 0 0; } h1 img { margin-bottom: -20px; } small { color: #666666; } if you love to read about cooking and eating, would like to find out about of some of the best restaurants in the world, or just want a few choice recipes to add to your collection, this is the site for you! foods.gif <img src="" alt="spoon illustration"> Your pal, Jen at Jen's Kitchen <hr> kitchen.css Figure 2-3. The source file and images that make up a simple web page. h1 { font: italic 3em Georgia; color: rgb(23, 109, 109); margin: 1em 0 1em;} Chapter 2, Su connessioni foods.gif lente si vede comparire l'immagine in un secondo momento Figure 2-3. The source file and images that make up a simple web page. Adding a little style Aggiungere lo sale I want to direct your attention to one last key ingredient of our minimal page. Near the top of the HTML document there is a link element that points to the style sheet document kitchen.css. That style sheet includes a few Elemento lines of instructions link for che how the punta page should a kitchen.css look in the browser. These are style instructions written according to the rules of Cascading Style Sheets (CSS). CSS I file allows css designers contengono to add visual delle style diregve instructions sull'aspe>o (known the della pagina document s presentation) to the marked-up text (the document s structure, in web design terminology). In Part III, you ll really get to know the power of Cascading Style Sheets. The Anatomy of a Web Page Figure 2-4 shows the Jen s Kitchen page with and without the style instructions. Browsers come equipped with default styles for every HTML element they support, so if an HTML document lacks its own custom style instructions, the browser will use its own (that s what you see the screen shot Queste istruzioni seguono il linguaggio Cascading Style Sheets on the right). Even just a few style rules can make big improvements to the appearance esempio. of a page. pagina senza il file css Chapter 2, How the W Figure 2-4. The Jen s Kitchen page before (left) and after (right) style rules. Adding Behaviors with JavaScript In addition to a document s structure and presentation, there is also a behavior component that defines how things work. On the Web, behaviors are defined by a scripting language called JavaScript. We ll touch on it lightly in this book in Part IV, but learning JavaScript from scratch is more than we can take on here. Many designers (myself included) rely on people with scripting experience to add functionality to sites. However, knowing how to write JavaScript is becoming more essential to the web designer job description. 5

6 (CSS). CSS allows designers to add visual style instructions (known as the document s presentation) to the marked-up text (the document s structure, in web design terminology). In Part III, you ll really get to know the power of Cascading Style Sheets. AA Figure 2-4 shows the Jen s Kitchen page with and without the style instructions. Browsers come equipped with default styles for every HTML element they support, so if an HTML document lacks its own custom style instructions, the browser will use its own (that s what you see in the screen shot on the right). Even just a few style rules can make big improvements to the appearance of a page. Senza css Browser Server Browser 1 Type in a URL or click on a link in the browser. Server Programmazione Browser WEB Figure 2-4. The Jen s Kitchen page before (left) and after (right) style rules. Browser 2 The browser sends Server Scambio file Adding Behaviors 14 Type The in browser with a URL or parses click the on JavaScript a link in the browser. In addition to a document s structure and presentation, sheets, and scripts, the browser there an HTTP is request. also a behavior index.html component 1 Type in a URL or click on a link in the browser. contacts the server again for each Putting It All Together that defines how things work. On resource. the Web, behaviors are kitchen.gif defined 2 The browser sends by a Browser scripting language called JavaScript. We ll touch on it Server lightly Putting It All Together Browser Server an HTTP request. in this book in Part BrowserIV, but learning JavaScript from Server scratch is more than we can take on here. Server Contents Many designers (myself included) 2 The browser sends rely on 4 The browser parses the Server Contents an HTTP request. people document. If with has images, scripting style experience to add functionality to sites. However, knowing how sheets, to and write scripts, the JavaScript browser is kitchen.html becoming more index.html kitchen.gif contacts the server again for index.html each kitchen.css 1 Type in a URL or click on a link in the browser. kitchen.gif essential 1 to Type the in a web URL or click designer on a link in the browser. job description. 4 The browser parses the document. If it has images, style sheets, and scripts, the browser index.html I see that you requested a directory, so I m sending you the default file, index.html. index.html Here you go. resource. kitchen.gif 3 I see The that server you requested looks for a the directory, file and kitchen.css 5 The so page I m is sending assembled you the in default file, 4 The browser parses the kitchen.css the browser window. 2 The browser sends document. If it has index.html index.html. Here you go. an HTTP request. 3 The server looks for the file and images, style Oops, no file responds with an HTTP response. sheets, I see and that scripts, you the requested browser a directory, index.html Oops, 4 The no file browser contacts so I m parses the sending server the you again the for default each file, I see that you requested a directory, 3 The server looks for the file and so I m sending you the default file, If the file is not on the server, document. resource. index.html. If it has images, Here you kitchen.css kitchen.gif responds style go. index.html. Here you go. it returns an error message. with an HTTP response. sheets, and scripts, the browser index.html contacts the server again for each Oops, no file Figure 2-5. How I see browsers that you requested display a directory, web pages. 5 The page is assembled in so I m sending resource. you the default file, If the file is not kitchen.gif on the food.gif server, index.html. Here you go. it returns an error message. the browser window. HTTP response HTTP response 4 The browser parses the kitchen.gif document. If it has images, style sheets, and scripts, the browser contacts the server again for each contacts the server again for each resource. Figure 2-5. How browsers display web pages. 2 The browser sends an HTTP request. HTTP response HTTP request GET kitchen.html 4 The browser parses the document. If it has images, style resource. kitchen.css sheets, and scripts, the browser contacts the server 5 The again page for is assembled each in resource. the browser window. kitchen.gif kitchen.css Browser HTTP request GET kitchen.css GET food.gif GET 2 The browser sends an HTTP request. 1 Type in a URL or click on a link in the browser. HTTP response an HTTP request. 1 Type in a URL or click on a link in the browser. kitchen.gif document. If it has images, style 2 The browser sends HTTP request Figure 2-5. How browsers display web pages. kitchen.css HTTP response HTTP response HTTP response HTTP request in 3 The s Putting It All Together respo Server index.html I see that you requested a directory, so I m sending you the default file, index.html. Here you go. Server Contents 3 The se inde respon HTTP request index.html I see that you requested a kitchen.gif directory, so I m sending you the default file, index.html. Here you go. HTTP request HTTP request kitchen.css kitchen.css 5 The page is assembled in the browser window. 5 The page is assembled in the browser window. kitchen.css responds with an HTTP response. Server If the file is not on the server, it returns an error message. Ifs i 3 The s respo 3 The serve responds If th it re Chap Figure The How page is assembled browsers in display web pages. the browser 5 window. The page is assembled in the browser window. Figure 2-5. How browsers display web pages. 6 Chapter 2, H Figure 2-5. How browsers display web pages. Chapter 2, How the Web Works 31

7 Developer Tools h>ps://developer.chrome.com/devtools 7

8 ElemenA HTML Visualizzazione degli elemena HTML uso della lente (cmd+shiu- c) Evidenziare elemena 8

9 Navigare usando le frecce Per navigare la stru>ura del documento è possibile usare le frecce è ç espande/comprime gli elemena ê é si muove su è giù fra gli elemena So>o è mostrato il livello SorgenA 9

10 Developer Tools: Network Developer Tools: Network 10

11 Developer Tools: Network Developer Tools: Network 11

12 Esercitazione 2 Accedere al proprio account nel server con le credenziali fornite usando filezilla NOTA: la prima volta che accedete dovete creare la cartella public_html Me>ere nel server il file kitchen.html Visualizzare il contenuto aggiungere le altre risorse della pagina 12

13 Filezilla FTP e SFTP Connessione al sever Host: ppl.eln.uniroma2.it porta 22 Credenziali ricevute per posta 13

14 Creare public_html Cartella public_html È la "home" del vostro server web la url per l'accesso via internet è h>p://ppl.eln.uniroma2.it/~username/... 14

15 Uplodare il file pp Visualizzare il file Usare il browser per vedere il file nel server 15

16 Altre risorse Completare la pagina me>endo nel server le altre risorse URL delle risorse Digitare nel browser le url delle risorse uplodate kitchen.css food.gif Verificare cosa viene visualizzato dal browser 16

17 Altri file nel server Creare il file di testo salua.txt inserire la stringa ciao nel file Inviarlo al server Visualizzarlo in un browser 17