Appunti Informatica

Esame Elementi di informatica e reti di calcolatori

Facoltà Design

Dal corso del Prof. Cugola Gianpaolo

Università Politecnico di Milano

Appunto

3,5 / 5 (2)

Scarica

Appunti sulla prima lezione del corso di Elementi di informatica e reti di calcolatori e su tutta la parte pratica (HTML, CSS, JAVASCRIPT) basati su appunti personali del publisher presi alle lezioni del prof. Cugola dell’università degli Studi Politecnico di Milano - Polimi. Scarica il file in formato PDF!

…continua

Anteprima

Vedrai una selezione di 3 pagine su 10

Anteprima di 3 pagg. su 10.
Scarica il documento per vederlo tutto.

Scarica

Disdici quando
vuoi

Acquista con carta
o PayPal

Scarica i documenti
tutte le volte che vuoi

Estratto del documento

HTML

Linguaggio per descrivere pagine web.

“contrassegno testuale”, non programmazione

-----> è un file di testo che contiene due classi di informazioni:

1) CONTENUTO: il testo vero e proprio del documento, da solo non garantisce la leggibilità.

2) SISTEMA DI CONTRASSEGNO (MARKUP TAGS): aggiuntive al contenuto, determinano la modalità di presentazione.

Html tags: parole chiave tra < > = <...> contenuto visibile sulla pagina </...>

tag fine tag

Un documento html è composto da elementi (che a loro volta possono essere nidificati) racchiusi tra 2 tag.

contenuto

Il di un elemento è la stringa testuale contenuta tra i due tag.

tag iniziale

<html> elemento

<head>

elemento contenuto

<title> Pagina1 </title>

</head>

<body> la mia prima pagina </body>

</hmtl>

<head>....</head> informazioni sulla pagina rilevanti al browser

<title>....</title> titolo della pagina

<body>....</body> contenuto della pagina

HEADING (o INTESTAZIONI): utilizzati per definire intestazioni a diversi livelli

<h1>....</h1> Titolo più grande Titolo

(es. <h1>Titolo</h1> -------> nella pagina si vedrà: )

<h2>....</h2> più piccolo di h1 Titolo

(es. <h2>Titolo</h2> -------> nella pagina si vedrà: )

a seguire fino ad Titolo più piccolo

------>i doversi browser li possono visualizzare con diverse variazioni di dimensione o stile. Sono importanti perchè sono

usati dai motori di ricerca per indicizzare la struttura e il contenuto delle pagine web.

PARAGRAFI

il browser non visualizza gli spazi multipli e i “new line”(=”a capo”). Tutto il documento viene riportato su una sola riga e

riformattato in base alle dimensioni della finestra.

<p>....</p> divide il documento in paragrafi (aggiunge mezza rica di spazio tra uno e l’altro)

<br> va a capo (non deve essere chiuso)

es.

<html>

<body> paragrafo 1

<p> paragrafo uno </p> paragrafo 2

<p> paragrafo due </p>

</body>

</html>

es 2.

<html>

<body> paragrafo 1

<p> paragrafo uno </p> <br>

<p> paragrafo due </p> paragrafo 2

</body>

</html>

FORMATTAZIONE: stili fisici

<b>....</b> bold

<i>....</i> italic

<sup>....</sup> apice

<sub>....</sub> pedice

stili logici (rispondono alla domanda: che funzione ha quella parte di testo?)

<em>....</em> testo enfatizzato

<strong>....</strong> testo in enfasi forte

<code>....</code> testo con un pezzo di codice

HYPERLINK (LINK)

è l’elemento che più ha contribuito all’espansione del World Wide Web. Permette:

- navigare dal documento corrente ad un altro

- navigare tra due punti dello stesso documento

- adoperare altri servizi (ad esmpio mail,...)

<a href=”url”>testo visualizzato sulla pagina</a>

<a name=”label”>testo visualizzato sulla pagina</a> ----> mi porta ad un punto del documento

es.

<html> label

<body>

<h2> <a name=”articolo”> Articolo 1 </a> </h2>

menù

<aside>

<a href =”#articolo”> vai all’ Artcolo 1 </a>

</aside> richiamo label

</body>

</html>

TABELLE <table>

<tr>

<th> header 1 </th> colonne di

<th> header 2 </th> intestazione

definisce </tr>

le righe <tr>

<td> row 2, cell 2 </td> colonne

</tr> standard

</table>

ELENCHI 1. ...

<ol>...</ol> elenchi ordinati 2. ...

<ul>...</ul> elenchi non ordinati 3. ...

...

<li>...</li> elementi dell’elenco ...

...

es.

<html>

<body>

<ol> 1. carota

<li> carota </li> 2. cipolla

<li> cipolla </li>

</ol>

</body>

</html>

MODULI

la pagina può definire un modulo per selezionare informazioni dell’utente

<input type=”text”/> casella di testo

<input type=”submit”/> pulsante di invio

COMMENTI

usati per rendere il codice più leggibile, non sono visti dall’utente finale

(es. )

html è un linguaggio formale, cioè:

- è sempre possibile decidere se una “frase” fa parte del linguaggio (decidibilità)

- è possibile determinare in modo univoco il significato di una frase

Distinguiamo in:

