Manual de HTML Básico - Delia Esquer Meléndez

Anuncio
UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA
DEPARTAMENTO DE INFORMACIÓN ACADÉMICA
CURSO BÁSICO
DE HTML
Delia Esquer Meléndez
desquer@uabc.mx
HTML Básico
INDICE
INTRODUCCION
3
COMO CREAR UN DOCUMENTO HTML
4
ETIQUETAS PARA TEXTO Y GRAFICAS
4
CARACTERES ESPECIALES
6
ECABEZADOS (Headings)
6
LINEAS HORIZONTALES (Horizontal Rules)
6
LISTAS DE ELEMENTOS
7
LIGAS
10
IMAGENES
12
TABLAS
13
COMENTARIOS
17
SEPARADOR DE PARRAFOS
17
SALTOS DE LINEA
17
EJERCICIOS
Ejercicio # 1
Ejercicio # 2
Ejercicio # 3
Ejercicio # 4
Ejercicio # 5
18
18
19
19
20
GLOSARIO
21
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
2
HTML Básico
INTRODUCCION
HTML (por sus siglas en inglés: HyperText Markup language) es un lenguaje de programación que
se utiliza para crear páginas de Internet (WWW). Por "página" entenderemos que es un archivo
de texto que contiene el código HTML que indica a un navegador (browser), como Netscape
Navigator o Internet Explorer, como desplegar textos, imágenes, colores, tipos de letra, color de
fondo, así como los enlaces de hipertexto hacia otros sitios u otras páginas.
Es un lenguaje basado en "etiquetas", que son instrucciones o comandos que nos permiten
agregar atributos a los elementos de HTML, tales como remarcado, itálico, subrayado, color, crear
hypertexto, etc.. Estas etiquetas o comandos utilizan los caracteres
<
y
>
para que sean
identificados como acciones de HTML. La mayoría de las etiquetas o comandos tienen una
etiqueta inicial y una etiqueta final. Ejemplo: Texto<B>remarcado</B>, en este caso sólo la palabra
remarcado se desplegaría con el atributo de remarcado (bold) a la hora de utilizar un navegador
(browser). Estas "etiquetas" son interpretadas por el navegador que utilizamos y dependiendo de
sus capacidades serán los resultados obtenidos. No todos los navegadores soportan "todas" las
etiquetas, en caso de que el navegador que se utilize no pueda interpretar una de las etiquetas
simplemente la ignora y no se despliega el efecto deseado por el diseñador de la página.
Un documento en HTML puede ser creado en cualquier editor o procesador de texto, siempre y
cuando sea salvado/grabado en formato ASCII. Hoy en día existen herramientas especializadas
para la creación de estos documentos, las cuales por medio de sus menús de comandos permiten
al usuario mayor facilidad y rapidez de edición. Entre los más conocidos se encuentra ANT-HTML,
GT-HTML, Internet Assistant y Quaterdeck WebAuthor, los cuales funcionan a través de WORD
para Windows, también los editores de web (web editors) HOT DOG, WEB Wizard, HTML Writer,
Homesite, Metal, Dreamweaver, etc.
El objetivo primordial de HTML es crear una forma universal de construir, almacenar y desplegar la
información. Una de las características más importantes de HTML estandard, es que cualquier
usuario, con cualquier equipo, con cualquier software puede leer los documentos creados. Algunas
compañías han creado sus propias extensiones, como por ejemplo el navegador NETSCAPE ha
implementado sus extensiones a HTML 2, las cuales permiten al usuario crear sus documentos con
efectos gráficos. Esto ha invitado a muchos usuarios a utilizar este formato, tanto para crear como
para visualizar los documentos. La desventaja de esto sería que si un usuario no cuenta con el
software de Netscape, no será capaz de visualizar totalmente el documento.
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
3
HTML Básico
COMO CREAR UN DOCUMENTO HTML
Las etiquetas básicas de un documento HTML son:
<HTML>
<HEAD>
<TITLE> Introducción a HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML> Esta etiqueta identifica al archivo como un documento HTML.. Se inserta la etiqueta inicial
<HTML> al iniciar el documento y la etiqueta final </HTML> al terminar el documento HTML. Es
una etiqueta indispensable aunque es invisible al visualizar un documento.
<HEAD> Esta etiqueta contiene información importante acerca del documento. El único elemento
requerido de <HEAD> es <TITLE>.
<TITLE> Esta etiqueta debe estar dentro de <HEAD>. No debe contener "ligas" (anchors). No hay
Iímite para la longitud de un título, pero sin embargo títulos demasiado largos pueden ser truncados
por algunas aplicaciones, se recomienda que sean de 1 a 64 caracteres. Debe identificar
globalmente el título del documento, ya que es el que aparecerá en las listas de lugares visitados
(history lists) y en la parte superior de la pantalla al desplegar el documento. Solo se permite una
línea de título por documento.
<BODY> Dentro de esta etiqueta deben estar todos los elementos de texto e imágenes que
conforman el "cuerpo" (body) del documento. Dentro de esta etiqueta se puede controlar el fondo
(background) del documento y globalmente el color, tamaño y tipo de letra, así como también el
color de las ligas del documento. Es una etiqueta indispensable aunque es invisible al visualizar un
documento.
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
4
HTML Básico
ETIQUETAS PARA TEXTO Y GRAFICAS
Como ya se había mencionado anteriormente, HTML está basado en el concepto de "etiquetas", a
continuación se listan las etiquetas mas utilizadas:
Las etiquetas (tags) se utilizan para agregar atributos al texto o gráficas.
Ejemplo:
<B>ESTE TEXTO ES REMARCADO</B> Y ESTE NO
Resultado:
ESTE TEXTO ES REMARCADO Y ESTE NO
Lo cual significa que la etiqueta <B> se utiliza para remarcar un texto, y solo el texto dentro de las
etiquetas <B> y </B> aparecerá con el atributo de BOLD.
ETIQUETA
EFECTO
ETIQUETAL/RESULTADO
<ADDRESS>
Dirección
<ADDRESS>Esta es una dirección</ADDRESS> Esta
es una dirección
<B>
Texto remarcado
<B>Este es un texto remarcado</B>
Este es un texto remarcado
<BASEFONT SIZE=n>
Define el tamaño del texto
<BASEFONT SIZE=3>El tamaño inicial del texto es
3</FONT>
Nota: BASEFONT SIZE se utiliza para incrementar o
disminuir el tamaño inicial del texto que por ornisión le
da HTML, por lo tanto el valor puede ser positivo o
negativo.
<BLINK>Este es un texto que parpadea</BLINK>
<BLINK>
Texto parpadeante
<CENTER>
Texto centrado
<CENTER>Este es un texto centrado</CENTER>
Este es un texto centrado
<EM>
Texto Itálico
<EM>Este es un texto itálico</EM>
Este es un texto itálico
<FONT SIZE=n>
Define el tamaño del texto
<FONT SIZE=3>El tamnaño del texto es 3</FONT>
Encabezados
Nota: FONT SIZE también se utiliza para incrementar
o disminuir el tamaño del texto, por lo tanto el valor
puede ser positivo o negativo en relación al valor por
omisión.
<Hl>Nivel 1 de Encabezados</Hl>
<H1>...<H6>
Nota: H 1 ... H6 se utiliza para agregar encabezados o
titulos. El tamaño del texto disminuye en cada nivel,
siendo el mas grande H1.
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
5
HTML Básico
CARACTERES ESPECIALES (SPECIAL CHARACTERS)
Para insertar caracteres especiales (acentos y símbolos), se utilizan las siguientes etiquetas:
ETIQUETA
&acute
EJEMPLO
ÁRBOL
á rbol
ÉSTE
éste
Índice
índice
ÓSEO
óseo
úLTIMO
último
RESULTADO
ÁRBOL
árbol
ÉSTE
éste
ÍNDICE
índice
ÓSEO
óseo
ÚLTIMO
último
&tilde
NIÑO
niño
GÜERO
güero
&reg
&copy
NIÑO
niño
GÜERO
güero


