Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

miércoles, 4 de mayo de 2022

Imágenes HTML

Las imágenes pueden mejorar el diseño y la apariencia de una página web.

Ejemplo

<img src="pic_trulli.jpg" alt="Italian Trulli">

Ejemplo

<img src="img_.jpg" alt="img">

Ejemplo

<img src="img_pg" alt="Flowers">

Sintaxis de imágenes HTML


La etiqueta HTML se utiliza para incrustar una imagen en una página web.<img>

Las imágenes no se insertan técnicamente en una página web; las imágenes están vinculadas a páginas web. La etiqueta crea un espacio de retención para la imagen a la que se hace referencia.<img>

La etiqueta está vacía, contiene solo atributos y no tiene una etiqueta de cierre.<img>

La etiqueta tiene dos atributos obligatorios:<img>

  • src: especifica la ruta de acceso a la imagen
  • ALT: especifica un texto alternativo para la imagen

Sintaxis

<img src="url" alt="alternatetext">

El atributo src

El atributo requerido especifica la ruta de acceso (URL) a la imagen.src

Nota: Cuando se carga una página web, es el navegador, en ese momento, el que obtiene la imagen de un servidor web y la inserta en la página. Por lo tanto, asegúrese de que la imagen realmente permanezca en el mismo lugar en relación con la página web, de lo contrario sus visitantes obtendrán un icono de enlace roto. El icono de enlace roto y el texto se muestran si el navegador no puede encontrar la imagen.alt

Ejemplo

<img src="img_.jpg" alt="Flowers">

El atributo alt


El atributo requerido proporciona un texto alternativo para una imagen, si el usuario por alguna razón no puede verla (debido a una conexión lenta, un error en el atributo src o si el usuario utiliza un lector de pantalla).alt

El valor del atributo debe describir la imagen:alt

Ejemplo

<img src="img_.jpg" alt="Flowers">

Si un navegador no puede encontrar una imagen, mostrará el valor del atributo:alt

Ejemplo

<img src="wrongname.gif" alt="Flowers">
Propina: Un lector de pantalla es un programa de software que lee el código HTML y permite al usuario "escuchar" el contenido. Los lectores de pantalla son útiles para las personas con discapacidad visual o con discapacidades de aprendizaje.

Tamaño de la imagen- Ancho y alto

Puede utilizar el atributo para especificar el ancho y el alto de una imagen.style

Ejemplo

<img src="img_.jpg" alt="img" style="width:500px;height:600px;">

Alternativamente, puede utilizar los atributos y:widthheight

Ejemplo

<img src="img_.jpg" alt="img" width="500" height="600">

Los atributos y siempre definen el ancho y el alto de la imagen en píxeles.widthheight

Nota: Especifique siempre el ancho y el alto de una imagen. Si no se especifican el ancho y el alto, la página web puede parpadear mientras se carga la imagen.

¿Ancho y alto, o estilo?

Los atributos , y , son válidos en HTML.widthheightstyle

Sin embargo, sugerimos usar el atributo. Evita que las hojas de estilos cambien el tamaño de las imágenes:style

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Imágenes en otra carpeta

Si tiene sus imágenes en una subcarpeta, debe incluir el nombre de la carpeta en el atributo:src

Ejemplo

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Imágenes en otro servidor/sitio web

Algunos sitios web apuntan a una imagen en otro servidor.

Para apuntar a una imagen en otro servidor, debe especificar una dirección URL absoluta (completa) en el atributo:src

Ejemplo

<img src="https:/todoinfoinfo.blogspot.com/images/todoinfoinfo_green.jpg" alt="todoinfoinfo.blogspot.com">

Notas sobre imágenes externas: Las imágenes externas pueden estar bajo derechos de autor. Si no obtiene permiso para usarlo, puede estar violando las leyes de derechos de autor. Además, no puede controlar imágenes externas; se puede quitar o cambiar repentinamente.

Imágenes animadas

HTML permite GIF animados:

Ejemplo

<img src="programming.gif" alt="Computer" style="width:48px;height:48px;">

Imagen como enlace

Para usar una imagen como enlace, coloque la etiqueta dentro de la etiqueta:<img><a>

Ejemplo

<a href="default.asp">
  <img src="smile.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Imagen flotante


Utilice la propiedad CSS para permitir que la imagen flote a la derecha o a la izquierda de un texto:float

Ejemplo

<p><img src="smile.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smile.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Propina: Para obtener más información sobre CSS Float, lea nuestro Tutorial de CSS Float.

Formatos de imagen comunes

Estos son los tipos de archivos de imagen más comunes, que son compatibles con todos los navegadores (Chrome, Edge, Firefox, Safari, Opera):
  • AbbreviationFile FormatFile Extension
  • APNG Animated Portable Network Graphics .apng
  • GIF Graphics Interchange Format .gif
  • ICO Microsoft Icon .ico, .cur
  • JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
  • PNG Portable Network Graphics .png
  • SVG Scalable Vector Graphics .svg

Resumen del capítulo

  • Usar el elemento HTML para definir una imagen<img>
  • Usar el atributo HTML para definir la URL de la imagensrc
  • Utilice el atributo HTML para definir un texto alternativo para una imagen, si no se puede mostraralt
  • Utilice el HTML y los atributos o el CSS y las propiedades para definir el tamaño de la imagenwidthheightwidthheight
  • Utilice la propiedad CSS para permitir que la imagen flote hacia la izquierda o hacia la derechafloat
Nota: Cargar imágenes grandes lleva tiempo y puede ralentizar su página web. Use las imágenes con cuidado.

Etiquetas de imagen HTML

Tag Description
  • <img> Defines an image
  • <map> Defines an image map
  • <area> Defines a clickable area inside an image map
  • <picture> Defines a container for multiple image resources


Posted by at No hay comentarios:
Labels:

lunes, 2 de mayo de 2022

Enlaces HTML

 
Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic en su camino de una página a otra.


Enlaces HTML - Hipervínculos

Los enlaces HTML son hipervínculos.

Puede hacer clic en un enlace y saltar a otro documento.

Nota: Un enlace no tiene que ser texto. ¡Un enlace puede ser una imagen o cualquier otro elemento HTML!

Enlaces HTML - Sintaxis

La etiqueta HTML define un hipervínculo. Tiene la siguiente sintaxis:<a>

<a href="url">link text</a>

El atributo más importante del elemento es el atributo href, que indica el destino del enlace.<a>

El texto del enlace es la parte que será visible para el lector.

Al hacer clic en el texto del enlace, se enviará al lector a la dirección URL especificada.

Ejemplo

En este ejemplo se muestra cómo crear un vínculo a TodoInformación:

<a href="https://todoinfoinfo.blogspot.com/">Visit todoinfoinfo.blogspot.com!</a>

De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los navegadores:

  • Un enlace no visitado está subrayado y en azul
  • Un enlace visitado está subrayado y morado
  • Un enlace activo está subrayado y en rojo

Propina: Los enlaces, por supuesto, se pueden diseñar con CSS, ¡para obtener otro aspecto!

Vínculos HTML: el atributo de destino

De forma predeterminada, la página vinculada se mostrará en la ventana actual del navegador. Para cambiar esto, debe especificar otro destino para el vínculo.

El atributo especifica dónde abrir el documento vinculado.target

El atributo puede tener uno de los siguientes valores:target

_self - Por defecto. Abre el documento en la misma ventana/pestaña en la que se hizo clic en él
    _blank - Abre el documento en una nueva ventana o pestaña
      _parent - Abre el documento en el marco padre
        _top - Abre el documento en todo el cuerpo de la ventana


        Ejemplo

        Utilice target="_blank" para abrir el documento vinculado en una nueva ventana o pestaña del navegador:

        <a href="https://todoinfoinfo.blogspot.com/" target="_blank">Visit todoinfoinfo.blogspot.com!</a>


        URL absolutas frente a URL relativas

        Los dos ejemplos anteriores utilizan una URL absoluta (una dirección web completa) en el atributo.href

        Un enlace local (un enlace a una página dentro del mismo sitio web) se especifica con una URL relativa (sin la parte "https://www"):

        Ejemplo

        <h2>Absolute URLs</h2>
        <p><a href="https://www.w3.org/">W3C</a></p>
        <p><a href="https://www.google.com/">Google</a></p>

        <h2>Relative URLs</h2>
        <p><a href="html_images.asp">HTML Images</a></p>
        <p><a href="/css/default.asp">CSS Tutorial</a></p>

        Enlaces HTML - Usar una imagen como enlace

        Para usar una imagen como enlace, simplemente coloque la etiqueta dentro de la etiqueta:<img><a>

        Ejemplo

        <a href="default.asp">
        <img src="smile.gif" alt="HTML tutorial" style="width:42px;height:42px;">
        </a>

        Enlace a una dirección de correo electrónico

        Utilice dentro del atributo para crear un enlace que abra el programa de correo electrónico del usuario (para permitirle enviar un nuevo correo electrónico): mailto: href

        Ejemplo

        <a href="mailto:someone@example.com">Send email</a>

        Botón como enlace

        Para usar un botón HTML como enlace, debe agregar algo de código JavaScript.

        JavaScript le permite especificar lo que sucede en ciertos eventos, como un clic en un botón:

        Ejemplo

        <button onclick="document.location='default.asp'">HTML Tutorial</button>
        Propina: Obtenga más información sobre JavaScript en nuestro Tutorial de JavaScript.


        Títulos de enlaces

        El atributo especifica información adicional sobre un elemento. La información se muestra con mayor frecuencia como texto de información sobre herramientas cuando el mouse se mueve sobre el elemento.title

        Ejemplo

        <a href="https://todoinfoinfo.blogspot.com/html/" title="Go to todoinfoinfo.blogspot.com HTML section">Visit our HTML Tutorial</a>
        Más información sobre las URL absolutas y las URL relativas

        Ejemplo

        Utilice una URL completa para enlazar a una página web:

        <a href="https://todoinfoinfo.blogspot.com/html/default.asp">HTML tutorial</a>

        Ejemplo

        Vínculo a una página ubicada en la carpeta html del sitio web actual:

        <a href="/html/default.asp">HTML tutorial</a>

        Ejemplo

        Vínculo a una página ubicada en la misma carpeta que la página actual:

        <a href="default.asp">HTML tutorial</a>
        Puede leer más sobre las rutas de archivo en el capítulo Rutas de archivo HTML.
        Resumen del capítulo

        • Usar el elemento para definir un vínculo<a>
        • Usar el atributo para definir la dirección del vínculohref
        • Utilice el atributo para definir dónde abrir el documento vinculadotarget
        • Utilice el elemento (dentro) para utilizar una imagen como enlace<img><a>
        • Utilice el esquema dentro del atributo para crear un vínculo que abra el programa de correo electrónico del usuario mailto: href
        Etiquetas de enlace HTML
        Tag Description
        • <a> Defines a hyperlink


        Posted by at No hay comentarios:
        Labels:

        Estilos HTML - CSS

        CSS son las siglas de Cascading Style Sheets.

        CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez.

        CSS = Estilos y colores

        Manipular texto
        Colores, Cajas

        ¿Qué es CSS?

        Las hojas de estilo en cascada (CSS) se utilizan para dar formato al diseño de una página web.

        Con CSS, puede controlar el color, la fuente, el tamaño del texto, el espaciado entre los elementos, cómo se colocan y diseñan los elementos, qué imágenes de fondo o colores de fondo se utilizarán, diferentes pantallas para diferentes dispositivos y tamaños de pantalla, ¡y mucho más!

        Propina: La palabra en cascada significa que un estilo aplicado a un elemento primario también se aplicará a todos los elementos secundarios dentro del padre. Por lo tanto, si establece el color del texto del cuerpo en "azul", todos los encabezados, párrafos y otros elementos de texto dentro del cuerpo también obtendrán el mismo color (a menos que especifique algo más).


        Uso de CSS
        CSS se puede agregar a los documentos HTML de 3 maneras:

        En línea: mediante el uso del atributo dentro de los elementos HTMLstyle
        Interno: mediante el uso de un elemento en la sección<style><head>
        Externo: mediante el uso de un elemento para vincular a un archivo CSS externo<link>

        La forma más común de agregar CSS es mantener los estilos en archivos CSS externos. Sin embargo, en este tutorial usaremos estilos en línea e internos, porque esto es más fácil de demostrar, y más fácil para que lo pruebes tú mismo.

        CSS en línea

        Un CSS en línea se utiliza para aplicar un estilo único a un único elemento HTML.

        Un CSS en línea utiliza el atributo de un elemento HTML.style

        En el ejemplo siguiente se establece el color del texto del elemento en azul y el color del texto del elemento en rojo:<h1><p>

        Ejemplo

        <h1 style="color:blue;">A Blue Heading</h1>

        <p style="color:red;">A red paragraph.</p>

        CSS interno

        • Un CSS interno se utiliza para definir un estilo para una sola página HTML.

        • Un CSS interno se define en la sección de una página HTML, dentro de un elemento.<head><style>
        • En el ejemplo siguiente se establece el color del texto de TODOS los elementos (de esa página) en azul y el color del texto de TODOS los elementos en rojo. Además, la página se mostrará con un color de fondo "powderblue": <h1><p>

        Ejemplo

        <!DOCTYPE html>
        <html>
        <head>
        <style>
        body {background-color: powderblue;}
        h1   {color: blue;}
        p    {color: red;}
        </style>
        </head>
        <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

        </body>
        </html>

        CSS externo

        Se utiliza una hoja de estilos externa para definir el estilo de muchas páginas HTML.

        Para usar una hoja de estilos externa, agréguele un enlace en la sección de cada página HTML:<head>

        Ejemplo

        <!DOCTYPE html>
        <html>
        <head>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

        </body>
        </html>
        La hoja de estilos externa se puede escribir en cualquier editor de texto. El archivo no debe contener ningún código HTML y debe guardarse con una extensión .css.

        Así es como se ve el archivo "styles.css":

        "estilos.css":

        body {
          background-color: powderblue;
        }
        h1 {
          color: blue;
        }
        p {
          color: red;
        }
        Propina: ¡Con una hoja de estilos externa, puede cambiar el aspecto de un sitio web completo, cambiando un archivo!

        Colores, fuentes y tamaños CSS

        Aquí, demostraremos algunas propiedades CSS de uso común. Aprenderá más sobre ellos más adelante.

        La propiedad CSS define el color del texto que se va a utilizar.color

        La propiedad CSS define la fuente que se va a utilizar.font-family

        La propiedad CSS define el tamaño del texto que se va a utilizar.font-size

        Ejemplo

        Uso de propiedades css de color, familia de fuentes y tamaño de fuente:

        <!DOCTYPE html>
        <html>
        <head>
        <style>
        h1 {
          color: blue;
          font-family: verdana;
          font-size: 300%;
        }
        p {
          color: red;
          font-family: courier;
          font-size: 160%;
        }
        </style>
        </head>
        <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

        </body>
        </html>

        Borde CSS

        La propiedad CSS define un borde alrededor de un elemento HTML.border

        Propina: Puede definir un borde para casi todos los elementos HTML.

        Ejemplo

        Uso de la propiedad de borde CSS:

        p {
          border: 2px solid powderblue;
        }

        Relleno CSS

        La propiedad CSS define un relleno (espacio) entre el texto y el borde.padding

        Ejemplo

        Uso de las propiedades de borde y relleno CSS:

        p {
          border: 2px solid powderblue;
          padding: 30px;
        }

        Margen CSS

        La propiedad CSS define un margen (espacio) fuera del borde.margin

        Ejemplo

        Uso de las propiedades de borde y margen CSS:

        p {
          border: 2px solid powderblue;
          margin: 50px;
        }
        Enlace a CSS externo

        Se puede hacer referencia a las hojas de estilos externas con una dirección URL completa o con una ruta relativa a la página web actual.

        Ejemplo

        En este ejemplo se utiliza una dirección URL completa para vincular a una hoja de estilos:

        <link rel="stylesheet" href="https://todoinfoinfo.blogspot.com/html/styles.css">

        Ejemplo

        En este ejemplo se vincula a una hoja de estilos ubicada en la carpeta html del sitio Web actual:

        <link rel="stylesheet" href="/html/styles.css">

        Ejemplo

        En este ejemplo se vincula a una hoja de estilos ubicada en la misma carpeta que la página actual:

        <link rel="stylesheet" href="styles.css">
        Resumen del capítulo

        Usar el atributo HTML para el estilo en líneastyle
        Usar el elemento HTML para definir CSS interno<style>
        Usar el elemento HTML para hacer referencia a un archivo CSS externo<link>
        Utilice el elemento HTML para almacenar elementos <style> y <link><head>
        Usar la propiedad CSS para los colores de textocolor
        Usar la propiedad CSS para fuentes de textofont-family
        Usar la propiedad CSS para tamaños de textofont-size
        Usar la propiedad CSS para bordesborder
        Usar la propiedad CSS para el espacio dentro del bordepadding
        Usar la propiedad CSS para el espacio fuera del bordemargin

        Propina: Puede aprender mucho más sobre CSS en nuestro Tutorial de CSS.
        Etiquetas de estilo HTML

        Tag Description
        <style> Defines style information for an HTML document
        <link> Defines a link between a document and an external resource


        Posted by at No hay comentarios:
        Labels:
        Suscribirse a: Entradas (Atom)

        Imágenes HTML

        Las imágenes pueden mejorar el diseño y la apariencia de una página web. Ejemplo < img  src ="pic_trulli.jpg"  alt ="Itali...

        • Colores HTML HSL y HSLA
          HSL significa tono, saturación y ligereza. Los valores de color HSLA son una extensión de HSL con un canal Alfa (opacidad). Valores de color...
        • Estilos HTML - CSS
          CSS son las siglas de Cascading Style Sheets. CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez. CSS = Esti...
        Política de Privacidad
        Este sitio utiliza cookies de Google para analizar el tráfico a este sitio. La información sobre su uso de nuestro sitio se comparte con Google para ese propósito. Acepto Más información