Francisco Gonzalez

Universo HTML

Enlaces HTML

Vamos a cambiar los enlaces por defecto que tienen las páginas web HTML, por nuestro enlace personalizado, mejor explicado, tal y como se muestran en esta misma página Universo HTML. Este es el enlace de prueba: HIPERVÍNCULO.

El propósito es que el enlace sea de color gris, que no esté subrayado, que cambia al color azul al pasar el ratón, y que una vez que se haya visitado, adopte el color negro. Repito que es el mismo tipo de enlace que tenéis en esta pagina.

Estas son las Instrucciones:

Entre las etiquetas <style> y </style> insertaremos el siguiente código:

 
  a {
  color: gray;
  text-decoration:none;
}
a:hover {
  color: blue;
}
a:visited {
  color: black;
}

Posteriormente podrás realizar las modificaciones que estimes oportunas, y que más se adapten a tus necesidades y diseño web.

Botón como Enlace


Introducción 2

Este botón sirve de hipervínculo o enlace, que nos lleve a una dirección URL. Sólo se necesita modificar la URL en cuestión.

Instrucciones para insertar un botón HTML en una web

Primero vamos a ver el código HTML del botón que debe ir entre las etiquetas <body> y </body>:

<a class="boton" href="https://www.franciscogonzalez.page/Intro-2" target="_blank">Introducción 2</a>

Estas son las Instrucciones CSS:

Entre las etiquetas <style> y </style> insertaremos el siguiente código:

 
  .boton{
    text-decoration: none;
    padding: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #818181;
    background-color: #ffffff;
    border-radius: 6px;
    border: 2px solid #000000;
  }
  .boton:hover{
    color: #3932EA;
    background-color: #ffffff;
  }

Imagen con enlace HTML

Una imagen con enlace cumple la función de llevarnos a una dirección web, haciendo clic en la propia imagen, sin necesidad de botones o hipervínculos tipo texto. La imagen es visual y gráfica, y representa, en muchas ocasiones, mediante iconos y otros símbolos, una idea abstracta de a donde nos puede llevar el propio enlace. Vamos a realizar un ejemplo en el que un icono de imagen nos enlace con un archivo PDF.

Cookies de Google

Instrucciones para insertar una imagen con enlace HTML

Primero vamos a insertar la imagen, en nuestra página web, y para eso vamos a ver a continuación el código HTML:

<a href="cookies-de-google.pdf" target="_blank"><img title="Cookies de Google" src="icono-PDF.png" alt="Cookies de Google" style="border-width:0px"/></a>

Conocer lor principios básicos de HTML es cuestión de unos pocos días de lectura y práctica del código. Lo que hemos visto hasta aquí son referencias básicas de HTML. Hemos saltado la parte introductoria como lo que es una estructura básica de una Página HTML, la cual puedes ver al abrir a continuación la imagen:

Abrir Imagen

También puedes descargar el contenido en formato archivo .rtf a través del siguiente enlace:

Descargar Archivo

Sin embargo, usar HTML y diseñar buenos sitios web es una historia diferente, . Por eso trato de enseñar unos consejos de código aquí, para que puedas lograr realizar tu web de forma profesional. El aprendizaje de técnicas y el uso correcto del conocimiento de las etiquetas HTML, podrán mejorar enormemente tu trabajo.