Diseño de Páginas Web: HTML Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010 En este taller titulado “Diseño de Páginas Web: HTML” estaremos hablando sobre como construir páginas Web usando el lenguaje HTML. Pero primero que nada, para poder apreciar y tener una buena perspectiva sobre el diseño de páginas Web es importante conocer acerca de lo que es el “Web” o el “World Wide Web” por su nombre completo. Preguntar al público que entienden por “World Wide Web” (o simplemente el Web) antes de continuar.

¿Qué es el World Wide Web? Es una “telaraña” de documentos accesados mediante el Internet. Estos documentos están escritos en Lenguaje Marcado de Híper Texto (HTML), y pueden contener texto, imágenes, videos, y otros multimedios. Los documentos están entrelazados unos a otros por medio de enlaces electrónicos o hiperenlaces. Hacemos énfasis en la primera viñeta donde se revela gran información sobre la naturaleza del Web. Primero, el Web es una palabra en inglés que significa telaraña o red lo que implica que el Web está compuesto de documentos entrelazados, y segundo, estos documentos residen en el Internet. La parte de documento entrelazados se discutirá con más detalle más adelante en la presentación, pero por el momento un simple dibujo se muestre la analogía de una telaraña donde los nexos de esta son documentos y las líneas son las conexiones entre estos será suficiente. En la próxima diapositiva discutiremos el Internet. Mucha gente tiene una idea de lo que es el Internet, pero ¿realmente comprendemos lo que es el Internet? Preguntar al público lo que entienden por Internet antes de continuar. Orejita: Parte de la definición de lo que es el Internet puede deducirse del mero hecho de que los documentos no existen en la nada sino que se encuentran dentro de computadoras.

Pero, ¿qué es el Internet? Es un sistema global de redes de computadoras interconectadas. Una red mundial de redes conectadas por varias tecnologías (ej., fibra óptica, cables de teléfono, comunicación inalámbrica, módems, enrutadores y satélites). En esta diapositiva se define brevemente lo que es el Internet. El objetivo clave de esta es mostrar que el Internet es una red de redes (de computadoras) y que esta red llamada el Internet tiene una envergadura mundial. Los componentes de esta red son muchos y variados. Por un lado tenemos a las computadoras y otros equipos electrónicos (como módems, enrutadores, puentes, conmutadores, concentradores, repetidores, satélites) que componen los nodos en la red (nodos = puntos donde las aristas o líneas se unen). Y por el otro lado tenemos los medios y equipos físicos de transmisión (como fibra óptica, cables de teléfono, comunicación inalámbrica y microondas) que componen las líneas de la red. Puede ser interesante aclarar que el World Wide Web es una red sobrepuesta a la red Internet. Esto significa que la visualización de la red Web no es igual que la visualización de la red Internet. En la visualización de la red Web los nodos serían los documentos HTML y las líneas serían los hiperenlaces entre ellos. Esto implica que varios nodos Web pueden residir en un solo nodo Internet (como es el caso de un sitio Web y su respectiva computadora servidor), pero también puede implicar que una línea de la red Web representa varios nodos y líneas en la red Internet (si los hiperenlaces conectan a recursos externos a la computadora servidor). Es importante recalcar que cuando hablamos de que estas redes están interconectadas esto implica que están conectadas física y lógicamente. Concretamente, la Unión Internacional de Telecomunicaciones (ITU) define a la interconexión como: “los arreglos comerciales y técnicos bajo los cuáles los proveedores de servicios conectan sus equipos, redes y servicios para permitir a los consumidores acceder a servicios y redes de otros proveedores de servicios”. Esto a su ves tiene muchas implicaciones que están fuera del alcance de esta discusión, pero en pocas palabras se trata de que diferentes compañías de servicios y manufactureras de equipos permitan que sus recursos sean usados por clientes o usuarios de otras compañías y manufactureras. Imagínense que un cliente de T-Mobile no pudiera llamar a un cliente de AT&T (o de Open Mobile o de Claro o de Verizon), o un equipo de Ethernet 3Com no fuera compatible con un equipo CISCO (o Broadcom).

