HYPER TEXT MARKUP LANGUAGE 
HTML 2 
Instructor 
Ugo Andrés Sánchez Baeza 
ugoandresprofesor@gmail.com 
1
CONTENIDO 
Enlaces 
Encabezamientos 
Listados 
Tablas 
2
Enlaces 
Enlaces : 
Para realizar un enlace entre dos 
paginas, se debe tener clara la 
ubicación de la pagina web o url 
...
Enlaces 
Una vez tenemos la ubicación de la pagina 
web que se necesita enlazar y el texto a 
trabajar usamos el siguiente...
Pagina web 
Enlaces 
Atributo Target 
_blank : Carga en una 
ventana nueva. 
_self : Carga en la misma 
ventana. 
_parent ...
Enlaces 
6 
Me lleva a
Enlaces 
7 
Para hacer un enlace que 
nos permita escribirle a 
una persona, haciendo el 
llamado a un programa 
administr...
Enlaces 
Imágenes: 
Al igual que con el enlace, lo 
primero es ubicar la imagen, el URL 
de la imagen o la ubicación de es...
Enlaces 
Código para incluir una imagen en una pagina web : 
<img src="http://blogs.eltiempo.com/la-lupa-opinion-al-detall...
Enlaces 
Cambio de Tamaños . 
Ejemplo: 
• <img 
src="http://blogs.eltiempo.com 
/la-lupa-opinion-al-detalle/wp-content/ 
u...
Enlaces 
Iniciamos con la etiqueta del 
Enlace, 
Insertamos la etiqueta de la 
Imagen, 
Cerramos con la etiqueta de 
cierr...
Encabezamientos 
Los encabezamientos o 
títulos vienen dados por 
la marcación <h#> y 
funciona del 1 al 6 
siendo 6 el 
e...
Listas 
<!Doctype html> 
<html> 
<head> 
<title> 
Listados ordenados 
</title> 
</head> 
<body> 
<ol> 
<li> Arte 
<li> Cie...
Listas 
Listas no ordenadas 
Van sin numerar y se 
trabajan con la <ul> 
(unordered list). 
Luego se colocan los Items 
de...
Listas 
<!Doctype html> 
<html> 
<head> 
<title> 
Listados ordenados 
</title> 
</head> 
<body> 
<ol> 
<li> Artes 
<ul> 
<...
Tablas 
La elaboración de tablas tiene una 
pequeña complejidad. 
Requiere atención, esta debe iniciar 
con el marcado de ...
Tablas 
<!Doctype html> 
<html> 
<head> 
<title> 
Tablas con bordes 
</title> 
</head> 
<body> 
<table border="1" > 
<tr> ...
18
Bibliografía 
• http://es.wikipedia.org/wiki/Colombia 
• http://www.w3schools.com 
• http://es.wikipedia.org/wiki/Localiza...
Próxima SlideShare
Cargando en…5
×

Html2

340 visualizaciones

