Guida HTML


Questa è una breve guida sui principali codici HTML che possono essere inseriti in
scheda.



  1. Stilizzare il testo:

    Per applicare una determinata formattazione stilistica al testo, i tag di
    formattazione del testo sono:


    <b>TESTO</b>: Testo in grassetto
    <i>TESTO</i>: Testo in corsivo
    <u>TESTO</u>: Testo sottolineato
    <s>TESTO</s>: Testo barrato
    <big>TESTO</big>: Testo grande
    <small>TESTO</small>: Testo piccolo



  2. Inserimento di una scritta colorata:


    <font color="CODICE
    COLORE">TESTO</font >


    Questo codice indica come poter cambiare il colore di un testo. L'intera tabella dei
    colori è possibile trovarla
    Clikkando qui


  3. Inserimento di un font:


    <font face="INSERIRE FONT">TESTO </font>


    Questo codice indica come poter cambiare il font di un testo (es. Verdana,
    Tahoma, TimesNewRoman etc..)


  4. Regolare grandezza di un font:

    Oltre i comandi small e big è possibile personalizzare la
    dimensione del carattere utilizzando la dimensione numerica del
    carattere:


    <font size="INSERIRE GRANDEZZA">TESTO</font>


    Questo codice permette la regolazione della grandezza del testo.
    Inserendo il numero del carattere, il cui valore standard è 1, si
    potranno stampare diverse tipologie di grandezza.


  5. Posizionamento del testo:

    Per posizionare il testo su una determinata area:


    <p align="left">TESTO</p>: Testo a sinistra
    <p align="center">TESTO</p>: Testo centrato
    <p align="right">TESTO</p>: Testo a destra


  6. Inserimento di un'immagine

    Per inserire un'immagine all'interno di una qualsiasi sezione della
    scheda bisogna usare il codice:


    <img src="INSERIRE LINK IMMAGINE">


    I formati attualmente accettati sono: PNG,
    JPG/JPEG e GIF. Per caricare l'immagine possono
    essere utilizzati diversi servizi reperibili online. Tra i più noti:
    Altervista, Tinypic, ImageSharing.
    Per posizionare un'immagine su una determinata area basta
    utilizzare il comando "align="left/center/right" subito dopo il
    link. Ad esempio:


    <img src="LINK" align="left/center/right">




  7. Inserimento di una cornice a un'immagine

    Il comando border assegna lo stile del bordo di una
    determinata immagine o di una tabella. Prendendo come esempio
    l'inserimento di un'immagine:


    <img src="LINK IMMAGINE" border="1">


    Il numero "1" non è altro che lo spessore minimo del bordo, la cui
    dimensione può essere cambiata con "2", "3", "4" e così via.
    Il bordo può assumere, inoltre, un colore specifico attraverso il
    comando bordercolor:


    <img src="LINK IMMAGINE" bordercolor="CODICE COLORE">


    In questo modo si potranno andare formulandosi compilazioni
    sempre più complesse:


    <img src="LINK IMMAGINE" border="4" bordercolor="#FFF">


  8. Impostare larghezza e altezza di un'immagine

    Per avere un maggiore controllo delle proprie immagini, spesso si ha
    la necessità di impostare una dimensione minima o massima, in
    altezza e/o in larghezza:


    <img src="LINK IMMAGINE" widht="100">: Regola la larghezza
    <img src="LINK IMMAGINE" height="100">: Regola l'altezza


    NOTA BENE: il numero "100" è un esempio. Va da sè che la
    dimensione è a vostra scelta.


  9. Inserire una barra divisora

    Il tag hr serve a creare linee di separazione orizzontali. La sua
    sintassi è delle più banali:


    <hr />


    Supporta gli attributi color e size, utili, rispettivamente, a colorare la
    linea ed a darle uno spessore. Un esempio:


    <hr color="#FF0000" size="15" />


  10. Modificare lo stile di una scheda

    Allora, che cosa si intende con stile di una scheda? Con questo
    termine si suole indicare un linguaggio per i documenti web. Anche
    noto sotto l'acronimo di CSS, esso imposta nel dettaglio sul come un
    documento debba essere presentato all’utente, definendone ad
    esempio i font, i colori, le immagini di sfondo, il layout, il
    posizionamento delle colonne o di altri elementi sulla pagina, e così
    via. Nel caso specifico della land Crystal Tokyo è possibile
    comprendere questo discorso clikkando sulla maggior parte delle
    schede dei personaggi. In molte di esse noterete che le diciture
    "standard" (spirito, famiglia, data di nascit) hanno un colore
    differente rispetto alla vostra. Un esempio di stile è il seguente:


    <style>
    td, th { color: #FFFFFF; font - family: arial; font-size:10px; }
    td { background: none;}
    table { border:1; text-align enter; background: transparent;}
    b { color:#004080; font-family:arial; font-size:10px;}
    a:link { color: #004080; font-family:arial; }
    a:hover { color:#004080; font-family:arial;}
    a:visited { color:#004080; font-family:arial; }
    </style>


    Dove vedete "color", seguito dal cancelletto e una serie di numeri è
    MODIFICABILE, questo vuol dire che in base al codice colore che
    inserirete cambierà il colore delle scritte principali; i codici dei colori
    potete trovarli href="http://users.libero.it/luclep/itaint.htm">Clikkando qui
    .
    Inoltre è MODIFICABILE anche dove vedete scritto "font-family" che
    viene visualizzato sempre come arial, ma voi potete metterci quello
    che più vi aggrada.


  11. Inserire una porzione di scheda con barra a scorrimento

    Si tratta di una tabellina interna alla scheda con scroll/barra di
    scorrimento così da immagazzinare tutto il testo in quello spazio.
    Ecco il codice qui di seguito.


    <p align="center">
    <div align="left" style="height: 210px; width:450px; overflow-y:
    scroll;
    overflow-x: hidden; margin-top:30px; margin-bottom:85px>
    <font color=#b3b3b3>
    <p align="left">
    <font color="#2E2EFE">TESTO</div>
    </div>
    </p>
    </i>



    Anche qui: dove vedete scritto "font color" è MODIFICABILE, dato che
    si tratta del colore del font e potete sempre utilizzare la scheda
    interattiva che vi ho messo nel punto sopra.
    Inoltre, sono MODIFICABILI anche "height" dove appunto i "px"
    indicano quanto alta la volete la vostra porzione di scheda con la
    barra a scorrimento; così come "width" che - al contrario - indica la
    larghezza della stessa.
    Ricordatevi che nell'inserimento del testo per andare a capo si deve
    SEMPRE usare il codice:


    <br />




  12. Inserire uno sfondo nella scheda

    Nel caso vogliate mettere un colore diverso come sfondo per la
    vostra scheda, il codice è:


    <style type="text/css">
    table { background: transparent; border: codice colore;}
    .tabl { background: none; border: none; }
    td { background: transparent; border: 1px solid codice colore; }
    .tddue { background: none; border: none; }
    </style>



  13. Inserire un'immagine come sfondo nella scheda


    <style>
    body {background-image: url(url immagine); background-
    attachment:fixed;color:
    white;}
    </style>


  14. Inserire una soundtrack

    Il tag embed funge come mezzo per inserire un file
    multimediale, di tipo audio oppure video, in una pagina HTML. I
    formati musicali attualmente accettati sono mp3, mp4
    e midi.
    La sintassi è la seguente:


    <embed src="canzone.mp3"></embed>


  15. NOTA BENE: Il sito href="https://www.onlinevideoconverter.com/it/video-
    converter" tag="_new">onlinevideoconverter
    permette di
    convertire video di YouTube in MP4 o MP3. Per hostare la propria
    canzone si consiglia l'utilizzo di Altervista in quanto in grado di
    supportare un maggior tipo di file musicali.