0
1
Introducción a HTMLFUNCIONAMIENTO EN LA WEBLa Web funciona siguiendo el modelo cliente-servidor.Es decir, existe un servid...
Introducción a HTMLEL LENGUAJE HTML   HTML(Hyper Text Markup Language, Lenguaje de Marcas de    Hipertexto).   El hipert...
Introducción a HTMLEL LENGUAJE HTML   Es un lenguaje interpretado.   Consiste en una serie de etiquetas(tags) encerradas...
Introducción a HTML ESTRUCTURA DE UN DOCUMENTO HTML Un documento HTML comienza con la etiqueta <HTML>, y termina con  </H...
COMPONENTES                         Introducción a HTML                     apertura <xxx> cierre </xxx>Etiquetas (tags)  ...
ELEMENTOS DE UNA PÁGINA WEB                                         Contiene las etiquetas TITLE, META; los scripts   HEAD...
ETIQUETAS BÁSICAS                                     Introducción a HTMLLos encabezadosUsualmente un documento tiene una ...
ETIQUETAS BÁSICAS                                               Introducción a HTMLComentarios en HTMLPara crear un coment...
ETIQUETAS BÁSICAS                                                     Introducción a HTMLSaltos de líneaUsar la etiqueta <...
ETIQUETAS BÁSICAS                                                  Introducción a HTML   Al incluir texto en un página se...
FORMATO DE TEXTO                                                    Introducción a HTML   Los distintos tipos de letras q...
COLORES MÁS USADOS                   Introducción a HTMLLos colores empiezan con elsímbolo ’#’. Posteriormente siguen6 núm...
ETIQUETAS BÁSICAS                                           Introducción a HTMLLa etiqueta <blockquote>... </blockquote>Et...
ETIQUETAS BÁSICAS                                      Introducción a HTMLImágenesLas imágenes vinculadas al texto se real...
LISTAS                                                 Introducción a HTML   HTML ofrece varios mecanismos para elaborar ...
LISTAS                                                             Introducción a HTML   La listas ordenadas pueden ser c...
LISTAS                                                    Introducción a HTML   La estructura general de una lista ordena...
LISTAS                                                         Introducción a HTML   La estructura general de una lista a...
LISTAS (EJEMPLOS)                                        Introducción a HTML<html><head><title>Lista ordenada – listaorden...
LISTAS (EJEMPLOS)                                      Introducción a HTML<html><head><title>Lista no ordenada – listanoor...
LISTAS (EJEMPLOS)                                         Introducción a HTML<html><head><title>Lista de Definiciones – li...
LISTAS (EJEMPLOS)                                         Introducción a HTML<html><head><title>Lista anidada – listaanida...
TABLAS                                            Introducción a HTML   Permiten organizan la información (texto, imágene...
TABLAS                                          Introducción a HTML   La etiqueta <TABLE> tiene los siguientes atributos:...
TABLAS                                                         Introducción a HTML   Con los atributos ALIGN y VALIGN, se...
TABLAS (EJEMPLOS)                                         Introducción a HTML<html><head><title>Tabla Simple – tablasimple...
TABLAS (EJEMPLOS)                                       Introducción a HTML<html><head><title>Tabla 2 filas y 3 columnas –...
TABLAS (EJEMPLOS)                                       Introducción a HTML<html><head><title>Tabla 3 filas y 3 columnas –...
TABLAS (EJEMPLOS)                                                       Introducción a HTML<html><head><title>Tabla con ce...
<p><table border="1">  <caption>cups of coffee consumed by each senator</caption>  <tr><th>name<th>cups<th>type of coffee<...
TABLAS (EJEMPLOS)                                           Introducción a HTML<html><head><title>Tabla Agrupada – tablaag...
HIPERENLACES                                                        Introducción a HTML   Un hiperenlace es una conexión ...
HIPERENLACES                                                   Introducción a HTML   Los links se usan para enlazar unas ...
HIPERENLACES                                       Introducción a HTML    Para crear anclas usamos, al igual que para crea...
HIPERENLACES (EJEMPLOS)                                       Introducción a HTML<html><head><title>Hiperenlaces locales –...
HIPERENLACES (EJEMPLOS)                                     Introducción a HTML<html><head><title>Anclas absolutas a otras...
HIPERENLACES (EJEMPLOS)                                        Introducción a HTML<html><head><title>Anclas relativas a ot...
HIPERENLACES (EJEMPLOS)                                          Introducción a HTML<html><head><title>Capitulo 1</title><...
IMÁGENES Y OBJETOS                                  Introducción a HTML   Para incluir gráficos e imágenes se debe utiliz...
IMÁGENES Y OBJETOS                                   Introducción a HTML   Para poder alinear correctamente texto y gráfi...
IMÁGENES Y OBJETOS                                   Introducción a HTML   Los mapas de imágenes permiten especificar reg...
IMÁGENES Y OBJETOS (EJEMPLOS)                                   Introducción a HTML<html><head><title>mapas sensibles – ma...
IMÁGENES Y OBJETOS (EJEMPLOS)                                                Introducción a HTML<html><head><title>Imágene...
Introducción a HTMLResultadodel códigoanterior                          45
MARCOS                                            Introducción a HTML   Los marcos(frames) permiten dividir la ventana de...
MARCOS                                            Introducción a HTML   Los valores que se pueden asignar a los atributos...
MARCOS                                                        Introducción a HTML   El atributo NAME permite asignarle un...
MARCOS                                          Introducción a HTML   Por defecto, si pulsamos sobre un enlace definido e...
MARCOS (EJEMPLOS)                                             Introducción a HTML<html><head><title>Ventana con dos marcos...
MARCOS (EJEMPLOS)                                                 Introducción a HTML<html><head><title>Ejemplo de marco i...
OTRAS ETIQUETAS (<FONT>)                                    Introducción a HTML La etiqueta <FONT> </FONT> es obsoleta en...
OTRAS ETIQUETAS (<FONT>)                        Introducción a HTML   En la siguiente tabla se muestra la equivalencia en...
OTRAS ETIQUETAS (<BODY>)                              Introducción a HTML   La etiqueta <BODY> </BODY> dispone de atribut...
CARACTERES ESPECIALES Y RESERVADOS   Se deben utilizar entidades nombradas o numeradas cuando se necesite un    carácter ...
CARACTERES ESPECIALES Y RESERVADOS              CODIGO       RESULTADO     &lt;              <     &gt;              >    ...
RESUMEN                                             Introducción a HTML   El lenguaje HTML se utiliza para escribir las p...
Upcoming SlideShare
Loading in...5
×

HTML 2011

3,227

Published on

HTML básico...

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,227
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
128
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML 2011"

  1. 1. 1
  2. 2. Introducción a HTMLFUNCIONAMIENTO EN LA WEBLa Web funciona siguiendo el modelo cliente-servidor.Es decir, existe un servidor, que presta el servicio y un 2cliente, que lo recibe.
  3. 3. Introducción a HTMLEL LENGUAJE HTML HTML(Hyper Text Markup Language, Lenguaje de Marcas de Hipertexto). El hipertexto es un texto presentado de forma estructurada con enlaces que conducen a otros documentos o fuentes de información, y con elementos multimedia insertados en él (gráficos, sonido, etc). Se originó a partir del SGML(Standard Generalized Markup Language, Lenguaje Estandarizado y Generalizado de Marcado). En 1989, Tim Berners-Lee y sus asociados en el CERN(Laboratorio Europeo para Partículas Físicas) inventaron una serie de protocolos que dieron origen al HTML y la WWW. Es lenguaje que usan todos los navegadores para presentar 3 información en la World Wide Web (WWW).
  4. 4. Introducción a HTMLEL LENGUAJE HTML Es un lenguaje interpretado. Consiste en una serie de etiquetas(tags) encerradas entre los símbolos <tag>. Casi todas las etiquetas constan de dos marcas, una de apertura y otra de cierre; esta última tiene asignado el mismo nombre que la de apertura, excepto que debe ir precedida del símbolo / . ( por ejemplo, <B> y </B>). Las etiquetas definidas por HTML no son visibles para el usuario, sólo se observa el efecto de las marcas sobre los elementos a los que caracterizan. Las etiquetas pueden incluir una serie de atributos o parámetros, en su mayoría opcionales, que definen las características de los mismos. Por ejemplo la etiqueta <TABLE border=2> 4
  5. 5. Introducción a HTML ESTRUCTURA DE UN DOCUMENTO HTML Un documento HTML comienza con la etiqueta <HTML>, y termina con </HTML>. Dentro del documento hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <HEAD> y</HEAD>, que sirve para definir diversos valores válidos en todo el documento. Y el cuerpo, delimitado por <BODY> y </BODY>, donde reside la información del documento. <HTML> <HEAD> Encabezado <TITLE>Título del documento</TITLE> </HEAD> <BODY> Cuerpo Texto del documento 5 </BODY> </HTML>
  6. 6. COMPONENTES Introducción a HTML apertura <xxx> cierre </xxx>Etiquetas (tags) <P> ……. </P> Modifican la funcionalidad de las tags Atributos <body BGCOLOR...> Definen el valor del atributo Valores <P ALIGN="center">...</P> 6
  7. 7. ELEMENTOS DE UNA PÁGINA WEB Contiene las etiquetas TITLE, META; los scripts HEAD y las hojas de estilo (CSS) Contiene el contenido que ve el usuario en una BODY pagina web: textos, imágenes, tablas, enlaces, formularios. <HTML> <HEAD> <TITLE>Título de la página</TITLE> Aquí van otras etiquetas como las META, scripts y estilos </HEAD> <body> Aquí va lo que se mostrará en pantalla del documento HTML 7 </body> </HTML>
  8. 8. ETIQUETAS BÁSICAS Introducción a HTMLLos encabezadosUsualmente un documento tiene una serie de encabezados o títuloshasta 6 niveles de importancia. Estas etiquetas son: <h1>, <h2>, <h3>,<h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetasproviene de la abreviatura de la palabra inglesa heading que significaencabezado. Seguido de un número del uno al seis, que indica laimportancia del titular siendo el más grande el uno y el menos importanteel seis.<h1>Encabezado 1</h1><h2>Encabezado 2</h2><h3>Encabezado 3</h3><h4>Encabezado 4</h4><h5>Encabezado 5</h5> 8<h6>Encabezado 6</h6>
  9. 9. ETIQUETAS BÁSICAS Introducción a HTMLComentarios en HTMLPara crear un comentario no se usa una etiqueta, aunque es una estructura parecida. Enprimer lugar ponemos una cadena que indica el comienzo del comentario: <!--, esto es,el símbolo menor que, seguido del símbolo fin de exclamación y de dos guiones, todoello sin espacios entre ellos. Todo el texto que le siga será parte de comentario, queterminará cuando insertemos la cadena de fin: --> , dos guiones y el símbolo mayor que.La estructura de un comentario es por tanto:<!--Esto es un comentario-->Ejemplo:<!– Archivo ejemplo.html --><html> <head> <title>Página Vacía</title> <!-- Información de la cabecera de la página --> </head> <body> <!-- Información del cuerpo de la página --> 9 </body></html>
  10. 10. ETIQUETAS BÁSICAS Introducción a HTMLSaltos de líneaUsar la etiqueta <br>. El navegador provoca un salto de línea y siguemostrando el contenido de la página.PárrafoEs un conjunto de frases sobre un mismo asunto. Se usa la etiqueta <p>al comienzo y al final </p>.Ejemplo:<p>Estaba internándose en lo desconocido.</p><p>Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectoseconómicos </p>El atributo ’align’ en la etiqueta <p> permite especificar la alineación del párrafo. Puedetener tres valores: "center", "left" y "right", para obtener un párrafo centrado, alineado a 10la izquierda o alineado a la derecha respectivamente.<P ALIGN = LEFT|CENTER|RIGHT|JUSTIFY></P>
  11. 11. ETIQUETAS BÁSICAS Introducción a HTML Al incluir texto en un página se debe tener presente que los navegadores interpretan un cambio de línea o varios caracteres blancos seguidos como un único carácter blanco. Los navegadores incluyen los cambios de línea de manera automática en función del tamaño de la ventana, teniendo en cuenta que no cortan las palabras. La etiqueta <BR> introduce un salto de línea. La diferencia con <P>, es que esta última genera una separación mayor que <BR>. La etiqueta <HR> traza una línea horizontal para separar bloques de texto. Se puede indicar la alineación con ALIGN(<HR ALIGN=LEFT|CENTER|RIGHT|JUSTIFY>), el espesor o grueso de la línea con SIZE(<HR SIZE=xx>, en donde xx se da en pixeles o puntos de la pantalla), el ancho de la línea con WIDTH(<HR WITDH=xx>, donde xx se expresa en pixeles o en porcentaje del ancho total de la pantalla) y la eliminación del sombreado con NOSHADE(<HR NOSHADE>). <HR WIDTH=20% ALIGN = CENTER SIZE = 5 NOSHADE> La etiqueta <PRE> permite desplegar en la pantalla el texto tal como lo escribimos en el documento, es decir, en la presentación final se respetan los espacios, la justificación 11 y los saltos de línea que se emplearon en el documento original. <PRE> texto formateado con espacios </PRE>
  12. 12. FORMATO DE TEXTO Introducción a HTML Los distintos tipos de letras que podemos obtener son: <B> Negrita </B> <I> itálica</I> <BIG> GRANDE </BIG> <SMALL> pequeña</SMALL> <SUB> SUBÍNDICE </SUB> <SUP> SUPERINDICE </SUP> <U> Subrayado </U>Etiqueta FONT : permite modificar el tamaño, color y tipo de letra<FONT SIZE=4 COLOR="AA0000“ FACE="Arial, Verdana"> .. </FONT> 12
  13. 13. COLORES MÁS USADOS Introducción a HTMLLos colores empiezan con elsímbolo ’#’. Posteriormente siguen6 números (siempre deben serseis) en formato hexadecimal.Los dos primeros corresponden ala cantidad de rojo (RR), lossiguientes a la cantidad de verde(GG) y los siguientes a la cantidadde azul (BB).Es decir la estructura general es:#RRGGBB 13
  14. 14. ETIQUETAS BÁSICAS Introducción a HTMLLa etiqueta <blockquote>... </blockquote>Etiqueta relacionada con el formato de párrafos, que consta de una instrucción deinicio y una de fin y que indica que el párrafo que encierra es un textoparafraseado. Al usar esta etiqueta el navegador mostrará el texto en u nuevopárrafo con márgenes a la izquierda y a la derecha. Mi poema favorito es aquel de Federico García Lorca que reza: <CENTER> <blockquote> Mi corazón, como una sierpe<BR> se ha desprendido de su piel,<BR> y aquí la miro entre mis dedos<BR> llena de heridas y de miel<BR> </blockquote> </CENTER> 14
  15. 15. ETIQUETAS BÁSICAS Introducción a HTMLImágenesLas imágenes vinculadas al texto se realizar mediante la etiqueta <IMG>.En <IMG> debe estar asignado el atributo SRC (Source, fuente) del URL delarchivo de imágenes.Por ejemplo:<IMG SRC="imágenes/imagen1.jpg"><IMG SRC="http://www.nombrepagina.es/imágenes/imagen1.jpg"> 15
  16. 16. LISTAS Introducción a HTML HTML ofrece varios mecanismos para elaborar listas de información, las cuales pueden contener elementos de los siguientes tipos: ordenados, no ordenados y definiciones. Las listas ordenadas muestran un conjunto de elementos o sucesos con un orden estricto. Se crean con los pares de etiquetas <OL> </OL>. Las listas no ordenadas muestran un conjunto de elementos relacionados entre sí, pero sin ningún orden. Se crean con los pares de etiquetas <UL> </UL>. En las dos listas anteriores, los elementos son sangrados(tabulados) automáticamente y deben ser precedidos por la etiqueta <LI> sin etiqueta de cierre. HTML permite anidar listas, lo cual significa que un elemento de una lista puede ser a su vez otra lista. 16
  17. 17. LISTAS Introducción a HTML La listas ordenadas pueden ser controladas mediante el uso de los siguientes atributos : <OL TYPE=x> permite especificar el estilo de numeración como muestra la siguiente tabla: TIPO ESTILO NUMERACION 1 Números 1,2,3... A Letras mayúsculas A,B,C... a Letras minúsculas a,b,c... I Nros romanos mayúsculas I, II, III... i Nros romanos minúsculas i, ii, iii... Con <OL START=n> se especifica el valor inicial de la lista <LI> también usa atributos similares: <LI TYPE=x START=n>. <UL> dispone de un atributo para cambiar la apariencia de la marca que precede a cada elemento de la lista: <UL type=DISC|SQUARE|CIRCLE> Las listas de definiciones constan de dos partes: un término y su definición. Para identificar la lista se utilizan las etiquetas <DL> </DL>. La etiqueta <DT> 17 se utiliza para cada término y <DD> para la parte de la definición. Estas dos últimas etiquetas no llevan etiquetas de cierre.
  18. 18. LISTAS Introducción a HTML La estructura general de una lista ordenada es la siguiente: <OL TYPE=1|A|a|I|i START=n> <LI> Item <LI> Item <LI> Item </OL> La estructura general de una lista no ordenada es la siguiente: <UL TYPE=DISC|SQUARE|CIRCLE> <LI> Item <LI> Item <LI> Item </UL> La estructura general de una lista de definiciones es la siguiente: <DL> <DT> Término <DD> Definición <DT> Término 18 <DD> Definición </DL>
  19. 19. LISTAS Introducción a HTML La estructura general de una lista anidada es la siguiente: <UL> <LI> ... Level one, number one... <OL> <LI> ... Level two, number one... <LI> ... Level two, number two... <OL start="10"> <LI> ... Level three, number one... </OL> <LI> ... Level two, number three... </OL> <LI> ... Level one, number two... </UL> 19
  20. 20. LISTAS (EJEMPLOS) Introducción a HTML<html><head><title>Lista ordenada – listaordenada.htm</title></head><body><h1>MODELO EN CASCADA</h1><ol> <li> Definición del problema. <li> Especificación y análisis de requisitos. <li> Diseño de prototipos. <li> Pruebas. <li> Publicación. <li> Mantenimiento.</ol></body></html> 20
  21. 21. LISTAS (EJEMPLOS) Introducción a HTML<html><head><title>Lista no ordenada – listanoordenada.htm</title></head><body><h3>Documentación requerida para titulación en el IESTP</h3><ul> <li> FUT y Certificado de estudios. <li> FUT y Recibo de pago. <li> Fotocopia de DNI. <li> Fotocopia de Partida de Nacimiento. <li> Carné estudiantil.</ul></body></html> 21
  22. 22. LISTAS (EJEMPLOS) Introducción a HTML<html><head><title>Lista de Definiciones – listadefiniciones.htm</title></head><body><h3>Glosario</h3><dl> <dt>HTML <dd> Hyper Text Markup Language. <dt> WWW <dd> World Wide Web. <dt> URL <dd> Universal Resource Locator.</dl></body></html> 22
  23. 23. LISTAS (EJEMPLOS) Introducción a HTML<html><head><title>Lista anidada – listaanidada.htm</title></head><body><h3>Programas Académicos del IESTP FyM</h3><ul> <li>Tecnología en Sistemas de Información. <ul type=circle> <li> Turno diurno <li> Turno nocturno </ul> <li> Contabilidad <li>Tecnología en Administración Financiera <ul type=square> <li> Turno diurno <li> Turno nocturno </ul></ul></body> 23</html>
  24. 24. TABLAS Introducción a HTML Permiten organizan la información (texto, imágenes, mapas sensibles, hiperenlaces, listas, formularios e incluso otra tabla) en celdas organizadas en filas y columnas. Una tabla se define por las etiquetas de inicio y fin <TABLE> y </TABLE>, respectivamente. El inicio de una fila de la tabla va marcado con la etiqueta <TR>; el uso de </TR> es opcional pero recomendable. Las celdas de una fila pueden ser de dos tipos: de cabecera(<TH>) o de datos(<TD>). Las celdas de cabecera aparecen en negrita y las celdas de datos con letra normal. La etiqueta <CAPTION> </CAPTION> indica el titulo de la tabla. Esta etiqueta si se usa, debe ir inmediatamente después de la etiqueta <TABLE>. La etiqueta <CAPTION> tiene un atributo para indicar la posición del título respecto a la tabla: <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> 24
  25. 25. TABLAS Introducción a HTML La etiqueta <TABLE> tiene los siguientes atributos: <TABLE BORDER=n ALIGN=LEFT|CENTER|RIGHT|JUSTIFY WIDTH=n% CELLPADDING=n CELLSPACING=n > Las etiquetas <TR>, <TD> y <TH> tienen dos atributos comunes: ALIGN(LEFT, CENTER, RIGHT y JUSTIFY) y VALIGN(TOP, MIDDLE, BOTTOM). El primero determina la alineación horizontal de todos los elementos de una fila(<TR>), del contenido de un única celda tipo cabecera(<TH>) o de una única celda de datos(TD). El segundo es similar, pero indica la alineación vertical. Se definen tablas con número de filas o número de columnas que ocupen una celda o más celdas. Para ello usar los atributos COLSPAN(Nro. de columnas que ocupará una celda) y ROWSPAN(Nro. de filas que ocupará una celda). El número de columnas de una tabla viene definido por el número de celdas que tenga la fila con mayor número de éstas. Las filas se pueden agrupar por filas de cabecera(<THEAD>), 25de cuerpo(<TBODY>) o de pie(<TFOOT>) de tabla.
  26. 26. TABLAS Introducción a HTML Con los atributos ALIGN y VALIGN, se puede dar el mismo aspecto a las filas que pertenecen a uno de los tres grupos anteriores. La forma de definir la estructura de una tabla es: <TABLE> <THEAD>Fila o filas del grupo cabecera</THEAD> <TFOOT>Fila o filas del grupo del pie de la tabla</TFOOT> <TBODY>Fila o filas del grupo del cuerpo de la tabla</TBODY> </TABLE> Para definir el número y tipo o agrupar las columnas de una tabla, HTML tiene las etiquetas <COL> y <COLGROUP>. Con estas etiquetas se puede definir a priori el número de columnas que tendrá una tabla. Además, si se desea, las columnas se pueden agrupar para darles un aspecto común. 26
  27. 27. TABLAS (EJEMPLOS) Introducción a HTML<html><head><title>Tabla Simple – tablasimple.htm</title></head><body> <table border width=60% align=center> <caption align=top><h3> Horario de Atención al Público</h3></caption> <tr align=center><th><th>Lunes<th>Martes<th>Miercoles<th>Jueves<th>Viernes</tr> <tr align=center><th>Mañana<td>10:00 – 2:00<td>----<td>10:00-2:00 <td>10:00-5:00<td>10:00-2:00</tr> <tr align=center><th>Tarde<td>5:00-8:00<td>---<td>5:00-8:00<td>---<td>---</tr> </table></body></html> 27
  28. 28. TABLAS (EJEMPLOS) Introducción a HTML<html><head><title>Tabla 2 filas y 3 columnas – tabla2x3.htm</title></head><body> <table border=5 align=center> <tr> <td>1,1</td><td>1,2</td><td>1,3</td> </tr> <tr><td>2,1</td><td>2,2</td><td>2,3</td> </tr> </table></body></html> 28
  29. 29. TABLAS (EJEMPLOS) Introducción a HTML<html><head><title>Tabla 3 filas y 3 columnas – tabla3x3.htm</title></head><body><table border=1> <tr><td colspan=2>1,1 y 1,2</td><td>1,3</td> </tr> <tr><td rowspan=2>2,1 y 3,1</td><td>2,2</td><td>2,3</td> </tr> <tr><td>3,2</td><td>3,3</td> </tr></table></body></html> 29
  30. 30. TABLAS (EJEMPLOS) Introducción a HTML<html><head><title>Tabla con celdas combinadas – tablacombinada.htm</title></head><body><table> <caption>cups of coffee consumed by each senator</caption> <tr> <th>name</th> <th>cups</th> <th>type of coffee</th> <th>sugar?</th> <tr> <td>t. sexton</td> <td>10</td> <td>espresso</td> <td>no</td><tr> <td>j. dinnen</td> <td>5</td> <td>decaf</td> 30 <td>yes</td></table>
  31. 31. <p><table border="1"> <caption>cups of coffee consumed by each senator</caption> <tr><th>name<th>cups<th>type of coffee<th>sugar? <tr><td>t. sexton<td>10<td>espresso<td>no <tr><td>j. dinnen<td>5<td>decaf<td>yes <tr><td>a. soria<td colspan="3"><em>not available</em></table><p><table border="1"> <tr><td>1 <td rowspan="2">2 <td>3 <tr><td>4 <td>6 <tr><td>7 <td>8 <td>9</table><p><table border="1"> <tr><td>1 <td>2 <td>3 <tr><td colspan="2">4 <td>6 <tr><td>7 <td>8 <td>9</table> 31</body></html>
  32. 32. TABLAS (EJEMPLOS) Introducción a HTML<html><head><title>Tabla Agrupada – tablaagrupada.htm</title></head><body><table width=100% cellpadding=5 cellspacing=10 rules=groups> <caption>Guía de teléfono. Letra:<b>S</b></caption> <colgroup span=2 align=left width=40%></colgroup> <col align=right width=20%> <thead align=left> <tr><th>Apellidos <th>Nombre <th> Teléfono </thead> <tbody align=left> <tr><td>Sánchez Alipio<td>María <td> 6664506 <tr><td>Sanz Rodríguez<td>Ana <td> 6564328 <tr><td>Serena González <td>Ruben <td> 6235421 <tr><td>Soriano Pascual <td>Carlos <td>6123548 <tr><td<Soro Sarao <td>Patricia <td>6321456 <tr><td>Soto del Rio <td>Pedro <td>6987452 </tbody> 32</table></body></html>
  33. 33. HIPERENLACES Introducción a HTML Un hiperenlace es una conexión de un recurso Web (imágenes, sonidos, videos, documentos HTML) a otro. Normalmente, los hiperenlaces aparecen subrayados y con un color distinto al resto del texto. La etiqueta que utiliza HTML para definir un hiperenlace es <A> </A>(Ancla o anchor). Como elementos utilizados como hiperenlaces están el texto y las imágenes. Para incluir un hiperenlace de una página a otra se utiliza el siguiente formato: <A HREF=“path”> Texto </A> El “path” es la dirección absoluta o relativa del recurso Web. Los enlaces pueden clasificarse en dos tipos: Internos o locales y Externos Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web y que están en el mismo servidor WWW, (en el mismo ordenador). Por esta razón sólo será necesario indicar el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es: /hobbies/index.html Los enlaces externos permiten saltar desde una página hasta otra de cualquier lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo: http://www.otroservidor.com/hobbies/index.html 33
  34. 34. HIPERENLACES Introducción a HTML Los links se usan para enlazar unas páginas con otras también usando imágenes, sonido, vídeo o cualquier tipo de fichero. En la siguiente línea HTML, la frase "IESTP Vigil" representa un hiperenlace al ordenador de nuestra Institución:<A HREF=“http://www.iestpvigil.edu.pe" > Instituto Vigil de Tacna </A>. También podemos colocar varios enlaces en una sola frase, constituyendo lo que se ha dado en llamar hipertexto. Por ejemplo: El <A HREF=" http://aries.dif.um.es">laboratorio de redes</A> se encuentra en el sótano de la <A HREF=" http://www.um.es/~fac_info "> Facultad de Informática </A> de la <A HREF=" http://www.um.es ">Universidad de Murcia</A>. A menudo se utilizan imágenes como hiperenlaces. Para ello es necesario anidar <IMG> y <A> descritos anteriormente. Si la URL de un documento que se encuentra en el mismo ordenador y el mismo directorio que el documento que se quiere activar. En este caso es suficiente con indicar el nombre del archivo. <A HREF="http://www.um.es"> 34 <IMG SRC="logounimurcia.jpg"> </A>
  35. 35. HIPERENLACES Introducción a HTML Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo no debe confundirse que las anclas sólo son marcas y son invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún texto activo. A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo: <a name="nombreAncla">Comienzo</a> La forma de definir un hiperenlace a un punto del mismo documento es: <A HREF=“#nombreancla”>Texto del enlace local </A> <A NAME=“nombreancla”> Texto del destino </A> Los nombres asignados como “nombreancla” deben ser únicos dentro del documento y ser escritos exactamente igual(case-sensitive). Por ejemplo: S es el nombre del ancla <a href="#S">S 35 </a>
  36. 36. HIPERENLACES (EJEMPLOS) Introducción a HTML<html><head><title>Hiperenlaces locales – anclaslocales.htm</title></head><body> <p><h2 align=center><a name=“principio”>INDICE</A></h2> <ul> <li><a href=“#capitulo1”>Capítulo 1</a> <li><a href=“#capitulo2”>Capítulo 2</a> </ul> <p><h3><a name=“capitulo1”>Capítulo 1</a> <h5><a href=“#principio”>Volver al principio del documento</a></h5> <h3><a name=“capitulo2”>Capítulo 2 </a></h3> <h5><a href=“#principio”>Volver al principio del documento</a></h5></body></html> 36
  37. 37. HIPERENLACES (EJEMPLOS) Introducción a HTML<html><head><title>Anclas absolutas a otras páginas - anclasabsolutas.htm </title></head><body> <p><h2 align=center>INDICE</h2> <ul> <li><a href=“http://www.democompany.com/products/buddy.htm>Link1</a> <li><a href=“http://www.webdesignref.com”>Link 2</a> </ul></body></html> 37
  38. 38. HIPERENLACES (EJEMPLOS) Introducción a HTML<html><head><title>Anclas relativas a otras páginas – anclasrelativas.htm</title></head><body> <p><h2 align=center>INDICE</h2> <ul> <li><a href=“capitulo1.htm”>Capitulo 1</a> <li><a href=“capitulo2.htm”>Capitulo 2</a> </ul></body></html> 38
  39. 39. HIPERENLACES (EJEMPLOS) Introducción a HTML<html><head><title>Capitulo 1</title></head><body> <p><h2 align=center>Capitulo 1</h2> <a href=“anclasrelativas.htm”>Volver a la página principal</a></body></html><html><head><title>Capitulo 2</title></head><body> <p><h2 align=center>Capitulo 2</h2> <a href=“anclasrelativas.htm”>Volver a la página principal</a></body></html> 39
  40. 40. IMÁGENES Y OBJETOS Introducción a HTML Para incluir gráficos e imágenes se debe utilizar la etiqueta <IMG> de la siguiente manera: <IMG SRC=“archivografico" ALT="descripcion"> Donde SRC=“archivografico” indica la ubicación, nombre del archivo y formato del gráfico(gif, jpg, png). El atributo ALT=“descripción” especifica el texto que se mostrará en aquellos browsers que no sean capaces de mostrarlos o en el supuesto que el usuario los haya desactivado. Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura(HEIGHT) y la anchura(WIDTH) del gráfico en pixels. <IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31> Por defecto los browsers le colocaran un borde al gráfico para indicar que es un hiperenlace. Por medio del atributo BORDER podremos alterar el grosor de ese borde o eliminarlo colocándolo a cero: 40 <IMG SRC=“dog.gif” BORDER=12>
  41. 41. IMÁGENES Y OBJETOS Introducción a HTML Para poder alinear correctamente texto y gráficos se debe utilizar el atributo ALIGN de la siguiente manera: <IMG SRC=“archivografico” ALIGN=LEFT|RIGHT|TOP|MIDDLE|BOTTOM>Texto Las imágenes también se pueden utilizar para crear hiperenlaces gráficos a otros documentos. Todo lo que se requiere hacer es que la etiqueta <IMG> aparezca entre las etiquetas <A> </A> como se muestra: <A HREF="http://www.netscape.com"> <IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31></A> Para controlar la cantidad de espacio en blanco alrededor de las imágenes se utilizan las siguientes etiquetas: VSPACE (espacio en blanco por arriba o debajo de la imagen) y HSPACE (espacio en blanco a la izquierda o derecha de la imagen). <IMG SRC=“dog1.gif” ALIGN=LEFT HSPACE=50 VSPACE=10> 41
  42. 42. IMÁGENES Y OBJETOS Introducción a HTML Los mapas de imágenes permiten especificar regiones y asignarle una acción a cada una de ellas (por ejemplo, recuperar un documento, correr un programa, etc). Cuando la región es activada por el usuario la acción es ejecutada. Tradicionalmente han existido dos tipos de mapas de imágenes: los gestionados por el cliente (browser) y los gestionados por el servidor. Para utilizar los mapas de imágenes gestionados por el cliente se requieren dos cosas: declarar el mapa y asignarlo a una imagen. Para declarar el mapa: <MAP NAME=“nombremapa”> <AREA SHAPE=DEFAULT|RECT|CIRCLE|POLY COORDS=“n,n,...” HREF=“URL” NOHREF ALT=“texto”> El número y significado de las coordenadas especificadas en COORDS dependerá de la forma del área: RECT(left-x, top-y, right-x, bottom-y), CIRCLE(center-x, center-y, radius) y POLY(x1, y1, x2, y2, ..., xN, yn). Para asignar un mapa a una imagen: 42 <IMG SRC=... USEMAP="#nombremapa">
  43. 43. IMÁGENES Y OBJETOS (EJEMPLOS) Introducción a HTML<html><head><title>mapas sensibles – mapas.htm</title><body><map name="navegadores"> <area shape=rect coords="0,0,24,31" href="http://www.google.com" alt=“google"> <area shape=rect coords="26,0,53,31" href="http://www.hotmail.com” alt=“hotmail"> <area shape=default nohref alt="nada"> </map> <img src=“logo.jpg" width=53 height=31 border=0 usemap="#navegadores"></body></html> 43
  44. 44. IMÁGENES Y OBJETOS (EJEMPLOS) Introducción a HTML<html><head><title>Imágenes – imagenes.htm</title></head><body><p>La siguiente es un vínculo como imagen:<a href="http://www.google.com"><img src="graficos/internet.jpg" alt="google" width=88height=61></a><h3>Alineación del texto y gráficos</h3><p><img align=top src="graficos/tacna11.jpg" alt="Tacna" width=88 height=61>Este es el texto conALIGN=TOP<p><img align=middle src="graficos/est3.jpg" alt="youtube" width=88 height=61>Este es el texto conALIGN=MIDDLE<p><img align=bottom src="graficos/tacna21.jpg" alt="Tacna" width=88 height=61>Este es el texto conALIGN=BOTTOM<p><br><img align=right src="graficos/tacna22.jpg" alt="Tacna" width=88 height=61>Este es el texto conALIGN=RIGHT<p><br><img align=left src="graficos/tacna23.jpg" alt="Tacna" width=88 height=61>Este es el texto conALIGN=LEFT<p><br><img align=middle src="graficos/ISTFYM-logo.JPG" alt="Finney y Miller" width=88 height=61 44hspace=50 vspace=50>Este es el texto con HSPACE=50 VSPACE=50</body></html>
  45. 45. Introducción a HTMLResultadodel códigoanterior 45
  46. 46. MARCOS Introducción a HTML Los marcos(frames) permiten dividir la ventana del navegador en varias partes, de forma que en cada una de ellas puede mostrarse una página HTML distinta. Esto permite presentar documentos en múltiples vistas, las cuales pueden ser ventanas independientes o subventanas. En una página que contiene marcos se sustituye la etiqueta <BODY> por la etiqueta <FRAMESET>. Esta página se denomina documento de definición de marcos. En cada <FRAMESET> se divide la ventana actual(sea la general o un marco) en varias ventanas definidas por los atributos COLS ó ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno. El atributo ROWS indica el número de filas en las que se divide la ventana del navegador y tamaño de las mismas y COLS para las columnas. Un ejemplo del uso de estos atributos es el siguiente: <FRAMESET ROWS=“30%,70%”, COLS=“50%,50%”> 46
  47. 47. MARCOS Introducción a HTML Los valores que se pueden asignar a los atributos ROWS y COLS pueden ser de tres tipos: relativos al tamaño total de la ventana del navegador(n%), absolutos(píxeles) o con * . Este último caso indica que la fila o la columna en cuestión ocupará el resto de la ventana del navegador. Si hay más de un * seguido en ROWS o COLS, el tamaño restante de la ventana se divide en partes iguales. El ejemplo anterior es equivale a: <FRAMESET ROWS=“30%,70%”, COLS=“*,*”> ó <FRAMESET ROWS=“30%,*”, COLS=“*,50%”> Los marcos son creados de izquierda a derecha para las columnas y de arriba hacia abajo para las filas. Cuando ambos atributos son especificados, las vistas son creadas de izquierda a derecha para la primera fila, de izquierda a derecha para la segunda fila, etc. La etiqueta <FRAME> permite indicar que página HTML debe cargarse en cada uno de los marcos. Su estructura general es la siguiente: <FRAME NAME=“marco1” SRC=“URL” SCROLLING=“AUTO|YES|NO” NORESIZE 47 FRAMEBORDER=1|0 MARGINWIDTH=n MARGINHEIGHT=n >
  48. 48. MARCOS Introducción a HTML El atributo NAME permite asignarle un nombre a un marco; SRC indica la dirección del documento HTML que ocupará el marco; SCROLLING permite indicar si se colocan o no las barras de desplazamiento al marco. NORESIZE indica que no se puede cambiar el tamaño del marco; FRAMEBORDER indicara si el marco lleva o no un borde; MARGINWIDTH permite cambiar los márgenes horizontales de un marco(se especifica en píxeles) y MARGINHEIGHT permite cambiar los márgenes verticales. Los marcos se pueden anidar, es decir, dentro de un <FRAMESET> puede aparecer otro <FRAMESET>. <FRAMESET cols=“33%,33%,34%”> ...contenido del primer marco <FRAMESET rows=“40%, 50%”> ...contenido del segundo marco, primera fila ...contenido del segundo marco, segunda fila </FRAMESET> 48 ...contenido del tercer marco </FRAMESET>
  49. 49. MARCOS Introducción a HTML Por defecto, si pulsamos sobre un enlace definido en un marco, la nueva página se abrirá en ese mismo marco. Para indicar en que marco se abrirá un hiperenlace se utiliza el atributo TARGET de las etiquetas <A>, <AREA> y <FORM>. Una aplicación de esto es: <A HREF=“pagina.html” TARGET=“principal”> Existen cuatro valores especiales que se pueden asignar al atributo TARGET: _top (elimina todos los marcos existentes y muestra en la ventana original), _blank (muestra la nueva página en una ventana nueva del navegador), _self (muestra la nueva página en el mismo marco desde el que se le invoca y _parent (para que se cargue en el marco padre (<FRAMESET>) que contiene el marco desde el que se le invoca. Para especificar el contenido de aquellos browsers que no soportan marcos se utilizan las etiquetas <NOFRAMES> </NOFRAMES>. Este etiqueta puede ser usada al final de la sección <FRAMESET> del documento. 49
  50. 50. MARCOS (EJEMPLOS) Introducción a HTML<html><head><title>Ventana con dos marcos – 2marcos.htm</title></head><frameset rows="50%,50%"> <frame src=“listas1.html"> <frame src=“listas2.html"></frameset></html><html><head><title>Ventana con 6 marcos</title></head><frameset rows="30%,70%", cols="33%,34%,33%"> <frame src="mapas.htm"> <frame src="listadefiniciones.htm"> <frame src="listaordenada.htm"> <frame src="listanoordenada.htm"> <frame src="tabla2x3.htm"> <frame src="tablasimple.htm“></frameset> 50</html>
  51. 51. MARCOS (EJEMPLOS) Introducción a HTML<html><head><title>Ejemplo de marco interactivo – marcointeractivo.htm</title></head><body>En esta pantalla aparecerá un marco interactivo con la informacióncontenida en losmasvendidos.htm. En caso de no verlo, podráacceder a la información de esta página a través del enlace.<p><iframe src="losmasvendidos.htm" width=60% height=200 scrolling="auto" align="right" frameborder=1>Para ver los más vendidos, pulse aquí <a href="losmasvendidos.htm">Los mas vendidos</a></iframe><hr> Este texto se ha insertado después de la declaración del marco interactivo.</body></html> 51
  52. 52. OTRAS ETIQUETAS (<FONT>) Introducción a HTML La etiqueta <FONT> </FONT> es obsoleta en HTML ; en vez de ella se utilizan las etiquetas CSS. La etiqueta <FONT> dispone de cuatro atributos básicos: FACE, SIZE, COLOR y STYLE. FACE indica el nombre de fuente o de la familia de fuentes; SIZE define el tamaño de fuente mediante un número de 1 a 7 y COLOR especifica el color de texto en un valor hexadecimal o un nombre válido de color. Los siguientes son ejemplos válidos del uso de <FONT>: <FONT FACE=“Arial”>Esto es importante</FONT> <FONT FACE=“Arial, Helvetica, Sans serif”>Este texto se mostrará en una fuente distinta</FONT> El atributo FACE permite especificar como tamaño de la fuente un número entre 1 a 7; si a este número se le antepone los signos + ó - , permite aumentar o disminuir el tamaño el número especificado de veces. Los siguientes son ejemplos válidos del uso de este atributo: <font size=1>size=1</font> <font size=-4>size=-4</font> <font size=+2>size=+2</font> Para este tipo de empleo del atributo SIZE, podrá utilizar valores que pertenezcan 52 los a rangos +1 a +6 y –1 a -6. Por ejemplo, no es posible especificar <FONT SIZE=“+10”> porque sólo existen siete tamaños.
  53. 53. OTRAS ETIQUETAS (<FONT>) Introducción a HTML En la siguiente tabla se muestra la equivalencia entre los valores asignados al atributo SIZE y el tamaño en puntos: <FONT SIZE=n> TAMAÑO NORMAL EN PUNTOS 1 8 2 10 3 12 4 14 5 18 6 24 7 36 Algunos de valores y nombres válidos para el COLOR son los siguientes: black(#000000), silver(#C0C0C0), gray(#808080), white(#FFFFFF), maroon(#800000), red(#FF0000), purple(#800080), fucsia(#FF00FF), green(#008000), lime(#00FF00), olive(#808000), yellow(#FFFF00), navy(#000080), blue(#0000FF), teal(#008080), aqua(#00FFFF). Los siguientes son ejemplos válidos del uso de este atributo: 53 <FONT COLOR=“red”>Esto es importante</FONT> <FONT COLOR=“#FF0000”>Esto es importante</FONT>
  54. 54. OTRAS ETIQUETAS (<BODY>) Introducción a HTML La etiqueta <BODY> </BODY> dispone de atributos que permiten modificar el color en un página Web: BGCOLOR para definir el color de fondo en toda la página; BACKGROUND para indicar una imagen de fondo para una página Web; TEXT para definir el color predeterminado del texto contenido en la página; LINK para definir el color predeterminado de los hiperenlaces no visitados; ALINK define el color del vínculo cuando se está haciendo clic sobre él y VLINK define el color de un vínculo después de haber sido visitado. A continuación se muestra un ejemplos válidos del uso de estos atributos: <body bgcolor=“#000000” text=“white” link=“#000099” alink=“#FF0000” vlink=“#FF0000”> <body background=“imágenes/background.gif”> 54
  55. 55. CARACTERES ESPECIALES Y RESERVADOS Se deben utilizar entidades nombradas o numeradas cuando se necesite un carácter especial o reservado en el texto del documento. Las entidades numeradas se especifican encerrando un código entre los signos &# y ; .(Por ejemplo, ½). Las entidades nombradas son sinónimos para poder recordar con mayor facilidad estos caracteres. Así, por ejemplo, ½ también se puede escribir como &frac12;. CODIGO RESULTADO &aacute;, &Aacute;, á, Á, é, É, í, Í, ó, Ó, ú, Ú &eacute;, &Eacute;,... &iquest; ¿ &iexcl; ¡ &ordm; º &ordf; ª &copy; © &reg; ® &nbsp; 55 (espacio en blanco que no puede ser usado para saltar de línea) &trade; ™
  56. 56. CARACTERES ESPECIALES Y RESERVADOS CODIGO RESULTADO &lt; < &gt; > &amp; & &quot; “ 56
  57. 57. RESUMEN Introducción a HTML El lenguaje HTML se utiliza para escribir las páginas Web. Está basado en el concepto de hipertexto(texto presentando de forma estructurada y agradable, con enlaces que conducen a otros documentos o recursos Web(imágenes, audio, video...otros). Los documentos HTML se escriben en texto plano(ASCII) y consisten en un conjunto de etiquetas(tags) encerradas entre los símbolos < y >.(ejemplo, <HTML></HTML>). En un documento HTML se destacan dos secciones: el encabezado(<HEAD></HEAD>) y el cuerpo(<BODY></BODY>). Entre los principales elementos que se pueden encontrar en un documento HTML están: formato de texto, imágenes y mapas sensibles, los hiperenlaces, listas, tablas, marcos entre otros, para los cuales existen las etiquetas respectivas. 57
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×