UNIVERSIDAD FRANCISCO GAVlDlA FACULTAD DE INGENIER~A Y ARQUITECTURA

Transcripción

1

2 UNIVERSIDAD FRANCISCO GAVlDlA FACULTAD DE INGENIER~A Y ARQUITECTURA ELABORADO POR : MAYRA YANET SALVADOR MERINO CARRERA : PROFESORADO EN EDUCACIÓN MEDIA PARA LA ENSEÑANZA DE LA COMPUTACIÓN SAN SALVADOR, JULIO DE 1,999.

3 . lndice Pág. 1. Introducción al HTML 1 1 Conceptos básico Cómo funciona la Web? Herramientas para comenzar a diseñar páginas Web Historia del Lenguaje HTML 'Qué es el lenguaje HT 1.6 Requerimientos para el Otras herramientas para crear páginas Web Ejercicios propuestos Cómo Crear una Página Web 2. 1 Estructura básica del HTML 2. 2 División de un documento HTML Editar. Guardar y Visualizar un documento HTML Uso de comentarios Ejemplo y ejercicios propuestos Formato y Alineación de Texto 3 1 Etiquetas de formato Etiquetas de párraf 3 3 Formato de caractere 3 4 Alinear texto Ejemplo y ejercicios propuestos Fuentes y Caracteres Especiales 4. 1 Fuentes y colores Cómo seleccionar un tipo de letra 4 3 Caracteres especiales Cómo cambiar el color del fondo de la página? Ejemplo y ejercicios propuesto

4 5. Listas de Elementos 5. 1 Listas Ordenadas 5. 2 Listas no Ordenadas 5. 3 Listas de Definición Ejemplo y ejercicios propuestos Enlaces o Links 6.1 Qué es un enlace Qué es una URL Enlaces Internos: Anclas Enlaces a otras páginas Enlaces fuera del sistema Enlaces hacia Correo Electrónico Ejemplo y ejercicios propuestos Creación de Tablas 7. 1 Estructura básica de las tablas 7. 2 Parámetros opcionales en las tabla 7. 3 Tamaño de las tablas 7. 4 Alineación del texto en una celda 7.5 Cómo cambiar el es 7. 6 Etiqueta para titular una tabl 7. 7 Color de fondo en las tablas Espaciados entre celda 7. 9 Ejemplo y ejercicios propuestos 8. Agregar Imágenes a las Páginas 8. 1 Insertar imágenes a las páginas Parámetros para cambiar ancho y alto a las imágenes Alinear imágene Imágenes como Imágenes como vinculos Ejemplo y ejercicios propuesto 85

5 9. Publicación y Promoción de Páginas 9. 1 Publicación de páginas Transferir páginas a un servidor Promocion de paginas Cómo Diseñar Adecuadamente Páginas Web Reglas básicas en el diseño Normas fundamentales del HTML Estructura básica de las páginas Web Composicion Facilitar el mantenimiento de las páginas Demos de Aplicación Ejemplo # Ejemplo # Bibliografía Anexos 1. Estructura básica de un documento HTML Lista de herramientas para elaborar páginas Web Resumen de etiquetas y atributos Lista de caracteres especiales

6 Manual básico de HTML -l. INTRODUCCIÓN AL HTML El lenguaje de marcado de hipertexto(html) se utiliza para la creación de páginas Web. Conozca algunos conceptos importantes, herramientas y un poco de historia acerca del HTML. 'l. 1 Conceptos Básicos Antes de empezar con el diseño de nuestra página Web debemos tener claros los siguientes conceptos: lnternet : Es "la red de redes" que conecta millones de computadoras en todo el mundo. Página Web : Es un documento de texto que utiliza comandos en un lenguaje especial llamado HTML para afiadir formato, gráficos y otros elementos y vínculos con otras páginas. World Wide Web: Nombre colectivo de todas las páginas Web en lnternet

