Html: qué cosas decimos

UD7 Personal.notebook

August 31, 2013

Tema 7

HTML

Sonia Lafuente Martínez

1. Índice 1. Introducción 2. Arpanet 3. La Web 4. Lenguaje HTML 5. Gramática y vocabulario de HTML 6. Elementos de HTML (Vocabulario) 7. Estructura básica 8. Normas de escritura 9. Etiquetas 10. Gramática 11. Enlaces 12. Listas 13. Imágenes 14. Tablas 15. Formularios 16. Ejercicio Completo 17. Editor Notepad++

1

UD7 Personal.notebook

August 31, 2013

1. Introducción Veamos el vídeo "Historia de Internet" :

1. Introducción Todos estamos de acuerdo en : Los aspectos negativos de Internet no superan a los positivos, ni están igualados, sino que claramente los aspectos positivos de internet superan a los negativos ya que internet ha supuesto un gran avance para la humanidad.

2

UD7 Personal.notebook

August 31, 2013

1. Introducción ¿Quién fue ese hombre que inventó Internet? No se puede señalar a una sóla persona como el inventor o padre de Internet, sino que fue el trabajo de muchos durante muchos años lo que desembocó en el nacimiento de Internet, la red de redes, la madre de todas las redes, la red de comunicaciones de la que disponemos hoy.

2. ARPANET La red nació a partir de una red de ordenadores llamada ARPANET. El nacimiento de Internet se sitúa en el año 1969, el mismo año que el hombre llegó a la luna. Al igual que hay gente que duda que el hombre llegara a la luna también hay dudas de quién inventó realmente Internet

3

UD7 Personal.notebook

August 31, 2013

2. ARPANET El 29 de Octubre de 1969 a las 22:30 se realizó la primera transmisión entre dos nodos de la red ARPANET. Por eso fue la red precursora de la actual Internet.

La terminal que usaban no tenia pantalla, se empleaba una impresora. La primera conexión en ARPANET fue así: Escribimos la L y preguntamos: "¿Veis la L?" Su respuesta fue "Sí, vemos la L" Escribimos la O y preguntamos: "¿Veis la O?" Su respuesta fue "Sí, vemos la O" Luego escribimos la G y el sistema se colgó.

ARPANET fue creciendo y creciendo lentamente por todos los EEUU

3. La web Tim Berners Lee es considerado el padre de la Web. ¿Por qué?

Porque desarrolló las tres tecnologías fundamentales de la Web: • HTML (Lenguaje de marcado o etiquetado) que se utiliza para crear o escribir los documentos o páginas web.

• URL(Localizador de recursos uniforme) sistema de localización de los documentos web

La que más vamos a estudiar va a ser HTML

• HTTP Lenguaje con el que se comunica el navegador y el servidor web y que se emplea para transmitir los documentos web por internet

4

UD7 Personal.notebook

August 31, 2013

3. La web Son conceptos distintos: • Internet es la conexión de múltiples redes de ordenadores.

Sobre esas redes de ordenadores se ejecutan múltiples servicios como el correo electrónico, la transmisión de ficheros o el chat: • • • • •

SMPT POP FTP IRC La Web es un servicio más, el más popular.

