SlideShare una empresa de Scribd logo
1 de 27
Descargar para leer sin conexión
Hyper Text Markup Language
Tema 2: Enlaces, Imágenes, Listas
© Abril, 2015
Prof. Renny Batista
Los enlaces (links)
 Los enlaces se encuentran en casi todas las páginas
web, permiten a los usuarios hacer clic para poder ir
desde una página a otra.
 Un hipervínculo es un texto o una imagen en la que se
puede hacer clic y saltar a otro documento.
 En HTML, enlaces se definen con la etiqueta <a>:
<a href="url">link text</a>
<a href="http://www.google.com">Ir a google</a>
Abril, 2015 2
Los enlaces (links)
<a href="http://www.google.com">Ir a google</a>
 El atributo href especifica la dirección de destino
(http://www.google.com)
 El texto del enlace es la parte visible (Ir a google).
 Al hacer clic sobre el texto del enlace, le enviará a la
dirección especificada.
 El texto del vínculo no tiene que ser solo un texto. Puede
ser una imagen HTML o cualquier otro elemento HTML.
Abril, 2015 3
Los enlaces (links)
 Un enlace puede apuntar a cualquier tipo de recurso al
que pueda acceder el navegador. El siguiente enlace
apunta a una imagen.
<a href="http://www.ejemplo.com/fondo.jpg">Imagen para
un fondo de escritorio</a>
 De la misma forma, los enlaces pueden apuntar
directamente a documentos PDF, Word, etc.
<a href="http://www.ejemplo.com/informe.pdf">Descargar
informe</a>
 Un truco muy útil con los enlaces es el uso de URL relativas
para poder volver al inicio del sitio Web desde cualquier
página Web interior:
 <a href="/">Volver al inicio</a>
Abril, 2015 4
Los enlaces (links)
 Al mover el cursor del ratón sobre un enlace, normalmente
sucede que:
– El puntero del ratón se convertirá en una pequeña
mano
– El color del elemento de enlace va a cambiar
 Por defecto, los enlaces aparecerán en todos los
navegadores de la siguiente forma:
– Un enlace no visitado está subrayado y azul
– Un enlace visitado es subrayada y púrpura
– Un vínculo activo es subrayada y roja
Abril, 2015 5
Los enlaces (links)
 Se puede cambiar los valores predeterminados para los enlaces,
utilizando estilos definiendo sus características utilizando la
etiqueta <style> dentro del <head>:
<head>
<style>
a:link {color:#000000; background-color:transparent;
text-decoration:none}
a:visited {color:#000000; background-color:transparent;
text-decoration:none}
a:hover {color:#ff0000; background-color:transparent;
text-decoration:underline}
a:active {color:#ff0000; background-color:transparent;
text-decoration:underline}
</style>
</head>
Abril, 2015 6
Los enlaces: el atributo “target”
 El atributo de target especifica dónde abrir el documento
vinculado.
Abril, 2015 7
Valor del target Descripción
_blank Abre el documento vinculado en una nueva
ventana o pestaña
_self .Abre el documento vinculado en el misma
pestaña o marco donde se ha hecho clic (por
defecto)
_parent Abre el documento vinculado en el marco padre
_top Abre el documento vinculado en toda la ventana
(cuando se utilizan frames)
framename Abre el documento vinculado en el marco
definido (nombre del frame)
Los enlaces: imágenes como enlaces
 En un documento HTML es común utilizar una imagen como
un enlace.
<a href="http://www.google.com">
<img src="google.png" alt="Ir a google!"
style="width:50px;height:50px;border:0">
</a>
Abril, 2015 8
Los enlaces: el atributo “id”
 El atributo id puede ser usado para crear un “marcador” dentro de
un documento HTML.
 Los “marcadores” no se muestran de un modo especial. Son invisibles
para el lector:
 Ejemplo, añadimos un atributo al elemento <a>
<a id="tips">Sección de consejos</a>
 A continuación, cree un vínculo al elemento <a> (“Visite la sección
de consejos”) añadimos un atributo al elemento:
<a href="#tips">Visite la sección de consejos</a>
 Para acceder a una sección de un documento desde otro enlace
utilizamos:
<a href="http://www.ejemplo.com/pagina.htm#tips"> Visite la
sección de consejos</a>
Abril, 2015 9
Imágenes en HTML
 En HTML, las imágenes se definen con la etiqueta <img>.
 La etiqueta <img> es una de las pocas etiquetas vacías, contiene
atributos solamente, y no posee una etiqueta de cierre.
 El atributo src define la url (dirección web) de la imagen.
<img src="url" alt="some_text">
 El atributo alt especifica un texto alternativo para la imagen, si no
se puede mostrar. El valor del atributo alt debe describir la imagen
en palabras.
<img src="html5.gif" alt=“El logo oficial de HTML5">
 Se requiere usar el atributo alt. Una página web no se valida
correctamente sin este atributo.
Abril, 2015 10
Imágenes en HTML: Ancho y alto
 Puede utilizar el atributo de estilo para especificar la anchura
(width) y altura (height) de una imagen. Los valores se especifican
en píxeles (Utilizar px después del valor):
<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px">
 Alternativamente, puede utilizar los atributos de anchura y altura.
Los valores se especifican en píxeles (sin px después del valor):
<img src="html5.gif" alt="HTML5
Icon" width="128" height="128">
Abril, 2015 11
Imágenes en HTML: Ubicación
 Si no se especifica, el navegador espera encontrar la imagen en
la misma carpeta que la página web.
 Sin embargo, es común en la web, que las imágenes se
almacenan en una subcarpeta (/images), y se refieren a la
carpeta en el nombre de la imagen:
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px">
 Si un navegador no puede encontrar una imagen, se mostrará un
icono de enlace roto:
Abril, 2015 12
Imágenes en HTML: Ubicación
 Algunos sitios web almacenan sus imágenes en servidores de
imágenes. En realidad, se puede acceder a las imágenes desde
cualquier dirección web en el mundo:
<img src="http://www.w3schools.com/images/w3schools_green.jpg">
 En los documentos HTML es común utilizar una imagen como un
enlace (link)
<a href="default.asp"> <img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0"></a>
Abril, 2015 13
Imágenes en HTML: Mapas de imagenes
 Para una imagen, se puede crear un mapa de imagen (<map>)
con zonas seleccionables:
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;h
eight:126px">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
 El <area> define un área dentro de un mapa-imagen
 El elemento <area> está siempre anidado dentro de un <mapa>
etiqueta.
Abril, 2015 14
Imágenes en HTML: Imagen flotante
 Se puede colocar una imagen flotante a la izquierda o a la
derecha de un párrafo utilizando el atributo style y la propiedad
float :
<p>
<img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px">
A paragraph with an image. The image floats to the
left of the text.
</p>
Abril, 2015 15
Listas en HTML
 En HTML se pueden tener listas no ordenadas, listas
ordenadas o listas de descripción.
Abril, 2015 16
Listas no ordenadas
 Una lista no ordenada comienza con la etiqueta <ul>.
Cada elemento de la lista comienza con la etiqueta
<li>.
 Los elementos de la lista por defecto se marcarán
con pequeños círculos negros.
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ul>
Abril, 2015 17
Listas no ordenadas
 Un atributo de estilo puede ser añadido a una lista no
ordenada, para definir el estilo del marcador (viñeta):
Abril, 2015 18
Style Descripción
list-style-type:disc Los elementos de la lista se marcará con círculos
negros
list-style-type:circle Los elementos de la lista serán marcados con
círculos
list-style-type:square los elementos de la lista estará marcado con
cuadrados
list-style-type:none Los elementos de la lista no se marcarán
Listas no ordenadas
<ul style="list-style-type:circle">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ul>
Abril, 2015 19
<ul style="list-style-type:square">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ul>
Listas ordenadas
 Una lista ordenada comienza con la etiqueta <ol>.
Cada elemento de la lista comienza con la etiqueta
<li>.
 Los elementos de la lista serán marcados con los
números.
<ol>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>
Abril, 2015 20
Listas ordenadas
 Un atributo type se puede añadir a una lista
ordenada, para definir el tipo del marcador:
Abril, 2015 21
Type Descripción
Type=“1” Los elementos de la lista serán enumerados con
números (por defecto)
Type=“A” Los elementos de la lista serán enumerados con
letras mayúsculas
Type=“a” Los elementos de la lista serán enumerados con
letras
Type=“I” Los elementos de la lista serán enumerados con
números romanos en mayúsculas
Type=“i” Los elementos de la lista serán enumerados con
números romanos en minúsculas
Listas ordenadas
<ol type="A">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ol>
Abril, 2015 22
<ol type="I">
<li>Café</li>
<li>Leche</li>
<li>Jugo</li>
</ol>
Listas de descripción
 Una lista de descripción, es una lista de términos, con
una descripción de cada término.
 El <dl> define una lista de descripciones.
 La etiqueta <dt> define el término (nombre), y el <dd>
define los datos (descripción).
<dl>
<dt>Café</dt>
<dd>- Bebida caliente</dd>
<dt>Leche</dt>
<dd>- Bebida fría</dd>
</dl>
Abril, 2015 23
Listas anidadas
 Una lista puede contener una o más listas (anidadas)
<ul>
<li>Café</li>
<li>Té
<ul>
<li>Té negro</li>
<li>Té Verde</li>
</ul>
</li>
<li>Leche</li>
</ul>
Abril, 2015 24
Listas anidadas
 Listas en HTML pueden ser personalizadas de muchas
maneras diferentes aplicando CSS. Una forma popular, es
personalizar una lista para ser mostrada horizontalmente
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black; color: white;
padding: 10px 20px;
text-decoration: none; border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
Abril, 2015 25
Listas anidadas
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="/html/default.asp">HTML</a></li>
<li><a href="/css/default.asp">CSS</a></li>
<li><a href="/js/default.asp">JavaScript</a></li>
<li><a href="/php/default.asp">PHP</a></li>
</ul>
</body>
Abril, 2015 26
Bibliografías
Abril, 2015 27
Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es
2008. Creative Commons reconocimiento no comercial -
sin obra derivada 3.0
W3Schools a web developers site. http://www.w3schools.com

Más contenido relacionado

La actualidad más candente

Codeblocks ejercicios básicos
Codeblocks ejercicios básicos Codeblocks ejercicios básicos
Codeblocks ejercicios básicos laura cortez
 
LA WEB Y SUS CARACTERISTICAS
LA WEB Y SUS CARACTERISTICAS LA WEB Y SUS CARACTERISTICAS
LA WEB Y SUS CARACTERISTICAS Natalia Alvarez
 
TAREA DE ORGANIZADORES GRAFICO DEL PHP
TAREA DE ORGANIZADORES GRAFICO DEL PHPTAREA DE ORGANIZADORES GRAFICO DEL PHP
TAREA DE ORGANIZADORES GRAFICO DEL PHPromimaira
 
Introduccion a la programacion web
Introduccion a la programacion webIntroduccion a la programacion web
Introduccion a la programacion webRobert Rodriguez
 
Contenedores Swing en Netbeans
Contenedores Swing en NetbeansContenedores Swing en Netbeans
Contenedores Swing en NetbeansMarly Encina
 
Ejemplo de Base de Datos Relacional
Ejemplo de Base de Datos RelacionalEjemplo de Base de Datos Relacional
Ejemplo de Base de Datos RelacionalGema López
 
Ejemplos de algoritmos en C básicos (aprendiendo a programar)
Ejemplos de algoritmos en C básicos (aprendiendo a programar)Ejemplos de algoritmos en C básicos (aprendiendo a programar)
Ejemplos de algoritmos en C básicos (aprendiendo a programar)Kiim Kerrigan
 
Normalización de Base de Datos
Normalización de Base de DatosNormalización de Base de Datos
Normalización de Base de DatosVannesa Salazar
 
Alfabetos-Lenguajes y Automatas 1
Alfabetos-Lenguajes y Automatas 1Alfabetos-Lenguajes y Automatas 1
Alfabetos-Lenguajes y Automatas 1Osiris Mirerus
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasjennypalcio
 
Patrón de diseño Modelo-Vista-Controlador (MVC)
Patrón de diseño Modelo-Vista-Controlador (MVC)Patrón de diseño Modelo-Vista-Controlador (MVC)
Patrón de diseño Modelo-Vista-Controlador (MVC)Jose R. Hilera
 
Conclusiones sobre base de datos
Conclusiones sobre base de datos Conclusiones sobre base de datos
Conclusiones sobre base de datos yeisonarley17
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia webMeli Vidal
 
Diagramas UML
Diagramas UMLDiagramas UML
Diagramas UML1da4
 

La actualidad más candente (20)

Codeblocks ejercicios básicos
Codeblocks ejercicios básicos Codeblocks ejercicios básicos
Codeblocks ejercicios básicos
 
LA WEB Y SUS CARACTERISTICAS
LA WEB Y SUS CARACTERISTICAS LA WEB Y SUS CARACTERISTICAS
LA WEB Y SUS CARACTERISTICAS
 
TAREA DE ORGANIZADORES GRAFICO DEL PHP
TAREA DE ORGANIZADORES GRAFICO DEL PHPTAREA DE ORGANIZADORES GRAFICO DEL PHP
TAREA DE ORGANIZADORES GRAFICO DEL PHP
 
Introduccion a la programacion web
Introduccion a la programacion webIntroduccion a la programacion web
Introduccion a la programacion web
 
Contenedores Swing en Netbeans
Contenedores Swing en NetbeansContenedores Swing en Netbeans
Contenedores Swing en Netbeans
 
Ejemplo de Base de Datos Relacional
Ejemplo de Base de Datos RelacionalEjemplo de Base de Datos Relacional
Ejemplo de Base de Datos Relacional
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Funciones recursivas
Funciones recursivasFunciones recursivas
Funciones recursivas
 
Ejemplos de algoritmos en C básicos (aprendiendo a programar)
Ejemplos de algoritmos en C básicos (aprendiendo a programar)Ejemplos de algoritmos en C básicos (aprendiendo a programar)
Ejemplos de algoritmos en C básicos (aprendiendo a programar)
 
Programación 3: listas enlazadas
Programación 3: listas enlazadasProgramación 3: listas enlazadas
Programación 3: listas enlazadas
 
Ejercicios resueltos con Python
Ejercicios resueltos con PythonEjercicios resueltos con Python
Ejercicios resueltos con Python
 
Funciones en php
Funciones en phpFunciones en php
Funciones en php
 
Normalización de Base de Datos
Normalización de Base de DatosNormalización de Base de Datos
Normalización de Base de Datos
 
Alfabetos-Lenguajes y Automatas 1
Alfabetos-Lenguajes y Automatas 1Alfabetos-Lenguajes y Automatas 1
Alfabetos-Lenguajes y Automatas 1
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadas
 
Sesion12-componentes Visuales java
Sesion12-componentes Visuales javaSesion12-componentes Visuales java
Sesion12-componentes Visuales java
 
Patrón de diseño Modelo-Vista-Controlador (MVC)
Patrón de diseño Modelo-Vista-Controlador (MVC)Patrón de diseño Modelo-Vista-Controlador (MVC)
Patrón de diseño Modelo-Vista-Controlador (MVC)
 
Conclusiones sobre base de datos
Conclusiones sobre base de datos Conclusiones sobre base de datos
Conclusiones sobre base de datos
 
Tecnologia web
Tecnologia webTecnologia web
Tecnologia web
 
Diagramas UML
Diagramas UMLDiagramas UML
Diagramas UML
 

Destacado

Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - FormulariosRenny Batista
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsiveRenny Batista
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Renny Batista
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIRenny Batista
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Jorge Llanten
 
Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Ozzy Bull
 
Macros Visual Basic Para Excel
Macros Visual Basic Para ExcelMacros Visual Basic Para Excel
Macros Visual Basic Para ExcelBerthamazon
 
Ejercicios de visual basic 2012
Ejercicios de visual basic 2012Ejercicios de visual basic 2012
Ejercicios de visual basic 2012iestp huari
 
Excepciones
ExcepcionesExcepciones
Excepcionesrilara
 
Exceptions (2)
Exceptions (2)Exceptions (2)
Exceptions (2)jbersosa
 

Destacado (20)

Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 
Css - Tema 2
Css -  Tema 2Css -  Tema 2
Css - Tema 2
 
Html - Tema 3
Html - Tema 3Html - Tema 3
Html - Tema 3
 
05 java excepciones
05 java excepciones05 java excepciones
05 java excepciones
 
Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - Formularios
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema II
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Html
HtmlHtml
Html
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1
 
Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4
 
Mac
MacMac
Mac
 
Curso visual basic
Curso visual basicCurso visual basic
Curso visual basic
 
Taller MVC
Taller MVCTaller MVC
Taller MVC
 
Macros Visual Basic Para Excel
Macros Visual Basic Para ExcelMacros Visual Basic Para Excel
Macros Visual Basic Para Excel
 
Ejercicios de visual basic 2012
Ejercicios de visual basic 2012Ejercicios de visual basic 2012
Ejercicios de visual basic 2012
 
Excepciones
ExcepcionesExcepciones
Excepciones
 
Exceptions (2)
Exceptions (2)Exceptions (2)
Exceptions (2)
 
Gestion de errores en java
Gestion de errores en javaGestion de errores en java
Gestion de errores en java
 

Similar a Html - Tema 2: Enlaces, Imágenes y Listas

Similar a Html - Tema 2: Enlaces, Imágenes y Listas (20)

U2
U2U2
U2
 
Codigo de e
Codigo de eCodigo de e
Codigo de e
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Hipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta aHipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta a
 
programación WEB Unidad 1 html
programación WEB Unidad 1 htmlprogramación WEB Unidad 1 html
programación WEB Unidad 1 html
 
Etiquetas XHMTL
Etiquetas XHMTLEtiquetas XHMTL
Etiquetas XHMTL
 
listas HTML
listas HTMLlistas HTML
listas HTML
 
Anthony rodriguez codigos de tablas en html
Anthony rodriguez codigos de tablas en htmlAnthony rodriguez codigos de tablas en html
Anthony rodriguez codigos de tablas en html
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Edición de documentos
Edición de documentosEdición de documentos
Edición de documentos
 
Introducción a los enlaces, imágenes y tablas en HTML
Introducción a los enlaces, imágenes y tablas en HTMLIntroducción a los enlaces, imágenes y tablas en HTML
Introducción a los enlaces, imágenes y tablas en HTML
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Tatoo
TatooTatoo
Tatoo
 
Slideshare
SlideshareSlideshare
Slideshare
 
Como programar en htmil 5
Como programar en htmil 5Como programar en htmil 5
Como programar en htmil 5
 
Hipervinculos en html
Hipervinculos en htmlHipervinculos en html
Hipervinculos en html
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
 
Web 4
Web 4Web 4
Web 4
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
242310
242310242310
242310
 

Más de Renny Batista

Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Renny Batista
 
Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del softwareRenny Batista
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de DatosRenny Batista
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java scriptRenny Batista
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetosRenny Batista
 

Más de Renny Batista (7)

03 java poo_parte_2
03 java poo_parte_203 java poo_parte_2
03 java poo_parte_2
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015
 
JQuery-Tema 1
JQuery-Tema 1JQuery-Tema 1
JQuery-Tema 1
 
Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del software
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de Datos
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java script
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetos
 

Último

Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Angélica Soledad Vega Ramírez
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxRosabel UA
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FJulio Lozano
 
PROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdf
PROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdfPROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdf
PROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdfMaritza438836
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAJesus Gonzalez Losada
 
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...MagalyDacostaPea
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Gonella
 
Acuerdo 05_04_24 Lineamientos del CTE.pdf
Acuerdo 05_04_24 Lineamientos del CTE.pdfAcuerdo 05_04_24 Lineamientos del CTE.pdf
Acuerdo 05_04_24 Lineamientos del CTE.pdfmiriamguevara21
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdfEDNAMONICARUIZNIETO
 
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docxMagalyDacostaPea
 
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...Martin M Flynn
 
BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................ScarletMedina4
 
4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docx
4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docx4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docx
4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docxMagalyDacostaPea
 
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD EDUCATIVO.pdfdeBelnRosales2
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxFabianValenciaJabo
 
programa PLAN ANUAL TUTORIA 3° SEC-2024.docx
programa PLAN ANUAL TUTORIA 3° SEC-2024.docxprograma PLAN ANUAL TUTORIA 3° SEC-2024.docx
programa PLAN ANUAL TUTORIA 3° SEC-2024.docxCram Monzon
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entornoday561sol
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxMartaChaparro1
 

Último (20)

Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...Contextualización y aproximación al objeto de estudio de investigación cualit...
Contextualización y aproximación al objeto de estudio de investigación cualit...
 
Presentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptxPresentación Bloque 3 Actividad 2 transversal.pptx
Presentación Bloque 3 Actividad 2 transversal.pptx
 
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/FEl PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
El PROGRAMA DE TUTORÍAS PARA EL APRENDIZAJE Y LA FORMACIÓN INTEGRAL PTA/F
 
PROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdf
PROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdfPROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdf
PROGRAMACIÓN CURRICULAR - DPCC- 5°-2024.pdf
 
HISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICAHISPANIDAD - La cultura común de la HISPANOAMERICA
HISPANIDAD - La cultura común de la HISPANOAMERICA
 
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
4° SES COM MAR 09 Leemos una noticia del dengue e identificamos sus partes (1...
 
Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3Apunte de clase Pisos y Revestimientos 3
Apunte de clase Pisos y Revestimientos 3
 
Acuerdo 05_04_24 Lineamientos del CTE.pdf
Acuerdo 05_04_24 Lineamientos del CTE.pdfAcuerdo 05_04_24 Lineamientos del CTE.pdf
Acuerdo 05_04_24 Lineamientos del CTE.pdf
 
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdfNUEVO PLAN Y PROGRAMAS DE ESTUDIO  2022.pdf
NUEVO PLAN Y PROGRAMAS DE ESTUDIO 2022.pdf
 
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE     9-4-24 (1).docx
4° SES MATE DESCOMP. ADIT. DE NUMEROS SOBRE CASOS DE DENGUE 9-4-24 (1).docx
 
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
DIGNITAS INFINITA - DIGNIDAD HUMANA; Declaración del dicasterio para la doctr...
 
BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................BOCA Y NARIZ (2).pdf....................
BOCA Y NARIZ (2).pdf....................
 
4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docx
4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docx4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docx
4° UNIDAD 2 SALUD,ALIMENTACIÓN Y DÍA DE LA MADRE 933623393 PROF YESSENIA CN.docx
 
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde5º SOY LECTOR PART1- MD  EDUCATIVO.pdfde
5º SOY LECTOR PART1- MD EDUCATIVO.pdfde
 
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docxEJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
EJEMPLO MODELO DE PLAN DE REFUERZO ESCOLAR.docx
 
Unidad 2 | Teorías de la Comunicación | MCDIU
Unidad 2 | Teorías de la Comunicación | MCDIUUnidad 2 | Teorías de la Comunicación | MCDIU
Unidad 2 | Teorías de la Comunicación | MCDIU
 
programa PLAN ANUAL TUTORIA 3° SEC-2024.docx
programa PLAN ANUAL TUTORIA 3° SEC-2024.docxprograma PLAN ANUAL TUTORIA 3° SEC-2024.docx
programa PLAN ANUAL TUTORIA 3° SEC-2024.docx
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entorno
 
Sesión ¿Amor o egoísmo? Esa es la cuestión
Sesión  ¿Amor o egoísmo? Esa es la cuestiónSesión  ¿Amor o egoísmo? Esa es la cuestión
Sesión ¿Amor o egoísmo? Esa es la cuestión
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
 

Html - Tema 2: Enlaces, Imágenes y Listas

  • 1. Hyper Text Markup Language Tema 2: Enlaces, Imágenes, Listas © Abril, 2015 Prof. Renny Batista
  • 2. Los enlaces (links)  Los enlaces se encuentran en casi todas las páginas web, permiten a los usuarios hacer clic para poder ir desde una página a otra.  Un hipervínculo es un texto o una imagen en la que se puede hacer clic y saltar a otro documento.  En HTML, enlaces se definen con la etiqueta <a>: <a href="url">link text</a> <a href="http://www.google.com">Ir a google</a> Abril, 2015 2
  • 3. Los enlaces (links) <a href="http://www.google.com">Ir a google</a>  El atributo href especifica la dirección de destino (http://www.google.com)  El texto del enlace es la parte visible (Ir a google).  Al hacer clic sobre el texto del enlace, le enviará a la dirección especificada.  El texto del vínculo no tiene que ser solo un texto. Puede ser una imagen HTML o cualquier otro elemento HTML. Abril, 2015 3
  • 4. Los enlaces (links)  Un enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen. <a href="http://www.ejemplo.com/fondo.jpg">Imagen para un fondo de escritorio</a>  De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc. <a href="http://www.ejemplo.com/informe.pdf">Descargar informe</a>  Un truco muy útil con los enlaces es el uso de URL relativas para poder volver al inicio del sitio Web desde cualquier página Web interior:  <a href="/">Volver al inicio</a> Abril, 2015 4
  • 5. Los enlaces (links)  Al mover el cursor del ratón sobre un enlace, normalmente sucede que: – El puntero del ratón se convertirá en una pequeña mano – El color del elemento de enlace va a cambiar  Por defecto, los enlaces aparecerán en todos los navegadores de la siguiente forma: – Un enlace no visitado está subrayado y azul – Un enlace visitado es subrayada y púrpura – Un vínculo activo es subrayada y roja Abril, 2015 5
  • 6. Los enlaces (links)  Se puede cambiar los valores predeterminados para los enlaces, utilizando estilos definiendo sus características utilizando la etiqueta <style> dentro del <head>: <head> <style> a:link {color:#000000; background-color:transparent; text-decoration:none} a:visited {color:#000000; background-color:transparent; text-decoration:none} a:hover {color:#ff0000; background-color:transparent; text-decoration:underline} a:active {color:#ff0000; background-color:transparent; text-decoration:underline} </style> </head> Abril, 2015 6
  • 7. Los enlaces: el atributo “target”  El atributo de target especifica dónde abrir el documento vinculado. Abril, 2015 7 Valor del target Descripción _blank Abre el documento vinculado en una nueva ventana o pestaña _self .Abre el documento vinculado en el misma pestaña o marco donde se ha hecho clic (por defecto) _parent Abre el documento vinculado en el marco padre _top Abre el documento vinculado en toda la ventana (cuando se utilizan frames) framename Abre el documento vinculado en el marco definido (nombre del frame)
  • 8. Los enlaces: imágenes como enlaces  En un documento HTML es común utilizar una imagen como un enlace. <a href="http://www.google.com"> <img src="google.png" alt="Ir a google!" style="width:50px;height:50px;border:0"> </a> Abril, 2015 8
  • 9. Los enlaces: el atributo “id”  El atributo id puede ser usado para crear un “marcador” dentro de un documento HTML.  Los “marcadores” no se muestran de un modo especial. Son invisibles para el lector:  Ejemplo, añadimos un atributo al elemento <a> <a id="tips">Sección de consejos</a>  A continuación, cree un vínculo al elemento <a> (“Visite la sección de consejos”) añadimos un atributo al elemento: <a href="#tips">Visite la sección de consejos</a>  Para acceder a una sección de un documento desde otro enlace utilizamos: <a href="http://www.ejemplo.com/pagina.htm#tips"> Visite la sección de consejos</a> Abril, 2015 9
  • 10. Imágenes en HTML  En HTML, las imágenes se definen con la etiqueta <img>.  La etiqueta <img> es una de las pocas etiquetas vacías, contiene atributos solamente, y no posee una etiqueta de cierre.  El atributo src define la url (dirección web) de la imagen. <img src="url" alt="some_text">  El atributo alt especifica un texto alternativo para la imagen, si no se puede mostrar. El valor del atributo alt debe describir la imagen en palabras. <img src="html5.gif" alt=“El logo oficial de HTML5">  Se requiere usar el atributo alt. Una página web no se valida correctamente sin este atributo. Abril, 2015 10
  • 11. Imágenes en HTML: Ancho y alto  Puede utilizar el atributo de estilo para especificar la anchura (width) y altura (height) de una imagen. Los valores se especifican en píxeles (Utilizar px después del valor): <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">  Alternativamente, puede utilizar los atributos de anchura y altura. Los valores se especifican en píxeles (sin px después del valor): <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> Abril, 2015 11
  • 12. Imágenes en HTML: Ubicación  Si no se especifica, el navegador espera encontrar la imagen en la misma carpeta que la página web.  Sin embargo, es común en la web, que las imágenes se almacenan en una subcarpeta (/images), y se refieren a la carpeta en el nombre de la imagen: <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">  Si un navegador no puede encontrar una imagen, se mostrará un icono de enlace roto: Abril, 2015 12
  • 13. Imágenes en HTML: Ubicación  Algunos sitios web almacenan sus imágenes en servidores de imágenes. En realidad, se puede acceder a las imágenes desde cualquier dirección web en el mundo: <img src="http://www.w3schools.com/images/w3schools_green.jpg">  En los documentos HTML es común utilizar una imagen como un enlace (link) <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"></a> Abril, 2015 13
  • 14. Imágenes en HTML: Mapas de imagenes  Para una imagen, se puede crear un mapa de imagen (<map>) con zonas seleccionables: <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;h eight:126px"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>  El <area> define un área dentro de un mapa-imagen  El elemento <area> está siempre anidado dentro de un <mapa> etiqueta. Abril, 2015 14
  • 15. Imágenes en HTML: Imagen flotante  Se puede colocar una imagen flotante a la izquierda o a la derecha de un párrafo utilizando el atributo style y la propiedad float : <p> <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px"> A paragraph with an image. The image floats to the left of the text. </p> Abril, 2015 15
  • 16. Listas en HTML  En HTML se pueden tener listas no ordenadas, listas ordenadas o listas de descripción. Abril, 2015 16
  • 17. Listas no ordenadas  Una lista no ordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>.  Los elementos de la lista por defecto se marcarán con pequeños círculos negros. <ul> <li>Primero</li> <li>Segundo</li> <li>Tercero</li> </ul> Abril, 2015 17
  • 18. Listas no ordenadas  Un atributo de estilo puede ser añadido a una lista no ordenada, para definir el estilo del marcador (viñeta): Abril, 2015 18 Style Descripción list-style-type:disc Los elementos de la lista se marcará con círculos negros list-style-type:circle Los elementos de la lista serán marcados con círculos list-style-type:square los elementos de la lista estará marcado con cuadrados list-style-type:none Los elementos de la lista no se marcarán
  • 19. Listas no ordenadas <ul style="list-style-type:circle"> <li>Café</li> <li>Leche</li> <li>Jugo</li> </ul> Abril, 2015 19 <ul style="list-style-type:square"> <li>Café</li> <li>Leche</li> <li>Jugo</li> </ul>
  • 20. Listas ordenadas  Una lista ordenada comienza con la etiqueta <ol>. Cada elemento de la lista comienza con la etiqueta <li>.  Los elementos de la lista serán marcados con los números. <ol> <li>Primero</li> <li>Segundo</li> <li>Tercero</li> </ol> Abril, 2015 20
  • 21. Listas ordenadas  Un atributo type se puede añadir a una lista ordenada, para definir el tipo del marcador: Abril, 2015 21 Type Descripción Type=“1” Los elementos de la lista serán enumerados con números (por defecto) Type=“A” Los elementos de la lista serán enumerados con letras mayúsculas Type=“a” Los elementos de la lista serán enumerados con letras Type=“I” Los elementos de la lista serán enumerados con números romanos en mayúsculas Type=“i” Los elementos de la lista serán enumerados con números romanos en minúsculas
  • 22. Listas ordenadas <ol type="A"> <li>Café</li> <li>Leche</li> <li>Jugo</li> </ol> Abril, 2015 22 <ol type="I"> <li>Café</li> <li>Leche</li> <li>Jugo</li> </ol>
  • 23. Listas de descripción  Una lista de descripción, es una lista de términos, con una descripción de cada término.  El <dl> define una lista de descripciones.  La etiqueta <dt> define el término (nombre), y el <dd> define los datos (descripción). <dl> <dt>Café</dt> <dd>- Bebida caliente</dd> <dt>Leche</dt> <dd>- Bebida fría</dd> </dl> Abril, 2015 23
  • 24. Listas anidadas  Una lista puede contener una o más listas (anidadas) <ul> <li>Café</li> <li>Té <ul> <li>Té negro</li> <li>Té Verde</li> </ul> </li> <li>Leche</li> </ul> Abril, 2015 24
  • 25. Listas anidadas  Listas en HTML pueden ser personalizadas de muchas maneras diferentes aplicando CSS. Una forma popular, es personalizar una lista para ser mostrada horizontalmente ul#menu { padding: 0; } ul#menu li { display: inline; } ul#menu li a { background-color: black; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: orange; } Abril, 2015 25
  • 26. Listas anidadas <body> <h2>Horizontal List</h2> <ul id="menu"> <li><a href="/html/default.asp">HTML</a></li> <li><a href="/css/default.asp">CSS</a></li> <li><a href="/js/default.asp">JavaScript</a></li> <li><a href="/php/default.asp">PHP</a></li> </ul> </body> Abril, 2015 26
  • 27. Bibliografías Abril, 2015 27 Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es 2008. Creative Commons reconocimiento no comercial - sin obra derivada 3.0 W3Schools a web developers site. http://www.w3schools.com