7 Manual básico de HTML Navegador: Un programa que se usa para tener acceso a Worl Wide Web y que interpreta el código HTML que llega a nuestras computadoras por medio del protocolo de transferencia de hipertexto. Protocolo: Una descripción formal de los formatos y las reglas de mensajes que dos computadoras deben seguir para intercambiar dichos mensajes. * Etiquetas: Comandos HTML codificados, que se utilizan para indicar cómo debe mostrarse una parie de una página Web. Atributos: Código especial que se utiliza dentro de una etiqueta HTML, para controlar exactamente qué hace la etiqueta. Hipertexto: Texto que permite a los lectores saltar directamente entre documentos y otros recursos, al seleccionar las palabras claves que aparecen en cada pantalla. * Correo Electrónico: Sistema que permite que una persona redacte mensajes en una computadora y lo transmita a través de una red de computadoras, como Internet, hacia otro usuario de computadoras. URL: También llamado dirección. Es un sistema de direcciones que localiza documentos en Internet.

8 Manual básico de HTML Servidor Web: Computadoras en lnternet que almacena datos a los que puede tenerse acceso mediante navegadores Web que utilicen el protocolo HTTP. Módem: Dispositivo que convierte las señales digitales de una computadora a un formato analogico para su transmisión a través de líneas telefónicas. * HTTP: Método estándar de intercambiar información entre servidores HTTP y sus clientes en la Web. La especificación HTTP proporciona las reglas sobre la forma en que deben trabajar conjuntamente los servidores Web y los navegadores. Enlaces o Links: Un ícono, una imagen, o una cadena de texto resaltado, que conecta la página Web actual con otras páginas Web, sitios de Internet, gráficos, animación o sonido. En Web salta de página a página haciendo clic en los - Página vínculos. Web Básica: Es una página que está escrita en lenguaje HTML y que contiene texto, imágenes, tablas, listas y enlaces.

9 Manual básico de HTML 1.2 Cómo Funciona la Web? La Web funciona en una forma muy sencilla. Las transacciones tienen cuatro fases: + Conexión: es cuando ei cliente intenta conectarse con el Se~idor. La barra de estado del navegador (browser) nos indica Conexión con... + Pedido: el cliente envia el pedido y el protocolo que se usará + Respuesta: el servidor envia la respuesta + Cierre: termina el dialogo. Después el navegador muestra los datos pedidos de acuerdo al formato de éstos; puede ser texto, gráficos, audio, etc. l. 3 Herramientas Principales para Comenzar a Diseñar Páginas Web. Una computadora Con características mínimas: J Microprocesador 486 o superior J Velocidad 233 Mhz. o más J 8 Mg. de memoria RAM o más

10 Manual básico de HTML Editor de Texto: El editor de texto, puede ser cualquiera, siempre que no formatee el texto. Entre los más recomendables está: WordPad en Windows o Simple Text en Macintosh. Siempre los archivos deberán guardarse como "solo texto", para no tener errores a la hora de cargarlo en el Navegador. El editor de texto nos servirá para crear un archivo con cualquier nombre, pero debe tener la extensión.html o.htrn Cuando escribamos algo nuevo en el archivo, debemos guardarlo antes de cargarlo en el navegador. Para la elaboración del manual se utilizará WordPad. Un Navegador del Web: La tarea principal del navegador es interpretar los documentos HTML escritos en el procesador de texto. Algunos navegadores del Web mas utilizados son: Netscape, Microsoft Interne1 Explorer, Mosaic. etc. En la elaboración del manual se utilizara lnternet Explorer 4.0 * Una conexión a lnternet Módern bps. 4 Linea telefónica 4 Proveedor para accesar a lnternet

11 Manual básico de HTML 1.4 Historia del Lenguaje HTML Este lenguaje nace con Tim Berners-Lee de CERN en 1,991. Es un sistema de hipertexto con el objetivo de servir como medio de transmisión entre físicos que eran parte de la iniciativa W. En 1,993 Dan Connelly escribió el primer documento que describía el lenguaje. A principios de 1,993; World Wide Web era un proyecto que apenas tenía una presencia moderada entre el público. fuera del interés técnico altamente especializado. Un año más tarde (1.994), la aceptación del sistema era tan impresionante que la especificación había quedado obsoleta, había adquirido más popularidad y ganaba la atención del público en los diarios alrededor del mundo. Ya en 1,995 se mencionaba en los medios de comunicación como algo innovador. Hasta hace poco, la versión oficial del HTML era la HTML 2.0 y esta cumplía perfectamente la función para la cual había sido creada. Por su parte Netscape, líder de los navegadores, introducía cada vez etiquetas y atributos que no estaban contemplados en el estándar oficial y que eran aceptados y copiados por otros navegadores.

