HTML es el lenguaje de marcado utilizado para crear páginas web. Define la estructura básica y el código para el contenido de una página como texto, imágenes y otros elementos. HTML ha evolucionado a través de diferentes versiones a medida que se han incorporado nuevas características y se han suprimido otras para hacerlo más eficiente y compatible con diferentes navegadores y plataformas.

1. Instituto Tecnológico De Nor Oriente
Informática Básica2
Ing. Dubley Omar Sandoval Hernández
Zabaleta Ruíz Milton De Jesús
5to “B”
Perito En Industria Alimentaria
Llanos de la Fragua Zacapa

2. ¿Qué es HTML?
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, 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.
El lenguaje HTML basa su filosofía de desarrollo en la referenciarían. Para añadir
un elemento externo a la página (imagen, vídeo, script, entre otros.), este no se
incrusta directamente en el código de la página, sino que se hace una referencia a
la ubicación de dicho elemento mediante texto. De este modo, la página web
contiene sólo texto mientras que recae en el navegador web (interpretador del
código) la tarea de unir todos los elementos y visualizar la página final. Al ser un
estándar, HTML busca ser un lenguaje que permita que cualquier página web
escrita en una determinada versión, pueda ser interpretada de la misma forma
(estándar) por cualquier navegador web actualizado.
Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido
diversas características, con el fin de hacerlo más eficiente y facilitar el desarrollo
de páginas web compatibles con distintos navegadores y plataformas (PC de
escritorio, portátiles, teléfonos inteligentes, tabletas, etc.). Sin embargo, para
interpretar correctamente una nueva versión de HTML, los desarrolladores de
navegadores web deben incorporar estos cambios y el usuario debe ser capaz de
usar la nueva versión del navegador con los cambios incorporados. Normalmente
los cambios son aplicados mediante parches de actualización automática (Firefox,
Chrome) u ofreciendo una nueva versión del navegador con todos los cambios
incorporados, en un sitio web de descarga oficial (Internet Explorer). Un navegador
no actualizado no será capaz de interpretar correctamente una página web escrita
en una versión de HTML superior a la que pueda interpretar, lo que obliga muchas
veces a los desarrolladores a aplicar técnicas y cambios que permitan corregir
problemas de visualización e incluso de interpretación de código HTML. Así mismo,
las páginas escritas en una versión anterior de HTML deberían ser actualizadas o
reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores aún
mantienen la capacidad de interpretar páginas web de versiones HTML anteriores.
Por estas razones, aún existen diferencias entre distintos navegadores y versiones
al interpretar una misma página web. La idea de Berners-Lee surgió hacia el 1989
y en los dos años siguientes definía el HTML como un subconjunto del SGML al que
más tarde llamaría nivel 0.

3. Evolución de HTML
Esta primera versión solamente marcaba encabezados, listas y anclas pero fue
suficiente para que se creara la World Wide Web. Surgieron varias versiones de
este primer HTML pero ninguna de ellas llegaría a convertirse en el estándar oficial.
Lo más cercano fue el HTML 2.0, al cual se le puso el nombre para distinguirlo de
la colección de estándares no oficiales que iban surgiendo.
Tim Berners fundaría el W3C (World Wide Web Consortium) en 1995 y poco
después surgió el borrador de la tercera versión, HTML 3.0. Éste daba mucha más
libertad de creación al diseñador web.
Facilitaba la creación de tablas, el texto podía fluir alrededor de las figuras y se
mostraban elementos matemáticos complejos. Sus creadores pretendían que fuera
compatible con la versión anterior pero era demasiado complejo como para que lo
soportaran los navegadores de la época.
En septiembre de ese mismo año se abandonó el proyecto debidoa la falta de apoyo
de los fabricantes de navegadores web. La siguiente versión tampoco llegó a ser
propuesta oficialmente.
Una nueva versión, el HTML 3.2 abandonaba muchos de los elementos que se
habían introducido en el HTML 3.0 a cambio de acoger los elementos que habían
desarrollado los fabricantes de navegadores web como Netscape y Mosaic.
Por ejemplo, se abandonó la posibilidad de introducir fórmulas matemáticas
complejas para delegarlo en un estándar distinto, el MathML. La última versión es
el HTML 4.0, que también incluye muchos elementos específicos que habían sido
desarrollados para un navegador web determinado pero que, a su vez, calificó a
muchos de ellos como “desaprobados”.
El camino evolutivo del HTML ha sido complejo, se ha tenido que lidiar con muchas
partes y finalmente ha cesado. Pero las tecnologías continúan avanzando y su
heredero ahora es el XHTML.
La base y el objetivo son los mismos pero esta vez entra un elemento nuevo en
escena, el XML. Otro estándar que se asemeja en funcionalidad al SGML pero que
es más sencillo y más joven. Así pues de la “fusión” de estos dos estándares, XML
y HTML, surge el XHTML.

