HTML e CSS. Concetti base

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "HTML e CSS. Concetti base"

Fortunato Piccolo
6 anni fa
Visualizzazioni

1 HTML e CSS Concetti base

2 Hyper Text Markup Language Structured Generalized Markup Language (SGML) Nasce in ambiente editoriale Testo non formattato ma contrassegnato da coppie di marcatori <XX> </XX> Document Type Definition (DTD) per ogni categoria di documenti

3 Hyper Text Markup Language Ø Serve per costruire una pagina web che ha estensione.htm o.html Ø Può essere scritto con il semplice blocco notes o con diversi software (editor) che sono specializzati per favorire e controllare la sintassi del linguaggio (Front Page, Dreamweaver, ) Ø La pagina web può essere visualizzata solo grazie ad un particolare programma che interpreta i tags del linguaggio html (browser).

4 Hyper Text Markup Language I TAGS, o elementi, che compongono HTML devono essere racchiusi fra parentesi angolari <così> Si tratta di parole chiave, termini in lingua inglese. L'elemento (tag) smette di produrre il suo effetto nel momento in cui lo stesso viene ripetuto facendolo precedere da una barra laterale / contenuta sempre all'interno delle parentesi angolari </così>.

5 Struttura di un documento <HTML> <HEAD>... </HEAD> <BODY>... </BODY> </HTML>

6 HTML Es.1 è formato da definizioni, elementi, tags, marcatori <html> <head> <title> Primo esempio</title> </head> <body> PRIMA RIGA SECONDA RIGA </body> </html>

7 Hyper Text Markup Language Ø HTML: tutto il documento Ø HEAD: testata (metainformazione) Ø TITLE = titolo Ø BODY = corpo dell'informazione Ø P = paragrafo

8 <html> <head> <title> Secondo esempio</title> </head> <body> Riga a sinistra Riga a destra Riga al centro Riga in cui verifichiamo la struttura giustificata </body> </html> HTML Es.2 Da notare in esecuzione che gli allineamenti sono rispettati qualsiasi dimensione abbia la finestra del browser

9 <html> <head> <title> terzo esempio</title> </head> <body> Riga a sinistra Riga a destra Riga al centro Riga in cui verifichiamo la struttura giustificata </body> </html> HTML Es.3

10 <html> <head> <title> Quarto esempio</title> </head> <body> Immagine di Pola <center> <img src=" width="340" height="219 border="2" alt=pola" > </center> </body> </html> HTML Es.4

11 HTML-Ancore Fra le virgolette dell'attributo HREF oltre agli indirizzi URL validi come quello dell'esempio <A HREF=" è possibile specificare anche : <A HREF="ftp://..."> <A HREF="mailto:..."> <A HREF="news:..."> <A HREF="nomefile.zip"> <A HREF="nomepagina.html"> Che servono rispettivamente per: <A HREF="ftp://..."> Collegamento ad un sito FTP. <A HREF="mailto: nome@server"> Indirizzo di posta elettronica per la spedizione di una all'indirizzo specificato, facendo uso del proprio programma di posta elettronica. <A HREF="news:..."> Collegamento ad un gruppo di discussione (newsgroup Usenet). <A HREF="nomefile.zip"> Scaricamento (download) di un file in formato compresso. <A HREF="nomepagina.html"> Collegamento ad altra pagina all'interno della stessa cartella.

12 HTML- Pubblicare L'accesso al server che ospita la nostra pagina web avviene di solito con programmi FTP (file transfer protocol). Parametri da fornire al programma nome del server ftp user ID Password

13 Hyper Text Markup Language Ø due sono le categorie in cui si suddividono gli editor: visuali e testuali. l Quelli visuali sono sicuramente molto più semplici da adoperare, assomigliano a dei programmi di grafica, è sufficiente trascinare al loro interno testi ed immagini per avere un'impaginazione più che soddisfacente ( ) l Gli editors testuali richiedono invece da parte di chi li adopera una minima conoscenza di base, potrebbero sembrare più dispendiosi in termini di impegno, ma alla lunga si rivelano invece un autentico investimento. Consentono di fare cose che editors visuali non permetterebbero mai e danno la possibilità di avere il controllo assoluto su ogni parte del codice

14 Editor di testo La scelta dell editor è piuttosto importante, è il principale compagno di strada in questo percorso e tipicamente diventa un estensione naturale del pensiero. Gli editor che risultano tra i più utilizzati sono: Editor Piattaforma Licenza Atom.io Windows, Linux, Mac Gratuita Sublime Text Windows, Linux, Mac Praticamente gratis Notepad++ Windows Gratuita Ce ne sarebbero numerosi altri da citare, perciò oltre a suggerire alcuni nomi vediamo quali sono le caratteristiche e i criteri che ce li hanno fatti scegliere.

15 CMS Si chiamano Content Management System le applicazioni di ges;one dei contenu; dei si; che consentono di inserire, modificare e rendere visibili ar;coli, banner, immagini e link senza ricorrere a sistemi di sviluppo. Un Content Management System è un applicazione che consente di variare i contenu; di un sito senza intervenire sulle pagine o sul database da cui sono lebe le informazioni. Il suo vantaggio è che una volta creata la strubura che dinamicamente produce le pagine, i contenu; possono essere inseri; e varia; senza conoscenze tecniche di sviluppo. Tecnicamente si traba di una applicazione, spesso usabile mediante il browser, che consente con un front- end di semplice uso l inserimento e la ges;one di ar;coli, schede, elenchi, link e banner. Tali informazioni sono poste nel database dal quale poi il motore dinamico del sito le estrae per produrre le pagine che saranno visualizzate al visitatore. Chi inserisce i contenu;, in sostanza, non deve avere conoscenze tecniche. Deve saper scrivere e quasi niente altro.

16 CMS Wix hbps://it.wix.com/ Wordpress hbps://it.wordpress.com/

Documenti analoghi

autori-c/marco-calvo/internet manuale-per-luso-della-rete/

1 2 http://www.liberliber.it/online/autori/ autori-c/marco-calvo/internet-2004- manuale-per-luso-della-rete/ 14 Berners-Lee Tim Mosaic 17 lettura i suoi percorsi di ipertesto è un ipertesto