12 Manual básico de HTML Todo esto provocó que el comité de trabajo del HTML, propusiera un borrador de una nueva versión, el HTML 3.0, en la cual se había hecho muchas mejoras. Lo extenso de la versión, lleva a que los navegadores sólo utilicen una pequeña parte de esta; promoviendo el abandono de la misma. Se tenía la necesidad de un estándar que fuera aceptado por todos. Para ello, se creó un comité apoyado por los más reconocidos vendedores de software. La versión HTML 3.2 se desarrolló durante todo el ano 1,996 y en enero de 1,997 fue aprobada. En julio de 1,997 fue presentado el primer borrador público de la versión HTML 4.0; de aquí en adelante el lenguaje ha seguido perfeccionándose aún más.

13 Manual básico de HTML 4.5 Qué es el Lenguaje H TML? Las páginas Web se diseñan utilizando el HTML. El HTML es un lenguaje sencillo pensado para presentar información en la W. Las iniciales HTML significan "Hiper Text Markup Languaje", su nombre indica que es un lenguaje de marcas para la creación de hipertexto, cuando hablamos de hipertextos entenderemos, que es aquel texto con una presentación agradable, a la cual se le puede agregar elementos multimedia (gráficos, videos, audio) y puede contener hiperenlaces que le permitan estar en contacto o relacionarse con otras fuentes de información. Se le llama lenguaje de marcas, porque las instrucciones son trozos de texto resaltados y que definen la estructura lógica del documento. Estos documentos pueden ser mostrados por los navegadores de páginas Web en lnternet como: Netscape. Mosaic o Microsoft Explorer. Las órdenes, etiquetas o comandos que contiene el HTML son las que le indican al navegador la forma de representar los elementos(texto, gráficos, tablas, etc.) que posee el documento. Los tipcs de etiquetas en HTML: Etiquetas Cerradas: contienen una palabra clave que indica el principio de la directiva y otra que indica el final. Aquí se incluye el carácter " I " antes de la palabra clave para indicar el final. r Etiquetas Abiertas: constan de una sola palabra clave

14 Manual basicn de HTML Las etiquetas o comandos se distinguen del resto del documento encerrándolas entre los símbolos " " y " > ". Los atributos o parámetros que pueden contener los comandos se indican después de la palabra clave del comando Ejemplos: Directiva Cerrada - Directiva Abierta Directiva con parámetro - %enter> UFG <Icenter> <HR> cbody bgcolor= "#FFFFFF> </body> 1 Ver estructura básica de un documento HTML en Anexo 1 (Pág. 106) 1.6 Requerimientos para el Uso del Manual Las personas que deseen utilizar el manual, deben poseer conocimientos básicos sobre entorno de Windows y tener algunos conocimientos generales de Internet. Ya que, a medida que profundice en la información del manual, encontrará que están contemplados aspectos en forma vaga, considerando que estos, ya son parte del acetvo de conocimientos de los usuarios.

15 Manual básico de HTML 1.7 Otras Herramientas para Crear Páginas Web. Además de las herramientas que se utilizaran en el manual, para el diseño de páginas Web, existe un número considerable de ellas. Estas herramientas son navegadores (browsers), lenguajes de programación, editores de HTML, etc. Una buena parte de estas herramientas puede encontrarse fácilmente en la red y pueden bajarse de forma gratuita y utilizarse sin ningún obstáculo. A continuación se presentan los nombres de algunas herramientas para el diseño de páginas Web:. ~. 1 Lenguajes de Programación 1 Editores HTML l Javascript l -- Java (applets) / Action Pad l Para hacer páginas Web, además de los editores y procesadores de texto; se pueden utilizar los editores de HTML, lo cual evita aprenderse las etiquetas y atributos del lenguaje, ya que ellos lo generan.

16 Manual básico de HTML También existen algunos lenguajes de programación como: Javascript, Visual Basic Script y Java(App1ets) que tienen aplicaciones que se ejecutan dentro de un navegador o browser. En el Anexo 2 (pág. 108 ) encontrará un listado más grande de herramientas para la elaboración de páginas Web, con sus respectivas versiones; y también estarán algunos sitios a los que puede hacer referencia para obtener las herramientas gratis.

