Scribd Logo
Upload

Welcome to Scribd!

  • HTML5 Clase2

    Uploaded by

    Javier Mollinedo
    5 views5 pages
    HTML5 INICIACIÓN - EJEMPLO DE ESTRUCTURA

    Original Title

    HTML5-clase2

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML5 INICIACIÓN - EJEMPLO DE ESTRUCTURA

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views5 pages

    HTML5 Clase2

    Uploaded by

    Javier Mollinedo
    HTML5 INICIACIÓN - EJEMPLO DE ESTRUCTURA

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    ESUPTEC Pgina 1 de 5

    HTML5 CLASE 2

    CREACION DE MAQUETACION DE ESTRUCTURAS CON USO DE DIVS Y CSS

    EJEMPLO 1

    1. CREAR LA SIGUIENTE ESTRUCTURA HTML5

    Etiquetas HTML5 Nuevas

    Representa el contenido principal de un


    <body> documento HTML. Solo hay un
    elemento <body> en un documento.

    Define una seccin en un documento.


    <section>

    Define una seccin que solamente


    <nav> contiene enlaces de navegacin

    Define contenido autnomo que podra


    existir independientemente del resto del
    <article>
    contenido.

    Define algunos contenidos vagamente


    <aside> relacionados con el resto del contenido
    ESUPTEC Pgina 2 de 5

    de la pgina. Si es removido, el contenido


    restante seguir teniendo sentido

    Los elemento de cabecera implementan


    seis niveles de cabeceras de
    documentos; <h1> es la de mayor
    <h1>,<h2>,<h3>,<h4>,<h5>,<h6> y <h6> es la de menor impotancia. Un
    elemento de cabecera describe
    brevemente el tema de la seccin que
    introduce.

    Define la cabecera de una pgina o


    seccin. Usualmente contiene un
    <header> logotipo, el ttulo del sitio Web y una tabla
    de navegacin de contenidos.

    Define el pie de una pgina o seccin.


    Usualmente contiene un mensaje de
    derechos de autora, algunos enlaces a
    <footer>
    informacin legal o direcciones para dar
    informacin de retroalimentacin.

    Define una seccin que contiene


    <address>
    informacin de contacto.

    EJEMPLO 2
    ESUPTEC Pgina 3 de 5

    EJEMPLO 3

    Negrita HTML
    Existen dos etiquetas que harn que nuestro texto se convierta en negrita. La utilizacin
    de cualquiera de ellas es indiferente. Puedes usar la que prefieras.

    La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aqu va un ejemplo:

    Esta palabra la vamos a poner en <b>negrita</b> y esta otra <strong>tambin</strong>

    Esta palabra la vamos a poner en negrita y esta otra tambin

    Cursiva HTML
    Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla
    con la etiqueta </i>).

    Tambin podemos utilizar la etiqueta <em>. Como en el caso de la negrita, es


    indiferente el uso de una u otra. Aqu os dejo un ejemplo:

    Esta palabra la vamos a poner en <i>cursiva</i> y esta otra <em>tambin</em>

    Esta palabra la vamos a poner en cursiva y esta otra tambin


    ESUPTEC Pgina 4 de 5

    Subrayado HTML
    Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la
    etiqueta <u> y cerrarlo con su correspondiente etiqueta. O sea, </u>. As
    subrayaramos una frase importante:

    <u>As subrayaramos una frase importante</u>

    As subrayaramos una frase importante

    Texto con espaciado simple o TT


    TT son las iniciales de teletype. Utilizando esta etiqueta conseguiremos un espaciado
    simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la
    cerraremos con </tt>.

    <tt>Esta frase la vamos a escribir de forma espaciada </tt>

    Esta frase la vamos a escribir de forma espaciada

    Palabras ms grandes o ms pequeas


    Puede que en una frase queramos destacar un palabra por medio de una variacin
    de tamao sin necesidad de utilizar los encabezados(los explicaremos ms adelante).
    Pues esta variacin de tamao la conseguiremos gracias a las etiquetas <big> y
    <small>.

    Sus propios nombres en ingls nos indican cules sern sus funciones: <big> agrandar
    el texto y <small> lo disminuir.

    Cada vez que escribamos una etiqueta, haremos el texto un punto ms grande. Pero
    estas etiquetas tambin la podemos combinar, por lo que si escribimos dos veces la
    etiqueta <big>, haremos crecer la palabra dos puntos.

    Un ejemplo sera el siguiente:

    Esta palabra se va a escribir <small>pequeita</small>, esta se va a escribir <big>ms


    grande</big> y sta <big><big>ms grande an</big></big>.

    Esta palabra se va a escribir pequeita, esta se va a escribir ms grande y sta ms


    grande an.

    Superndices y subndices HTML


    Mediante el Html tambin podemos escribir frmulas matemticas. Gracias a las
    etiquetas siguientes podrs escribir subndices y superndices fcilmente. La etiqueta
    <sub> te servir para escribir un subndice y <sup> ser tu etiqueta para un superndice.

    As nos queda un ejemplo como el siguiente:

    Gracias a estas etiquetas podemos escribir cualquier formula matemtica como esta:
    H <sub>2</sub> O o nmeros elevados a potencias 7<sup>3</sup>.

    Gracias a estas etiquetas podemos escribir cualquier formula matemtica como esta:
    H 2 O o nmeros elevados a potencias 73.
    ESUPTEC Pgina 5 de 5

    Texto tachado HTML


    Existen tres etiquetas diferentes que nos servirn para conseguir que nuestro
    texto se quede tachado. Hablamos de las etiquetas <strike>, <s> y <del>.
    Ambas nos ofrecen el mismo resultado. Aqu tienes la muestra:

    Si la palabra no me gusta la puedo tachar <strike>as</strike>, <s>as</s> o


    <del>as</del>. Lo mismo me da!

    Si la palabra no me gusta la puedo tachar as, as o as. Lo mismo me da!

    You might also like