giovedì 26 febbraio 2009

lezione n° 4 Definition List (liste di definizione)

Le Definition List sono dei particolari elenchi in cui è possibile scegliere il tipo di "punto elenco". Per effettuare una definition list vengono usati dei tag specifici, ovvero

<DL> </DL>

all'interno di questi due tag vanno poi inseriti tanti tag <DT> per quante sono i punti elenco che ci servono, ed in definitiva ad ogni tag <DT> corrisponde un tag <DD> che serve per l'inserimento della voce nell'elenco.

es.


Grazie alle Definition List è possibile utilizzare come punto elenco un' immagine (ad es. una icona)
ed è inoltre possibile formattare il punto elenco.

es.
Infine possiamo anche inserire la nostra definition list dentro un elenco puntato

es.



martedì 24 febbraio 2009

Lezione n° 3 elenchi puntati e numerati

Salve, in questa lezione vi mostrerò la struttura di un elenco classico e delle sue varianti ed inoltre vedremo anche alcuni attributi tipici. gli elenchi si suddividono in "puntati" e "numerati".

ELENCHI NUMERATI:

l'elenco numerato è costituito da un tag di apertura e da un tag di chiusura <OL> </OL>
all'interno di questi tag vanno inseriti tanti tag <LI> per quante sono le voci dell'elenco.

ai numeri che segnano l'elenco è possibile anche sostituire lettere(maiuscole e minuscole), ma anche numeri romani (maiuscoli e minuscoli).

Per far si che l'elenco inizi con una lettera dell'alfabeto bisogna far uso dell'attributo "type" che definisce la lettera o il numero romano con il quale deve iniziare il nostro elenco.


ELENCHI PUNTATI:

L'elenco puntato ha come tag di apertura e chiusura i tag <UL> </UL> e all'interno di questi tag và inserito il tag <LI> per ogni voce dell'elenco.


anche in questo tipo di elenco è possibile sostituire i puntini con i pallini, i quadratini, o con altro, per far ciò si usa anche qui l'attributo "type".



Un altro attributo da associare al tag di apertura dell'elenco oltre a "type" è lo "start", questo attributo ci consente di specificare da quale lettera dell'alfabeto o da quale numero romano deve avere inizio il nostro elenco.