17 - Man~al básico de HTVL l. 8 Ejercicios Propuestos: Defina los siguientes términos: - Internet: - Página Web: - World Wide Web: - Enlace:

18 Manual básim de HTML 2. CÓMO CREAR UNA PÁGINA WEB Puede ser que piense que hacer una página Web es complicado, este capítulo introductorio cambiará por completo esa idea. Ya que. para la elaboración de páginas sólo es necesario conocer algunas de las etiquetas básicas. 2.1 Estructura Básica del HTML La etiqueta de apertura <HTML> y la etiqueta de cierre </HTML> son las que definen a un documento HTML. Un documento escrito en HTML básicamente incluirá las directivas siguientes: <HTML> <head> <title> ponga aquí el titulo </title> cihead> <body>cuerpo del documento Ibody> <IHTML> En el Anexo 3(pág. 112) se encuentra un resumen de etiquetas y atributos que se estudiarán en el Manual. <html>: Es la etiqueta que identifica a un documento html. Debe incluirse en la primera línea y finalizar el documento debe cerrarse <Ihtrnl>.

19 Manual basico de HTML Dentro de <headz se encuentra la etiqueta ~titles la cual especifica el titulo del documento, solo es permitido un titulo para cada documento. Al finalizar cerraremos las instrucciones c/fitle> y 4head-2. <body>: Es el cuerpo del documento y por lo tanto dentro de esta etiqueta deberán estar todos sus elementos: texto, imágenes. vinc~ilos. etc., al finalizar cerraremos la instrucción 4bodyx Como podemos observar, las etiquetas poseen una orden de inicio que se representa por <etiqueta> y otra de fin </etiqueta> que es la misma etiqueta antecedida por el signo l. Las etiquetas pueden escribirse en letras minúsculas o mayúsculas sin ninguna consecuencia. 2.2 DNísíón de un Documento HTML O Cabecera del documento: Esta parte del documento comienza justo después del comando <html>. La cabecera del documento se inicia con la etiqueta <head> y finaliza con elheads. Dentro de la cabecera se debe contemplar el titulo del documento (ditle> y c/title>). El Netscape muestra el texto contenido entre <Me> y 4titles en la parte superior de la ventana de Netscape. El tamaño de letra de las cabeceras puede ser de seis tipos diferentes, las cuales se activan con la etiqueta <h#> al inicio del texto y <Ih#> al final, donde #

20 .- - Manual basico de HTML puede ser un número entre "uno" y "seis". Donde <h6> es la cabecera más grande y <hl> la más pequetia. Cuerpo del documento El cuerpo del documento se encierra entre la etiqueta zbody> y <!body>. aquí se incluye todo el contenido de nuestra pagina, gráficos, texto, anlace. sonido, etc. 2.3 Editar, Guardar y Yjsuaiizar un Documento HTML Editar: En el área de edicion del editor de texto, que usted va a utilizar, escriba cada una de las etiquetas de las que se va a auxiliar para diseñar la página Web, como si lo estuviera haciendo con una maquina de escribir Guardar: Cuando haya finalizado el documento HTML, proceda a guardarlo: 1. De la barra de menus, seleccione Archivo y luego Guardar como Ponga un nombre a su documento y agregue la extensión.html 3. Seleccione el lugar donde quiere guardar el documento 4. En Guardar como tipo, seleccione Documentos de solo texto

21 Manual basico de HTML 5. Oprima el botón Aceptar. Visualizar la pagina Web: nuestra página. Desde el navegador que esté utilizando: Permite ver los cambios o ver como va quedando 1. Seleccione Archivo y luego Abrir 2. Busq~ie la ubicación del documento 3. Oprima Abrir 4. Haga clic en Aceptai Esta es una pr~eba

22 Cuando se escribe una pagina Web. cabe la posibilidad que en el fut~fro puedan surgir cambios y que alguien tenga que hacerlos; es por eso. que para facilitar la lectura y revisión del código fuente de las páginas se deben incluir comentarios que indiquen lo que pasara en aquellos bloques que sean muy complejos. Para poner esos comentarios que solo los verá en el código fuente, y que no serán vis~~alizados por los navegadores, se utiliza la siguiente etiqueta: <!-Texto que contenga los comentarios necesarios-> Hoy en día ya se conoce la nueva forma oficial de incluir comentarios a las paginas Web, y es utilizando la etiqueta: <comrnent> Texto que contenga los comentarios necesarios</comrnent>