&uml
&reg
&copy
ENCABEZADOS (HEADINGS)
Existen 6 niveles de encabezados (headings) iniciando con <H1>, que es el texto más grande y
terminando con <H6>. Todos los encabezados son textos remarcados (bold). Al igual que todas
las etiquetas se abre <H1> al iniciar el encabezado y se cierra </H1> al finalizar. Por omisión los
textos son alineados a la izquierda, existe la opción de centrarlos utilizando ALIGN=CENTER
dentro de la etiqueta. (ej, <H1 ALIGN=CENTER>)
<Hl>
Primer nivel de encabezado.
<H2>
Segundo nivel de encabezado.
<H3>
Tercer nivel de encabezado.
<H4>
Cuarto nivel de encabezado.
<H5>
Quinto nivel de encabezado.
<H6>
Sexto nivel de encabezado.
LINEAS (HORIZONTAL RULES)
A un documento HTML se le pueden agregar líneas (horizontal rules) para dividir secciones de
texto o prrafos. Se utiliza la etiqueta <HR> con los siguientes atributos:
<HR>
Agrega una línea
<HR SIZE=n>
Define el grosor de la línea
<HR WIDTH=n I % >
Define el largo de la línea en relación al tamaño de la pantalla
<HRALIGN=LEFTIRIGHTICENTER>
Posiciona la línea de acuerdo a su especificación
<HR NOSHADE>
Elimina el sombreado de una línea
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
6
HTML Básico
LISTAS
Existen diferentes tipos de listas de elementos y deben incluirse en el <BODY> del documento.
NOTA Todas las listas pueden ser anidadas.
<DL> ... <IDL> Lista de Definición (Definition List)
Es una lista de términos y su correspondiente descripción. Los elementos que se utilizan en estas
listas son <DT> (Definition Term) y <DD> <Definition Data>.
Ejemplo:
LISTA
RESULTADO
<DL>
<DT>ECA<DD>Escuela de Contablidad y Administración
<DT>FCS<DD>Facultad de Ciencias
<DT>FCM<DD>Facultad de Ciencias Marinas
</DL>
ECA
Escuela de Contabilidad y Administración
FCS
Facultad de Ciencias
FCM
Facultad de Ciencias Marinas
<OL>...</OL> Lista Ordenada (Ordered List)
Es una lista de elementos ordenados, como por ejemplo una secuencia de hechos, instrucciones,
etc. Por omisión la numeración inicia del 1. Cada elemento es listado con <Ll> (List Item). Ejemplo:
LISTA
<OL>
<LI>Oprimir el botón izquierdo del mouse
<LI>Insertar un objeto con INSERT/OBJETC
<LI>Seleccionar un objeto
</OL>
<OL>
<LI>Oprimir el botón izquierdo del mouse
<LI>Insertar un objeto
<OL>
<LI>INSERT/0BJECT
</OL>
<LI>Seleccionar un objeto
<OL>
<L1>Oprimir el botón de Seleccionar
<L1>0primir el botón de Aceptar
</OL>
</OL>
RESULTADO
1. Oprimir el botón izquierdo del mouse
2. Insertar un objeto con INSERT/OBJETC
3. Seleccionar un objeto
1. Oprimir el botón izquierdo del mouse
2. Insertar un objeto
1. INSERT/OBJETC
3. Seleccionar un objeto
1. Oprimir el botón de Seleccionar
2. Oprimir el botón de Aceptar
Nota 1: Se puede modificar el tipo de numeración de los elementos utilizando las siguientes extensiones:
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
7
HTML Básico
TYPE=1
TYPE=I
TYPE=i
TYPE=A
TYPE=a
1,2,3,4,5 ...
I, II,III, IV, IV ...
i, ii , iii, iv, v...
A,B,C,D,E ...
a,b,c,d,e...
LISTA
RESULTADO
<OL TYPE=A>
<LI>Oprimir el botón izquierdo del mouse
<L1>Insertar un objeto con INSERT/OBJETC
<LI>Seleccionar un objeto
</OL>
A. Oprimir el botón izquierdo del mouse
B. Insertar un objeto con INSERT/OBJETC
C. Seleccionar un objeto
<OL TYPE=i>
<LI>Oprimir el botón izquierdo del mouse
<Ll>lnsertar un objeto con INSERT/OBJETC
<LI>Seleccionar un objeto
</OL>
i. Oprimir el botón izquierdo del mouse
ii. Insertar un objeto con INSERT/OBJETC
iii. Seleccionar un objeto
<OL>
<LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar
un objeto
<OL TYPE=a>
<Ll> INSERT/OBJETC
</OL>
<LI>Seleccionar un objeto
<OL TYPE=a>
<LI>Oprimir el botón de Seleccionar
<LI>Oprimir el botón de Aceptar
</OL>
</OL>
1.
2.
Oprimir el bot6n izquierdo del mouse
Insertar un objeto
a. INSERT/OBJETC
3. Seleccionar un objeto
a.- Oprimir el bot6n de Seleccionar
b.- Oprimir el bot6n de Aceptar
Nota 2: Se puede alterar el orden de la numeración de los elementos utilizando la extensión START
LISTAS
<OL START=5>
<LI>Oprimir el botón izquierdo del mouse
<L1>Insertar un objeto con INSERT/OBJETC
<L1>Seieccionar un objeto
</OL>
<OL TYPE=A START=3>
<LI>Oprimir el botón izquierdo del mouse
<Ll>lnsertar un objeto con INSERTIOBJETC
<L1>Seleccionar un objeto
</OL>
RESULTADO
5. Oprimir el bot6n izquierdo del mouse
6. Insertar un objeto con INSERT/OBJETC
7. Seleccionar un objeto
C. Oprimir el botón izquierdo del mouse
D. Insertar un objeto con INSERT/ OBJETC
E. Seleccionar un objeto
<UL> ... </UL> Lista No Ordenada (Unordered List)
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
8
HTML Básico
Es una lista sin orden, esto quiere decir que no numera los elementos. Por omisión aparece un
circulo (circle bullet) antes del elemento. Cada elemento es listado con <Ll> (List Item).
Ejemplo:
LISTA
<UL>
<LI>Oprimir el botón izquierdo del mouse
<Ll>lnsertar un objeto con INSERT/OBJETC
<L1>Seleccionar un objeto
</UL>
<UL>
<LI>Oprimir el botón izquierdo del mouse
<Ll>lnsertar un objeto
<UL>
<LI>INSERT/OBJECT
</UL>
<LI>Seleccionar un objeto
</UL>
RESULTADO