come si vede dall'esempio l'attributo "type" definisce il tipo di elenco (alfabetico maiuscolo) e l'attributo "start" ci indica da quale lettera dell'alfabeto deve iniziare questo elenco, in questo caso la lettera "D" (quarta lettera dell'alfabeto).

Nell'esempio di sopra l'elenco non parte dal numero romano "I" ma essendo lo start impostato sul valore "5" l'elenco parte dal numero romano "V".

E' possibile anche annidare gli elenchi, cioè è possibile inserire un elenco dentro un'altro.

lunedì 23 febbraio 2009

Lezione n° 2 : i tag html più comuni e i loro attributi

Eccoci alla seconda lezione di questa piccola guida sull' html, in questa lezione tratteremo i più comuni tag da inserire all'interno del body nella nostra pagina html.
  • <B>testo da mettere in grassetto</B>.......B=bold
  • <I>testo da mettere in corsivo</I>...............I= italic
  • <U>testo da sottolineare</U>................U= underline
  • <Hn>testo</Hn>....assegnando un valore ad "n" da 1 a 6 varierà la grandezza del testo
  • <P>testo</P>...creerà un paragrafo
  • <BR>...grazie a questo tag è possibile andare a capo
  • <HR>...per inserire una linea orizzontale nella pagina html
  • <a>testo</a>......il testo sarà un link
  • <img>...tag per inserire un'immagine
  • <font>testo</font>....tag per formattare il testo

ATTRIBUTI DEL TAG <P> (non serve tag di chiusura)

<P align="left">............
allinea il paragrafo a sinistra
<P align="right">.........allinea il paragrafo a destra
<P align="center">...... allinea il paragrafo al centro

ATTRIBUTI DEL TAG <body>

<body bgcolor="red">.....dà allo sfondo della pagina il colore rosso
<body background="foto.jpg">...per inserire un'immagine come sfondo
<body text="red">....dà al testo il colore rosso
<body leftmargin="2">...assegna al margine sinistro un valore
<body topmargin="2">...assegna al margine superiore un valore
<body link="blue">...assegna un colore ai link presenti nella pagina
<body alink="yellow">...assegna un colore ai link quando selezionati
<body vlink="green">...assegna un colore ai link dopo la selezione

ATTRIBUTI DEL TAG <font>

<font face="arial">testo</font>...assegna il carattere ARIAL
<font size="12">testo</font>...assegna la dimensione 12 al testo
<font color="red">testo</font>...assegna il colore rosso al testo

i tre attributi possono anche essere riuniti per assegnare più di una formattazione al testo.

es. <font face="arial" size="12" color="red">testo</font>

ATTRIBUTI DEL TAG <HR>

<hr align="left">............
per posizionare la linea a sinistra
<hr align="right">............ per posizionare la linea a destra
<hr align="center">..........per posizionare la linea al centro
<hr size="10">....................definisce l'altezza in pixel della linea
<hr width="400">..............definisce la lunghezza della riga
< hr color="red">...............definisce il colore della riga

gli attributi possono essere riuniti per definire la formattazione completa della riga

es. <hr align="center" size="10" width="400" color="red">

Il tag <a> necessita dell'attributo "href" con il quale è possibile definire il collegamento web da aprire.

es. <a href="pagina.html">clicca qui</a>

Il tag <img> necessita invece dell'attributo "src"

es. < img src="immagine.jpg">

altri tre attributi del tag <img> sono: width(larghezza) ed height(altezza) e border(bordo)

es. <img src="immagine.jpg" width="100" height="100" border="2">

i valori degli attributi possono essere espressi o in pixel oppure in percentuale(%)

E' possibile rendere un'immagine link di collegamento, e per far questo basta utilizzare i due tag <a> e <img> contemporaneamente.

es. <a href="pagina.html"><img src="immagine.jpg"></a>





banner del blog

Questo è il banner del mio blog


Inseritelo pure all'interno del vostro sito o blog
facendo il copia/incolla del seguente codice:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://helpforweb.blogspot.com"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 67px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsXawcxHS7Niu64KjWwuoMn4-kPCuwSxXGkWvWwuFvZeMVjKVkPZPHKwCHSuFGXqUAV7rD0KU_iVPewuG_lNjkUfsmejDT3MzyfGVTd_5CSreQHrpNhi9-DvlQ37XCHLFOr0jWLVDgaXml/s200/banner_hfw.png" alt="" id="BLOGGER_PHOTO_ID_5306070353279585330" border="0" /></a>

Consigliatemi il vostro banner è sarò lieto di ospitarlo su questo blog.

giovedì 19 febbraio 2009

Lezione n°1 - struttura di una pagina HTML

Salve a tutti , oggi vedremo come realizzare la nostra prima pagina web , conosceremo la struttura base di una pagina HTML , i principali "tag" , e alcune proprietà dei tag.

-HTML(Hyper Text Markup Language) è un linguaggio detto di "contrassegno"(o di "marcatura") che ci consente di indicare al browser come disporre gli elementi all'interno di una pagina web. Queste indicazioni vengono date attraverso appositi marcatori detti "TAG". Un marcatore è generalmente costituito da un tag di apertura (<tag>) e da un tag di chiusura (</tag>) entro i quali va inserito il testo o il contenuto da formattare (o marcare).

<tag>contenuto</tag>

i due tag differiscono solo dal fatto che in quello di chiusura è presente la slash (/). Inoltre all'interno del tag di apertura è possibile inserire degli attributi che hanno la funzione di dare delle specifiche al contenuto da marcare.

<tag attributo>contenuto</tag>

esistono anche tag che non necessitano del tag di chiusura in quanto non devono marcare un contenuto, ma hanno solo la funzione di indicare la posizione che un oggetto deve assumere all'interno della pagina HTML.

i tag inoltre possono essere usati in contemporanea ad altri in modo da dare ad un contenuto più formattazioni contemporaneamente. ( es. se al testo dobbiamo dare il grassetto e il corsivo).

Una pagina HTML per poter essere visualizzata in un browser deve avere come tag di apertura e chiusura il tag "html" all'interno dei quali possiamo mettere tutto quello che vogliamo far vedere all'utente finale.

<html>contenuto web</html>

immediatamente dopo il tag html troveremo un'altro importantissimo tag, il tag "head".

<html><head></head></html>

all'interno dei tag head vanno inserite tutta una serie di informazioni che non saranno visibili all'utente finale , ma servono al browser e ad altri agenti tipo motori di ricerca per una corretta interpretazione del documento stesso.
L'ultimo tag fondamentale per una pagina html è senza dubbio il tag "body" dentro il quale andrà inserito tutto il contenuto della pagina che sarà poi visualizzato dall'utente finale, è quindi il tag body è considerato il corpo della pagina web.

<html><head></head><body></body></html>

Mettendo i tag nella giusta disposizione e rispettando l'indentatura avremo che una pagina HTML e così costituita:

<html>
<head>
#
#
</head>
<body>
#
#
</body>
</html>

L'unico tag che troviamo all'interno di una pagina web che sia posto prima del tag html è il tag di identificazione
<doctype>

esso fornisce informazioni di tipo generale e non necessita di tag di chiusura. Esso si presenta nella forma seguente:

<! Doctype HTML Public="//w3c//DTD HTML 4.0//IT">

HTML Public: indica il tipo di marcatura (html) e che è pubblico.
w3c: indica che rispetta le direttive proposte dal consorzio
DTD HTML 4.0: indica la versione di html usata nel documento
IT: indica la lingua utilizzata nel documento (EN se fosse in inglese).

All'interno dei tag <head> vanno inseriti altri tag ed in particolar modo due , il primo è il tag "title"
<title>........</title>

all'interno dei quali và inserito il nome da dare alla pagina. (quello visualizzato nella barra blu del browser).

l'altro è il tag "Meta" (non necessita di chiusura): <meta>

questo tag fornisce grazie ai suoi attributi informazioni utili ai motori di ricerca per l'indicizzazione della pagina web nei data-base dei motori di ricerca.
2 sono gli attibuti del tag meta e sono l'attributo "Name" e l'attributo "Content" inoltre all'attributo "Name" si possono assegnare i seguenti valori:

Keywords: parole necessarie per far trovare il nostro sito nel web.
Description: breve descrizione della pagina.
Author: per citare il nome dell'autore della pagina web.
Generator: specifica il nome dell'editor utilizzato per creare la pagina.
Refresh: per far caricare al browser una pagina diversa dalla nostra dopo un tempo stabilito.

- struttura definitiva di una pagina html -

<! Doctype HTML Public="//w3c//DTD HTML 4.0//IT">
<html>
<head>
<title>La mia prima home page</title>
<meta name ="keywords" content="Html,pagine web,home">
<meta name ="description" content="Home page in Html">
<meta name ="generator" content="blocco notes di windows">
<meta name = "author" content="vostro nome">
</head>
<body> scrivo questo testo per mostrarvi cosa si vede a video realizzando questa pagina web. Provate pure.
</body>
</html>

P.S. selezionate questo codice, copiatelo ed andatelo ad incollare in un foglio
vuoto del blocco
notes di windows, salvate questa pagina html con il nome: index.html
sul vostro desktop e
successivamente cliccatecci su per aprirla.




martedì 17 febbraio 2009

Utilizzare le maschere in photoshop

Un saluto a tutti voi, oggi vorrei trattare l'argomento del fotomontaggio utilizzando una delle funzionalità di photoshop, ovvero le "maschere". Grazie alle maschere è possibile inserire all'interno di una foto e/o di una immagine un oggetto o una parte di un'altra immagine senza dover scontornare nulla. Prima di descrivervi passo passo cosa fare vi dico in due parole in cosa consiste, se ad esempio avendo l'immagine di un cielo volete far apparire in esso un aereo basta applicare una maschera all'immagine del cielo ed il gioco è fatto (senza dover scontornare l'aereo dalla sua scena originale) .

