EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            contenido incrustado
            Etiquetas html para el contenido incrustado
            05/09/2019
            Marcadores html
            Marcadores en HTML. Enlaces locales para movernos fácilmente en una página
            05/09/2019

            Elementos de ordenación

            elementos de ordenación html5

            elementos de ordenación html5

            Tabla de contenidos

            • 15. Elementos de ordenación en HTML5
            • 15.1. Elementos en bloque o block
            • 15.2. Elementos en línea o inline
            • 15.3. Elementos flotantes o float
            • 15.4. Posicionamiento absoluto y relativo

            15. Elementos de ordenación en HTML5

            En el proceso de maquetación de una web es necesario organizar elementos tales como imágenes, textos o tablas. Tal y como vimos en el punto de la evolución de la web, en un primer momento los elementos de una página web se organizaban en tablas. En ese momento no había ni hojas de estilo CSS ni ninguna otra herramienta que nos permitiera poner varios elementos seguidos uno detrás del otro.

            En la actualidad, gracias a las hojas de estilo podemos crear nuestros propios estilos para maquetar cualquier página web. Para ello, necesitaremos conocer cómo se ordenan los elementos en un documento web.

            15.1. Elementos en bloque o block

            En un documento web lo más normal es ir posicionando los elementos de izquierda a derecha y de arriba a abajo dentro de la etiqueta <body>. En el caso de elementos en bloque o block como <div>, <table>, <list>, etc., estos ocupan todo el ancho del contenedor o elemento padre.

            elemento bloque html
            Figura 15.1. Elementos en bloque

            Código fuente:

            <div>Elemento 1</div>
            <div>Elemento 2</div>
            <div>Elemento 3</div>

            Etiquetas HTML en bloque: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

            15.2. Elementos en línea o inline

            Los elementos en línea o inline como <span>, <a>, <img>, etc., ocupan sólo el espacio delimitado por las etiquetas que definen el elemento en línea.

            elemento en linea html
            Figura 15.2. Elementos en línea

            Código fuente:

            <span>Elemento 1</span>
            <span>Elemento 2</span>
            <span>Elemento 3</span>

            Etiquetas HTML en línea: <a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

            15.3. Elementos flotantes o float

            El comportamiento de los elementos se puede modificar haciendo que floten. Cuando a un elemento html se le aplica un estilo con la propiedad de flotar o float, el elemento sale del flujo normal y aparece posicionado a la izquierda o a la derecha de su contenedor, donde el resto de elementos de la página se posicionarán alrededor. Las propiedades de los elementos flotantes se verán a fondo en la siguiente unidad.

            15.4. Posicionamiento absoluto y relativo

            Los elementos pueden estar posicionados de forma absoluta o relativa.

            • Posicionamiento absoluto: el elemento siempre se encuentra en el mismo lugar.
            • Posicionamiento relativo: el elemento se posiciona según otros elementos.
            Compartir

            UD2. HTML

            • 1. Lenguaje de marcas HTML
            • 2. Estructura y elementos semánticos
            • 3. Contenido y texto
            • 4. Formularios
            • 5. Tablas de contenido
            • 6. Contenido incrustado
            • 7. Elementos de ordenación
            • 8. Marcadores en HTML
            • 9. Factores HTML clave para el SEO
            • 10. Test de verificación HTML y herramientas útiles
            • 11. Marcos o frames, una tecnología obsoleta
            • 12. Etiquetas HTML para acceso directo en Android e iPhone
            • 13. Metaetiquetas o metatags para redes sociales
            • 14. Cómo usar Github y SourceTree para publicar contenido
            • 15. Repositorio Git en Visual Studio Code
            • 16. Resumen HTML
            • 17. Referencias y recursos HTML

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results