Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • A HTMLmetlasd

    Cargado por

    Daniel Reyes
    6 vistas5 páginas
    apuntes

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    apuntes

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    6 vistas5 páginas

    A HTMLmetlasd

    Cargado por

    Daniel Reyes
    apuntes

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    HTML

    Todo documento hecho en HTML5 comienza con una declaración de qué tipo de
    documento es…

    Estructura

    Los documentos html tienen una estructura que le permite al browser entenderlo,

     Head. El head es la sección que tiene la información de la página completa,


    es información comú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 página misma, es información “tras bambalinas”.
    o Es muy importante que en el HEAD se encuentre el title que es lo
    que se muestra en la pestaña del browser. Para que sea un buen title
    debe ser descriptivo de la página como también de la sección. Ej.
    “orquesta wasabi oficial” y en la sección banda es “banda ⎮orquesta
    wasabi oficial”. Esto es lo que usa google para definir si una página es
    relevante en su motor de búsqueda con un límite de 66 caracteres.
    El head comienza con <head> y termina con </head>

     Body. La sección body es “la página”, donde está toda la información visible
    (excepto el title), las imágenes, la tipografía, colores, etc.
    Abre con <body> y cierra con </body>.

    Un ejemplo de un documento HTML es.

    <!doctype html>
    <html>
    <head>
    <title>mi primera página</title>
    </head>
    <body>
    <div>soy amabile</div>
    </body>
    </html>

    Esta sería una página que de título tendría “mi primera página” y lo que se mostraría
    en la página misma sería “soy amabile”

    Tags
    Las páginas tienen varios elementos que llamados Tags. Entre ellos están.

    <a> Anchor  hace un link a otra sección o página del mismo documento.

    <div> sección  es una sección de la página como Headlines, menú, etc.

    <img> imagen

    <link> link a otra página 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 más
    eficientes igual que a los usuarios. También ayuda para que sea más rápido y eficiente
    el mantenimiento de la página.

    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 página… <span> permite poner cosas al lado.

    Introducir espacios.
    <br> funciona como un “enter”

    <!doctype html>
    <html>
    <head>
    <title>mi primera página</title>
    </head>
    <body>
    <h1>primer título</h1>
    <div>soy amabile</div>
    <br>
    <br>
    <br>
    <br>
    <h2>segundo título</h2>
    <span>muy amabile</span>
    </body>
    </html>

    Insertar comentarios.
    Sirven para ordenar el código, no se ven en la página solo en el código.
    Los comentarios son de acceso público a si que NUNCA deben incluir información
    persona o confidencial.
    Comienzan con <!—y se cierran con -->

    <!doctype html>
    <html>
    <head>
    <title>mi primera página</title>
    </head>
    <body>
    <h1>primer título</h1>
    <div>soy amabile</div>
    <br>
    <br>
    <br>
    <br>
    <!--este título es super lindi -->
    <h2>segundo título</h2>
    <span>muy amabile</span>
    </body>
    </html>

    Tablas.
    <!doctype html>
    <html>
    <head>
    <title>mi primera página</title>
    </head>
    <body>
    <h1>tabla 1</h1>
    <table>
    <tr>
    <td>código de aeropuerto</td>
    <td>ciudad</td>
    </tr>
    <tr>
    <td>CWA</td>
    <td>central Wisconsin</td>
    </tr>
    <tr>
    <td>ORD</td>
    <td>Chicago O’hare</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 página</title>
    </head>
    <body>
    <h1>tabla 1</h1>
    <table border=”1”>
    <tr>
    <td>código de aeropuerto</td>
    <td>ciudad</td>
    </tr>
    <tr>
    <td>CWA</td>
    <td>central Wisconsin</td>
    </tr>
    <tr>
    <td>ORD</td>
    <td>Chicago O’hare</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 función, esto define de mejor


    forma como se va a comportar.

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

    También podría gustarte