Oprimir el botón izquierdo del mouse
Insertar un objeto con INSERT/OBJETC
Seleccionar un objeto


Oprimir el botón izquierdo del mouse
Insertar un objeto
 INSERT/OBJETC
Seleccionar un objeto

Nota 3: Se puede hacer una combinación de listas:
LISTA
<UL>
<LI>Oprimir el botón izquierdo del mouse
<Ll>lnsertar un objeto
<OL>
<Ll> INSERT/OBJETC
</OL>
<LI>Seleccionar un objeto
<OL TYPE=a>
<LI>Oprimir el botón de Seleccionar
<LI>Oprimir el botón de Aceptar
</OL>
</UL>
<OL>
<LI>Oprimir el botón izquierdo del mouse
<Ll>lnsertar un objeto con INSERT/OBJETC
<UL>
<LI>INSERT/OBJECT
</UL>
<LI>Seleccionar un objeto
<UL TYPE=SQUARE>
<LI>Oprimir el botón de Seleccionar
<LI>Oprimir el botón de Aceptar
</UL>
</OL>
Delia Esquer M.
RESULTADO


Oprimir el botón izquierdo del mouse
Insertar un objeto
1. INSERT/OBJECT
 Seleccionar un objeto
a. Oprimir el botón de Seleccionar
b. Oprimir el botón de Aceptar
1. Oprimir el botón izquierdo del mouse
2. Insertar un objeto
 INSERT/OBJETC
