Html2

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

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

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

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>

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

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

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

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

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>
</body>
</html>
12

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

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
</ul>
</body>
</html>

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
</ul>
</ol>
</body>
</html>
Listas anidadas
Es la combinación
de las listas
ordenadas y las no
ordenadas.
15

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

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

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

Html2

Más contenido relacionado

La actualidad más candente

Similar a Html2

Más de Ugo Sanchez Baeza Profesor

Último

Html2