Principios de Programación Parte 7 (Computación)

Para terminar nuestro pequeño ejemplo (index.html) que dejamos pendiente el mes anterior, en esta entrega haremos lo siguiente:

  1. Conoceremos algunas etiquetas nuevas.
  2. Insertaremos una imagen:
  3. Daremos una primera vista a los enlaces o hipervinculos.

Que necesitaremos para este ejemplo: primero nuestro editor de texto favorito, como leafpad o notepad, segundo de ganas, para mi las mas importantes, y tercero de memoria para acordarnos lo que hicimos el mes pasado y donde guardamos el archivo.

También necesitaremos una imagen que insertar, para ello usaremos esta:

Wallpaper de Android

Pues bien manos a la obra, hay que empezar abriendo nuestro archivo index en nuestro editor favorito. La primer etiqueta que añadiremos sera:

<!DOCTYPE html>

Sirve para decirle al explorador que es un archivo html simple, y que no tiene nada de complejo.

<HTML lang=”es”>

Alguna vez se han preguntado, Como sabe el explorador que un sitio esta en otro idioma? pues es por este agregado a nuestra etiqueta <HTML> incluso a veces hasta nos pregunta si deseamos traducirlo al español. En fin, pues con esta pequeña linea se dispara esta sugerencia. Por cierto con esto, también se quita nuestro error que teníamos con los acentos.

Después de agregar esta linea, el código se vera así:

Y en el explorador:

Para darle un poco más de estructura después de eso agregaremos la etiqueta <HR> debajo de nuestro Encabezado Hola Mundo y nuestro pequeño Parrafo: Esta es mi primer página en HTML. Esta etiqueta tiene la particularidad que no necesita cerrarse, asi que solo necesitan ponerla en una linea nueva, antiguamente se usaba para dividir secciones.

Para aderezar mas esto, agreguen debajo del otro <HR> lo siguiente:

<P align=”center”>2012</P>

Esto añadirá un párrafo que nos servirá como pie de página, algo muy común en todos los sitios. El agregado align lo que hace es centrar nuestro texto. Ustedes pueden poner lo que gusten. Al final la página se vera así:

 

Sorprendidos?, la página ya va agarrando forma, ya para terminar incluiremos la imagen con la etiqueta: <IMG src=”ubicación/nombre de la imagen” alt=”texto alternativo en caso que no se encuentre la imagen”>

Debemos guardar la imagen en el mismo directorio que el index.html o lo más cercano posible. En nuestro caso agregamos lo siguiente, debajo de nuestro primer parrafo y asi quedaria:

<img src=”06-android-wallpapers1.jpg” alt=”android”>

La etiqueta IMG es muy usada en minusculas, por lo que, yo los dejaré que decidan como emplearla. Como el tamaño de mi pantalla es reducido, fijare un ancho menor a la imagen, el código quedara así:

 

El <meta> que ven en la imagen, al inicio, les podría servir, en caso de que <HTML lang=”es”> no les muestre bien los acentos, es un tema de codificación que no considero tan importante, por ahora.

Con los agregados height (altura) y width (anchura) podemos modificar a placer el tamaño de la imagen, en mi caso la reduje para que vean como quedaría. Para concluir les dejo el vistazo final del código:

Y como se ve en el explorador:

 

El tema de los hipervinculos lo veremos la próxima, es demasiado tarde y debo dormir algo, espero les guste esta mini entrada y si tienen dudas o sugerencias, agréguenlas como comentarios. See you later…

Anuncios
Etiquetado , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: