3.1 Conceptos básicos. Etiquetas, editores, navegadores. 3.2 Mi
Anuncio
TEMA 8 – Introducción al HTML. 3.1 Conceptos básicos. Etiquetas, editores, navegadores. El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Permite escribir de forma estructurada y está compuesto por etiquetas que marcan el inicio y el fin de cada elemento. Los documentos HTML deben tener la extensión html o htm y se visualizan en los navegadores. Pueden contener imágenes, vídeos... Las etiquetas o marcas delimitan los elementos que componen un documento HTML. Existen dos tipos de etiquetas, las de comienzo <etiqueta> y las de fin o cierre </etiqueta>. La etiqueta de comienzo está compuesta por el nombre de la etiqueta y puede contener atributos opcionales. Su sintaxis es <etiqueta atributo1 atributo2 ...>. Hay algunos elementos que no tienen etiqueta de cierre. Los editores son programas que permiten realizar páginas web sin necesidad de escribir código HTML. Microsoft Frontpage y Kompozer son programas para la edición de páginas web. Utilizan un entorno visual con la tecnología WYSIWYG (what you see is what you get) que nos permite un diseño rápido y sencillo. Sin embargo, a veces, hay que depurar la página utilizando código HTML. Para escribir directamente este código usamos herramientas básicas como el bloc de notas de Windows o gedit de Guadalinex. Los navegadores más usados son Microsoft Internet Explorer, Mozilla Firefox y Google Chrome. No todos los navegadores (o versiones del mismo navegador) visualizan la página web de la misma forma. Por tanto, es necesario estar siempre actualizado para que sean compatibles con la última versión de HTML. Si un navegador no reconoce una etiqueta, la ignora. 3.2 Mi primera página web. Vamos a crear una página sencilla. Abrimos con gedit un archivo que se llamará index.html . Escribimos la estructura fundamental de una página web: <html> <head> </head> <body> </body> </html> La cabecera de la página se utiliza para agrupar información en ella, como puede ser el título. Está formada por las etiquetas <head> y </head>. El título de la página es el que aparecerá en la parte superior del navegador. Se consigue con las etiquetas <title> y </title> . <html> <head> <title> Mi nombre </title> </head> <body> </body> </html> El color de fondo de la página se consigue añadiendo atributos a la etiqueta <body> . Los colores se expresan en hexadecimal y los puedes encontrar en la URL: http://www.aulaclic.es/html/b_2_2_1.htm . Algunos colores están predeterminados por su nombre en inglés. <html> <head> <title> Mi nombre </title> </head> <body bgcolor=”00FFFF”> HOLA </body> </html> Los margenes se consiguen añadiendo a body los atributos leftmargin, rightmargin, topmargin y bottonmargin. El formato es: leftmargin=”X” (donde X es la longitud del margen en píxeles). Con las etiquetas <div> y </div> creamos secciones. En este caso nos ayuda a centrar los textos. <div style="text-align: center;"> </div> Para insertar un salto de línea tenemos que añadir la etiqueta <br> . Con la etiqueta <hr> insertamos una línea horizontal. El texto se formatea con las etiquetas <font> y </font>. Los atributos son: Atributo Significado face Posibles Valores Fuente (tipo de letra) Nombre de la fuente o fuentes color Color del texto En hexadecimal (o predefinido) size Tamaño del texto Del 1 al 7, siendo por defecto el 3 Los caracteres especiales < y > se pueden añadir como texto escribiendo el nombre que los representa. Ocurre de igual forma cuando queremos añadir espacios en blanco. Carácter < > Espacio en blanco Nombre &lt &gt &nbsp El código completo de la página y el resultado se muestran aquí: <html> <head> <title> Mi nombre </title> </head> <body bgcolor=”00FFFF” text=”FF0000” leftmargin="200" rightmargin="200" topmargin="200" rightmargin="200"> <div style="text-align: center;"> <font face="Arial" color="red" size="7"> <hr> &lt &lt HOLA &gt &gt <br> <br> Ésta es mi primera página web <br> ¡¡¡ Estoy muy contento !!! <hr> </font> </div> </body> </html> 3.3 Tablas en un documento HTML. Ahora vamos a realizar una tabla en un documento html. Abrimos con gedit un archivo que se llamará tabla.html . Escribimos la estructura fundamental de una página web con su título incluido: <html> <head> <title> tabla </title> </head> <body> </body> </html> Las tablas están formadas por celdas como resultado de la intersección de filas y columnas. Las etiquetas para crear una tabla son <table> y >/table> . Las filas se consiguen con <tr> y </tr>. Cada fila puede tener varias celdas (lo que equivale a especificar columnas). Las etiquetas son <td> y </td>. Una tabla de dos filas y dos columnas sería: <table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> (sin bordes) Es posible modificar los atributos de una tabla con: Atributo Significado Posibles Valores width Ancho de la tabla Un número acompañado de % cuando se desee un porcentaje height Altura de la tabla Un número acompañado de % cuando se desee un porcentaje cellpadding Espacio entre el contenido de las celdas y el borde Un número cellspacing Espacio entre celdas Un número border Grosor del borde Un número align Alineación de la tabla dentro de la página left – center -right bgcolor Color de fondo Número hexadecimal background Imagen de fondo Número hexadecimal bordercolor Color del borde Número hexadecimal Por ejemplo, esta tabla está alineada al centro y ocupa el 60% del ancho y el 40% del alto. <table align=”center” width="60%" height="40%" border="3" bordercolor="#0000FF"> Las celdas se formatean con los atributos width, height, align, bgcolor, background, bordercolor y valign. Atributo Significado Posibles Valores valign Alineación vertical del contenido de la celda baseline, bottom, middle, top El código completo de la página y el resultado se muestran aquí: <html> <head> <title> tabla </title> </head> <body topmargin="20"> <table align="center" width="60%" height="40%" border="3" bordercolor="#0000FF"> <tr> <td align="center"> 1 </td> <td align="center"> 2 </td> </tr> <tr> <td align="center"> 3 </td> <td align="center"> 4 </td> </tr> </table> </body> </html> 3.4 Separadores e imágenes en un documento HTML. A veces es útil insertar una regla horizontal o separador. Se consigue con la etiqueta <hr> . Se pueden añadir atributos que la configuran a gusto del programador web. Por ejemplo: <hr align="center" width="100%" size="5" noshade> . Atributo Significado Posibles Valores align Alineación de la regla en la página left, right, center width Ancho de la regla. Es un número o un % size Alto de la regla Es un número noshade Eliminación del sombreado No puede tomar valores Las imágenes son un elemento fundamental de una página web. Para insertar una imagen llamada html.png usamos la sintaxis: <img src=”html.png”>. Se puede establecer el ancho y el alto de la imagen con los atributos width y height. Creamos un archivo llamado imágenes y separadores.html con dos separadores horizontales y la imagen insertada. El código completo es: <html> <head> <title> imágenes y separadores </title> </head> <body topmargin="100"> <center> <hr width="400" size="10" noshade> <br> <img src=html.png> <br> <hr width="400" size="10" noshade> </center> </body> </html> 3.5 Enlaces a otras páginas web. Capas. Los enlaces entre las páginas de un sitio web y otras páginas externas nos permite “navegar” a través de la red. Vamos a crear dos páginas web llamadas uno.html y dos.html . Las dos páginas se enlazarán mediante un botón. Los enlaces se realizan así respectivamente: <a href=”uno.html”> </a> , <a href=”dos.html”> </a> . Los botones se consiguen con la orden <button> y </button> . Las capa <div> y </div> sirve para insertar un cuadro de texto o contenido html con características específicas. Las capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño. Código de la página 1 <html> <head> <title> enlace a dos </title> </head> <a href="dos.html"> <button> Entrar </button> </a> <br> <br> <div style="text-align: center;"> <font face="Arial" color="red" size="7"> PÁGINA 1 </div> </body> </html> Código de la página 2 <html> <head> <title> enlace a uno </title> </head> <a href="uno.html"> <button> Salir </button> </a> <br> <br> <div style="text-align: center;"> <font face="Arial" color="blue" size="7"> PÁGINA 2 </div> </body> </html> 3.6 Marcos o frames. Los marcos o frames mejoran la apariencia y funcionalidad de una página web. Permiten distribuir mejor los datos manteniendo fijas algunas partes (logotipo, barra de navegación...) y variables otras. Cada uno de los marcos contiene un documento html individual. Creamos una página con gedit con la definición del conjunto de marcos, llamada marcos.html . Cada uno de los marcos de una página contiene un documento HTML individual. Creamos por tanto marco1.html (que aparecerá en la izquierda) y marco2.html (que aparecerá en la derecha). Trabajar con marcos puede resultar una tarea complicada, por tanto haremos un ejemplo sencillo. Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después de la etiqueta <head> . A través de esas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana. Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body> . Por último, debemos saber que entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre. Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes: Atributo Significado Posibles Valores cols Tamaño de cada una de las columnas en que se divide el documento Un número (acompañado de % cuando se desee un porcentaje) por cada columna, separados por comas. rows Tamaño de cada una de las filas en que se divide el documento Un número (acompañado de % cuando se desee un porcentaje) por cada fila, separados por comas. frameborder Aparece o no el borde de los marcos framespacing Separación entre los marcos Un número border Grosor del borde Un número, acompañado de % cuando se desee un porcentaje bordercolor Color del borde Número hexadecimal yes no Ya hemos visto como se divide el documento en subventanas o marcos. Es el momento de cargar las páginas en cada uno de los marcos. Se hace con la etiqueta <frame> por cada uno de los marcos. Es decir: <frameset> <frame src="marco1.html"> <frame src="marco2.html"> </frameset> Los atributos de la etiqueta <frame> son: Atributo Significado frameborder Aparece o no el borde del marco Nombre del marco name Posibles Valores yes o 1 no o 0 Cualquier valor Si aparece, el usuario no podrá redimensionar el tamaño de este marco noresize marginwidth Anchura del margen con respecto a los bordes del marco un número, acompañado de % cuando se desee que sea en porcentaje marginheight Altura del margen con respecto a los bordes del marco un número, acompañado de % cuando se desee que sea en porcentaje scrolling Se mostrará o no la barra de desplazamiento cuando la página del marco no se pueda visualizar completamente en él src Documento que se cargará en el marco yes no auto ruta y nombre del documento El código completo de la página y el resultado se muestran aquí: Código de la página de marcos <html> <head> <title> marcos </title> <frameset cols="30%,70%" frameborder="yes" framespacing="3" border="3" bordercolor="blue"> <frame src="marco1.html" name="marco izquierdo" frameborder="yes" scrolling="no" noresize> <frame src="marco2.html" name="marco derecho" frameborder="yes" scrolling="auto"> </frameset> </head> </html> Código del marco izquierdo <html> <head> <title> marco 1 </title> </head> <body> <center> <font face="Arial" color="red" size="7"> MARCO UNO </center> </body> </html> Código del marco derecho <html> <head> <title> marco 2 </title> </head> <body> <center> <font face="Arial" color="blue" size="7"> MARCO DOS </center> </body> </html> Para terminar, entrega al profesor los archivos html de los ejercicios: uno.html, dos.html, mi primera página.html, marcos.html, marco1.html, marco2.html e imagenes y separadores.html .
