Ejemplos HTML5 - Encabezado principal h1

Ejemplos HTML5 - Encabezado secundario h2

Ejemplos HTML5 - Encabezado tercer nivel h3

Ejemplos HTML5 - Encabezado h4

Ejemplos HTML5 - Encabezado h5
Ejemplos HTML5 - Encabezado h6

Etiquetas varias

Párrafo con <br>: Primera línea
Segunda línea
Tercera línea

Enlaces

Enlace a otro elemento de la página Multimedia.

Enlace a otro elemento de la página Formularios.

Buscar Google o Plantilla.

Plantilla
HTML + CSS

Imágenes

Imagen local
Gollum de LOTR

Imagen con URL

Imagen con enlace
Gandalf del LOTR

Imagen adaptable (30% ancho ventana) con enlace
Gandalf del LOTR

Etiqueta figure

Gollum de LOTR
Personaje Gollum en LOTR

Etiqueta figure

Macaque in the trees
A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark

figure con múltiple imágenes

Kooaburra Pelican stood on the beach Cheeky looking Rainbow Lorikeet
Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by Richard Clark

Líneas horizontales

Entidades de referencia y Caracteres especiales

HTML usa caracteres <, >, ", & como delimitadores de etiquetas de marcas. Por lo tanto, estos caracteres no se pueden usar directamente en el texto. Por ello, se usa una secuencia de escape (llamada referencia de entidad), en la forma de &xxx; (empieza con & y termina con ; y contiene el código xxx) para caracteres reservados y especiales. La referencia de entidad distingue entre mayúsculas y minúsculas. Las referencias de entidad más comunes son:

Character Entity Reference
" (NOT really needed!) &quot;
< &lt;
> &gt;
& &amp;
non-breaking space &nbsp;
→ ⇒ ↔ ⇔ &rarr; &rArr; &harr; &hArr;
° (degree) &deg;
© ® € ¢ ¥ &copy; &reg; &euro; &cent; &yen;
˜ &tilde;
á é í ó ú &aacute; &eacute; &iacute; &oacute; &uacute;
ü, ñ &uuml &ntilde;
× ± ∞ &times; &plusmn; &infin;
π Π σ Σ ω Ω &pi; &Pi; &sigma; &Sigma; &omega; &Omega;
≥ ≤ ≡ ≈ &ge; &le; &equiv; &asymp;
⊂ ⊃ ⊆ ⊇ ∈ &sub; &sup; &sube; &supe; &isin;
☎ &phone;
🔍 (search) &#128269;
✓ ✗ &check; &cross;

Más símbolos especiales

Etiquetas de formato de estilo lógico

Las etiquetas de estilo lógico nivel caracter (en línea) son:

Etiqueta de estilo lógico Significado Ejemplo
<mark>...</mark> resaltado texto de ejemplo
<strong>...</strong> énfasis (negrita) texto de ejemplo
<em>...</em> énfasis (italica) texto de ejemplo
<code>...</code> código de programa(ancho fijo, fuente monoespacio) texto de ejemplo
<q>...</q> comillas texto de ejemplo
<ins>...</ins> inserción texto de ejemplo
<del>...</del> eliminado texto de ejemplo
<def>...</def> definición texto de ejemplo
<cite>...</cite> cita texto de ejemplo
<kbd>...</kbd> teclado (ancho fijo, fuente monoespacio) texto de ejemplo
<samp>...</samp> texto ejemplo (ancho fijo, fuente monoespacio) texto de ejemplo
<abbr>...</abbr> abreviatura (subrayado, con title como ayuda) texto de ejemplo
<acronym>...</acronym> acrónimo (subrayado, con title como ayuda) texto de ejemplo
<address>...</address> dirección
texto de ejemplo
<var>...</var> variable (ancho fijo o italica) texto de ejemplo

Más ejemplos:
Texto en negrita
Texto en cursiva
Texto subrayado
Examen Final Parcial es el día 29 Agosto 17 Abril.
Los buzos cuidadosos siempre recuerdan comprobar sus equipos SCUBA .

Etiquetas de formato físico

Todas las etiquetas de estilo físico se pueden realizar mediante CSS.

No obstante, HTML5 tiene etiquetas para conseguir ese objetivo:

Etiqueta estilo físico Significado Ejemplo
<b>...</b> negrita texto de ejemplo
<i>...</i> italica texto de ejemplo
<u>...</u> subrayado texto de ejemplo
<big>...</big> fuente grande texto de ejemplo
<small>...</small> fuente pequeña texto de ejemplo
<sup>...</sup> superindice texto deejemplo
<sub>...</sub> subindice texto deejemplo
<tt>...</tt> teletipo (fuente monoespacio) texto de ejemplo

Listas

Listas numeradas

Grados ofertados en la Escuela:

  1. Ingeniería de Tecnologías de Telecomunicación
  2. Ingeniería en Tecnologías Industriales
  3. Ingeniería Eléctrica
  4. Ingeniería Electrónica Industrial y Automática
  5. Ingeniería Mecánica
  6. Ingeniería Química

Listas con viñetas

  • Primer elemento sin ordenar
  • Segundo elemento sin ordenar
  • Tercer elemento sin ordenar

Listas anidadas

  • Simpsons:
    • Homer
    • Marge
  • Familia del individuo:
    • Peter
    • Lois

Listas de definición

SGML
Metalenguaje para la definición de otros lenguajes de marcado
XML
Lenguaje basado en SGML y que se emplea para describir datos
XHTML
Lenguajes derivados de XML para determinadas aplicaciones

Citas

Tim Berners Lee, creador de la WWW:

El poder de la web está en su universalidad. El acceso para todos sin importar su discapacidad es un aspecto esencial.

Tablas

NombreApellido
PedroCorcuera

Tabla 1

NombreApellidos
PedroCorcuera Miró Quesada

Ejemplo details - summary

Cómo vencer al jefe... ¡alerta de spoiler!

Solo apunta a los puntos rojos cerca de sus ojos.

Sigue disparando a estos puntos hasta que los ojos se abran, luego golpee rápidamente ambos ojos con el rayo láser.

Ejemplo mark

El proyecto está pendiente en formato .zip para el lunes.

Inputs

Campos de texto

NetID
Password

Cajas de texto

Checkboxes

Lechuga Tomate Pepino

Radio

Visa MasterCard American Express

Radio con label

select option

select en listas

Grupos de opciones con optgroup

reset

Nombre:
Comida:

Parámetros de entrada ocultos

Nombre
ID

Agrupación de inputs: fieldset, legend

Tarjetas de crédito: Visa MasterCard American Express

range y output

Input tipo range. output. Prueba a deslizar

50

Ejemplo meter (asociado a range)

Grados: 50% 

<meter value=50 min=0 max=100 low=20 high=80></meter>

Formularios

Nombre:

Apellido:




Seleccione una opción
A
B
C


Seleccione opciones
A
B
C


Elija su Sistema Operativo:

Sin label


Información personal

Nombre:

Apellido:

Información académica

Universidad:


Formulario con variedad de inputs

Información requerida para que te inscribas en el foro



Información complementaria

Otra información



1



Ejemplos multimedia

Audios con fichero local



Audios con fichero en onedrive


Videos

Video con fichero local



Video con fuente en Onedrive

Video con URL

Video You tube


Ir al inicio de la página