Guia - Escuela de Ingeniería Civil Informática
Anuncio
Universidad Catolica del Maule Facultad de Ciencias de la Ingeniería Ingeniería Civil Informática Laboratorio de HTML 19 – 05 – 2004. Guía de Conceptos de HTML Estructura básica de un documento HTML Un documento escrito en HTML contendría básicamente las sgtes. Directivas: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Indica el inicio del documento. Inicio de la cabecera. Inicio del título del documento. Final del título del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documento. <HEAD> Delimita la cabecera del documento. Es importante definir el título de la página por medio de la directiva <TITLE> </TITLE>. Este título será el que aparezca en la barra de nuestro visor de páginas Web. (2) <TITLE> La página Web de Computación </TITLE> Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. Ejemplo: <META name =” Página de Pablo” content= ”Mi página personal, música y películas”> Indica al visor el nombre de la página y sus contenidos principales. <META name= ”Keywords” content= “Pablo música películas links ”> Indica al visor las palabras clave para los buscadores de Internet. <BODY> Indica el inicio y el final de la página Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de muestra página (textos, gráficos, enlaces, etc.) . Esta directiva tiene parámetros opcionales que permiten indicar la “apariencia” global del documento. Parámetros mas usados: Material editado por Christopher Neumann N. -1- Universidad Catolica del Maule Facultad de Ciencias de la Ingeniería Ingeniería Civil Informática Background = “nombre del archivo gráfico”. Indica el nombre de un archivo gráfico que servirá como “fondo” de nuestra página. Bgcolor = “código de color”. Indica un color para el fondo de nuestro documento, se IGNORA si se ha usado el parámetro background. Ejemplo: <BODY bgcolor=# 000000 text=# 0000FF > (negro) (Azul) <BODY background= ” file:///C:/Sitio%20Publicado%201%20de%20Febrero/arroba-viva.gif "> Text=“código de color” . Indica un color para el texto que incluímos en el documento. Por defecto es negro. Link=“código de color”. Indica el color de los textos que dan acceso a un hyperenlace o link. Por defecto es azul. Vlink=“código de color”. Indica el color de los textos que dan acceso a un hyperenlace que ya hemos visitado con nuestro visor. Por defecto es púrpura. El Código de color es un número compuesto por 3 pares de cifras hexadecimales que indican la proporción de los colores “primarios”, Rojo, verde y azul. El código de color se antecede del símbolo #. Ejemplos: #000000 #FF0000 #0000FF #FFFFFF #00FF00 #FFFF00 Color Negro. Color Rojo. Color Azul. Color Blanco. Color Verde. Color Amarillo. Espaciados y saltos de línea En HTML sólo se reconoce un espacio entre palabra y palabra, el resto de los espacios serán ignorados por el visor, tampoco respeta tabulaciones, saltos de líneas y otros. La directiva <PRE> obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc. Para indicar un salto de línea se utiliza la directiva <BR> y para un cambio de párrafo se utiliza la directiva <P> (7) La directiva <P> puede usarse también como directiva cerrada <P></P> indicando de esta manera los atributos de un párrafo en concreto. Material editado por Christopher Neumann N. -2- Universidad Catolica del Maule Facultad de Ciencias de la Ingeniería Ingeniería Civil Informática Cuando se usa de esta manera <P> tiene el parámetro align que indica al visor la forma de justificar el párrafo, los posibles valores de este parámetro son LEFT, RIGHT y CENTER. Cabeceras En un documento de HTML se pueden indicar 6 tipos de cabeceras (tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5><H6>. El texto que escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en mayor tamaño. Los textos marcados como “cabeceras” provocan automáticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Atributos de texto Para indicar atributos del texto (negrita, subrayado, centrado, etc..) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados por determinados visores de Internet, es por ello que según el visor que esté utilizando, verá el resultado correctamente o no. Por otro lado la directiva <FONT></FONT> nos permite variar el tamaño, el color y el tipo de letra de un texto determinado. Utiliza los parámetros size, bgcolor y face. Size= valor Da al texto el tamaño en puntos. Bgcolor= “código de color” Da al texto el color especificado. Face= “tipo de letra” Escribe el texto con el tipo de letra especificado. Comentarios en HTML Para incluir comentarios en la página Web se utiliza la directiva <!- comentario -> Ejemplo: <!- Esto es un comentario sobre mi página Web -> Los comentarios no serán mostrados por el visor y son útiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Listas de elementos Existen 3 tipos de listas: numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos según el lugar que ocupan en la lista. Material editado por Christopher Neumann N. -3- Universidad Catolica del Maule Facultad de Ciencias de la Ingeniería Ingeniería Civil Informática Para este tipo de lista se ocupa la directiva <OL> </OL>, cada uno de los elementos de la lista será precedido de la directiva <LI> La directiva <OL> tiene los siguientes parámetros: Start= num Indica que número será primero en la lista. Por defecto empieza por uno. Type= tipo Indica el tipo de numeración utilizada, sino se indica se entiende que es lista numérica. Los tipos posibles son: Type= 1 Numéricamente (1, 2, 3, 4…etc.) Type= a Letras minúsculas (a, b, c, d…etc.) Type= A Letras mayúsculas (A, B, C, D..etc.) Type= i Números romanos en minúsculas (i, ii, iii, iv..etc.) Type= I Números romanos en mayúsculas (I, II, III, IV..etc.) Las listas sin numerar representan los elementos de la lista con un “topo” o marca que antecede a cada uno de ellos. Se utiliza la directiva <UL> </UL> para delimitar esta lista y <LI> para indicar cada uno de los elementos. Utiliza el parámetro type que indica la forma del topo, los valores de type pueden ser disk, circle o square (disco, círculo o cuadrado). Insertar Imágenes Para incluir una imagen en nuestra página Web utilizaremos la directiva <IMG>. Hay 2 formatos de imágenes que todos los navegadores modernos reconocen: son las imágenes GIF y JPG . La directiva <IMG> tiene varios parámetros, los mas usuales son: Src= “imagen” Alt= “texto” Indica el nombre del archivo gráfico a mostrar. Mostrará el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen. Otros parámetros que utiliza la directiva <IMG>: Align= TOP/MIDDLE/BOTTON Indica como se alineará el texto que siga a la imagen. Height= tamaño Indica el alto de la imagen en ptos. O en porcentaje. Se usa para variar el tamaño de la imagen original. Width= tamaño Indica el ancho de la imagen. La imagen a mostrar puede encontrarse en Internet, en ese caso la directiva debe incluir la página donde se encuentra el archivo gráfico. Material editado por Christopher Neumann N. -4- Universidad Catolica del Maule Facultad de Ciencias de la Ingeniería Ingeniería Civil Informática Ejemplo: <IMG src= “http://www.microsoft.cm/iexplorer.gif”> Como Subir las paginas Web a las Cuentas de Linux de la UCM Para Subir a la cuenta de linux, y lograr visualizar las paginas con contenido html en los distintos computadores de la UCM, debes conectarte a tu cuenta a traves del Putty o Telnet, (se recomienda Putty), y crear una carpeta llamada: “public_html” Luego de ese paso, es necesario colocar el archivo html realizado por usted al interior del directorio bajo el nombre de Index.html Para acceder a la Pagina desde otro Pc debera tippear en la dirección: http://192.168.10.66/ ~nombredetucuenta/index.html Laboratorio de Hoy: - Diseñar una pagina Web sencilla, que contenga Títulos con letras de mayor tamaño, un cuerpo con los antecedentes del estudiante, etc. - Subir la Pagina Web a Internet a través de su cuenta de Linux. Material editado por Christopher Neumann N. -5- Universidad Catolica del Maule Facultad de Ciencias de la Ingeniería Ingeniería Civil Informática Ejemplo de una pagina Web con contenido html sencilla: <HTML> <HEAD> <TITTLE> <H1> <FONT color=red face=TIMES>Pagina de Christopher Neumann Navarrete </FONT> </TITTLE> </HEAD> <BODY bgcolor=green> <FONT color=white face=arial><H2>Comandos de Linux </FONT> <HR> <BR> <h4><FONT color=black face=arial> <OL Type=1> <LI>pwd:<br>Imprime contenidos de un directorio <BR> <LI>ls:<br>Lista el contenido de directorios o archivos <BR> <LI>chmod:<br>Cambia permisos de acceso a archivos <BR> <LI>man:<br>Entrega información de un archivo e cuestion <BR> <LI>cd:<br>Permite acceder o salir de directorios o subdirectorios <BR> <LI>mv:<br>Traslada o renombra archivos <BR> <LI>mkdir:<br>Crea directorios <BR> <LI>rm:<br>Remueve archivos (borrar) <BR> <LI>rmdir:<br>Remueve directorios <BR> <LI>cat:<br>Lista el contenido de los archivos <BR> <LI>more:<br>Lista el contenido de los archivos, con porcentajes <BR> <LI>ftp:<br>Protocolo estandar de comandos para internet. <BR> <LI>grep:<br>Para buscar archivos por medio de texto. </OL> <HR> Asi, la pagina se vera en el navegador Web de la siguiente forma: Material editado por Christopher Neumann N. -6- Universidad Catolica del Maule Facultad de Ciencias de la Ingeniería Ingeniería Civil Informática Material editado por Christopher Neumann N. -7-