Seleccionar página

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

(Ver demo en html)

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.

Elementos HTML

Los elementos, atributos y valores de atributo en HTML se definen (por esta especificación) para tener ciertos significados (semántica). Por ejemplo el elemento ol representa una lista ordenada y el atributo lang representa el idioma del contenido.

Debido a que HTML transmite significado, en lugar de presentación, la misma página puede ser utilizada por un pequeño navegador en un teléfono móvil, sin ningún cambio en la página. En lugar de que los encabezados estén en letras grandes como en el escritorio, por ejemplo, el navegador del teléfono móvil puede usar el mismo tamaño de texto para toda la página, pero con los encabezados en negrita.

Pero va más allá de las diferencias en el tamaño de la pantalla: la misma página podría ser utilizada igualmente por un usuario ciego que usa un navegador basado en síntesis de voz, que en lugar de mostrar la página en una pantalla, lee la página al usuario, por ejemplo, usando auriculares. En lugar de texto grande para los títulos el navegador de voz puede usar un volumen diferente o una voz más lenta.

Los autores no deben utilizar elementos, atributos o valores de atributo para fines distintos de su propósito semántico previsto apropiado, ya que al hacerlo se impide que el software procese correctamente la página.

Ejemplo

Por ejemplo, el siguiente fragmento, que pretende representar el encabezado de un sitio corporativo, no es conforme porque la segunda línea no pretende ser un encabezado de una subsección, sino simplemente un subtítulo o subtítulo (un encabezado subordinado para la misma sección).

        <body>
            
            <h1>Francisco González CORPORACIÓN</h1>
            <h2> Creada en Madrid 
            por primera vez en el año 1998</h2>
        </body>
    

El elemento hgroup está destinado a este tipo de situaciones:

        <body>
            <hgroup>
            <h1>Francisco González CORPORACIÓN</h1>
            <h2> Creada en Madrid 
            por primera vez en el año 1998</h2>
           </hgroup>
            </body>
    

Contenido de metadatos

El contenido de metadatos es el contenido que establece la presentación o el comportamiento del resto del contenido, o que establece la relación del documento con otros documentos, o que transmite otra información «fuera de banda».

base, link, meta, noscript, script, style, template, title

La mayoría de los elementos que se utilizan en el cuerpo de documentos y aplicaciones se clasifican como contenido de flujo

a, abbr, address, area, map, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dtails, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, label, link, main, map, mark, math, menu, meta, itemprop, meter, nav, noscript, object, ol, output, p, picture, pre, progress, q, ruby, s, samp, script, section, select, slot, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr

A continuacion puedes ver una lista de Elementos HTML5 en formato PDF: Elementos HTML5 PDF

Contenido incrustado

El contenido incrustado es contenido que importa otro recurso en el documento o contenido de otro vocabulario que se inserta en el documento.

«audio, canvas, embed, iframe, img, match, object, picture, svg, video«

Metaetiquetas o Meta Tags HTML

Las metaetiquetas HTML suministran información codificada a navegadores y motores de búsqueda sobre una página web. Las metaetiquetas tienen una estructura determinada. Primero se define un elemento y segundo se asigna un contenido. Las meta tags son etiquetas (cadenas de texto o breves líneas de código HTML), que están ocultas y se insertan dentro del código HTML de las páginas web o blogs.

Meta tags es el nombre en inglés de los llamados “elementos meta” o “meta etiquetas” en español. Éstos son ni más ni menos que un código HTML que se inserta en toda página web para que lo lean los motores de búsqueda, con la finalidad de incluir información de referencia sobre la página en en forma de metadatos.

Las metaetiquetas son unas etiquetas pertenecientes al HTML que se deben escribir dentro del tag general <head> y que lo podemos definir como líneas de código que indican a los buscadores que indexan la página por qué términos debe ser encontrada. El uso de las meta etiquetas puede marcar la diferencia a la hora de mejorar el tráfico de tus páginas. Y, de manera más general, cuando quieres impulsar el posicionamiento de tu sitio web. Hay diferentes tipos de meta etiquetas y cada una posee su propia función, pero no todas son relevantes para el posicionamiento web.

Puedes ver las metaetiquetas HTML en el enlace que figura a continuación.

Metaetiquetas HTML

También pudes abrir el Documento PDF: Metaetiquetas HTML.PDF

Normas HTML

En este tutorial aprenderá cómo podemos mostrar nuestro código HTML en una página web. Las etiquetas utilizadas para mostrar el código HTML

CÓDIGO VISOR HTML