Come si procede:
innanzi tutto procuratevi l'immagine di un cielo con nuvole: (io le ho prelevate da google)



adesso procuratevi l'immagine di un aereo in volo:

una volta trovate le immagini, apritele con photoshop (io uso la versione CS3), aprite prima l'immagine del cielo e trasformate subito lo sfondo in livello. Aprite la seconda immagine, quella dell'aereo e trasformate in livello anch'essa, adesso selezionate l'immagine del cielo e duplicatene il livello (livello -->duplica livello), adesso applicate al livello duplicato la maschera, cliccando sull'icona "aggiungi una maschera di livello" questa icona si trova nella finestra dei livelli in basso accanto all'icona "aggiungi uno stile di livello" ed è rappresentata da un rettangolino con dentro un cerchio. Fatto ciò vedrete apparire accanto al livello duplicato una miniatura della maschera.
Adesso potete trascinare l'immagine dell'aereo dentro l'immagine del cielo, fatta questa operazione potete aumentare o diminuire l'immagine dell'aereo a vostro piacimento utilizzando lo strumento: modifica-->trasforma-->scala, attorno all'immagine dell'aereo si apriranno le manigliette che vi consentiranno di modificare la foto nelle dimensioni. Bene adesso per eliminare tutto ciò che non vi serve attorno all'aereo e far restare l'aereo da solo, dovete utilizzare lo strumento "pennello", una volta selezionato il pennello vedrete subito che passandolo sull'immagine dell'aereo và eliminando tutto ciò su cui passa facendo apparire l'immagine di sotto (quella del cielo). Regolate diametro e durezza del pennello a vostro piacimento ed eliminate tutto fino a far restare l'aereo da solo. Ottenuto il risultato desiderato bisogna adesso trasportare la maschera sul livello di sopra, una volta che la maschera si trova posizionata sul livello di sopra bisogna andare in livello-->maschera di livello-->applica così facendo otterremo nella finestra dei livelli tre livelli "livello 0", "livello 0 copia", "livello 1" per terminare il nostro lavoro andare in livello-->unisci visibili, facendo attenzione che nei tre livelli precedenti sia presente l'occhietto.
Se tutto è andato per il verso giusto dovreste aver ottenuto qualcosa del genere:


Beh!!! questa tecnica è davvero utilissima sopratutto quando scontornare diventa difficile a causa di piccoli particolari o immagini particolarmente laboriose, inoltre potrete ottenere dei fotomontaggi davvero realistici, provate con delle vostre foto e mettetecci dietro lo sfondo magari dei Tropici o delle Balearie e vedrete che invidia tra i vostri amici.

lunedì 16 febbraio 2009

Come fare ad inviare file di grosse dimensioni sul web

Salve, questo è il mio primo post in questo blog, ed ho pensato bene di darvi subito un aiutino e/o un suggerimento su come fare ad inviare file di grosse dimensioni quando non è possibile inviarli come allegato in una mail. Spesso ci capita di dover usare della chiavette USB e magari siamo costretti a dover cancellare file a noi utili per far spazio nella pendrive, beh!! il problema è risolvibile installando sul nostro pc un programmino di piccole dimensioni che ci consente di trasferire file come se stessimo utilizzando un programma di file sharing. Non è fantastico ?? Bene, il programmino in questione si chiama "HFS" (HTTP FILE SERVER) , probabilmente molti di voi già lo conosceranno per altri invece può essere la soluzione ai problemi di invio file di grosse dimensioni. Potete scaricare il programmino direttamente cliccando Quì

P.S. lo screenshot è prelevato dal sito HTML.it così come pure il link per il download.