Introduzione
al
WEB EDITING
1. Le reti client server e la lettura e scrittura ipertestuale
2. Strutturare il Web con HTML HyperText Markup Language
3. Presentare con Stile il Web tramite i CSS
manualistica: http://www.infoaccessibile.com
news: http://scaccoalweb.dotblog.it
1. Introduzione al concetto di rete client server e di lettura e scrittura ipertestuale.
Concetto di Rete client-server.
Internet e il web = interazione bidirezionale e
relazione comunicativa con l'ambiente informativo circostante.
Come accedere al web (vari tipi di browser).
Come avere tutti i browser a disposizione.
•
•
•
Browsera
Adobe Browser Lab
Browser Shots
Il web come linguaggio ipertestuale (link) composto principalmente da:
struttura (html), stile (css) e funzione (javascript).
Esercitazione: salvare una pagina web in locale (file sorgente), modificare il file sorgente e
verificare l'effetto delle modifiche.
2. Strutturare il Web con
HTML HyperText Markup Language
La Rete e il Web
La ragnatela ipertestuale diffusa a livello mondiale nota come
Web è un ambiente informativo e comunicativo che si basa su
meccanismi di interazioni bidirezionali di tipo client-server
grazie al quale è possibile una relazione comunicativa con
l'ambiente informativo circostante.
Il client browser può cosí accedere ad infiniti nodi informativi
ospitati su server Web e collegati fra loro attraverso appositi
collegamenti (link). Il Web quindi come linguaggio ipertestuale
la cui struttura, forma estetica e funzione sono comandati
rispettivamente dagli appositi linguaggi di editing e
programmazione html, css e javascript.
Scrivere codice per il Web
Il codice della pagine Web si suddivide
essenzialmente in tre categorie principali: il markup strutturale
(ad esempio html5) il quale deve cercare di dare maggior
senso e significato possibile alla strutturazione - quindi
semantica - di una pagina Web, il codice che imposta il layout
e la formattazione grafica attraverso fogli di stile (css) ed il
codice come javascript-DOM che determina le possibili
fruizioni interattive con i contenuti di un sito Web magari
attingendo dinamicamente ad un apposito database (ad
esempio mysql) con apposite chiamate al server Web (ad
esempio tramite php).
Per cominciare ad approcciarsi a questa complessa struttura di
linguaggio ipertestuale conviene sicuramente procedere a
piccoli passi concentrando la propria attenzione sul codice di
markup che è oltretutto il più importante per presentare in
maniera corretta ed ottimizzata i contenuti ai sempre più
determinanti motori di ricerca. Inoltre, imparare a scrivere
codice markup consente non solo di imparare a strutturare il
Web ma permette di prendere dimestichezza con altri
linguaggi di editing per svariati utilizzi come ad esempio la
possibilità di scrivere ebook in formato epub.
Tutorial
•
W3Schools
•
htmlplayground
•
html.it
•
html5
•
programmazione html5
Regole base del markup
- apertura e chiusura
- nidificazione
- marcatore attributo valore
<a href="http://www.sitoweb.it">link <strong>importante</strong></a>
Tag strutturali fondamentali e loro utilizzo
doctype
html
head
title
meta
body
h
div
p
img
a
Strumenti di Editing
• Amaya
• Aptana Studio
• Firebug
• codeburner
• Rendera
Validatori
• w3c markup
• WDG
• Tidy
• validator.nu
Esercitazione: realizzare una pagina html utilizzando i
marcatori (tag) doctype html head title meta body h div p img a
3. Presentare con Stile il Web tramite i CSS
I CSS (Cascading Style Sheets - Fogli di stile a cascata) è una
tecnica che consente di introdurre facilmente ed in maniera
razionale ed ottimizzata (nel senso di razionalizzazione delle
energie a disposizione) degli elementi di formattazione grafica
in una pagina html.
Come inserire dello stile in una pagina Web?
testo in linea...
<h1 style="color: red; background: black;">Sezione colore rosso su sfondo bianco</h1>
testo incorporato...
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
h1 {color: red; }
</style>
</head>
<body>
file di testo collegato...
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
Regole base dei fogli stile
– Meccanismo dell'ereditarietà
– Selettore proprietà valore
– #id e .classi
Esempi di applicazioni css
Gestione colori:
Tipografia:
Font-weight: bold
Il testo di questo paragrafo è in grassetto.
Codice:
.p3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
Dimensione e posizione di elementi e immagini:
Tutorial
• CSS Tutorial W3Schools
• Tutorial CSS W3C
• Guida CSS di base
Esercitazione: integrare la pagina html precedentemente
realizzata con appositi elementi di formattazione grafica tramite
fogli stile css a scelta...
