Scribd Logo
Carica

Benvenuto in Scribd!

  • CU00726B Capas HTML Etiquetas DIV SPAN Ejemplos Maquetar Estructura Paginas

    Caricato da

    sonibox
    30 visualizzazioni4 pagine

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    30 visualizzazioni4 pagine

    CU00726B Capas HTML Etiquetas DIV SPAN Ejemplos Maquetar Estructura Paginas

    Caricato da

    sonibox

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    Capas en HTML. Etiquetas DIV y SPAN. Estructurando las pginas.

    APRENDERAPROGRAMAR.COM

    CAPAS EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS DE USO. MAQUETAR O DAR ESTRUCTURA A LAS PGINAS WEB. (CU00726B)

    Seccin: Cursos Categora: Tutorial bsico del programador web: HTML desde cero Fecha ltima actualizacin: 2012 Resumen: Entrega n26 del Tutorial bsico HTML desde cero.

    aprenderaprogramar.com, 2006-2012

    Autor: Enrique Gonzlez Gutirrez

    Capas en HTML. Etiquetas DIV y SPAN. Estructurando las pginas.

    CAPAS EN HTML Las capas son unos recuadros, espacios rectangulares o contenedores que pueden colocarse en cualquier parte de la pgina. En ellas, podemos insertar contenido HTML. Su utilidad principal es visual, permitiendo organizar y dar estructura y diseo a las pginas HTML.

    ETIQUETA DIV Podemos insertar una capa a travs de las etiquetas <div> y </div> A travs del atributo style se establecen las propiedades de la capa. Imaginemos que queremos crear una pgina web con 3 partes diferenciadas: cabecera, cuerpo y pie. Crea un archivo html con el siguiente cdigo y visualzalo en tu navegador.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo etiqueta div - aprenderaprogramar.com</title> </head> <body> <div style="border: 1px solid red;"> Cabecera de la pgina. </div> <div style="border: 1px solid green;"> Cuerpo de la pgina. </div> <div style="border: 1px solid blue;"> Pie de la pgina </div> </body> </html> 4.01 Transitional//EN"

    Como podemos observar, hemos creado 3 capas (rectngulos) cada una con un borde de distinto color. Y lo ms importante, le hemos dado estructura a la pgina y un diseo muy sencillo y bsico.
    aprenderaprogramar.com, 2006-2012

    Capas en HTML. Etiquetas DIV y SPAN. Estructurando las pginas.

    Ahora si queremos cambiar los estilos de la cabecera, al tener bien definida y estructurada la pgina HTML en capas, simplemente realizamos el siguiente cambio:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo etiqueta div - aprenderaprogramar.com</title> </head> <body> <div style="text-align: center; font-size: 60px; border: 1px solid red;"> Cabecera de la pgina. </div> <div style="border: 1px solid green;"> Cuerpo de la pgina. </div> <div style="border: 1px solid blue;"> Pie de la pgina </div> </body> </html>

    Escribe el cdigo anterior, gurdalo en un archivo html y visualzalo en tu navegador.

    Hemos aumentado el tamaa de la fuente (letra) de la cabecera y, adems, hemos centrado el texto, simplemente cambiando los estilos de la capa (div) que contena a la cabecera. Por tanto, la principal utilidad de las capas, como ya mencionamos antes, es la de poder separar por partes la pgina HTML (estructurar) para que cada parte se comporte con un estilo diferente (diseo).

    ETIQUETA SPAN La etiqueta span al igual que cualquier etiqueta en HTML tiene su etiqueta de apertura <span> y su respectiva etiqueta de cierre </span>. Qu utilidad tiene? La etiqueta span sirve para dar distintos estilos a los textos que se encuentren dentro de una misma capa (div). Imaginemos que en el ejemplo anteriormente mostrado, dentro de la cabecera cuya fuente es de color negro, quisiramos aadir texto de distintos colores pero que ese texto perteneciera a la misma capa de la cabecera. Para ello, utilizaramos la etiqueta span.

    aprenderaprogramar.com, 2006-2012

    Capas en HTML. Etiquetas DIV y SPAN. Estructurando las pginas.

    Escribe el siguiente cdigo, gurdalo en un archivo html y visualzalo en tu navegador.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo etiqueta span - aprenderaprogramar.com</title> </head> <body> <div style="text-align: center; font-size: 60px; border: 1px solid red;"> Cabecera <span style="color: green;">de</span> la <span style="color: orange;">pgina</span>. </div> <div style="border: 1px solid green;"> Cuerpo de la pgina. </div> <div style="border: 1px solid blue;"> Pie de la pgina </div> </body> </html>

    Como podemos observar, la utilidad principal de la etiqueta span es la de dar estilos a porciones de texto dentro de una misma capa (div).

    ACLARACIONES Para poder aprovechar todo el potencial de este par de etiquetas, deberamos tener un buen conocimiento de maquetacin, diseo y uso de hojas de estilos (CSS). En este curso estos temas no se van a tratar, aunque se mencionan de forma sencilla y simplificada. El verdadero potencial de estas etiquetas lo obtenemos cuando utilizamos herramientas ms avanzadas como CSS avanzado, pero desde el punto de vista didctico, lo adecuado es ir aprendiendo los aspectos ms bsicos para luego introducir los ms complejos. No te preocupes por hacer pginas complejas en este momento.

    Prxima entrega: CU00727B Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
    http://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=69&Itemid=192
    aprenderaprogramar.com, 2006-2012

    Potrebbero piacerti anche