Creemos en la Web: Reusando HTML (de otros)
En la sección anterior vimos como reusar estilo creado por otras personas.
Como vimos, muchas paginas comparten distintos componentes y yendo un nivel mas arriba, muchas paginas tienen incluso una estructura similar, por ejemplo blogs, paginas principales de un diario, de un producto, o de un sitio de ventas online.
Si bien no hay una forma simple de reusar HTML sin acudir a funcionalidades mas avanzadas que requieran programar, existe lo que usualmente se llaman templates (plantillas), que son paginas completas o secciones grandes de paginas para copiar y modificar el contenido de manera de no empezar de cero.
En esta sección vamos a explorar algunos de esos templates, en este caso, los disponibles en la pagina del proyecto bootstrap: https://getbootstrap.com/docs/4.1/examples/
Cover
Probemos uno de los ejemplos llamado Cover, copia y pega el siguiente HTML en un proyecto thimble nuevo:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Titulo de Pagina</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <link href="style.css" rel="stylesheet"> </head> <body class="text-center"> <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> <div class="inner"> <h3 class="masthead-brand">Nombre</h3> <nav class="nav nav-masthead justify-content-center"> <a class="nav-link active" href="#">Principal</a> <a class="nav-link" href="#">Link 1</a> <a class="nav-link" href="#">Link 2</a> </nav> </div> </header> <main role="main" class="inner cover"> <h1 class="cover-heading">Título</h1> <p class="lead">Descripción.</p> <p class="lead"> <a href="#" class="btn btn-lg btn-secondary">Acción Principal</a> </p> </main> <footer class="mastfoot mt-auto"> <div class="inner"> <p>Template "Cover" para <a href="https://getbootstrap.com/">Bootstrap</a>, por <a href="https://twitter.com/mdo">@mdo</a>.</p> </div> </footer> </div> </body> </html>
Y el siguiente CSS en el archivo style.css del proyecto:
/* * Globals */ /* Links */ a, a:focus, a:hover { color: #fff; } /* Custom default button */ .btn-secondary, .btn-secondary:hover, .btn-secondary:focus { color: #333; text-shadow: none; /* Prevent inheritance from `body` */ background-color: #fff; border: .05rem solid #fff; } /* * Base structure */ html, body { height: 100%; background-color: #333; } body { display: -ms-flexbox; display: flex; color: #fff; text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5); box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5); } .cover-container { max-width: 42em; } /* * Header */ .masthead { margin-bottom: 2rem; } .masthead-brand { margin-bottom: 0; } .nav-masthead .nav-link { padding: .25rem 0; font-weight: 700; color: rgba(255, 255, 255, .5); background-color: transparent; border-bottom: .25rem solid transparent; } .nav-masthead .nav-link:hover, .nav-masthead .nav-link:focus { border-bottom-color: rgba(255, 255, 255, .25); } .nav-masthead .nav-link + .nav-link { margin-left: 1rem; } .nav-masthead .active { color: #fff; border-bottom-color: #fff; } @media (min-width: 48em) { .masthead-brand { float: left; } .nav-masthead { float: right; } } /* * Cover */ .cover { padding: 0 1.5rem; } .cover .btn-lg { padding: .75rem 1.25rem; font-weight: 700; } /* * Footer */ .mastfoot { color: rgba(255, 255, 255, .5); }
Debería verse algo así:
Una vez publicado:
Actividades propuestas:
Intenta cambiar el contenido para presentar un proyecto o producto que te interese.
-
Intenta cambiarlo para que sea fondo claro con contenido oscuro.
Agregando estilo al final de style.css
Cambiando el estilo existente en style.css
Pagina Principal
Esta pagina es bastante mas larga así que vamos a probar una forma nueva.
Podes ver el resultado visitando https://marianoguerra.github.io/creemos-en-la-web/paginas/landing/
En la pagina principal hace click derecho en cada imagen y selecciona la opción "Descargar imagen como..." o similar.
Descarga todas las imágenes.
Hace click en la pagina y presiona las teclas Ctrl y "u" a la vez, esto debería abrirte una ventana nueva con el HTML la pagina. Otra forma de hacerlo en algunos navegadores es haciendo click derecho con el mouse sobre la pagina y seleccionando la opción "Ver Código" o similar.
Copia el HTML en un proyecto nuevo de thimble.
Visita la dirección: https://marianoguerra.github.io/creemos-en-la-web/paginas/landing/style.css
Copia el CSS en el archivo style.css del proyecto.
Agrega las imágenes que descargaste a un nuevo directorio llamado img, un video que muestra como:
Actividades propuestas:
Intenta cambiar el contenido para presentar un proyecto o producto que te interese.
-
Intenta cambiarlo las imágenes
Manteniendo los nombres de las imágenes existentes (subiendo nuevas imágenes con nombres existentes)
Cambiando el nombre de las imágenes en el HTML (subiendo nuevas imágenes con nombres nuevos)