SlideShare uma empresa Scribd logo
1 de 24
HTML + CSS Ovvero: come strutturare e formattare come si deve le pagine web. LEZIONE 1 1/24
RIPASSINO: Ciascuna risorsa su Internet viene identificata da un URL:http://www.sito.com/cartella/file.jpg Il World Wide Web si basa su una architettura Client-Server Un sito web è un ipertesto fatto di pagine web linkate tra loro 2/24
Le pagine web sono documenti di testo scritti in linguaggio HTML(HyperText Markup Language)che contengono le indicazioni sugli elementi che le compongono 3/24
La home page di solito si chiamaindex.html(.htm .php .asp ...) 4/24
HTML non è un linguaggio di programmazione,ma un linguaggio di contrassegno, o di marcatura,che definisce la struttura di una pagina web 5/24
I marcatori html sono i tag: <p>Esempio di testo</p> <br /> Ciascun tag ha un significato particolare e può contenere altri tag I tag vanno chiusi nell'ordine inverso in cui sono stati aperti: 6/24
<html>	<head>		<title>Prima pagina</title>	</head>	<body>		<div>			<h1>Benvenuti!</h1>			<p>La prima pagina web di 			Giuseppe Rossi</p>		</div>	</body></html> 7/24
<title>...</title>Definisce il titolo di una pagina web 8/24
<div>...</div>Rappresenta un'area della pagina web: 9/24
10/24
<h1>...</h1>Rappresenta una intestazione(abbiamo da h1 ad h6) 11/24
<p>...</p>Rappresenta un singolo paragrafo 12/24
Attributo src del tagimg <imgsrc="pippo.jpg" />Rappresenta un’immagine 13/24
Attributo href del taga <a href="pluto.html">Clicca qui</a>Rappresenta un link 14/24
<div>	<a href="http://www.itas-dannunzio.it">		<imgsrc="logo.jpg” />	</a>	<p>		Clicca sul logo per visitare il sito.	</p></div> 15/24
<ul>...</ul>Rappresenta una lista non ordinatadi elementi 16/24
<li>...</li>Rappresenta un singoloelemento di una lista 17/24
<div>	<h2>Le province del FVG sono:</h2>	<ul>		<li>Gorizia</li>		<li>Pordenone</li>		<li>Trieste</li>		<li>Udine</li>	</ul></div> 18/24
+  CSS 19/24
Anche CSS non è un linguaggio di programmazione,ma è un linguaggio che consente di formattare le pagine web 20/24
Formattare?!Definire le dimensioni, il posizionamento, il colore, i bordi, lo sfondo, i margini esterni ed interni, etc.di una pagina web e dei suoi singoli elementi 21/24
Un CSS (Cascade Style Sheet)è un file che contiene un elenco di regole come questa: p { color: red; font-size: 15px; } Valore Proprietà Selettore 22/24
Ma come si associa un file css ad una pagina web? Così: <head>	<link type="text/css" rel="stylesheet" href="pippo.css“ /></head> 23/24
Grazie dell’attenzione ;-) Vincenzo Caico vincenzocaico@gmail.com

Mais conteúdo relacionado

Mais procurados

HTML & CSS: Chapter 03
HTML & CSS: Chapter 03HTML & CSS: Chapter 03
HTML & CSS: Chapter 03Steve Guinan
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSdanpaquette
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLandreajose13
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulationborkweb
 
Lezione InternetWorking: il routing
Lezione InternetWorking: il routingLezione InternetWorking: il routing
Lezione InternetWorking: il routingLuca Matteo Ruberto
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyParadigma Digital
 
Web Design 101
Web Design 101Web Design 101
Web Design 101vegdwk
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript TutorialDHTMLExtreme
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowPrabhdeep Singh
 
HTML Link - Image - Comments
HTML  Link - Image - CommentsHTML  Link - Image - Comments
HTML Link - Image - CommentsHameda Hurmat
 

Mais procurados (20)

HTML & CSS: Chapter 03
HTML & CSS: Chapter 03HTML & CSS: Chapter 03
HTML & CSS: Chapter 03
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
 
BasicHTML
BasicHTMLBasicHTML
BasicHTML
 
Html images
Html imagesHtml images
Html images
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
Lezione InternetWorking: il routing
Lezione InternetWorking: il routingLezione InternetWorking: il routing
Lezione InternetWorking: il routing
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
HTML
HTMLHTML
HTML
 
Html tables
Html tablesHtml tables
Html tables
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
 
Basic JavaScript Tutorial
Basic JavaScript TutorialBasic JavaScript Tutorial
Basic JavaScript Tutorial
 
