Tus primeros pasos con HTML

Transcripción

1 Tus primeros pasos con HTML Por: Héctor Hugo Luna Miranda Conceptos básicos Antes de empezar a construir tu primera página Web, debes conocer y comprender los siguientes conceptos: Navegador Web: técnica y prácticamente, un navegador Web es una aplicación que se instala en la computadora del cliente y que, mediante una conexión a Internet, permite acceder a todos los sitios de la red mundial y así visualizar páginas estáticas y dinámicas (Vázquez, 2006, p. 22). HTML: son las siglas en inglés de Hipertext Markup Language. Es el lenguaje que se utiliza para crear las páginas Web. Hipertexto: es una tecnología que organiza una base de información en bloques distintos de contenidos, conectados a través de una serie de enlaces cuya activación o selección provoca la recuperación de información (Biachini, 2000, párr. 2). Qué necesito para empezar? Cuando se trata de crear páginas Web, el material necesario es muy sencillo y fácil de conseguir. Esto es así porque todas las computadoras cuentan con este recurso desde el momento en que se compra. Dicho material se lista a continuación: Un navegador Web: puedes elegir el de tu preferencia, ya que entre los principales se encuentran: 1

2 Figura 1. Navegadores de internet. (Luna, 2011). En tu computadora ya se encuentra instalado por lo menos uno de éstos. Si tienes dos o más, no te preocupes, sólo elige tu favorito. Información adicional Para abrir tu navegador, haz clic en el menú Inicio. Debajo del nombre de usuario está localizado tu navegador predeterminado. Puedes observar la figura 2, para que tengas una mayor referencia. Figura 2. Menú inicio (Microsoft, 2001). 2

3 Un editor de textos simple, el más común que puedes encontrar en tu computadora y con el que trabajaremos aquí, es el Bloc de notas. Figura 3. Bloc de notas (Microsoft, 2001). Información adicional Para acceder al Bloc de notas vamos a Inicio, damos clic en Todos los programas, de ahí nos dirigimos a Accesorios y en esta sección encontramos dicha herramienta. Estos pasos se ilustran en la imagen de la figura 4: Figura 4. Acceso al Bloc de notas (Microsoft, 2001). 3

4 En este momento, posiblemente pensarás: Eso es todo? Pensé que se necesitarían más cosas. Verdad que es sorprendente cómo, con tan poco material, podemos crear grandes cosas? Ya que sabes los materiales que necesitas, hay que poner manos a la obra. Como ya leíste, HTML es el lenguaje que se necesita para crear páginas Web y, como todo lenguaje, tiene sus propias reglas y su forma de escribirlo. Conforme vayas avanzando en esta lectura los conocerás más a fondo. El lenguaje HTML cuenta con palabras especiales llamadas tags o etiquetas que son el medio por el cual nos comunicaremos y crearemos nuestra página Web. Estas palabras utilizadas en HTML obedecen a una estructura muy particular cada vez que pretendemos decir algo (elemento que se va a mostrar o ejecutar) usando HTML, por ello debes especificar la forma en que deseas hacerlo (acción que se va a llevar a cabo sobre lo que queremos decir). Puedes observar en la figura 5, la estructura básica de una etiqueta HTML. Figura 5. Estructura básica de una etiqueta HTML. Como te puedes dar cuenta en el diagrama, cuando nos queremos comunicar usando HTML es necesaria una etiqueta de inicio (en el diagrama representado por <ACCIÓN>) y una de fin (representada por </ACCIÓN>, a la etiqueta de fin además se le agrega el carácter /). Si eres un poco curioso, seguramente te llamaron la atención los símbolos < y >. Dentro de estos símbolos vamos a especificar la acción a realizar sobre el contenido. Este último debe ir encerrado entre nuestra etiqueta de inicio y de fin. 4

