Web base-01-html
0 likes185 views
Il documento tratta un corso di data journalism focalizzato sulle tecnologie web di base, comprese le strutture HTML e CSS, e l'utilizzo di JavaScript e JSON. Viene presentata la sintassi dei vari tag HTML e le loro funzioni, nonché le differenze tra elementi block e inline. Infine, il documento include riferimenti a risorse ulteriori e contatti per ulteriori informazioni.
Web base-01-html
- 1. Corso Data Journalist gen-mar 2017 TECNOLOGIE WEB BASE Contenuti e HTML
- 2. STRUTTURA DEI CONTENUTI HTML ASPETTO DEI CONTENUTI CSS se-l et-t ori DOCUMENT OBJECT MODEL JAVA SCRIPT COMPONENTI STATICHE COMPONENTI DINAMICHE JSON immagini pagine html (iframe)
- 4. Elementi html <tag di apertura attributo=’valore’ > CONTENUTO </tag di chiusura> <p id=’par1’ > Lorem ipsum dolor sit amet .. </p>
- 5. Tipologie di tag <!DOCTYPE html> <html> <head> <title>Titolo del documento</title> </head> <body> Contenuti del documento </body> </html> <html> 1) segnale al browser che il documento è di tipo HTML 2) rappresenta da radice del documento. 2) è il contenitore di tutti gli altri elementi HTML, ad esclusione del <!DOCTYPE> tag. La dichiarazione <!DOCTYPE> non è un tag HTML; è una istruzione che dice al browser in quale versione di HTML è scritta la pagina <head> è il contenitore di tutti gli elementi di tipo head <body> è il contenitore di tutti gli elementi di tipo body
- 6. Elementi di tipo head <title> <style> <link><meta> <script> Per inserire informazioni varie, quali la codifica dei caratteri: <meta charset="utf-8" > Per inserire regole di stile Per inserire dei link a dei file esterni, ad esempio ad un file css tramite l’attributo href Per inserire istruzioni javascript oppure un collegamento ad un file javascript tramite l’attributo src Per inserire un titolo che identifica la pagina
- 7. Elementi di tipo body - block <div> <p> <ol><h1>..<h6> <ul> Definiscono titoli e sottotitoli. Definisce un paragrafo. Generalmente contiene solo testo o elementi inline. Lista ordinata. può contenere solo l'elementi <li> Lista non ordinata. Può contenere solo elementi <li> Definisce un blocco di contenuto generico o una sezione del documento.
- 8. Elementi di tipo body - block - tabella <table> <thead> <th><tbody> <tr> Definisce il corpo di una tabella. Con <thead> e <tfoot> serve a raggruppare le righe di una tabella. Definisce una tabella per l'inserimento di dati tabulari. Definisce la testata di una tabella. intestazione di una cella Definisce una riga <td> definisce la cella di una tabella
- 9. Elementi di tipo body - inline <span> <i> <u><tt> <em> Testo con carattere monospazio. Definisce una sezione di testo inline generica cui applicare uno stile oppure visualizzare in funzione della lingua Testo in corsivo Testo sottolineato Testo evidenziato <br> Inserisce un'interru zione di riga
- 10. Posizionamento Contenuti Elementi inline Elementi che sono contenuti in un paragrafo, quali <span> <img>, ma anche i <link>. Non considerano eventuali attributi width o height Elementi block Paragrafi e titoli ed altri elementi che possono incorporarli, quali <div>. La loro dimensione può essere governata dagli attributi width o height display:block float:left
- 12. Elementi Block display: inline; <p style="width: 400px; height: 200px; border: 25px solid green; display:inline"> Lorem ipsum.</p> <p style="width: 400px; height: 200px; border: 25px solid green;"> Lorem ipsum.</p> Non hanno effetti float: left; float: right; <p style="width: 400px; height: 200px; border: 25px solid green; float:left;"> Lorem ipsum.</p> <p style="width: 400px; height: 200px; border: 25px solid green; float:right;"> Lorem ipsum.</p> Hanno effetti
- 14. CONTATTI TELEFONO 051 22 35 20 EMAIL WORKSHOP@VICEM.IT