SEMANTICA: insieme delle regole che permettono di dare un significato alle frasi del linguaggio

SINTASSI: insieme delle regole che permettono di costruire frasi corrette ----> descritta attraverso una grammatica (sono

definiti dei simboli - i tag- e delle regole sintattiche - prima <...> poi </...>-)

HTML NON è UN LINGUAGGIO DI PROGRAMMAZIONE

CLASS e DIV delimita generiche sezioni di contenuto (definite con class)

classifica più finemente i tag html per applicare formati in modo selettivo

<div + class> si definiscono delle marcature personalizzate per il contenuto

sottotipo dell’elemento h2

es. (magari la mia pagina avrà 2 h2

<html> con caratteristiche diverse in css)

<body>

<div class=”contorno”><p> Ciao </p> </div> ho bisogno di applicare le

<h2> ok </h2> caratteristiche della classe “cotorno”

<div class=”contorno”><p> Ciao 2</p> </div> ha più tag del mio documento

</body>

</html>

----->le proprietà stilistiche delle classi devono essere definite a parte

es. come faccio 2 colonne di testo?

<html> mi serve per la formattazione

<body> successiva di tutto il testo

<div id=”testo”> (un id può essere inserito una sola volta nella pagina)

<p> testo colonna </p>

</div> mi permetterà di dare successivamente

<div class=”colonna2”> due posizioni diverse alle colonne

<p> testo colonna </p> (una a destra e una a sinistra)

</div>

<body>

</html>

<nav>....</nav>barrà menù

<aside>....</aside> barra laterale

<footer>....</footer> piè di pagina

<span>....</span> didascalia dell’immagine

<center>....</center> per centrare nella pagina

es.

<html>

<body> se non metto center il titolo

<center> <h1>Titolo</h1></center> sta a sinistra

</body>

</html>

CSS

Cascading: con questo meccanismo possiamo differenziare in maniera agevole caratteristiche generali e specifiche di una

stessa pagina. dichiarazione

es. h1 { color: blue ; font-size: 12 px}

selettore valore

(il tag html cui mi riferisco)

proprietà

Come collegare CSS alla pagina html?

1) inserisco le direttive css nel tag che deve essere modificato

es.

<p style=”color. red”> testo paragrafo </p>

attributo utilizzabile per

tutti i tag html 4 e 5

<style>

2) sfruttare il tag di html (avremo quindi un codice embedded nella pagina html)

es.

<html>

<head>

p {color: red;}

</style>

</head>

</html>

3) per definire il css in un file diverso usiamo ancora il tag <style>

4) con il tag <link>

ELEMENTO DIV: permetterà di applicare una regola solo alle sezioni volute.

es. css

html <html>

<body> div { border: solid; border-width: thin}

<h1> testo </h1> tutta questa parte sarà contornata </style>

<p> mio testo </p> come specificato nel css </html>

</div>

</body>

</html>

ID: come le classi ma applicabili ad un solo tag alla volta. Nel css si richiamano con #nome dell’id

es. css

html #test {color: red}

<h2 id=”test”>titolo</h2>

magari ho bisogno che questo h2

sia diverso dagli altri h2 presenti

nella pagina

Le direttive css associate ad un tag html vengono ereditate sui tag contenuti.

es.

<html>

<h1> titolo </h1> sarà tutto rosso

<p> testo </p>

</body>

</html>

(vale sempre la direttiva specifica più vicina)

La class nel css viene richiamata con .

es. css

html .test {color: red}

<h2 class=”test”> titolo</h2>

PSEUDOCLASSI

servono per specificare il contenuto di un tag non in assoluto, ma solo in uno dei suoi possibili stati.

a:link {...} apparenza normale

a:visited {...} apparenza ndopo che è stato visitato

a:hover {...} apparenza al passaggio del mouse

a:actives {...} apparenza mentre si clicca

BOX MODEL circonda contenuto e padding

top border quando impostiamo larghezza e altezza di un elemento

content con WIDTH e HEIGHT, si settano le dimensioni

del contenuto

left right

padding

margin

bottom

Border -style: dotted

dashed se non settata non viene applicata nessuna proprietà

solid

double

Border-width: thin

medium thin

...... px

Border-color : ......

Margin - top: .... px

bottom: .... px

left: .... px

right: .... px

Padding - top: .... px

bottom: .... px

left: .... px

right: .... px

FLOAT: gli elementi sono spostati solo a destra o a sinistra, non in verticale

float: left

right

es. ho due colonne di testo e voglio che siano affiancate:

html css saranno spostate

<p id=”colonna1”> testo colonna </p> #colonna1 {float:left} una a destra e una a sinistra

<p id=”colonna2”> testo colonna </p> #colonna2 {float:right}

----->è possibile raggruppare diversi elementi per semplificare il codice.

es.

h1,h2,h3 { ......... }

PROPRIETA’:

SFONDI

Background-color: nome col

Dettagli

Publisher

Scrici

A.A. 2014-2015

10 pagine

3 download

SSD Scienze matematiche e informatiche INF/01 Informatica

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher Scrici di informazioni apprese con la frequenza delle lezioni di Elementi di informatica e reti di calcolatori e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Politecnico di Milano o del prof Cugola Gianpaolo.