5 Con base en la información anterior, te puedes dar cuenta de las primeras reglas de sintaxis del lenguaje HTML: Nuestro mensaje debe estar encerrado entre una etiqueta de inicio y una etiqueta de fin. Esta regla tiene las excepciones que veremos más adelante. Al especificar una acción de inicio, debe ir dentro de los símbolos < y >. A la acción de fin, además de llevar los símbolos < y >, se agrega el carácter / que nos indica que es el fin de una acción. Con respecto al nombre de las acciones, no te preocupes para HTML es lo mismo si escribes <ACCIÓN> que <acción>, pues no distingue entre mayúsculas y minúsculas, aunque como recomendación personal es mejor usar mayúsculas, para que las puedas identificar más rápidamente. Ya sabemos que los símbolos <, > y / se usan para especificar las acciones. Por ello, ninguno de estos tres puede existir dentro del contenido de la etiqueta. En caso de ser necesario su uso, debes sustituirlos por las siguientes expresiones: < que corresponde al carácter < y > que corresponde al carácter >, los cuales son conocidos como entidades HTML. A continuación aparecen algunos ejemplos: Valido:<ACCIÓN> Este ejemplo es >valido<</acción>. No valido: <ACCIÓN>Este ejemplo NO es <valido> </ACCIÓN>. Si quieres conocer más casos en los que hay que hacer uso de entidades HTML, te recomiendo entrar a la siguiente página: 5

6 Etiquetas básicas Todo documento HTML o página Web requiere de un conjunto de etiquetas básicas y necesarias para poder funcionar y ser identificado por el navegador como documento de HTML. Al igual que una carta tiene un conjunto de secciones definidas, una página HTML también cuenta con una estructura definida. Las secciones principales están especificadas por las etiquetas básicas. Para comprender un poco más a lo que nos referimos, observa detenidamente la figura 6. Figura 6. Estructura básica de una página Web. En la figura anterior puedes observar cuatro etiquetas básicas que conforman la estructura principal de una página Web. Ahora vamos a conocer cuál es la función de cada una de ellas. Etiqueta <HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> Acción o función Es la principal del documento, ya que lo identifica como documento del tipo HTML para que el navegador pueda interpretarlo como tal. Dentro de esta etiqueta, deben ir todas las secciones que van a conformar la página Web (<HEAD>, <TITLE>, <BODY>). Es conocida como el encabezado de la página. Dentro de ésta vamos a encontrar elementos como el título de nuestra página e información de identificación de la misma. Es el título de nuestra página. Con este nombre aparecerá en el navegador cuando entremos a la página Web. Dentro de esta etiqueta desarrollaremos todo el contenido de nuestra página: texto, tablas, links, imágenes, videos y todos los elementos que deseamos se muestren en el navegador. Las etiquetas que nos ayuden a desarrollar nuestro contenido deben de ir dentro de esta etiqueta. Tabla 1. Funciones de las etiquetas básicas. 6

7 A partir de este momento, te recomiendo que coloques esta lectura de tal manera que puedas ir realizando los pasos que aquí se te indican, colócala donde te sea fácil visualizarla Ahora vas a realizar un ejemplo práctico para elaborar una página Web estándar con las etiquetas que conoces hasta el momento. Primero abre el programa Bloc de notas y en un archivo nuevo agrega el siguiente código: Figura 7. Código en bloc de notas (Microsoft, 2001). Guarda este documento con el nombre index.html en una carpeta de tu computadora que te sea fácil encontrar. Te recomiendo lo hagas en una carpeta en el escritorio llamada aplicaciones computacionales. 7

8 Figura 8. Guardar como (Microsoft, 2001). Cierra el bloc de notas y dirígete a la carpeta donde guardaste el documento index.html. Te aparecerá de la siguiente forma: Figura 9. Index.html (Microsoft, 2001). 8

9 Posiciónate sobre el archivo, haz clic con el botón derecho del ratón y con la opción Abrir con selecciona el navegador que has usado. En este caso, hazlo con Internet Explorer. Figura 10. Abrir con navegador (Microsoft, 2001). Una vez que abras el documento, observa detenidamente lo que aparece en el navegador que estés usando. En Internet Explorer, debes ver lo siguiente: Figura 11. Primera página Web (Microsoft, 2001). 9