4. Tabla de etiquetas de HTML
Con
etiqueta
Sin
etiqueta
Con
etiqueta
Sin
etiqueta
Con
etiqueta
Sin
etiqueta
ADDRESS ADDRESS CITE CITE
B:
NEGRITA
B:
NEGRITA
BIG BIG CODE CODE DFN DFN
EM EM
I:
ITALICA
I:
ITALICA
KBD KBD
SAMP SAMP SMALL SMALL STRONG STRONG
SUB5 SUB 5 SUP5 SUP 5 S Tachado S Tachado
TT TT
U
Subrayado
U
Subrayado
VAR VAR
Etiquetas
Apertura Acción Atributos Cierre
< ! Comentario. Ninguno -->
<A> Hipervínculo.
HREF, NAME, REL,
REV, TITLE
</A>
<ADDRESS>
Formato para
dirección del
autor.
Ninguno </ADDRESS>

5. <BASE>
Url del autor;
contexto del
documento.
HREF </BASE>
<BASEFONT
SIZE>
Tamaño de la
fuente base.
Ninguno NO
<BGSOUND> Sonido de fondo. SRC, LOOP.
NO - Internet
Explorer
<BIG>
Aumenta el
tamaño.
Ninguno </BIG>
<BLINK>
Hace parpadear
el texto.
Ninguno
</BLINK> -
Netscape
<BLOCKQUOTE>
Da formato con
sangría a un
párrafo
Ninguno </BLOCKQUOTE>
<BODY>
Cuerpo del
documento.
BGCOLOR,
BACKGROUND,
TEXT, LINK, VLINK,
ALINK
</BODY>
<BR> Retorno de línea.
CLEAR: Se utiliza en
combinación con
ALIGN de IMAGE.
NO
<CAPTION>
Posición de la
leyenda en una
tabla.
ALIGN:
TOP/BOTTOM.
Internet Explorer:
LEFT, RIGHT,
CENTER
</CAPTION>
<CENTER> Centrar. Ninguno </CENTER>
<CITE>
Formato para
citas en itálicas.
Ninguno </CITE>
<CODE>
Formato en tipo
código.
Ninguno </CODE>
<DD>
Definiciones
marcadas, para
Lista de
Definiciones
<DL>.
Ninguno NO

6. <DFN<
Formato en
itálica.
Internet Explorer </DFN<
<DIR>
Lista de
directorio, con
elementos
marcados con
<LI>.
Ninguno </DIR>
<DL>
Lista de
Definiciones, con
términos
marcados con
<DT> y
definiciones
marcadas con
<DD>.
Ninguno </DL>
<DT>
Términos
marcados, para
Lista de
Definiciones
<DL>.
Ninguno NO
<EM>
Formato
enfatizado en
itálica.
Ninguno </EM>
<EMBED> Sonido de Fondo.
SRC, WIDTH,
HEIGHT,
AUTOSTART, LOOP.
NO - Netscape
<FONT>
Definición de la
fuente.
SIZE, COLOR.
Internet Explorer:
FACE.
</FONT>
<FORM>
Para ingreso de
datos del usuario
en un formulario.
ACTION, METHOD </FORM>
<H1 ...H6>
Tamaño de letras
del 1 al 6.
HTML 3.0: LEFT,
CENTER, RIGHT
</H1 .../H6>
<HEAD>
Encabezamiento
del documento.
BASE, TITLE,
ISINDEX, NEXTID,
META
</HEAD>