HTL(Sightly) - All you need to know
HTL(Sightly) - All you need to knowHTL(Sightly) - All you need to know
HTL(Sightly) - All you need to know
 
HTML Link - Image - Comments
HTML  Link - Image - CommentsHTML  Link - Image - Comments
HTML Link - Image - Comments
 
Flexbox
FlexboxFlexbox
Flexbox
 

Semelhante a HTML + CSS - Lezione 1

Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Giorgio Carpoca
 
Html e CSS ipertesti e siti web 4.5
Html e CSS   ipertesti e siti web 4.5Html e CSS   ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5orestJump
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008ninam87
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008alexzaffi86
 
Html + CSS - Lezione 2
Html + CSS - Lezione 2Html + CSS - Lezione 2
Html + CSS - Lezione 2Vincenzo Caico
 
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Giuseppe Vizzari
 
I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)Diego La Monica
 
Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)nois3lab
 
I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)Diego La Monica
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Matteo Magni
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoriaDiego La Monica
 
Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internetdadahtml
 
Html5 - classi prime - multimedia
Html5 - classi prime - multimediaHtml5 - classi prime - multimedia
Html5 - classi prime - multimediaMatteo Ziviani
 

Semelhante a HTML + CSS - Lezione 1 (20)

Presentazione Corso - Parte 1
Presentazione Corso - Parte 1Presentazione Corso - Parte 1
Presentazione Corso - Parte 1
 
Web writing 2
Web writing 2Web writing 2
Web writing 2
 
Dal Click Al Web Server
Dal Click Al Web ServerDal Click Al Web Server
Dal Click Al Web Server
 
Html e CSS ipertesti e siti web 4.5
Html e CSS   ipertesti e siti web 4.5Html e CSS   ipertesti e siti web 4.5
Html e CSS ipertesti e siti web 4.5
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008
 
Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008Lab Web Prof.Di Blasi 2008
Lab Web Prof.Di Blasi 2008
 
Presentazione wicket
Presentazione wicketPresentazione wicket
Presentazione wicket
 
Lezione HTML
Lezione HTMLLezione HTML
Lezione HTML
 
Html + CSS - Lezione 2
Html + CSS - Lezione 2Html + CSS - Lezione 2
Html + CSS - Lezione 2
 
HTML (+ DOM) + CSS
HTML (+ DOM) + CSSHTML (+ DOM) + CSS
HTML (+ DOM) + CSS
 
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
Breve introduzione alle tecnologie HTML5 + (DOM) + CSS
 
Fogli di stile CSS
Fogli di stile CSSFogli di stile CSS
Fogli di stile CSS
 
Html
HtmlHtml
Html
 
I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)I Linguaggi Del Web (1° Giornata)
I Linguaggi Del Web (1° Giornata)
 
Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)Ancora anatomia, le pagine HTML(5)
Ancora anatomia, le pagine HTML(5)
 
I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)I linguaggi del web - seconda edizione (1° giornata)
I linguaggi del web - seconda edizione (1° giornata)
 
Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner Html e Css - 1 | WebMaster & WebDesigner
Html e Css - 1 | WebMaster & WebDesigner
 
Corso HTML per l'editoria
Corso HTML per l'editoriaCorso HTML per l'editoria
Corso HTML per l'editoria
 
Introduzione a Internet
Introduzione a InternetIntroduzione a Internet
Introduzione a Internet
 
Html5 - classi prime - multimedia
Html5 - classi prime - multimediaHtml5 - classi prime - multimedia
Html5 - classi prime - multimedia
 

Mais de Vincenzo Caico

Html + CSS - Lezione 4
Html + CSS - Lezione 4Html + CSS - Lezione 4
Html + CSS - Lezione 4Vincenzo Caico
 
HTML + CSS - Lezione 3
HTML + CSS - Lezione 3HTML + CSS - Lezione 3
HTML + CSS - Lezione 3Vincenzo Caico
 
10 consigli utili per una buona presentazione
10 consigli utili per una buona presentazione10 consigli utili per una buona presentazione
10 consigli utili per una buona presentazioneVincenzo Caico
 
Alcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) città
Alcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) cittàAlcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) città
Alcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) cittàVincenzo Caico
 

Mais de Vincenzo Caico (7)

Grafica bitmap
Grafica bitmapGrafica bitmap
Grafica bitmap
 
Html + CSS - Lezione 4
Html + CSS - Lezione 4Html + CSS - Lezione 4
Html + CSS - Lezione 4
 
HTML + CSS - Lezione 3
HTML + CSS - Lezione 3HTML + CSS - Lezione 3
HTML + CSS - Lezione 3
 
