Manual HTML

Guía Rápida HTML
HTML
Un archivo HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto) es un archivo de
texto con extensión .HTM o .HTML. Es el fundamento del gran éxito y desarrollo de Internet. Todos los demás
lenguajes que han aparecido para Internet funcionan en asociación con HTML. De tal forma que conocer el
lenguaje HTML es conocer el núcleo del proceso de creación de un sitio web.
Se basa en el uso de etiquetas (tags) también llamadas marcas, directivas o comandos. Estas etiquetas
son fragmentos de texto delimitados por los símbolos menor que < y mayor que >. Estas etiquetas le indican al
navegador la forma de representar el texto, los gráficos, imágenes y videos que conforman un documento.
Existe normalmente una etiqueta de inicio <Etiqueta> y otra de final </Etiqueta> aunque algunos
comandos sólo disponen de la etiqueta de inicio.
Las etiquetas mal escritas o desconocidas para un navegador son simplemente ignoradas.
ESTRUCTURA DE UN DOCUMENTO HTML

Un documento HTML está definido por una etiqueta de inicio <HTML> y una final </HTML>. Tiene dos
partes fundamentales que son la cabecera comprendida entre las etiquetas <HEAD> y </HEAD> y el cuerpo
comprendido entre <BODY> y </BODY>.
<HTML>
<HEAD>
Definiciones de la cabecera del documento
</HEAD>
<BODY>
Cuerpo del documento HTML que se va a visualizar
</BODY>
</HTML>
La cabecera contiene fundamentalmente información general sobre el documento. Dentro de esta

etiqueta se puede utilizar la etiqueta <TITLE></TITLE> la cual especifíca el título del documento que se
muestra en la parte superior del navegador.
<TITLE>Este es el título de mi página WEB</TITLE>
El cuerpo de un documento HTML contiene el texto de la página que se va a presentr al usuario. Dentro
de estas etiquetas se debe situar todo el código fuente del documento.
Dentro del documento en general se puede emplear una etiqueta que permite incluir comentarios dentro
de nuestro código fuente 
<HTML>
<HEAD>

<TITLE>Estructura de un programa en HTML</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
Taller de Computación IV Página 1 de 19

Guía Rápida HTML
COLORES Y FONDO DE UN DOCUMENTO

La etiqueta <BODY> presenta una serie de atributos que permiten establecer una serie de
características generales para todo el documento, como son el color del texto, de los enlaces o del fondo. Los
colores se pueden indicar en formato hexadecimal o por medio de su nombre en inglés.
#rrggbb Color
#000000 Black
#FFFFFF White
#00FFFF Aqua
#0000FF Blue
#FF00FF Fuschia
#808080 Gray
#00FF00 Green
#00FF00 Lime
#800000 Maroon
#000080 Navy
#808000 Olive
#800080 Purple
#FF0000 Red
#C0C0C0 Silver
#008080 Silver
#FFFF00 Yellow
Los atributos que se pueden agregar a la etiqueta <BODY> pueden ser los siguientes:
BGCOLOR=”#rrggbb o nombre del color”, para especificar el color del fondo del documento.
TEXT=”#rrggbb o nombre del color”, para especificar el color general del texto.
LINK=”#rrggbb o nombre del color”, para especificar el color del texto de los enlaces.
VLINK=”#rrggbb o nombre del color”, para especificar el color del texto de los enlaces ya visitados.
ALINK=”#rrggbb o nombre del color”, para especificar el color que tomará el texto del enlace en el momento de
su activación.
<HTML>
<HEAD>
<TITLE>Primera Página Web</TITLE>
</HEAD>
<BODY BGCOLOR=”Green” TEXT=”Black” LINK=”Blue” VLINK=”Fuchsia” ALINK=”Red”>
</BODY>
</HTML>
PÁRRAFOS Y SALTOS DE LÍNEA

HTML no reconoce más de un espacio en blanco separando cualquier elemento o texto, es decir, los saltos de
línea, tabulaciones y demás separadores son convertidos a un único espacio en blanco. Para HTML todo el texto
es continuo, para indicar el principio y fin de un párrafo se utiliza <P></P>. Para cambiar de línea se utiliza
<BR> esta etiqueta solo tiene marca inicial.
<HTML>
<HEAD>
<TITLE>Segunda Página Web</TITLE>
</HEAD>
<P>La internet es una red que nos permite obtener información,<BR>sin embargo no toda es
confiable.<BR>Por lo cual debemos confrontar con otros textos</P>
<P>La diversidad de culturas que integran la Internet…</P>
</BODY>
</HTML>