7. <HR> Línea horizontal.
NOSHADE, SIZE,
WIDTH, ALIGN.
Internet Explorer:
COLOR
NO
<HTML>
Al principio y al
fin de todo
documento.
HEAD, BODY </HTML>
<I> Itálica (Cursiva). Ninguno </I>
<IMG> Cargar imágenes.
ALIGN, SRC, ALT,
ISMAP, WIDTH,
HEIGHT, VSPACE,
HSPACE
NO
<INPUT>
Define un objeto
de ingreso en un
formulario.
TYPE, NAME,
VALUE, SIZE,
MAXLENGHT,
ALIGN, SRC,
CHECKED
</INPUT>
<ISINDEX>
Indica que existe
un índex en el
server para el
documento.
Netscape: PROMPT NO
<ISMAP>
Activa la
selección de
imágenes para el
usuario.
Ninguno NO
<KBD>
Formato
monoespaciado.
Ninguno </KBD>
<LI> Ítem de lista.
Netscape: VALUE,
TYPE
NO
<LISTING> Listados Ninguno. Obsoleto. </LISTING>
<LIT>
Literal. Como
PRE, pero usa
letra
proporcional.
Ninguno </LIT>
<MARQUEE> Marquesina.
ALIGN, BEHAVIOR,
BGCOLOR,
DIRECTION,
</MARQUEE> -
Internet Explorer

8. HEIGHT, WIDTH,
HSPACE, VSPACE,
LOOP,
SCROLLAMOUNT,
SCROLLDELAY.
<MENU> Lista menú. Ninguno </MENU>
<META>
Meta información
ubicada en
HEAD.
EQUIV, CONTENT,
NAME
NO
<NEXTID>
Es un parámetro
que identifica al
documento.
NO NO
<NOBR>
Elimina los saltos
de líneas.
Ninguno NO
<OL>
Lista ordenada,
con elementos
marcados con
<LI>.
TYPE, START,
VALUE.
</OL>
<OPTION>
Opción de
selección dentro
de un formulario.
VALUE, SELECTED
VALUE
NO
<P>
Retorno de línea,
con un espacio.
Ninguno NO
<P ALIGN>
Alineación de
texto.
LEFT, CENTER,
RIGHT
</P>
<PLAINTEXT>
Pasaje de texto
plano.
Ninguno. Obsoleto. </PLAINTEXT>
<PRE>
Visualiza el texto
en su formato
original.
WIDTH </PRE>
<S> Texto tachado. Ninguno </S>
<SAMP>
Formato tipo
ejemplo.
Ninguno </SAMP>

9. <SELECT>
Para selección de
opciones dentro
de un formulario.
NAME, SIZE,
MULTIPLE
</SELECT>
<SMALL>
Disminuye el
tamaño.
Ninguno </SMALL>
<STRONG>
Formato
enfatizado más
fuerte que <EM>.
Ninguno </STRONG>
<SUB> Subíndice. Ninguno </SUB>
<SUP> Superíndice. Ninguno </SUP>
<TABLE> Tabla.
BORDER,
CELLPADDING,
CELLSPACING,
HEIGTH, WIDTH.
Internet Explorer:
COLOR
</TABLE>
<TD>
Celdas de una fila
en una tabla,
dentro de <TR>.
ALIGN, VALIGN,
NOWRAP,
COLSPAN,
ROWSPAN, HEIGTH,
WIDTH
</TD>
<TEXTAREA>
Área para ingreso
de texto dentro de
un formulario.
NAME, ROWS,
COLS.
</TEXTAREA>
<TH> Título de Tabla.
ROWSPAN,
COLSPAN, ALIGN,
VALIGN, NOWRAP,
HEIGHT, WIDTH
</TH>
<TITLE>
Título dentro de
HEAD.
Ninguno </TITLE>
<TR>
Fila de una
Tabla.
ALIGN, VALIGN </TR>
<TT>
Formato tipo
máquina.
Ninguno </TT>
<UL>
Lista no
ordenada, con
COMPACT, TYPE </UL>

