Elementos HTML (En Bloque y en Linea)

GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Elementos en bloque y en línea en HTML

Cada elemento HTML tiene un valor de visualización predeterminado según el tipo. Los valores de
visualización predeterminados para la mayoría de los elementos son: en bloque o en línea.
Elementos en nivel de bloque

Un elemento en nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho
disponible (se extiende hacia la izquierda y hacia la derecha todo lo que puede). A continuación
presentaremos los elementos más comunes en el nivel bloque muchos de ellos ya fueron descritos
anteriormente, por lo que ampliaremos los no descritos con anterioridad.
Elemento “address”
El elemento <address> establece una dirección de contacto de un autor o propietario de un
artículo o documento, El elemento <address> generalmente se muestra en cursiva. La mayoría
de los navegadores agregarán un salto de línea antes y después del elemento.
Elemento “article”
La etiqueta <article> especifica un contenido independiente y autónomo. Un artículo debería
tener sentido por sí mismo y debería ser posible distribuirlo independientemente del resto del
sitio. Las fuentes potenciales para el elemento <article>: Publicación del foro, Entrada en el
blog, Noticia, Comentario, etc.
Elemento “blockquote”
La etiqueta <blockquote> especifica una sección que se cita desde una fuente externa. Los
navegadores suelen agregar sangría a los elementos de <blockquote>.
Elemento “canvas”
La etiqueta <canvas> se usa para dibujar gráficos, sobre la marcha, a través de scripts
(generalmente JavaScript, tópico de html avanzado). La etiqueta <canvas> es solo un contenedor
para gráficos, debe usar un script para dibujar realmente los gráficos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<canvas id="c1">Tu navegador no soporta canvas</canvas>
<script>
var c = document.getElementById("c1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect (0,0,80,100);
</script>
<p><strong>Note:</strong>La etiqueta canvas no es soportada por Explorer 8 o
versiones anteriores</p>
</body>
</html>
Código 74.html
GERENCIA VIRTUAL
Elemento “dd”
La etiqueta <dd> se usa para describir un término en una lista de descripción. La etiqueta <dd> se
usa junto con <dl> (define una lista de descripción) y <dt> (define términos). Dentro de una
etiqueta <dd> puedes poner párrafos, saltos de línea, imágenes, enlaces, listas, etc.
Elemento “div”
La etiqueta <div> define una división o una sección en un documento HTML. El elemento <div>
a menudo se usa como un contenedor para que otros elementos HTML los estilicen con CSS o para
realizar ciertas tareas con JavaScript. (más adelante veremos lo veremos de otra perspectiva)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#3399ff">
<h2>Este es un encabezado</h2>
<p>Este es un párrafo.</p>
</div>
</body>
</html>
Código 75.html
Elemento “dl”
La etiqueta <dl> define una lista con descripción. La etiqueta <dl> se usa junto con <dt> (define
términos) y <dd> (describe cada término).
Elemento “dt”
La etiqueta <dt> define un término en una lista con descripción. La etiqueta <dt> se usa junto
con <dl> (define una lista con descripción) y <dd> (describe cada término).
Elemento “fieldset”
La etiqueta <fieldset> es utilizada para agrupar elementos relacionados dentro de un
formulario. La etiqueta <fieldset> dibuja una caja alrededor de los elementos relacionados.
GERENCIA VIRTUAL
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>Datos Personales</legend>
Nombre: <input type="text"><br>
e-mail: <input type="text"><br>
</fieldset>
</form>
</body>
</html>
Código 76.html
Elemento “figure”
La etiqueta <figure> especifica contenido autónomo, como ilustraciones, diagramas, fotos, listas
de códigos, etc. Si bien el contenido del elemento <figure> está relacionado con el flujo
principal, su posición es independiente del flujo principal, y si se elimina, no debería afectar el flujo
del documento.
Elemento “figcaption”
La etiqueta <figcaption> define un título para un elemento <figure>. <figcaption> se
puede colocar como el primer o último elemento secundario del elemento <figure>.
A continuación veremos un código en donde están contenidas estas dos etiquetas:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>A continuación un ejemplo de “figcaption”</p>
<figure>
<img src="imagenes/marilin.jpg type="Marilin" width="80" height="100">
<figcaption>Fig 1 – Marilin Monroe</figcaption>
</figure>
<p><strong>Note:</strong>La etiqueta figcaption no es soportada por Explorer 8 o
</body>
</html>
Código 77.html
GERENCIA VIRTUAL
Elemento “footer”
La etiqueta <footer> define un pie de página para un documento o sección. Un elemento
<footer> debe contener información sobre su elemento contenedor.
Un elemento <footer> generalmente contiene: información de autoría, información registrada,
Información del contacto, mapa del sitio, enlaces de arriba a arriba, documentos relacionados, etc.
Pueden existir varios elementos <footer> en un documento.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<footer>
<p>Publicado por: Gerencia Virtual </p>
<p><a href=”mailto: info@gerenciavirtual.net.ve”>Gerencia Virtual</a></p>
</footer>
<p><strong>Nota:</strong>La etiqueta footer no es soportada por Explorer 8 o
</body>
</html>
Código 78.html
Elemento “form”
La etiqueta <form> se usa para crear un formulario HTML para la entrada del usuario. El elemento
<form> puede contener uno o más de los siguientes elementos de formulario: <input>,
<textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>, etc.
A este elemento en especial le dedicaremos una sección completa más adelante.
Elemento “h1 – h6”

Las etiquetas <h1> a <h6> se usan para definir encabezados HTML. <h1> define el encabezado
más importante. <h6> define el encabezado menos importante.
Elemento “header”
El elemento <header> representa un contenedor para contenido introductorio o un conjunto de
enlaces de navegación. Un elemento <header> generalmente contiene: uno o más elementos de
encabezado (<h1> - <h6>), logotipo o icono, información de autoría.
Puede tener varios elementos <header> en un documento.
Nota: Una etiqueta <header> no puede colocarse dentro de un elemento <footer>,
<address> u otro <header>.
Elemento “hr”
La etiqueta <hr> define un salto temático en una página HTML (por ejemplo, un cambio de tema)
creando una línea horizontal que recorre el documento a todo lo ancho.
GERENCIA VIRTUAL
El elemento <hr> se usa para separar el contenido (o definir un cambio) en una página HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tema 1</h1>
<hr>
<h2>Tema 2</h2>
</body>
</html>
Código 79.html
Elemento “li”
La etiqueta <li> define un elemento de la lista. La etiqueta <li> se usa en listas ordenadas
(<ol>), listas desordenadas (<ul>) y en listas de menú (<menú>).
Elemento “main”
La etiqueta <main> especifica el contenido principal de un documento. El contenido dentro del
elemento <main> debe ser exclusivo del documento. No debe contener ningún contenido que se
repita en documentos tales como barras laterales, enlaces de navegación, información de
copyright, logotipos del sitio y formularios de búsqueda.
Nota: No debe haber más de un elemento <main> en un documento. El elemento <main> NO
debe ser un descendiente de un elemento <article>, <aside>, <footer>, <header> o
<nav>.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<main>
<h1>Comienzo del Tema Principal</h1>
<article>
<h2>Descripción del Tema Principal</h2>
<p>1era Línea desarrollo del tema principal.<br>
2da Línea desarrollo del tema principal.</p>
</article>
</main>
</body>
</html>
Código 80.html
GERENCIA VIRTUAL
Elemento “nav”
La etiqueta <nav> define un conjunto de enlaces de navegación. Tenga en cuenta que NO todos
los enlaces de un documento deben estar dentro de un elemento <nav>. El elemento <nav> está
destinado solo al bloque principal de enlaces de navegación.
Los navegadores, como los lectores de pantalla para usuarios con discapacidad, pueden usar este
elemento para determinar si se omite la representación inicial de este contenido.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<a href="inicio.html">Inicio</a> |
<a href="nosotros.html">Nosotros</a> |
<a href="contacto.html">Contacto</a>
</nav>
<p><strong>Note:</strong> La etiqueta nav no es soportada por Explorer 8 o
</body>
</html>
Código 81.html
Elemento “noscript”
La etiqueta <noscript> define un contenido alternativo para los usuarios que tienen scripts
desactivados en su navegador o tienen un navegador que no admite el script. El elemento
<noscript> se puede usar tanto en <head> como en <body>. Cuando se usa dentro del
elemento <head>: <noscript> debe contener solo elementos <link>, <style> y <meta>.
El contenido dentro del elemento <noscript> se mostrará si los scripts no son compatibles o
están deshabilitados en el navegador del usuario.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
document.write("Hola Mundo!!!")
</script>
<noscript> Su navegador no soporta JavaScript<noscript>
<p>Un navegador sin soporte JavaScript deberá enseñar los elementos contenidos
en la etiqueta noscript</p>
</body>
</html>
Código 82.html
Elemento “ol”
La etiqueta <ol> define una lista ordenada. Una lista ordenada puede ser numérica o alfabética.
Use la etiqueta <li> para definir los elementos de la lista.
GERENCIA VIRTUAL
Elemento “output”
La etiqueta <output> representa el resultado de un cálculo (como uno realizado por un script).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
<p><strong>Note:</strong>El elemento output no es soportado en Edge 12 o
versiones de Explorer anteriores</p>
</form>
</body>
</html>
Código 83.html
Elemento “p”
La etiqueta <p> define un párrafo. Los navegadores agregan automáticamente un espacio
(margen) antes y después de cada elemento <p>. Los márgenes se pueden modificar con CSS (con
las propiedades de margen).
Elemento “pre”
La etiqueta <pre> define texto preformateado. El texto en un elemento <pre> se muestra en una
fuente de ancho fijo (generalmente Courier) y conserva espacios y saltos de línea.
Elemento “section”
La etiqueta <section> define secciones en un documento, como capítulos, encabezados, pies de
página o cualquier otra sección del documento.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<h1>Comienzo de la Sección</h1>
<p>1era Línea de la sección.<br>
2da Línea de la sección.</p>
</section>
</body>
</html>
Código 84.html
GERENCIA VIRTUAL
Elemento “table”
La etiqueta <table> define una tabla HTML. Una tabla HTML consta del elemento <table> y
uno o más elementos <tr>, <th> y <td>.
El elemento <tr> define una fila de tabla, el elemento <th> define un encabezado de tabla, y el
elemento <td> define una celda de tabla.
Una tabla HTML más compleja también puede incluir elementos <caption>, <col>,
<colgroup>, <thead>, <tfoot> y <tbody>.
Nota: Las tablas no deben usarse para el diseño de página! Históricamente, algunos autores web
han utilizado mal las tablas en HTML como una forma de controlar su diseño de página. Sin
embargo, hay una variedad de alternativas al uso de tablas HTML para el diseño, principalmente el
uso de CSS.
Elemento “ul”
La etiqueta <ul> define una lista desordenada (con viñetas). Use la etiqueta <ul> junto con la
etiqueta <li> para crear listas desordenadas.
Elemento “ul”
La etiqueta <video> especifica video, como un clip de película u otras transmisiones de video.
Actualmente, hay 3 formatos de video compatibles para el elemento <video>: MP4, WebM y
Ogg:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="320" height="240" >
<source src="video/movie.mp4" type="video/mp4" >
<p><strong>Note:</strong>El elemento video no es soportado por Explorer 8 o
</body>
</html>
Código 85.html
Elementos en línea
Un elemento en línea no comienza en una nueva línea y solo ocupa tanto ancho como sea
necesario.
Elemento “a”
La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo
más importante del elemento <a> es el atributo href, que indica el destino del enlace.
GERENCIA VIRTUAL
Elemento “abbr”
La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM".
Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a
menudo se representan como una serie de letras.
Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de
traducción y motores de búsqueda.
Elemento “acronym”
La etiqueta <acronym> no es compatible con HTML5. Use la etiqueta <abbr> en su lugar. La
etiqueta <acronym> define un acrónimo. Un acrónimo debe deletrear otra palabra. Por ejemplo:
NASA, ASAP, GUI.
Marcar los acrónimos puede proporcionar información útil para navegadores, sistemas de
traducción y motores de búsqueda.
Elemento “b”
La etiqueta <b> especifica el texto en negrita.
Nota: De acuerdo con la especificación HTML 5, la etiqueta <b> debe usarse como ÚLTIMO
recurso cuando ninguna otra etiqueta es más apropiada. La especificación de HTML 5 establece
que los encabezados se denotan con las etiquetas <h1> a <h6>, el texto destacado se debe
denotar con la etiqueta <em>, el texto importante se debe denotar con la etiqueta <strong> y el
texto marcado / resaltado debería usar la etiqueta <mark>.
Elemento “bdo”
“bdo” significa Anulación bidireccional. La etiqueta <bdo> se usa para anular la dirección del texto
actual.
Elemento “big”
La etiqueta <big> no es compatible con HTML5. Use CSS en su lugar. La etiqueta <big> define
texto más grande.
Elemento “br”
La etiqueta <br> inserta un salto de línea único. La etiqueta <br> es una etiqueta vacía, lo que
significa que no tiene una etiqueta de cierre.
Elemento “button”
La etiqueta <button> define un botón en el que se puede hacer clic. Dentro de un elemento
<button> puedes poner contenido, como texto o imágenes. Esta es la diferencia entre este
elemento y los botones creados con el elemento <input>.
Consejo: especifique siempre el atributo de tipo para un elemento <button>. Los diferentes
navegadores usan diferentes tipos predeterminados para el elemento <button>.
Sugerencia: los botones a menudo se diseñan con CSS
Elemento “cite”
La etiqueta <cite> define el título de una obra (por ejemplo, un libro, una canción, una película,
un programa de televisión, una pintura, una escultura, etc.).
GERENCIA VIRTUAL
Elemento “code”
La etiqueta <code> es una etiqueta de frase. Define una pieza de código de computadora.
Sugerencia: esta etiqueta no está en desuso, pero es posible lograr un efecto más rico con CSS.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<em>Texto con énfasis</em><br>
<strong>Texto en negrita</strong><br>
<code>Código de texto</code><br>
<samp>Muestra de salida de programa de computación</samp><br>
<kbd>Entrada por teclado</kbd><br>
<var>Variable</var>
<p><def>HTML</def> es el lenguaje estándar para crear páginas web</p>
</body>
</html>
Código 86.html
Elemento “dfn”
La etiqueta <dfn> representa la instancia de definición de un término en HTML. La instancia de
definición suele ser el primer uso de un término en un documento (ver código 84.html).
Elemento “i”
La etiqueta <i> define una parte del texto en una voz o estado de ánimo alternativo. El contenido
de la etiqueta <i> generalmente se muestra en cursiva o itálica. La etiqueta <i> se puede usar
para indicar un término técnico, una frase de otro idioma, un pensamiento, un nombre de nave,
etc.
Elemento “img”
La etiqueta <img> define una imagen en una página HTML. La etiqueta <img> tiene dos atributos
obligatorios: src y alt.
Nota: Las imágenes no se insertan técnicamente en una página HTML, las imágenes están
vinculadas a páginas HTML. La etiqueta <img> crea un espacio de espera para la imagen a la que
se hace referencia.
Elemento “input”
La etiqueta <input> especifica un campo de entrada donde el usuario puede ingresar datos. Los
elementos <input> se usan dentro de un elemento <form> para declarar controles de entrada
que permiten a los usuarios ingresar datos. Un campo de entrada puede variar de muchas
maneras, dependiendo del atributo de tipo. Este aspecto será abordado a profundidad mas
adelante.
Elemento “kbd”
La etiqueta <kbd> es una etiqueta de frase. Define la entrada del teclado (ver código 84.html).
GERENCIA VIRTUAL
Elemento “label”
La etiqueta <label> define una etiqueta para un elemento <input>. El elemento <label> no
se representa como algo especial para el usuario. Sin embargo, proporciona una mejora de
usabilidad para usuarios de mouse, porque si el usuario hace clic en el texto dentro del elemento
<label>, alterna el control.
El atributo for de la etiqueta <label> debe ser igual al atributo id del elemento relacionado para
unirlos.
Elemento “map”
La etiqueta <map> se usa para definir un mapa de imagen del lado del cliente. Un mapa de imagen
es una imagen con áreas seleccionables. El atributo de nombre requerido del elemento <map>
está asociado con el atributo de mapa de uso <img> y crea una relación entre la imagen y el
mapa. El elemento <map> contiene una serie de elementos <area> que definen las áreas en las
que se puede hacer clic en el mapa de imágenes.
Elemento “object”
La etiqueta <object> define un objeto incrustado dentro de un documento HTML. Utilice este
elemento para incrustar multimedia (como audio, video, applets de Java, ActiveX, PDF y Flash) en
sus páginas web. También puede usar la etiqueta <object> para insertar otra página web en su
documento HTML. Puede usar la etiqueta <param> para pasar parámetros a los complementos
que se han incrustado con la etiqueta <object>.
Elemento “q”
La etiqueta <q> define una cita corta. Loa navegadores normalmente insertan comillas alrededor
de la cita.
Elemento “samp”
La etiqueta <samp> es una etiqueta de frase. Define la salida de muestra de un programa de
computadora.
Elemento “script”
La etiqueta <script> se usa para definir un script del lado del cliente (JavaScript). El elemento
<script> contiene sentencias de scripting o apunta a un archivo de script externo a través del
atributo src. Los usos más comunes para JavaScript son la manipulación de imágenes, la validación
de formularios y los cambios dinámicos de contenido.
Elemento “select”
El elemento <select> se usa para crear una lista desplegable. Las etiquetas <option> dentro
del elemento <select> definen las opciones disponibles en la lista.
GERENCIA VIRTUAL
Elemento “span”
La etiqueta <span> se usa para agrupar elementos en un documento. La etiqueta <span> no
proporciona ningún cambio visual por sí mismo.
Elemento “strong”
La etiqueta <strong> es una etiqueta de frase. Define texto importante.
Elemento “sub”
La etiqueta <sub> define el texto del subíndice. El texto del subíndice aparece medio carácter por
debajo de la línea normal, y a veces se representa con una fuente más pequeña. El texto del
subíndice se puede usar para fórmulas químicas, como H2O.
Consejo: utilice la etiqueta <sup> para definir el texto superpuesto.
Elemento “sup”
La etiqueta <sup> define el texto superíndice. El texto superíndice aparece medio carácter por
encima de la línea normal y, a veces, se representa con una fuente más pequeña. El texto
superíndice se puede usar para notas al pie.
Elemento “textarea”
La etiqueta <textarea> define un control de entrada de texto multilínea. Un área de texto
puede contener un número ilimitado de caracteres y el texto se representa en una fuente de
ancho fijo (generalmente Courier).
El tamaño de un área de texto se puede especificar mediante los atributos cols y rows, o incluso
mejor; a través de las propiedades de alto y ancho de CSS.
Elemento “time”
La etiqueta <time> define una fecha / hora legible por humanos. Este elemento también se
puede usar para codificar fechas y horas en una forma legible por máquina, de modo que los
agentes de usuario pueden ofrecer o agregar recordatorios de cumpleaños o eventos
programados al calendario del usuario, y los motores de búsqueda pueden producir resultados de
búsqueda más inteligentes.
Elemento “var”
La etiqueta <var> es una etiqueta de frase. Define una variable.
GERENCIA VIRTUAL
El Elemento DIV en HTML

El elemento <div> a menudo se usa como un contenedor para otros elementos HTML.
El elemento <div> no tiene atributos necesarios, pero el estilo, la clase y la identificación son
comunes. Cuando se usa junto con CSS, el elemento <div> se puede usar para diseñar bloques de
contenido.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div charset="background-color:black; color:White; padding:20px;">
<h2>Texto en negrita</h2>
<code>Código de texto</code>
<p>Caracas es la ciudad captial de Venezuela. Es una ciudad muy popular, con un
área metropolitana de 4 millones de habitantes.</p>
<p>Fue uno de los primeros asentamientos de la cultura hispana en América.</p>
</div>
</body>
</html>
Código 87.html
El atributo class en HTML

El atributo class especifica uno o más nombres de clase para un elemento HTML.
El nombre de la clase puede ser usado por CSS y JavaScript para realizar ciertas tareas para
elementos con el nombre de clase especificado.
En CSS, para seleccionar elementos con una clase específica, escriba un carácter de punto (.),
Seguido del nombre de la clase.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">Lóndres</h2>
<p>Lóndres es la capital de Inglaterra.</p>
<h2 class="city">Paris</h2>
<p>París es la capital de Francia.</ p>
</body>
</html>
Código 88.html
GERENCIA VIRTUAL
El atributo id en HTML
El atributo id especifica una sección única para un elemento HTML (el valor asignado debe ser
único). El valor o nombre dado al id puede ser usado por CSS y JavaScript para realizar ciertas
tareas para un elemento único o id especificado.
En CSS, para seleccionar elementos con un id específico, escriba un carácter de numeral (#),
Seguido del nombre del id.
<!DOCTYPE html>
<html>
<head>
<style>
#encabezado {
background-color: green;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 style id="encabezado">El Encabezado</h1>
</body>
</html>
Código 89.html
Los iframes en HTML

Un iframe es usado para mostrar una página web dentro de otra página web. En HTML un iframe
está definido por la etiqueta <iframe>. El atributo src especifica la URL (dirección web) de la
página web que insertaremos. Podemos utilizar los atributos height y width para determinar el
tamaño de alto y ancho del iframe, el valor de los atributos se especifica en pixeles, pero también
podemos usar porcentajes.
Otra manera de especificar el tamaño del iframe es mediante el uso de CSS.
Por defecto, los iframe tienen borde, para removerlo solo debemos indicarlo en el atributo style
en la propiedad border . Mediante el CSS podemos cambiar el tamaño y color del borde.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>El Iframe muestra la página 78.html</h1>
<iframe src="78.html"></iframe>
</body>
</html>
Código 90.html

Elementos HTML (En Bloque y en Linea)

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Elementos HTML (En Bloque y en Linea)

Caricato da

Copyright:

Formati disponibili

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Elementos en bloque y en línea en HTML

Elementos en nivel de bloque

A continuación veremos un código en donde están contenidas estas dos etiquetas:

Elemento “h1 – h6”

El Elemento DIV en HTML

El atributo class en HTML

Los iframes en HTML

Potrebbero piacerti anche