Download as PDF, PPTX
Uploaded byStudiabo
Web base-02-css
Il documento fornisce una panoramica del corso di data journalism, coprendo le tecnologie web di base, come la struttura HTML, i CSS e i colori RGB. Sono inclusi esempi pratici di utilizzo di selettori CSS, attributi HTML e la creazione di layout responsivi con Bootstrap. Inoltre, viene introdotto il modello ad oggetti del documento (DOM) e dettagli sui colori in formato esadecimale e RGB.
Web base-02-css
- 1. Corso Data Journalistgen-mar 2017 TECNOLOGIE WEB BASE Presentazione, CSS e selettori
- 2. Presentazione di unelemento html < /TAG > C O N T E N U T O tag iniziale < TAG attributo = valore , attributo = valore .….. > tag finale ATTRIBUTO SPECIALE: style = ’’ regole di stile ‘’ attributo : valore ; attributo : valore ; …..
- 3. Attributi di tag <h1align=”left”> align text-align attributo di tag possibili valori left/middle/right esempio attributo di regola di stile possibili valori left/center/right esempio <h1 style=”text-align : left”> <font size=4> size font-size attributo di tag possibili valori integer esempio attributo di regola di stile possibili valori ...px/...em esempio <h1 style=”font-size : 20px”> Attributi di regole di stile
- 4. Collegamento tra elementoe regole di stile <!DOCTYPE html> <html> <head/> <meta charset="utf-8"> <title>Grafico Line</title> </head> <body> <h1 style=’’font-size:20px”>Titolo </h1> <div> Contenuto </div> </body> </html> STYLE in TAG STYLE in HEAD <!DOCTYPE html> <html> <head/> <meta charset="utf-8"> <title>Grafico Line</title> <style> h1 {font-size:20px} </style> </head> <body> <h1>Titolo </h1> <div> Contenuto </div> </body> </html>
- 5. .valore di attributo class Regolecss selettore { attributo : valore; …………….. attributo : valore; } tag dell’elemento #valore di attributo id selettori multipli ( , ) selettori discendenti (spazio) selettori dettagliati (uniti) selettori figli diretti (>) selettori adiacenti (+) selettori fratelli (~) h1, h2 h1 p h1#id1 div > h1 h1 +h2 h3~h2
- 6.
- 7. Sistemi di griglieresponsive con bootstrap <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> ……. <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> ……. </div>
- 8. Corso Data Journalistgen-mar 2017 TECNOLOGIE WEB BASE Colori
- 9. Colori RGB (red,green, blue) COLORI PRIMARI RGB ( 0, 256, 0 ) RGB ( 0, 256, 128 ) RGB ( 0, 0, 256 ) RGB ( 128, 256, 0 ) RGB ( 256, 256, 0 ) RGB ( 256, 224, 0 ) RGB ( 256, 192, 0 ) RGB ( 256, 96, 0 ) RGB ( 256, 0, 0 ) RGB ( 256, 0, 128 ) RGB ( 256, 0, 256) RGB ( 128, 0, 256)
- 10. Colori RGB (red,green, blue) RGB ( 256, 0, 0 ) RGB ( 0, 0, 256 ) RGB ( 0, 256, 0 ) RGB ( 256, 256, 0 ) RGB ( 256, 0, 256 ) RGB ( 0, 256, 256 )
- 11. Colori RGB :formato esadecimale Sistema numerico decimale 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 107 108 109 110 . . . . . . . . . . . . . . Sistema numerico esadecimale 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 10 . . . . . . . . . . . . . . 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF FF 256
- 12. Colori Color name Esadecimalergb blue red green yellow#FFFF00rgb(256, 256, 0) rgb(0, 0, 256) rgb(0, 256, 0) rgb(256, 0, 0) #FF0000 #00FF00 #0000FF magenta #FF00FFrgb(256, 0, 256) cyan #00FFFFrgb(0, 256, 256)
- 13. Corso Data Journalistgen-mar 2017 TECNOLOGIE WEB BASE Document Object Model
- 14. Document Object Model document HEADHTML STYLE SCRIPT LINK DIV DIV H1 P
- 15. CONTATTI TELEFONO 051 2235 20 EMAIL WORKSHOP@VICEM.IT