10. elementos
marcados con
<LI> .
<VAR>
Formato tipo
variable.
Ninguno </VAR>
<WBR>
Se usa con
NOBR para una
sección que deba
ser separada.
Ninguno NO
<XMP> Similar a PRE. Ninguno </XMP>
Atributos
Nombre Etiqueta Acción Valor
HREF
Dirección del
URL local o
remoto.
href="www.hp.com"
LOOP
<BGSOUND>
Número de veces que se
reproduce el archivo de
sonido. Para permanente
se usa INFINITE o -1.
loop=infinite
SRC
Nombre del archivo de
sonido (Internet
Explorer)
src="sonido.wav"
LOOP
<EMBED>
Número de veces que se
reproduce el archivo de
sonido. Para permanente
se usa INFINITE o -1.
loop=-1
SRC
Nombre del archivo de
sonido (con Crescendo)
src="sonido.mid"
SRC
<IMAGE>
Nombre del gráfico src="imagen.gif"
ALT
Nombre que reemplaza a
la imagen cuando ésta no
puede ser cargada.
alt="Nombre de
Imagen"

11. BGCOLOR
<BODY>
Color de fondo
bicolor="#FFFFFF"
(blanco)
BACKGROUND Imagen de fondo background="foto.gif"
TEXT Color del texto
text="#000000"
(negro)
LINK Color de vínculo link="#0000FF" (azul)
VLINK Color de vínculo visitado
vlink="#FF0000"
(rojo)
ALINK
Color de vínculo
presionado
alink="#00FF00"
(verde)
ALIGN
<CAPTION>
dentro de
<TABLE>
Colocar título arriba
(TOP) o debajo
(BOTTOM) de la tabla.
align=top
ALIGN
<H1..H6>, <P
ALIGN>, <TD>,
<TH>, <TR>,
<DIV>,
Alinear el texto: LEFT,
RIGHT, CENTER
align=center
ALIGN
<HR>
Alinear el texto: LEFT,
RIGHT, CENTER
align=center
SIZE
Valor de la altura en
pixels o porcentaje
size=3
WIDTH
Valor del ancho en pixels
o porcentaje
width=50%
SIZE
<FONT>
Tamaño de la letra de 1 a
7
size=6
COLOR Color de la letra
color="#000000"
(negro)
FACE
Fuente del texto (Internet
Explorer)
face="helv"
(helvética)
HEIGHT <EMBED>,
<IMAGE>,
<MARQUEE>,
<TD>, <TH>
Valor de la altura en
pixels o porcentaje
heigth=80
WIDTH
Valor del ancho en pixels
o porcentaje
width=50%
BORDER <TABLE>
Borde y ancho del borde
en la tabla
border=5

12. CELLPADDING
Espacio entre el borde y
el texto
cellpadding=10
CELLSPACING
Espacio entre las líneas
interna y externa del
borde
cellspacing=3
HEIGHT
Valor de la altura en
pixels o porcentaje
heigth=80
WIDTH
Valor del ancho en pixels
o porcentaje
width=50%
COLSPAN
<TD> dentro de
<TABLE>
Expandir una celda
varias columnas
colspan=4
ROWSPAN
Expandir una celda
varias filas
rowspan=4