HTML Informática
HTML HTML es un lenguaje de marcas, lo que significa el texto del documento está mezclado con etiquetas que aportan información extra sobre el texto que delimita. Información que el navegador interpreta para dar formato a la página que finalmente verá el usuario.
<b>Texto en negrita</b> Uso de etiquetas Las etiquetas se limitan con los signos menor que ( < ) y mayor que ( > ) y afectan a todo el texto que esta situado entre la marca de apertura y la de final (cerrada con una barra ( / ) además del mayor que), por ejemplo: <b>Texto en negrita</b>
La estructura básica HTML <html> <head> <title>Aquí el título de tu página</title> </head> <body> Texto de tu página (aquí irán los códigos, etc) </body> </html>
Significado de cada etiqueta <HTML> Indica que la pagina web esta hecha en ese idioma y limita el documento. <HEAD> Es un área de definición del documento HTML al que precede donde especifica información cómo el título de la página, entre etiquetas title y otra información destinada a buscadores. <TITLE> Esta etiqueta será utilizada para los marcadores del navegador y definirá un nombre para tu página, te recomiendo que sea corto pero explicativo para que si te das de alta en los buscadores con solo el título quede claro de que tu página va de cualquier tema. <BODY> Aquí irá todo el texto de tu página, todos tus códigos, etc
Puede empezar a hacer tu web en un simple Bloc de Notas si tiene Windows o Simple Text si utiliza Macintosh
Formateo básico Vamos a ver como podemos modificar el aspecto de nuestro texto usando fragmentos en negrita, cursiva, y otras opciones que nos brinda el lenguaje HTML.
Uso de etiquetas La manera que tendremos que hacer esto es usando las etiquetas de formato que son las siguientes: b - Texto en negrita i - Texto en cursiva u - Texto subrayado s - Texto tachado h1, h2, h3... - Encabezados right - Texto desplazado hacia la derecha center - Texto desplazado hacia el centro de la página font - Marca que sirve para definir la fuente y el color del texto que escribiremos.
Ejemplo Estas marcas las usaremos de la siguiente manera: Podemos meter texto en <b>negrita</b>
Font La marca font es un caso especial ya que gracias a la dicha etiqueta podemos modificar la fuente, tamaño y color del texto que posteriormente queramos escribir. face - Seguida de esta palabra colocaremos la fuente que queramos (ej. Arial) size - Seguida de esta palabra colocaremos el tamaño que queramos que sea la letra (Ej. 5) color - Seguida de esta palabra colocaremos el color RGB que queremos dar a nuestro texto.
Ejemplo podemos mezclar etiquetas Ejemplo <font color="#ff0000" size="5">Letra de color rojo y tamaño 5</font> podemos mezclar etiquetas Ejemplo <i><font face="Verdana" size="5">1<font face="Arial">2<font color="#FF0000">3</font><b><font color="#FF0000">4</font><u>5</u></b></font></i><u><b> 6</b></font></u>
Encabezados Así como en un documento de texto formateado ( word... ) en HTML podemos estructurar el contenido usando los distintos niveles de encabezados HTML. Los encabezados corresponden con las etiquetas <h1>, <h2>, .... , <h5> , ... La etiqueta <h1> se corresponderá con el nivel de encabezado 1, la etiqueta <h2> con el nivel de encabezado 2 y así respectivamente...
Colores en HTML El color HTML Un color se suele definir con un número de 6 cifras precedidas por almoadilla (#), donde los grupos de 2 cifras son cada uno la intensidad del Rojo, Verde y Azul de 0 a 255 en hexadecimal (0-FF), utilizando el llamado modelo RGB 24 bits.
Colores en HTML De esta manera, si tenemos #00FF00, obtendremos color verde, ya que contiene 00 de rojo, FF (255) de verde y 00 de azul. Sabiendo esto y un poco de Formateo Básico, podríamos codificar un texto de color rojo en HTML de la siguiente manera: <font color="#FF0000">Texto de color rojo</font>
Colores en HTML Para adaptarse a las pantallas que solo disponen 256 colores se recomienda utilizar los colores llamados web- safe que se obtienen usando combinaciones de 00, 33, 66, 99, CC y FF.
Enlaces Para poder vincular un texto con una dirección de internet (URL) de manera que el visitante pueda acceder a ella con un simple clic, usaremos la etiqueta de hipervínculo a. Para indicar la dirección a la que queremos acceder usamos el atributo href de la siguiente manera: <a href=http://www.programacionweb.net/> programacionWeb</a>
Enlaces Donde podemos poner una URL absoluta, por ejemplo http://www.programacionweb.net/ o poner una URL relativa como/paginas/index.asp para indicar un archivo i/o carpeta en el interior de la carpeta en la que estamos situados. También podemos hacer un vínculo a una parte concreta de la página, para ello crearemos un vínculo en ese lugar para indicar a que parte hay que ir usando el atributo name.
Imágenes en HTML Vamos a ver como podemos poner las fotos e imágenes que queramos en nuestra web, poner imágenes es una tarea casi imprescindible para que nuestra web quede más navegable y con un mejor estilo. Debéis tener en cuenta que las imágenes que queramos subir deben estar en formato JPG, GIF o PNG.
Imágenes en HTML Para definir las características de nuestra imagen, tendremos que tener en cuenta los siguientes atributos que pondremos en el interior de la etiqueta de imagen (<img>):
Imágenes en HTML src- Este atributo es obligatorio e indica el nombre del archivo (que lo pondremos entre comillas) en este campo se debe poner el URL que nos llevará a la imagen u fotografía. align- Permite controlar la alineación de una fotografía con respecto al texto o a otras imágenes en esa línea, para llevar a cabo esta tarea necesitamos los campos bottom (abajo), middle (en medio), top (arriba), left (izquierda), right (derecha). alt- Entre comillas se podrá poner un texto que si da error o no mientras que se carga podrán leer. width- Este atributo es opcional pero yo os lo recomiendo ya que ayudáis al navegador, en este campo ponéis el ancho de la imagen u fotografía. height-Esta es la hermana de width, dijimos que en width indicábamos el ancho de la imagen en esta indicamos el alto de la imagen y claro, pues también se recomienda. border- Esta es la prima de height y de width, en este campo se debe poner el ancho del borde de la imagen (si es que lleva claro).
Imágenes en HTML Ahora os pondré un ejemplo de ello: <img src="/nombre_de_tu_carpeta/nombre_de_tu_foto.jpg" width=140 height=210 border=0 alt="Aquí el nombre de la imagen">
Tablas Las tablas són una buena herramienta para organizar los datos en una página web, ademas nos permiten estructurar las paginas de nuestro sitio separando la cabecera, el menú, el contenido... La creación de tablas a partir de código es compleja por lo que si queremos crear una tabla rápidamente podemos usar programas como Frontpage o Dreamwaver, pero es necesario saber codificarlas a sí que vamos allá.
Tablas Creación de la tabla Para que el navegador interprete que vamos a realizar una tabla, deberemos usar las etiquetas table, entre cuyas etiquetas pondremos la estructura y el contenido de la tabla como se indica en el ejemplo:
Ejemplo <table> <!-- Contenido de la tabla --> </table>
Tablas Para definir la estructura de la tabla primero definiremos las filas con tr y en el interior de cada fila pondremos las columnas con td: <table> <tr><!-- Fila 1 --> <td>Fila 1 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr><!-- Fila 2 --> <td>Fila 2 columna 1</td> <td>Fila 2 columna 2</td> </tr> </table>
Tablas Ancho de filas y columnas Ahora vamos a ver como definir el ancho de una tabla o columna, para ello usaremos el atributo width tanto en la etiqueta table para modificar el ancho de toda la tabla, como sobre la etiqueta td para cambiar el ancho de una columna:
Ejemplo <table width="100%"> <tr><!-- Fila 1 --> <td width="300">Fila 1 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr><!-- Fila 2 --> <td>Fila 2 columna 1</td> <td>Fila 2 columna 2</td> </tr> </table>
Tablas Bordes y margenes Esta es otra posibilidad interesante de las tablas, nos permiten definir los bordes para personalizar su aspecto, asi podemos usar el atributo border para indicar el grosor del borde, cellpadding para indicar el reborde de las celdas y cellspacing para la separación entre las mismas:
Ejemplo <table border="0" cellpadding="10" cellspacing="5"> <tr><!-- Fila 1 --> <td>Fila 1 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr><!-- Fila 2 --> <td>Fila 2 columna 1</td> <td>Fila 2 columna 2</td> </tr> </table>
Tablas Color de fondo Para cambiar el color de fondo de una celda o de toda la tabla, lo haremos con bgcolor:
Ejemplo <table bgcolor="red"> <tr><!-- Fila 1 --> <td>Fila 1 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr><!-- Fila 2 --> <td>Fila 2 columna 1</td> <td bgcolor="black">Fila 2 columna 2</td> </tr> </table>
Tablas Combinar celdas Otra opción interesante es conseguir que una celda ocupe la posición que deberían ocupar dos o mas celdas, de esta manera, podemos hacer una tabla con 3 celdas, dos en una columna y otra en otra columna, para que una celda ocupe mas de una columna, usaremos colspan y para que ocupe mas de una fila rowspan:
Ejemplo <table> <tr><!-- Fila 1 --> <td rowspan="2">Fila 1 y 2 columna 1</td> <td>Fila 1 columna 2</td> </tr> <tr><!-- Fila 2 --> <td>Fila 2 columna 2</td> </tr> </table>
Tabla Finalmente vamos a ver un ejemplo de tabla usando todos los conocimientos que hemos adquirido:
Ejemplo <table width="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="red"> <tr> <!-- Fila 1 --> <td width="300" bgcolor="blue" rowspan="2">Fila 1 y 2 colu mna 1</td> <td>Fila 1 columna 2</td> </tr> <tr> <!-- Fila 2 --> <td>Fila 2 columna 1</td> </tr> </table>