3. La web Nacimiento de la web: Noviembre de 1990 Tim Berners Lee publicó su primer sitio web y realizó la primera conexión desde un navegador mientras trabajaba en el CERN (El laboratorio Europeo de investigación en física de partículas

¿Por qué nació la web en el CERN? Trabajaban y trabajan miles de científicos provenientes de todo el mundo. Estos científicos generaban miles de informes, documentos, diseños que estaban distribuidos por todo el mundo. Desgraciadamente todos estos científicos tenian un grabe problema para compartir todos la información que generaba ya que se encontraba distribuida en miles de ordenadores de los que hacia falta conocer su: dirección IP, protocolo de comunicación, nombre de usuario y contraseña, aplicación cliente específica. para realizar la

conexión

5

UD7 Personal.notebook

August 31, 2013

3. La web Aquí es donde aparece Tim berners Lee como ingeniero de software. Elaboró una propuesta y le llamó "Mesh" que en castellano significa malla, luego le cambió el nombre a "worldwideweb" y finalmente el actual "World Wide Web". Tuvo que:

3. La web Hoy en día la primera página web ya no existe, se perdió pero podemos encontrar esta página web"http://info.cern.ch" de homenaje donde se indica que aquí estuvo el primer servidor web de la historia y también podemos encontrar un enlace a una copia de esa primera página

Su nacimiento pasó bastante desapercibido

6

UD7 Personal.notebook

August 31, 2013

4. Lenguaje HTML Con el lenguaje HTML se describe la estructura y el contenido que puede ser imágenes, texto, vídeos y otros componentes de las páginas web. Con HTML no se define la presentación visual de las páginas web En la actualidad el HTML esta desarrollado por:

W3C "World Wide Web Consortion" El organismo internacional que vela por el correcto desarrollo de la web.

4. Lenguaje HTML

En la actualidad se esta desarrollando la versión HTML 5, que se espera que alcance el rango de recomendación oficial en el año 2014

Te conviene conocerlas todas y sus diferencias: w3schools.com

7

UD7 Personal.notebook

August 31, 2013

5. HTML: Vocabulario y gramática El lenguaje HTML es un lenguaje y como tal tiene su vocabulario (palabras con sus significados ) y su gramática (como podemos combinar sus palabras para formar textos complejos) ¿Cómo se aprende este lenguaje?

6. HTML: Elementos

• • • •

El elemento es el componente básico de una página web.

Una página web esta formada por un conjunto de elementos escritos en un orden concreto.

Un elemento se compone de una etiqueta inicial o de apertura y una etiqueta final o de cierre.

La etiqueta final se define con una barra inclinada y el nombre de la etiqueta final.

En este ejemplo la etiqueta se llama p y define un párrafo de texto de la página.

• La etiqueta inicial puede llevar atributos pero la final nunca lleva.

• Los atributos pueden llevar un valor.

• Los elementos pueden tener contenido que es todo lo que se escriba entre la etiqueta inicial y final.

Puede estar formado por otras etiquetas o por texto

8

UD7 Personal.notebook

August 31, 2013

6. HTML: Elementos Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros.

Ver código fuente

7. HTML: Estructura básica Las estructura básica de una página web: • La etiqueta html es la principal, sólo puede existir una y toda la página web debe escribirse entre la etiqueta inicial y final de HTML. • La etiqueta head define la primera parte de una página web, la cabecera. No aparece representado en la página web cuando se visualiza la página web. Se emplea para definir los metadatos, información sobre la página o instrucciones sobre cómo procesar la página web. Dentro de la cabecera se puede escribir la etiqueta title, que es obligatoria, sólo puede haber una y se emplea para definir el título de la página.

• La etiqueta body, define la segunda parte de una página web. Lo que se escribe en el cuerpo si que aparece representado en la página web cuando se visualiza

9

UD7 Personal.notebook

August 31, 2013

7. HTML: Estructura básica <html> <head> <title>El primer documento HTML</title> </head> <body> <p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p> </body> </html>

Si quieres probar este primer ejemplo, debes hacer lo siguiente: 1. Vamos a empezar a hacer páginas web con el bloc de notas.

2. Copia el código HTML mostrado anteriormente.

3. Guarda el archivo con el nombre "pagina1.html" y guardaremos como "todos los archivos" para que respete el formato .html. Codificación UTF8

7. HTML: Estructura básica Se puede escribir de las dos maneras posibles:

10

UD7 Personal.notebook

August 31, 2013

8. HTML: Normas para escribir HTML NORMAS A TENER EN CUENTA AL ESCRIBIR HTML: Cuando escribo la etiqueta de inicio, escribo automáticamente la etiqueta de cierre.

1.­ Escribimos la etiqueta <html> </html> 2.­ Escribimos la etiqueta <head></head> 3.­ Escribimos dentro del <head> la etiqueta <title></title> que es el título de la página web.

4.­ Escribimos el <body></body>: aquí dentro podemos emplear los h1, párrafos...

5.­ Separar con el tabulador.

6.­ Poner las distintas etiquetas en líneas distintas Abrir la página web con distintos navegadores.

9. HTML: Etiquetas El lenguaje HTML esta formado por etiquetas que se escriben encerradas por los corchetes angulares < y >

El número de etiquetas ha ido aumentando y en la actualidad HTML5 esta formado por más de 100 etiquetas

11

UD7 Personal.notebook

August 31, 2013

9. HTML: Etiquetas importantes h1, h2, h3, h4, h5, h6: se emplean para definir los encabezados o títulos en la página.

Existen 6 niveles de importancia siendo: • • •

h1 el más importante h6 el menos importante Normalmente usarás h1, h2 y h3

p: Para definir párrafos de texto strong: se emplea para destacar un texto importante em: se emplea para definir un texto enfatizado Diferencia entre texto destacado y texto enfatizado: Cada autor desarrolla su propio estilo

9. HTML: Etiquetas esenciales Con estas etiquetas ya podemos crear páginas webs sencillas. Este es el Vocabulario:

12

UD7 Personal.notebook

August 31, 2013

10. HTML: Gramática Gramática del lenguaje • Las etiquetas siempre se tienen que cerrar: ­Incorrecto: etiquetas no cerradas <p>Aquí hay un <strong>texto destacado. <p>Otro texto ­Correcto: etiquetas cerradas <p>Aquí hay un <strong>texto destacado.</strong></p> <p>Otro texto</p> • Los documentos tienen que estar bien formados: ­Incorrecto: elementos superpuestos <p>Aquí hay un <strong>texto destacado.</p></strong> ­Correcto: elementos anidados <p>Aquí hay un <strong>texto destacado.</strong></p>

10. HTML: Gramática Gramática del lenguaje • Para los nombres de las páginas webs se recomienda: ­ Letras del alfabeto inglés AB....Z ­ Números 0...9 ­ El guión ­ El guión bajo Los demás caracteres pueden dar problemas en algunas ocasiones • La extensión debe ser: ­ ­

.html .htm

13

UD7 Personal.notebook

August 31, 2013

10. HTML: Texto estructurado

Hay que estructurar el texto original definiendo: • Párrafos • Titulares • Títulos de Sección

10. HTML: Texto estructurado

Los diferentes elementos dentro del propio texto: • definiciones • abreviaturas • textos importantes • textos modificados • citas a otras referencias, etc.

14

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicios Ejercicio 1: Determina el código HTML correspondiente a la siguiente página:

Pistas: em del

HTML: Ejercicios Ejercicio 1 resuelto:

15

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicios Ejercicio 2: Determina el código HTML correspondiente a la siguiente página:

HTML: Ejercicio Resultado del ejercicio 2:

16

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio Ejercicio 3: Determina el código HTML correspondiente a la siguiente página:

HTML: Ejercicio Resultado del ejercicio 3:

17

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio Ejercicio 4: Determina el código HTML correspondiente a la siguiente página:

HTML: Ejercicio Ejercicio 5: Determina el código HTML correspondiente a la siguiente página:

18

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio Ejercicio 7: Estructurar y marcar el siguiente texto extraído de la Wikipedia para que el navegador lo muestre con el aspecto de la siguiente imagen:

http://www.librosweb.es/ejercicios/xhtml/ejercicio2/ejercicio2.txt

HTML: Ejercicio Solución Ejercicio 7:

19

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio Ejercicio 8: Indica cúal será el resultado del siguiente código:

<html> <head><title>Ejemplo de etiqueta p</title></head> <body> <p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p> <p>Este segundo párrafo sí que contiene saltos de línea y otro tipo de espaciado.</p> </body> </html>

HTML: Ejercicio Solución Ejercicio 8

HTML ignora los espacios en blanco

20

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio Ejercicio 9: Realizar el código HTML para que quede la página así:

Utilizamos la etiqueta <br/>

HTML: Ejercicio Ejercicio 10: Realizar el código HTML para que quede la página así:

Cada texto &nbsp; solamente equivale a un espacio en blanco, por lo que se deben escribir tantos &nbsp; seguidos como espacios en blanco seguidos existan en el texto.

21

UD7 Personal.notebook

August 31, 2013

11. HTML: Enlaces • Enlace que apunte a la página principal de Google: <a href="http://www.google.com">Página principal de Google</a> • El enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador como una imagen: <a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondo de escritorio</a> • Los enlaces pueden apuntar directamente a documentos PDF, Word, etc. <a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a> <a href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a> • Para poder volver al inicio del sitio web desde cualquier página web: <a href="/">Volver al inicio</a> Para abrir el enlace en una nueva pestaña --> target="_blank"

11. HTML: Enlaces con marcadores Marcador: <A name="nombre_del_marcador"></A> Hay quien encierra con el código del marcador el elemento a donde quiere saltar: Código al lado del elemento que queremos marcar: <A name="Principio"></A><H1>Título de la página</H1> Código que encierra el elemento que queremos marcar. <A name="Principio"><H1>Título de la página</H1></A> Se recomienda usar el primero para enlazar lugares de la página (por ejemplo, el principio) y el segundo para enlazar elementos (imágenes o textos concretos colocados a lo largo de la página).

Por otro lado, el código de un enlace para que salte a un marcador.

Pulsa para volver al <A href="#principio">principio</A>

22

UD7 Personal.notebook

August 31, 2013

11. HTML: Ejercicios enlaces Ejercicio 11: 1.-Crear la siguiente página llamada indice.html que sirva como página principal del sitio:

11. HTML: Ejercicios Enlaces Ejercicio 11:

2) Crear la página de índice del portfolio:

23

UD7 Personal.notebook

August 31, 2013

11. HTML: Mailto

Para que al pinchar sobre un enlace se abra automáticamente el programa de correo electrónico del ordenador del usuario y se establezca la dirección de envío al valor indicado después de mailto Hay que cambiar el prefijo http:// por mailto:

<a href="mailto:nombre@direccion.com" title="Dirección de email para solicitar más información"> Solicita más información </a>

11. HTML: Mailto <!-- Envío del correo electrónico a varias direcciones a la vez --> <a href="mailto:nombre@direccion.com,otro_nombre@direccion.com">Solicita más información</a> <!-- Añadir un "asunto" inicial al correo electrónico --> <a href="mailto:nombre@direccion.com?subject=Solicitud de más información">Solicita más información</a> <!-- Añadir un texto inicial en el cuerpo del correo electrónico --> <a href="mailto:nombre@direccion.com?body=Estaría interesado en solicitar más información sobre sus productos">Solicita más información</a>

24

UD7 Personal.notebook

August 31, 2013

12. HTML: Listas En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos que tienen más significado de forma conjunta.

Ej: El menú de navegación de un sitio web por ejemplo está formado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta constituyen el menú de navegación de la página, por lo que su significado conjunto es mayor que por separado.

HTML distingue tres tipos: • • •

listas no ordenadas (se trata de una colección simple de elementos en la que no importa su orden) listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su orden) listas de definición (un conjunto de términos y definiciones similar a un diccionario).

La etiqueta La etiqueta La etiqueta

<ul> <ol> <li>

Se emplea para definir listas no ordenadas Se emplea para definir listas ordenadas Se emplea para definir los elementos de las listas (ordenadas y no ordenadas)

12. HTML: Listas Ejercicio 12: Realizar el código HTML para que quede la página así:

25

UD7 Personal.notebook

August 31, 2013

12. HTML: Listas Ejercicio 12 resuelto:

<html> <head><title>Ejemplo de etiqueta UL</title></head> <body>

<h1>Menú</h1>

<ul> <li>Inicio</li> <li>Noticias</li> <li>Artículos</li> <li>Contacto</li> </ul>

</body> </html>

12. HTML: Listas Ejercicio 13: Realizar el código HTML para que quede la página así:

26

UD7 Personal.notebook

August 31, 2013

12. HTML: Listas Ejercicio 13 resuelto:

<html> <head><title>Ejemplo de etiqueta OL</title></head> <body>

<h1>Instrucciones</h1>

<ol> <li>Enchufar correctamente</li> <li>Comprobar conexiones</li> <li>Encender el aparato</li> </ol>

</body> </html>

12. HTML: Listas

Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones.

• La etiqueta <dl> crea la lista de definición • La etiqueta <dt> define el término • La etiqueta <dd> define la descripción de cada elemento de la lista.

27

UD7 Personal.notebook

August 31, 2013

12. HTML: Listas Ejercicio 14: Realizar el código HTML para que quede la página así:

12. HTML: Listas Ejercicio 14: Resuelto <html> <head><title>Ejemplo de etiqueta DL</title></head> <body> <h1>Metalenguajes</h1>

<dl> <dt>SGML</dt> <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>

<dt>XML</dt> <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>

<dt>RSS</dt> <dt>GML</dt> <dt>XHTML</dt> <dt>SVG</dt> <dt>XUL</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd> </dl>

</body> </html>

28

UD7 Personal.notebook

August 31, 2013

12. HTML: Listas Ejercicio 14 Realizar el código HTML para que quede la página así:

12. HTML: Listas Ejercicio 14 Resuelto: <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head> <meta http­equiv="Content­Type" content="text/html; charset=UTF­8" /> <title>Lista simple anidada</title> </head>

<body> <h1>Menú</h1> <ul> <li>Inicio</li> <li> <strong>Noticias</strong> <ul> <li><a href="#" title="Ver las noticias más recientes">Recientes</a></li> <li><strong><a href="#" title="Ver las noticias más leídas">Más leídas</a></strong></li> <li><a href="#" title="Ver las noticias más valoradas">Más valoradas</a></li> </ul> </li> </ul> </body> </html>

