Universidad de Cantabria Creación de Páginas WEB con HTML Febrero-2006 Ricardo Sáez Marta Zorrilla Creacion paginas Web con HTML 1
Introducción El servicio WEB utiliza para la transferencia de información cliente-servidor el protocolo HTTP HTML(HyperText Markup Languaje): Lenguaje de definición de Hipertextos compuesto por comandos, marcas o etiquetas ( tags 9 que permiten definir la estructura lógica de documento WEB y establecer sus atrubutos (color de texto, contenidos multimedia, hipertextos, etc.) R: Lenguaje que permite crear una pagina WEB Deriva del estándar SGML: Sistema de descripción de documentos independiente de su tipo (1986, ISO), Charles Golfarb, Ed Mosher, Ray Lorie (IBM) Objeto crear un lenguaje basado en etiquetas para compartir documentos. Tim Berners-Lee y Anders Berglund (CERN) 1989. Creacion paginas Web con HTML 2
Características Es un lenguaje de marcas o tags Evolución: HTML 2.0, 1994 -> actualidad 1996 se crea consorcio W3C (www.w3.org) integrado por distintas empresas del sector para promover crecimiento de la web (recomendaciones, ) Define marcas especiales denominadas enlaces o hiperlenlaces. Permiten al usuario saltar de unas páginas a otras Aparece el término navegación Creacion paginas Web con HTML 3
Nociones Básicas HTML no distingue entre mayúsculas y minúsculas Los clientes Web no respetan el posible formato que se aplique a los documentos (espacios entre líneas o palabras adicionales, tabuladores, etc.), si no que deben ser las propias etiquetas las que controlen este formato HTML permite anidar etiquetas. <B><I>Esto es negrita e itálica</b></i> Existen unas reglas estrictas que indican de qué forma se pueden anidar las etiquetas. En ningún caso se deben solapar las etiquetas. <Eti1><Eti2></Eti1></Eti2> <Eti1><Eti2></Eti2></Eti1> Prohibido Correcto Las etiquetas pueden ser de tres tipos: Pareadas: <NombreEtiqueta>...</NombreEtiqueta> No Pareadas: <NombreEtiqueta> Opcionales: <NombreEtiqueta>...[</NombreEtiqueta>] Creacion paginas Web con HTML 4
Nociones Básicas La mayoría de las etiquetas tienen atributos que representan opciones que modifican su comportamiento por defecto. <NombreEtiqueta Atrib1=... Atrib2=... >[...][</NombreEtiqueta] Corrección sintáctica de documentos HTML tiene un conjunto estricto de reglas, que fijan la sintaxis correcta de un documento. Este conjunto de reglas se basan en tres aspectos fundamentales: Estructura general de un documento. Etiquetas y atributos de las mismas. Posibles formas de combinar (anidar) etiquetas. Creacion paginas Web con HTML 5
Nociones Básicas Los clientes Web están implementados de manera que sean capaces de mostrar documentos sintácticamente incorrectos, siguiendo unas reglas sencillas: q Etiqueta desconocida o mal escrita se ignora q Atributo desconocido o con valor erróneo se ignora q Combinación de etiquetas anidadas no permitida si es posible presenta efecto conjunto en otro caso presenta primera etiqueta procesada Creacion paginas Web con HTML 6
Estructura de un documento <!DOCTYPE HTML PUBLIC > Indica la versión de HTML <HTML> Inicio de página <HEAD> Inicio de cabecera <TITLE> Inicio de título Título de la página </TITLE> Fin de título </HEAD> Fin de cabecera <BODY> Inicio de cuerpo Contenido de la pagina: texto, tablas, imágenes </BODY> Fin de cuerpo </HTML> Fin de página Creacion paginas Web con HTML 7
Ejemplo Página WEB <html> <head> <title> Ejemplo de página</title> </head> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <H3 align=left>ejemplo DE PÁGINA WEB: SISTEMAS INFORMATICOS II</H3> <B><U> Organización de la asignatura y evaluación: </U></B> <br> 4 módulos: Redes (10h), UNIX Linux (10h), Bases de datos (15) y aplicación en la Web (php y html) (25). <br><i><br><br><br> <UL type="disc"> <LI>HTML- PHP (25 horas): de 20 de febrero a 10 de abril </LI> <LI>BASES DE DATOS: de 20 de febrero a 2 de junio </LI> <LI>REDES: 17 de abril a 8 de mayo </LI> <LI>UNIX-LINUX: 15 de mayo a 5 junio</li> </UL> </I> <p><br> <center> <!--msthemeseparator--><p align="center"><img src="http://www.ujaen.es/estilo/_themes/uja2/ablrule.gif" width="615" height="2"></p> <p><font face="verdana"><small><b> Ricardo Saéz.</b> Página mantenida por xxxxx <br> Última actualización: <b> 20 de febrero de 2006. </b> </small></font></p></center> </body> </html> Creacion paginas Web con HTML 8
Ejemplo Página WEB Creacion paginas Web con HTML 9
Conceptos 1. Etiquetas para dar estructura al texto 2. Etiquetas para dar formato al texto 3. Caracteres especiales 4. Listas 5. Enlaces 6. Imágenes 7. Tablas 8. Cambiar apariencia en documentos 9. Formularios 10.Documentos con marcos (FRAMES) (Ver detalles en documentación adjunta ) Creacion paginas Web con HTML 10
Etiquetas para dar estructura al texto Párrafos <P>Esto es un párrafo</p><p>y esto es otro párrafo</p> Creacion paginas Web con HTML 11
Etiquetas para dar estructura al texto Saltos de línea Esto es una línea<br>y esta es otra línea Creacion paginas Web con HTML 12
Etiquetas para dar estructura al texto Titulos <H1>Titulo 1</H1><H2>Titulo 2</H2><H3>Titulo 3 </H3><H4>Titulo 4</H4> <H5>Titulo 5</H5><H6>Titulo 6</H6> Creacion paginas Web con HTML 13
Etiquetas para dar estructura al texto Control de alineación <center>estas dos líneas<br>están centradas </center> <DIV align="right">este texto está centrado a la derecha</div> Creacion paginas Web con HTML 14
Etiquetas para dar estructura al texto Líneas horizontales Este texto lleva una línea horizontal debajo <hr align="left" width="60%"> Creacion paginas Web con HTML 15
Etiquetas para dar estructura al texto Sangrado de bloques Texto normal <blockquote>texto con sangrado</blockquote> <blockquote><blockquote>texto con doble sangrado</blockquote></blockquote> Creacion paginas Web con HTML 16
Etiquetas para dar estructura al texto Textos preformateados Esto es un texto que no está preformateado<br> <pre>esto es un texto semejante preformateado</pre> Creacion paginas Web con HTML 17
Etiquetas para dar estructura al texto Direcciones <address>aquí puede ir la información acerca del autor,...</address> Creacion paginas Web con HTML 18
Etiquetas para dar estructura al texto Comentarios Debajo de esta línea hay otra línea exacta comentada <!--Debajo de esta línea hay otra línea exacta comentada --> Creacion paginas Web con HTML 19
Etiquetas para dar estructura al texto Control de saltos de línea El número de líneas en las que se muestra esta frase depende del ancho de la ventana<br> <nobr>por mucho que se estreche la ventana este texto se mostrará en una sola línea</nobr><br> <nobr>si se estrecha la ventana a partir de AQUI<wbr> el texto se mostrará en otra línea</nobr> Creacion paginas Web con HTML 20
Etiquetas para dar formato al texto Aqui vemos texto formateado:<br> <b>negrita</b> - <i>itálica</i> - <u>subrayado</u> - <tt>máquina escribir</tt><br> <sub>subindice</sub> - <sup>superíndice</sup> - <big>grande</big> - <small>pequeño</small> - <blink>parpadeante</blink> - <s>tachado</s> Creacion paginas Web con HTML 21
Caracteres especiales HTML Carácter HTML Carácter < & Á É Í Ó Ú Ñ < & Á É Í Ó Ú Ñ â > " á é í ó ú ñ > " á é í ó ú ñ ã Creacion paginas Web con HTML 22
Listas Lista numerada: <ol type="a"> <li value="1">primero</li><li value="2">segundo</li> <li value="3">tercero</li></ol> Lista desordenada: <ul type="square"> <li>primer elemento</li><li>segundo elemento</li> <li>tercero elemento</li></ul> Creacion paginas Web con HTML 23
Enlaces Para acceder a la página de la Universidad en una nueva ventana pinchar <a href="http://www.unican.es" target="_blank">aquí</a>.<br> Para acceder al inicio de esta página pinchar <a href="paginahtmlcurso.htm#inicio">aquí</a>. Creacion paginas Web con HTML 24
Imágenes Pinchando en la siguiente imagen se puede acceder a la página de la Universidad de Cantabria<br> <a href="http://www.unican.es" target="_blank"><img src="imagen1.jpg" alt="acceso a la pagina de la Universidad de Cantabria"></a> Creacion paginas Web con HTML 25
Tablas <tableborder=1 bgcolor="yellow"> <caption >Titulo de la tabla</caption> <tr> <th>columna 1</th> <th>columna 2</th> <th>columna 3</th></tr> <tr> <td>f1c1</td> <td>f1c2</td> <td>f1c3</td></tr> <tr> <td>f2c1</td> <td colspan=2>f2c2 y F2C3</td></tr> </table> Creacion paginas Web con HTML 26
marquee HTML Cambio de apariencia <marquee direction="left">este texto se desplaza de derecha a izquierda</marquee> Creacion paginas Web con HTML 27
Formularios Permiten recoger información del usuario para pasársela al servidor. Estructura: <FORM ACTION= Pagina, ejecutable o direccion de correo" method="post o get"> <! Aquí van todos los elementos del formulario. Necesidad de un elemento <INPUT TYPE= submit > que envíe los datos al servidor --> </FORM> Creacion paginas Web con HTML 28
Formularios q Texto corto <INPUT TYPE= text NAME= txttext VALUE=T1 SIZE=12 MAXLEGTH=20> q Texto oculto <INPUT TYPE= password NAME= txtpass VALUE= T2 SIZE=12 MAXLEGTH=20> q Texto largo <TEXTAREA NAME= txtarea ROWS= 4 COLS= 12...>Texto del text area </TEXTAREA> Creacion paginas Web con HTML 29
Formularios q Listas de opciones <SELECT NAME= listname SIZE=6 MULTIPLE> <OPTION SELECTED VALUE= A >Opcion 1 </OPTION> <OPTION VALUE= B >Opcion 2</OPTION> <OPTION VALUE= C >Opcion 3</OPTION>... </SELECT> q Botones de radio <INPUT TYPE="radio" NAME= radiooption" VALUE= A" CHECKED>Opcion 1 <INPUT TYPE="radio" NAME= radiooption" VALUE= B >Opcion 2<br> <INPUT TYPE="radio" NAME= radiooption" VALUE= C">Opcion 3 <INPUT TYPE="radio" NAME= radiooption" VALUE= D">Opcion 4<br> Creacion paginas Web con HTML 30
Formularios q Cajas de validación <INPUT TYPE="checkbox" NAME= chk1"> Caso A <INPUT TYPE="checkbox" NAME= chk2 CHECKED>Caso B q Botón de envío, borrado y normal <INPUT TYPE= submit" NAME= btnenviar VALUE= Enviar > <INPUT TYPE= reset" NAME= btnborrar VALUE= Borrar > <INPUT TYPE= button NAME= btnnormal" VALUE= Botón normal"> q Datos ocultos <INPUT TYPE= hidden NAME= txtoculto" VALUE= valorx"> Creacion paginas Web con HTML 31
Formularios Creacion paginas Web con HTML 32
Frames-Marcos Permiten dividir la ventan del navegador en diferentes áreas independientes que contienen su propio documento HTML. Estructura: <FRAMESET rows[cols]="25%,...,*"> <FRAME NAME="contenidos SRC="Formulario.htm"> <FRAME NAME="indice" SRC="PaginaHTMLCurso.htm">... </FRAMESET> <NOFRAMES> <BODY> Este navegador no admite frames </BODY> </NOFRAMES> Creacion paginas Web con HTML 33
Frames-Marcos Creacion paginas Web con HTML 34
referencias Referencias de interés http:// ://www.w3.org/pub/www/marhup/html-spec: Referencia sobre los estándares HTML http:// ://developer.netscape.com/index.html: Documentación sobre HTML proporcionada por Netscape http:// ://www.aphids.com/susan/imres// : Recursos para imágenes, iconos y gráficos http:// ://moon.inf.uji.es/mfondos.html :Colección de fondos para páginas http:// ://moon.inf.uji.es/icons// :Colección de iconos Creacion paginas Web con HTML 35
Páginas WEB dinámicas HTML Dinámico: técnicas para dotar de dinamismo e interactividad a las páginas web qscripts dinámicos (JavaScript, VBscript)) qapplets de Java qhojas de estilo (CSS) qpáginas soportadas por Bases de Datos (CGI, ASP, PHP ) Creacion paginas Web con HTML 36
Páginas WEB dinámicas Scripts dinámicos Javascript y Vbscript lenguajes orientado a documento basados en objetos Se introducen directamentemente en la página HTML y permiten dar dinamismo a la página desde el lado cliente Ejemplo <HTML><HEAD>... <SCRIPT language="javascript" id="clienteventhandlersjs"> <!-- comentario para ocultar el contenido. function mostrarmensaje (eltexto) { alert(eltexto);} //--> </SCRIPT>...</HEAD> <BODY onload=mostrarmensaje('bienvenido');><form id="frm1" method="post"> <INPUT TYPE="text" NAME="txtValor" onchange="mostrarmensaje(this.value);">...</form>...</body></html> Creacion paginas Web con HTML 37
Páginas WEB dinámicas Applets de Java Applets: módulos que pueden ser insertados en otra aplicación, en nuestro caso un cliente Web, para realizar una función concreta. Se dispone de la capacidad de incorporar módulos (objetos) dinámicamente, a través de una red de comunicaciones. Cualquier sistema que disponga de un runtime de Java es capaz de ejecutar sus aplicaciones <HTML><HEAD>...</HEAD> <BODY> <APPLET CODE=MiApplet.class WIDTH=n HEIGHT=m> <PARAM NAME =NombreParam1 VALUE=valor1> <PARAM NAME =NombreParam2 VALUE=valor2>... </APPLET> </BODY></HTML> Creacion paginas Web con HTML 38
Son Páginas WEB dinámicas Hojas de estilo (*.css css) plantillas que permiten cambiar el formato de presentación de cualquier etiqueta de HTML. Sus características más importantes son: Controlan todos los elementos de la presentación de un documento HTML: márgenes de página, espaciado entre párrafos, tamaños y tipos de letra, color y fondos,... Permiten agrupar varios formatos en nuevas clases de texto, para evitar tener que repetir las mismas etiquetas HTML en diferentes partes del documento. La presentación final de un servicio de información se puede alterar sin más que alterar una hoja de estilo común que compartan todos los documentos. Creacion paginas Web con HTML 39
Páginas WEB dinámicas Hojas de estilo (*.css css) Las Hojas de Estilo pueden ser definidas en un fichero a parte (*.css) o dentro del mismo documento HTML. <HTML> <HEAD>...<LINK href= hojaestilo.css type= text/css rel= stylesheet ></HEAD> <BODY>...</BODY> </HTML> <HTML> <HEAD> <TITLE>...</TITLE> <STYLE TYPE="text/css"> <! BODY { color: #000; background: #FFF; } H1, H2 { margin-left: -6%; color: #900;} P.centrado { text-align : center }.anotaciones { margin-left: 1cm; margin-right: 1cm } --> </STYLE>...</HEAD> <BODY>... Este texto está utilizando el estilo definido en BODY. <P CLASS="centrado">Este párrafo aparecerá centrado.</p> <SPAN CLASS=anotaciones>Este párrafo se presenta con el estilo <I>anotaciones</I> previamente creado.</span>...</body> </HTML> Creacion paginas Web con HTML 40
Páginas WEB dinámicas Soporte de Bases de Datos Utilización de CGI, asp (aspx), PHP, JSP, ColdFusion. Creacion paginas Web con HTML 41