10 Listo! Has creado tu primera página Web. Estuviste atento? Te diste cuenta de que en la práctica anterior, además de las etiquetas que ya conocías, apareció una nueva? Claro que te diste cuenta! Muy bien, estás en lo correcto. La etiqueta <P> no la habías estudiado. Cuál es la acción que ejecuta esta etiqueta? Etiqueta <P></P> Acción o función Va a definir un elemento del tipo párrafo. La gran mayoría del texto de nuestra página va dentro de esta etiqueta; ya que, además de definir que el texto va a ser tratado como un párrafo, nos va a permitir agregarle otros atributos. Tabla 2. Acciones de la etiqueta <P>. Cada etiqueta, además de realizar una función específica, cuenta con atributos o modificadores. Estos atributos permiten extender la funcionalidad de nuestras etiquetas. Los modificadores se escriben dentro de los símbolos < y > de la etiqueta de inicio, después del nombre de nuestra etiqueta. Si has sido un poco observador, te diste cuenta de que el texto de nuestra página anterior está alineado a la izquierda, pero qué pasa si deseamos centrarlo, alinearlo a la derecha o justificarlo? Es en estos casos hacemos uso de los atributos de la etiqueta. La etiqueta <P> cuenta con un modificador que nos permite definir la alineación del texto y su nombre es ALIGN. Observa algunos ejemplos de cómo se utiliza. Figura 12. Código Atributo ALIGN (Microsoft, 2001). 10

11 El resultado del código de atributo ALIGN se muestra a continuación: Figura 13. Resultado del código de atributo ALIGN (Microsoft, 2001). Qué te ha parecido hasta el momento? Verdad que es muy sencillo. Es tiempo de voltear un poco hacia atrás y recordar lo que has aprendido: Conoces el material necesario para crear una página Web. Sabes con qué lenguaje se crean las páginas Web. Aprendiste qué es una tag o etiqueta y su estructura. Sabes cuál es la estructura básica de todo documento HTML. Te diste cuenta de que para agregar texto a tus páginas, harás uso de la etiqueta <P>. Aprendiste que las etiquetas tienen atributos que te permiten añadir un comportamiento a la función que por default realizan. 11

12 Ahora que ya tienes el conocimiento necesario y has creado un página con su estructura básica, qué te parece si construyes una página más en forma? Te parecería adecuado si creas la página de tu perfil que contenga tu información principal de contacto y una fotografía tuya? Creando la página de tu perfil Para comenzar a crear la página de tu perfil, primero hay que definir lo que deseas mostrar en ella. En el ejemplo práctico que llevarás a cabo, vas a mostrar la siguiente información: Nombre Dirección Teléfono Descripción de lo que te gusta hacer Una fotografía Una vez definida la información que se mostrará en la página, es una excelente práctica realizar un pequeño bosquejo de la manera en que se va a estructurar. Para este caso de la página de tu perfil, te sugiero el siguiente: Figura 14. Boceto de página. 12

13 Excelente! Ya sabes qué contendrá tu página y cómo vas a mostrar dicha información. Ahora puedes comenzar a crear el código HTML necesario. Paso 1 Prepara la estructura básica de tu documento en código HTML como ya sabes hacerlo. Si no lo recuerdas, lee lo siguiente: abre el Bloc de notas (los pasos para abrir el bloc de notas están en la página 3 de esta lectura) y escribe el siguiente código: Código básico de toda página Web Figura 15. Código básico de una página Web (Microsoft, 2001). Guarda este nuevo documento con el nombre perfil.html en una carpeta que te sea de fácil acceso, de preferencia en el Escritorio y en una carpeta llamada Aplicaciones computacionales. Sin cerrar tu bloc de notas (vas a seguir utilizándolo), abre tu documento con tu navegador favorito. Almacena este documento con la opción Guardar como, del menú Archivo. 13

14 Figura 16. Guardar código básico (Microsoft, 2001). Crea una nueva carpeta en tu escritorio con el nombre Aplicaciones computacionales. Figura 17. Crear carpeta Aplicaciones computacionales (Microsoft, 2001). Guarda tu documento con el nombre perfil.html dentro de la carpeta que creaste anteriormente. 14

15 Figura 18. Guardar archivo perfil.html (Microsoft, 2001). Ve a la carpeta donde guardaste el archivo perfil.html, ábrelo con el navegador de tu preferencia. En este caso, Internet Explorer. Figura 19. Abrir archivo perfil.html con Internet Explorer (Microsoft, 2001). 15

16 Así es como se ve tu página básica: Figura 20. Vista de una página básica (Microsoft, 2001). Paso 2 Crea la sección del nombre de tu página, observa el código necesario. Agrega una etiqueta <H1> con el atributo ALIGN= CENTER y guarda tu documento Figura 21. Uso de etiqueta <Hx> (Microsoft, 2001). 16

17 La siguiente imagen muestra el código anterior: Figura 22. Resultado de la etiqueta <Hx> (Microsoft, 2001). Qué fue lo que sucedió y para qué sirve la etiqueta <H1>? A continuación la respuesta: Etiqueta <Hx></Hx> Acción o función Es conocida como la etiqueta de formato predefinido, especificado por estándares de HTML. En la parte de la izquierda se muestra la H acompañada de una pequeña x, la x va a ser sustituida por un número entre el 1 y el 6 (<H1>, <H2>, <H3>, <H4>, <H5>, <H6>) definiendo así el tamaño que tomará el texto. El número 1 es el más grande y el 6 es el más pequeño, permitiendo crear jerarquías de títulos, subtítulos y así sucesivamente. Debes tener en consideración que sin importar cuál sea el número que se seleccione, el texto siempre se mostrará en negrita. Tabla 3. Acciones de la etiqueta <H1>. 17

18 Paso 3 Agrega la foto a tu documento. Observa con mucha atención porque esta acción es un caso muy especial. Antes de crear el código HTML se debe tener la imagen que se quiere mostrar y se debe guardar en el mismo lugar de la página perfil.html. En este caso, se eligió la siguiente imagen, que tiene el nombre de perfil.png (es importante conocer la extensión de la imagen). Figura 23. Perfil.png Figura 24. Vista explorador de archivos (Microsoft, 2001). Ya que se ha elegido y guardado la imagen a utilizar en la carpeta correcta, se procede a escribir el código HTML. Agrega un párrafo centrado (ALIGN= CENTER ) y la etiqueta IMG con el atributo SRC= perfil.png y guarda tu documento. 18

19 Figura 25. Código etiqueta <IMG> (Microsoft, 2001). Vuelve a abrir tu archivo con el navegador. La figura 26 muestra el resultado del código anterior. Figura 26. Resultado de etiqueta <IMG> (Microsoft, 2001). 19

20 Te invito a analizar cada uno de los elementos agregados: Iniciaste con la etiqueta <P> que ya conocías. Centraste el contenido del párrafo utilizando el atributo ALIGN= CENTER. Dentro del párrafo colocaste un elemento que no se había trabajado: <IMG>, que nos va a permitir cargar una imagen en nuestra página Web. Recuerda siempre que en una etiqueta de párrafo <P> es posible agregar otros elementos además de texto. Profundiza en el nuevo elemento <IMG>, revisando la tabla 4. Etiqueta <IMG> Acción o función Tiene como función agregar una imagen a nuestro documento. Esto es un caso muy especial debido a que sólo cuenta con la sección de abrir la etiqueta. A diferencia de las anteriores, no es necesario especificar un cierre de etiqueta. Cuenta con un atributo que siempre debe acompañar a la etiqueta que es SRC= origen de la imagen, el cual tiene como valor la ruta completa donde se encuentra nuestra imagen en relación con nuestro archivo principal. En el ejemplo anterior, el atributo SRC es igual a perfil.png, porque la imagen está en la misma ruta que nuestro archivo, pero qué pasa si la imagen se encontrara en una subcarpeta llamada imgs? Entonces nuestro atributo SRC quedaría de la siguiente manera SRC= imgs/perfil.png. Tabla 4. Acciones de la etiqueta <IMG>. 20

