Etiquetas para estructurar texto en HTML - 4 parte

Etiquetas para estructurar texto

Lic. Wendy Navia Ch.

ADSIBAgencia para el Desarrollo de la Sociedad de la Información en Bolivia

Email: [email protected]://www.adsib.gob.bo

4 PARTE

Necesitamos tener nuestra estructura base

<!DOCTYPE html>

<html >

<head>

<meta charset="UTF-8"/>

<title>Título de la Página

</title>

</head>

<body>

Aquí va el contenido de la página

</body>

</html>


Etiquetas de enlace

Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url.


Etiqueta <a>Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así.

Etiqueta href <!DOCTYPE html><html><head>

<meta charset="UTF-8"/><title>Mi primera página web</title>

</head><body>

<a href=“enlace”>Pincha aquí para ir al destino del enlace</a>

</body></html>

Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedaría así:

Direcciones absolutas

<!DOCTYPE html><html><head>


</head><body>

<a href=“enlace”>Pincha aquí para ir al destino del enlace</a><a href="http://bookboon.com/es/c-c-c-ebooks">Artículo de enlaces html</a>

</body></html>

Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es el siguiente:

Si haces correr y pasas el puntero del mouse por las letras y le das un clic, te manda a la dirección url que pusiste.


Etiqueta target

La etiqueta sirve para definir la forma en la que se accederá a la nueva url. Esta etiqueta la escribimos dentro del enlace para predefinirla:

_blank: Para hacer que ese enlace se abra en una ventana a parte.



</head><body>

<a href=“”>Pincha aquí para ir al destino del enlace</a> <br><a href="http://librosweb.es/" target="_blank" > Clic aquí</a>

</body></html>


Hagamos ejercicio



</head><body>

<a href="http://html.hazunaweb.com/112.php" target="_blank"><img src="http://html.hazunaweb.com/html/imagenes/prueba-enlace.jpg" alt="Pincha

para ir al enlace" width="300" height="214" border="0"></a></body></html>

Hagamos que la imagen tenga un hipervinculo a otra página, al hacer clic que aparezca en otra ventana, demosle un ancho y alto de la imagen y que no tenga borde.


Tablas

La etiqueta <table> se utiliza para definir una tabla.

Las tablas se componen con las siguientes etiquetas:

<table> Define una tabla

<tr> Define una fila

<th> Define un encabezamiento

<td> Define una celda (columna)

Hagamos un ejemplo !!!




</head><body>

<table border="1"> <tr> <th>Nombres</th> <th>Edad</th> </tr> <tr> <td>María</td> <td>15</td> </tr> <tr> <td>Juan</td> <td>13</td> </tr></table></html> Lic. Wendy Navia Ch.

Arriba del todo, tenemos la Cabecera, que es el lugar donde solemos tener el logo, nombre, y pequeñas descripciones de nuestra página web.

Debajo de la cabecera, podemos ver la Barra de Navegación, en la que casi cualquier desarrollador ofrece un menu o lista de links para poder navegar por el sitio web.

La sección de Información Principal, podría tener por ejemplo, una lista de artículos, descripciones de productos, entradas de blog y cualquier otra información importante.

La Barra Lateral podría tener por ejemplo, una lista de links apuntando a cada uno de estos items.

Barra Institucional área de la página donde tenemos información general del sitio web, el autor o la compañía.


Etiquetas de estructurado

CABECERA donde va el nombre del sitio, el logotipo y descripción de la pagina web.

SECTION contenido dentro de una etiqueta llamada ARTICLE para artículos

Barra de Navegación

Pie de Página

Barra lateral está situada al lado de la barra de contenido principal.


Escribamos el Código Fuente<!DOCTYPE html><html lang="es"><head> <title>Titulo de la web</title></head>

<body>   <header> <h1>Mi sitio web</h1> <p>Mi sitio web creado en html5</p> </header> 

 <section> <article> <h2>Titilo de contenido<h2> <p> Contenido (ademas de imagenes, citas, videos etc.) </p> </article> </section> 

 <aside> <h3>Titulo de contenido </h3> <p>contenido</p> </aside> 

 <footer> Creado por mi el 2011 - pie de la página </footer> </body></html> Lic. Wendy Navia Ch.

Etiquetas para estructurar texto en HTML - 4 parte

Technology

Transcript of Etiquetas para estructurar texto en HTML - 4 parte