Guía Rápida HTML
CABECERAS Y SEPARADORES
Las cabeceras se emplean para dividir los documentos en secciones. La etiqueta que define la cabecera es
<Hn> y </Hn>, donde n varía del 1 al 6. El valor de 1 corresponde a una letra muy grande y el del 6 con una
letra más pequeña. Esta etiqueta genera automáticamente un salto de línea similar al que se consigue con <P>.
<HTML>
<head>
<title>Tercera Página Web</title>
</head>
<body bgcolor=”Green” text=”Black”>
<h1>La internet es una red que nos permite obtener información,</h1>
<h2>sin embargo no toda es confiable.</h2>
<h3>Por lo cual debemos confrontar con otros textos</h3>
<p>La diversidad de culturas que integran la Internet…</p>
</body>
</HTML>
Para poder separar partes del documento, la etiqueta <HR> dibuja una barra horizontal que divide la pantalla
con un grosor y una longitud determinada a través de sus atributos. El atributo SIZE especifica el grosor de la
barra y WIDTH indica la longitud. Para establecer la alineación de la barra se utiliza ALIGN con los valores left,
right y center. Con NOSHADE se elimina el efecto de sombra de la barra.
<HTML>
<HEAD>
<TITLE>Cuarta Página Web</TITLE>
</HEAD>
<H1>La internet es una red que nos permite obtener información,</H1>
<HR>
<H2>sin embargo no toda es confiable.</H2>
<HR SIZE=10>
<H3>Por lo cual debemos confrontar con otros textos</H3>
<HR WIDTH=70 ALIGN=LEFT>
<H4>La diversidad de culturas que integran la Internet…</H4>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Quinta Página Web</TITLE>
</HEAD>
<H1>La internet es una red que nos permite obtener información,</H1>
<H2>sin embargo no toda es confiable.</H2>
<H3>Por lo cual debemos confrontar con otros textos</H3>
<H4>La diversidad de culturas que integran la Internet…</H4>
<HR WIDTH=50%>
</BODY>
</HTML>

Guía Rápida HTML
TEXTO CON FORMATO PREESTABLECIDO

Existe una etiqueta que permite introducir texto con formato. El texto incluido entre las etiquetas <PRE> y
</PRE> será visualizado por el navegador respetando los espacios y saltos de línea. El atributo WIDTH permite
especificar el máximo número de caracteres por línea.
<HTML>
<HEAD>
<TITLE>Sexta Página Web</TITLE>
</HEAD>
<BODY BGCOLOR=”Blue” TEXT=”White”>
<PRE WIDTH=100>
<H1> INSTITUTO DE TRAMITACIÓN ADUANAL DEL NORTE</H1>
<HR>
<H3> RELACIÓN DE ALUMNOS CON BECA DE EXCELENCIA</H3>
ALUMNO GRUPO ESPECIALIDAD
Roberto C 2A Tráfico de Mercancías
Laura Ortiz 3A Tráfico de mercancías
Juan Orta 1A Lic. Administración Aduanas
<HR>
</PRE>
</BODY>
</HTML>
ESTILOS DE TEXTO
<B> Muestra el texto en negrita
<I> Muestra el texto en cursiva
<U> Subraya el bloque de texto delimitado
<BIG> Muestra el texto en letra grande
<SMALL> Muestra el texto en letra pequeña
<SUP> Muestra el texto seleccionado como superíndice
<SUB> Muestra el texto seleccionado como subíndice
<STRIKE> Muestra el texto tachado
<CENTER> Muestra el texto centrado en pantalla
<HTML>
<HEAD>
<TITLE>Séptima Página Web</TITLE>
</HEAD>
<BODY BGCOLOR=”Green” TEXT=”Black”>
<H1><CENTER>ESTILOS DE TEXTO</CENTER></H1>
<H1><B>La internet es una red que nos permite obtener información,</B></H1>
<H2><I>sin embargo no toda es confiable.</I></H2>
<H3><U>Por lo cual debemos confrontar con otros textos</U></H3>
<H4><SMALL>La diversidad de culturas que integran la Internet</SMALL></H4>
<H3><SUP>Hace que</SUP> el intercambio de <SUB>información</SUB> sea mas</H3>
<H2><STRIKE>integral</STRIKE></H2>
</BODY>
</HTML>

Guía Rápida HTML
FUENTES
La etiqueta <FONT> permite controlar el estilo de un bloque de texto. El atributo SIZE establece el tamaño de
la fuente, FACE establece la fuente del texto y COLOR el color de la misma. Los tamaños del texto van del 1 al
7, el tamaño normal es 3. Si es necesario poner todo el texto con un mismo tamaño podemos utilizar la etiqueta
<BASEFONT>.
<HTML>
<HEAD>
<TITLE>Octava Página Web</TITLE>
</HEAD>
<BODY>
<FONT SIZE="5" FACE="Tahoma" COLOR="Blue">En todo proyecto es importante definir un
Objetivo
</FONT>
<BR>
<FONT SIZE="6" FACE="Frutiger Linotype" COLOR="Green">y dividir por etapas los
<FONT COLOR="BLACK">procesos
</FONT>
</BODY>
</HTML>
LOS ENLACES
Otra característica de HTML es la de poder moverse a través de un documento o varios, seleccionando zonas de
texto o imágenes programadas para tal fin. Cualquier elemento de un documento HTML puede ser definido como
enlace a otros puntos del documento o de la red.
La estructura general de un enlace se conforma por la etiqueta <A> y un conjunto de atributos. Un enlace se
distingue del texto normal porque aparece resaltado generalmente en color azul y subrayado. En la parte
inferior del navegador aparece el lugar al que se accederá.
La estructura básica es la siguiente: <A HREF=”Lugar de enlace”>Información del enlace</A>
TIPOS DE ENLACE
ENLACE A UN PUNTO DE LA MISMA PÁGINA

Cuando se trabaja con documentos muy extensos se utilizan enlaces del inicio del documento al final del mismo
y viceversa, con el propósito de agilizar la tarea del usuario al momento de examinar el documento.
Como primer paso marcamos las zonas del documento a las que se debe acceder de manera inmediata, en este
caso el principio y final del documento:
En el principio del documento agregamos la siguiente línea: <A NAME=’InicioDocumento’>