Publicado el

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
340
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Html2

  1. 1. HYPER TEXT MARKUP LANGUAGE HTML 2 Instructor Ugo Andrés Sánchez Baeza ugoandresprofesor@gmail.com 1
  2. 2. CONTENIDO Enlaces Encabezamientos Listados Tablas 2
  3. 3. Enlaces Enlaces : Para realizar un enlace entre dos paginas, se debe tener clara la ubicación de la pagina web o url que se va a enlazar. http://es.wikipedia.org/wiki/Colo mbia Además hay que tener una referencia o un texto que permita visualizar la pagina a la que se hace enlace, en este caso ; Colombia en wikipedia 3
  4. 4. Enlaces Una vez tenemos la ubicación de la pagina web que se necesita enlazar y el texto a trabajar usamos el siguiente código. <a href="http://es.wikipedia.org/wi ki/Colombia"> Colombia en wikipedia</a> Lo que hace es ir a la pagina : http://es.wikipedia.org/wiki/Colombia Cuando se hace clic en el texto Colombia en wikipedia de la pagina web. Agregamos esto al final de la pagina que estábamos trabajando. 4
  5. 5. Pagina web Enlaces Atributo Target _blank : Carga en una ventana nueva. _self : Carga en la misma ventana. _parent : carga la pagina en la pestaña anterior. _ top: lo carga en todo el cuerpo de la pagina. framename: lo carga en el recuadro (Frame) especificado. 5
  6. 6. Enlaces 6 Me lleva a
  7. 7. Enlaces 7 Para hacer un enlace que nos permita escribirle a una persona, haciendo el llamado a un programa administrador de correo electrónico. Se debe usar el siguiente código : <a href="mailto:juanper ez@gmail.com"> Correo a Juan Perez </a>
  8. 8. Enlaces Imágenes: Al igual que con el enlace, lo primero es ubicar la imagen, el URL de la imagen o la ubicación de esta en la estructura de la pagina web. En el caso actual la pagina donde esta la imagen de la bandera de Colombia es : http://blogs.eltiempo.com/la-lupa-opinion- al-detalle/wp-content/ uploads/sites/231/2014/0 7/bandera-colombia.jpg 8
  9. 9. Enlaces Código para incluir una imagen en una pagina web : <img src="http://blogs.eltiempo.com/la-lupa-opinion-al-detalle/wp-content/ uploads/sites/231/2014/07/bandera-colombia.jpg" alt="Bandera de Colombia" width="598" height="384"> img : Esta indicando el manejo de la imagen. src : Es la fuente de la cual se obtiene la imagen. alt : Alternativo, para darle un nombre o referencia a la imagen. width : Indica el ancho de la imagen. height : Indica el alto de la imagen. Incluimos el código en la pagina que hemos venido trabajando y podemos ver los resultados. Igualmente podemos cambiar los tamaños de el ancho y del alto. Para ver los resultados. 9
  10. 10. Enlaces Cambio de Tamaños . Ejemplo: • <img src="http://blogs.eltiempo.com /la-lupa-opinion-al-detalle/wp-content/ uploads/sites/231/201 4/07/bandera-colombia.jpg" alt="Bandera de Colombia" width="299" height="192"> • <img src="http://blogs.eltiempo.com /la-lupa-opinion-al-detalle/wp-content/ uploads/sites/231/201 4/07/bandera-colombia.jpg" alt="Bandera de Colombia" width="150" height="146"> 10
  11. 11. Enlaces Iniciamos con la etiqueta del Enlace, Insertamos la etiqueta de la Imagen, Cerramos con la etiqueta de cierre de enlace. Coloca una imagen en la pagina, que haga un enlace, con otra página. (Anidamiento de etiquetas). La bandera de Colombia, lleva a la pagina de la presidencia . <a href=" www.presidencia.gov.co" target= "_blank " > <img src="http://blogs.eltiempo.com/la-lupa- opinion-al-detalle/wp-content/ uploads/sites/231/2014/07/ bandera-colombia.jpg" alt="Bandera de Colombia" width="150" height="146"> </a> 11
  12. 12. Encabezamientos Los encabezamientos o títulos vienen dados por la marcación <h#> y funciona del 1 al 6 siendo 6 el encabezamiento mas pequeño. Comúnmente su usa <h3> para resaltar un titulo. <!Doctype html> <html> <head> <title> Encabezamientos </title> </head> <body> <h1>Encabezamiento de tama&ntilde;o 1</h1> <h2>Encabezamiento de tama&ntilde;o 2</h2> <h3>Encabezamiento de tama&ntilde;o 3</h3> <h4>Encabezamiento de tama&ntilde;o 4</h4> <h5>Encabezamiento de tama&ntilde;o 5</h5> <h6>Encabezamiento de tama&ntilde;o 6</h6> </body> </html> 12
  13. 13. Listas <!Doctype html> <html> <head> <title> Listados ordenados </title> </head> <body> <ol> <li> Arte <li> Ciencia <li> Arquitectura <li> Ingenierial Civil <li> Ingenieria Mec&aacute;nica <li> Ingenieria El&eacute;ctrica <li> Ingenieria Electr&oacute;nica <li> Ingenieria Sistemas </ol> </body> </html> Listas ordenadas Van numeradas y se trabajan con la <ol> (ordered list). Luego se colocan los Items de cada una. <li> (list item). La etiqueta <ol> no aparece en la pagina web, pero hace que aparezca la numeración. 13
  14. 14. Listas Listas no ordenadas Van sin numerar y se trabajan con la <ul> (unordered list). Luego se colocan los Items de cada una. <li> (list item). La etiqueta <ul> no aparece en la pagina web, pero hace que aparezca una señal de diferenciacion. 14 <!Doctype html> <html> <head> <title> Listados no ordenados </title> </head> <body> <ul> <li> Arte <li> Ciencia <li> Arquitectura <li> Ingenierial Civil <li> Ingenieria Mec&aacute;nica <li> Ingenieria El&eacute;ctrica <li> Ingenieria Electr&oacute;nica <li> Ingenieria Sistemas </ul> </body> </html>
  15. 15. Listas <!Doctype html> <html> <head> <title> Listados ordenados </title> </head> <body> <ol> <li> Artes <ul> <li> Dibujo <li> Ciencia </ul> <li> Ingenier&iacute;as <ul> <li> Arquitectura <li> Ingenierial Civil <li> Ingenieria Mec&aacute;nica <li> Ingenieria El&eacute;ctrica <li> Ingenieria Electr&oacute;nica <li> Ingenieria Sistemas </ul> </ol> </body> </html> Listas anidadas Es la combinación de las listas ordenadas y las no ordenadas. 15
  16. 16. Tablas La elaboración de tablas tiene una pequeña complejidad. Requiere atención, esta debe iniciar con el marcado de identificación <table> . Luego se identifican las filas <tr>, luego las celdas <td>. Igualmente se cierran para poder crear el efecto de tabla. Se debe tener en cuenta otras opciones que vamos a explicar mas adelante. <!Doctype html> <html> <head> <title> Tablas </title> </head> <body> <table> <tr> <td>Juan</td> <td>Perez</td> <td>50</td> </tr> <tr> <td>Eva</td> <td>Jaramillo</td> <td>94</td> </tr> </table> </body> </html> 16
  17. 17. Tablas <!Doctype html> <html> <head> <title> Tablas con bordes </title> </head> <body> <table border="1" > <tr> <td>Juan</td> <td>Perez</td> <td>50</td> </tr> <tr> <td>Eva</td> <td>Jaramillo</td> <td>94</td> </tr> </table> </body> </html> Podemos agregar bordes ala tabla y su visualización cambia. Si usamos la etiqueta <th> Reemplazando las <td>, creamos una celda de encabezamiento. 17
  18. 18. 18
  19. 19. Bibliografía • http://es.wikipedia.org/wiki/Colombia • http://www.w3schools.com • http://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme • http://es.wikipedia.org/wiki/Dominio_de_Internet 19

×