29

UD7 Personal.notebook

August 31, 2013

12. HTML: Listas Ejercicio 15:

12. HTML: Listas Ejercicio 15 Resuelto: <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head> <meta http­equiv="Content­Type" content="text/html; charset=UTF­8" /> <title>Lista compleja anidada</title> </head>

<body>

<h1>Menú</h1>

<ul> <li>Inicio</li> <li> <strong>Noticias</strong> <ul> <li><a href="#" title="Ver las noticias más recientes">Recientes</a></li> <li><strong><a href="#" title="Ver las noticias más leídas">Más leídas</a></strong></li> <li><a href="#" title="Ver las noticias más valoradas">Más valoradas</a></li> </ul> </li>

<li> Artículos <ol> <li><strong>XHTML</strong></li> <li>CSS</li> <li>JavaScript</li> <li>Otros</li> </ol> </li> <li> Contacto<dl> <dt><em>Email</em></dt> <dd><strong>nombre@direccion.com</strong></dd> <dt><em>Teléfono</em></dt> <dd>900 900 900</dd> <dt><em>Fax</em></dt> <dd>900 900 900</dd> </dl> </li> </ul>

</body> </html>

30

UD7 Personal.notebook

August 31, 2013

13. HTML: Imágenes Las imágenes son uno de los elementos más importantes de las páginas web.

La etiqueta <img> se emplea para incluir imágenes en los documentos Los dos atributos requeridos son src y alt.

• El atributo src es similar al atributo href de los enlaces, ya que establece la URL de la imagen que se va a mostrar en la página.

• El atributo alt permite describir el contenido de la imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024 caracteres y son útiles para las personas y dispositivos discapacitados que no pueden acceder a las imágenes.

Ejemplo sencillo para incluir una imagen: <img src="logotipo.gif" alt="Logotipo de Mi Sitio" /> IMPORTANTE: Como <img> es una etiqueta vacía, no tiene etiqueta de cierre!!!! para cerrar una etiqueta vacía se incluyen los caracteres /> al final de la etiqueta como ocurre en <br /> Los atributos width y height se utilizan para indicar la anchura y altura con la que se muestran las imágenes,

<img src="/imagenes/foto2.jpg" alt="Fotografía de un atardecer en la playa" width="330" height="220" />

13. HTML: Imágenes Ejercicio 14 Realizar el código HTML para que quede la página así:

31

UD7 Personal.notebook

August 31, 2013

13. HTML: Imágenes Ejercicio 14 Resuelto:

<html> <head> <title>Mi Sitio</title> </head> <body> <a href="/" title="Página principal de Mi Sitio">Volver a la pagina principal</a> <h1>Ultimos proyectos</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis posuere justo. Nam vel neque.</p> <h2>Proyecto 1</h2> <p>Etiam consectetuer, mauris vitae cursus scelerisque, dui turpis dignissim justo, et euismod enim odio sit amet erat.</p> <img src="/imagenes/proyecto1.png" title="Imagen del Proyecto 1" /> </body> </html>

13. HTML: Imágenes Ejercicio:

Usar una imagen como link

32

UD7 Personal.notebook

August 31, 2013

14. HTML: Tabla Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos:

• La etiqueta <table> Se emplea para definir tablas de datos • La etiqueta <tr> Se emplea para definir cada fila de las tablas de datos • La etiqueta <td> Se emplea para definir cada una de las celdas que forman las filas de una tabla, es decir, las columnas de la tabla.

• La etiqueta <th> Se emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla

14. HTML: Ejemplo sencillo de Tabla <html> <head><title> Ejercicio 5.1</title></head> <body> <table border='1'> <tr> <th>Cabecera 1</th> <th>Cabecera 2</th> </tr> <tr> <td>Celda 1.1</td> <td>Celda 1.2</td> </tr> <tr> <td>Celda 2.1</td> <td>Celda 2.2</td> </tr> </table> </body> </html>

33

UD7 Personal.notebook

August 31, 2013

14. HTML: Ejercicio <html> <head><title>Ejemplo de tabla sencilla</title></head> <body> <h1>Listado de cursos</h1> <table> <tr> <td><strong>Curso</strong></td> <td><strong>Horas</strong></td> <td><strong>Horario</strong></td> </tr> <tr> <td>CSS</td> <td>20</td> <td>16:00 - 20:00</td> </tr> <tr> <td>HTML</td> <td>20</td> <td>16:00 - 20:00</td> </tr> <tr> <td>Dreamweaver</td> <td>60</td> <td>16:00 - 20:00</td> </tr> </table> </body> </html>

