“html” 6ta semana introducción al diseño de páginas web

““HTML”HTML”

6ta Semana6ta Semana

Introducción al Diseño de Páginas Web

HTMLHTML

Introducción al Diseño de Páginas Web

Qué es HTML ?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.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 HTMLObjetivos 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 RelacionadosConceptos 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.

HTMLHTML• 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?Como funciona una página Web?

Cliente/Usuario

Solicitud de página

Resultado

Servidores

Estructura básica de un documento HTML

Esta etiqueta marca el comienzo de la página HTML.

Esta etiqueta marca el comienzo de la página HTML.

En esta sección se describe la cabecera 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

Aquí se coloca el título de la página

En esta sección se coloca el contenido de la página HTML

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 WebIntroducció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.)


• 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.

• 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


• 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>


• 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.


• <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.


• 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>.


• <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>


• <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.


• <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.


• 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.


• <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>


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 </UL>

Elemento 1 Elemento 2

oElemento 3.1 oElemento 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.


• <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>


HTML Resultado Explicación

<OL > <LI> Elemento 1<LI> Elemento 2 <LI> Elemento 3</OL>

1.Elemento 1 2.Elemento 2 3.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

</OL>

I.Elemento 1 II.Elemento 2

a.Elemento 3.1 b.Elemento 3.2

III.Elemento 4

Ahora definimos una lista anidada y usamos distintos elementos para la numeración de las opciones.


• 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>


• 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.


• 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.


• 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">


“html” 6ta semana introducción al diseño de páginas web

Documents