Appunti HTML/CSS base - Gena

Elementi di formattazione: In HTML esistono tag per dare una formattazione di base al nostro

documento nell’ottica di usarlo come se fosse un word processor. Si può fare sia con HTML che

CSS. Esempi di elementi di formattazione sono: Bold text, Important text, Italic text, Emphasized

text, Marked text (mark, evidenziato), Small text, Deleted text, Inserted text (ins, sottolineato

come se fosse aggiunto, come una correzione), Subscripts (sub, più piccolo e in basso),

Superscripts (sup, più piccolo e in alto, come una potenza).

Differenza bold e strong: strong ha una valenza semantica, ovvero dice al browser che quelle

parole sono importanti a livello testuale°° mentre bold non da nessuna extra importanza al testo.

Lo stesso vale per italic e em: em dà un enfasi e valenza semantica al testo°° mentre italic

cambia solo lo stile.

il tag mark evidenza la parola, e il tag del ~cancella la parola con una riga che attraversa la

parola, il tag ins è come <u>, il tag sub serve per scrivere testi pedici e sup quelli apici. Il tag

<q> ovvero quotation, serve per le citazioni ma non modifica lo stile del testo, ha solo un valore

semantico°°. Il tag <blockquote> serve per inserire delle definizioni o citazioni lunghe e viene

~indentato. Si può aggiungere l’attributo cite=“” per il link dal quale si è presa la citazione.

17 Novembre 2015

Lezione 2:

Un altro tag semantico importante è abbr, ovvero abbreviation, che definisce delle abbreviazioni

o degli acronimi; può dare informazioni utili ai browser, ai sistemi di traduzione e ai motori di

ricerca°°. Ex: The <abbr title=“World Health Organisation”>WHO </abbr>

-q tip: rettangolino giallo quando hover su una parola. Il tag address definisce i contatti di un

documento (autore/proprietario), solitamente viene mostrato in italic e il browser aggiunge una line

Il tag cite definisce il titolo di un opera, usually i browsers lo

break prima e dopo l’elemento.

mostrano in italic, ma la sua importanza è semantica poiché è utile soprattutto per far trovare la

pagina dai motori di ricerca °°. Il tag bdo serve per cambiare l’ordine delle lettere, che vengono

2

invertite (ex: this diventa siht). Si può aggiungere l’attributo dir=“” per specificare in che

direzione devono essere scritte le parole; ex: “RTL” [right to left].

Comment tags servono per inserire commenti nell’HTML, e vengono compresi tra <!-- e —!>.

Esistono dei commenti detti condizionali che servono per scrivere condizioni in HTML, per

esempio per scrivere un codice CSS diverso in internet explorer. Ex:

<!-- [if IE 8]> HTML <![endif]-->

^Definisce i tag in modo che siano seguito solo su internet explorer.

Come inserire le immagini in HTML. Si usa it tag img, che è vuoto, e si va a lavorare sugli

attributi: src [source] dove si specifica il percorso dell’immagine che si vuole includere nella

nostra pagina web (le immagini possono essere salvate localmente oppure esterne), size

(width e height) specificata in pixels (senza scriverlo però); è possibile (e consigliato) usare

l’attributo style per specificare width e height ma bisogna aggiungere px dopo il numero (esempio sotto)

oppure con la percentuale; è importante specificare la dimensione dell’immagine perchè

quando il browser carica l’immagine inizia a lasciare lo spazio necessario per l’immagine,

caricando la pagina più velocemente°°, alt consente di inserire il testo alternativo all’immagine,

viene visualizzato quando si hover sull’immagine e si vede il rettangolo giallo oppure se non si

riesce a caricare l’immagine, e può essere una descrizione di questa. Se l’immagine non ha

alcuna importanza, si deve mettere uno spazio vuoto nell’attributo alt. L’alt è importante per le

persone disabili°°.

<img src”immagine.jpg” alt=“W3Schools.com” width=“104” height=“142”>

I formati che si possono usare per le immagini sono .jpg/.jpeg, .gif e .png. Se invece si usa un

immagine che non è sul disco ma sul web, si può usare:

<img src”http://www.immagine.jpg”>

Se si salva l’immagine in una cartella diversa dalla pagina, si deve usare un percorso diverso.

<img src=“nome cartella/immagine.jpg”>

Le dimensioni possono essere espresse in html come sopra, in CSS con il tag:

<… style=“width:#px;height:#px”>

mappatura delle immagini/image maps: a

Si possono usare le immagini come link o fare una

seconda di dove si clicchi si è indirizzati verso link diversi. Questa operazione viene fatta con gli

editor perchè è difficile. Tag map, attributi: name, tag area attributo shape, coords, alt, href.

Per inserire i link nelle pagine si possono fare collegamenti all’interno del nostro sito o esterni. Si

deve usare il tag a [anchor], che deve essere accompagnato dall’attributo href [hypertext

reference]. Quando si passa il mouse su un link, la freccia diventa una piccola manina, il colore

del link cambia. Normalmente i link appariranno sottolineati e blu se non li hai visitati prima,

viola e sottolineati se li hai visitati e rossi e sottolineati quando li clicchi e i link sono attivo.

