HTML Presentacion

HTML
Lenguajes de Internet
Instituto Politécnico Nacional Escuela Superior de Ingeniería Mecánica y Eléctrica

www.ipn.mx www.esimez.ipn.mx
Hipertexto
¿Qué es HTML?
HTML : HyperText Markup Language
Lenguaje de Marcación de Hipertexto
Es un lenguaje de programación que permite describir hipertexto, es decir,

texto presentado de forma estructurada y en un formato plano, con enlaces
(hyperlinks) que conducen a otros documentos o fuentes de información, y
con inserciones multimedia (gráficos, sonido)
¿Qué es HiperTexto?
• HiperTexto es texto el cual no está limitado a ser lineal

• HiperTexto es texto que contiene enlaces/ligas a otros textos
¡ ¡ La idea de Hipertexto fue desarrollada por Ted Nelson en 1968 ! !
ESIME-IPN Enero 2007 Juan Carlos Torres 2

Historia
Historia
HTML fue creado en 1989 por el físico nuclear TIM BERNERS-LEE el cual
propuso diseñar un sistema de unificación del acceso a todos los datos que
poseía el Centro Europeo para la Investigación Nuclear (CERN).
Se comenzó así a desarrollar una plataforma de tipo hipertexto y un

protocolo de comunicaciones que se denominó:
HTTP (Hyper Text Transfer Protocol)
que permitiría a los científicos del CERN, consultar información aunque se

encontrase diseminada en diferentes computadoras, tanto del propio CERN,
como en las computadoras de otros centros de investigación.
Fue tal el éxito alcanzado que se comenzó a definir un lenguaje de creación

de documentos estructurados que vino a llamarse:
HTML

HTML
HTML en el Tiempo
1992: HTML 1.0, Tim-Berners Lee propuesta original

1993: HTML+, algunas mejoras
1994: HTML 2.0, nuevo estándar con mejores características
1995: Versión de Netscape (no estándar)
1996: Compiten Netscape y Explorer con características propias
1996: HTML 3.2, Estándar para todos los navegadores
1997: HTML 4.0, se introducen las Hojas de Estilo
1999: HTML 4.01, Ultima versión
2000: XHTML 1.0, una versión XML de HTML 4.01
2001: XHTML 1.1, modularización
2002: XHTML 2.0, simplificado y generalizado

HTML
Características
• Se base en diseños simples

• Está basado en etiquetas (tags) que agregan atributos al documento
• HTML describe un documento con una estructura lógica
• Los navegadores son libres de interpretar las etiquetas (tags) de
forma diferente
• Los archivos HTML son de formato ligero (tamaño muy reducido)
El tamaño de un archivo conteniendo sólo la frase ”Hello World!” tiene

diferentes tamaños dependiendo de su formato:
Tipo Tamaño (bytes)
HTML 28
MS Word 19,456
PDF 4,915
Postscript 11,274

WWW
WWW = World Wide Web – Red Mundial Internet
• La Web nació alrededor de 1989 a partir de un proyecto del CERN
• Tim Berners-Lee construyó el prototipo que dio lugar a lo que

hoy es la WWW.
• La intención original era hacer más fácil el compartir textos de

investigación entre científicos
• El programa inicial del CERN, WWW sólo presentaba texto
• Navegadores web posteriores, como Viola (1992) añadieron la capacidad

de presentar gráficos
• WWW permite hoy incluso servicios en tiempo real como webcasts,

radio web y webcams en directo

URL
URL = Uniform Resource Locator
Un recurso en la Web es localizado mediante su URL
http://www.w3.org/TR/html4/index.html
protocolo servidor/Dominio directorio documento
ftp://server.com/public/progs/graficos.zip
protocolo servidor/Dominio directorio archivo
El protocolo puede ser uno de los siguientes y depende del servicio:

• http
• https
• ftp
• mailto
• news
HTML
Arquitectura de HTML
Un documento HTML está formado por los elementos:
• Títulos
• Párrafos
• Listas
• Tablas
• etc
Para delimitar los elementos se usan etiquetas (tags):
<nombre-etiqueta> Abre etiqueta
Elementos
</nombre-etiqueta> Cierra etiqueta

Estructura de HTML
Estructura básica de un documento HTML
<HTML> Inicio del documento HTML
<HEAD>
<TITLE>
. . . Encabezado/Titulo de la página
</TITLE>
</HEAD>
<BODY>
. . .
Cuerpo del Documento HTML
. . .
. . .
</BODY>
</HTML> Fin del documento HTML