HTML: Ejercicio

Pista Utiliza el atributo scope de la etiqueta th: scope = "col, row" ­ Indica las celdas para las que esta celda será su cabecera.

Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna

34

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head> <meta http­equiv="Content­Type" content="text/html; charset=UTF­8" /> <title>Ejemplo de tabla sencilla</title> </head>

<body>

<h1>Su pedido</h1> <table> <tr> <th scope="col">Nombre producto</th> <th scope="col">Precio unitario</th> <th scope="col">Unidades</th> <th scope="col">Subtotal</th> </tr> <tr> <td>Reproductor MP3 (80 GB)</td> <td>192.02</td> <td>1</td> <td>192.02</td> </tr>

<tr> <td>Fundas de colores</td> <td>2.50</td> <td>5</td> <td>12.50</td> </tr> <tr> <td>Reproductor de radio &amp; control remoto</td> <td>12.99</td> <td>1</td> <td>12.99</td> </tr> <tr> <th scope="row">TOTAL</th> <td>­</td> <td>7</td> <td><strong>207.51</strong></td> </tr> </table> </body> </html>

HTML: Ejercicio Utiliza la etiqueta: <caption> Se emplea para definir la leyenda o título de una tabla

abbr = "texto" - Permite describir el contenido de la celda (empleado sobre todo en los navegadores utilizados por personas discapacitadas)

35

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <title>Ejemplo de tabla avanzada</title> </head> <body> <h1>Resultado de la búsqueda</h1> <table> <caption>Resultado de la búsqueda</caption> <tr> <th abbr="Imagen del producto" scope="col">Imagen</th> <th abbr="Datos del producto" scope="col">Datos</th> </tr> <tr> <td> <img src="imagenes/portatil.png" alt="Imagen del ordenador portátil" /> </td> <td> <h4><a href="#" title="Ver más información sobre el portátil">Portátil - 3 GHz - 4 GB RAM</a></h4> <p><a href="#" title="Comprar el portátil">Comprar:</a> <del>2.990 &euro;</del> <strong>2.599 &euro;</strong></p> </td> </tr>

15. HTML: Formulario Para crear un formulario utilizamos la etiqueta <form>. Atributos: • action = "url" - Indica la URL que se encarga de procesar los datos del formulario • method = "POST o GET" - Método HTTP empleado al enviar el formulario

<input> : Se emplean para definir los elementos type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button" - Indica el tipo de control name = "texto" - Asigna un nombre al control value = "texto" - Valor inicial del control

36

UD7 Personal.notebook

August 31, 2013

15. HTML: Ejemplo Formulario <html> <head><title>Ejemplo de formulario sencillo</title></head> <body> <h1>Formulario muy sencillo</h1> <form action="http://www.librosweb.es/maneja_formulario.php" method="post"> Escribe tu nombre: <input type="text" name="nombre" value="" /> <br/> <input type="submit" value="Enviar" /> </form> </body> </html>

15. HTML: Elementos formulario Nombre <br/> <input type="text" name="nombre" value="" />

Contraseña <br/> <input type="password" name="contrasena" value="" />

Puestos de trabajo buscados <br/> <input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección <input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico <input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado

37

UD7 Personal.notebook

August 31, 2013

15. HTML: Elementos formulario Sexo <br/> <input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre <input type="radio" name="sexo" value="mujer" /> Mujer

<input type="submit" name="buscar" value="Buscar" />

<input type="reset" name="limpiar" value="Borrar datos del formulario" />

Fichero adjunto <input type="file" name="adjunto" />

<form action="..." method="post" enctype="multipart/form-data"> ... </form>

15. HTML: Elementos formulario <input type="button" name="guardar" value="Guardar Cambios" />

<input type="image" name="enviar" src="accept.png" />

<textarea id="descripcion" name="descripcion" cols="40" rows="5"></textarea>

Ejercicio:

38

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio

HTML: Ejercicio

39

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio

15. HTML: Elementos formulario • Etiqueta <select> : Se emplea para incluir una lista desplegable en un formulario Atributo: multiple = "multiple" Se permite seleccionar más de un elemento Atributo: size = "numero" - Número de filas que se muestran de la lista (por defecto sólo se muestra una) • Etiqueta <option> : Se emplea para definir cada elemento de una lista desplegable Atributo: selected = "selected" Indica si el elemento aparece seleccionado por defecto al cargarse la página