Al final del documento agregamos la siguiente línea: <A NAME=’FinDocumento’>
Una vez marcadas las zonas escribimos los enlaces:

Al principio de la página: <A HREF=’#FinDocumento’>Ir al final de la página</A>
Al final de la página: <A HREF=’InicioDocumento’>Regresar al inicio de la página

Guía Rápida HTML
<HTML>
<head>
<title>Novena Página Web</TITLE>
</head>
<body bgcolor=”Navy”>
<font size="2" face="Tahoma">
<a name='InicioDocumento'></a>
<a href='#FinDocumento' title="Ir al Final de la Página">Ir al final de la página</a>
<pre width=1000>
<font size="6" face="Verdana" color="White">LENGUAJE DE PROGRAMACIÓN
<font size="4" face="Tahoma" color="White">
Los lenguajes de programación son un conjunto de reglas, herramientas y condiciones
que nos permiten crear programas o aplicaciones dentro de una computadora.
Estos programas son los que nos permitirán ordenar distintas acciones a la computadora
en un “idioma” comprensible por ella. Como su nombre lo indica, un lenguaje tiene su
parte sintáctica y su parte semántica.
Esto quiere decir que todo lenguaje de programación posee reglas acerca de cómo
se deben escribir las sentencias y de qué forma.
A su vez, los lenguajes de programación se dividen en tres grandes grupos:
los lenguajes de máquina, los de bajo nivel y los de alto nivel.
<font size="5" face="Tahoma" color="Yellow">Lenguaje de máquina

<font size="4" face="Tahoma" color="White">Los lenguajes de máquina son los que entiende una
computadora sin la necesidad
de realizar ninguna conversión. Escribirlos resulta extremadamente difícil para un programador
convencional. Hoy en día, nadie programa en este lenguaje, pero como es necesario
para que la computadora entienda lo que tiene que hacer, existen programas que se encargan
de transformar el código comprensible por un programador en código comprensible
por una computadora.
Las instrucciones en este tipo de lenguaje se componen en la unidad de memoria
más pequeña que existe dentro de una computadora, que se llama bit.
Cada una de estas unidades puede tener sólo dos valores posibles: 1 o 0.
<a name='LenguajeBajoNivel'></a>
<font size="5" face="Tahoma" color="Red">Lenguaje de bajo nivel
<font size="4" face="Tahoma" color="White">Los lenguajes de bajo nivel, también llamados
ensambladores, son aquellos cuyas sentencias están formadas por códigos nemotécnicos
(abreviaturas de palabras inglesas).
Son lenguajes que, por más complejos que sean, resultan mucho más comprensibles que los
lenguajes de máquina. Estos lenguajes son, además, dependientes de la arquitectura de cada
procesador, ya que cada procesador ofrece un conjunto de instrucciones distinto para trabajar en
este nivel de programación.
Una vez escrito el programa en este lenguaje, se necesita otro programa ensamblador,
para que traduzca las sentencias en instrucciones comprensibles por la máquina.
<font size="5" face="Tahoma" color="Green">Lenguaje de alto nivel

<font size="4" face="Tahoma" color="White">Los lenguajes de alto nivel son aquellos que poseen
sentencias formadas por palabras similares a las del lenguaje humano. Por lo tanto, resulta mucho
más sencillo escribir un programa en un lenguaje de alto nivel para luego traducirlo en código
comprensible para una computadora.
Algunos ejemplos de este tipo de lenguaje son: Pascal, Lenguaje C, Delphi, Cobol, FoxPro, JAVA, PHP,
Visual Basic, Visual FoxPro, etc. Además, podemos decir que, dentro de este conjunto de lenguajes
de programación, algunos son de más alto nivel que otros, pero, en general, todos entran en
esta categoría.
</pre>
<a name='FinDocumento'></a>
<a href='#InicioDocumento' title="Ir al Inicio de la Página">Regresar al inicio de la página</a>
<a href='Pagina10.htm' title="Enlace a la Página 10">Regresar a la Página 10</a>
</body>
</HTML>

Guía Rápida HTML
ENLACE A OTRAS PÁGINAS
Cuando tenemos varias páginas podemos acceder a cualquiera de ellas especificando el nombre del archivo que
la contiene.
<A HREF=”NombredelaPagina.htm”>Consultar mi página web</A>
<HTML>
<head>
<title>Décima Página Web</title>
</head>
<font size="4" face="Planet Benson">
<a href='Pagina9.htm' title="Enlace a la Página 9">LENGUAJE DE PROGRAMACIÓN</A>
<p></p>
<a href='Pagina9.htm#LenguajeBajoNivel' title="Enlace a la Página 9 Lenguaje de Bajo
Nivel">LENGUAJE DE BAJO NIVEL</A>
</body>
</HTML>
LISTAS
Las listas se emplean para presentar de forma ordenada una serie de líneas.
LISTAS DESORDENADAS <UL> y </UL>

Las listas desordenadas se utilizan para relacionar elementos sin orden específico. HTML coloca un símbolo
delante de cada elemento dependiendo del valor especificado en el atributo TYPE. El atributo puede ser circle
(círculo sin relleno), disc (círculo con relleno) y square (cuadrado).
<HTML>
<head>
<title>Décima Primera Página Web</title>
</head>
<ul type=square>
<li>Lenguaje Máquina
<li>Lenguajes de Alto Nivel
<ul type=disc>
<li>Pascal
<li>Cobol
</ul>
<li>Lenguaje Ensamblador
</ul>
<ul type=circle>
<li>Otros
</ul>
</body>
</HTML>
LISTAS ORDENADAS <OL> y </OL>

