Para encontrar inspiración:
Categoría: HTML
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;
}
Resumen layouts
El layout es la organización de nuestra página, es un elemento de diseño que nos indica dónde van a ir los diferentes elementos.
Aquí tenemos ejemplos de diferentes layouts:
https://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
https://websitesetup.org/website-layouts/
Para diseñar los layouts normalmente se utilizan herramientas de wireframing. Hay algunas online:
https://www.lancetalent.com/blog/top-5-herramientas-wireframes-ch/
O podemos hacerlo directamente en una libreta.
Para implementar nuestro layout usaremos las etiquetas div o las nuevas etiquetas semánticas:
Que nos permitirán crear nuestro layout:
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/css/css_website_layout.asp
Hoy hemos visto la manera más sencilla que es utilizando float:
https://www.w3schools.com/css/css_float.asp
Pero más adelante veremos otras maneras de hacerlo. Dentro de trifulcas podéis encontrar varios ejemplos:
https://trifulcas.com/layout-one-page/
https://trifulcas.com/layout-semantico-2/
Y una búsqueda por internet os mostrará miles de páginas que tratan el tema:
Mini layout simple
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<div id="cabecera">
<h1>Esto es la cabecera</h1>
</div>
<div id="barra">
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Contacto</a></li>
<li><a href="">Productos</a></li>
<li><a href="">faq</a></li>
</ul>
</div>
<div id="contenido">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p>
</div>
<div id="pie">
<p>(c) Jotapé 2021</p>
</div>
</body>
</html>
css:
*{
margin:0;
}
#cabecera{
background-color: pink;
height: 150px;
margin: 0;
padding: 5px;
}
#barra{
background-color: turquoise;
width:100px;
float:left;
min-height: 500px;
padding: 20px;
}
#barra ul{
list-style: none;
margin:0;
padding: 5px;
}
#contenido{
background-color: wheat;
margin: 0;
min-height: 500px;
padding: 20px;
}
#pie{
background-color: black;
color: white;
height: 50px;
clear:left;
margin: 0;
}
Semántico:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout</title>
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<header>
<h1>Esto es la cabecera</h1>
</header>
<aside>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Contacto</a></li>
<li><a href="">Productos</a></li>
<li><a href="">faq</a></li>
</ul>
</aside>
<main>
<section>
<h1>Artículo 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
omnis.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
omnis.</p>
</section>
<section>
<h1>Artículo 2</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
omnis.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas
obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita
omnis.</p>
</section>
</main>
<footer>
<p>(c) Jotapé 2021</p>
</footer>
</body>
</html>
*{
margin:0;
}
header{
background-color: pink;
height: 150px;
margin: 0;
padding: 5px;
}
header h1{
text-align: center;
}
aside{
background-color: turquoise;
width:100px;
float:left;
min-height: 500px;
padding: 20px;
}
aside ul{
list-style: none;
margin:0;
padding: 5px;
}
main{
background-color: wheat;
margin: 0;
min-height: 500px;
padding: 20px;
}
footer{
background-color: black;
color: white;
height: 50px;
clear:left;
margin: 0;
}
section{
float:left;
width: 40%;
margin-left: 10px;
}
Enlaces interesantes
Todas las etiquetas HTML como si fueran la tabla periódica:
Como crear checkboxes personalizados: