05 Enlaces

 Otra parte importante de cualquier sitio web son los enlaces, tanto internos (dentro del documento) como externos (dirigidos a otros sitios web).

Para ello usaremos la etiqueta “a” en la que indicaremos en la propiedad “href” a donde queremos dirigirnos.

Con la propiedad “target” indicamos que el documento se abra en una pestaña distinta del navegador, si no incluimos esta opción, el documento se abrirá en la pestaña activa.

Aquí tienes algunos ejemplos de enlaces:

<h2>Enlace externo</h2>

<a href="http://ticoticotaa.es" target="_blank">Mi web</a>

<h2>Enlace interno</h2>

<a href="#parrafo_interno">Enlace interno</a>

<h2>Enlace vacio</h2>

<a href="#">Enlace vacio</a>

07 Html Css. Enlaces, listas e imagenes

Como crear enlaces, listas e imagenes con etiquetas #Html, crea tu #web

Este seria el codigo de ejemplo:

<!DOCTYPE html><html><head><title>Enlaces, Imagenes y Listas</title><meta charset="utf-8"></head><body><!--Cabecera--><header>
</header> <!--Barra navegacion--><nav>
</nav><!--Contenido principal--><section><article><!--Enlaces--><a href="#">Enlace</a><a href="http://www.google.es">Google</a><a href="http://www.google.es" target="_blank">Google</a><!--Imagenes--><figure><img src="milogo.jpg" alt="logo"></figure><!--Listas--><h2>Listas</h2><h3>Ordenadas</h3><ol><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ol><h3>Desordenadas</h3><ul><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li></ul></article></section><!--Complemento lateral--><aside>
</aside><!--Pie de pagina--><footer>
</footer></body></html>

07. CSS Enlaces

Modificamos propiedades de enlaces y puntero de raton mediante CSS.

El codigo HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/enlaces.css">
<title>
Enlaces y cursor
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p>Enlace sin subrayado <a class="sinsubrayado" href="#">Enlace sin</a></p>
<p>Enlace normal <a class="normal" href="#">Enlace normal</a></p>
<p>Enlace normal 2 <a class="normal" href="#">Enlace normal 2</a></p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo CSS es:

/*www.ticoticotaa.es*/
/*@2016*/
*{
   
}
.sinsubrayado{
    text-decoration:none;
    border:none;
   
}
.normal{
    cursor:pointer; /*default  pointer*/
}
a:hover{
    color:red;
}
a:visited{
    color:yellow;
}
p:hover{
    color:pink;
}

Espero sea util, gracias.