Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010.
25
Diseño de Páginas Web: HTML Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010
-
Upload
salomon-castillo -
Category
Documents
-
view
17 -
download
0
Transcript of Preparado por: Prof. Henry F. Bruckman Vargas Revisión: noviembre 2010.
Diseño de Páginas Web: HTML
Preparado por:Prof. Henry F. Bruckman Vargas
Revisión: noviembre 2010
¿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.
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).
¿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.
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://[email protected]
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.104Ej. 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>
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ágenesAbran 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>
Insertando VideosAbran 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>
Insertando AudioAbran 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>
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>
Elementos HTML Elementos de Alto Nivel
HTML – Comienzo del Documento HEAD – Encabezado del Documento BODY – Cuerpo del Documento FRAMESET – Varias páginas en una
Sub-elementos de <HEAD> BASE – URL Base LINK – Descriptor de Relación META – Metadato SCRIPT – Script de Cliente STYLE – Hoja de Estilo Integrada TITLE – Título del Documento
Elementos de Bloque ADDRESS – Información de Contacto BLOCKQUOTE – Bloque de Cita
CENTER – Bloque Centralizado DIV – Contenedor Genérico H1 – H6 – Secciones y Sub-
secciones HR – Línea Horizontal NOSCRIPT – Contenido Alterno P – Párrafo PRE – Texto Pre-formateado
Listas DL – Listado de Definiciones
DT – Término DD – Definición
LI – Artículo de Lista OL – Lista Ordenada UL – Lista Sin Orden
Elementos HTML (cont.) Tablas
TABLE – Tabla CAPTION – Capción THEAD – Encabezado de Tabla TFOOT – Pie de Tabla TBODY – Cuerpo de Tabla TR – Fila de Tabla
TH – Casilla de Encabezado TD – Casilla de Datos
Formularios FORM – Formulario
BUTTON – Botón INPUT – Campo de Texto LABEL – Etiqueta de Campo SELECT – Seleccionador de Opción
OPTION – Opción de Menú
TEXTAREA – Área de Texto
Elementos Integrados A - Enlace APPLET – Applet de Java BR – Divisor de Líneas FONT – Cambio de Estilo de
Letra IFRAME – Ventana Integrada IMG – Imagen Integrada MAP – Imagen Mapa
AREA – Región de Mapa OBJECT – Objeto Integrado Q – Cita Corta SPAN – Contenedor Genérico SUB – Subíndice SUP – Superíndice
Elementos HTML (cont.) Elementos de Frase
ABBR - Abreviación ACRONYM - Acrónimo CITE - Citación CODE – Código EM – Énfasis KBD – Texto a Ser Escrito SAMP – Texto Ejemplo 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 SMALL – Texto Achicado STRIKE – Texto Tachado TT – Texto Mono-espaciado U – Texto Subrayado
Sub-Ventanas FRAMESET – Sub-Ventanas
FRAME – Sub-Ventana NOFRAMES – Contenido
Alterno a Ventanas
Tipos de Elementos Elementos Estructurales
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>
RepasoInternet
World Wide WebURLNavegador Web
HTMLElementos
Tipos Atributos
URIErrores Comunes
Recursos del TallerEste 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/HTMLhttp://es.wikipedia.org/wiki/HTML5