Tutte queste caratteristiche di default si possono cambiare usando gli style CSS.

I percorsi/pathname possono essere di due tipi:

assoluto (da evitare) perché funziona solo sulla macchina su cui si sta lavorando;

• relativo, più consigliato.

•

Se i due file sono in due cartelle diverse ma le due cartelle sono nella stessa cartella, si scrive:

<a href__=“../cani/pippo.html”>

in cui la chiave è ../, che indica una ~risalita dalla cartella. Un’altra sintassi è /nomecartella/

etc.jpg, in cui la prima slash vuol dire che la cartella è nel main root. Questo può essere utile

perchè in qualsiasi punto del sito io mi trovi è possibile rintracciare la cartella principale del sito.

L’attributo target specific dove si deve aprire un nuovo link. Per aprirlo in una nuova pagina si

deve usare: target=“_blank”

Sconsigliato perchè crea una pagina ex novo e creando una nuova pagina non si ha cronologia

e non è possibile tornare indietro. Inoltre per gli utenti disabili è difficile tornare alla pagina

precedente °°. Per avvertire l’utente si può aggiungere prima di target l’attributo title:

title=“external link”

non va sempre usato, perchè a volte i link sono sufficientemente esplicativi.

3

L’attributo id si usa per creare dei bookmarks all’interno del documento. Non sono mostrati in alcun

modo all’utente. Si inserisce l’elemento a con l’id e poi si crea un link all’elemento che si vuole collegare:

<a id=“tips”>Useful Tips Section</a>

[…]

<a href=“#tips”>Useful Tips Section</a>

oppure da un’altra pagina:

<a href=“www.link.com/html_link.html#tips”>Tips section</a>

Come inserire le tabelle: Le tabelle si inseriscono usando il tag table che si compone con i tag

tr [table row] che si aprono e chiudono per inserire tot righe e td [table data] ovvero le celle.

<table style=“width:100%;height:20%”>

vuol dire che la tabella occupa tutta la pagina. Dentro le tabelle si possono mettere sia testo che

HTML. Per esempio l’attributo border=“#”, o in CSS [border, border-collapse, padding, cell-spacing]:

table, th, td { border: 1px solid black; border-collapse: collapse;}

th,td {padding:15px;}

oppure

table {border-spacing:5px;}

Per aggiungere i titoli nelle tabelle si può usare il tag th [table heading]. Per unire delle celle si

usa l’attributo colspan. Allo stesso modo una cella si può espandere su due righe usando

l’attributo rowspan. Per aggiungere una didascalia alle tabelle si usa il tag caption, prima del tr

o prima della fine della tabella. 18 Novembre 2015

Lezione 3: CSS

CSS significa Cascading Style Sheets. È un linguaggio per esprimere uno stile, una grafica per

file HMTL (che invece riguarda solo il contenuto). È stato deciso di togliere le caratteristiche

stilistiche dall’HTML e trasferirle nel CSS, che le gestisce esternamente, perchè:

prima, se si voleva cambiare lo sfondo, si dovevano cambiare tutte le pagine, mentre con il

• CSS si deve cambiare una sola cosa per cambiare più pagine del sito;

rende le pagine più leggere, perchè le informazioni sono dentro un o più fogli di stile (salvati

• in .css);

quando si apre una pagina html, lo stile CSS viene salvato nelle cache, e se si apre una

• seconda pagina html, il browser non dovrà scaricare nuovamente lo stile perchè è già salvato

ma solo l’html, e quindi si apre la pagina più velocemente;

perchè il web non è fruito solo da computer ma anche da altre macchine, come smartphone, e

• gli sviluppatori fanno diversi stili (per i diversi dispositivi) per la stessa pagina html;

CSS definisce come gli elementi HTML devono essere visti. Il modo più semplice è selezionare il

tag a cui si vuole dare un certo tipo di stile. CSS rule set consiste of selector e declaration block:

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

selector {property:value; property:value;}

➝

declaration {}

Il valore non va scritto con le virgolette se non quando il valore ha degli spazi. I commenti in CSS

si fanno usando /* e */. I CSS selectors permettono di selezionare e manipolare gli elementi HTML;

vengono usati per trovare o selezionare gli elementi HTML basandosi sul loro id, classe, tipo, attributo,

Il selettore id

etc. L’element selector seleziona gli elementi in base al nome dell’elemento [classico].

usa l’attributo id del tag html per trovare uno specifico elemento. Può essere usato solo una

4

volta in una pagina. Se si vuole associare uno stile a questo elemento, lo si fa facendo prendere

il nome dal #. Gli id servono perchè ci sono alcuni elementi nella pagina che sono veramente

univoci (ex: il logo). <p id=“para 1”> Hello </p>

#para1 {text-align: center

colour: blue}

Per identificare più elementi si usano le classi/class il cui nome deve esser preceduto

selector,

da un punto “.”; le classi si richiamano nell’html con l’attributo class:

<strong class=“center”>ciao</strong>

Si possono raggruppare dei selettori (grouping selectors):

h1, h2, p {text-align:center;}

Esistono 3 modi per inserire il CSS nella pagina:

External style sheet, che si va a richiamare in tutte le pagine html che lo richiedono; preferita