21 La etiqueta <IMG> cuenta con otros atributos que ayudan a modificar la apariencia de cualquier imagen: Atributo WIDTH HEIGHT Valores posibles Representa el ancho que va a tomar nuestra imagen y su valor es dado en pixeles. Un ejemplo sencillo es WIDTH= 120px Representa el alto que va a tomar nuestra imagen y su valor es dado en pixeles. Un ejemplo sencillo es WIDTH= 140px Tabla 5. Otros atributos de la etiqueta <IMG>. Observa qué pasa si se agrega este par de atributos a tu imagen. Se añade el par de atributos con un valor de 50px y se guarda. Figura 27. Atributos de etiqueta <IMG> (Microsoft, 2001). Éste es el resultado cuando se vuelve a abrir el documento. Aprecia cómo la imagen toma el tamaño que le especificaste (Observa la figura 28). 21

22 Figura 28. Resultado de aplicación de atributos de la etiqueta <IMG> (Microsoft, 2001). Elige con cuidado los valores de estos dos atributos para que tu imagen se muestre lo mejor posible y logres un mayor impacto visual en tu página Web. Paso 4 Tu página está tomado forma, pues ya tiene nombre y una fotografía. Es momento de agregar los datos personales. Hay que volver al archivo perfil.html y agregar el código correspondiente que ayuda a mostrar los datos personales. Para ello, añade un conjunto de etiquetas que te permitirán mostrar la información personal en forma de una tabla bien organizada y vuelve a guardar tu documento. 22

23 Figura 29. Código de tablas en HTML. Al abrir el documento con el navegador, así luce tu página hasta el momento. 23

24 Figura 30. Resultado de uso de tablas en HTML. Veamos a fondo qué es lo que sucedió. En esta ocasión, creamos una tabla <TABLE> utilizando un conjunto de etiquetas que nos permiten crear cada una de las secciones que forman la tabla: filas <TR> y celdas <TD>. 24

25 Cómo funciona cada una de las etiquetas? Etiqueta <TABLE> <TR> <TD> Acción o función Define el uso de una tabla. Esta etiqueta tiene un comportamiento muy particular, ya que dentro de ésta es necesario seguir una estructura de jerarquía de las etiquetas que pueden ir dentro de ella. Para poder construir una tabla primero se tienen que crear las filas que se van a necesitar por medio de la etiqueta <TR> y la tabla debe de contener como mínimo un elemento de fila. Ya definidas las filas que se van a utilizar, hay que indicar a cada una cuántas celdas van a contener por medio de la etiqueta <TD>. Como mínimo, cada fila debe contener por lo menos un elemento de celda y en el interior de cada celda es el lugar donde se a coloca la información y demás elementos. Permite definir una fila para la tabla. Cada fila que sea definida, forzosamente necesita como mínimo contener una celda. Indica una celda perteneciente a una fila existente en la tabla. Es la última de las etiquetas jerárquicas de la tabla y ésta ya podrá contener los demás elementos. Tabla 6. Función de cada una de las etiquetas vistas. Información adicional es un código especial que significa un espacio vacío. Con ayuda de las imágenes de las figuras 31 y 32, reforzarás los conceptos anteriores. 25

26 Figura 31. Composición básica de una tabla HTML. Figura 32. Estructura de una tabla HTML. 26

27 Información adicional Las etiquetas <TD> cuentan con un atributo muy particular llamado COLSPAN que permite decirle a una celda que extienda su tamaño y ocupe el espacio de dos o más celdas. Con estos elementos, tu página se ve de esta forma hasta el momento: Figura 33. Perfil de pablo (Microsoft, 2001). Te diste cuenta de que el texto Datos personales de la primera fila aparece del lado izquierdo y se tiene una celda vacía del lado derecho para poder armar correctamente la tabla. Se vería mejor que se centrara este texto y únicamente se utilizara una celda. Para lograr esto, se hace uso del atributo COLSPAN= 2 porque se necesita que el <TD> que contiene el texto Datos personales ocupe el espacio de dos celdas en vez de una sola. El siguiente código muestra cómo se debe hacer. En la primera fila, se elimina la segunda celda, y a la primera celda se agrega el atributo COLSPAN= 2 y ALIGN= CENTER para así lograr que el texto se vea centrado. 27

28 Figura 34. Código atributos de las etiquetas <TD>. Este es el resultado del código anterior (observa la figura 35). Figura 35. Resultado de uso de atributos en etiqueta <TD> (Microsoft, 2001) 28

