Web base-02-css
0 likes188 views
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 Journalist gen-mar 2017 TECNOLOGIE WEB BASE Presentazione, CSS e selettori
- 2. Presentazione di un elemento 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 <h1 align=”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 elemento e 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 Regole css 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
- 7. Sistemi di griglie responsive 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 Journalist gen-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 Journalist gen-mar 2017 TECNOLOGIE WEB BASE Document Object Model
- 14. Document Object Model document HEAD HTML STYLE SCRIPT LINK DIV DIV H1 P
- 15. CONTATTI TELEFONO 051 22 35 20 EMAIL WORKSHOP@VICEM.IT