Introducción al Diseño de Páginas Web 6ta Semana “HTML” Introducción al Diseño de Páginas Web
Introducción al Diseño de Páginas Web HTML Introducción al Diseño de Páginas Web
Qué es HTML ? Hipertext Markup Languages (Lenguaje De Marcas de Hipertexto): “Es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web)” El concepto de Hipertexto (Conocido también como link o enlace) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda.
Cont. El lenguaje que utilizan las computadoras que están conectadas a Internet es HTML, para que varias personas se comuniquen es necesarios que éstas hablen un mismo idioma. El HTML es un lenguaje de scripting (un lenguaje “escrito") usado en principio para crear páginas web. Fue creado en 1986 por el físico nuclear Tim Berners-Lee
Objetivos de HTML Ofrecer un medio que permitiera a los científicos publicar, buscar y recibir información 24 horas al día. Crear un lenguaje internacional de codificación en ordenadores que facilitara el acceso universal independientemente de la plataforma, red, o terminal.
Conceptos Relacionados URL URL (Uniform Resource Locator), un URL es una “dirección” que sirve para identificar algún recurso en una computadora en Internet o una Intranet. Un URL puede ser de la forma http://www.mysite.com/default.htm, ftp://myftp, etc. Browser El término browser también es usado en español como navegador, el browser es un programa que sirve para navegar el Internet y visualizar principalmente las páginas html. Web Server El Web Server, o también servidor web es un servicio que provee una computadora para el Internet o una Intranet, ahí residen las páginas html que son “servidas” a requisición de un usuario.
HTML Es un lenguaje solo de Formato. El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos. El archivo se debe guardar con la extensión .htm o .html El software que permite al usuario consultar documentos en World Wide Web se denomina explorador o navegador. Es el encargado de interpretar las etiquetas y de mostrar el documento en pantalla. Estos documentos pueden ser mostrados por los navegadores o "browsers" de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer.
Como funciona una página Web? Cliente/Usuario Solicitud de página Resultado Servidores
<TITLE> Título </TITLE> </HEAD> Estructura básica de un documento HTML Esta etiqueta marca el comienzo de la página HTML. En esta sección se describe la cabecera de la página HTML Aquí se coloca el título de la página En esta sección se coloca el contenido de la página HTML <HTML> <HEAD> <TITLE> Título </TITLE> </HEAD> <BODY> </BODY> </HTML>
Introducción a la construcción de páginas Web El principio esencial del HTML es el uso de las etiquetas, las cuales funcionan de la siguiente manera: <AAAA> Inicio de una etiqueta. </AAAA> Cierre de una etiqueta. Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML> El documento en sí está dividido en dos zonas principales: El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD> El cuerpo, comprendido entre las etiquetas <BODY> y </BODY> Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)
Introducción a la construcción de páginas Web Los Colores en HTML La forma de representar los distintos colores es mediante el siguiente formato: #RRGGBB Donde se indica en formato hexadecimal la proporción de rojo, verde y azul que forma el color deseado. El símbolo # es opcional. Un número hexadecimal es un número en base 16, la base normal utilizada es base 10 o decimal del 0 al 9. En este caso los número validos serán del 0 al 9 añadiendo desde la a ó A a la f ó F. Por tanto el número 0F será el 15, 0E será 14.
Introducción a la construcción de páginas Web En la especificación del color utilizaremos para definir la proporción de cada color un número del 0 al FF (255), 0 indica nada de ese color y FF la mayor proporción del color. Algunos ejemplos de colores serán: #000000 Negro #FFFFFF Blanco #FF0000 Rojo #00FF00 Verde #0000FF Azul
Introducción a la construcción de páginas Web Atributos de la etiqueta BODY La etiqueta BODY presenta algunos atributos que son de definición global para todo el documento, estos definirán los colores y el fondo del documento HTML. Los atributos de BODY son: <BODY BACKGROUND="URL" BGCOLOR=#RRGGBB TEXT=#RRGGBB LINK=#RRGGBB VLINK=#RRGGBB>
Introducción a la construcción de páginas Web Existen unas etiquetas especiales HTML para definir estos elementos de control de texto. A continuación se detallará cada una de ellas. <BR> Salto de línea: Su utilidad es similar al anterior pero en este caso el espaciado del texto es menor, se pasará a la línea siguiente, sin dejar una línea de separación. <HR> Regla Horizontal: <HR ALIGN=LEFT|RIGTH|CENTER NOSHADE SIZE=n WIDTH=n> Se usa para dividir un documento en distintas secciones, mostrará una línea horizontal de tamaño determinable. Se asemejará al salto de página dentro de un documento.
Introducción a la construcción de páginas Web <PRE> Texto preformateado: Muestra una porción de texto en el que se respetan los saltos de línea, tabuladores y espacios en blanco. Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostrará tal y como se expresa en el fuente del documento html. <CENTER> Centrado de texto e imágenes: Se utilizará para centrar líneas de texto, imágenes o cualquier otro elemento HTML (tablas, listas, etc...). Todo lo que se encuentre entre las etiquetas de inicio y fin aparecerá centrado en el navegador.
Introducción a la construcción de páginas Web Espacios en blanco: Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de forma efectiva, pudiendo mostrar más de un espacio en blanco de separación. <H1> - <H6> Cabeceras de títulos En un documento HTML es posible definir seis tipos distintos de cabeceras que serán normalmente el título del documento y los distintos subapartados que lo forman. Las etiquetas que definen las cabeceras serán <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.
Introducción a la construcción de páginas Web <Hr ALIGN=CENTER>: Alineación de la cabecera Puede presentar un atributo, que especificará que la cabecera se mostrará centrada. ALIGN=CENTER. La forma de expresarlo será: <H1 ALIGN=CENTER>Este texto aparecerá resaltado y centrado</H1>
Introducción a la construcción de páginas Web <FONT SIZE=n>: Tamaño de la fuente El atributo SIZE permite indicar el tamaño de la fuente, su valor puede estar entre 1 y 7. Incrementándose de tamaño progresivamente desde 1, que es la fuente de menor tamaño, hasta 7 que la fuente de mayor tamaño. El texto normal equivale a la fuente de tamaño 3, por tanto los valores menores que 3 serán fuentes más pequeñas que el texto normal y las mayores que 3 serán de mayor tamaño.
Introducción a la construcción de páginas Web <BASEFONT SIZE=n> : Fuente por defecto Definirá el tamaño de la fuente que se considerará como base para definir los tamaños de fuente relativos. <FONT COLOR=texto color ó RRGGBB>: Color de la fuente El atributo COLOR nos permite definir el color que tendrá el texto incluido entre las etiquetas de inicio y fin. El modo de definir los colores es similar al explicado para los atributos de BODY, al que le remitimos si no le quedo claro.
Introducción a la construcción de páginas Web Las listas en HTML El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista. Dentro de una lista de puede incluir cualquiera de los elementos HTML, e igualmente una lista puede incluirse dentro de formularios, tablas, etc. Existen principalmente tres tipos de listas: las listas no ordenadas, las listas ordenadas y las listas de definiciones.
Introducción a la construcción de páginas Web <UL> Listas no ordenadas Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. <UL TYPE = DISK ó CIRCLE ó SQUARE > <LH> Titulo de la lista </LH> <LI> Elemento 1 <LI> Elemento 2 . . . <LI> Elemento n </UL>
Introducción a la construcción de páginas Web HTML Resultado Explicación <UL > <LH> Titulo </LH> <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 </UL> Titulo Elemento 1 Elemento 2 Elemento 3 Este será el caso básico de lista no ordenada. Se podrán incluir tantos elementos como se deseen y estos podrán ser texto normal, texto resaltado con alguno de los estilos, imágenes, etc ... <UL TYPE=SQUARE> <LI> Elemento 1 <LI> Elemento 2 <UL TYPE=CIRCLE> <LI> Elemento 3.1 <LI> Elemento 3.2 </UL> <LI> Elemento 4 Elemento 3.1 Elemento 3.2 Elemento 4 Ahora definimos una lista anidada, es decir una lista dentro de una lista, basta con incluir el nuevo elemento UL dentro del elemento UL de la lista original. En este ejemplo también usamos distintos elementos definibles con TYPE, para indicar los componentes de la lista.
Introducción a la construcción de páginas Web <OL> Listas ordenadas Estas listas serán similares al caso anterior pero en este se usa un número para indicar el orden de cada elemento de la lista. <OL START = n TYPE = A ó a ó I ó i ó 0 > <LH> Titulo de la lista </LH> <LI> Elemento 1 <LI> Elemento 2 . . . <LI> Elemento n </OL>
Introducción a la construcción de páginas Web HTML Resultado Explicación <OL > <LI> Elemento 1 <LI> Elemento 2 <LI> Elemento 3 </OL> Elemento 1 Elemento 2 Elemento 3 Este será el caso básico de lista ordenada. <OL TYPE=I> <LI> Elemento 1 <LI> Elemento 2 <OL TYPE=a> <LI> Elemento 3.1 <LI> Elemento 3.2 </OL> <LI> Elemento 4 Elemento 3.1 Elemento 3.2 Elemento 4 Ahora definimos una lista anidada y usamos distintos elementos para la numeración de las opciones.
Introducción a la construcción de páginas Web Hiperenlaces Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual. Para definir un hiperenlace podemos utilizar cualquier elemento HTML, no debe ser texto necesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Un hiperenlace igualmente podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto, tablas, formularios. El texto que define el hiperenlace debe ser clarificador sobre el documento al que referenciamos, debemos evitar referencias específicas que hagan al texto poco legible. <A HREF="URL a la que se accede">Texto del Hiperenlace</A> <A HREF="URL a la que se accede"><IMG SRC="Imagen"> y también texto</A>
Introducción a la construcción de páginas Web URL absolutas y relativas Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. En el caso de las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si solo indicamos un fichero html se considerará que se encuentra en el servidor y directorio del documento que lo referencia.
Introducción a la construcción de páginas Web Imágenes Una de las características principales del lenguaje HTML y de la WWW es la introducción de elementos multimedia, en este apartado veremos como introducir gráficos y ficheros de imágenes en un documento HTML. En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes formatos gráficos: GIF, JPEG ó XBM. El formato más extendido y practico es el GIF, todos los navegadores gráficos de la Web soportan este formato, además existen gran cantidad de programas de tratamiento de gráficos que permiten grabar los gráficos o convertir gráficos a GIF.
Introducción a la construcción de páginas Web Existe unos casos especiales en las imagenes GIF, que son las imágenes transparentes y las imágenes animadas. <IMG SRC=...> Inclusión de Imágenes La etiqueta encargada de mostrar imágenes en HTML es IMG y tiene el siguiente formato: <IMG SRC="URL de la Imagen" ALT="Texto alternativo a la imagen">