Apuntes de HTML, CSS y JavaScript: Etiquetas, Estilos y Ejemplos Prácticos

HTML

Enlaces, imágenes y estilos

1. Enlazar un archivo para que se abra en otra página web: <a href="archivo.pdf/html/com" target="_blank">...</a>
2. Enlazar una foto: <img src="image.jpg" alt="Descripción de la imagen">
3. Conectar HTML con CSS: <link rel="stylesheet" href="style.css">
4. Punto de lista: <li>

Tablas

5. Crear una tabla con borde: <table border>
6. Crear una fila (bajar en la tabla): <tr>
7. Crear una celda (ir a la derecha en la tabla): <td></td>
8. Crear un encabezado de tabla: <th></th>
9. Combinar celdas hacia abajo (filas): <td colspan="3">
10. Combinar celdas hacia la derecha (columnas): <td rowspan="3">

Otras etiquetas

11. Codificación de caracteres: <meta charset="UTF-8">
12. Forma de una zona de imagen: <a shape="">
13. Mover texto: <marquee>

Formularios

14. Crear un campo de texto rellenable (después de la etiqueta <td>): <input type="text" name="nombre" maxlength="10">
15. Crear una lista desplegable: <select name="profesores"> y después <option>
16. Escribir en un cuadro de texto grande: <textarea name="comentario" rows="10" cols="75"></textarea>
17. Añadir una línea horizontal separadora: <hr>
18. Representar un formulario: <form>
19. Crear botones de selección (círculos): <input type="radio" name="comentario" value="queja">
20. Crear una casilla de verificación: <input type="checkbox" name="" value="">
21. Enviar un formulario: <input type="submit" value="Enviar comentario">
22. Borrar un formulario: <input type="reset" value="Borrar">

CSS

1. Reducir el tamaño de una imagen: img { width: px; height: px; }
2. Color de fondo: background-color
3. Tamaño de la letra: font-size: px;
4. Tipo de letra: font-family: sans-serif;
5. Grosor del texto: font-weight: bold, bolder, lighter o valores del 100 al 900.
6. Alinear un texto: text-align: left, right, center, justify.
7. Mejorar la tabla: table { border-collapse: collapse; }
8. Editar el contenido de una tabla: th, td { border: 1px solid black; padding: 8px; text-align: left; }
9. Espacio interior de la celda: padding
10. Borde de la tabla: border
11. Dimensiones: height (altura), width (anchura)
12. Márgenes: margin-top, margin-right, margin-bottom, margin-left, margin.
13. Degradado de colores en una tabla: background-image: linear-gradient(to left, colores);

JavaScript

Conceptos básicos

0. Mostrar una alerta: alert("")
1. Contenido alternativo si no hay JavaScript: <noscript>
2. Enlazar un archivo JS externo: <script src="archivo.js"></script>
3. Especificar el tipo de script: <script type="text/javascript">
4. Crear una variable: var padre;
5. Pedir un dato al usuario: prompt('')
6. Guardar el dato en una variable: padre = prompt('');
7. Escribir directamente en el documento: document.write('' + padre);

Bucles: tabla de multiplicar

Versión básica:

var v;
v = prompt();
for (v = 1; v <= 10; v++) {
  document.write();
}

Versión completa:

<script type="text/javascript">
  var deseado;
  var numero;
  deseado = prompt('¿Qué número quieres multiplicar?');
  document.write('Esta es la tabla del: ' + deseado);
  document.write('<br>');
  for (numero = 1; numero <= 10; numero++) {
    document.write(numero + ' x ' + deseado + ' = ' + numero * deseado);
    document.write('<br>');
  }
</script>

Tabla de multiplicar con estilo y operadores

<script type="text/javascript">
  var a = prompt('Escribe un número');
  var b = prompt('Escribe otro número');
  a = Number(a);
  b = Number(b);
</script>

<div>
  <h2>Operadores clásicos</h2>
  <script type="text/javascript">
    var suma = a + b;
    var resta = a - b;
    var multiplicacion = a * b;
    var division = a / b;
    var modulo = a % b;
    document.write('Suma: ' + a + ' + ' + b + ' = ' + suma + '<br/>');
    document.write('Resta: ' + a + ' - ' + b + ' = ' + resta + '<br/>');
    document.write('Multiplicación: ' + a + ' * ' + b + ' = ' + multiplicacion + '<br/>');
    document.write('División: ' + a + ' / ' + b + ' = ' + division + '<br/>');
    document.write('Módulo: ' + a + ' mod. ' + b + ' = ' + modulo + '<br/>');
  </script>
</div>

Condicionales

1. Número mayor

<script>
  function compararNumeros() {
    var num1 = parseFloat(prompt('Introduce el primer número:'));
    var num2 = parseFloat(prompt('Introduce el segundo número:'));

    if (num1 > num2) {
      alert('El mayor número es: ' + num1);
    } else if (num2 > num1) {
      alert('El mayor número es: ' + num2);
    } else {
      alert('Los números son iguales.');
    }
  }
  compararNumeros();
</script>

2. Número divisible

<body>
  <script>
    function divisiblePorDos() {
      var num = parseInt(prompt('Introduce un número:'));

      if (num % 2 === 0) {
        alert(num + ' es divisible por 2.');
      } else {
        alert(num + ' no es divisible por 2.');
      }
    }
    divisiblePorDos();
  </script>

3. Mayor de edad

<script>
  function mayorDeEdad() {
    var respuesta = prompt('¿Eres mayor de edad? (sí/no):').toLowerCase();

    if (respuesta === 'sí' || respuesta === 'si') {
      alert('Puedes sacar el carnet de conducir.');
    } else if (respuesta === 'no') {
      alert('No conducirás de momento.');
    } else {
      alert('Responde a la pregunta.');
    }
  }
  mayorDeEdad();
</script>

4. Tienda de helados

<script>
  function calcularPrecioHelado() {
    var precioBase = 1.90;
    var topping = prompt('¿Qué topping quieres? (oreo/kitkat/brownie/lacasitos):').toLowerCase();
    var precioTotal;

    switch (topping) {
      case 'oreo':
        precioTotal = precioBase + 1.00;
        break;
      case 'kitkat':
        precioTotal = precioBase + 1.50;
        break;
      case 'brownie':
        precioTotal = precioBase + 0.75;
        break;
      case 'lacasitos':
        precioTotal = precioBase + 0.95;
        break;
      default:
        alert('No tenemos este topping, lo sentimos.');
        precioTotal = precioBase;
    }

    alert('El precio del helado con ' + topping + ' es: ' + precioTotal.toFixed(2) + ' €.');
  }
  calcularPrecioHelado();
</script>