Laboratorio di Informatica 3 Anno Accademico 2019-2020

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

Il linguaggio HTML

Strumenti di sviluppo

HTML e CSS

Libri di testo consigliati:

Laura Lemay, Rafe Colburn

HTML & CSS

McGraw-Hill Italia. (2007)

ISBN 978-88-386-4478-8

Google Sites

Editing HTML in Google Sites

Google Sites fornisce degli strumenti di editing in HTML

per:

• Includere nel sito delle componenti i cui contenuti sono

formattati in HTML

• Raffinare l’aspetto delle pagine realizzate con gli strumenti

WYSIWYG

«Caselle HTML» in Google Sites

La Casella HTML è un gadget di Google Sites che consente di includere in

una pagina web, un riquadro il cui contenuto è impaginato utilizzando il

linguaggio HTML (un sotto insieme).

Per inserire una Casella HTML, occorre posizionarsi nel testo della pagina

nel punto in cui questa deve apparire.

«Caselle HTML» in Google Sites

Aprire il menù inserisci e selezionare il gadget Casella HTML.

«Caselle HTML» in Google Sites

La casella viene posizionata nella pagina secondo le dimensioni e

l’allineamento scelti. Selezionando la casella si ottiene al suo menù rapido in

cui è possibile modificare queste scelte e immetere il contenuto.

«Caselle HTML» in Google Sites

L’editor è molto semplice e offre una

limitata

assistenza

all’utente

visualizzano i TAG con un colore

diverso dal contenuto ed evidenziando

quest’ultimo

con

un

rientro

del

margine sinistro.

E’ possibile stabilire se la casella debba

avere

una

barra

di

scorrimento

autonoma.

«Caselle HTML» in Google Sites

Per visualizzare il contenuto della casella, è necessaria salvare per uscire

dall’editor di casella e poi utilizzare le funzioni di anteprima della pagina

Web che contiene la casella.

Modificare l’HTML delle pagine di Google Sites

L’apparenza del testo inserito nelle pagine (blocchi-contenuto) di

Google Sites con gli strumenti WYSIWYG, può essere modificata

intervenendo sul codice HTML che la descrive, vale a dire l’HTML che

Google Sites genera «traducendo» le azioni compiute dall’autore.

Modificare l’HTML delle pagine di Google Sites

Per passare dall’editor WYSIWIG a quello HTML occorre utilizzare

l’apposito controllo sulla barra degli strumenti.

Modificare l’HTML delle pagine di Google Sites

Nell’editor HTML compare il codice «sottostante» alla pagina WEB che si stava editando. Per terminare l’inserimento occorre premere il bottone aggiorna.

Il contenuto è salvato, e l’ambiente fa ritorno all’editor principale.

Modificare l’HTML delle pagine di Google Sites

L’editor HTML offre anche uno strumento «Anteprima» per verificare in tempo reale, l’aspetto della pagina.

Komodo Edit

Scrivere documenti HTML con Komodo Edit

Komodo Edit

© 2007 by ActiveState Inc.

https://www.activestate.com/products/komodo-edit/

• Editor testuale

• Assistenza sintattica

• Multi-linguaggio

• Funzionalità di project management

Scrivere documenti HTML con Komodo Edit

Creare un file singolo.

Lanciare Komodo Edit e selezionare la directory di lavoro

Scrivere documenti HTML con Komodo Edit

Creare un file singolo.

Lanciare Komodo Edit e selezionare la directory di lavoro

Scrivere documenti HTML con Komodo Edit

Creare un file singolo.

Lanciare Komodo Edit e selezionare la directory di lavoro Creare un nuovo file scegliendo tra una libreria di modelli.

Scrivere documenti HTML con Komodo Edit

Creare un file singolo.

Lanciare Komodo Edit e selezionare la directory di lavoro Creare un nuovo file scegliendo tra una libreria di modelli. Selezionare il modello HTML

Scrivere documenti HTML con Komodo Edit

Creare un file singolo.

Lanciare Komodo Edit e selezionare la directory di lavoro Creare un nuovo file scegliendo tra una libreria di modelli. Selezionare il modello HTML Nella sezione di editing, compare un file HTML minimale già impostato con alcuni tag.