Este tipo de lista se utiliza para relacionar elementos con un orden determinado y precedido de un número que
se incrementa automáticamente. Las listas ordenadas siempre comienzan por 1 y aumentan progresivamente.
Sus características pueden controlarse con los atributos TYPE y START.
TYPE=A (Letras mayúsculas)

TYPE=a (Letras minúsculas)
TYPE=I (Números romanos en mayúscula)
TYPE=i (Números romanos en minúscula)
TYPE=1 (Números)

Guía Rápida HTML
<HTML>
<head>
<title>Décima Segunda Página Web</title>
</head>
<ol type=1>
<ol type=A>
<li>Pascal
<li>Cobol
</ol>
</ol>
<ol type=I>
<li>Otros
</ol>
</body>
</HTML>
START especifica el número del primer elemento de la lista para valores distintos a 1.
<HTML>
<head>
<title>Décima Tercera Página Web</title>
</head>
<ol start=3>
<ol type=a>
<li>Pascal
<li>Cobol
</ol>
</ol>
<ol type=i>
<li>Otros
</ol>
</body>
</HTML>
LISTAS DE DEFINICIÓN <DL> y </DL>

Las listas de definición se utilizan para glosarios, catálogos, etc. y están formadas por un primer elemento
denominado título indicado con la etiqueta <DT> y un segundo elemento denominado definición indicado con la
etiqueta <DD>.
<HTML>
<head>
<title>Décima Cuarta Página Web</title>
</head>
<dl>
<dt>Lenguajes de Programación
<dd>Lenguaje Máquina
<dd>Lenguajes de Alto Nivel
<dd>Lenguaje Ensamblador
<dt>Lenguajes de Alto Nivel
<dd>Pascal
<dd>C
</dl>
</body>
</HTML>

Guía Rápida HTML
IMÁGENES
Para incluir imágenes se emplea la etiqueta <IMG> con los atributos SRC y ALT. Las imágenes deben estar en
formato GIF (256 colores), JPEG (16.7 millones de colores), PNG (calidad superior a JPEG).
<IMG SRC=”Nombre de archivo” ALT=”Comentario para la imágen”>
ALINEACIÓN DE LA IMAGEN CON EL TEXTO

El atributo ALIGN permite alinear la imagen respecto al texto con los siguientes parámetros:
Left: alinea la imagen a la izquierda

Right: alinea la imagen a la derecha
Top: alinea la parte superior de la imagen con el borde superior de la línea
Texttop: alinea la parte superior de la imagen con el texto de mas altura en la línea
Middle: alinea la línea base del texto con la mitad de la imagen
Absmiddle: alinea el punto medio vertical de la línea de texto con la mitad de la imagen
Bottom: alinea el borde inferior del texto con el borde inferior de la imagen
<HTML>
<head>
<title>Décima Quinta Página Web</title>
</head>
<font size="4" face="Frutiger Linotype" color="white">
<img src='carrocen.jpg' align='left' alt="Imágen en Formato JPG">Alineación con LEFT
</font>
</body>
</HTML>
<HTML>
<head>
<title>Décima Sexta Página Web</title>
</head>
<img src='carrocen.jpg' align='right' alt="Imágen en Formato JPG">Alineación con RIGHT
</font>
</body>
</HTML>
<HTML>
<head>
<title>Décima Séptima Página Web</title>
</head>
<img src='carrocen.jpg' align='top' alt="Imágen en Formato JPG">Alineación con TOP
</font>
</body>
</HTML>
<HTML>
<head>
<title>Décima Octava Página Web</title>
</head>
<img src='carrocen.jpg' align='middle' alt="Imágen en Formato JPG">Alineación con MIDDLE
</font>
</body>
</HTML>

Guía Rápida HTML
TAMAÑO Y BORDE DE IMÁGENES
Para poner bordes a las imágenes se utiliza el atributo BORDER, si su valor es 0 la imagen aparece sin borde, un
valor mayor que 0 representa un borde en la imagen directamente proporcional al valor introducido.
<HTML>
<head>
<title>Décima Novena Página Web</title>
</head>
<img src='inter.jpg' align='middle' border='3' alt="Imágen en Formato JPG" >Alineación con
MIDDLE y BORDER 3
</font>
</body>
</HTML>
Otros atributos son WIDTH (anchura) y HEIGHT (altura) con los que podemos redimensionar una imagen para
adaptarla a nuestras necesidades. VSPACE (espacio a reservar para la imagen arriba y debajo de la misma) y
HSPACE (espacio a reservar a la derecha y a la izquierda de la imagen) el valor se especifica en puntos.
<HTML>
<head>
<title>Vigésima Página Web</title>
</head>
<font size="4" face="Frutiger Linotype" color="fuschia">
<img src='OjoNatural.gif' width=300 height=301 align='middle' border='3' vspace=30
hspace=30>Alineación MIDDLE
<p>Imagen reducida en 300x301 y con Vspace y Hspace = 30</p>
</font>
</body>
</HTML>
TABLAS
Las etiquetas <TABLE> y </TABLE> nos sirven para definir el principio y final de una tabla. Para definir las
celdas y las filas de la tabla utilizamos las siguientes etiquetas:
<TD> y </TD> para inicio y final de cada celda
<TR> y </TR> para inicio y final de cada fila
<TH> y </TH> para inicio y final de una celda de cabecera la cual aparecerá en negrita y centrado.
Diseño de una Tabla de 10 celdas y 2 filas para clasificar los números del 0 al 9.
<HTML>
<head>
<title>Vigésima Primera Página Web</title>
</head>
<table>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
</tr>
</table>
</body>
</HTML>