¿Cómo funciona el Internet? En tu computadora abres un navegador de Web que actuará como un cliente. Escribes la dirección de la página Web que quieres ver en tu navegador. El navegador interpreta la dirección y se conecta a la computadora correspondiente a esa dirección en el Internet que actúa como servidor. El proceso de encontrar un sitio Web es similar a como un cartero encuentra un apartado o un domicilio una vez dada la dirección. Los posibles servicios ofrecidos por un servidor pueden ser: correo-electrónico; telefonía VoIP y videoconferencia; motor de búsqueda; chats y mensajería instantánea; alojamiento, resguardo y transferencia de archivos; bases de datos; conexión remota; P2P; y varios métodos de publicación en línea, entre muchos otros. Para simplificar la explicación y hacerla más relevante al tema de HTML se habla de acceder al Internet utilizando un navegador de Web. Sin embargo, es importante aclarar que hay un sin número de programas en adición a los navegadores Web que acceden al Internet y a sus recursos de igual o de diferente manera a la descrita. Los programas clientes de correo electrónico, los programas punto-a-punto, y algunos videojuegos, son ejemplos de esto. En la discusión se traen a colación los términos cliente y servidor que no tienen un significado diferente en el contexto de computadoras, pero que la gente puede encontrar confuso. Un cliente es una computadora, programa, y/o usuario que solicita o hace uso de los servicios provistos por un servidor. A su vez, un servidor es una computadora, programa, y/o usuario que ofrece uno o varios servicios a sus clientes. En el caso de visitar un sitio Web, a la computadora donde residen los archivos HTML se le considera un servidor Web y a los navegadores Web que solicitan estos archivos HTML entonces se les considera clientes de este servidor Web. En realidad el proceso de encontrar un sitio Web es una mezcla de buscar una dirección de correo y hacer una llamada telefónica. Más adelante en la presentación se modifica la analogía del cartero para incorporar la de hacer una llamada telefónica y se explica el porque. Ejemplos de los posibles servicios ofrecidos por pueden ser: correo-electrónico (Gmail, Hotmail, Yahoo!) telefonía VoIP y videoconferencia (Skype, Asterisk, Gizmo5) motor de búsqueda (Google, Bing, Yahoo!) chats y mensajería instantánea (IRC, ICQ, MSN Messenger) alojamiento, resguardo y transferencia de archivos (Megaupload, Rapidshare, Mediafire) bases de datos (de compañias, de tiendas, de censo, de encuestas, de información poblacional o estadística) conexión remota (Telnet, Remote Desktop) P2P (BitTorrent, eMule, LimeWire) varios métodos de publicación en línea (websites, blogs, newsletters, usenet, groups)

Localizador Uniforme de Recursos (URL) La dirección escrita en el navegador es también conocida como un localizador uniforme de recursos (URL). Este sirve para encontrar recursos (ej., archivos) en el Internet. Los formatos generales de un URL son los siguientes: protocolo://máquina/ protocolo://máquina/directorio protocolo://máquina/directorio/archivo El formato completo de un URL es el siguiente: protocolo://usuario:contraseña@máquina:puerto/directorio/archivo A continuación varios ejemplos: http://www.microsoft.com/ http://bc.inter.edu/facultad/hbruckman/index.html https://email.bayamon.inter.edu/exchange ftp://ftp.adobe.com/pub/adobe/ mailto://hbruckman@bc.inter.edu

La Función del Navegador Web Usando un DNS traduce el nombre de la maquina en el URL a una dirección IP (que es como un número de teléfono). Ej. www.google.com  72.14.253.104 Ej. bc.inter.edu  164.42.150.4 Entabla una conexión con la maquina servidor y se convierte en su cliente. Solicita el recurso indicado por el “directorio/archivo” en el URL al servidor haciendo uso del protocolo indicado (ej. http, https, ftp, irc, telnet, file, ed2k). Una vez recibe el recurso, el navegador interpreta el contenido y lo muestra de manera gráfica. En el caso de documentos HTML el navegador interpreta el texto recibido y lo muestra como una página Web.