29 Paso 5 Se ha llegado al último paso. Aquí vas a agregar tus gustos. Aquí vamos a aprender cómo dar formato a tu texto, es decir: negritas, subrayado, cursiva, tachado y dar ENTER. Para lograrlo, se hace uso del siguiente código. Figura 36. Código formato al texto. 29

30 Concéntrate en el recuadro azul, ahí es donde aparecen las etiquetas de formato. El resultado es el siguiente: Figura 37. Resultado de aplicar formato al texto (Microsoft, 2001). 30

31 Veamos la explicación de las etiquetas de formato. Etiqueta <STRONG></STRONG> <I></I> <U></U> <S></S> <BR> Acción o función Lo que se inserte dentro de esta etiqueta se mostrará como negrita. Indica que el texto contenido por esta etiqueta se mostrará en cursivas. El formato que tomará el texto es subrayado. El texto que se encuentra dentro de esta etiqueta tendrá un formato de tachado. Esta etiqueta indica un salto de línea equivalente a un ENTER en un procesador de textos. Éste, es otro caso especial que sólo requiere de la etiqueta de inicio. Tabla 7. Explicación de las etiquetas de formato. Resumen Has llegado al final de esta lectura. A lo largo del documento: Identificaste sin problema los principios básicos para la creación de páginas Web como lo son: Navegador, HTML e hipertexto. Usaste el material necesario para la creación de tus páginas: un navegador (Internet Explorer, Firefox, Safari o Chrome) y un editor de textos básico (Bloc de notas). Practicaste las bases del lenguaje HTML así como su estructura. Eres capaz de crear e identificar los siguientes elementos: a) Etiquetas HTML y su estructura. b) Principales etiquetas para crear una página Web estándar. c) Modificadores o atributos de una etiqueta HTML. 31

32 Con lo anterior, eres capaz de crear páginas Web estándar; así como, añadirle elementos del tipo párrafo y dar formato imagen y tablas. A partir de este momento, ya podrás crear tus propias páginas Web basadas en el lenguaje HTML. Referencias Biachini, A. (2000). Definiciones. En Conceptos y definiciones de hipertexto. Caracas, Venezuela: Universidad Simón Bolívar, Depto. de Computación y Tecnología de la Información. [Versión en línea]. Recuperado de Vázquez, P. (2006). Manual de Usuarios Creación de Sitios Web. Argentina: Banfield. Referencias de las imágenes Microsoft Corporation. (2001). Microsoft Windows (XP). [Software de cómputo]. Estados Unidos: Autor. Bibilografía Desarrollo web. (2003). Diseño y Programación de páginas Web. Aguascalientes, México: Ediciones Miguel Pedroza. Disponible en: Desarrollo web. (2009, junio 4). Video tutorial de HTML [Video streaming]. Disponible en: Eguíluz, J. (2008). Introducción a XHTML. España: Librosweb.es. [Versión electrónica]. Disponible en: Eguíluz, J. (2009). Introducción a CSS. España: Libros.es. [Versión electrónica]. Disponible en: García, J. (2006). HTML Fácil. España: Webestilo.es. Disponible en: Pastor, D. (2007). Diseño y creación HTML 4.1. Barcelona: Lulu.com/Deauno. [Versión electrónica]. Disponible en: 32

33 eño+y+programación+de+páginas+web&hl=es&ei=_0mytozpfoo2sap 5hYSRDA&sa=X&oi=book_result&ct=result&resnum=5&ved=0CEoQ6AE wba#v=onepage&q&f=false Ponce, D. (s. f.). Tutoriales HTML. España: Htmlquick.com. Disponible en: Pulido, E., Domínguez, O. y Jiménez, C. (s. f.). Tutorial de HTML. España: Facultad de Informática de la Universidad de Las Palmas de Gran Canaria. Disponible en: Van Lancker, L. (2009). Informática Técnica. Barcelona: ENI. [Versión electrónica]. Disponible en: ml+4+dominar+el+código+fuente&hl=es&ei=sewytovjji_ssapl2zg- DA&sa=X&oi=book_result&ct=result&resnum=1&ved=0CCoQ6AEwAA# v=onepage&q&f=false 33