Cuando estés iniciando en el curso de HTML posiblemente una de tus practicas será hacer el diseño de una página web desde cero, sin internet, en menos de 1 o 2 horas y tendrás un par de imágenes para usar. Esta plantilla sería una buena opción para que tengas una idea.
Este proyecto es muy básico, el diseño esta hecho con tablas y para una pantalla 1280 x 720, pero lo puedes adaptar a cualquier pantalla quitando los valores fijos y dando porcentajes o dejando en auto.
Creamos una carpeta
En la carpeta creamos otra carpeta con el nombre img y agregamos imágenes con los siguientes nombres
Creamos el archivo index.html
<html> <style> </style> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div id="header" > <div id="Col1"> Correo: Vaidrollteam@gmail.com </div> <div id="Col1"> <input type="image" src="img/fb.png" width="20px" height="20px"> <input type="image" src="img/tw.png" width="20px" height="20px"> <input type="image" src="img/yt.png" width="20px" height="20px"> </div> <div id="Col1"> Contacto: 123456789 </div> </div> <br> <br> <div align="center"> <div id="VaiNavMenux"> <ul id="VaiUlNav"> <li><a href="#inicio1">Inicio</a></li> <li><a href="#nosotros1">Nosotros</a> </li> <li><a href="#equipo1">Equipo</a></li> <li><a href="#novedades1">Novedades</a></li> <li><a href="#contacto1">Contactar</a></li> </ul> </div> </div> <hr> <br> <br> <div id="body" align="center"> <div id="inicio1" align="center"> <table><tr> <td colspan="2" align="center"><h1>Inicio</h1></td></tr><tr> <td><img src="img/gato1.jpg" border="5"></td> <td> <h2>Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto</h2> <h3>Aquí puedes ingresar texto</h3> <h4>Aquí puedes ingresar texto</h4> <a href="#">Leer más>></a> </td></tr> </table> </div> <br> <br> <br> <hr> <div id="equipo1"> <table width="80%"> <tr align="center"> <td colspan="3"> <h1> Equipo </h1> </td> </tr> <tr> <td><img src="img/gato2.jpg" border="5"> <br> </td><td><img src="img/gato3.jpg" border="5"> </td><td><img src="img/gato4.jpg" border="5"> </td> </tr> <tr> <tr> <td> <h2>Gato 1 </h2> </td> <td> <h2>Gato 2 </h2> </td> <td> <h2>Gato 3 </h2> </td> </tr> <tr> <td>Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto<br><a href="#">Leer más>></a></td> <td>Aquí puedes ingresar texto <br><a href="#">Leer más>></a></td> <td>Aquí puedes ingresar texto <br><a href="#">Leer más>></a></td> </tr> </table> </div> <br> <br> <hr> <div id="nosotros1"> <table><tr><td> <h1>Nosotros</h1><h2>Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto</h2> <h4>Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto</h4> <a href="#">Leer más>></a> </td> <td style="padding-right:20px;"><img src="img/gato6.jpg" border="5"></td> </tr> </table> </div> <br> <hr> <div id="novedades1"> <table width="60%"> <tr align="center"> <td colspan="3"> <h1> Novedades </h1> </td> </tr> <tr> <td><img src="img/gato5.jpg" border="5"> <br> </td><td><img src="img/gato7.jpg" border="5"> </td> </tr> <tr> <tr> <td> <h2>Novedades 1 </h2> </td> <td> <h2>Novedades 2 </h2> </td> </tr> <td>Aquí puedes ingresar texto Aquí puedes ingresar texto Aquí puedes ingresar texto<br><a href="#">Leer más>></a></td> <td>Aquí puedes ingresar texto <br><a href="#">Leer más>></a></td> </tr> </table> </div> <br> <hr> <div id="contacto1"> <table> <tr><td colspan="2"><h1>Contacto</h1></td></tr> <tr><td>Nombre:</td><td><input type="text"></td></tr> <tr><td>Telefono:</td><td><input type="number"></td></tr> <tr><td>Correo:</td><td><input type="email"></td></tr> <tr><td>Mensaje:</td><td><textarea name="text1" cols="40" rows="5"></textarea></td></tr> <tr><td colspan="2"><button>Enviar</button></td></tr> </table> </div> </div> <br> <br> <div id="footer" align="center">test 2021 vaidrollteam</div> </body> </html>
Agregamos estilo a nuestra pagina.
body { width:1200px; /*Puede cambiar por 100% o auto*/ } #header /*Cabecera correo y contacto*/ { background-color:#7A1818; /*Fondo*/ color:white; /*Color de las letras*/ padding: 10px; /*Barra*/ font: bold 14px Arial; /*Tipo de la letras*/ position: relative; /*Cabecera correo y contacto*/ width: 100%; /*Dejarlo en 100%*/ display:inline-block; /*Barra*/ } #col1 /*Cabecera correo y contacto*/ { float:left; padding-left:15%; } #VaiUlNav li { display:inline-block; /*Permite la ubicación del menú en forma horizontal*/ } #VaiUlNav { background:white; /*Color de fondo del bloque interior*/ margin: 0px; /* Dejar en 0*/ padding: 0px; /* Dejar en 0*/ } #VaiUlNav li a, #VaiUlNav li a:link, #VaiUlNav li a:visited { font: bold 16px Arial; /*Fuente*/ color: black; /*Color del texto */ display: block; /*Mostrar como bloques*/ margin:0px; /*Dejar en 0*/ padding: 10px 15px 10px 15px; /*Para que no se mueva el texto del menú al pasar el mouse*/ } #VaiUlNav li a:hover, #VaiUlNav li a:active { color:red; /*Cambia el color de las letras al pasar el mouse*/ margin:0px; /*Dejar en 0*/ padding: 10px 15px 10px 15px; /*Para que no se mueva el texto del menú al pasar el mouse*/ background: #f3f3f3; /*Color del fondo del menú al pasar el mouse */ } #VaiUlNav li li a, #VaiUlNav li li a:link, #VaiUlNav li li a:visited { font: bold 16px Arial; /*Fuente del submenú*/ color: white; /*Color del texto del sub menú*/ width: 150px; /*Ancho del sub menú*/ background: black; /*Color de fondo del submenú*/ margin:0px; /*Dejar en 0*/ } a { /*Quitar el subrayado del texto*/ text-decoration:none; font: bold 16px Arial; } td { font: 16px Arial; /*Tipo de la letras*/ } img { width: auto; height: auto; } #footer { background-color:black; padding: 10px; color:white; }
Resultado
En la cabecera puedes agregar un correo, redes sociales y un número de contacto.
Un simple menú (inicio, nosotros, equipo, novedades y contactar).
Puedes cambiar el # por alguna página para que lo redireccione al ser presionado.
Recuerda 👀
Es una página básica para practicar y solo es el diseño.
Posiblemente algunas etiquetas estén mal.
Puedes cambiar las imágenes, modificar el texto y ya tendrías una página.
Puedes modificar esta parte del código para que el diseño ocupe toda la pantalla.
body { width:1200px; /*Puede cambiar por 100% o auto*/ }
- Notepad++
