HTML + CSS - Lezione 1

HTML + CSSOvvero: come strutturare e formattare come si deve le pagine web.

1/24

LEZIONE 1

Il World Wide Web si basa su una architettura Client-Server

2/24

Ciascuna risorsa su Internet viene identificata da un URL:http://www.sito.com/cartella/file.jpg

Un sito web è un ipertesto fatto di pagine web linkate tra loro

RIPASSINO:

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 chiama

index.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

Ciascun tag ha un significato particolare e può contenere altri tag

6/24

I tag vanno chiusi nell'ordine inverso in cui sono stati aperti:

I marcatori html sono i tag:<p>Esempio di testo</p>

<br />

<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

<h1>...</h1>Rappresenta

una intestazione(abbiamo da h1 ad h6)

11/24

<p>...</p>Rappresenta

un singolo paragrafo

12/24

<img src="pippo.jpg" />

Rappresenta un’immagine

13/24

Attributo src del tag img

<a href="pluto.html">Clicca qui</a>

Rappresenta un link14/24

Attributo href del tag a

<div><a href="http://www.itas-dannunzio.it">

<img src="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 singolo

elemento 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 elementi21/24

Un CSS (Cascade Style Sheet)è un file che contiene un elenco

di regole come questa:

22/24

p { color: red; font-size: 15px; }

Selettore Proprietà

Valore

<head><link type="text/css" rel="stylesheet"

href="pippo.css“ /></head>

23/24

Ma come si associa un file css ad una pagina web? Così:

Grazie dell’attenzione ;-)

Vincenzo [email protected]

HTML + CSS - Lezione 1

Education

Transcript of HTML + CSS - Lezione 1