Guía Rápida HTML
Si se requiere que los datos vayan dentro de bordes se añade el atributo BORDER a la etiqueta <TABLE>
indicando el grosor. También se puede utilizar la etiqueta <CAPTION> para poner título a la tabla con el atributo
ALIGN con el valor top o bottom.
<HTML>
<head>
<title>Vigésima Segunda Página Web</title>
</head>
<font size="4" face="Frutiger Linotype">
<table border=5>
<caption align=top>Horas Trabajadas en la Primera Semana de Febrero</caption>
<tr>
<th>Domingo 1</th><th>Lunes 2</th><th>Martes 3</th><th>Miercoles 4</th>
<th>Jueves 5</th><th>Viernes 6</th><th>Sábado 7</th>
</tr>
<tr>
<td>4</td><td>8</td><td>8</td><td>10</td><td>11</td><td>8</td><td>4</td>
</tr>
</table>
</font>
</body>
</HTML>
Para alinear el contenido de las celdas podemos utilizar los siguientes valores:
En el atributo ALIGN: Center (Alineado en el centro), Left (Alineado a la izquierda), Right (Alineado a la
derecha)
En el atributo VALIGN: Top (Alineado en la parte superior de la celda), Middle (Alineado en la parte central de la
celda), Bottom (Alineado en la parte inferior de la celda)
<HTML>
<head>
<title>Vigésima Tercera Página Web</title>
</head>
<table border=4>
<tr>
<th>Domingo 1</th><th>Lunes 2</th><th>Martes 3</th>
<th>Miércoles4</th><th>Jueves 5</th><th>Viernes 6</th>
<th>Sábado 7</th>
</tr>
<tr>
<td colspan=2 align=center><img src='OjoNatural.gif' width=250 height=51></td>
<td align=center>5</td><td align=left>4</td><td align=right>3</td>
<td align=center>2</td><td align=center>1</td>
</tr>
<tr>
<td rowspan=2 align=center>Aquí Usamos Dos Filas</td>
<td align=center>1</td><td align=center>2</td><td align=center>3</td>
</tr>
<tr>
</tr>
</table>
</font>
</body>
</HTML>

Guía Rápida HTML
También podemos especificar la anchura y altura con porcentajes de la dimensión de la pantalla.
<HTML>
<head>
<title>Vigésima Cuarta Página Web</title>
</head>
<table border=4 height=50% width=80%>
<tr>
<th>Miércoles 4</th><th>Jueves 5</th><th>Viernes 6</th>
<th>Sábado 7</th>
</tr>
<tr>
<td align=center>5</td><td align=left>4</td><td align=right>3</td>
</tr>
<tr>
<td rowspan=2 align=center>Aquí Usamos Dos Filas</td>
</tr>
<tr>
</tr>
</table>
</font>
</body>
</HTML>
También podemos asignar color de fondo a la tabla o a una celda en especial con el atributo BGCOLOR
<HTML>
<head>
<title>Vigésima Quinta Página Web</title>
</head>
<table border=4 height=50% width=80% bgcolor=fuschia align="center">
<caption align=top>
Horas Trabajadas en la Primera Semana de Febrero
</font>
</caption>
<tr>
<th>Miércoles 4</th><th>Jueves 5</th><th>Viernes 6</th><th>Sábado 7</th>
</tr>
<tr>
</tr>
<tr>
<td rowspan=2 align=center bgcolor=maroon>
Aquí Usamos Dos Filas
</font>
</td>

Guía Rápida HTML
</tr>
<tr>
</tr>
</table>
</font>
</body>
</HTML>
FRAMES
Un FRAME es un marco que divide la pantalla en filas y columnas de acuerdo a nuestros requerimientos. De tal
forma que podemos dividir la pantalla en ventanas y visualizar un menú en la parte superior y el resultado del
enlace en la parte inferior o de acuerdo a nuestras necesidades.
Dentro de los FRAMES se encuentra el atributo TARGET que determina la zona de la pantalla en donde se
mostrarán los elementos del enlace seleccionado.
El código principal de una página con FRAMES no utiliza las etiquetas <BODY> y </BODY>. La etiqueta
<FRAMESET> nos permite dividir la pantalla en ventanas horizontales o verticales utilizando los atributos ROWS
(renglones) y COLS (columnas).
Los formatos para los valores de división de la pantalla son los siguientes:
N Indica la altura o anchura de la ventana en pixeles
% Indica la altura o anchura de la ventana en porcentajes
* Indica que debe asignarse a la ventana todo el espacio disponible
<HTML>
<head>
<title>Vigésima Sexta Página Web</title>
</head>
<frameset frameborder=0 bordercolor='red' rows='16%,*'>
<frameset cols='100%'>
<frame name='Ventana1' src='Pagina28.htm'>
</frameset>
<frameset cols='15%,*'>
<frame name='Ventana2' src='Pagina27.htm'>
<frame name='Ventana3' src="Pagina29.htm">
</frameset>
</frameset>
</HTML>
<HTML>
<head>
<title>Vigésima Séptima Página Web</title>
</head>
<body background="tesela_a_026.bmp">
<img src="logoitan.bmp" width=135 height=75>
<hr>
<font size="2" face="Frutiger Linotype" color="#660000">CONTENIDO TEMÁTICO</font>
<br><hr>
<a href='Pagina29.htm' target='Ventana3' title="Página Principal">
<font size="2" face="Verdana" color="#660000">Principal</font>
</a>
<br>
<a href='Pagina30.htm' target='Ventana3' title="Enlace a la Página 30">
<font size="2" face="Verdana" color="#660000">Tipos de Lenguaje</font>
</a>
</body>
</HTML>

