Welcome To HTML! - Parte 2

« Older   Newer »
 
  Share  
.
  1.     +1   -1
     
    .
    Avatar

    Where there's a user input, there's a vulnerability.

    Group
    Amministratori
    Posts
    11,133
    Grazie ricevuti
    +49

    Status
    Anonymous
    Salve a tutti, sono sempre io, Alexander. In questa "Parte 2" firmata NextGenerations, parleremo un po' delle strutture, formazioni e formattazione del testo. Verranno elencati alcuni esempi. Come la precedente volta, vi consiglio di scaricare Adobe Dreamweaver, per farvi aiutare nel comporre il testo della vostra pagina. Tale parte non avrà presumibilmente nessuno screen, poiché non necessari.

    Are you ready?
    Let's Go!

    Partiamo dalla formattazione base: Bold (grassetto), Italic (Corsivo) e Underline (sottolineato):

    I codici sono semplici e sono i seguenti e sono presentati con il TAG di chiusura.

    CODICE
    <b></b>

    Bold.

    CODICE
    <i></i>

    Italic.

    CODICE
    <u></u>

    Underline.

    Le liste:

    Le liste possono essere numeriche, letterali, ordinate oppure no.

    Per una lista non ordinata, il codice è il seguente:

    CODICE
    <ul>
    <li>CONTENUTO</li>
    <li>CONTENUTO2</li>
    <li>CONTENUTO3…</li>
    </ul>


    • CONTENUTO

    • CONTENUTO2

    • CONTENUTO3…


    "UL" è l'abbreviazione di "Unordered List", "LI", invece è l'abbreviazione di "LIST".

    Per una lista Ordinata il codice è il seguente:

    CODICE
    <ol>
    <li>CONTENUTO</li>
    <li>CONTENUTO2</li>
    <li>CONTENUTO3…</li>
    </ol>


    1. CONTENUTO

    2. CONTENUTO2

    3. CONTENUTO3…


    "OL" significa "ORDERED LIST".

    Una lista che però ha dei rientri, ad esempio per le descrizioni ha un codice un po' diverso.
    Viene chiamata "Definition List" (dl):

    CODICE
    <dl>
    <dt>Caffè</dt>
    <dd>- Bevanda calda e nera.</dd>
    <dt>Latte</dt>
    <dd>- Bevanda bianca e fredda.</dd>
    </dl>



    Caffè

    - Bevanda calda e nera.

    Latte

    - Bevanda bianca e fredda.




    Notasi, Forumcommunity, purtroppo sembra non supportarli nelle discussioni, pertanto l'effetto sarà il seguente:



    "dt", indica "definition items", ovvero gli oggetti che avranno la descrizione.
    "dd", indica "definition description", le descrizioni.
    "dl", indica "definition list", lista delle descrizioni.


    Composizione: i paragrafi

    Per "Paragrafi" che si intende? Delle sezioni di testo, definite da delle proprietà.

    Una testo "paragrafato", viene scritto così:

    CODICE
    <p>Il mio paragrafo</p>


    Ovviamente, scrivere il tag paragrafo, non è necessario, ma nemmeno obbligatorio. Se dobbiamo, però, definire delle proprietà come quella della disposizione del testo, è obbligatorio metterlo.

    Testo Centrato:

    CODICE
    <p align="center"></p>


    Testo Allineato a sinistra:

    CODICE
    <p align="left"></p>


    Testo Allineato a destra:

    CODICE
    <p align="right"></p>


    Testo Giustificato:

    CODICE
    <p align="justify"></p>


    "Align" è l'unica proprietà disponibile per "< p >". Tuttavia il tag "< p >", è oramai obsoleto, e non viene più supportato dall'HTML 5, dove viene sostituito con altri caratteri, come "< span >". La funzione "span", nell'HTML va a richiamare e ad adattarsi allo stile dei CSS.

    Ad esempio:

    Questo codice serve per mettere una scritta, in HTML 4 e precedenti, colorata:


    CODICE
    <font color="orange">Scritta</font>


    In HTML 5 il codice diventa sostanzialmente diverso: l'utilizzo del carattere "=", diventa nettamente minore, lasciando spazio all'attributo "style", di cui abbiamo già parlato nella precedente lezione, che rimane uno dei pochi attributi ad usare il simbolo di eguaglianza, lasciando posto ai "due punti".

    CODICE
    <span style=color:#FF9900>Scritta</span>


    Come viene mostrato nel secondo codice, il colore è messo sotto forma di "Esadecimale". Entrambi i modi possono essere usati in tutti e due i codici, solo che il primo ha delle tonalità precise mentre il secondo ha tantissime tonalità di colore, ognuna inizia con "#" e ha un codice a 6 cifre/lettere. Tuttavia, tale codice può essere ridotto a 3 cifre:

    Ad esempio, bianco si scrive #FFFFFF, pertanto può essere ridotto a #FFF.
    Nero si scrive #000000, è può essere scritto #000.
    Arancione, il codice di prima, si scrive: #FF9900, pertanto il browser riconoscerà anche #F90.

    Ovviamente per funzionare, anch'esso richiede del Tag di chiusura.
    Con < span >, a differenza di altri, puoi modellare il testo a tuo puro piacimento, con i comandi CSS.

    Attenzione, tale TAG, non supporta l'attributo in CSS "align" (align:center, ad esempio).

    Per ricorrere ad altri problemi, spesso interviene il carattere "< div > ", un altro tag, dove "Align" è l'unica proprietà disponibile, assieme a "Style", disponibile. Align, non è più supportato da HTML 5, come ho detto prima.

    Per Gli attributi globali per < span > e anche < div >, vi consiglio di visitare la seguente pagina (in inglese).


    Invece, per andare a capo in un testo, si usa il seguente TAG:

    CODICE
    <br>


    Questo è un altro tag che non necessita del compagno di chiusura.


    Headings, l'importanza dei paragrafi.

    Cosa si intende per "Headings"? In inglese significa "voci". In HTML, si chiamano "Headings" quelle voci, appunto, scritte tra i 6 TAG disponibili:

    CODICE
    <h1> <h2> <h3> <h4> <h5> <h6>

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>


    Notasi, Forumcommunity, purtroppo sembra non supportarli nelle discussioni, pertanto l'effetto sarà il seguente:



    Gli Headings, possono essere modificati tramite CSS oppure comando <style>, come abbiamo detto nella prima lezione.

    CODICE
    <style>
    h1{color:blue}
    </style>




    /GUIDA DA COMPLETARE///

    Edited by AnÐer - 14/10/2012, 23:51
     
    Top
    .
  2.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Member
    Posts
    10,796
    Grazie ricevuti
    +3

    Status
    Anonymous
    In pratica la formattazione ed il posizionamento degli elementi nella pagina vengono affidati ai CSS.
     
    Top
    .
  3.     +1   -1
     
    .
    Avatar

    Where there's a user input, there's a vulnerability.

    Group
    Amministratori
    Posts
    11,133
    Grazie ricevuti
    +49

    Status
    Anonymous
    Tecnicamente si, e poi è consigliato tantissimo, perché i gli attributi che esistono non sono più di tanti, mentre nei CSS sono tantissimi, e negli comprensibili. E' solo una domanda la tua, un dubbio o cosa?
     
    Top
    .
2 replies since 14/10/2012, 01:21   113 views
  Share  
.
Top