HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace
referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que
sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define
una estructura básica y un código (denominado código HTML) para la definición de
contenido de una página web, como texto, imágenes, videos, entre otros. Es un estándar a
cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías
ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el
lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y
expansión de la World Wide Web. Es el estándar que se ha impuesto en la visualización de
páginas web y es el que todos los navegadores actuales han adoptado.
Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos
claros: proporcionar un control absoluto al diseñador de páginas HTML y romper con el
carácter estático de este tipo de documentos.
Los tres componentes del HTML Dinámico son:
Hojas de Estilo
Posicionamiento de Contenidos
Fuentes Descargables
Las hojas de estilo permiten especificar atributos para los elementos de su página web.
Posicionamiento de contenidos se puede asegurar que las diferentes partes serán
mostradas exactamente donde usted quiera que aparezcan y podrá modificar su aspecto y
posición tras ser mostrada.
Fuentes descargables podemos asegurar que siempre se utilizara la fuente correcta, pues
podemos enviar la fuente junto con la página.
Códigos HTML básicos[editar]
<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a
continuación debe ser interpretado como código HTML. Esto es así de facto, ya que en
teoría lo que define el tipo de documento es el DOCTYPE, que significa la palabra justo tras
DOCTYPE el tag de raíz.
<script>: incrusta un script en una web, o llama a uno mediante src="url del script". Se
recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript
text/javascript.
<head>: define la cabecera del documento HTML; esta cabecera suele contener
información sobre el documento que no se muestra directamente al usuario como, por
ejemplo, el título de la ventana del navegador. Dentro de la cabecera <head> es posible
encontrar:
<title>: define el título de la página. Por lo general, el título aparece en la barra de título
encima de la ventana.
<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet"
href="/[Link]" type="text/css">.
<style>: para colocar el estilo interno de la página; ya sea usando CSS u otros lenguajes
similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la
etiqueta <link>.
<meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http
(mediante http-equiv="") cuando no se pueden modificar por no estar disponible la
configuración o por dificultades con server-side scripting.
<body>: define el contenido principal o cuerpo del documento. Esta es la parte del
documento html que se muestra en el navegador; dentro de esta etiqueta pueden
definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro
del cuerpo <body> es posible encontrar numerosas etiquetas. A continuación se indican
algunas a modo de ejemplo:
<h1> a <h6>: encabezados o títulos del documento con diferente relevancia.
<table>: define una tabla.
<tr>: fila de una tabla.
<td>: celda de una tabla (debe estar dentro de una fila).
<a>: hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de
pasada por medio del atributo href. Por ejemplo: <a href="[Link]
title="Ejemplo" target="_blank" tabindex="1">Ejemplo</a> se representa como Ejemplo).
<div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se
desea alinear contenido.
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la
imagen. Por ejemplo: <img src="./imágenes/[Link]" />. Es conveniente, por
accesibilidad, poner un atributo alt="texto alternativo".
<li><ol><ul>: etiquetas para listas.
<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).
<i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>).
<s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>).
<u>: Antes texto subrayado. A partir de HTML 5 define porciones de texto diferenciadas o
destacadas del resto, para indicar correcciones por ejemplo. (etiqueta desaprobada en
HTML 4.01 y redefinida en HTML 5)14 15
La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/») tal como
se muestra en los siguientes ejemplos:
<!--...--> Define un comentario
<table><tr><td>Contenido de una celda</td></tr></table>.
<script>Código de un script integrado en la página</script>
resumen de etiquetas y atributos
etiqueta cierre atributo explicación
<!-- --> Añadir un comentario no visible.
<a> </a> Establece un vínculo.
href Dirección del vínculo.
name Establece un ancla.
Establece el destino del vínculo: _blank, _self,
target
_top, _parent, o "definido"
<b> </b> Texto en negrita.
<blockquote> </blockquote> Sangrado.
<body> </body> Parte visible en pantalla del documento.
alink Modifica el color del vínculo cuando está activado.
background Para colocar una imagen de fondo.
bgcolor Para establecer un color de fondo.
Modifica el color del vínculo antes de estar
link
activado.
Modifica el color del vínculo cuando ya ha sido
vlink
visitado.
<br> Salto de línea.
<caption> </caption> Establece el título de una tabla. Dentro de <table>.
<center> <center> Centra en horizontal.
<dd> La definición del término. Dentro de <dl>
<dl> </dl> Listado de términos y sus definiciones.
<dt> </dt> Término para ser definido. Dentro de <dl>
<font> </font> Fuente.
size Tamaño de la fuente.
color Color
face Tipo de letra.
<form> </form> Formulario
action ="[Link]
method ="post"
enctype ="text/plain"
<frame> </frame> Marco.
name Nombre que se le da para referirse después a él.
Establece qué documento se va a cargar
src
inicialmente en el marco.
frameborder Indica si habrá o no borde entre los marcos.
Si se escribe, el navegante no puede
noresize
redimensionar los marcos.
scrolling Establece si habrá o no barra de scrolling.
<frameset> </frameset> Estructura de los marcos.
cols Número de columnas.
rows Número de filas.
Encabezado de primer [Link] otros 5:
<h1> </h1>
<h2><h3><h4><h5><h6>
<head> </head> Cabecera del documento.
<hr> Línea de separación horizontal.
align Alineación de la línea.
noshade Sin efecto tridimensional.
size Grosor de la línea.
width Anchura de la línea.
<html> </html> Apertura y cierre del código.
<i> </i> Letra cursiva.
<iframe> </iframe> Marco en línea. Carga en un marco otra página.
Nombre que se le da al espacio para posteriores
name
referencias.
src Establece qué documento se carga inicialmente.
frameborder Establece si habrá o no borde de separación.
<img> Inserta una imagen.
alt Texto alternativo a la imagen.
Establece si va a tener borde o no, cuando sirva
border
de vínculo.
height Altura de la imagen.
width Ancho de la imagen.
src Establece qué imagen se va a insertar.
<li> Componente de una lista. Dentro de <ul> o de <ol>
<ol> </ol> Lista numerada de objetos.
<p> </p> Párrafo nuevo.
<sub> </sub> Subíndice.
<sup> </sup> Superíndice.
<table> </table> Tabla.
align Alinea la tabla: center, right, left
bgcolor Establece el color de fondo de la tabla.
border Establece un borde a la tabla
Separación entre el borde de la tabla y el
cellpadding
contenido.
cellspacing Separación entre las celdas.
width Establece el ancho de la tabla.
<td> </td> Celda de una tabla.
Establece la alineación del texto dentro de la
align
celda: left, center, right.
bgcolor Establece el color de fondo para la celda.
colspan Extiende la celda sobre varias columnas.
height Establece la altura de la celda.
rowspan Extiende la celda sobre varias filas.
Establece la alineación vertical: top, middle,
valign
bottom.
width Establece el ancho de la celda.
<th> </th> Titular de la columna de una tabla. Dentro de <tr>.
Establece el nombre del documento. Dentro de
<title> </title>
<head>
<tr> </tr> Fila de una tabla.
<u> </u> Subrayado.
<ul> </ul> Lista no numerada de objetos.
AtributosSección
behavior
Establece cómo se desplazará el texto en la etiqueta marquee. Los valores
posibles son scroll, slide, y alternate. Si no hay un valor especificado, el
valor por defecto establecido es scroll.
Scroll: Hara que lo que este en la marquesina se mueva de derecha a
izquierda, de manera ininterrumpida.
Slide: Una vez que completa el recorrido de derecha a izquierda(por
defecto) se detiene.
Alternate: Se movera de una esquina a la otra, dando el efecto de rebote.
bgcolor
Establece el color de fondo, puede utilizarse el nombre, o su valor
hexadecimal.
direction
Establece la dirección en la que el texto contenido se desplazará. Los
valores posibles son left (para moverse hacia la izquierda), right (para
moverse a la derecha), up (hacia arriba) y down (hacia abajo). Si no se
especifica un valor, por defecto será left.
height
Establece la altura de la etiqueta en pixeles, o en un valor porcentual.
hspace
Establece el margen horizontal.
loop
Establece el número de veces que la marquesina realizará el
desplazamiento. Sino se especifica esta propiedad, por defecto es -1, lo que
quiere decir que la marquesina se desplazará continuamente.
scrollamount
Establece el valor de movimiento para cada intervalo en pixeles. Entre
mayor sea el número más rápida es su desplazamiento, su valor es 100.
scrolldelay
Establece el intervalo entre cada desplazamiento, en milisegundos. El valor
por defecto es 85. Entre mayor sea el número más lenta es su
desplazamiento, su valor es 100
truespeed
Por defecto, si los valores de scrolldelay son inferiores a 60 serán
ignorados. Pero si truespeed está presente, esos valores inferiores
a 60 serán aceptados.
vspace
Establece el margen vertical en pixeles o en un valor porcentual.
width
Establece el ancho de la etiqueta en pixeles o un valor porcentual.
Controladores de eventosSección
onbounce
Este evento se lanza cuando la marquesina llegó al final del desplazamiento.
Ésto solo se activa cuando el atributo behavior está establecido
en alternate.
onfinish
Este evento se lanza cuando la marquesina repitió el desplazamiento la
cantidad de veces establecidas en el atributo loop. El evento se lanza solo si
el atributo loop tiene un valor mayor a 0.
onstart
Este evento se lanza cuando la marquesina comienza su desplazamiento.
MétodosSección
start
Comienza el desplazamiento de la marquesina.
stop
Para el desplazamiento de la marquesina