3. Seleccionar un objeto
 Oprimir el botón de Seleccionar
 Oprimir el botón de Aceptar
- Programa Estratégico de Apoyo Académico / CECUUE -
9
HTML Básico
LIGAS (ANCHORS)
Las "ligas" (anchors) son textos o imágenes que se utilizan como destino hacia otro archivo o sitios,
enviar un correo, grabar un archivo, generar un sonido, etc. con solo oprimir (click) un botón del
ratón. La etiqueta que se utiliza para las "ligas" es <A>, con la referencia HREF. Esta etiqueta se le
puede agregar a un texto o a una imagen. Los resultados por "omisión" de esta etiqueta a la hora
de ser interpretada por un navegador son los siguientes: texto, éste aparecerá subrayado en color
azul ; y en el caso de una imagen, ésta aparecerá dentro de un marco azul.
Tipos de ligas:
Externas: Cuando el texto o imagen "apunta" a otro sitio o servidor de www.
Ejemplos:
<A HREF="http://www.ens.uabc.mx">CECUUE </A>
Conexión al servidor del CECUUE
<A HREF="http://www.cicese.mx">CICESE</A>
Conexión al servidor del CICESE
<A HREF=" http://www.uabc.mx/dgaa/dgaa.htm">DGAA- UABC</A>
Conexión al servidor de
rectoría de la UABC,
página de la DGAA.
Internas (a otro documento): Cuando el texto o imagen "apunta" a otro archivo dentro del mismo
servidor de www..
Ejemplos:
<A HREF="ejemplos.htm">Ejemplos de una tabla</A>
Conexión al archivo ejemplos.htm que se
encuentra en el mismo servidor de www.
<A HREF="primer.htm>Primer documento HTML</A>
Conexión al archivo primer.htm que se
encuentra en el mismo servidor de www.
Internas (dentro del mismo documento): Cuando el texto o imagen "apunta" a un lugar
específico dentro del mismo documento. Se debe definir una "etiqueta destino" que es a donde se
conectará la liga interna utizando la etiqueta NAME.
Ejemplo:
<A HREF="#unidad1">Unidad 1</A>
Conexión a la etiqueta unidad1 del archivo
actual.
Nota: En el archivo matematicas.htm debe estar previamente definida la etiqueta destino:
<A NAME="unidad1">UNIDAD 1</A>
Internas ( a un lugar específico de otro documento): Cuando el texto o imagen "apunta" a un
lugar específico de otro documento. Se debe definir una "etiqueta destino" que es a donde se
conectará la liga interna utizando la etiqueta NAME.
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
10
HTML Básico
Ejemplo:
<A HREF="matematicas.htm#unidad1">Unidad 1</A>
Conexión a la etiqueta unidad1 del archivo
matematicas.htm
Nota: En el archivo matematicas.htm debe estar previamente definida la etiqueta destino:
<A NAME="unidad1">UNIDAD 1</A>
Correo (mailto) : La etiqueta mailto: se utiliza para enviar/recibir correo electrónico (e-mail) de
algún usuario. Se debe definir una liga para enviar/recibir correo:
Ejemplo:
<A HREF="mailto:delia@faro.ens.uabc.mx">Comentarios y Sugerencias</A>
Nota: El texto Comentarios y Sugerencias aparecerá subrayado ya que es una liga, pero en lugar de irse a un
archivo o a otro sitio de Internet abrirá la ventan del Correo (Messanger) del Navegador Netscape para que el
usuario que esté consultando la página en ese momento, nos pueda enviar un mensaje.
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
11
HTML Básico
IMAGENES
La etiqueta <lMG SRC> se utiliza para agregar imágenes a un documento HTML. Los formatos de
grágica permitidos so: .GIF y .JPG.
<lMG SRR="grafica1.gif “>
Despliega el archivo gráfico “grafica1.gif”
<IMG SRR="grafica1.gif"ALlGN=TOP>
Despliega el archivo gráfico "grafica1.gif” y
coloca la siguiente, línea de texto en la parte
superior de la imagen
<IMG SRC=-"grafica1.gif” ALIGN=MIDDLE>
Despliega el archivo gráfico “grafica1.gif”“y
coloca la siguiente línea de texto en la parte
media de la imagen.
<IMG SRC=“grafica1.gif” ALIGN=BOTTOM>
Despliega el archivo gráfico “grafica1.gif” y
coloca la siguiente línea de texto en la parte
inferior de la imagen.
<IMG SRC-=“logo4.gif” WlDTH=30 HEIGHT=30>
Despliega el archivo gráfico “logo4.gif” de 30
pixeles de ancho y 30 pixeles de alto.
<A HREF="uabc-home.html“><IMG SRC=Iogoc.gif'></A>
La imagen "logoc.gif' es una liga al archivo
“uabc_home.html”
Nota Aparece un marco alrededor de la
imagen
<A HREF="uabc-home. htm]"><IMG SRC="logoc.gif”
BORDER=O></A>
La imagen "logoc.gif” es una liga al archivo
uabc_home.html".
Nota: BORDER=0 le quita el marco a la
imagen
<A HREF="http://www.uabc.mx">
<IMG SRC="logo4.gif"BORDER=O </A>
La imagen "logo4.gif” es una liga a la
dirección (URL) hftp://www.uabc.mx
(rectoria UABC).
Nota La imagen no tiene marco alrededor
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
.
12
HTML Básico
TABLAS
La etiqueta <TABLE>....</TABLE> se utiliza para generar "tablas" en un documento HTML. Las
tablas se utilizan para dar un formato adecuado a la información que se requiere desplegar en
columnas y/o renglones. También se pueden incluir imágenes dentro de las columnas/renglones.
Para generar una tabla se utilizan los siguientes elementos:
ELEMENTO
<TABLE>
FUNCION
Especifica el inicio de una tabla
OBSERVACIONES
Al inicio de la tabla
</TABLE>
Especifica el final de una tabla
Al final de la tabla
<CAPTION>…</CAPTION>
Especifica el titulo de la tabla
Es Opcional
<TR>...</TR>
Indica una línea
<TH> ... </TH>
Especifica el titulo de una línea
<TD> .... </TD>
Indica una celda
Debe estar dentro de <TR>
BORDER=valor
Agrega un borde a la tabla
El valor" es el tamaño de
borde y debe ir dentro de
<TABLE BORDER=xx>
ALIGN=LEFT|RIGHT|CENTER|
TOP|BOTTOM
Alinea el texto/imagen
Se utilizan los tres primeros
para <TR>, <TH>, <TD> y
los dos últimos para
<CAPTION>
COLSPAN=valor
Especifica cuantas columnas
ocupará una celda
Debe ir en <TH> o en <TD>.
El "valor" es el número de
columnas
ROWSPAN=valor
Especifica cuantas Iíneas
ocupará una celda
Debe ir en <TH> o en <TD>.
El "valor" es el número de
líneas
CELLSPACING=valor
CELLPADDING=valor
Espaciamiento entre cada celda
Espaciamiento entre el borde de
la celda y su contenido
Ejemplo:
<TABLE>
<CAPTION>ESTA ES UNA TABLA</CAPTION>
<TR>
<TD>CELDA 1 </TD>
<TD>CELDA 2</TD>
</TR>
<TR>
<TD>CELDA 3</TD>
<TD>CELDA 4</TD>
</TR>
</TABLE>
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
13
HTML Básico
RESULTADO:
ESTA ES UNA
TABLA
CELDA1 CELDA 2
CELDA3 CELDA 4
Ejemplo 2:
<TABLE BORDER=1>
<CAPTION>ESTA ES UNA TABLA</CAPTION>
<TR>
<TH>La primera Línea</TH>
<TD>CELDA 1 </TD>
<TD>CELDA 2</TD>
</TR>
<TR>
<TH>La segunda Línea</TH>
<TD>CELDA 3</TD>
<TD>CELDA 4</TD>
</TR>
</TABLE>
RESULTADO:
ESTA ES UNA TABLA
La primera Linea
CELDA 1 CELDA 2
La segunda Linea CELDA 3 CELDA 4
Ejemplo 3:
<CENTER>
<TABLE BORDER=2>
<CAPTION>CIUDADES POR ESTADO</CAPTION>
<TR>
<TH COLSPAN=2>B.C.</TH>
<TD>Ensenada</TD>
<TD>Tijuana</TD>
<TD>Mexicali</TD>
</TR>
<TR>
<TH COLSPAN=2>SONORA</TH>
<TD>Hermosillo</TD>
<TD>Cd. Obregon</TD>
</TR>
</TABLE>
</CENTER>
RESULTADO:
B.C.
SONORA
Delia Esquer M.
CIUDADES POR ESTADO
Ensenada Tijuana
Hermosillo Cd. Obregon
Mexicali
- Programa Estratégico de Apoyo Académico / CECUUE -
14
HTML Básico
Ejemplo 4:
<TABLE CELLSPACING=5 BORDER=2>
<CAPTION> UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA</CAPTION>
<TR><TH ROWSPAN=7> ENSENADA</TH></TR>
<TR><TD>Escuela de Contabilidad y Administración </TD></TR>
<TR><TD>Escuela de Ingeniería </TD></TR>
<TR><TD>Facultad de Ciencias</TD></TR>
<TR><TD>Facultad de Ciencias Marinas</TD><[TR>
<TR><TD>Instituto de Investigaciones Oceanológicas</TD><ITR>
<TR><TD>Instituto de Investigación y Desarrollo Educativo<fTD></TR>
<TR><TH ROWSPAN=8>TIJUANA</TH></TR>
<TR><TD>Escuela de Humanidades</TD><TR>
<TR><TD>Escuela de Turismo</TD></TR>
<TR><TD>Facultad de Contaduría y Administración</TD></TR>
<TR><TD>Facultad de Ciencias Químicas</TD></TR>
<TR><TD>Facultad de Derecho</TD></TR>
<TR><TD>Facultad de Economía</TD></TR>
<TR><TD>Facultad de Medicina</TD></TR>
<TR><TD>Instituto de Investigaciones Históricas</TD></TR>
</TABLE>
RESULTADO:
ENSENADA
TIJUANA
Escuela de Contabilidad y Administración
Escuela de Ingeniería
Facultad de Ciencias
Facultad de Ciencias Marinas
Instituto de Investigaciones Oceanológicas
Instituto de Investigación y Desarrollo Educativo
Escuela de Humanidades
Escuela de Turismo
Facultad de Contaduría y Administración
Facultad de Ciencias Químicas
Facultad de Derecho
Facultad de Economía
Facultad de Medicina
Instituto de Investigaciones Históricas
Ejemplo 5:
<TABLE CELLSPACING=5 BORDER=10>
<CAPTION>COMPUSERVE</CAPTION>
<TR>
<TD>COMPUTADORAS</TD>
<TD ROWSPAN=4 ALIGN=LEFT><IMG SCR="man2.gif”></TD>\
</TR>
<TR>
<TD>ACCESORIOS </TD>
</TR>
<TR>
<TD>SERVICIOS</TD></TR>
<TR><TD>ASESORIAS</TD></TR>
</TABLE>
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
15
HTML Básico
RESULTADO:
COMPUSERVE
COMPUTADORAS
ACCESORIOS
SERVICIOS
ASESORIAS
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
16
HTML Básico
COMENTARIOS
Para agregar comentarios a un documento HTML se utilizan las etiquetas <!--comentario--> en
cada línea.
Ejemplo:
<'--Este es un comentario de mi home-page -->
SEPARADOR DE PARRAFOS (Paragraph Separator)
Para separar párrafos se utiliza la etiqueta <P>.
Ejemplo:
<H1>SEPARADOR DE PARRAFOS</H1>
Esta es el primer párrafo
<P>
y este es el segundo
SALTOS DE LINEA (Break)
La etiqueta <BR> genera un salto de linea sin dejar ningOn espacio en blanco.
Ejemplo:
<H1>SALTO DE LINEA</Hl>
Esta es la primera línea<BR>
y esta es la segunda
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
17
HTML Básico
EJERCICIOS
Los siguientes ejercicios se elaborarán en el editor Notepad y se deberán seguir los siguientes
pasos:
1.
2.
3.
4.
5.
6.
Abrir el Notepad (Start/ Programs / Accessories / Notepad).
Insertar los elementos básicos de un documento HTML (HTML, HEAD, TITLE, BODY).
Insertar el código que se indica en cada ejercicio.
Grabar el archivo con la extensión .htm (ej. ejercicio1.htm)
Abrir la aplicación del navegador Netscape.
Abrir el archivo que se desea desplegar (File / Open file)
EJERCICI0 # 1 - ELEMENTOS BASICOS Y ATRIBUTOS DEL TEXTO
Crear un documento HTML incluyendo los elementos básicos y los atributos de texto:
<HTML>
<HEAD>
<TITLE >Atributos de Texto</TITLE>
</HEAD>
<BODY>
<H1 >ATRI BUTOS DE TEXTO</H1 >
<ADDRESS>Esta es mi dirección de correo electrónico:
delia@faro.ens.uabc.mx</ADDRESS> <B>Este es un texto remarcado</B>
<BLINK> Este es un texto parpadeante</BLINK>
<CENTER>Este es un texto centrado</CENTER>
<EM>Este es un texto itálico</EM>
Este texto es de tamaño normal, <FONT SIZE=5>pero este es de 5</FONT> <FONT
SIZE=-l> y este de -1 <IFONT>
</BODY>
</HTML>
EJERCICI0 # 2 - CARACTERES ESPECIALES Y SALTO DE LINEA
Crear un documento HTML en el editor Notepad que contenga palabras con caracteres especiales:
<HTML>
<HEAD>
<TITLE>Caracteres Especiales</TITLE>
</HEAD>
<BODY>
<H1>CARACTERES ESPECIALES</H1>
ÁRBOL <BR> árbol <BR>
ÉSTE <BR> éste <BR>
Índice <BR> índice <BR>
ÓSEO <BR> óseo <BR>
ÚLTIMO <BR> último NI <BR>
ÑO niño <BR> GÜERO <BR>
güero <BR>
&reg
&copy
</BODY>
</HTML>
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
18
HTML Básico
EJERCICI0 # 3 - ENCABEZADOS (HEADINGS) Y LINEAS HORIZONTALES
Crear un documento HTML incluyendo los elementos básicos, y los seis niveles de encabezados:
<HTML>
<HEAD>
<TITLE>Niveles de Encabezados</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Nivel 1</Hl>
<HR>
<H2>Nivel 2</H2>
<HR>
<H3>Nivel 3</H3>
<HR>
<H4>Nivel 4</H4>
<HR>
<H5>Nivel 5</H5>
<HR>
<H6>Nivel 6</H6>
</BODY>
</HTML>
EJERCICIO # 4 - LIGAS
Crear un documento HTML que contenga una "lista" de "ligas" a los archivos que se generaron en
la prácticas anteriores
<HTML>
<HEAD>
<TITLE>Archivo con ligas</TITLE>
</HEAD>
<BODY>
<OL>
<LI>Este es un ejemplo de una liga al<A HREF="atributo.htm">archivo de atributos de
texto</A>
<LI>Este es un ejemplo de una liga al <A HREF="titulos.htm">archivo de títulos</A>
<LI>Este es un ejemplo de una liga a la dirección de la página principal del <A HREF=
"http://www.uabc.mx"> Centro de Computo </A>
</BODY>
</HTML>
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
19
HTML Básico
EJERCICIO # 5 - LISTAS DE ELEMENTOS Y LIGAS
Crear un documento HTML que contenga un encabezado (heading), una línea (horizontal rule), una
"lista" de "ligas" a diferentes archivos y sitios, así como una liga tipo correo.
<HTML>
<HEAD>
<TITLE>Diferentes tipos de ligas </TITLE>
</HEAD>
<BODY>
<H1>COMO PUEDO RECIBIR UN CORREO DE UN USUARIO</H1>
<HR>
<OL>
<LI>Este es un ejemplo de una liga al <A HREF="atributo.htm">archivo de atributos de
texto</A>
<LI>Este es un ejemplo de una liga al <A HREF="titulos.htm">archivo de títulos</A>
<LI>Este es un ejemplo de una liga a la dirección de la página principal del
<A HREF= "http://www.uabc.mx"> Centro de Computo </A>
</OL>
<HR>
Si tiene algún comentario o sugerencia acerca de esta página por favor envíalo a
<A HREF="mailto:cecuue@faro.ens.uabc.mx">Centro de Cómputo</A>
</BODY>
</HTML>
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
20
HTML Básico
GLOSARIO
FTP
File Transfer Protocol
Protocolo utilizado para transferir archivos
por medio de internet de una computadora a
otra.
HTML
HyperText Markup Language
Lenguage que se utiliza para dar formato y
diseflo a los documentos que se publican en
el World Wide Web (WWW, W3, Web).
HTML es parte de SGML y fue inventado por
Tim Berners-Lee del CERN.
HTTP
HyperText Transport Protocol
Protocolo diseñado para accesar
rápidamente información por uno o más
usuarios.
GIF
Graphics Interchange Format
Formato de compresión de archivos gráficos.
JPEG
Joint Photographic Experts Group
Formato de compresión (compression
format) diseñado tanto para imágenes
digitales de color o tonos de gris.
URL
Uniform Resource Locator
Es un apuntador (dirección) a un recurso que
se encuentra disponible en Internet.
La primera parte del URL antes de :, indica el
método de acceso y la parte después de :, es
interpretada por el método
de acceso.
Ejemplos:
http:// - Accesar una página del Web telnet://
- Hacer un Telnet
ftp:// - Transferir información
mailto: - Enviar un e-mail
WWW
World Wide Web
Término dado a una arquitectura de acceso
de internet. Por medio de un Web Browser
(localizador) se pueden accesar documentos
con texto, gráficas y/o ligas (links) a otros
recursos de internet.
Las tres abreviaciones para el World Wide
Web son las siguientes: WWW, W3 y Web
SGML
Standard Generalized Markup
Language
Lenguaje estándard para describir
lenguages markup" (basados es etiquetas)
HYPERTEXT
Es el texto que apunta (pointer) a otro texto.
HYPERMEDIA
Es una versión avanzada de hypertext ya
que es el que permite desplegar imágenes,
sonido o animación
WYSIWYG
Delia Esquer M.
What You See Is What You Get
Ambiente gráfico de desarollo de páginas
electrónicas.
- Programa Estratégico de Apoyo Académico / CECUUE -
21
HTML Básico
Tutoriales de HTML:
http://www.ens.uabc.mx/tutoriales/html
http://www.geocities.com/Athens/Acropolis/3337/begin.htm (Introducción)
http://www.darwinz.com/freestf.htm (Tutorial)
http://roble.pntic.mec.es/~jferna28/html/indice.html (Tutorial)
http://www.w3.org/MarkUp (HTML Básico, Avanzado y Estilo)
http://junior.apk.net/~jbarta (HTML Básico)
http://euler.ciens.ucv.ve/~webadmin/manual.html
http://euler.ciens.ucv.ve/~webadmin/#tutor1 (Tutoriales de HTML Básico)
http://euler.ciens.ucv.ve/~webadmin/#tutor2 (Tutoriales de HTML Avanzado)
http://www.seovec.org/advhtml/makapage/list
http://come.to/cursohtml
http://www.geocities.com/SiliconValley/8195/manualhtm.html
http://www.uap.edu.pe/samples/demo/demo.htm
http://members.tripod.com/~webfacil/
http://mx.yahoo.com/Internet_y_computadoras/Informacion_y_documentacion/Formatos/HTML
Delia Esquer M.
- Programa Estratégico de Apoyo Académico / CECUUE -
22
Descargar