Crea tu web con HTML y CSS

 Accede al curso usando el siguiente cupon de descuento -> https://bit.ly/3cpsqOC #web #code

14 Proyecto final. Crea y sube tu carta de tapas gratis a la web.

Con todo lo aprendido en las entradas anteriores, podras crear tu sitio web sin ningun problema.

En el siguiente video veras como crear un proyecto de Carta para un restaurante, subirlo a la web y crear el codigo QR, todo ello basandonos en software libre y en alojamiento web gratis.

Basandonos en codigo html visto en anteriores entradas, crearemos la web para mostrar la carta de tapas de un restaurante, mostrando como subirlo a un dominio gratuito que enlazaremos a un codigo QR para que nuestros clientes puedan acceder a la informacion desde su movil, con solo escanear el codigo QR que podremos poner en la puerta o mesas del local.

13 Section, aside, footer y Google fonts

Para terminar esta introducción a CSS, damos formato al contenido principal de nuestro documento web.

Observa el siguiente código:

section{

    width: 70%;

    margin-left:15px;

    margin-top: 25px;

    padding:10px;

    float: left;

    background:#404033;

}

article h2{

    font-size:1.5em;

}

aside{

    width: 20%;

    margin-left:15px;

    margin-top:25px;

    padding:10px;

    float: left;

    font-size:1.5em;

}

footer{

    width:95%;

    clear:both;

    margin-left: 15px;

    margin-top: 25px;

    padding:10px;

    font-size:0.5em;

}

 

Section y aside van a compartir el ancho total de nuestro documento web.

A “section” le damos el 70% del ancho y a “aside” le asignamos el 20%, la diferencia la pueden tomar los márgenes externos “margin” y los márgenes internos “padding”.

A las dos etiquetas les damos la propiedad float con valor left.

Asignamos también a los títulos de tamaño h2 una proporción de 1.5 sobre el valor del tamaño de fuente normalizado.

Despues pasamos a dar formato al pie de la web, el “footer”, lo mas significativo es “clear:both” que vuelve a asignar el flujo normal del documento, esto hace que el pie aparezca bajo el “section” y “aside”, asignando también un tamaño de fuente inferior 0.5 em.

 

Google fonts

Para terminar vamos a cambiar el tipo de fuente de textos en el documento web, para ello vamos al siguiente enlace https://fonts.google.com/ , seleccionamos la fuente que mas nos guste, pulsamos “select this style” y podemos descargar el archivo u obtener el codigo desde “embed”, obtendremos un enlace para insertar en el head del código html.

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

 

Despues, en la hoja de estilos insertaremos el código para dar el formato, como el siguiente:

*{

    color:#F3F390;

    background:#404033;

    font-family: 'Lobster', cursive;

    font-size: 14px;

}

 

Identificadores, clases

Por ultimo, vamos a ver dos tipos de etiquetas que podremos usar en nuestros documentos para dar formato CSS, son los identificadores y las clases.

La diferencia principal es que los identificadores son únicos en el documento no puede existir mas de una etiqueta con el mismo identificador, pero si podemos tener varias etiquetas con la misma clase.

En CSS llamaremos a los identificadores anteponiendo el símbolo “#” a su nombre (#enlace) y a las clases anteponiendo un punto “.”  a su nombre (.enlace2)  te indicare como crear el formulario y las etiquetas mas importantes. Veamos el siguiente ejemplo para explicar sus detalles.

En el documento “html” ponemos:

 

<footer>

<blockquote class="enlace2">Jose Ojeda 2020&copy</blockquote>

<div id="enlace">Google</div>

</footer>

 

En el documento “CSS” ponemos:

#enlace {

    color:red;

}

.enlace2{

    color:green;

}

 

La clase la podríamos poner en varias etiquetas y el identificador solo en una.

12 Barra de navegacion CSS

Lo siguiente que hacemos será dar formato a nuestra barra de navegación, para lo cual incluimos el siguiente código en nuestro archivo CSS:

nav{

    font-size: 1em;

    width:95%;

    padding: 3px;

    background:#404033;

    margin: 5px 1px;

}

nav ul{

    list-style-type:none;

    background:#404033;

}

nav li{

    display: inline;

 

    margin: 0px 1px 0px 0px;

}

nav li a{

    padding: 2px 7px 2px 7px;

    color:#F3F390;

    background:#404033;

    border: 1px solid #F3F390;

    text-decoration: none;

}

nav li a:hover{

    background:#F3F390;

    color:#404033;

}

 

En la etiqueta “nav” indicamos el tamaño de fuente, esta vez en vez de utilizar como medida los pixeles, usaremos “em” que pondrá el tamaño en proporción respecto a la unidad marcada, en este caso equivale a 12px que es el que se establecio al principio para todo el documento.

Despues le damos el ancho, también en proporción al total (95%), con un margen interior de 3px, el color de fondo y un margen exterior de 5px por arriba y abajo y de 1px por los lados.

Pasamos también a dar formato a la lista incluida en el nav, quitándole el estilo (bolita lateral) y dándole el color de fondo.

A los elementos de la lista “li” los ponemos para que estén en línea “inline”, prueba a no ponerlo y veras la diferencia, ya que por omisión estará en bloque, después le asignamos los márgenes respectivos.

Seguidamente damos formato a los enlaces, quitándole el subrayado (text-decoration: none), el resto parecido a anteriores formatos.

Cuando pasamos el raton por estos enlaces vamos a hacer que cambien o se inviertan los colores, por ello damos formato al “a:hover”.

En la siguiente imagen puedes ver el código y su resultado.

11 Enlace a archivo CSS

Lo primero que haremos es eliminar los estilos que pusimos a las etiquetas en el apartado anterior, borramos “style”.

Creamos dentro de nuestra carpeta del proyecto una carpeta nueva a la que llamaremos CSS y dentro de esta creamos el archivo CSS nombrándolo como “estilos.css”.

Despues añadimos dentro del “head” el enlace al archivo CSS, para ello pondremos lo siguiente:

<link rel="stylesheet" href="css/estilos.css"/>

En esta etiqueta le indicamos que es una hoja de estilos y la ruta al fichero CSS.

Pasamos después a nuestro fichero CSS y empezamos a darle forma con el siguiente código:

*{    

    color: #F3F3E0;

    background: #060605;

    font-size: 12px;

}

body{

    margin: 0px auto;

}

Con el * indicamos que vamos a cambiar propiedades a todo el documento, seria como poner propiedades por defecto, en este caso damos el color del texto, el color de fondo y el tamaño de la fuente.

Observa que esta vez los colores los damos en otro formato, anteriormente indicábamos el color asi “red” ahora lo ponemos de esta forma “#F3F3E0”, en la web puedes encontrar muchos sitios que te facilitan la selección de los colores.

Despues le hemos puesto a body el margen superior e inferior a 0px y el ancho en automatico.

Pasamos a dar formato a nuestra cabecera, para esto indicamos en nuestro archivo CSS lo siguiente:

header{

    background:#404033;    

    width:95%;

    padding:10px;

    margin: 5px 5px;

    display:inline-block;

}

header h1{

    font-size: 44px;

    color:#F3F390;

    text-align: center;

    float: left;

    background:#404033;

}

header figure{

    float:left;

}

En el header cambiamos el color de fondo, le damos un ancho del 95%, un margen interior (padding) de 10px, un margen exterior de 5px y que se visualice en bloque o línea.

Despues indicamos el formato del titulo de la cabecera, indicando que será el “h1” que aparece dentro del “header”, cambiándole el tamaño de fuente, el color de texto, la alineación, que flote a la izquierda y el color de fondo.

Por ultimo hacemos que la imagen también flote a la izquierda con “float:left” esto hace que tanto la imagen como el titulo se mantengan en línea dentro de la cabecera.