Guía Rápida HTML
<HTML>
<head>
<title>Vigésima Octava Página Web</title>
</head>
<body bgcolor="#660000">
<table border=0 height=12% width=100% align="center">
<tr>
<td align=center>
<font size="2" face="Verdana" color="white">Lic. en Administración de
Aduanas</font>
</td>
<td align=center>
<font size="9" face="AirCut" color="white">Guía Rápida</font>
</td>
<td align=center>
<font size="7" face="Planet Benson" color="white">HTML</font>
</td>
<td align=center>
<font size="2" face="Verdana" color="white">Taller de Computación IV</font>
</td>
</tr>
</table>
</HTML>
<HTML>
<head>
<title>Vigésima Novena Página Web</title>
</head>
<body bgcolor="#C0C0C0">
<img src="itan4.bmp" width=800 eight=1200>
<p></p>
<hr>
<font size="9" face="Arial Rounded MT Bold" color="blue"><center>Instituto de Tramitación
Aduanal del Norte</center></font>
<hr>
<marquee>ITAN</marquee>
</body>
</HTML>

Guía Rápida HTML
<HTML>
<head>
<title>Trigésima Página Web</TITLE>
</head>
<a name='InicioDocumento'></a>
<a href='#FinDocumento' title="Ir al Final del Documento">Ir al final del documento</a>
<p style="text-align:justify;">
<font size="6" face="Verdana" color="White">LENGUAJES DE PROGRAMACIÓN
<font size="2" face="Verdana" color="White">
<br>Los lenguajes de programación son un conjunto de reglas, herramientas y condiciones
que nos permiten crear programas o aplicaciones dentro de una computadora.
Estos programas son los que nos permitirán ordenar distintas acciones a la computadora
en un “idioma” comprensible por ella. Como su nombre lo indica, un lenguaje tiene su
parte sintáctica y su parte semántica.
<br><br>
Esto quiere decir que todo lenguaje de programación posee reglas acerca de cómo
se deben escribir las sentencias y de qué forma.
A su vez, los lenguajes de programación se dividen en tres grandes grupos:
los lenguajes de máquina, los de bajo nivel y los de alto nivel.
<br><br>
<font size="5" face="Tahoma" color="Yellow">Lenguaje de máquina
<br>Los lenguajes de máquina son los que entiende una computadora sin la necesidad
de realizar ninguna conversión. Escribirlos resulta extremadamente difícil para un programador
convencional. Hoy en día, nadie programa en este lenguaje, pero como es necesario
para que la computadora entienda lo que tiene que hacer, existen programas que se encargan
de transformar el código comprensible por un programador en código comprensible
por una computadora.
Las instrucciones en este tipo de lenguaje se componen en la unidad de memoria
más pequeña que existe dentro de una computadora, que se llama bit.
Cada una de estas unidades puede tener sólo dos valores posibles: 1 o 0.
<br><br>
<font size="5" face="Tahoma" color="Red">Lenguaje de bajo nivel
<br>Los lenguajes de bajo nivel, también llamados ensambladores,
son aquellos cuyas sentencias están formadas por códigos nemotécnicos (abreviaturas de palabras
inglesas).
Son lenguajes que, por más complejos que sean, resultan mucho más comprensibles que los
lenguajes de máquina.
Estos lenguajes son, además, dependientes de la arquitectura de cada procesador, ya que cada
procesador
ofrece un conjunto de instrucciones distinto para trabajar en este nivel de programación.
Una vez escrito el programa en este lenguaje, se necesita otro programa ensamblador,
para que traduzca las sentencias en instrucciones comprensibles por la máquina.
<br><br>
<font size="5" face="Tahoma" color="Green">Lenguaje de alto nivel
<br>Los lenguajes de alto nivel son aquellos que poseen sentencias formadas por palabras
similares a las del lenguaje humano. Por lo tanto, resulta mucho más sencillo escribir un programa en
un lenguaje de alto nivel para luego traducirlo en código comprensible para una computadora.
Algunos ejemplos de este tipo de lenguaje son: Pascal, Lenguaje C, Delphi, Cobol, FoxPro, JAVA, PHP,
Visual Basic, Visual FoxPro, etc. Además, podemos decir que, dentro de este conjunto de lenguajes
de programación, algunos son de más alto nivel que otros, pero, en general, todos entran en esta
categoría.
</p>
<a name='FinDocumento'></a>
<a href='#InicioDocumento' title="Ir al Inicio del Documento">Regresar al inicio del documento</a>
</body>
</HTML>

Guía Rápida HTML
FORMULARIOS <FORM> y </FORM>
A través de los formularios el usuario puede pedir y ofrecer información. Los formularios pueden introducirse en
cualquier parte del documento y pueden contener en su interior listas e imágenes.
Las etiquetas que definen los campos de entrada son <INPUT>, las que definen los campos de selección son
<SELECT> y las áreas de texto <TEXTAREA>.
Los atributos de la etiqueta <FORM> son:
ACTION: Determina la acción que debe realizarse al pulsar el botón de ejecución.

METHOD: Indica el método de transferencia de la información introducida en el formulario. Pueden emplearse
los métodos GET y POST.
 GET: Envía la información a través de una variable llamada QUERY_STRING
 POST: Utiliza dos variables CONTENT_LENGTH que contiene la longitud de datos enviados, y CONTENT
TYPE que incluye los datos.
ENCTYPE: Determina la forma de codificación empleada para el transporte del contenido del formulario.
DEFINICION DE CAMPOS DE ENTRADA <INPUT>

La etiqueta <INPUT> nos sirve para definir todos los elementos del formulario, botones, cajas de texto, casillas
de verificación, etc. El atributo que determina el tipo de elemento es TYPE.
Los tipos de entrada son:

Checkbox: Cuadro vacío de selección que permite selecciones múltiples. Los elementos de éste tipo requieren
como mínimo los atributos NAME y VALUE, que indican el nombre del tipo y el valor del campo. También se
puede incluir el atributo CHECKED cuando se requiere que una opción aparezca seleccionada por defecto.
Hidden: Se utiliza para pasar los datos capturados en un formulario a otro sin que se visualice nada en pantalla.
Requiere especificar los atributos NAME y VALUE, en el primero se especifica el nombre del formulario y en el
segundo el valor.
Text: Se utiliza para la entrada de textos, puede utilizar el atributo MAXLENGTH que delimita el número máximo
de caracteres que pueden ser introducidos, el atributo SIZE que especifica la cantidad de espacio reservado para
introducir el texto y el atributo VALUE que permite poner un valor inicial en la casilla.
Password: Se utiliza para la introducción de texto visualizándose asteriscos en lugar de los caracteres.
Radio: Círculo vacío de selección. Es similar a Checkbox pero sólo permite una opción entre varias.
Reset: Borra todos los datos capturados en el formulario.
Submit: Envía la información capturada en el formulario.
<HTML>
<head>
<title>Trigésima Primera Página Web</TITLE>
</head>

<font size="3" face="Verdana" color="White">MAXIMO NIVEL DE ESTUDIOS</font><br>
<input type="checkbox" name="estudios" VALUE="Primaria">Primaria<br>
<input type="checkbox" name="estudios" VALUE="Secundaria">Secundaria<br>
<input type="checkbox" name="estudios" VALUE="Bachillerato"checked>Bachillerato<br>
<input type="checkbox" name="estudios" VALUE="Licenciatura">Licenciatura<br>
<input type="checkbox" name="estudios" VALUE="Maestria">Maestria<br>
<input type="checkbox" name="estudios" VALUE="Doctorado">Doctorado<br>
<hr>

<br>
<font size="3" face="Verdana" color="White">DATOS PERSONALES</font><br>
Nombre<input type="text" name="nombre" size="30">
Apellido Paterno<input type="text" name="apaterno" size="30">
Apellido Materno<input type="text" name="amaterno" size="30"><br><br>
Direccion<input type="text" name="direccion" size="61">

Guía Rápida HTML
Ciudad<input type="text" name="ciudad" size="25">
Estado<input type="text" name="estado" size="25"><br>
<hr>

<br>
<font size="3" face="Verdana" color="White">USUARIO Y CONTRASEÑA</font><br>
Nombre de Usuario:<input name="usuario"><br>
Contraseña:<input type="password" name="pass">
<hr>

<font size="3" face="Verdana" color="White">EDAD</font><br>
<input type="radio" name="edad" VALUE="18">Menos de 18 años<br>
<input type="radio" name="edad" VALUE="18-25" checked>Entre 18 y 25 años<br>
<input type="radio" name="edad" VALUE="25-35">Entre 25 y 35 años<br>
<input type="radio" name="edad" VALUE="35-50">Entre 35 y 50 años<br>
<input type="radio" name="edad" VALUE="50">Mas de 50 años<br>
<hr>
<input type="submit" value="Enviar Formulario">
<input type="reset" value="Inicializar Campos">
</body>
</HTML>
DEFINICION DE CAMPOS DE SELECCIÓN <SELECT>

Esta etiqueta permite al usuario seleccionar una opción de un conjunto de elementos mostrados en una lista
desplegable. Cada una de las opciones se introduce mediante el elemento OPTION, y el atributo SELECT nos
permite visualizar una determinada opción de la lista.
Atributos que utiliza:

MULTIPLE: Este atributo permite seleccionar más de una opción utiliando la tecla CTRL junto con la opción.
NAME: Especifica el nombre de la lista de selección
SIZE: Determina el número de elementos visibles y en su caso muestra la barra de desplazamiento lateral.
<HTML>
<head>
<title>Trigésima Segunda Página Web</TITLE>
</head>
<font size="3" face="Verdana" color="White">LISTA DE CARRERAS</font><br>
<select name="Carreras" size="3">
<option select>Lic. en Administración de Aduanas
<option>Tráfico de Mercancías y Tramitacion Aduanal
<option>Licenciado en Desarrollo Portuario
<option>Licenciado en Administración de Empresas
</select>
</body>
</HTML>