Scrivere documenti HTML con Komodo Edit

Creare un file singolo.

Lanciare Komodo Edit e selezionare la directory di lavoro Creare un nuovo file scegliendo tra una libreria di modelli. Selezionare il modello HTML

Nella sezione di editing, compare un file HTML minimale già impostato con alcuni tag.

Inserire il codice HTML nelle sezioni del documento e salvare.

Scrivere documenti HTML con Komodo Edit

Creare un file singolo.

Scrivere documenti HTML con Komodo Edit

Creare «progetto» composto da più file.

Lanciare Komodo Edit Creare un nuovo progetto

Scrivere documenti HTML con Komodo Edit

Creare «progetto» composto da più file.

Lanciare Komodo Edit

Creare un nuovo progetto Creare/selezionare la directory di lavoro del progetto

Scrivere documenti HTML con Komodo Edit

Creare «progetto» composto da più file.

Lanciare Komodo Edit Creare un nuovo progetto Creare/selezionare la directory di lavoro del progetto

Dal browser di progetto

selezionare il progetto e aggiungere un nuovo file

Scrivere documenti HTML con Komodo Edit

Creare «progetto» composto da più file.

Lanciare Komodo Edit

Creare un nuovo progetto Creare/selezionare la directory di lavoro del progetto

Dal browser di progetto

selezionare il progetto e aggiungere un nuovo file

Scegliere il template del file e…

Scrivere documenti HTML con Komodo Edit

Creare «progetto» composto da più file.

Lanciare Komodo Edit Creare un nuovo progetto Creare/selezionare la directory di lavoro del progetto

Dal browser di progetto

selezionare il progetto e aggiungere un nuovo file

Scegliere il template del file e… Impostare il nome del file.

Scrivere documenti HTML con Komodo Edit

Editare un file HTML.

Nuovo file Apri Salva

Controllo sintattico

Anteprima Finestra di editing File browser

Project browser

Scrivere documenti HTML con Komodo Edit

Editare un file HTML.

Inserire il nuovo codice nel file

Scrivere documenti HTML con Komodo Edit

Editare un file HTML.

Selezionare la modalità di anteprima

Inserire il nuovo codice nel file

Scrivere documenti HTML con Komodo Edit

Editare un file HTML.

Selezionare la modalità di anteprima

Inserire il nuovo codice nel file

Appare il browser interno di Komodo Edit in cui è visualizzata l’anteprima del file selezionato.

Scrivere documenti HTML con Komodo Edit

Editare un secondo file HTML nel progetto.

Indicare il nome del nuovo file Aggiungere un nuovo file HTML al progetto tramite i menù del Project Browser (come prima)

Apparirà un nuovo tab con dentro il template del nuovo file (secondo.html)

L’intero progetto può essere salvato mediante la scelta «Save project» nel menù di progetto.

Scrivere documenti HTML con Komodo Edit

Editare un secondo file HTML nel progetto.

Indicare il nome del nuovo file Aggiungere un nuovo file HTML al progetto tramite i menù del Project Browser (come prima)

Apparirà un nuovo tab con dentro il template del nuovo file (secondo.html)

Inserire il codice qui a destra, salvare e lanciare l’anteprima.

Link alla prima pagina…

Scrivere documenti HTML con Komodo Edit

Gestire un progetto con più file.

Dall’anteprima del secondo file è possibile seguire i link.

Scrivere documenti HTML con Komodo Edit

secondo file è possibile seguire i link.

Gestire un progetto con più file.

Il principale vantaggio della modalità «progetto» sta nel fatto che rende agevole lo sviluppo di pagine web composte da più file html.

Cliccando su «qui», si ritorna all’anteprima della prima pagina.

Scrivere documenti HTML con Komodo Edit

secondo file è possibile seguire i link.

Gestire un progetto con più file.

Il principale vantaggio della modalità «progetto» sta nel fatto che rende agevole lo sviluppo di pagine web composte da più file html.

Cliccando su «qui», si ritorna all’anteprima della prima pagina.