Il linguaggio HTML
Il linguaggio HTMLIl linguaggio HTML
Il linguaggio HTML
 
10 consigli utili per una buona presentazione
10 consigli utili per una buona presentazione10 consigli utili per una buona presentazione
10 consigli utili per una buona presentazione
 
Care_Cassandre Promo
Care_Cassandre PromoCare_Cassandre Promo
Care_Cassandre Promo
 
Alcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) città
Alcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) cittàAlcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) città
Alcamo.it e Gorizia Oggi: quando il blog urbano arriva in (due diverse) città
 

Último

No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...Roberto Scano
 
Lo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice ImpressLo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice ImpressSalvatore Cianciabella
 
Ticonzero news 149.pdf, maggio 2024, content
Ticonzero news 149.pdf, maggio 2024, contentTiconzero news 149.pdf, maggio 2024, content
Ticonzero news 149.pdf, maggio 2024, contentPierLuigi Albini
 
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCOa scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCODamiano Orru
 
TeccarelliLorenzo-Leformeallotropichedelcarbonio.pptx
TeccarelliLorenzo-Leformeallotropichedelcarbonio.pptxTeccarelliLorenzo-Leformeallotropichedelcarbonio.pptx
TeccarelliLorenzo-Leformeallotropichedelcarbonio.pptxteccarellilorenzo
 
MyEdu Club: il magazine di MyEdu dedicato ai genitori
MyEdu Club: il magazine di MyEdu dedicato ai genitoriMyEdu Club: il magazine di MyEdu dedicato ai genitori
MyEdu Club: il magazine di MyEdu dedicato ai genitorimarketing983206
 
TeccarelliLorenzo-testoargomentativo.docx
TeccarelliLorenzo-testoargomentativo.docxTeccarelliLorenzo-testoargomentativo.docx
TeccarelliLorenzo-testoargomentativo.docxteccarellilorenzo
 
AccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domaniAccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domaniRoberto Scano
 
Powerpoint tesi di laurea
Powerpoint tesi di laurea Powerpoint tesi di laurea
Powerpoint tesi di laurea Valentina Ottini
 
Ostia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'EuropaOstia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'EuropaMarina Lo Blundo
 
Amburgo la città più smart della Germania
Amburgo la città più smart della GermaniaAmburgo la città più smart della Germania
Amburgo la città più smart della Germaniasofiaganzaroli9
 
Santa Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptx
Santa Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptxSanta Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptx
Santa Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptxMartin M Flynn
 

Último (12)

No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
No. Nessuno strumento automatico verifica o ripara l’accessibilità di un sito...
 
Lo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice ImpressLo Schema Diapositiva con LibreOffice Impress
Lo Schema Diapositiva con LibreOffice Impress
 
Ticonzero news 149.pdf, maggio 2024, content
Ticonzero news 149.pdf, maggio 2024, contentTiconzero news 149.pdf, maggio 2024, content
Ticonzero news 149.pdf, maggio 2024, content
 
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCOa scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
a scuola di biblioVerifica: come utilizzare CHATBOT secondo UNESCO
 
TeccarelliLorenzo-Leformeallotropichedelcarbonio.pptx
TeccarelliLorenzo-Leformeallotropichedelcarbonio.pptxTeccarelliLorenzo-Leformeallotropichedelcarbonio.pptx
TeccarelliLorenzo-Leformeallotropichedelcarbonio.pptx
 
MyEdu Club: il magazine di MyEdu dedicato ai genitori
MyEdu Club: il magazine di MyEdu dedicato ai genitoriMyEdu Club: il magazine di MyEdu dedicato ai genitori
MyEdu Club: il magazine di MyEdu dedicato ai genitori
 
TeccarelliLorenzo-testoargomentativo.docx
TeccarelliLorenzo-testoargomentativo.docxTeccarelliLorenzo-testoargomentativo.docx
TeccarelliLorenzo-testoargomentativo.docx
 
AccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domaniAccessibleEU: oggi per l’accessibilità di domani
AccessibleEU: oggi per l’accessibilità di domani
 
Powerpoint tesi di laurea
Powerpoint tesi di laurea Powerpoint tesi di laurea
Powerpoint tesi di laurea
 
Ostia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'EuropaOstia antica da porta di Roma a porta d'Europa
Ostia antica da porta di Roma a porta d'Europa
 
Amburgo la città più smart della Germania
Amburgo la città più smart della GermaniaAmburgo la città più smart della Germania
Amburgo la città più smart della Germania
 
Santa Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptx
Santa Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptxSanta Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptx
Santa Gemma Galgani, Fiore di Lucca, mistica italiana 1887-1903.pptx
 

HTML + CSS - Lezione 1