Las mayoría de las páginas web se construye estructuralmente en HTML, un lenguaje de marcas. En este lenguaje se escriben etiquetas, que contienen diversos atributos y contenidos. Por ejemplo, las siguientes etiquetas delimitarían un párrafo:
<p> </p>
Las etiquetas se pueden (es más, se deben) ir anidando para obtener resultados más complejos:
<table id="tabla1">
<tr>
<td>Éste es el contenido de una celda
dentro de una tabla</td>
<td>Ésta sería la celda siguiente</td>
</tr>
<tr>
<td>Y ésta otra estaría debajo de las dos anteriores</td>
<td>Una celdilla más</td>
</tr>
</table>Sin embargo, no es la estructura lo único que cuenta.Para añadirle estilo a la página web debemos usar CSS, que es un lenguaje completamente diferente, aunque fácil de comprender. El estilo ha de introducirse en la etiqueta
<style> o en un archivo externo, de una manera que veremos más adelante. El siguiente código provoca que la tabla del ejemplo anterior (que tiene identificador tabla1) mida de ancho 500 píxeles y otros 300 de alto, y tenga un borde de 2 píxeles de color azul. Además, cada celdilla tendrá un borde blanco de 1 píxel:table#tabla1 {
width: 500px;
height: 300px;
border: 2px solid blue;
}
td {
border: 1px solid red;
}La siguiente tabla muestra el resultado del código CSS y HTML anterior:| Éste es el contenido de una celda dentro de una tabla | Ésta sería la celda siguiente |
| Y ésta otra estaría debajo de las dos anteriores | Una celdilla más |
function Saludar() {
alert('¡Hola mundo!');
}El siguiente botón ejecuta el código Javascript del ejemplo:El código completo del ejemplo tras el salto.
<!DOCTYPE html>
<html>
<head>
<style>
table#tabla1 {
width: 500px;
height: 300px;
border: 2px solid blue;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<table id="tabla1">
<tr>
<td>Éste es el contenido de una celda
dentro de una tabla</td>
<td>Ésta sería la celda siguiente</td>
</tr>
<tr>
<td>Y ésta otra estaría debajo de las dos anteriores</td>
<td>Una celdilla más</td>
</tr>
</table>
<button onclick="alert('¡Hola mundo!')">Púlsame</button>
</body>
</html>
Este comentario ha sido eliminado por el autor.
ResponderSuprimir@spectrumgomas en twitter . nvu actualmente se denomina kompozer. Espero que te animes a escribir algo de este programa, porque la verdad yo en ese tema estoy muy flojo.
ResponderSuprimirUn saludo.