UNIVERSIDAD AUTÓNOMA DE BAJA CALIFORNIA DEPARTAMENTO DE INFORMACIÓN ACADÉMICA CURSO BÁSICO DE HTML Delia Esquer Meléndez desquer@uabc.mx
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
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
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
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: Resultado: <B>ESTE TEXTO ES REMARCADO</B> Y ESTE NO 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> Texto parpadeante <BLINK>Este es un texto que parpadea</blink> <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> 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. <H1>...<H6> Encabezados <Hl>Nivel 1 de Encabezados</Hl> 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
CARACTERES ESPECIALES (SPECIAL CHARACTERS) Para insertar caracteres especiales (acentos y símbolos), se utilizan las siguientes etiquetas: ETIQUETA EJEMPLO RESULTADO ´ ÁRBOL á rbol ÉSTE éste Índice índice ÓSEO óseo último último ÁRBOL árbol ÉSTE éste ÍNDICE índice ÓSEO óseo ÚLTIMO último &tilde NIÑO niño NIÑO niño ¨ GÜERO güero GÜERO güero ® ® © © 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> <H2> <H3> <H4> <H5> <H6> Primer nivel de encabezado. Segundo nivel de encabezado. Tercer nivel de encabezado. Cuarto nivel de encabezado. Quinto nivel de encabezado. 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> <HR SIZE=n> <HR WIDTH=n I % > <HRALIGN=LEFTIRIGHTICENTER> <HR NOSHADE> Agrega una línea Define el grosor de la línea Define el largo de la línea en relación al tamaño de la pantalla Posiciona la línea de acuerdo a su especificación Elimina el sombreado de una línea Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 6
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 <DL> <DT>ECA<DD>Escuela de Contablidad y Administración <DT>FCS<DD>Facultad de Ciencias <DT>FCM<DD>Facultad de Ciencias Marinas </DL> RESULTADO ECA Escuela de Contabilidad y Administración FCS Facultad de Ciencias FCM Facultad de Ciencias Marinas <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> <LI>Oprimir el botón izquierdo del mouse <LI>Insertar un objeto <OL> <LI>INSERT/0BJECT <LI>Seleccionar un objeto <OL> <L1>Oprimir el botón de Seleccionar <L1>0primir el botón de Aceptar 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
TYPE=1 1,2,3,4,5... TYPE=I I, II,III, IV, IV... TYPE=i i, ii, iii, iv, v... TYPE=A A,B,C,D,E... TYPE=a a,b,c,d,e... LISTA <OL TYPE=A> <LI>Oprimir el botón izquierdo del mouse <L1>Insertar un objeto con INSERT/OBJETC <LI>Seleccionar un objeto RESULTADO 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 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 <LI>Seleccionar un objeto <OL TYPE=a> <LI>Oprimir el botón de Seleccionar <LI>Oprimir el botón de Aceptar 1. Oprimir el bot6n izquierdo del mouse 2. 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 RESULTADO 5. Oprimir el bot6n izquierdo del mouse 6. Insertar un objeto con INSERT/OBJETC 7. Seleccionar un objeto <OL TYPE=A START=3> <LI>Oprimir el botón izquierdo del mouse <Ll>lnsertar un objeto con INSERTIOBJETC <L1>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
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 <LI>Seleccionar un objeto <OL TYPE=a> <LI>Oprimir el botón de Seleccionar <LI>Oprimir el botón de Aceptar </UL> 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 <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> 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 Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 9
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> <A HREF="http://www.cicese.mx">CICESE</A> Conexión al servidor del CECUUE 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
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
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> <IMG SRC=-"grafica1.gif ALIGN=MIDDLE> <IMG SRC= grafica1.gif ALIGN=BOTTOM> Despliega el archivo gráfico "grafica1.gif y coloca la siguiente, línea de texto en la parte superior de la imagen Despliega el archivo gráfico grafica1.gif y coloca la siguiente línea de texto en la parte media de la imagen. 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> <A HREF="http://www.uabc.mx"> <IMG SRC="logo4.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 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
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 FUNCION OBSERVACIONES <TABLE> Especifica el inicio de una tabla 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 COLSPAN=valor ROWSPAN=valor CELLSPACING=valor CELLPADDING=valor Ejemplo: Alinea el texto/imagen Especifica cuantas columnas ocupará una celda Especifica cuantas Iíneas ocupará una celda Espaciamiento entre cada celda Espaciamiento entre el borde de la celda y su contenido Se utilizan los tres primeros para <TR>, <TH>, <TD> y los dos últimos para <CAPTION> Debe ir en <TH> o en <TD>. El "valor" es el número de columnas Debe ir en <TH> o en <TD>. El "valor" es el número de líneas <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
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: CIUDADES POR ESTADO B.C. Ensenada Tijuana Mexicali SONORA Hermosillo Cd. Obregon Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 14
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
RESULTADO: COMPUTADORAS ACCESORIOS SERVICIOS ASESORIAS COMPUSERVE Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 16
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
EJERCICIOS Los siguientes ejercicios se elaborarán en el editor Notepad y se deberán seguir los siguientes pasos: 1. Abrir el Notepad (Start/ Programs / Accessories / Notepad). 2. Insertar los elementos básicos de un documento HTML (HTML, HEAD, TITLE, BODY). 3. Insertar el código que se indica en cada ejercicio. 4. Grabar el archivo con la extensión.htm (ej. ejercicio1.htm) 5. Abrir la aplicación del navegador Netscape. 6. 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> ® © </BODY> </HTML> Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 18
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
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> <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
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 HYPERTEXT HYPERMEDIA Standard Generalized Markup Language Lenguaje estándard para describir lenguages markup" (basados es etiquetas) Es el texto que apunta (pointer) a otro texto. Es una versión avanzada de hypertext ya que es el que permite desplegar imágenes, sonido o animación WYSIWYG What You See Is What You Get Ambiente gráfico de desarollo de páginas electrónicas. Delia Esquer M. - Programa Estratégico de Apoyo Académico / CECUUE - 21
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