HTML Tutorial per gli effetti speciali

September 20

HTML Tutorial per gli effetti speciali


HTML consente di incorporare delle immagini e oggetti che possono essere utilizzati per l'interattività. HTML funziona bene con JavaScript che può essere utilizzata per influenzare il comportamento dei browser web. Oltre a JavaScript, fogli di stile (CSS) possono anche essere integrati per influenzare il layout e la visualizzazione dei contenuti. Quando viene utilizzato decentemente, gli effetti in grado di fornire funzionalità e migliorare l'esperienza degli utenti e fare un sito web spiccano. Per essere efficaci, gli effetti speciali non dovrebbero rallentare il browser o irritare i visitatori.

istruzione

Testo a scorrimento

1 Accendi l'applicazione Blocco note e digitare i tag HTML di base come illustrato di seguito:

html>
<Head>
<Title> Questa è la mia pagina eHow </ title>
</ Head>
<Body>
Si tratta di un testo a scorrimento
</ Body>

2 Salvare il file di cui sopra come index.html sul desktop e fare doppio clic su di esso per eseguire. Si noterà che "Questo è un testo a scorrimento" viene visualizzato un solo testo statico.

3 Torna l'applicazione Blocco note e aggiungere il testo qui di seguito sotto il tag "<body>":

<Body>
<Marquee> Questo è un testo a scorrimento </ marquee>

L'intero codice dovrebbe leggere come illustrato di seguito:

<Html>
<Head>
<Title> Questa è la mia pagina eHow </ title>
</ Head>
<Body>
<Marquee> Questo è un testo a scorrimento </ marquee>
</ Body>

scorrimento Immagini

4 Individuare l'immagine che si desidera scorrere su una pagina web e fare clic destro, andare a "Proprietà" e trovare l'indirizzo di registro. Utilizzare "Visualizza sorgente pagina" quando si utilizzano altri browser come Firefox e navigare verso l'indirizzo logo.

5 Copiare la pagina dei link per il logo e tornare al documento HTML e incollarlo come illustrato di seguito:

<Html>
<Head>
<Title> Questa è la mia pagina eHow </ title>
</ Head>
<Body>
<Marquee> <img rel = "nofollow" target = "_blank"> http://www.google.com/images/logo.gif> & lt; / marquee>
</ Body>
</ Html>
Questo è solo un esempio e potrebbe non funzionare correttamente. Utilizzare un vero e proprio collegamento che fa riferimento a una vera e propria immagine.

6 Salvare il file, tornare al documento e visualizza. È possibile modificare le dimensioni, lo scorrimento di lunghezza e altri dettagli come bene.

Mouse Button-Over

7 Copiare o creare due immagini, preferibilmente quelli che sembrano pulsanti, in una cartella. Nome le immagini "uno" e "due".

8 Aprire l'applicazione Blocco note e digitare il codice qui sotto:

<Html>
<Head>
<Title> Questa è la mia pagina eHow </ title>
</ Head>
<Body>
<Img onmouseover = "src = 'two.gif'" onmouseout = "src = 'one.gif'">
</ Body>
</ Htnl>

9 Salvare il file come image.html nella stessa cartella che si salva le immagini.

Allarme script

10 Accendi il tuo Blocco note e digitare il codice qui sotto:

<Html>
<Head>
<Title> Questo è il mio Pop Up pagina </ title>
</ Head>
<Body>
<A href = "http://Google.com"
onMouseOver = "alert ( 'Si tratta di un pop-up); return true;"> Clicca PopUp </a>
</ Body>
</ Html>

11 Aggiungi il tuo messaggio pop-up, testo del link e il sito web che si desidera inserire il collegamento di riferimento.

12 Salvare il file come pop.html e fare doppio clic per eseguire.

Consigli e avvertenze

  • Il testo di scorrimento può essere definire per scorrere una certa lunghezza utilizzando il "= width%" tag come illustrato di seguito:
  • <Width marquee = "30%"> Questo è il mio testo a scorrimento </ marquee>
  • È possibile effettuare il mouse sull'immagine sopra più interattivo con l'aggiunta di altri argomenti nel codice. Alcuni di questi includono:
  • onMouseDown = "src = 'percorso dell'immagine'"
  • onmouseup = "src = 'percorso dell'immagine'"
  • onmouseout = "src = 'percorso dell'immagine'"