Estructurar texto HTML con etiquetas

Etiquetas para estructurar texto
Lic. Wendy Navia Ch.
ADSIB
Agencia para el Desarrollo de la Sociedad de la Información en Bolivia
Email: ncwi0509@gmail.com
http://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>
<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.
<!DOCTYPE html>
<html>
<head>
</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
<!DOCTYPE html>
<html>
<head>
</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 !!!

<!DOCTYPE html>
<html>
<head>
</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.

Estructurar texto HTML con etiquetas

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Estructurar texto HTML con etiquetas

Similar a Estructurar texto HTML con etiquetas (20)

Más de Wendy Navia Chambi

Más de Wendy Navia Chambi (14)

Último

Último (20)

Estructurar texto HTML con etiquetas