Estructura de HTML
Ejemplo
<HTML>
<HEAD>
<TITLE>Lenguajes de Internet
</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Primer Ejemplo HTML</H1>
</CENTER> <HR>
<P>Ejemplo de pagina de
Lenguajes de Internet. Aqui se
muestran las partes basicas de un
documento HTML.
<P>Esta pagina puede ser vista
con cualquier navagador.
</BODY>
</HTML>

Formato Básico
Formato de Encabezado
HTML tiene seis etiquetas para mostrar encabezados
Etiqueta Resultado
<H1> ... </H1> Encabezado de nivel 1


Formato Básico
Tipo de Letra
Estas etiquetas nos permiten cambiar el aspecto de la letra
Etiqueta Descripción Resultado
<B> ... </B> Pone el texto en negrita. Soy un texto negro (bold)
<I> ... </I> Representa el texto en cursiva. Texto en itálica o cursiva
Como soy muy importante estoy

<U> ... </U> Para subrayar algo.
subrayado
<S> ...
</S>
Para tachar. Este texto está tachado.
Permite representar el texto en

<TT> ... </TT> No soy variable
un tipo de letra de paso fijo.
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... Incrementa el tamaño del tipo

</BIG> de letra. Texto GRANDE
<SMALL> ... Disminuye el tamaño del tipo de
Texto pequeño
</SMALL> letra.

Formato Básico
Formato de Párrafo
Sirve para delimitar un párrafo. Inserta

<P> Este es un párrafo.
una línea en blanco antes del texto.
<CENTER> ... Yo soy normal

Permite centrar todo el texto del párrafo.
</CENTER> Yo estoy centrado
Representa el texto con tipo de letra de
<PRE WIDTH=x> paso fijo. Muy útil a la hora de
representar código fuente. El parámetro Estoy en paso fijo
... </PRE>
WIDTH especifica el número máximo de
caracteres en una línea.
Parrafo a la izquierda.
<DIV ALIGN=x> Permite justificar el texto del párrafo a la Párrafo al centro.
... izquierda (ALIGN=LEFT), derecha Párrafo a la derecha.
</DIV> (RIGHT), al centro (CENTER) o a ambos Este párrafo está justificado por lo que
márgenes (JUSTIFY ) ocupa todo el espacio de izquierda a
derecha.
<BLOCKQUOTE> Para citar un texto. Se suele Me gustaría reencarnarme en las
... implementar dejando márgenes tanto a yemas de los dedos de Warren
</BLOCKQUOTE> izquierda como a derecha. Beatty (Woody Allen)

Caracteres Especiales
Caracteres Extendidos
Código Resultado
á, Á,
é, É, ... á, Á, é, É, í, Í, ó, Ó, ú, Ú
ñ Ñ ñ, N
¿ ¿
¡ ¡
º °
ª a
© ©
® ®

Caracteres Especiales
Caracteres de Control
En HTML existen cuatro caracteres de control que se usan para etiquetas y

parámetros. Para imprimirlos debemos usar su etiqueta equivalente.
Etiqueta Resultado
< <
> >
$amp; &
" “
Otros Elementos de Formato

<HR> Inserta una línea

horizontal
<BR> Salto de línea Cambia al siguiente renglón
El comentario sólo se muetra en el

 Comentarios
código fuente.
Listas
Listas Ordenadas
Existen dos tipos de listas: Ordenadas y Desordenadas.
Las Listas Ordenadas se utilizan para relacionar elementos con un orden

determinado y precedido de un número consecutivo y se incrementa
automáticamente.
Etiqueta Resultado
<OL> . . . </OL> Lista Ordenada (Inicio-Fin)

(Ordered List)
<LI> Elemento de la lista

(List Item)
TYPE=A Letras Mayúsculas
TYPE=a Letras Minúsculas
TYPE=I Números Romanos Mayúsculas
TYPE=i Números Romanos Minúsculas
TYPE=1 Números
START Inicio del primer elemento numerado

(por defecto 1)

Listas
Ejemplo de Listas Ordenadas
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY> <CENTER>
<H1>Listas </H1>
<HR>
<H2>Listas Ordenadas</H2>
</CENTER>


<H3>Primer Libro</H3>
<OL TYPE=A>
<LI> Capitulo 1 </LI>
</OL>


