Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 18

Discussione: Mini-Pillole di HTML

  1. #1
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Mini-Pillole di HTML

    Questo 3d è stato pensato da noi forumisti dell'OT di HTML per gli utenti principianti, in modo che essi possano trovare facilmente le soluzioni ai semplici (per noi) problemi che l'HTML pone quando si è alle prime armi. Abbiamo cercato di trattare i problemi che vengono sottoposti più frequentemente al forum (questo perché molti utenti ignorano una funzione molto simpatica e utile che si chiama RICERCA) in modo da dare delle risposte veloci e complete (speriamo...).

    Questi sono gli argomenti trattati:

    1 - Rollover di immagini
    2 - Chiusura Finestre
    3 - Motori di ricerca e redirect
    4 - Submit di un form
    5 - Inserire Musica di sottofondo
    6 - Popup
    7 - Links
    8 - Frames
    9 - Tabelle
    10 - Formattazione testo (intestazioni, paragrafi, ritorno accapo, rientri, caselle di testo con DIV, attributi CSS per i font, esempi)
    11 - Applicare un foglio di stile ad una pagina HTML
    12 - Creare un documento CSS

    Buona Lettura!

  2. #2
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Rollover di immagini

    Il rollover delle immagini consiste sostanzialmente nel cambiare l’attributo SRC ad un tag IMG. Da questo principio si possono estrapolare tantissimi utilizzi dei quali i più frequenti sono, un’anteprima per una galleria di immagini oppure un bottone che si illumina.

    Dato un tag che definisce un’immagine in un documento HTML
    codice:
    <IMG SRC=”immagine1.gif” NAME=”image”>
    Vediamo le funzioni javascript che permettono di farne il rollover

    /*
    Scatta al passaggio del mouse sull’immagine (evento onMouseOver)
    Riceve in ingresso il parametro nome che coincide col valore dell’attributo
    NAME dell’immagine e assegna il nuovo path all’attributo SRC dell’immagine
    */
    codice:
    function rollOver(nome){
         document.images[nome].src = “immagine2.gif”
    }
    /*
    Scatta al passaggio del mouse al di fuori dell’area dell’immagine (evento onMouseOut)
    Riceve in ingresso il parametro nome che coincide col valore dell’attributo NAME dell’immagine
    E assegna il path precedente all’attributo SRC dell’immagine
    */
    codice:
    function rollOut(nome){
         document.images[nome].src = “immagine1.gif”
    }
    a questo punto inseriamo le chiamate alle funzioni nel tag IMG

    <IMG SRC=”immagine1.gif” NAME=”image” onMouseOver=”rollOver(‘image’)” onMouseOut=”rollOut(‘image’)”>

    Se l’immagine è anche definita sottoforma di link, la sintassi è questa

    <A HREF=”quelchevuoi.html” onMouseOver=”rollOver(‘image’)” onMouseOut=”rollOut(‘image’)”>
    <IMG SRC=”immagine1.gif” NAME=”image”></A>


    Sgnafurz

  3. #3
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Chiusura Finestre

    Capita spesso che qualcuno chieda "lumi" su come si possano chiudere le finestre del browser e le popup.
    Gli esempi riportati sono stati presi dal forum, usando la RICERCA (lente in alto destra!)

    Premetto che per tutti gli esempi, usati nella finestra "madre" del browser, prima dell'uscita comparirà una finestra con la richiesta di uscita... questa finestra NON è eliminabile!

    CHIUDERE LA FINESTRA DEL TUO BROWSER TRAMITE UN LINK

    da inserire nel BODY:
    codice:
    Chiudi finestra
    ovviamente CHIUDI FINESTRA è personalizzabile


    CHIUDERE LA FINESTRE DEL BOWSER TRAMITE BOTTONE

    da inserire tre i tag <BODY> </BODY>
    codice:
    <INPUT TYPE="button" VALUE="Chiudi nuova" NAME="B4"
           onClick="window.close()">

    CHIUSURA DI UNA POPUP A TEMPO

    basta inserire tra <HEAD></HEAD> questo:
    codice:
    <meta http-equiv="refresh" content="25;
          URL=java script:self.close();">
    dove 25 sono i secondi che passeranno prima della chiusura della popup

    per ottenere lo stesso risultato si può usare anche questo piccolo script inseribile nel BODY
    codice:
    <script language="JavaScript">
    setTimeout('window.close()',3000); 
    </script>

    CHIUDERE POPUP TRAMITE UN'IMMAGINE

    inserire tra <BODY></BODY>
    codice:
    <a href="javascript:window.close();">
       [img]tua_immagine.gif[/img]
    </a>
    CHIUDERE UNA POPUP TRAMITE BOTTONE

    codice:
    <INPUT TYPE="button" VALUE="Chiudi nuova" NAME="B4" 
         onClick="window.close()">
    è lo stesso utilizzato per chiudere la finestra "madre". Qui però non ci sarà nessuna richiesta di uscita


    CHIUDERE LA FINESTRA MADRE DALLA POPUP
    codice:
    <INPUT TYPE="button" VALUE="Chiudi nuova" NAME="B4" 
           onClick="window.opener.close()">
    Danix

  4. #4
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Motori di ricerca e redirect

    Spesso mi chiedono come faccio a sapere tante cose, be’ io ho un trucco che in questa mini pillola voglio condividere con voi: io so solo che una cosa si può fare, ma quando la devo fare uso un motore di ricerca!
    In questa mini pillola parlerò dei redirect, tutto il materiale è stato reperito tramite il motore di ricerca del forum di html. L’indirizzo è il seguente: http://forum.html.it/forum/search.php ; è incredibile la quantità di informazione che ne potrete ricavare dopo aver preso confidenza con la sua interfaccia semplice ed intuitiva.

    Redirect in html:
    Copia e incolla il seguente codice tra gli <head> </head> della pagina:
    codice:
    <META HTTP-EQUIV="Refresh" CONTENT="0;
          url=http://www.tuodominio.it/tuapagina.htm">
    Dove 0 (zero) rappresenta i secondi dopo di cui, a caricamento avvenuto, si viene reindirizzati nella pagina www.tuodominio.it/tuapagina.htm
    Ora vediamo come ottenere lo stesso risultato con javascript. Questa volta sono andato su www.google.it e ho scritto: redirect con javascript; lui, giustamente, mi ha risposto: forse cercavi “redirect con javascript”; doto che è quello che stavo cercando ho ciccato sul link che mi ha proposto e spulciando tra i primi risultati forniti dal motore guardate cosa ho trovato:
    Inserire all'interno dei tag <head> e </head> della propria pagina il codice riportato sotto:
    codice:
    <SCRIPT LANGUAGE="Javascript">
    <!--
    window.location="http://www.tuodominio.it/tuapagina.htm"
    //-->
    </SCRIPT>
    Incredibile!!

    AtomSurfer

  5. #5
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Submit di un form

    Il submit di un form consiste nello “spedire” al server le informazioni contenute all’interno dei campi (INPUT, SELECT, TEXTAREA ecc) che lo costituiscono.

    Si può effettuare in vari modi:

    Bottone Submit

    codice:
    <INPUT TYPE=”submit” VALUE=”Invia dati”>
    Questo elemento effettua il submit del form all’interno del quale si trova, tuttavia risulta scomodo se si vogliono fare controlli di validità sui dati ed impedirne l’invio poiché si può intercettare solo l’evento del tag FORM, onSubmit().


    Bottone o Immagine

    codice:
    <INPUT TYPE=”button” VALUE=”invia i dati” 
           onClick=”document.forms[nomeform].submit()”>
    
    oppure
    
    <IMG SRC=”nomeimg.gif” 
         onClick=”document.forms[nomeform].submit()”>
    A questo punto siamo in grado di intercettare comodamente (in Javascript) il comando submit.


    Sgnafurz

  6. #6
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Inserire musica di sottofondo

    Una domanda che di solito postano coloro che sono interessati a “Tamarrizzare” il loro sito è “come si mette lo sfondo musicale”.
    Allora, è una cosa semplicissima, in fondo “tamarrizzarsi” è sempre molto semplice.
    Il tag da utilizzare è <BGSOUND>

    Esempio:
    codice:
    <BGSOUND SRC ="sounds/song.mid" LOOP ="infinite">
    Gli attributi che si possono impostare in questo tag sono:

    BALANCE (bilancia cassa dx e cassa sx i valori vanno da -10000 a +10000), VOLUME (controllo del volume, i valori vanno da –10000 a 0, con 0 sfrutta al massimo l’uscita wav della scheda audio), SRC (path del file della musichetta che ci tenete tanto a mettere), LOOP (quante volte si vuol far ripetere la riproduzione della musichetta, con 0 ripete una volta, con –1 infinite volte altrimenti specificate il numero di ripetizioni), ID (stringa alfanumerica di identificazione).



    Sgnafurz

  7. #7
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Pop Up

    Prima di spiegare come si fanno, chiarisco cosa sono e il loro possibile utilizzo:

    Una pop up non è altro che una finestra di dimensioni variabile che si aprono o in automatico in apertura on in chiusura del sito... oppure con un link.
    Vengono spesso usate o per foto-gallery oppure per informazioni pubblicitarie.

    Si creano in questo modo :
    codice:
    <a href="#" onClick="window.open ('pagina.html');">Pop up/a>
    Questa è la funzione base per crearla e ora passiamo col descrivere i vari attributi :

    'scrollbars=no // specifica la presenza o meno della barra di scorrimento
    'resizable=no' // Specifica se è possibile ridimensionarla da parte dell'utente
    top=100,left=150 // Distanza dal top e dalla sinistra della pagina
    width=500,height=250' // Le dimensioni della pop up

    Queste sono le funzioni principali... comunque il resto della pop up può essere personalizzato dal web master.
    Un po’ di codici le trovate pure qui :

    http://forum.html.it/forum/showthrea...hreadid=449483

    Piero06

  8. #8
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Link

    I link sono modificabili con semplicità dai css per formattare carattere , style, colore..... etc.
    Allora... passo ad elencare i vari tipi di link :

    a:link {...} // style di deafult per i link
    a:visited {..} // style dei link una volta visitati dall'utente
    a:active {..} // style dei link "attivi" .. ovvero subito dopo averli cliccati
    a:hover {..} // style dei link quando il cursore gli è sopra

    Ora passiamo agli attributi che si possono dare ai link :

    color: #00000 // colore dei link
    font-size : 10px // il size dei link
    font-family : Arial // Il font del link
    text-decoration : none, underline ... // specifica lo stile del link
    background-color: #xxxxxx // colore di sfondo dei link

    Ora analizziamo l'uso delle Classi

    I codici per i link vengono isneriti tra <head> e </head> tra <style> e <style> .
    I link verranno però solo tutti con lo stesso stile. Se si vogliono un po’ di link di un tipo e altri di un'altro usando le classi :
    facendo a.classe.link {....} e nei vari link inseriamo class="classe" il link non avrà lo stile di tutti gli altri link, ma quelli stabiliti in a.calsse:link . Le classi si costruiscono mettendo:
    a.nome classe :tipo link

    P.s. Il punto dopo "a" è indispensabile !!!

    In questo modo si possono fare 1000 tipi di link diversi per pagina.


    Piero06

  9. #9
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Frame

    I frame sono un elemento di una pagina web che solo usati all'interno di un frameset. Cos'è però un frameset ?
    Un frameset è come la divisione di una pagina in più reparti contenenti pagine e documenti diversi; è come la suddivisione di una pagina in altre sue pagine più piccole che sono "ferme" sulla pagina. I frameset sono molte volte utilizzati per avere in ogni pagina o il menù o il titolo del sito per comodità sia della navigazione che della costruzione di esso. Infatti come accade con l'iframe i fari frame che compongono il frameset sono elementi a se che sono uniti in una pagina e un di essi può cambiare contenuto e gli altri rimangono "fermi" come fissi sulla pagina. Un framset può essere immaginato come quando ad esempio sul nostro pc facciamo:
    start >> cerca >> e ci appare una finestra suddivisa in due :
    in una parte a sinistra dove c'è l'input text ove inserire la parola da cercare , e la parte di destra dove scorre il contenuto e i risultati della ricerca.

    Passiamo ora alla costruzione di un frameset.
    la struttura più semplice di un frameset è la pagina divisa in due orizzontalmente e si forma così :
    codice:
    <html>
    
    <head>
    <title>Pagina con frame 1</title>
    </head>
    
    <frameset rows="*,*">
      <frame name="superiore" src="Nuova_pagina_1.htm">
      <frame name="inferiore" src="Nuova_pagina_2.htm">
      </frameset>
    
    </html>
    come si vede dal codice il frameset viene "delimitato" da : <frameset> e </frameset>
    - rows="*,*" idica la dimensioni dell'frame
    - i frame si "delimitano" a loro volta da : <frame> e </frame>
    - Ogni frame che compone il frameset si costituisce così :
    codice:
    <frame name="superiore" src="Nuova_pagina_6.htm">
    dove "name" è il nome, scr="" è il percorso per il contenuto o la pagina del frame.

    Per perfezionare il codice bisogna inserire una frase per avvertire un utente che non ha la possibilità o la compatibilità per vedere il frema. A tal proposito si inserisce un tag <noframes> che contiene ciò verrà visualizzato caso non si vedesse il frameset. Il codice completo è :

    codice:
    <noframes>
      <body>
    
      
    
    La pagina corrente utilizza i frame. 
         Questa caratteristica non è 
         supportata dal browser in uso.</p>
    
      </body>
      </noframes>
    dove <noframes> e </noframes> delimitano il contenuto della visualizzazione , <body> contiene il corpo del messaggio che verrà mostrato all'utente e poi chiuso </body>.
    Vediamo ora un frameset che divide la pagina in verticale :

    codice:
    <html>
    
    <head>
    
    <title>Nuova pagina 8</title>
    
    </head>
    
    <frameset cols="26%,*">
      <frame name="sinistra" src="Nuova_pagina_10.htm">
      <frame name="destra" src="Nuova_pagina_9.htm">
      <noframes>
      <body>
    
      
    
    La pagina corrente utilizza i frame.
         Questa caratteristica non è
         supportata dal browser in uso.</p>
    
      </body>
      </noframes>
    </frameset>
    
    </html>
    Le varie parti del codice sono uguali a quello di prima cambia solo la posizione dei singoli frame .

    Proprietà

    Per personalizzare un frameset si possono cambiare i colori di sfondo , dei bordi , se permettere o no lo scrolling ...

    cambiare il bordo

    Per cambiare il colore e le dimensioni del brodo di un frame singolo bisogna inserire nel frameset nel frame che si vuola uno style css :

    style="border-left: 1 solid #00FFFF; // bordo sinistro ( spessore - tipo - colore )
    border-right: 1 solid #800080; // bordo destro ( spessore - tipo - colore )
    border-top: 1 solid #C0C0C0; // brodo in alto ( spessore - tipo - colore )
    border-bottom: 1 solid #00FF00" // bordo basso ( spessore - tipo - colore )
    >


    Distanza e spazio tra due frame di un framset

    Bisogna aggiungere alla costruzione del frameset :
    codice:
    <frameset framespacing="0" border="0" 
              cols="26%,*" frameborder="0">
    Dove framespacing è lo spazio tra i due frame e frameborder e il bordo dei due frames

    Permettere o no lo scrolling

    Nel singolo frame che compone il frameset inerire :

    scrolling="no" // se non si vuole permettere lo scrolling dell'iframe
    scrolling="yes" // se si vuole che la scrollbar appaia sempre in ogni caso
    scrolling="auto" // se si vuole che la barra appaia solo quando necessario


    Piero06

  10. #10
    Utente di HTML.it L'avatar di Sgnafurz
    Registrato dal
    Mar 2003
    Messaggi
    2,182

    Formattare il testo: Intestazioni

    <h1></h1> -> titolo molto grande (header 1)
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    Il testo lo mettete tra i tag di apertura e chiusura

    esempio:
    <body>
    <h1>capitolo primo</h1>
    <h2>paragrafo primo</h2>
    </body>


    Francis

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.