Guía Rápida HTML
ÁREA DE TEXTO <TEXTAREA>
Esta etiqueta nos permite representar un campo de texto de múltiples líneas.
Utiliza los siguientes atributos:
COLS: Determina el número de caracteres de ancho de la ventana de texto.
NAME: Especifica el nombre del campo.
ROWS: Establece el número de líneas visibles del área de texto.
<HTML>
<head>
<title>Trigésima Tercera Página Web</TITLE>
</head>
<font size="3" face="Verdana" color="White">DATOS DE LA INSTITUCION</font><br>
<textarea name="datositan" rows=5 cols=64>
Instituto de Tramitación Aduanal del Norte
Sor juana Ines de la Cruz y Altamira
Tampico, Tamaulipas
Mexico
</textarea>
<br>
<br>
<font size="3" face="Verdana" color="White">COMENTARIOS DEL SOLICITANTE</font><br>
<textarea name="comentarios" rows=8 cols=64>
</textarea>
</body>
</HTML>
<HTML>
<head>
<title>Trigésima Cuarta Página Web</TITLE>
</head>
<form method="post" action="mailto:gilsantanae@seuatdigital.edu.mx?subject=Comentarios"
enctype="text/plain">
<font size="2" face="Verdana" color="White">Escribe tus datos personales</font><br>
Nombre:<input type="text" name="Nombre"><br>
Apellidos:<input type="text" name="Apellidos"><br>
E-mail:<input type="text" name="e-mail"><br><br>
<font size="2" face="Verdana" color="White">Qué opinión tienes sobre el contenido de esta
página?</font><br>
<input name="calificacion" type="radio" value="1">1 [No es muy interesante]<br>
<input name="calificacion" type="radio" value="2">2 [No esta mal]<br>
<input name="calificacion" type="radio" value="3">3 [Está bien]<br>
<input name="calificacion" type="radio" value="4">4 [Muy buen contenido]<br>
<input name="calificacion" type="radio" value="5">5 [Excelente]<br><br>
<font size="2" face="Verdana" color="White">Qué temas te han gustado mas?</font><br>
<input name=tema type="checkbox" value="Todos">Todos estan excelentes<br>
<input name=tema type="checkbox" value="Tema1">El Tema 1<br>
<input name=tema type="checkbox" value="Tema2">El Tema 2<br>
<input name=tema type="checkbox" value="Tema3">El Tema 3<br><br>
<font size="2" face="Verdana" color="White">Escribenos tus comentarios</font><br>
<textarea rows="6" cols="40" name="comentarios">
</textarea>
<br><br>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</form>
</body>
</HTML>

Guía Rápida HTML
ANEXO
Nombre HTML
Espacio
& &
Á Á
É É
Í Í
Ó Ó
Ú Ú
Ñ Ñ
á á
é é
í í
ó ó
ú ú
ñ ñ
Ü Ü
ü ü

Manual HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Guía Rápida HTML

ESTRUCTURA DE UN DOCUMENTO HTML

La cabecera contiene fundamentalmente información general sobre el documento. Dentro de esta

<TITLE>Este es el título de mi página WEB</TITLE>

Taller de Computación IV Página 1 de 19

COLORES Y FONDO DE UN DOCUMENTO

PÁRRAFOS Y SALTOS DE LÍNEA

Taller de Computación IV Página 2 de 19

Taller de Computación IV Página 3 de 19

TEXTO CON FORMATO PREESTABLECIDO

Taller de Computación IV Página 4 de 19

La estructura básica es la siguiente: <A HREF=”Lugar de enlace”>Información del enlace</A>

ENLACE A UN PUNTO DE LA MISMA PÁGINA

En el principio del documento agregamos la siguiente línea: <A NAME=’InicioDocumento’>

Una vez marcadas las zonas escribimos los enlaces:

Taller de Computación IV Página 5 de 19

<font size="5" face="Tahoma" color="Yellow">Lenguaje de máquina

<font size="5" face="Tahoma" color="Green">Lenguaje de alto nivel

Taller de Computación IV Página 6 de 19

<A HREF=”NombredelaPagina.htm”>Consultar mi página web</A>

LISTAS DESORDENADAS <UL> y </UL>

LISTAS ORDENADAS <OL> y </OL>

TYPE=A (Letras mayúsculas)

Taller de Computación IV Página 7 de 19

LISTAS DE DEFINICIÓN <DL> y </DL>

Taller de Computación IV Página 8 de 19

<IMG SRC=”Nombre de archivo” ALT=”Comentario para la imágen”>

ALINEACIÓN DE LA IMAGEN CON EL TEXTO

Left: alinea la imagen a la izquierda

Taller de Computación IV Página 9 de 19

Taller de Computación IV Página 10 de 19

Taller de Computación IV Página 11 de 19

Taller de Computación IV Página 12 de 19

Taller de Computación IV Página 13 de 19

Taller de Computación IV Página 14 de 19

Taller de Computación IV Página 15 de 19

Los atributos de la etiqueta <FORM> son:

ACTION: Determina la acción que debe realizarse al pulsar el botón de ejecución.

DEFINICION DE CAMPOS DE ENTRADA <INPUT>

Los tipos de entrada son:

Reset: Borra todos los datos capturados en el formulario.

Submit: Envía la información capturada en el formulario.

Taller de Computación IV Página 16 de 19

DEFINICION DE CAMPOS DE SELECCIÓN <SELECT>

Atributos que utiliza:

Taller de Computación IV Página 17 de 19

Taller de Computación IV Página 18 de 19

Taller de Computación IV Página 19 de 19

Você também pode gostar