<H3>Segundo Libro</H3>
<OL >
<LI> Introduccion </LI>
<LI> Historia </LI>
<LI> Desarrollo </LI>
</OL>
<P>Ejemplos de listas ordenada en un documento HTML.
</BODY>
</HTML>

Listas
Listas Desordenadas
Las Listas Desordenadas se utilizan para relacionar elementos sin un orden

específico.
No tiene numeración y en su lugar se especifica en el atributo TYPE el tipo de

símbolo con el que inicia cada elemento.
Etiqueta Resultado
<UL> . . . Lista Desordenada (Inicio-Fin)

</UL> (Unordered List)
<LI> Elemento de la lista

(List Item)
TYPE=“disc”
●
TYPE=“circle” ◦
TYPE=“square” □

Tablas
Estructura de una Tabla
Las tablas son uno de los elementos más impotantes en HTML, ya que con ellas
es fácil hacer una representación ordenada de información.
Etiqueta Descripción
<TABLE Border=“n”> . . . </TABLE> Inicio y fin de una tabla.

n es el ancho del margen en pixeles
<TD> . . . </TD> Inicio y fin de cada una de las celdas
<TR> . . . </TR> Inicio y fin de cada una de las filas
<TH> . . . </TH> Inicio y fin de cada celda de cabecera

<CAPTION ALIGN=top|botton|right|left> . Título de la Tabla. Este puede estar situado
. . </CAPTION> en diferentes posiciones (ALIGN)
<TD ALIGN=”center”|”left”|”right”>
. . . </TD> Alineado de la celda
¾ <TABLE BGCOLOR=“color”>
¾ <TD BGCOLOR=“color”>
¾ <TR BGCOLOR=“color”>
Cambia el color del fondo de la tabla, celda y
Donde color = Black, White, Silver, fila respectivamente
Gray, Red, Purple, Green,
Yellow, Blue, etc

Tablas
Ejemplo de Tabla
<HTML>
<TABLE BORDER="8" BGCOLOR="silver">
<CAPTION>
Reporte de Gastos de Viaje
</CAPTION>
<TR BGCOLOR="yellow">
<TH>Ciudad</TH>
<TH id="a2" axis="expenses">Alimentos</TH>
<TH id="a3" axis="expenses">Hotel</TH>
<TH id="a4" axis="expenses">Transporte</TH>
<TD>subtotal</TD>
</TR>
<TR>
<TH id="a6" axis="location">Acapulco</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="a7" axis="date">25-Aug-06</TD>
<TD headers="a6 a7 a2">37.74</TD>
24 Dec 2006
<P> </P>
<TD></TD>
</TR>
<TR>
<TD id="a8" axis="date">26-Aug-06</TD>
<TD></TD>
</TR>
<TR>
<TD>subtotal</TD>
<TD>65.02</TD>
. . .

Fuentes
Fuentes (Fonts)
HTML incluye etiquetas para controlar el estilo o fuente de un bloque de texto,

estas etiquetas permiten establecer el tamaño, fuente del texto y color.
<FONT SIZE=n> Establece el tamaño
. . . de la fuente
</FONT> (n= 1Æ7)
<FONT COLOR=color>
. . . Establece el color de
</FONT> la fuente
<BODY BGCOLOR=color
TEXT=color> Cambia el color de
. . . fondo del documento
</BODY> y color del texto
<BODY
BACKGROUND=“imagen.gif” Imagen en fondo del
TEXT=color> documento y color
. . . del texto
</BODY>
<i> . . . </i> Italica
<b> . . . </b> Bold Black Silver Gray White Maroon Red Purple Fuchsia
<tt> . . . </tt> Teletipo Green Lime Olive Yellow Navy Blue Teal Aqua

Formularios
Formularios
Los formularios nos permiten interacción con el usuario mediante campos de

entrada <INPUT>, campos de selección <SELECT> y áreas de texto <TEXTAREA>.
Campo de Entrada <INPUT>

<FORM ACTION="" METHOD=POST>
. . .
</FORM> Inicio y fin de un formulario. Dentro del
formulario se indican los campos de entrada,
•ACTION es URL que gestionará el formulario
selección y áreas de texto.
•METHOD existen dos métodos de transferencia de la
información: POST y GET
<INPUT TYPE=TEXT NAME=“variable” >

Define campo de entrada de texto simple.
NAME Nombre de la variable
<INPUT TYPE=PASSWORD NAME=“variable” > Define campo de entrada de texto. El texto

