Embed Size (px)
DESCRIPTION
Citation preview
1
HYPER TEXT MARKUP LANGUAGEHTML 2
InstructorUgo Andrés Sánchez Baeza
2
CONTENIDO
Enlaces
Encabezamientos
Listados
Tablas
3
EnlacesEnlaces :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/Colombia
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
4
EnlacesUna 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/wiki/Colombia"> Colombia en wikipedia</a>
Lo que hace es ir a la pagina : http://es.wikipedia.org/wiki/ColombiaCuando se hace clic en el texto Colombia en wikipedia de la pagina web.
Agregamos esto al final de la pagina que estábamos trabajando.
5
Pagina webEnlacesAtributo 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.
6
Enlaces
Me lleva a
7
EnlacesPara 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:[email protected]"> Correo a Juan Perez </a>
8
EnlacesImá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/07/bandera-colombia.jpg
9
EnlacesCó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.
10
EnlacesCambio de Tamaños .Ejemplo:• <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="299" height="192">
• <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">
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>
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ño 1</h1><h2>Encabezamiento de tamaño 2</h2><h3>Encabezamiento de tamaño 3</h3><h4>Encabezamiento de tamaño 4</h4><h5>Encabezamiento de tamaño 5</h5><h6>Encabezamiento de tamaño 6</h6>
</body></html>
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ánica<li> Ingenieria Eléctrica<li> Ingenieria Electró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.
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.
<!Doctype html><html><head><title>Listados no ordenados</title></head><body><ul><li> Arte<li> Ciencia<li> Arquitectura<li> Ingenierial Civil<li> Ingenieria Mecánica<li> Ingenieria Eléctrica<li> Ingenieria Electrónica <li> Ingenieria Sistemas</ul></body></html>
15
Listas<!Doctype html><html><head><title>Listados ordenados</title></head><body><ol><li> Artes<ul><li> Dibujo<li> Ciencia</ul><li> Ingenierías<ul><li> Arquitectura<li> Ingenierial Civil<li> Ingenieria Mecánica<li> Ingenieria Eléctrica<li> Ingenieria Electrónica <li> Ingenieria Sistemas</ul></ol></body></html>
Listas anidadasEs la combinación de las listas ordenadas y las no ordenadas.
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>
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.
18
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
