HTML. Hyper Text Markup Language
|
|
- Bonaventura Corsini
- 7 anni fa
- Visualizzazioni
Transcript
1 HTML Hyper Text Markup Language
2 IL WEB Le componenti principali del web sono: HTML: definizione del contenuto delle pagine CSS: definizione dell aspetto delle pagine Javascript: definizione del comportamento delle pagine PHP: accesso ai dati persistenti su un DBMS Noi affronteremo solo i primi due aspetti per la realizzazione di siti statici.
3 HTML e CSS HTML sta per Hyper Text Markup Language che significa: linguaggio di contrassegno per ipertesti. Cos è un ipertesto? Un ipertesto è un insieme di testi messi in relazione tra loro tramite collegamenti e parole chiave. Cosa usiamo per contrassegnare? L HTML è un linguaggio che utilizza i tag. Cos è un tag? Si tratta di marcatori che identificano e controllano la presenza, la disposizione e l aspetto degli elementi contenuti nel mio ipertesto. Esempio: <tag> il mio contenuto </tag>
4 HTML e CSS L HTML non è un vero e proprio linguaggio di programmazione si tratta di un linguaggio che serve a dichiarare la struttura del mio ipertesto, se lo vogliamo vedere sotto un altro aspetto si tratta di un linguaggio per programmare ipertesti. CSS: Cascading Style Sheet Fogli di Stile a Cascata Il CSS è un linguaggio che definisce l aspetto dei nostri ipertesti, che d ora in poi diventeranno vere e proprie pagine web. Il CSS è inglobato all interno dell HTML dato che sono strettamente legati l uno all altro. Il CSS ci permette di dare il nostro stile al nostro sito web.
5 HTML e CSS - Riassunto L HTML definisce la struttura ed il contenuto del documento, quindi della nostra pagina web. Il CSS definisce la presentazione grafica degli elementi presenti all interno del nostro documento.
6 I tag Il formato generale di un tag è il seguente: <tag [attributo="valore"]... > contenuto del tag </tag> < >: le parentesi angolari delimitano l inizio e la fine di ogni elemento. tag: (nome del tag)identifica l oggetto da trattare. attributo: (nome dell attributo) è una proprietà del tag che si vuole specificare, è opzionale. valore: (valore dell attributo) identifica il valore che si vuole attribuire alla proprietà specificata prima. La coppia attributo valore si può ripetere per specificare varie proprietà dell elemento che sto dichiarando.
7 I tag contenuto: (codice HTML) è il contenuto vero e proprio del tag e può comprendere altro HTML oppure semplice testo. </tag>: (fine del tag) identifica la fine dell elemento che sto dichiarando.
8 I tag - Esempio Codice HTML: <p style="text-align:center; border:1pt solid;" > colore predefinito <span style="color:red;"> colore rosso </span> colore predefinito </p> Risultato: colore predefinito colore rosso colore predefinito
9 La nostra prima pagina I file HTML e CSS vengono creati tramite un semplice editor di testo. Alcuni esempi sono blocco note, notepad+ +, ecc Per creare un file HTML basterà aprire un documento bianco e salvarlo come nome del mio documento.html. Un documento HTML è aperto e chiuso dal tag <html> </html> È di norma suddiviso in due parti: l intestazione (<head> </head>) e il corpo (<body> </body>). Per una migliore lettura del codice è molto importante l indentazione.
10 Indentazione È una modalità di scrivere codice HTML, e non, che facilità la lettura di chi scrive e di chi legge. Come si applica? Ogni volta che ho aperto un tag vado a capo e indento semplicemente schiacciando il tasto TAB, che ha questo simbolo à, e ogni volta che lo chiudo, invece torno indietro esattamente dello stesso spazio. Es: <tag1> contenuto <tag2> contenuto </tag2> contenuto </tag1>
11 Schema di base <html> <head> </html> intestazione del documento </head> <body> corpo del documento </body>
12 L intestazione La <head> contiene informazioni che servono al browser per interpretare nel modo giusto la pagina. I principali tag di intestazione sono i suguenti: <title> Titolo </title> identifica il titolo della pagina che verrà visualizzato nella scheda del browser. <style> Codice CSS </style> specifica le regole CSS da applicare al documento HTML stesso per la corretta visualizzazione della pagina.
13 Il corpo del documento Il <body> definisce la struttura della pagina, contiene codice HTML, testi e immagini che verranno poi visualizzate dal browser. In seguito vedremo tutti i principali tag che si trovano all interno del <body> Per effettuare un commento in HTML, ovvero inserire del testo all interno del codice sorgente che però non verrà visualizzato nella pagina vera e propria, si usa la seguente sintassi: <!-- il mio commento -->
14 Testo e paragrafi Nel linguaggio HTML esistono tre tipi di tag per identificare un raggruppamento di testo, altrimenti detto paragrafo. Sono i seguenti: <p> Testo </p> blocco di testo preceduto e seguito da una riga bianca. <div> Testo </div> blocco di testo senza formattazione, che può contenere anche altri sottoblocchi. <span> Testo </span> blocco di testo in linea. Identifica un gruppo di parole sulla stessa riga.
15 Testo e paragrafi Per quanto riguarda gli spazi e gli a capo in HTML ci sono parole riservate: <br> uno dei pochi tag che non ha bisogno di essere chiuso e identifica l a capo che altrimenti in HTML non esisterebbe. identifica uno spazio. Infatti in HTML data un riga formata tutta da spazi solamente il primo verrà letto come tale per i restanti bisogna usare questa parola riservata.
16 Immagini Per aggiungere un immagine in mezzo al nostro testo basterà includere il seguente tag: <img src= dove si trova l immagine > Nell attributo src bisognerà specificare dove si trova l immagine per adesso basterà inserire l indirizzo internet a cui fa riferimento ad esempio: <img src = > Che restituirà questo:
17 Un po di stile Queste sono alcune proprietà CSS semplici che vi potranno servire per creare una semplice pagina web. Per applicare il CSS a un elemento basta che specifichiate l attributo style dell elemento con all interno le regole che volete applicare separate da un ; (punto e virgola) Esempio: <div style= parametro: valore; parametro2: valore2; parametro3: valore3; > contenuto </div> Al posto di parametro e valore potrete usare le sueguenti:
18 Un po di stile PROPRIETA background color border VALORE Identifica il colore di sfondo dell elemento. Come valore gli si può attribuire un colore scritto in inglese ad esempio: red, green, blue, lightgreen, black, ecc Identifica il colore del testo. Come valore si possono usare sempre i colori scritti in inglese Identifica il bordo dell elemento: può essere none, senza bordo, o in alternativa ha bisogno che tre parametri siano specificati: Altezza: un numero seguito da px es: 3px Tipo: può essere: solid, dotted, inset, ecc.. Colore: colore scritto in inglese. Il risultato sarà così: 3px solid black
19 Un po di stile PROPRIETA text-align font-weight font-style VALORE Identifica dove deve essere allineato il testo. Può assumere i seguenti valori: left, right, center, justify Ammette due valori: normal o bold, nel primo caso il testo rimane invariato, nel secondo diventa grassetto. Ammette due valori: normal o italic, nel primo caso il testo rimane invariato, nel secondo diventa corsivo. text-decoration Ammette due valori: none o underline, nel primo caso il testo rimane invariato, nel secondo diventa sottolineato. font-size height, width Specifica l altezza del carattere. Es: 30px Specifica altezza e la larghezza dell elemento.es: 50px
20 Un po di stile - Esempio <div style= background: black; color: white; border: 3px solid red; text-align: center; font-size 30px > </div> Risultato: Ciao <span style= font-weight:bold > Ragazzi </span>.<br/> E ora di <span style= font-style: italic; color: red; text-decoration: underline > Cominciare! </span> Ciao Ragazzi. E ora di Cominciare!
21 HTML Parte seconda
22 Elenchi Esistono 2 tipi di elenchi in HTML, quelli puntati e quelli numerati. Questi due tipi li potete riscontrare anche in Word. Vediamo come sono fatti: Elenco puntato Elenco Numerato Primo elemento Secondo elemento Terzo elemento 1. Primo elemento 2. Secondo elemento 3. Terzo elemento 4. Vediamo adesso come si realizza in HTML
23 Elenchi puntati - esempio Elenco puntato: <ul> </ul> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> Il tag <ul> sta per unordered list. il tag <li> sta per list item. Questi elementi ammettono tutti gli stili che abbiamo visto la volta scorsa.
24 Elenchi numerati - esempio Elenco numerato: <ol> </ol> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> Il tag <ol> sta per ordered list. il tag <li> sta per list item. Questi elementi ammettono tutti gli stili che abbiamo visto la volta scorsa.
25 Url assoluto Cos è una URL? URL è un metodo per identificare univocamente una risorsa (file, immagini, siti, ecc ) nel WEB o sul nostro computer. Spesso viene anche usato l appellativo di indirizzo. Un url è composto da tre parti: protocollo://dominio/percorso Il protocollo: identifica che tipo di servizio dobbiamo offrire o ottenere. Noi useremo sempre lo http. Il dominio: è il posto dove si trova la risorsa che vogliamo andare a inserire. Di solito si tratta di un sito internet. Il percorso: è il percorso attraverso il quale possiamo accedere al file che ci interessa. Vedremo alcuni esempi.
26 Url assoluto - esempi masterchef.sky.it/ sito immagini chef.png
27 Url relativo È sostanzialmente solo l ultima parte dell URL assoluto. Infatti utilizza solo il percorso per specificare a che risorsa devo accedere. L URL relativo serve per accedere solamente alle risorse che sono sul mio sito o sul mio computer. Permette anche di accedere alle cartelle superiori tramite la scrittura../ Vediamo un paio di esempi per chiarirci un po le idee.
28 MIO SITO Url relativo Home.html Seconda.html Pagine esempi Adesso Dobbiamo Noi stiamo andiamo risalire a fino trovare alla programmando cartella Immagini l immagine mio la sito, pagina che ci mentre seconda.html interessa, noi adesso entriamo e vogliamo nella siamo aggiungere cartella nella un cartella Immagini: immagine pagine che si trova quindi: nella cartella../immagini immagini, in particolare Background.jpg../ Testa.jpg. L URL relativo E ci poi aiuta selezioniamo a raggiungere E l immagine siamo nella che attraverso cartella ci interessa: MIO pochi SITO passaggi. Testa.jpg../Immagini/Testa.jpg
29 I link Nelle pagine HTML è possibile realizzare collegamenti esterni ad altre pagine. Il tag da utilizzare è <a>... </a>; il codice contenuto nel tag diventa il collegamento attivo: può essere un testo o un immagine. L attributo impostabile del tag <a>, oltre allo style, è sostanzialmente uno: l href, che indica il percorso della pagina o della risorsa a cui si deve essere rimandati. Cliccando sul link si viene reindirizzati alla risorsa corrispondente all url dell href.
30 Link - esempi Sempre secondo l esempio della struttura precedente, se ci troviamo nella pagina Home.html possiamo inserire un link del tipo <a href= Seconda.html >Vai alla seconda pagina</a> Il risultato sarà il seguente Vai alla seconda pagina E cliccandoci sopra verrà caricata la pagina Seconda.html Come potete notare abbiamo usato un URL relativo. Se vogliamo caricare un immagine invece scriveremo così <a href=../immagini/bg.jpg >Vai all immagine</a> Vai all immagine
31 Le ancore Le ancore sono dei collegamenti interni alla pagina. Come se fossero dei segnalibri. Vengono visualizzati allo stesso modo dei link, ma cliccandoci sopra veniamo semplicemente spostati in una parte diversa della pagina (ad esempio in fondo). Per crearne uno si utilizza sempre il tag <a> ma in maniera diversa. Dobbiamo specificare due cose per creare un ancora: La bandierina o il segnaposto che indica il punto della pagina dove vogliamo spostarci Il link che attiva lo spostamento
32 Ancore - esempio Per il segna posto: <a name= finedellapagina ></a> Per il link che effettuerà lo spostamento: <a href= #finedellapagina >Vai in fondo alla pagina</a> L HTML <body> <a href= #finedellapagina >Vai in fondo alla pagina</a> tanto testo in mezzo <a name= finedellapagina ></a> </body>
33 Tabelle In HTML è possibile creare le tabelle. Per le tabelle abbiamo a disposizione 3 tag: <table> </table> Identifica la tabella vera e proria <tr> </tr> Identifica una riga della tabella <td> </td> Identifica una cella della tabella Esempio: A C B D <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> HTML
34 Iframe Gli iframe sono come dei box html, ad esempio una div, che contengono al suo interno un altra pagina. È un modo semplice e veloce per inserire il contenuto di una pagina esterna all interno della mia. Il codice HTML è molto semplice: <iframe src= pagina da includere.html ></iframe> Con le proprietà CSS che conosciamo possiamo specificare anche una altezza e una larghezza. Nell attributo src dobbiamo specificare la pagina html che vogliamo includere sempre con la solita regola dell URL relativo.
35 L HTML È GIA FINITO ;)
Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
DettagliUna pagina web inizia sempre con il tag <html> e si conclude con il tag </html> : ogni elemento che compone la pagina sarà racchiuso tra essi.
HTML per semplici pagine web HTML è l acronimo di Hypertext Markup Language ( Linguaggio di contrassegno per gli Ipertesti ) e NON è un linguaggio di programmazione E un linguaggio che permette di indicare
DettagliCosa vuol dire HTML? Hyper Text Markup Language
IMPARIAMO Cosa vuol dire HTML? Hyper Text Markup Language PROGRAMMIAMO IN HTML? NO! L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout)
DettagliIntroduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
DettagliProf. Pagani Corrado HTML
Prof. Pagani Corrado HTML IPERTESTI E MULTIMEDIALITÀ Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave sensibili (link). Può essere visto come una rete; i documenti
DettagliHTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
DettagliLinguaggio HTML. Elementi di Informatica e Programmazione Università degli Studi di Brescia. Il Linguaggio HTML
Reti Linguaggio HTML 1 Il Linguaggio HTML n HTML = Hypertext Markup Language n Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
DettagliInformatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML. Elisa Quintarelli-Laura Mandelli. HyperText Markup Language
Informatica A per Ingegneria Gestionale (2005-2006) Il linguaggio HTML Elisa Quintarelli-Laura Mandelli 1 HyperText Markup Language Linguaggio di descrizione di testi secondo lo schema SGML (Standard Generalized
DettagliIntroduzione al Linguaggio HTML
Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la
DettagliBASI di HTML e CSS (primo incontro)
CoderDojo Firenze BASI di HTML e CSS (primo incontro) HTML Concetto di tag Il tag è una parola chiave che indica al browser come interpretare e rappresentare il testo a cui è riferito. È composto da una
DettagliWEB I FOGLI DI STILE. Gabriele Murara
WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento
DettagliServe per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
DettagliIpertesti. Informatica. Internet e WEB WEB. Come funziona il WWW. Come funziona il WWW. Lezione III. Il linguaggio HTML Hyper Text Murkup Language
Informatica Lezione III Il linguaggio HTML Hyper Text Murkup Language Ipertesti Sono testi che possono essere letti sia in modo sequenziale sia eseguendo salti da un paragrafo ad un altro Sono il soggetto
DettagliCascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
DettagliHTML per tu+ Chiara Pere+
HTML per tu+ Chiara Pere+ Cos é L HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L estensione del file è.html e verrà visualizzato corre?amente trascinandolo
DettagliCSS. Cascading Style Sheet
CSS Cascading Style Sheet CSS Il CSS è un linguaggio, di tipo dichiarativo, che serve per definire lo stile di presentazione degli elementi presenti in un documento HTML. Esso è inglobato all interno dell
DettagliPablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S
Breve introduzione all' HTML Pablo Genova gallini.genova@gmail.com I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S. 2016 2017 Un assaggio di HTML Come abbiamo visto nelle lezioni precedenti
DettagliHTML 4.01 Prima lezione
HTML 4.01 Prima lezione A cura di Ivano Stranieri 1 Programma del corso Le basi dell HTML Paragrafi e formattazione del testo Link Tabelle: sintassi ed utilizzo Creazione di frame Form ed interazione con
DettagliINTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML
DettagliLaboratorio Digitale 1
Informatica Corso di PROGRAMMAZIONE Applicata ai Beni IN Culturali RETE Laboratorio Digitale 1 Corso di Laboratorio Digitale 1 Corso di laurea comunicazione e DAMS Laurea Specialistica - Media Education
DettagliPablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S
Breve introduzione all' HTML Pablo Genova gallini.genova@gmail.com I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S. 2017 2018 Un assaggio di HTML Come abbiamo visto nelle lezioni precedenti
DettagliHTML. Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file.
Con la sigla HTML si intende: HYPER TEXT MARKUP LANGUAGE HTML Linguaggio testuale formato da TAG, che consente il collegamento tra diversi file. Iper testo Un documento o pagina puo essere collegato ad
DettagliScrivere in Html Tag e loro attributi
Scrivere in Html Tag e loro attributi + Esercizi Prof.ssa Daniela Zangirolami Tutti i diritti sono riservati. Qualsiasi riproduzione, anche parziale, senza autorizzazione scritta è vietata. Legge 633 del
DettagliHTML Tutorial HTML By A.C. Neve 1
HTML Tutorial HTML By A.C. Neve 1 Il linguaggio HTML (Hyper Text Markup Language) è il più diffuso linguaggio per la creazione di pagine WEB. La creazione di un documento HTML si effettua con un qualsiasi
DettagliArchitettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in
DettagliLinguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML
Reti Il Linguaggio HTML Linguaggio HTML HTML = Hypertext Markup Language Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
DettagliParte II.4 World Wide Web
Parte II.4 World Wide Web Elisabetta Ronchieri Università di Ferrara Dipartimento di Economia e Management Insegnamento di Informatica Dicembre 1, 2015 Argomenti World Wide Web URL Pagine Web World Wide
DettagliSTILE E CSS. classi sezioni. tag
Perchè occorre lo stile? HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni. Un sito web deve avere uniformità di colori, di font e dimensioni
DettagliCSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
DettagliTutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpi Docenti: Viviana Patti e Claudia Picardi Appendice B Proprietà CSS B.1 Font me della famiglia serif
DettagliCorso di CSS. Prerequisiti. Modulo L2. 3-Border e list. Conoscenza di base linguaggio HTML. M.Malatesta 3-CSS-Border e list-13 16/02/ /02/2014
Corso di CSS Modulo L2 3-Border e list 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo alcune delle proprietà CSS relative ai bordi (border-styling) e alle
DettagliHTML SITI WEB. FEQUENZA OBBLIGATORIA 80% ESERCITAZIONI (laboratorio) RICONOSCIMENTO 3 CFU. infolab@uniroma3.it host.uniroma3.it/laboratori/infolab
HTML SITI WEB FEQUENZA OBBLIGATORIA 80% ESERCITAZIONI (laboratorio) RICONOSCIMENTO 3 CFU infolab@uniroma3.it host.uniroma3.it/laboratori/infolab INTERNET Generalmente Internet è definita la rete delle
DettagliElementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
DettagliHTML. Hyper Text Mark-Up Language
HTML Hyper Text Mark-Up Language Cos è l HTML? È un linguaggio usato per descrivere documenti ipertestuali disponibili nel Web È un linguaggio di marcatura del testo che descrive il contenuto e il formato
DettagliPablo Genova I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S
Breve introduzione all' HTML Pablo Genova gallini.genova@gmail.com I. I. S. Angelo Omodeo Mortara Indirizzo Tecnico-Economico A. S. 2018 2019 Un assaggio di HTML Come abbiamo visto nelle lezioni precedenti
DettagliAppunti sui fogli di stile
Appunti sui fogli di stile CSS ( Cascading Style Sheets): Linguaggi di formattazione stilistica e strutturale di un documento HTML o di una serie di documenti in cascata. Può aggiornare lo stile di un
DettagliTag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
DettagliCorso di PROGRAMMAZIONE IN RETE
Corso di PROGRAMMAZIONE IN RETE Laurea Specialistica - Media Education Dr. Annamaria Bria 1 1 Dipartimento di Matematica Università della Calabria Riferimenti MANUALE http://www.w3.org/tr/1999/rec-html401-19991224/
DettagliCORSO DI HTML E CSS CORSO PER LA REALIZZAZIONE DI SITI WEB CON WORDPRESS. ARGOMENTI BASE DEL CORSO
CORSO DI HTML E CSS CORSO PER LA REALIZZAZIONE DI SITI WEB CON WORDPRESS. Grazie al corso di HTML e CSS IkonArt Academy potrai gestire gli elementi che regolano l'impaginazione dei contenuti (HTML) e l'aspetto
DettagliI FOGLI DI STILE CSS (CASCADING STYLE SHEETS)
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti
DettagliLinguaggi di programmazione PC server-client CSS
Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language
DettagliIntroduzione al linguaggio HTML
Introduzione al linguaggio HTML 1 Richiami introduttivi (1) sito Internet (sito Web o sito WWW) insieme delle pagine che si riferiscono ad uno stesso utente, argomento o azienda, registrate su un server
DettagliLinguaggio HTML. Reti. Il Linguaggio HTML. Il Linguaggio HTML. Il Linguaggio HTML
Reti Il Linguaggio HTML Linguaggio HTML HTML = Hypertext Markup Language Linguaggio di markup di tipo descrittivo (usato per descrivere e formattare documenti ipertestuali) con una sintassi prestabilita
Dettagli<tag style= dichiarazioni css >
CSS 1. FOGLI DI STILE Per permettere di separare la forma dal contenuto, si usano i Fogli di Stile. Essi descrivono dettagliatamente lo stile di ogni elemento contenuto nel foglio html. I nomi dei fogli
DettagliNOZIONI BASE DI HTML
NOZIONI BASE DI HTML Aggiornato al 06 marzo 2006 Ermes ZANNONI (ermes@zannoni.to.it) (http://www.zannoni.to.it) Indice : 1. Introduzione 2. Tag di default 3. Formattazione del testo 3.1 Dimensione del
DettagliCorso di CSS. Prerequisiti. Modulo L2 1.2-CSS e HTML. Conoscenza di base del linguaggio HTML. M.Malatesta 1.2-CSS-CSS e HTML-05 12/01/2014
Corso di CSS Modulo L2 1.2-CSS e HTML 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1 Introduzione In questa Unità vediamo come si collegano i fogli di stile con il codice contenuto in una pagina
DettagliSommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
DettagliHTML Sintassi di HTML Tag principali per i contenuti I Forms
Lezione 1 HTML Sintassi di HTML Tag principali per i contenuti Tag principali per i contenuti I Forms L HTML (HyperText Markup Language) g è il linguaggio gg di markup utilizzato per veicolare le informazioni
DettagliHTML. I tag HTML (parte 1)
HTML I tag HTML (parte 1) I tag HTML I comandi che il browser interpreta Etichette per marcare l inizio e la fine di un elemento HTML Formato e possono essere tag di apertura: tag di chiusura:
DettagliElementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
DettagliIl linguaggio HTML. <html> </html> I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura.
Il linguaggio HTML I documenti HTML vanno racchiusi dentro una coppia di TAG (marcatori): apertura e chiusura. . I tag devono essere racchiusi dentro parentesi acute Il tag di chiusura
DettagliAPPUNTI DI HTML (SECONDA LEZIONE)
APPUNTI DI HTML (SECONDA LEZIONE) 1. TITOLI, PARAGRAFI, BLOCCHI DI TESTO E CONTENITORI. E utile scrivere il testo che vogliamo inserire nella nostra pagina html all interno di appositi tag. La pagina sarà
DettagliAlcune definizioni HTML CSS. Introduzione a HTML. November 13, HTML+CSS+Javascript
Introduzione a November 13, 2016 ++Javascript Outline 1 2 3 ++Javascript Internet vs Web Internet : rete fisica di dispositivi interconnessi. (ARPANET 1970) Web : applicativo di alto livello relativo a
DettagliCSS: stili e layout BOX MODEL. Prof.ssa Cristina Gena
CSS: stili e layout BOX MODEL Prof.ssa Cristina Gena Box model In questa lezione vedremo la differenza tra gli elementi blocco e gli elementi in linea e scopriremo le caratteristiche del box model. In
DettagliSTRUTTURA BASE DELLA PAGINA HTML
INDICE INDICE... 1 Convenzioni e simboli usati... 1 STRUTTURA BASE DELLA PAGINA HTML... 1 Alcuni dei Principali TAG Html:... 2 Gli attributi dei TAG Html:... 2 ALIGN... 2 attributi del tag ... 2
DettagliINTRODUZIONE HTML. L HTML è un linguaggio (non di programmazione) che consente di realizzare ipertesti.
INTRODUZIONE HTML L HTML è un linguaggio (non di programmazione) che consente di realizzare ipertesti. Un ipertesto è un documento che può essere consultato anche in modo non sequenziale, ma con collegamenti
DettagliI fogli di Stile. Il Problema dello Stile di Presentazione. I tag in HTML consentono di specificare
Programmazione Web 1 I fogli di Stile Il Problema dello Stile di Presentazione 2 I tag in HTML consentono di specificare la struttura logica del documento (paragrafi, titoli, ecc.) alcuni aspetti della
DettagliCSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
DettagliIMMAGINI INTRODUZIONE
IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer
DettagliFormattazione di liste
Formattazione di liste Con HTML si possono costruire liste puntate o numerate: Occorre definire l inizio e la fine della lista e poi definire ogni singolo elemento della lista. Le liste numerate si costruiscono
DettagliPrimi elementi di... Cascading Style Sheet (o Fogli di Stile)
ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del
DettagliWeb Design. Media Dream Academy. Stefano Gaborin
Web Design Media Dream Academy Stefano Gaborin stefano.gaborin@above.company www.above.company I Fogli di stile: CSS CSS è l acronimo di Cascading Style Sheets, ovvero fogli di stile a cascata. Il CSS
DettagliIntroduzione all'html
Introduzione all'html WWW (World Wide Web) SGML (Standard Generalized Markup Language) Linguaggi per la descrizione astratta di documenti. HTML (HyperText Markup Language) HTML è un caso particolare di
DettagliContenuto vs Stile: un esempio
I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle pagine. Molto spesso, invece degli appositi tag, si utilizzano le tabelle per posizionare
Dettaglinon è linguaggio di markup formato testo .htm .html interpretando
HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). HTML non è un linguaggio di programmazione! HTML non ha meccanismi per prendere delle decisioni o compiere
DettagliFogli di stile a cascata (CSS)
Fogli di stile a cascata (CSS) November 25, 2010 1 Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML,
DettagliLinguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
DettagliValori e unità di misura (1)
Valori e unità di misura (1) I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio:
DettagliIntroduzione ai Cascading Style Sheets
Introduzione ai Cascading Style Sheets Università di Pisa pievatolo@dsp.unipi.it 6 aprile 2014 Sommario 1 2 CSS esterni CSS interni CSS inline 3 4 Confondere fra struttura e presentazione Il mega
DettagliNavigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Seconda lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Seconda lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 In informatica l'hypertext Markup Language (HTML)
DettagliHTML Terza lezione. Bruno Di Caprio
HTML 4.01 Terza lezione Bruno Di Caprio 0 Lezione precedente FORMATTAZIONE DEL TESTO: ELENCHI: Puntati Numerati Voci di elenco
DettagliHTML 4.01 Seconda lezione
HTML 4.01 Seconda lezione A cura di Ivano Stranieri 0 Lezione precedente Cos è internet browser editor di testo HTML: cos è e cosa non è i marcatori i tag di struttura: DOCTYPE HTML HEAD TITLE META BODY
DettagliHTML 3. I link (collegamenti) L URL. Il tag <A> LINK (àncora) Come collegare documenti
HTML 3 LINK (àncora) Come collegare documenti I link (collegamenti) Semplicemente "cliccando" su una parola, un disegno, un'immagine, si può accedere ad un'altra pagina Web Questo effetto si ottiene con
DettagliINSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato
CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style
DettagliItis Cardano. Introduzione a HTML. Pavia. M. Rivera Itis Cardano Pavia. A.s. 2005-2006
Introduzione a HTML A.s. 2005-2006 M. Rivera Itis Cardano Pavia Itis Cardano Pavia Sommario Introduzione al linguaggio HTML Struttura di un documento HTML Link ipertestuali Immagini e oggetti multimediali
DettagliCSS: CASCADING STYLE SHEETS MODULO 8
CSS: CASCADING STYLE SHEETS MODULO 8 CSS È il linguaggio standard per la stilizzazione di documenti HTML Assolve al compito di informare il browser circa l'aspetto da conferire ai vari tag presenti nel
DettagliCSS / PRIORITA E CASCADING. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / PRIORITA E CASCADING INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / PRIORITA E PRECEDENZA NELLE DEFINIZIONI CSS Gli stili CSS si dicono a cascata perché lo stile
DettagliHTML Guida di riferimento
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 HTML Guida di riferimento La presente dispensa e da utilizzarsi ai soli fini didattici
DettagliI CSS o Fogli di stile. Telematica per le arti e lo spettacolo a.a. 2006/07
I CSS o Fogli di stile Telematica per le arti e lo spettacolo a.a. 2006/07 Quando è nato il web il problema principale era semplicemente quello della gestione dei contenuti, dato anche il basso numero
DettagliHTML Sesta lezione. 29 Marzo di Ivano Stranieri
HTML 4.01 Sesta lezione 29 Marzo 2004 di Ivano Stranieri 0 Lezione precedente Costruire una tabella Raggruppare righe (e colonne) Unire righe e colonne Attributi di e Come utilizzare
DettagliGuida pratica alla creazione di pagine web
Guida pratica alla creazione di pagine web Dopo aver creato una pagina html, muoviamo i primi passi nell'uso del codice. Naturalmente non è necessario conoscere il codice a memoria per creare pagine internet,
DettagliD B M G Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form @2011 Politecnico di Torino 1 Concetti
DettagliProgrammazione Web D B M G. Il linguaggio HTML
Programmazione Web Il linguaggio HTML Il linguaggio HTML Concetti di base Le interfacce utente in HTML I form Le tabelle Il passaggio dei parametri contenuti nei form HTML: HyperText Markup Language Standard
DettagliHTML. Hyper Text Mark-Up Language
HTML Hyper Text Mark-Up Language Presentazione HTML by Maria Grazia Maffucci is licensed under a Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Unported License. Cos è
DettagliI TAG HTML / XHTML Introduzione al webdesign
I TAG HTML / XHTML Introduzione al webdesign I TAG (X)HTML // STRUTTURA dei TAG 2/15 Una pagina web è sostanzialmente un semplice file di testo con estensione.html o.htm che viene interpretato da un browser
DettagliIntroduzione HTML. Maurizio Palesi. Multimedialità - Maurizio Palesi 1
Introduzione HTML Maurizio Palesi Multimedialità - Maurizio Palesi 1 Generalità sull HTML HTML: HyperText Markup Language (linguaggio di marcatura ipertestuale) E il linguaggio che permette di descrivere
DettagliSelettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
Selettori Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola CSS Sintassi valore valore h1 { color: blue;
Dettagli@2011 Politecnico di Torino 1
Concetti di base Programmazione Web Il linguaggio HTML HTML consente di annotare un testo per contrassegnare le parti che lo compongono Le annotazioni sono realizzate tramite i "tag" Visualizzare documenti
DettagliBasi di Dati-X HTML HTML HTML. Corso di Laurea in Informatica Anno Accademico 2013/2014
HTML 2 Basi di Dati-X Corso di Laurea in Informatica Anno Accademico 2013/2014 Hyper Text Markup Language linguaggio testuale per descrivere la struttura di documenti ipertestuali disponibili nel World
Dettaglilayout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
DettagliCSS: Colori, testo, caratteri, liste e link
CSS:, testo, caratteri, liste e link Università di Pisa pievatolo@dsp.unipi.it 13 aprile 2014 Sommario 1 2 Famiglia Dimensioni Corsivo e maiuscoletto Peso: quanto dev essere grasso il grassetto? 3 4 5
DettagliIntroduzione alle Reti e Linguaggio HTML
Reti Le Reti Introduzione alle Reti e Linguaggio HTML Reti: insieme di calcolatori tra loro connessi Le reti hanno il compito di mettere in comunicazione differenti calcolatori I calcolatori posso essere
Dettaglie il Giardino di Zen CSS ESTERNI CSS INTERNI
e il Giardino di Zen Per gli aggiornamenti consultare il sito del World Wide Web Consortium all'indirizzo. http://en.wikipedia.org/wiki/world_wide_web_consortium Inserimento CSS
DettagliDivisions e spans. Esercizio. <html> <head> <title>esempio uso del tag span</title> <style> <!--
Divisions e spans L applicazione degli stili può essere eseguita anche su sezioni di testo tramite i tag div e span. Div suddivide il testo analogamente a come si suddivide un articolo in titolo, sottotitolo,paragrafi,
DettagliHTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. L HTML non è un linguaggio di programmazione
Dettagli