1. Introducción · UD7 Personal.notebook 1 August 31, 2013 HTML Tema 7 Sonia Lafuente Martínez 1....

UD7 Personal.notebook

1

August 31, 2013

HTMLTema 7

Sonia Lafuente Martínez

1. Índice1. Introducción2. Arpanet3. La Web4. Lenguaje HTML5. Gramática y vocabulario de HTML6. Elementos de HTML (Vocabulario)7. Estructura básica8. Normas de escritura9. Etiquetas10. Gramática11. Enlaces12. Listas13. Imágenes14. Tablas15. Formularios16. Ejercicio Completo17. Editor Notepad++


2

August 31, 2013

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.

1. Introducción


3

August 31, 2013

¿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.

1. Introducción

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

2. ARPANET


4

August 31, 2013

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

2. ARPANET

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

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

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

3. La web


5

August 31, 2013

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 deusuario y contraseña, aplicación cliente específica. para realizar la conexión

3. La web


6

August 31, 2013

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

3. La web


7

August 31, 2013

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

4. Lenguaje HTML


8

August 31, 2013

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?

5. HTML: Vocabulario y gramática

• 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

6. HTML: Elementos


9

August 31, 2013

Los elementos se pueden anidar, es decir, se pueden escribir unos dentro de otros.

Ver código fuente

6. HTML: Elementos

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

7. HTML: Estructura básica


10

August 31, 2013


<html><head><title>El primer documento HTML</title></head><body><p>El lenguaje HTML es <strong>tan sencillo</strong> queprácticamente se entiende sin estudiar el significadode 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


Se puede escribir de las dos maneras posibles:


11

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.

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

9. HTML: Etiquetas


12

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:


13

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


14

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.


15

August 31, 2013

HTML: Ejercicios

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

Pistas:emdel

HTML: Ejercicios

Ejercicio 1 resuelto:


16

August 31, 2013

HTML: Ejercicios


HTML: Ejercicio

Resultado del ejercicio 2:


17

August 31, 2013

HTML: Ejercicio


HTML: Ejercicio

Resultado del ejercicio 3:


18

August 31, 2013

HTML: Ejercicio


HTML: Ejercicio



19

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:


20

August 31, 2013

HTML: Ejercicio

<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 saltosdelíneay otro tipo de espaciado.</p></body></html>

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

HTML: EjercicioSolución Ejercicio 8

HTML ignora los espacios en blanco


21

August 31, 2013

HTML: Ejercicio

Utilizamos la etiqueta <br/>

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

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

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


22

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>


23

August 31, 2013

11. HTML: Ejercicios enlacesEjercicio 11:

1.-Crear la siguiente página llamada indice.html que sirva como página principal del sitio:

11. HTML: Ejercicios EnlacesEjercicio 11:

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

24

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:[email protected]" title="Dirección de email para solicitar más información">Solicita más información</a>

11. HTML: Mailto

<a href="mailto:[email protected],[email protected]">Solicita más información</a> <a href="mailto:[email protected]?subject=Solicitud de más información">Solicita más información</a> <a href="mailto:[email protected]?body=Estaría interesado en solicitar más información sobre sus productos">Solicita más información</a>


25

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 <ul> Se emplea para definir listas no ordenadasLa etiqueta <ol> Se emplea para definir listas ordenadasLa etiqueta <li> 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í:


26

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: ListasEjercicio 13: Realizar el código HTML para que quede la página así:


27

August 31, 2013

12. HTML: ListasEjercicio 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.


28

August 31, 2013

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

12. HTML: ListasEjercicio 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>


29

August 31, 2013

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

12. HTML: ListasEjercicio 14 Resuelto:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head><meta httpequiv="ContentType" content="text/html; charset=UTF8" /><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>


30

August 31, 2013

12. HTML: ListasEjercicio 15:

12. HTML: ListasEjercicio 15 Resuelto:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head><meta httpequiv="ContentType" content="text/html; charset=UTF8" /><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>[email protected]</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>


31

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ágenesEjercicio 14 Realizar el código HTML para que quede la página así:


32

August 31, 2013

13. HTML: ImágenesEjercicio 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ágenesEjercicio:

Usar una imagen como link


33

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>


34

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


35

August 31, 2013

HTML: Ejercicio

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head><meta httpequiv="ContentType" content="text/html; charset=UTF8" /><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 & 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)


36

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 €</del> <strong>2.599 €</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


37

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


38

August 31, 2013

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>


<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:



39

August 31, 2013

HTML: Ejercicio

HTML: Ejercicio


40

August 31, 2013

HTML: Ejercicio

• Etiqueta <select> : Se emplea para incluir una lista desplegable en un formularioAtributo: multiple = "multiple" Se permite seleccionar más de un elementoAtributo: 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 desplegableAtributo: selected = "selected" Indica si el elemento aparece seleccionado por defecto al cargarse la página



41

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>


42

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>


43

August 31, 2013




44

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"

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>



45

August 31, 2013

contacta.html

<html><head><title>Contacta</title></head><body><h1>Contacta</h1>

</body></html>

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

</body>

</html>

dondeestamos.html

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

</body></html>

quienessomos.html


<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>


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.



46

August 31, 2013


<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>

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


Busca una dirección y pegala en el archivo "dondeestamos.html"



47

August 31, 2013

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&source=s_q&hl=es&geocode=&q=Republ ica+argentina+30+valencia&aq=&sll=38.997841, 0.159302&sspn=0.60408,0.883026&ie=UTF8&hq= &hnear=Calle+Rep%C3% BAblica+Argentina,+30,+46021+Valencia&t=m&z=14 &ll=39.473837, 0.350876&output=embed"></iframe><br /><small><a href="https://maps.google.es/maps? f=q&source=embed&hl=es&geocode=&q=Repu blica+argentina+30+valencia&aq=&sll=38.997841, 0.159302&sspn=0.60408,0.883026&ie=UTF8&hq= &hnear=Calle+Rep%C3% BAblica+Argentina,+30,+46021+Valencia&t=m&z=14 &ll=39.473837,0.350876" style="color:#0c000FF;textalign: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


Añade un formulario al archivo "contacta.html" .



48

August 31, 2013

Haz que se abran los enlaces en otras pestañas nuevas, para ello utiliza el aributo target="_blank"


<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>


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



49

August 31, 2013

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/


<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="UTF8"></head>

Añade las siguientes metas para mejorar SEO:

• Definir el autor del documento:<meta name="author" content="Juan Pérez" />

• Definir las palabras clave que definen el contenido del documento:

<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" />

.ICO (formato gráfico de los iconos)



50

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://notepadplusplus.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=1A6IhwyQ3g

https://www.youtube.com/watch?v=1a-6ihwyq3g

1. Introducción · UD7 Personal.notebook 1 August 31, 2013 HTML Tema 7 Sonia Lafuente Martínez 1....

Documents

Transcript of 1. Introducción · UD7 Personal.notebook 1 August 31, 2013 HTML Tema 7 Sonia Lafuente Martínez 1....