23 Manual basico de HTML 2. 5 Ejemplo y Ejercicios Propuestos Ejemplos: 2..:[]tn1l:::- -::hend:;:~ -title--,prueba del capit~ilci 2 title.: ::.:&=ad.. :.bc,dv:- testo' gmfico. listas. tablas >- enlaces.::,/bod\.::.,:~~,,llt,ll~::..

24 Manual basico de HTML Ejercicios Propuestos: En el editor o procesador de texto que este utilizando, escriba: - La estructura básica de un documento HTML. - El titulo debe ser: Mi primera página Web - En el cuerpo del documento escriba: Esta es una prueba Guarde el archivo y luego ábralo desde su navegador

25 Manual basico de HTML 3. FORMATO Y ALINEACIÓN DE TEXTO En este capítulo aprenderá a mejorar la apariencia del texto dentro de su página Web, a incorporar negritas, cursivas y distintos formatos especiales de texto a su página. Entre otras cosas se verá cómo centrar texto o alinearlo. 3.1 Etiquetas de Formato r Texto con Negritas y Cursivas Cuando se quiere poner el texto en negritas se utiliza la etiqueta cb> al inicio del texto y <IB> al final. Para hacer cursivo un texto hay que escribir la etiqueta <I> al inicio del texto y <lb para cerrar. Tambien se puede hacer el texto negritas, cursivas poniendo cb><ls donde comienza el texto y cib>~ll>. Cuando se le pone negritas a los encabezados, las negritas no se verán, ya que los encabezados están en negritas por defecto. Existen otras etiquetas que hacen que el texto aparezca en negritas: la etiqueta <strong>. La etiqueta eems al igual que el> hacen que el texto se vea en cursiva.

26 Manual básico de HTML Texto Subrayado y Monoespaciado Para lograr que el texto aparezca subrayado, se le antepone al texto la etiqueta <u> y al final </u>. Si lo que quiere es que el texto se vea como que está escrito en máquina de escribir, antepóngale la etiqueta ctb y al final el@. Ejemplo utilizando las etiquetas de formato.

27 Manual básico de HTML 3.2 Etiquetas de Párrafo Fin de Párrafo Para crear un fin de párrafo se utiliza la etiqueta <p>. Esta etiqueta inserta una linea extra en blanco entre los párrafos y no necesita al final una etiqueta de cierre. Utilice la etiqueta <p> al final del párrafo, donde quiere hacer el salto de Iínea. Línea Horizontal La etiqueta <hr> provoca la aparición de una linea horizontal y simultáneamente ocasiona un salto de línea. Esta etiqueta no requiere etiqueta de cierre. Se puede alinear a la izquierda o a la derecha (<hr align=leff o nght) y se puede variar su espesor (hr width=# de 1 a 100%). Salto de Línea Al incluir <br> en el texto produce un salto de Iínea. Se caracteriza porque no necesita una etiqueta de cierre Ejemplo haciendo uso de las efiquefas de párrafo: <hmil> ~head:~title:ctiquetasc/titl~>.</head). <bodp Esta es una prueba utilizando las etiquetas de parrafo.<br: Despues de este texto aparecera una linea en blanco <br> <p>con esta etiqueta provocaremos un nuevo parrafocbr> y para finalizar una linea horizontakhri dbody> <ihtmb

28 Manual básico de HTML 3.3 Formato de Caracteres Además de las etiquetas de formato y de párrafo, existen otras etiquetas HTML para dar un formato especial al texto. Entre ellas están: Para poner en nuestra página Web el menor tamaño de fuente, se utiliza la etiqueta csmalb al inicio del texto y al final 4smalb. Con la etiqueta cbig> al inicio de un texto, este se presentará con el mayor tamaño de fuente y se cierra con clbig>.

29 Utilice la etiqueta _y cuando quiera que una letra, palabra o una cadena de caracteres se vean en su página Web como subíndice; Csup> y <Isup> si lo que desea es que se aparezca como superíndice. La etiqueta <strike> al inicio de un texto y <Istrike> al final, traza una línea sobre el texto y se ve tachado. Ejemplo utilizando formato de caracteres: