HTML BÁSICO 24 PROGRAMACIÓN
3. Programación HTML Dentro de este apartado entraremos de lleno en la programación HTML, para ellos definiremos primero lo que es una hoja de estilos. a. Hoja de estilos CSS i. Introducción Cuando se crearon las primeras versiones de HTML, ya comentamos, que simplemente se crearon para entornos de estudios, donde primaba más el contenido que la forma en la que se exponían, es decir, su estilo o formato. Pero a medida que se avanzaba en las distintas versiones de HTML se profundizaba mas en el estilo que tendrían las webs y como darle ese estilo. En un principio se añadió ese formato de páginas web dentro de la misma hoja en la que se programaban los contenidos (en el archivo *.html), pero resultaba molesto interpretar ese código HTML. El problema principal era que los distintos navegadores de la época no interpretaban por igual ese estilo dado dentro de la misma programación HTML ya que no había un estándar sobre cómo definir los distintos estilos que se podían dar a una web. Por ello entró en esta polémica el W3C (World Wide Web Consortium) y propuso la creación de un estándar de hoja de estilos específico para la programación HTML. Y por el año 1997 se decidió crear el estándar de hoja de estilos CSS (Cascading Style Sheets). Desde entonces se han creado varias versiones de hojas de estilos. La última en la que se está trabajando es la CSS 3. Pero desde la versión CSS 2.1 todos los navegadores (internet explorer, google chrome, firefox, safari, opera) trabajan a la perfección con ella.
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 25 PROGRAMACIÓN
ii. Uso de CSS Del apartado anterior definimos el uso de la hoja de estilos para definir la forma y colorido que le daremos a los contenidos que pondremos en la página web: tamaño de textos, color, bordes, anchos, imágenes de fondo,.. Pero las hojas de estilos no sólo nos permitirán dar forma y colorido si no que nos proporcionan estas otras ventajas: o Ayuda a tener más ordenado el código HTML, lo que nos permitirá encontrar futuros errores y hacer modificaciones de una manera más rápida y sencilla o Podemos programar los contenidos de una forma más rápida y directa ya que casi no tendremos que preocuparnos de los estilos ya que irán en un archivo separado o Los archivos *.html serán menos pesado por lo que el cargar la página será más rápido o Permite que las páginas puedan ser vistas de casi igual manera en cualquier navegador sin introducir muchos cambios o Se podrán hacer modificaciones en el aspecto sin entrar en el contenido de forma rápida y sencilla o Los navegadores poseen “robots” que leen el código html de las webs, si éstos aparecen sin estilos será más fácil para ellos leerlos e interpretarlos por lo que nos pondrán en mejores puestos, por ejemplo en el buscador de Google El uso de la hoja de estilos, como es evidente, siempre tiene que ir acompañada por su archivo *.html. Por lo tanto, mi recomendación, es ir haciendo el uso de la hoja de estilos a medida que vayan programando el contenido de la página web. Probablemente cuando tengan toda la página web acabada en lo que a contenido se refiere, tendrán que hacer cambios en la hoja de estilos referidos a distintas partes de archivo *.html, pero siempre será más HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 26 PROGRAMACIÓN
fácil que hacerlo todo de una vez. Es simplemente una recomendación, cuando tengan más soltura ya cada uno definirá su forma de trabajo. Por tanto a medida que vayamos avanzando en el curso iremos haciendo referencia a dos archivos a la vez: *.html y la hoja de estilos. La hoja de estilos se creará también en un archivo del bloc de notas y se guardará con la extensión *.css. Ya veremos en los siguientes apartados de este curso desde donde llamamos o hacemos referencia a la hoja de estilos. iii. Definir la hoja estilos En la hoja de estilos se puede dar forma a los distintos elementos que forman la web (textos, imágenes, hipervínculos,..) de tres formas distintas: o Usando los estilos predeterminados que inserta el código HTML o Modificando los estilos predeterminados que inserta el código HTML o Definiendo nuevos estilos De momento dejaremos la hoja de estilos aquí. A media que avancemos en el curso volveremos a hacer referencia a las hojas de estilos y como se va programando. b. Cabecera Como ya dijimos en apartados anteriores, dentro de la cabecera o head de la programación HTML se definirán ciertos valores o propiedades para poder visualizar la web de manera correcta o eficiente. Dentro de la cabecera pueden definir los siguientes parámetros: o Título de nuestra página web o Referencia a la hoja de estilos o Otra información de interés, sobre todo para los buscadores Veamos cómo se define la cabecera con los parámetros indicados. HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 27 PROGRAMACIÓN
i. Título de la web Para definir el título de nuestra página web programada en HTML se hace con la etiqueta <title>
y se cerrará con </title>. Veámoslo con un ejemplo.
Abrimos nuestro archivo “inicio.html”. Al tenerlo guardado como un archivo HTML, si picamos sobre el dos veces para abrirlo se nos mostrará una página web en blanco en la cual no podemos escribir nada. Para poder modificarlo lo abrimos con el bloc de notas.
Dentro de la cabecera escribimos el siguiente código: <title> Título de la web </title>:
figura 3.2 Título de la Web
En este caso le hemos dado como título a la web “Ejemplos Curso Básico HTML”. Muy importante ante cualquier cambio que hagamos, para poder visualizarlo, antes hay que guardar el archivo. Si abrimos ahora el archivo “inicio.html” con nuestro navegador podemos ver el título que le hemos dado a la web.
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 28 PROGRAMACIÓN
figura 3.3 Ver título Web
ii. Referencia a la hoja de estilos La siguiente línea del código que escribiremos en nuestra cabecera será la referencia a la hoja de estilos. Para referirnos a la hoja de estilos lo haremos con la etiqueta <link href=” “ rel=” “ type=” “ media=” “/>. En este caso la etiqueta para hacer referencia a la hoja de estilos no tiene etiqueta de cierre. Lo que si posee son cuatro elementos que darán información al archivo HTML del archivo que le estamos vinculando como hoja de estilos. Estas características son las siguientes: o href: Con esta etiqueta estamos indicando la ruta donde debe buscar el archivo .css u hoja de estilos. o rel: Indica la relación que va a existir entre el archivo que estamos programando y el archivo al cual queremos vincular. Para el caso de las hojas de estilos este valor siempre será stylesheet. o type: Nos indicará el tipo de recurso que estamos enlazando al archivo HTML. Para el caso de las hojas de estilos este valor es text/css. o media: Nos permitirá definir la hoja de estilos según el medio donde se visualice la web. Por defecto podemos poner este valor como all, así podrá visualizarse en todos los medios (pc, tablets, …) HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 29 PROGRAMACIÓN
No siempre tienen porque usarse las cuatro características para definir la hoja de estilos. Definamos nuestra hoja de estilos. Escribiendo el siguiente código: <LINK href=”estilos.css” rel=”stylesheet” type=”text/css” media=”all”/>
figura 3.4 Definir hoja de estilos
Hay que tener en cuenta que hay que poner las características de la hoja de estilos entrecomilladas. En este ejemplo he llamado a la hoja de estilos “estilos.css” cuando la creemos tenemos que recordar y poner este mismo nombre. iii. Otra información Hay más información que se puede añadir a nuestra página web y que será utilizada por los buscadores, como por ejemplo el de Google. Esta información ayuda a identificar el documento y su contenido y no será visible al visitar la web. Para añadir ésta información extra se usa la etiqueta <meta name=” “ content=” “/>. Esta etiqueta no tiene etiqueta de cierre. Y en ella se incluyen HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 30 PROGRAMACIÓN
ciertos atributos para identificar esa información adicional. Esos atributos son: name y content. Es posible enviar varias informaciones adicionales en una misma página web pero usando distintas líneas o etiquetas <meta>. Los atributos de la etiqueta <meta> nos indican lo siguiente: o Name: Identifica el tipo de información que se va a indicar. Los distintos tipos de información son: o Autor: con el atributo author o Palabras para clasificar la página en los buscadores usando el atributo classification o Descripción de la página con description o Programa usado para crear la página con el atributo generator o Definir unas palabras claves usando el atributo keywords o Content: en este atributo de la etiqueta <meta> se define o describe el atributo name. Con un ejemplo se verá más claro. Definamos para nuestro ejemplo alguna información adicional. Escribimos en el código HTML las siguientes líneas: <META name=”author” content=”Nieves PL”/> <META name=”description” content=”Ejemplos del curso básico HTML”/> <META name=”keywords” content=”curso básico html ejemplos programar”/>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 31 PROGRAMACIÓN
figura 3.5 Información extra en la cabecera
ACTIVIDAD: Retomando el archivo creado en la actividad 1, le pondremos un título a nuestro archivo html, crearemos un link a una página de estilos e introduciremos información extra de: autor, descripción de la página y palabras claves (cabecera). La información que se introduzca en la página es la que el alumno o alumna desee sin copiar la del ejemplo. c. Cuerpo Como ya hemos comentado en apartados anteriores dentro del cuerpo de la programación HTML irá todo el contenido de la página web que será visible para el usuario, es decir, toda la información que queramos poner en nuestra web: textos, imágenes, enlaces, formularios,… La programación HTML se caracteriza por dividirse en capas. Es decir, cada parte o elemento que queramos introducir en nuestra web tendremos que definirla dentro de su capa correspondiente. HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 32 PROGRAMACIÓN
figura 3.6 Capas HTML
Como se muestra en la figura [3.6] en todo cuerpo o body de la programación HTML siempre nos encontraremos con una primera capa que será la cabecera y la cual no hay que confundir con la parte de la programación HTML cabecera o head. Ésta cabecera se encuentra dentro del cuerpo y es la capa en la que nos encontraremos o bien sólo el logo de nuestra web o empresa o bien el logo o nombre y algún buscador o algún formulario de registro o acceso, para esto último tenemos que tener nuestra página web relacionada con alguna base de datos, para lo cual tendríamos que tener programación PHP y MySQL, que no vamos a ver en este curso. Luego nos podremos encontrar con una segunda capa que podemos llamar barra de navegación. Ésta capa será la que nos indique los distintos apartados
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 33 PROGRAMACIÓN
que pueda tener nuestra web, si así fuese. Si nuestra página web sólo tiene una única página no es necesario tener esta barra de navegación. Después de la barra de navegación el número de capas a definir dependerá del contenido de la misma y de la forma en la que queramos visualizarlo. Entre más información contenga la página web es recomendable introducir mayor número de capas. Esto es debido a que los distintos navegadores no interpretan igual la programación y para poder visualizarla mejor y de igual manera en todos es mejor tener la información “encriptada” dentro de varias capas. Como se puede observar en la figura [3.6] se pueden definir capas independientes unas de otras o capas que se encuentren unas dentro de otras. Más adelante veremos que usar en cada caso. Veamos ahora como se define una capa. Para definir una capa en HTML se utiliza la etiqueta <div id=” “> y su etiqueta de cierre </div>. Es recomendable definir una capa global que englobe todas las capas que vamos a definir en adelante y a la cual en nuestra hoja de estilos le demos las características que queramos que tenga nuestra web en general o bien darle a la capa cuerpo o body las características que queramos que tenga en general nuestra web. En este caso usaremos la capa global. Se le puede llamar de cualquier manera, intentar usar un nombre que sea identificativo de lo que engloba ya que si es necesario hacer cualquier cambio o tenemos errores es más fácil localizarlos. Definimos la capa global: <div id=”global”> </div>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 34 PROGRAMACIÓN
figura 3.7 Capa global
Para darle características a esta capa global tendremos que irnos a nuestra hoja de estilos y definirla. Antes veamos que características se le pueden dar a una capa. o Position: Indica el posicionamiento de la capa. Puede tomar dos valores: absolute; su posición se calcula con respecto al punto superior izquierdo de la pantalla. O relative; cuya posición se calcula a partir de donde se define en la programación dicha capa. o Left y Top: Con estas propiedades se le dice que posición respecto al margen izquierdo y superior queremos tener la capa. Se le puede decir con el número de píxeles que queremos colocarla o con %. Dependerá de la propiedad position. Si se le ha dado a esta propiedad el valor absolute estos valores se calcularán a partir del borde superior izquierdo de la pantalla. Si a la propiedad position se le ha dado el valor relative estas propiedades se calcularán a partir desde el punto en el que estemos programando.
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 35 PROGRAMACIÓN
o Width y Height: Con estas dos propiedades le damos anchura y altura a la capa. Como en las propiedades anteriores se le pueden dar las propiedades en píxeles o en %. o Z-index: Establece el índice de la capa dentro de la página en el ángulo Z, es decir, podemos indicar que capas se verán encimas de otras. Las capas con índice mayor podrán solapar a aquellas cuyo índice sea menor. o Visibility: Establece la visibilidad de la capa al usuario. Puede tomar tres valores. Inherit; se muestra la capa mientras la capa a la que pertenece se esté mostrando. Visible; la capa será visible siempre. Y hidden; la capa estará oculta. o Background-color: Establece el color de fondo de la capa. Ha de ser un número hexadecimal. o Background-image: Se puede establecer una imagen de fondo en la capa. Se pone con la palabra url: (ruta de la imagen). o Overflow: esta característica nos indicará si se mostrará o no el contenido de la capa cuando su contenido sea mayor que el tamaño de la misma. Se podrá dar como valor a esta característica visible; mostrará el contenido aunque implique la capa más grande. Hidden; no se puede visualizar el contenido que no quepa en ella. Scroll; se muestra la barra de desplazamiento aunque el contenido pueda visualizarse bien. Y por último auto; se mostrará la barra de desplazamiento sólo cuando sea necesario. o Clip: Esta propiedad nos permite indicar que ciertas partes de la capa no sean visibles o visto desde otro punto que área de la capa será visible al usuario. Se define mediante cuatro puntos: rect(top, right, bottom, left). o Float: Esta propiedad nos permite colocar las capas dentro de nuestro documento a la derecha, a la izquierda o centradas. Asi podemos tener dos capas dentro de la misma línea gráfica del documento y con propiedades diferentes. HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 36 PROGRAMACIÓN
Éstas son algunas de las características que se le pueden dar a las capas. Cómo pasaba con la cabecera, no es necesario aplicar todas las propiedades, se irá viendo a medida que vas avanzando la programación del cuerpo del contenido HTML si es necesario aplicarles algunas de éstas características. En principio para nuestro ejemplo le daremos las características de tamaño de la capa y una imagen de fondo. Primero tenemos que crear nuestra hoja de estilos. Si recordamos habíamos quedado en que se llamaría “estilos.css” y estaría en la misma carpeta que la página de inicio. Abrimos un archivo del bloc de notas y la creamos. Para crear una nueva capa en la hoja de estilos se utiliza la siguiente directriz: #nombrecapa {propiedad1:
; propiedad2:
; propiedad3:
;}:
#global {position: absolute; width: 1024px; height: 800px; backgroundimage:url(imagenes/fondo.png); background-repeat:repeat;}
figura 3.8 Propiedades capa global
Como se ve en el ejemplo le hemos dado distintas propiedades como la posición que tendrá la capa dentro del cuerpo, su ancho y alto y le hemos asignado una imagen de fondo, a la cual le hemos dado la propiedad de repetirse. Hay tener en cuenta que las propiedades van separadas por ; sino HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 37 PROGRAMACIÓN
dará error y no se aplicará la propiedad. Por otro lado tener muy en cuenta el directorio donde están las imágenes para poder cargarlas. Es recomendable tener en una carpeta aparte todas las imágenes. Veamos como queda el ejemplo:
figura 3.9 Aspecto capa global
Ya hemos visto como se crea una capa y se le dan propiedades. Como ya se ha dicho hay muchas mas propiedades que se le pueden dar a las capas. Las iremos viendo a medida que avanzamos en el curso. i. Añadir textos Para añadir textos en la programación HTML se pueden poner o bien directamente o bien delimitarlos con la etiqueta <p> y su cierre </p>. Es recomendable usar la etiqueta por lo que ya se ha comentado de la compatibilidad de los navegadores y por seguir un cierto orden. Veamos un ejemplo de añadir el texto. Para ello abrimos nuestro archivo inicio.html y escribimos en él una frase. “Curso básico HTML”. Y luego vemos como queda abriéndolo con nuestro navegador: <p>Curso Básico HTML</p>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 38 PROGRAMACIÓN
figura 3.10 Texto HTML
Si escribimos otra frase o palabra seguida a la que hemos puesto con la etiqueta <p> quedaría como si fuese el párrafo siguiente, sin embargo si lo que queremos es un salto de línea pero dentro del mismo párrafo usaremos la etiqueta <br>. Veamos como queda en un ejemplo: HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 39 PROGRAMACIÓN
<p>En este curso veremos los aspectos<br>básicos de la programación HTML</p>
figura 3.11 Salto de línea HTML
Otro aspecto a destacar en la introducción de textos en la programación HTML es su alineación, que se aplicará con la propiedad “align”. Se puede alinear el texto o bien a la izquierda (por defecto), a la derecha o centrado.
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 40 PROGRAMACIÓN
Para darle esta alineación al texto podemos hacerlo de dos maneras, según nos convenga. Podemos darle esa propiedad a todo el texto de la capa en la que estamos trabajando, en este caso la global o solo darle esta propiedad al texto en el que estamos trabajando en ese momento. Veamos un ejemplo: <p align=”center”>Curso básico HTML</p>
figura 3.12 Alineación del texto
Con este ejemplo le hemos dicho que solo la línea de texto que hemos indicado esté centrada. Vamos a indicarle ahora que queremos que todo el
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 41 PROGRAMACIÓN
texto de la capa global esté alineado a la derecha. Para ello usaremos la hoja de estilos. Para modificar el texto que contenga la etiqueta <p>, en este caso pero se puede modificar cualquier etiqueta de las que veamos, tenemos que modificar la
etiqueta
{propiedad1:
siguiendo
la
; propiedad2:
siguiente
#nombrecapa
directriz:
; propiedad3:
etiqueta
;} así sólo se modificará la
etiqueta en la capa que se halla englobado. Hagamos un ejemplo: #global p {text-aling:right;}
figura 3.13 Alineación texto usando hoja estilos
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 42 PROGRAMACIÓN
Como se ve en la figura [3.13] al aplicarle la propiedad de alineación a la derecha en la hoja de estilos no adquiere la propiedad de centrarlo que hemos puesto al título en el código HTML. Por lo tanto si queremos que una propiedad permanezca intacta por encima de otras propiedades similares habrá que definirlas en la hoja de estilos. Algunas propiedades que se le pueden dar a los textos son las siguientes: o Color: Color que queramos darle al texto. Podemos ponerlo con su nombre en inglés o con su código de colores en hexadecimal. o Letter- spacing: Espaciado entre las letras. Se indica con un número seguido de px. o Line- height: Espaciado entre las líneas. Se puede indicar con un número seguido de em o con un porcentaje % (interlineado). o Text- align: Puede adoptar cuatro valores: left, center y right y justify. o Text- decoration: La decoración que le podemos dar al texto es: underline (para ello también tenemos la etiqueta <u> </u>), overline; una línea por encima del texto, blink; parpadeo, line- through; tachado. Pero podemos dejar el texto de la primera línea centrado y el siguiente párrafo alineado a la derecha. Para ello vamos a la hoja de estilos y creamos un nuevo estilo de texto. Para crear un estilo nuevo se hace siguiendo la siguiente forma: .nombreestilo {propiedad1:
; propiedad2:
; propiedad3:
;}.
Veamos el ejemplo: .derecha {text-align:right;}
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 43 PROGRAMACIÓN
figura 3.14 Crear un nuevo estilo
Como se puede ver hemos eliminado la propiedad de alinear todo el texto que contenga la etiqueta <p> a la derecha y hemos creado un nuevo estilo que pondrá todo el texto que le indiquemos a la derecha. Ahora en nuestro archivo HTML le indicamos a que parte del texto queremos alinear a la derecha. <p align=”center”>Curso básico HTML</p> <p class=”derecha”>En este curso veremos los aspectos<br>básicos de la programación HTML</p>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 44 PROGRAMACIÓN
figura 3.15 Aplicar un estilo creado a una etiqueta HTML
Como se observa en la figura [3.15] le hemos dicho que la primera línea del texto esté centrada y el segundo párrafo esté alineado a la derecha. Es conveniente crear nuevos estilos cuando se quiera crear una nueva “etiqueta” o estilo con muchas propiedades y vayamos a usar en más de un párrafo o línea. Si sólo se le quiere dar una propiedad pues se puede usar dándole propiedades a la propia etiqueta de HTML. Y si lo que se quiere es que toda la capa contenga el mismo tipo de texto, en este caso, lo remendable es hacerlo dándole las propiedades a la etiqueta HTML creada desde la hoja de estilos en su capa correspondiente.
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 45 PROGRAMACIÓN
Como se ha comentado esta forma de dar propiedades a las etiquetas propias de HTML o crear nuevos estilos no sólo es aplicable a la etiqueta <p>, también se pueden aplicar a otras etiquetas que iremos viendo. No sólo se le pueden dar propiedades de alineación del texto, también hay otras propiedades aplicables. Podemos poner el texto en negrita con la etiqueta <b> y su cierre </b>, en cursiva con la etiqueta <i> y su etiqueta de cierre </i>. Y subrayado usando la etiqueta <u> y su etiqueta de cierre </u> Por otro lado tenemos los textos tipo títulos. Para ello se utilizan la etiqueta h seguida de un número, siendo el 1 el título más grande y el 6 el título más pequeño. Serían los siguientes: <h1> Título </h1> <h2> Título </h2> <h3> Título </h3> <h4> Título </h4> <h5> Título </h5> <h6> Título </h6> Por otro lado también se puede dar color, cambiar la fuente de la letra o incluso ponerle el tamaño que queramos. Para ello tenemos que usar la etiqueta <font size=” “ color=” “ face=” “> </font>. Veamos un ejemplo de lo visto hasta ahora con respecto a los textos. <h1 align=”center”><font color=”red”>Curso básico HTML<h1> <p class=”derecha”>En este curso veremos los <i>aspectos<br>básicos</i> de la programación <b>HTML</b></p>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 46 PROGRAMACIÓN
figura 3.16 Aplicar propiedades a textos
Lo visto hasta ahora es lo básico en lo que a textos se refiere. Pero como ya se ha comentado una página web no sólo contiene textos sino también imágenes, veamos como podemos adornar nuestra web con ellas. ACTIVIDAD: Retomamos nuestro archivo HTML y añadiremos texto en él. Creando una nueva capa, dándole propiedades de position, alto, ancho e imagen de fondo (hoja de estilos). Hay que añadir texto normal, en negrita, en cursiva, subrayado y títulos. Hay que crear como mínimo un estilo nuevo de texto y darle distintas propiedades de las nombradas (como mínimo 2).
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 47 PROGRAMACIÓN
Hay que usar el salto de línea, alineación y cambio de color. Recuerda que el contenido es de libre elección. ii. Añadir imágenes Para añadir imágenes a la programación HTML tendremos que utilizar la etiqueta <img src=”nombreimagen.formatoimagen”>. Es muy importante saber donde tenemos la imagen guardada tanto en nuestro ordenador como en el servidor web. Lo recomendable es seguir el mismo patrón en nuestro disco duro que en el servidor donde tengamos la web. Otro aspecto importante a tener en cuenta es el formato de la imagen. Veamos un ejemplo sobre como poner una imagen en nuestro código HTML. <img src=”imagenes/teclado.jpg”>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 48 PROGRAMACIÓN
figura 3.17 Insertar una imagen en HTML
Como pasaba con los textos a las imágenes también se le pueden atribuir propiedades para una mejor visualización de la misma. Por ejemplo podemos darle el tamaño en ancho y altura que queramos a través de las propiedades “width” y “height”: <img src=”imagenes/teclado.jpg” width=”120” height=”90”>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 49 PROGRAMACIÓN
figura 3.18 Dar propiedades a una imagen
Vemos como la imagen se ha comprimido con respecto a la imagen original. Recomiendo que le den varios tamaños e ir viendo como cambia la imagen. Otro atributo que le podemos dar a la imagen es el texto alternativo con la propiedad “alt”. Este atributo nos será de ayuda para cuando, por cualquier motivo, la imagen no se cargue podamos ver el nombre que le hayamos puesto a la imagen en concordancia con lo que queramos indicar con ella. También para las páginas web para invidentes servirán ya que los programas lectores son capaces de leer textos alternativos. Se usará así: <img src=”imagenes/teclado.jpg” width=”120” height=”90” alt=”teclado curso html”>
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 50 PROGRAMACIÓN
figura 3.19 Propiedad alt en una imagen
Como hemos visto hasta ahora hemos puesto la directiva que nos indica que se cargará una imagen en la línea siguiente a la que teníamos el texto. Pero y ¿si queremos alinear la imagen con el texto? Para ello ponemos ambas etiquetas (imagen y texto) en la misma línea de texto y usamos la propiedad “align” para la imagen. La propiedad “align” puede tomar varios valores según se quiera alinear vertical u horizontalmente. Si queremos una alineación vertical con el texto usaremos una de estas tres propiedades: o Top: El borde superior del texto y la imagen coinciden. o Middle: El texto se situará a la mitad de la imagen. o Bottom: El texto se alineará con el borde inferior de la imagen. Si queremos usar la alineación horizontal con el texto podemos darle dos valores a la propiedad “align”: o Left: La imagen quedará alineada a la izquierda de la capa y el texto a continuación de ésta. o Right: La imagen quedará alineada a la derecha de la capa en la que se encuentre. Y el texto aparecerá a la izquierda de la misma. Quedaría así:
HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 51 PROGRAMACIÓN
<p class="derecha"><img src="imagenes/teclado_blanco.jpg" width="720" height="230" align=”right” alt="teclado curso html"> En este curso veremos los <i>aspectos <br> básicos</i> de la programación <b>HTML</b></p>
figura 3.20 Alinear una imagen con respecto al texto
Otra propiedad que le podemos dar a la imagen es “border”, la cual le aplicará un borde de color negro a la imagen. Para usar esta propiedad se le HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 52 PROGRAMACIÓN
aplicará un número que indicará el grosor del borde. Se muestra en el siguiente ejemplo: <p class="derecha"><img src="imagenes/teclado_blanco.jpg" width="720" height="230" align="right" border="5" alt="teclado curso html"> En este curso veremos los <i>aspectos <br> básicos</i> de la programación <b>HTML</b></p>
figura 3.21 Darle un borde a la imagen
Recomiendo que uses todas estas propiedades (ancho, alto y alineación) que estamos viendo de las imágenes, practicando es como mejor entenderán como funcionan y sus limitaciones. HTML BÁSICO
Nieves Pulido Lozano
HTML BÁSICO 53 PROGRAMACIÓN
Recuerda la creación de capas, también se puede crear una capa que contenga sólo imágenes. ACTIVIDAD: Añadir como mínimo dos imágenes al texto creado anteriormente. En la inserción de las imágenes debemos usar el atributo alt, la alineación con el texto y la propiedad de borde
HTML BÁSICO
Nieves Pulido Lozano