¿Qué es el World Wide Web? Es una red de documentos entrelazados y accesados mediante el Internet. Estos documentos están escritos en Lenguaje Marcado de Híper Texto (HTML), y pueden contener texto, imágenes, videos, y otros multimedios. Los documentos están entrelazados unos a otros por medio de enlaces electrónicos o hiperenlaces.

Y, ¿qué es HTML? Es un lenguaje constituido de elementos y sus respectivos atributos. Estos elementos toman la forma de etiquetas (o “tags”) distinguidas por estar rodeadas por los símbolos “<” y “>”. Ej. <HTML>, <P> Los elementos por lo general están definidos entre un par de etiquetas. A estas se les conoce como etiqueta de apertura o comienzo y etiqueta de clausura o terminado. Las etiquetas de clausura tienen el mismo nombre que sus respectivas etiquetas de comienzo lo único que comienzan con los símbolos “</” en vez de simplemente “<“. Ej. <HTML> y </HTML>, <P> y </P> Los nombres de las etiquetas no son sensitivos a mayúsculas. Ej. <HTML>  <html>, </P>  </p> Para generar un documento HTML sólo se necesita un editor de texto.

¡Hola Mundo! Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre “hola_mundo.html” incluyendo las comillas. <HTML> <HEAD> <TITLE>Hola Mundo!</TITLE> </HEAD> <BODY> <P>Hola Mundo!</P> </BODY> </HTML> En el código HTML no importan los espacios.

Atributos de Elementos HTML Los atributos son usados para describir y/o modificar un elemento HTML. Los atributos siempre son especificados en la etiqueta de apertura del elemento. Un típico atributo es un par de nombre-valor que toma la forma NOMBRE=“valor”. Al igual que las etiquetas los atributos no son sensitivos a mayúsculas. (i.e., NOMBRE=“valor”  nombre=“valor”) Un elemento puede tener cero o varios atributos especificados. Ej. <BODY> Ej. <BODY BGCOLOR=“black”> Ej. <BODY TEXT=“white” LINK=“green”> Hay atributos comunes compartidos por todos los elementos HTML. Los más usados son: ID, CLASS, STYLE*, TITLE* Por lo general los atributos son opcionales, pero hay ciertos atributos que son necesarios en ciertos elementos como lo es el atributo HREF en el elemento A. Sin el atributo HREF el elemento A no hace nada. Ej. <A HREF="http://en.wikipedia.org/">Wikipedia</A>

Insertando Imágenes Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre “image.html” incluyendo las comillas. <HTML> <HEAD> <TITLE>Image</TITLE> </HEAD> <BODY> <IMG SRC="./images/Internet01.png"> </BODY> </HTML> En el código HTML no importan los espacios.

Insertando Videos Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre “video.html” incluyendo las comillas. <HTML> <HEAD> <TITLE>Video</TITLE> </HEAD> <BODY> <EMBED SRC="http://www.youtube.com/v/GwQMnpUsj8I&hl" TYPE="application/x-shockwave-flash" WIDTH="425" HEIGHT="344"> <NOEMBED> <P>El elemento <EMBED> esta prohibido o deshabilitado en tu navegador.</P> </NOEMBED> </BODY> </HTML> En el código HTML no importan los espacios.

Insertando Audio Abran un editor de texto (ej., Notepad o Wordpad) en sus computadoras y escriban el siguiente código de HTML. Al terminar guarden el documento con el nombre “video.html” incluyendo las comillas. <HTML> <HEAD> <TITLE>Audio</TITLE> </HEAD> <BODY> <EMBED SRC="FurElise.mid" AUTOSTART="true“ LOOP="true" WIDTH="0" HEIGHT="0"> <NOEMBED> <BGSOUND SRC="FurElise.mid"> </NOEMBED> </BODY> </HTML> En el código HTML no importan los espacios.

Identificador Universal de Recursos (URI) Un URI es una porción de texto que indica la dirección o localización de un recurso dentro de una máquina. Esta dirección puede ser absoluta o relativa. Una dirección absoluta muestra todo el camino desde el principio. Ej. "http://bc.inter.edu/facultad/hbruckman/workshops/HTML/DocumentoA.html" Una dirección relativa muestra el camino desde la localización actual. Ej. "./DocumentoA.html" Los URIs son usados mayormente por atributos dentro de los elementos de hipertexto. Algunos de estos atributos son: HREF, SRC, ACTION, LONGDESC, USEMAP, DATA, CLASSID, CODEBASE, PROFILE