40

UD7 Personal.notebook

August 31, 2013

HTML: Ejercicio

HTML: Ejercicio Sistema operativo <br/> <select> <option value="" selected="selected">- selecciona -</option> <option value="windows">Windows</option> <option value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option> </select> Sistema operativo<br/> <select> <option value="windows" selected="selected">Windows</option> <option value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option> </select> Sistema operativo<br/> <select size="5" multiple="multiple"> <option value="windows" selected="selected">Windows</option> <option value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option> </select>

41

UD7 Personal.notebook

August 31, 2013

15. HTML: Formulario estructurado

• Etiqueta <fieldset> Se emplea para agrupar varios campos de un formulario.

• Etiqueta <legend> Se emplea para definir el título o leyenda de un conjunto de campos de formulario agrupados con la etiqueta fieldset

15. HTML: Formulario estructurado <form action="maneja_formulario.php" method="post"> <fieldset> <legend>Datos personales</legend> Nombre <br/> <input type="text" name="nombre" value="" /> <br/> Apellidos <br/> <input type="text" name="apellidos" value="" /> <br/> DNI <br/> <input type="text" name="dni" value="" size="10" maxlength="9" /> </fieldset> <fieldset> <legend>Datos de conexión</legend> Nombre de usuario<br/> <input type="text" name="nombre" value="" maxlength="10" /> <br/> Contraseña<br/> <input type="password" name="password" value="" maxlength="10" /> <br/> Repite la contraseña<br/> <input type="password" name="password2" value="" maxlength="10" /> </fieldset> </form>

42

UD7 Personal.notebook

August 31, 2013

15. HTML: Formulario estructurado

15. HTML: Formulario estructurado

43

UD7 Personal.notebook

August 31, 2013

16. HTML: Ejercicio Completo • Crear una carpeta llamada "Ejercicio Completo".

• Dentro crear 4 archivos: "index.html", "dondeestamos.html", "contacta.html", "quienes somos.html"

16. HTML: Ejercicio Completo index.html

<html> <head><title>Zapatería Sonia</title></head> <body> <h1>Zapatería Sonia</h1> <ul> <li><a href="./quienessomos.html">Quienes Somos</a></li> <li><a href="./contacta.html">Contacta</a></li> <li><a href="./dondeestamos.html">Dónde estamos</a></li> </ul> </body> </html>

44

UD7 Personal.notebook

August 31, 2013

16. HTML: Ejercicio Completo dondeestamos.html

contacta.html <html> <head><title>Quienes somos</title></head> <body> <h1>Quienes somos</h1> </body> </html>

<html> <head><title>donde estamos</title></head> quienessomos.html <body> <h1>Dónde estamos</h1> <html> <head><title>Contacta</title></head> </body> <body> <h1>Contacta</h1> </html> </body> </html>

<html> <head><title>Zapatería Sonia</title></head> <body> <h1>Zapatería Sonia</h1> <ul> <li><a href="./quienessomos.html">Quienes Somos</a></li> <li><a href="./contacta.html">Contacta</a></li> <li><a href="./dondeestamos.html">Dónde estamos</a></li> </ul> </body> </html>

16. HTML: Ejercicio Completo Crea tres imágenes en forma de botones.

Llamalos "contacta.png", "quienessomos.png", "dondeestamos.png" Crea una carpeta llamada "imagenes" dentro de la carpeta ejerciciocompleto y guarda las imágenes ahí dentro.

45

UD7 Personal.notebook

August 31, 2013

16. HTML: Ejercicio Completo Cambia el código del archivo "index.html" para que los enlaces del menú sean imágenes.

<html> <head><title>Zapatería Sonia</title></head> <body> <h1>Zapatería Sonia</h1> <ul> <li><a href="./quienessomos.html"><img src="./imagenes/quienessomos.png" /></a></li> <li><a href="./contacta.html"><img src="./imagenes/contacta.png" /></a></li> <li><a href="./dondeestamos.html"><img src="./imagenes/dondeestamos.png" /></a></li> </ul> </body> </html>

16. HTML: Ejercicio Completo Busca una dirección y pegala en el archivo "dondeestamos.html"

46

UD7 Personal.notebook

August 31, 2013

16. HTML: Ejercicio Completo Busca una dirección y pegala en el archivo "dondeestamos.html"

<html> <head><title>donde estamos</title></head> <body> <h1>Dónde estamos</h1> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps? f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Republ ica+argentina+30+valencia&amp;aq=&amp;sll=38.997841,­ 0.159302 &amp;sspn=0.60408,0.883026&amp;ie=UTF8&amp;hq= &amp;hnear=Calle+Rep%C3% BAblica+Argentina,+30,+46021 +Valencia&amp;t=m&amp;z=14 &amp;ll=39.473837, ­ 0.350876&amp;output=embed"></iframe><br /><small><a href="https://maps.google.es/maps? f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=Repu blica+argentina+30+valencia&amp;aq=&amp; sll=38.997841, ­ 0.159302&amp;sspn=0.60408,0.883026&amp;ie=UTF8&amp;hq= &amp;hnear=Calle+Rep%C3% BAblica+Argentina,+ 30,+46021+Valencia&amp;t=m&amp;z=14 &amp;ll=39.473837,­0.350876" style="color:#0c000FF; text­align:left">Ver mapa más grande</a></small> </body>

Elimina el enlace "Ver mapa más grande" .

Cambia el tamaño a 200 x 200 píxeles

16. HTML: Ejercicio Completo Añade un formulario al archivo "contacta.html" .

47

UD7 Personal.notebook

August 31, 2013

16. HTML: Ejercicio Completo Haz que se abran los enlaces en otras pestañas nuevas, para ello utiliza el aributo target="_blank" <html> <head><title>Zapatería Sonia</title></head> <body> <h1>Zapatería Sonia</h1> <ul> <li><a target="_blank" href="./quienessomos.html"><img src="./imagenes/quienessomos.png" /></a></li> <li><a target="_blank" href="./contacta.html"><img src="./imagenes/contacta.png" /></a></li> <li><a target="_blank" href="./dondeestamos.html"><img src="./imagenes/dondeestamos.png" /></a></li> </ul> </body> </html>

16. HTML: Ejercicio Completo Edita el archivo "quienessomos.html": • Coloca dos párrafos describiendo tu empresa • Inserta cuatro imágenes del mismo tamaño con la esquinas redondeadas.

Abre la imagen ­­>Filtros ­­> Decorativos ­­> Esquinas redondeadas • Guarda las imágenes en la carpeta imágenes

48

UD7 Personal.notebook

August 31, 2013

16. HTML: Ejercicio Completo Inserta sonido a tu página web: • <embed src ="ubicación del archivo" > • Si lo consideras necesario puedes agregar algunos atributos: - Autostart: permite indicar si deseamos que el sonido se ejecute automáticamente.

- Loop: indica el número de veces que se puede repetir el sonido.

- Volume: volumen (%) - Width y height : Indican el tamaño de la ventana en la que se mostraría el sonido.

Ej: <embed src="Amanda.wma" autostart="true" loop = "infinite" volume ="80" width ="0" > NOTA: Los formatos de archivo que se pueden ejecutar sin emplear ningún plugin especial son wav y midi

Para pasar a diferentes formatos de audio probar la herramienta online: www.media.io/

16. HTML: Ejercicio Completo Añade las siguientes metas para mejorar SEO: <head> <meta name="description" content="Página web de la zapateria Sonia"> <meta name="keywords" content="zapatos Gandía, zapatos baratos, Gandia shoes, botas Gandía, zapaterías"> <meta name="author" content="Sonia Lafuente Martínez"> <meta charset="UTF­8"> </head> • Definir el autor del documento: <meta name="author" content="Juan Pérez" /> • Definir las palabras clave que definen el contenido del documento:

.ICO (formato gráfico de los iconos)

<meta name="keywords" content="diseño, css, hojas de estilos, web, html" /> • Definir una breve descripción del sitio: <meta name="description" content="Artículos sobre diseño web, usabilidad y accesibilidad" />

FAVICON <link rel="shortcut icon" href="/favicon.ico" type="image/ico" />

49

UD7 Personal.notebook

August 31, 2013

17. HTML: Editor Notepad ++ Editor más potente: Notepad ++ gratuito para los sistemas operativos Windows, que se distribuye bajo licencia GPL. Se puede descargar en : http://notepad­plus­plus.org/ Ventajas: • • • • •

Es muy ligero y rápido Opciones que colorea la sintaxis del código que escribimos Opción de autocompletar etiquetas Soporte de distintos juegos de caracteres Plugins que amplian sus funciones

Abrir el fichero pulsando botón derecho y hacer click en "Edit with Notepad++"

HTML: Video HTML vs CSS https://www.youtube.com/watch?v=1A­6IhwyQ3g

50