Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML 5

    Caricato da

    Daniel Reyes
    5 visualizzazioni5 pagine
    html apuntes

    Titolo originale

    html 5

    Copyright

    © © All Rights Reserved

    Formati disponibili

    RTF, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    html apuntes

    Copyright:

    © All Rights Reserved
    Scarica in formato RTF, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    5 visualizzazioni5 pagine

    HTML 5

    Caricato da

    Daniel Reyes
    html apuntes

    Copyright:

    © All Rights Reserved
    Scarica in formato RTF, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    HTML

    Todo documento hecho en HTML5 comienza con una declaracio n de que tipo de
    documento es

    <!doctype html>

    DEBE comenzar con este comando que le dice al browser que es un archivo HTML

    Las declaraciones en html siempre esta n encerradas en < y >, y tiene un inicio y un
    final

    El root statement de un documento html es

    <html>

    y cuando finaliza el archivo se cierra con

    </html>

    todo lo que esta entre medio es el contenido del documento.

    Estructura

    Los documentos html tienen una estructura que le permite al browser entenderlo,
    los 3 componentes principales son:

    Root Element. Es el que envuelve el documento (no es


    realmente una seccio n). Comienza con <html> y cierra con </html>

    Head. El head es la seccio n que tiene la informacio n de la


    pa gina completa, es informacio n comu n para todo el documento. Puede ser
    muy extensiva y abarca cosas como el idioma, si usa otros programas, etc.
    No es lo que se ve en la pa gina misma, es informacio n tras bambalinas.
    o Es muy importante que en el HEAD se encuentre el
    title que es lo que se muestra en la pestan a del browser. Para que sea
    un buen title debe ser descriptivo de la pa gina como tambie n de la
    seccio n. Ej. orquesta wasabi oficial y en la seccio n banda es banda
    orquesta wasabi oficial. Esto es lo que usa google para definir si una
    pgina es relevante en su motor de bsqueda con un lmite de 66
    caracteres.
    El head comienza con <head> y termina con </head>

    Body. La seccin body es la pgina, donde est toda la


    informacin visible (excepto el title), las imgenes, la tipografa, colores, etc.
    Abre con <body> y cierra con </body>.

    Un ejemplo de un documento HTML es.

    <!doctype html>
    <html>
    <head>
    <title>mi primera pgina</title>
    </head>
    <body>
    <div>soy amabile</div>
    </body>
    </html>

    Esta sera una pgina que de ttulo tendra mi primera pgina y lo que se mostrara
    en la pgina misma sera soy amabile

    Tags

    Las pginas tienen varios elementos que llamados Tags. Entre ellos estn.

    <a> Anchor hace un link a otra seccin o pgina del mismo documento.

    <div> seccin es una seccin de la pgina como Headlines, men, etc.

    <img> imagen

    <link> link a otra pgina fuera del documento

    <p> paragraf un cuadro de texto

    Semantic markup es usar los elementos para lo que son, vale decir, el de texto para
    texto, el de imagen para imagen, etc Esto le ayuda a los buscadores a ser ms
    eficientes igual que a los usuarios. Tambin ayuda para que sea ms rpido y eficiente
    el mantenimiento de la pgina.

    Introducir texto.
    Hay 3 tags buenos para introducir grandes porciones de texto, estos son:
    <p>
    <span>
    <div>

    Para poner Headings se usa <h1>, <h2>, hasta <h6>

    <p> y <div> usan todo el largo de la pgina <span> permite poner cosas al lado.

    Introducir espacios.
    <br> funciona como un enter

    <!doctype html>
    <html>
    <head>
    <title>mi primera pgina</title>
    </head>
    <body>
    <h1>primer ttulo</h1>
    <div>soy amabile</div>
    <br>
    <br>
    <br>
    <br>
    <h2>segundo ttulo</h2>
    <span>muy amabile</span>
    </body>
    </html>

    Insertar comentarios.
    Sirven para ordenar el cdigo, no se ven en la pgina solo en el cdigo.
    Los comentarios son de acceso pblico a si que NUNCA deben incluir informacin
    persona o confidencial.
    Comienzan con <!y se cierran con -->

    <!doctype html>
    <html>
    <head>
    <title>mi primera pgina</title>
    </head>
    <body>
    <h1>primer ttulo</h1>
    <div>soy amabile</div>
    <br>
    <br>
    <br>
    <br>
    <!--este ttulo es super lindi -->
    <h2>segundo ttulo</h2>
    <span>muy amabile</span>
    </body>
    </html>

    Tablas.
    <!doctype html>
    <html>
    <head>
    <title>mi primera pgina</title>
    </head>
    <body>
    <h1>tabla 1</h1>
    <table>
    <tr>
    <td>cdigo de aeropuerto</td>
    <td>ciudad</td>
    </tr>
    <tr>
    <td>CWA</td>
    <td>central Wisconsin</td>
    </tr>
    <tr>
    <td>ORD</td>
    <td>Chicago Ohare</td>
    </tr>
    <tr>
    <td>LHR</td>
    <td>London Heathrow</td>
    </tr>
    </table>
    </body>
    </html>

    para agregar bordes a la tabla

    <!doctype html>
    <html>
    <head>
    <title>mi primera pgina</title>
    </head>
    <body>
    <h1>tabla 1</h1>
    <table border=1>
    <tr>
    <td>cdigo de aeropuerto</td>
    <td>ciudad</td>
    </tr>
    <tr>
    <td>CWA</td>
    <td>central Wisconsin</td>
    </tr>
    <tr>
    <td>ORD</td>
    <td>Chicago Ohare</td>
    </tr>
    <tr>
    <td>LHR</td>
    <td>London Heathrow</td>
    </tr>
    </table>
    </body>
    </html>

    al agregarle el border=1 se le agrega un Atributo a la funcin, esto define de mejor


    forma como se va a comportar.

    <img>
    Para agregar imgenes. No necesita cerrarlo pq no tiene contenido propio, solo hace
    referencia a otro contenido del root.

    Potrebbero piacerti anche