¿Qué es el World Wide Web? Es una red de documentos entrelazados y accesados mediante el Internet. Estos documentos están escritos en Lenguaje Marcado de Híper Texto (HTML), y pueden contener texto, imágenes, videos, y otros multimedios. Los documentos están entrelazados unos a otros por medio de enlaces electrónicos o hiperenlaces.

Creando Hiperenlaces Abre un editor de texto y modifica el “hola_mundo.html”: <HTML> <HEAD> <TITLE>Hola Mundo!</TITLE> </HEAD> <BODY> <P><STRONG>Hola Mundo!</STRONG> es la frase que muchos libros de texto escogen como ejemplo para iniciar el aprendizaje de un lenguaje de computadoras nuevo. Si no me crees haz un <EM>clic</EM> sobre el siguiente enlace.</P> <A HREF="http://es.wikipedia.org/wiki/Hola_mundo">Hola Mundo en Wikipedia (en español)</A> </BODY> </HTML> Al terminar guarden este documento como “hola_mundo2.html” incluyendo las comillas.

Creando Hiperenlaces (cont.) Abre un editor de texto y crea los siguientes documentos: <HTML> <HEAD> <TITLE>Documento A</TITLE> </HEAD> <BODY> <H1>Documento A</H1> <A HREF="./DocumentoB.html">Documento B</A> <A HREF="http://www.w3.org/>W3C</A> </BODY> </HTML> <HTML> <HEAD> <TITLE>Documento B</TITLE> </HEAD> <BODY> <H1>Documento B</H1> <A HREF="./DocumentoA.html">Documento A</A> <A HREF="http://www.htmlhelp.com/">WDG</A> </BODY> </HTML> Al terminar guarden este documento con el nombre “DocumentoA.html” incluyendo las comillas. Al terminar guarden este documento con el nombre “DocumentoB.html” incluyendo las comillas.

Errores Más Comunes Muchos errores pueden ocurrir en un código HTML. Entre estos errores las causas más comunes son: No emparejar etiquetas. Ej. <B>… Emparejar etiquetas mal. Ej. <H2>…</H3> No usar comillas para los valores de los atributos. Ej. <FONT FACE=Courier New>… </FONT> No emparejar comillas. Ej. <A HREF=“menu.html>…</A> Emparejar comillas mal. Ej. <P STYLE=“font: “Comics Sans””>…</P> Etiquetas mal escritas o no existentes. Ej. <STROG>…</STRONG> Atributos mal escritos o no existentes. Ej. <TD WIDHT=“100” HEIGHT=“80”>…</TD> Valores ilegales o no definidos para los atributos. Ej. <BODY BGCOLOR=“azul”> Omisión de atributos necesarios. Ej. <IMG WIDTH=“320” HEIGHT=“240’> Otro tipo de causa común lo es insertar elementos inválidos dentro de otros elementos. Elementos de bloque en elementos integrados. Ej. <B><TABLE>…</TABLE></B> Ej. <STRONG><P>…</P></STRONG> Elementos no validos dentro de elementos contenedores. Ej. <TABLE><TD>…</TD></TABLE> Ej. <HEAD><I>…</I></HEAD> Ej. <UL><Q>…</Q></UL> Revise so it shows the incorrect and correct way of doing things. Incorrect: Correct: Incluir el error de cuando uno escribe el simbolo de < o > sin usar < o >

