- Those HTML Attributes You Never Use (Louis Lazaris)
- 24 HTML Attributes You Want to Use (@Madzadev)
- 12 Simple HTML Snippets (@Madzadev)
Categoría: HTML
Escribir HTML olvidando XHTML
Trucos HTML
Selección de landing pages
Para encontrar inspiración:
Ejercicio repaso HTML y CSS
Una aproximación:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="estilos.css"> </head> <body> <div class="container"> <div class="row" id="cabecera"> <div class="col-md-3 bg-dark"><img width="100" src="https://www.hola.com/imagenes/estar-bien/20180925130054/consejos-para-cuidar-a-un-gatito-recien-nacido-cs/0-601-526/cuidardgatito-t.jpg"> </div> <div class="col-md-9 bg-dark"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end"> <!-- Brand/logo --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Contacto</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Productos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Quienes somos</a> </li> </ul> </nav> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4 text-center"> <h4>Hola que tal</h4> <h1>Yo muy bien con okal ¿Y tú?</h1> <h1>--</h1> </div> <div class="col-md-4"></div> </div> <div class="row"> <div class="col-md-4"> <article class="p-4 border"> <img class="img-responsive" style="width:100%" src="https://www.hola.com/imagenes/estar-bien/20180925130054/consejos-para-cuidar-a-un-gatito-recien-nacido-cs/0-601-526/cuidardgatito-t.jpg"> <h4>Reparaciones guays</h4> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi atque suscipit blanditiis rerum obcaecati, alias dolorum mollitia magnam cumque ducimus similique illum voluptatibus quidem, qui numquam possimus excepturi sint aliquid.</p> <div class="row"> <div class="col-md-8">Texto</div> <div class="col-md-4">→</div> </div> </article> </div> <div class="col-md-4"> <article class="p-4 border"> <img class="img-responsive" style="width:100%" src="https://www.hola.com/imagenes/estar-bien/20180925130054/consejos-para-cuidar-a-un-gatito-recien-nacido-cs/0-601-526/cuidardgatito-t.jpg"> <h4>Reparaciones guays</h4> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi atque suscipit blanditiis rerum obcaecati, alias dolorum mollitia magnam cumque ducimus similique illum voluptatibus quidem, qui numquam possimus excepturi sint aliquid.</p> <div class="row"> <div class="col-md-8">Texto</div> <div class="col-md-4">→</div> </div> </article> </div> <div class="col-md-4"> <article class="p-4 border"> <img class="img-responsive" style="width:100%" src="https://www.hola.com/imagenes/estar-bien/20180925130054/consejos-para-cuidar-a-un-gatito-recien-nacido-cs/0-601-526/cuidardgatito-t.jpg"> <h4>Reparaciones guays</h4> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi atque suscipit blanditiis rerum obcaecati, alias dolorum mollitia magnam cumque ducimus similique illum voluptatibus quidem, qui numquam possimus excepturi sint aliquid.</p> <div class="row"> <div class="col-md-8">Texto</div> <div class="col-md-4">→</div> </div> </article> </div> </div> <footer class="row"> </footer> </div> </body> </html>
Probando el DOM
<div class="container "> <div class="form-group"> <label for="cadena">Nombre:</label> <input type="text" class="form-control" id="cadena"> <a href="@" class="a" id="firstlink">Esto es un enlace</a> <a href="@" name="b">Esto otro</a> <a href="@" name="c">Y otro más</a> </div> <a href="@" class="a">Esto es un enlace</a> <a href="@" class="b">Esto otro</a> <a href="@" class="c">Y otro más</a> <h1 class="a">hola</h1> <h1 id="posicion"></h1> <button type="button" class="btn btn-success" onclick="buscar()">Añadir</button> <button type="button" class="btn btn-success" onclick="contar()">Contar</button> <button type="button" onclick="contar()">Contar</button> <script src="js/test.js"></script> </div>
Vamos a seleccionar:
1.- El elemento con id firstlink
document.getElementById('firstlink')
2.- Todos los ‘h1’
document.getElementsByTagName('h1') document.querySelectorAll('h1')
3.- Los elementos con clase ‘a’
document.getElementsByClassName('a') document.querySelectorAll('.a')
4.- Los elementos h1 con clase ‘a’
document.querySelectorAll('h1.a')
5.- Los enlaces con clase ‘a’
document.querySelectorAll('a.a')
6.- Todos los botones de la página
document.getElementsByTagName('button') document.querySelectorAll('button')
No nos olvidemos de que excepto getElementById y querySelector todas las funciones de selección nos devuelven una colección (array) que hay que recorrer
Una web HTML+CSS con eventos
La siguiente página responde a eventos de menú pero está construída sin JS ni enlaces.
Ejercicio forms+JS
Vamos a hacer una página web que nos pida dos fechas y tengamos un botón ‘Comprobar’ que al pulsarlo nos diga ‘Correcto’ Si la primera fecha es menor que la segunda e incorrecto en caso contrario.
Nos lo puede decir como vosotros queráis.
Ejercicio form/inputs
Crear un formulario que nos pida los siguientes datos:
Nombre
Edad
Email
Tipo de problema (urgente, muy urgente, para ayer)
Fecha
Es cliente o no
Es Premium o no
Observaciones
Elegid los tipos de objeto que creáis conveniente para cada dato.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>Formulario reclamaciones</h2> <form> <div class="form-group"> <label for="nombre">Nombre:</label> <input required type="text" class="form-control" placeholder="Introduzca el nombre" name="nombre" id="nombre"> </div> <div class="form-group"> <label for="edad">Edad:</label> <input type="number" class="form-control" placeholder="Introduzca edad" id="edad" name="edad"> </div> <div class="form-group"> <label for="email">Email:</label> <input required type="email" class="form-control" placeholder="Introduzca email" id="email" name="email"> </div> <div class="form-group"> <label for="tipo">Tipo de problema:</label> <select class="form-control" id="tipo" name="tipo"> <option value="1">Urgente</option> <option value="2">Muy urgente</option> <option value="3">Para ayer</option> </select> </div> <div class="form-group"> <label for="fecha">Fecha:</label> <input type="date" class="form-control" placeholder="Introduzca fecha" id="fecha" name="fecha"> </div> <div class="form-check form-group"> <label class="form-check-label"> <input type="checkbox" id="cliente" name="cliente" class="form-check-input" value="cliente">¿Es cliente? </label> </div> <div class="form-check form-group"> <label class="form-check-label"> <input type="checkbox" id="premium" name="premium" class="form-check-input" value="cliente">¿Es premium? </label> </div> <div class="form-group"> <label for="comentarios">Comentarios:</label> <textarea class="form-control" rows="5" id="comentarios" name="comentarios"></textarea> </div> <button type="submit" class="btn btn-primary">Enviar</button> </form> </div> </body> </html>
document.getElementById("cliente").checked document.getElementById("fecha").value
Comienzo maquetación Flexbox
html:
<div class="flex"> <div class="first"> </div> <div> </div> <div> </div> <div> </div> </div> <div> <div> </div> </div> <div> <div> </div> </div> <div> <div> </div> <div> </div> <div> </div> </div> <div> <div> </div> <div> </div> <div> </div> </div>
Css:
div div{ background-color: black; width: 200px; margin-left: 20px; } .flex{ display: flex; justify-content: space-between; align-items: center; } .first{ margin-right: 250px; height: 100px; }