Introducción al Diseño Web #2"
¿Cuál es la etiqueta para imágenes en HTML, y cuál es su función en específico?
El tag básico para colocar una imagen es “img“. Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. Va acompañado de diferentes atributos que te vamos a explicar a continuación.
El atributo “src” es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src=”x”>, siendo “x” la dirección o la url dónde se encuentra situada la foto.
La foto podemos alinearla en la página como queramos mediante “align“, utilizando los atributos “left” para alinearla a la izquierda, “right” para alinearla a la derecha, “top” para alinearla arriba, “bottom” para alinearla abajo y “middle” para alinearla al centro.
También podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo “alt” y lo escribiríamos de la siguiente manera: alt= “x”, siendo “x” la descripción que le gente leerá al pasar el ratón por encima.
Debemos aclarar que no con todos los navegadores podemos ver el “alt” de manera visual. Hay algunos que no lo representan.
Atributos opcionales pero muy recomendables, son el height y el width. El height marca la altura de la imagen, mientras que el width marca la anchura. Son recomendables porque así ayudaremos al navegador a representar la imagen.
Y por último, también queremos mostrarte que le puedes adjudicar un borde a la fotografía. El atributo ya te lo sabes: “border“. Después solo tendrás que definir cuál quieres que sea el grosor del borde.
Así las cosas, deberemos escribir este código…
<img src="html/imagenes/prueba.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">
…para poder ver esta preciosa fotografía
Cualquier etiqueta XHTML puede contener uno o más atributos, separados por espacios, que permiten especificar la etiqueta. El código fuente tiene el siguiente aspecto:
<etiqueta atributo="valor-de-atributo">
<etiqueta atributo1="valor-de-atributo-1" atributo2="valor-de-atributo-2" >
En el XHTML los atributos tienen que estar siempre definidos (mediante el signo igual "=") y el valor del atributo tiene que estar entre comillas dobles o simples.
Existen una serie de atributos comunes a todas las etiquetas (salvo la etiqueta <html>) y algunas etiquetas tienen unos atributos específicos. En esta lección se comentan los atributos comunes; los atributos específicos se comentan en las lecciones dedicadas a las etiquetas correspondientes (imágenes, tablas, etc).
style - estilo. Es el elemento encargado de indicar la información de estilo.
- Sus etiquetas son:
<style>y</style>(ambas obligatorias).- Está definido como: Elemento de cabecera.
- Crea una caja: No.
- Puede contener: Declaraciones de estilo.
- Debe ser contenido por: Elementos head.
¿Cual es la forma de poner negritas un texto en HTML?
Tradicionalmente en HTML, si queríamos poner un texto resaltado y que se viese en negrita, la forma de hacerlo era simplemente usando la etiqueta <b> .
Por ejemplo: <b>Este texto aparecerá escrito en negrita</b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>.
¿Cual es la forma de poner negritas un texto en HTML?Esto puede parecer una pregunta básica y tonta, sin apenas importancia. Pero en realidad tiene más fondo del que pueda parecer...
Tradicionalmente en HTML, si queríamos poner un texto resaltado y que se viese en negrita, la forma de hacerlo era simplemente usando la etiqueta
<b>. La cosa era muy sencilla.Sin embargo, en HTML5 tenemos muchas más opciones que parecen equivalentes. Podemos utilizar también la etiqueta
<strong>, la etiqueta<em>o la propiedad CSSfont-weightaplicada a una etiqueta que envuelva el texto que queremos en negritaExisten dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente (aunque pueda atribuírseles un significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Aquí va un ejemplo de código y lo que veríamos en pantalla:
Esta palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong>
Esta palabra la vamos a poner en negrita y esta otra también
Normalmente se preferirá usar técnicas CSS en lugar de esta etiqueta, pero es una etiqueta que debemos conocer.
¿Cual es la forma de poner Cursivas un texto en HTML?
Existen varias etiquetas para poner en cursiva un texto: <i> y <em>. Estas etiquetas deben ir siempre acompañadas de un cierre, por ejemplo:
<i>Así es como se pone un texto en cursiva<i>
<em>Y así también se pone un texto en cursiva</em>
Al igual que con otras etiquetas, em, además de mostrar un texto en cursiva, también está señalando a los buscadores que esa parte del contenido es relevante. La cursiva también es empleada para resaltar otras fuentes, nombres propios o bien palabras en otros idiomas:
En Estados Unidos al fútbol se le llama soccer.
Por ejemplo: <b>Este texto aparecerá escrito en negrita</b>. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: <b><i>Este texto aparecerá escrito en negrita y en cursiva</i></b>.
¿Para que sirve el atributo "Strong" y que diferencia tiene con negritas?
La etiqueta <strong> realmente no está diseñada para dar negrita, aunque el resultado sea en realidad ese. Esta etiqueta es semántica, y por lo tanto sirve para dar contexto al contenido de la página. En este caso la etiqueta <strong> sirve para indicar que lo que va dentro de ella reviste importancia o urgencia.


Comentarios
Publicar un comentario