Anteprima
Vedrai una selezione di 7 pagine su 29
Appunti per esame di Fondamenti di informatica II Pag. 1 Appunti per esame di Fondamenti di informatica II Pag. 2
Anteprima di 7 pagg. su 29.
Scarica il documento per vederlo tutto.
Scarica
Appunti per esame di Fondamenti di informatica II Pag. 6
Anteprima di 7 pagg. su 29.
Scarica il documento per vederlo tutto.
Scarica
Appunti per esame di Fondamenti di informatica II Pag. 11
Anteprima di 7 pagg. su 29.
Scarica il documento per vederlo tutto.
Scarica
Appunti per esame di Fondamenti di informatica II Pag. 16
Anteprima di 7 pagg. su 29.
Scarica il documento per vederlo tutto.
Scarica
Appunti per esame di Fondamenti di informatica II Pag. 21
Anteprima di 7 pagg. su 29.
Scarica il documento per vederlo tutto.
Scarica
Appunti per esame di Fondamenti di informatica II Pag. 26
1 su 29
D/illustrazione/soddisfatti o rimborsati
Disdici quando
vuoi
Acquista con carta
o PayPal
Scarica i documenti
tutte le volte che vuoi
Estratto del documento

TAG

COME SI SCRIVE

Titolo barra browser

<title> esempio </title>

A capo

<br>

Doc. HTML

<html> ........ </html>

Intestazione

<head>.........</head>

Corpo documento

<body> ........ </body>

Linee orizzontali

<hr>

Titoli

<h1> esempio </h1>

<h2> esempio </h2>

<h3> esempio </h3>

Paragrafo

<p> ....... </p>

Caratteri speciali

<&agrave;> à

<& - lettera – tipo di accento grave/acute;>

Oppure <& - # - numero del carattere;>

Liste non ordinate

  • Esempio 1
  • Elemento lista 2

Liste ordinate

  1. Elemento lista 1
  2. Elemento lista 2

Corsivo

<em> esempio </em>

Grassetto

<strong> esempio </strong>

Titoli di cose citate

<cite> esempio </cite>

Codici

<code> esempio </code>

Commenti che servono a chi scrive il

documento e che non vengono visualizzati

<! -- commento -- >

Informazioni nella barra del browser

<meta name= "Keywords" content= esempio>

<meta name= "description" content=

esempio>

<meta name= "author" content=esempio>

<meta name= "content-type"

content=esempio>

Specifica versione di HTML usata

<!DOCTYPE html>

Immagini

<img src="[/pathname o URL dell’immagine da

inserire]">

Attributi immagini

  • Si inseriscono nel tag immagine
  • alt=test(testo alternativo all’immagine) – viene
  • visualizzato quando l’utente posiziona il
  • puntatore sull’immagine. Utile per rendere il
  • sito accessibile anche agli utenti non vedenti!
  • height=numero(altezza in pixel)
  • width=numero(larghezza in pixel)

Link

<a href= “URL o servizio che viene attivato”> hotword </a>

Mail

<a href= “mailto:indirizzo email”> hotword </a>

Link per punti nella stessa pagina

  • Si individua il punto della pagina con <a name= “nome sezione”> testo </a>
  • Si specifica poi a inizio della pagina il tasto con cui saltare al punto <a href= “#nome sezione”> nome della sezione </a>

Link immagine

Per far sì che l’immagine diventi un link basta sostituire all’hotword il tag dell’immagine che abbiamo inserito.

Tabella tag contenitore

<table> Tag tabella </table>

Riga tabella

Per ogni riga della tabella <tr> contenuto della riga </tr>

Cella dati

All’interno del tag tr

  • <td> contenuto cella </td>
  • <th> intestazione riga </th>

Didascalia tabella

Si inserisce subito dopo il tag <table>

<caption> titolo tabella </caption>

Valori di scope per tabelle accessibili

  • col= le celle dati dell’intestazione sono le rimanenti della colonna della cella di intestazione.
  • row= le celle dati dell’intestazione sono le rimanenti della riga della cella di intestazione.
  • colgroup= le celle dati sono le del raggruppamento di colonne a cui appartiene la cella di intestazione.
  • colspan= per tabelle irregolari, riferito alle colonne.

.importante{ ... }

Pseudo - classe

Per i link con il selettore <a>

a:link {color:red;} (per i link non ancora visitati)

a:visited {color:blue;} (per i link visitati)

a:hover {color:green;} (per il puntatore sopra il link)

a:active {color:purple} (per il clic sul link)

Selettore per un singolo elemento

Da specificare prima in HTML all'interno delle <> dell'elemento.

id="nome elemento"

Applicare caratteristiche ad un blocco

<div>

</div>

Se associamo una caratteristica ad una parte del blocco questa viene applicata a tutto il resto racchiuso nel tag <div>.

Applicare caratteristiche ad una linea

<span> ... </span>

Stili del bordo

dotted

dashed

solid

double

groove

ridge

inset

outset

A pag 81 ci sono disegnati.

Per orientamento menù

display: inline;

display:block;

HTML

  • Come detto spiega oltre alla struttura il ruolo dei contenuti testuali e quindi la loro visualizzazione:
    • titolo
    • paragrafo
    • tabella
    • ecc…
  • Le scritte in HTML rientrano nei testi semplici.
  • Testo semplice: non è formattato, non ha caratteristiche ma è solo una sequenza di caratteri, cifre e simboli.
  • Per scrivere un testo basta utilizzare editor di testo come:
    • Blocco note Windows
    • Text Pad
  • Programmi come Word invece ti visualizzano il testo formattato e ti permettono di aggiungere visuali caratteristiche.
  • Il linguaggio per HTML allora è un Markup Language, un linguaggio che aggiunge annotazioni sul ruolo del contenuto del testo (metafora tipografo sulle slides).
  • Chi scrive in HTML e vuole visualizzare la formattazione ne dovrà pur forza ricorrere ad un browser.
  • Questo linguaggio è regolato da regole su:
    • quali annotazioni si possono scrivere
    • come si devono scrivere
    • come si devono inserire
  • Ne esiste una versione standard e version aggiornate.
  • Proprio per via dei vari aggiornamenti nel linguaggio anche i browser dovranno aggiornarsi per poter sempre visualizzare l'informazione.
  • Il W3C si occupa di aggiornare sulle novità del linguaggio in modo che i browser si adeguino.

compressione senza perdite di dati e può comporre milioni di colori come il JPG.

Ottimo anche per immagini in trasparenza.

  • All’immagine si possono poi aggiungere gli attributi (tag, foglio), slides gi.
  • Slide 62 gi e la spiegazione di come create un sito e immagini
  • Un’immagine può essere utilizzata come sfondo di una pagina web.
  • Essa viene ripetuta fino a quando non riempirà tutto lo spazio.

CSS

  • Un foglio css è un foglio separato da quello HTML in cui specifico quindi non più la struttura del mio sito ma lo stile estetico.
  • Le regole di stile che vado a specificare sono composte da due cose:
    • Selettore = determina a quali elementi degli HTML verrà applicato
    • Dichiarazione = specifica le proprietà di stile. Vi possono essere più dichiarazioni assieme ognuna con il proprio valore, scritto tra virgoletta.

Selettore { proprietà1: valore1; proprietà2: valore2; }

  • Il selettore di solito è il nome di un tag HTML.
  • Lo stile può essere, rispetto a un documento HTML:
    • Interno = vengono scritte nell'head del documento HTML
    • Esterno = vengono scritte in un foglio separato collegato al foglio HTML. Questo è il metodo più veloce perché, grazie ai collegamenti, possiamo modificare più pagine contemporaneamente.
  • Quando si crea un foglio css esterno bisogna specificare nell'head delle pagine HTML a cui verrà applicato il suo tag link.

(Link sul foglio)

Dettagli
Publisher
gisellapiccolis
A.A. 2018-2019
29 pagine
SSD Scienze matematiche e informatiche INF/01 Informatica
I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher gisellapiccolis di informazioni apprese con la frequenza delle lezioni di fondamenti di informatica e programmazione II e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Università degli studi di Torino o del prof Patti Viviana.