PROGRAMANDO EN HTML – TEORIA NRO 2
MATERIA : INFORMATICA – CURSO: 5TO AÑO – PERIODO LECTIVO:2020-PROF. CLAUDIA SANDEZ
ETIQUETAS HTML BÁSICAS: IMÁGENES
Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las
imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen
utilizando la etiqueta <img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo:
La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se
recomienda usar (deprecated):
ATRIBUTO USO OBSERVACIONES
src Este atributo es obligatorio e indica el Obligatorio. Si no se
nombre del archivo de imagen (entre incluye no se mostrará
comillas) o la URL desde la que se va imagen
a obtener la imagen. alguna.
align Permite controlar la alineación de una Atributo obsoleto
imagen con respecto a una línea de (deprecated). Sustituir
texto adyacente o a otras imágenes en por CSS.
esa línea. Los valores posibles son los
ya conocidos left, right, middle, top,
bottom.
alt Entre comillas podremos escribir un Atributo requerido, se
texto que se mostrará si la imagen no recomienda incluirlo
llega a cargar, mientras se carga o, aunque si no se hace la
cuando visualizando ya la imagen, imagen se mostrará.
pasamos el ratón por encima.
width Este atributo es opcional pero podemos Opcional. Indicar valor
ponerlo para especificar al navegador en pixeles. También se
que muestre la imagen con un tamaño puede indicar con CSS.
específico. Significa “ancho de la
imagen” que vamos a representar. Si
no se escribe, se carga la imagen con
el tamaño original.
height Al igual que el atributo width, es Opcional. Indicar valor
opcional. Este atributo indica el alto de en pixeles. También se
la imagen. puede indicar con CSS.
border Con border especificamos el ancho del Atributo obsoleto
borde que rodea la imagen. Si se indica (deprecated). Sustituir
0 equivale a “sin borde”. por CSS.
EJEMPLO
Escribe este código en un editor de texto como bloc de notas ó Notepad++ y guarda el archivo con extensión
html. A continuación visualízalo en tu navegador. Si no consigues ver las imágenes, es porque la ruta no está
disponible. En ese caso introduce una ruta o el nombre de un archivo de imagen que tengas en el mismo
directorio que el archivo html.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de imágenes -
[Link]</title> </head>
<body>
<img
src="[Link]
mages/[Link]" alt="Logotipo APR2">
<img
src="[Link]
mages/[Link]" alt="Logotipo APR2" width="50%">
<img
src="[Link]
mages/[Link]" alt="Logotipo APR2" width="200px">
<img
src="[Link]
mages/[Link]" alt="Logotipo APR2" width="200px" border="5">
</body>
</html>
Como podemos observar (ver imagen anterior), el atributo width se ha definido tanto en pixeles como en porcentaje (al igual pasa
con el atributo height), aunque las últimas versiones de HTML no admiten el uso de porcentajes. Por ello recomendamos indicarlo en
píxeles.
ENCABEZADOS <h1>…<h6>, PÁRRAFOS <p> Y ETIQUETA <pre> EN HTML.
Continuamos viendo una serie de etiquetas y atributos básicos para la creación de páginas webs. No
entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone. Simplemente
explicaremos las que han venido siendo más utilizadas.
Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo,
categoría, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>.
Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del
encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.
A continuación mostramos un código ejemplo de los seis diferentes encabezados:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de encabezados - [Link]</title>
</head>
<body>
<h1>Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
</body>
</html>
Podemos ver el resultado obtenido en la siguiente imagen.
Como podemos observar en el ejemplo anterior, cada encabezado está separado del anterior y del siguiente
por un salto de línea sin que nosotros en el código hayamos escrito nada ya que los encabezados generan
por sí solos un salto de línea.
Los encabezados le dan relevancia especial al texto, y de hecho los buscadores como google, yahoo o bing
cuando encuentran una etiqueta <h1> le dan más relevancia que a un texto del mismo tamaño que no sea
un encabezado. Por tanto es conveniente usar las etiquetas <h1>, <h2>, etc. para obtener un mejor
posicionamiento de nuestras páginas web en los buscadores. Es decir, usar h1 no sólo supone agrandar el
tamaño de la letra, también supone indicar que el texto incluido entre esas etiquetas tiene una importancia
superior al resto de texto y esto es valorado por los buscadores.
PÁRRAFOS Y APLICAR ESTILOS A PÁRRAFOS
Para indicarle al navegador que queremos poner un texto en un párrafo, debemos escribirlo entre las
etiquetas <p> y su cierre </p>, quedando el texto separado por un margen en blanco por encima y por
abajo.
Un atributo muy usado en el pasado (hoy deprecated) fue align, que servía para establecer la alineación del
texto dentro del párrafo.
ATRIBUTO USO OBSERVACIONES
align Especifica la Atributo obsoleto (deprecated) en su uso en la
alineación del forma <p align=”center”>Texto<p>. En lugar de esta
texto dentro del sintaxis, usar CSS como se muestra a continuación.
párrafo.
Ejemplo de uso correcto empleando técnica CSS:
left --> <p style="text-align: center;">Texto centrado</p>
Alineación del
texto a la
izquierda
right -->
Alineación del
texto a la
derecha
center -->
Alineación del
texto centrada
justify -->
Alineación del
texto justificada
Como comprobarás, hemos introducido el uso de estilos. Un estilo sirve para “moldear” la presentación de
algo (un párrafo, un contenedor). En nuestro caso, estamos diciendo que el estilo a aplicar al párrafo incluye
el alineado del texto (atributo text-align) al centro (center). Un estilo se puede aplicar de distintas maneras.
Una forma de hacerlo es escribiendo en línea (a continuación de la etiqueta) con la sintaxis style =
“característica a aplicar nº1 ; característica a aplicar nº2; característica a aplicar nº…;”.
Como vemos para definir un estilo escribimos style = “un nombre de atributo, dos puntos, el valor del atributo
y terminación en punto y coma.
EJEMPLO
Escribe este código en un editor de textos como bloc de notas o Notepad++. Guárdalo como archivo con
extensión html y a continuación visualízalo en tu navegador comprobando que obtienes el resultado
esperado.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo del uso de párrafos -
[Link]</title> </head>
<body>
<p style="text-align: center;">Este texto se alineará al
centro</p> <p style="text-align: right;">Este texto se alineará a la
derecha</p> <p style="text-align: left;">Este texto se alineará a la
izquierda</p> </body>
</html>
El texto dentro de una etiqueta pre normalmente se muestra con un tipo de fuente especial (Courier o
similar) de ancho fijo, lo que le da un aspecto de “texto escrito con máquina de escribir”.