Elementos HTML Elementos de Alto Nivel Sub-elementos de <HEAD> CENTER – Bloque Centralizado HTML – Comienzo del Documento DIV – Contenedor Genérico HEAD – Encabezado del Documento H1 – H6 – Secciones y Sub-secciones BODY – Cuerpo del Documento HR – Línea Horizontal FRAMESET – Varias páginas en una NOSCRIPT – Contenido Alterno P – Párrafo Sub-elementos de <HEAD> PRE – Texto Pre-formateado BASE – URL Base LINK – Descriptor de Relación Listas META – Metadato DL – Listado de Definiciones SCRIPT – Script de Cliente DT – Término STYLE – Hoja de Estilo Integrada DD – Definición TITLE – Título del Documento LI – Artículo de Lista OL – Lista Ordenada Elementos de Bloque UL – Lista Sin Orden ADDRESS – Información de Contacto BLOCKQUOTE – Bloque de Cita

Elementos HTML (cont.) Tablas Elementos Integrados Formularios TABLE – Tabla A - Enlace CAPTION – Capción APPLET – Applet de Java THEAD – Encabezado de Tabla BR – Divisor de Líneas TFOOT – Pie de Tabla FONT – Cambio de Estilo de Letra TBODY – Cuerpo de Tabla IFRAME – Ventana Integrada TR – Fila de Tabla IMG – Imagen Integrada TH – Casilla de Encabezado MAP – Imagen Mapa TD – Casilla de Datos AREA – Región de Mapa Formularios OBJECT – Objeto Integrado FORM – Formulario Q – Cita Corta BUTTON – Botón SPAN – Contenedor Genérico INPUT – Campo de Texto SUB – Subíndice LABEL – Etiqueta de Campo SUP – Superíndice SELECT – Seleccionador de Opción OPTION – Opción de Menú TEXTAREA – Área de Texto

Elementos HTML (cont.) Elementos de Frase Sub-Ventanas SMALL – Texto Achicado ABBR - Abreviación STRIKE – Texto Tachado ACRONYM - Acrónimo TT – Texto Mono-espaciado CITE - Citación U – Texto Subrayado CODE – Código Sub-Ventanas EM – Énfasis KBD – Texto a Ser Escrito FRAMESET – Sub-Ventanas SAMP – Texto Ejemplo FRAME – Sub-Ventana NOFRAMES – Contenido Alterno a Ventanas STRONG – Fuerte Énfasis VAR – Variable Elementos de Estilo de Letra B – Texto en Negritas BIG – Texto Agrandado I – Texto en Itálico S – Texto Tachado

Tipos de Elementos Elementos Estructurales Elementos de Presentación Describen el propósito o estructura semántica del texto contenido entre las etiquetas de apertura y clausura. Ej. <H1>, <P>, <CODE>, <Q>, <TABLE> Elementos de Presentación Describen el estilo o la apariencia del texto contenido entre las etiquetas de apertura y clausura. Deprecados en favor de usar elementos semánticos y/o CSS. Ej. <I>, <B>, <STRIKE>, <FONT>, <CENTER> Elementos de Hipertexto Enlazan recursos externos al contenido del documento. Ej. <A>, <IMG>, <OBJECT>, <LINK>, <STYLE>

Repaso Internet HTML URI Errores Comunes World Wide Web URL Navegador Web HTML Elementos Tipos Atributos URI Errores Comunes

Recursos del Taller Este documento y los diferentes materiales usados en este taller pueden ser encontrados en: http://bc.inter.edu/facultad/hbruckman/ Refiérase a esta pagina Web para conseguir más información acerca del autor y otros talleres.

Referencias W3Schools Un tremendo sitio Web lleno de referencias y tutoriales sobre las diferentes tecnologías del World Wide Web. http://www.w3schools.com World Wide Web Consortium (W3C) Propone, mantiene y recomienda los estándares y especificaciones para lenguajes, protocolos y tecnologías del World Wide Web. Ej. AJAX, CSS, DOM, HTML, HTTP, PNG, SVG, URI, URL, XHTML, XML, MathML, Mobile Web http://www.w3.org Web Design Group (WDG) Promueve la creación de páginas Web que sean compatibles con cualquier navegador, cualquier resolución y que sean creativas e informativas. Ofrece varias referencias y tutoriales para varias tecnologías como HTML y CSS. http://www.htmlhelp.com Wikipedia (en Español) Tiene varios artículos donde se explican a cabalidad diferentes elementos del World Wide Web. http://es.wikipedia.org/wiki/HTML http://es.wikipedia.org/wiki/HTML5