introducido no visualiza, queda oculto por
NAME Nombre de la variable asteriscos.
<INPUT TYPE=CHECKBOX NAME=“variable”
VALUE=“valor”>
Define campo de entrada de opciones.
VALUE Valor del campo

Formularios
Campo de Entrada <INPUT> (continuación)
<INPUT TYPE=RADIO NAME=“variable” >
Define campo de entrada de texto simple.
<INPUT TYPE=“password” NAME=“variable” > Define campo de entrada de texto. El texto

introducido no visualiza, queda oculto por
NAME Nombre de la variable asteriscos.
<INPUT TYPE=SUBMIT VALUE=“Texto en el boton” > Define campo de botón de acción de envío.
Define campo de botón de acción de eliminar

<INPUT TYPE=RESET VALUE=“Texto en el boton” >
formulario.

Formularios
Ejemplo de Formulario
<HTML>
<HEAD>
<TITLE>Lenguajes de Internet </TITLE>
</HEAD>
<BODY> <CENTER>
<H1>Formularios</H1>
</CENTER> <HR>

Nombre : <INPUT TYPE=TEXT NAME="nombre" >
Apellido: <INPUT TYPE=TEXT NAME="apellido" >
<BR><BR>
¿Cuantos es dos mas dos?<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3
<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4
<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5
<BR><BR>
Verifica Dato
<INPUT NAME="ChkBOX" TYPE=CHECKBOX VALUE="si">
<BR>Enviar copias
<INPUT NAME="ChkBOX" TYPE=CHECKBOX
VALUE="verdadero">
<BR><BR>
Para enviar escriba su Password:
<INPUT TYPE=PASSWORD NAME="pass" >
<BR><BR>
<INPUT TYPE=SUBMIT VALUE="Enviar">
<INPUT TYPE=RESET VALUE="Cancelar">
</FORM>
</BODY>
</HTML>

Formularios
Ejemplo de Formulario Mejorado
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY> <CENTER>
<H1>Formularios Avanzados</H1>
</CENTER> <HR>

<BR>
Es posible crear botones más sofisticados
<BR><BR>
<BUTTON TYPE=BUTTON VALUE="DB_Server">

Enviar Datos al Servidor
</BUTTON>
<BR><BR>
<INPUT TYPE=IMAGE SRC="Imagenes\Duke.gif" alt=“Selecciona

equipo">
<BR> <BR> <BR>

<FIELDSET> <LEGEND>Ingresa Datos</LEGEND>
<LABEL> Correo electrónico:
<INPUT TYPE="text">
</LABEL>
</FIELDSET>
<INPUT TYPE=SUBMIT VALUE="Enviar">

<INPUT TYPE=RESET VALUE="Cancelar">
</FORM>
</BODY>
</HTML>

Formularios
Ejemplo de Formulario de
Selección y Area de Texto
<HTML>
<HEAD>
</TITLE>
</HEAD>
<BODY> <CENTER>
<H1>Formularios de Selección</H1>
</CENTER> <HR>
<H3>Selecciona tu Sistema Operativo Favorito </H3>

<SELECT NAME="Navegador">
<OPTION>Solaris
<OPTION>Linux
<OPTION>Windows
<OPTION>Mac OS
<OPTION>Otro
</SELECT>
<H3><BR>Selecciona un Navegador </H3>

<SELECT NAME="Navegador">
<OPTION>Netscape
<OPTION>Opera
<OPTION>Explorer
<OPTION>Otro
</SELECT>
<BR><BR>
Comentarios:
<TEXTAREA NAME="Comentarios" ROWS=6 COLS=40>
</TEXTAREA>
</BODY>
</HTML>

Enlaces
¿Qué son los Enlaces?
Un enlace es una zona de texto o gráficos que nos trasladan a otro documento
de hipertexto o a otra posición dentro del mismo documento.
Anclas (Anchors)
Las anclas son puntos de referencia que se marcan con una etiqueta para
acceder a dichos puntos mediante los enlaces.
<A HREF=“destino-enlace”> texto-descriptivo </A> Etiqueta de enlace.

Referencia en la misma página.
<A NAME=“ancla”>
Etiqueta de ancla. Esta puede estar
ancla Es el “destino-enlace” del enlace referenciado en la misma página o en otra.
en la etiqueta <A HREF=“ ” > . . . </A>
<A HREF=“pagina.html”> texto-descriptivo </A> Etiqueta de enlace.
Referencia hacia otra página o
<A HREF=“imagen.jpg”> Texto-descriptivo </A> hacia otro objeto/documento.
<A HREF=“pagina.html#destino-enlace”> Etiqueta de enlace.

texto-descriptivo </A> Referencia hacia otra página en un
punto específico (ancla).

Enlaces
Ejemplo de Enlaces y Anclas
<HTML>
<HEAD>
<TITLE>Lenguajes de Internet </TITLE>
</HEAD>
<BODY> <CENTER>
<A NAME="Inicio">
<H1>Enlaces y Anclas</H1> </CENTER> <HR>
<A NAME="http">
<H3>HTTP</H3>
Es el servicio invocado para transmitir páginas web
<A NAME="https">
<H3>HTTPS</H3>
Es una innovación sobre el anterior, que nos permite acceder a servidores
<A NAME="ftp">
<H3>FTP</H3>
Permite trasmitir archivos desde servidores de ftp anónimo. Si no le pedimos
<A NAME="mailto">
<H3>MAILTO</H3>
Para poder mandar un mensaje. Por ejemplo, la URL mailto:multivac@idecnet.com
<A NAME="news">
<H3>NEWS</H3>
Para poder acceder a foros de discusión (mal traducidos a veces como grupos
<A NAME="telnet">
<H3>TELNET</H3>
No es implementado generalmente por los navegadores, que suelen invocar un programa
<BR><BR>
<A HREF="#Inicio"> Inicio del documento</A> <br>
<A HREF="#http"> Sección HTTP</A> <BR>
<A HREF="#https"> Sección HTTPS</A> <BR>
<A HREF="#ftp"> Sección FTP</A> <BR>
<A HREF="#mailto"> Sección MAILTO</A> <BR>
<A HREF="#news"> Sección NEWS</A> <BR>
<A HREF="#telnet"> Sección TELNET</A> <BR>
</BODY>
</HTML>

Imágenes
Imágenes
Las imágenes son un recurso más en las páginas Web y puede hacer, en cierta
forma, una presentación más agradable y ofrecer más información que
únicamente palabras.
<IMG SRC=“archivo-imagen” ALIGN=alineacion

BORDER=n ALT=“descripcion”>
archivo-imagen Nombre del archivo de imágen Etiqueta de imágen

alineacion Alineación respecto al texto
n Grosor del borde de la imágen. 0=sin borde
descripcion Texto de descripción de la imágen
Los valores de alineacion pueden ser:
TOP Coloca el punto más alto de la imagen

coincidiendo con más alto de la línea de texto
MIDDLE Alinea el punto medio (altura) de la imagen
con la base del texto Valores que puede
tomar ALIGN
BOTTOM Alinea el punto más bajo de la imagen con la
base del texto (alineación por defecto)
LEFT Coloca la imagen a la izquierda del texto
RIGHT Coloca la imagen a la derecha del texto
Sonido
Audio
Es posible reproducir audio en el navegador. La capacidad de reproducir

sonido en una página HTML está determinada en gran medida por el propio
navegador.
Los formatos que se puede asegurar los navegadores reproducirán son los
archivos WAV y MID. Para poder reproducir otro tipo de formato los
navegadores necesitarán un plug-in.
Una forma de escuchar sonido es como parámetro HREF de un enlace, tal

como si fuera una página HTML:
<A HREF=“musica.wav"> Si pulsas me escucharás <A>
Cada vez que es seleccionada en enlace se reproducirá el audio.

Sonido
Audio de fondo
Netscape y Explorer ofrecen soluciones propietarias, distintas e incompatibles

para audio fondo.
Explorer
Desde la versión 2.0, se pueden incluir fondos sonoros utilizando la etiqueta
<BGSOUND SRC="musica.mid">
Netscape
Netscape utiliza su etiqueta <EMBED>. Teóricamente, esta etiqueta debería
servir para unir objetos de varios tipos a la página web, pero en la práctica
sólo se utiliza para esto.
<EMBED SRC="musica.mid“ AUTOSTART=TRUE|FALSE>
Ahora
AhoraelelExplorer
Exploreresescapaz
capazdedeinterpretar <EMBED>, ,pero
interpretar<EMBED> perono
no
exactamente de la misma manera, lo que provoca
exactamente de la misma manera, lo que provoca que que
aparezca
aparezcaunaunaventana
ventanaadicional
adicionalcon
conelelreproductor.
reproductor.
HTML
Referencias
http://www.w3c.org/ World Wide Web Consortium
http://www.ietf.org/ The Internet Engineering Task Force
http://www.iana.org/ Internet Assigned Numbers Authority
http://www.isoc.org/ Internet Society
http://www.rfc-editor.org/ Request For Comments
http://www.irtf.org/ Internet Research Task Force
http://www.cudi.edu.mx/ Corporación Universitaria para el

Desarrollo de Internet
http://www.internet2.edu/ Internet 2

HTML
¿Preguntas ?

HTML Presentacion

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML Presentacion

Загружено:

Авторское право:

Доступные форматы

HTML

Instituto Politécnico Nacional Escuela Superior de Ingeniería Mecánica y Eléctrica

HTML : HyperText Markup Language

Lenguaje de Marcación de Hipertexto

Es un lenguaje de programación que permite describir hipertexto, es decir,

• HiperTexto es texto el cual no está limitado a ser lineal

¡ ¡ La idea de Hipertexto fue desarrollada por Ted Nelson en 1968 ! !

ESIME-IPN Enero 2007 Juan Carlos Torres 2

Se comenzó así a desarrollar una plataforma de tipo hipertexto y un

HTTP (Hyper Text Transfer Protocol)

que permitiría a los científicos del CERN, consultar información aunque se

Fue tal el éxito alcanzado que se comenzó a definir un lenguaje de creación

ESIME-IPN Enero 2007 Juan Carlos Torres 3

 1992: HTML 1.0, Tim-Berners Lee propuesta original

ESIME-IPN Enero 2007 Juan Carlos Torres 4

• Se base en diseños simples

El tamaño de un archivo conteniendo sólo la frase ”Hello World!” tiene

Tipo Tamaño (bytes)

ESIME-IPN Enero 2007 Juan Carlos Torres 5

• La Web nació alrededor de 1989 a partir de un proyecto del CERN

• Tim Berners-Lee construyó el prototipo que dio lugar a lo que

• La intención original era hacer más fácil el compartir textos de

• El programa inicial del CERN, WWW sólo presentaba texto

• Navegadores web posteriores, como Viola (1992) añadieron la capacidad

• WWW permite hoy incluso servicios en tiempo real como webcasts,

ESIME-IPN Enero 2007 Juan Carlos Torres 6

Un recurso en la Web es localizado mediante su URL

protocolo servidor/Dominio directorio documento

protocolo servidor/Dominio directorio archivo

El protocolo puede ser uno de los siguientes y depende del servicio:

Un documento HTML está formado por los elementos:

Para delimitar los elementos se usan etiquetas (tags):

<nombre-etiqueta> Abre etiqueta

</nombre-etiqueta> Cierra etiqueta

ESIME-IPN Enero 2007 Juan Carlos Torres 8

<HTML> Inicio del documento HTML

ESIME-IPN Enero 2007 Juan Carlos Torres 9

ESIME-IPN Enero 2007 Juan Carlos Torres 10

HTML tiene seis etiquetas para mostrar encabezados

<H1> ... </H1> Encabezado de nivel 1

<H4> ... </H4> Encabezado de nivel 4

<H5> ... </H5> Encabezado de nivel 5

<H6> ... </H6> Encabezado de nivel 6

ESIME-IPN Enero 2007 Juan Carlos Torres 11

Estas etiquetas nos permiten cambiar el aspecto de la letra

Etiqueta Descripción Resultado

<I> ... </I> Representa el texto en cursiva. Texto en itálica o cursiva

Como soy muy importante estoy

Permite representar el texto en

<SUP> ... </SUP> Letra superíndice. E=mc2

<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1

<BIG> ... Incrementa el tamaño del tipo

ESIME-IPN Enero 2007 Juan Carlos Torres 12

Etiqueta Descripción Resultado

Sirve para delimitar un párrafo. Inserta

<CENTER> ... Yo soy normal

ESIME-IPN Enero 2007 Juan Carlos Torres 13

ESIME-IPN Enero 2007 Juan Carlos Torres 14

En HTML existen cuatro caracteres de control que se usan para etiquetas y

Otros Elementos de Formato

<HR> Inserta una línea

<BR> Salto de línea Cambia al siguiente renglón

El comentario sólo se muetra en el

1992: HTML 1.0, Tim-Berners Lee propuesta original