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.

08 Menu

 Para crear los menus de nuestro sitio web usaremos las listas, incluyendo dentro de estas el enlace correspondiente.

Mas adelante le daremos forma a todas las etiquetas para que su visualización en el navegador sea mas correcta, ese formato lo daremos cuando empecemos con CSS.

<!--Menu web-->

<ul>

<li>

<a href="index.html">Inicio</a>

</li>

<li>

<a href="formulario.html">Contacto</a>

</li>

<li>

<a href="imagen.html">Imagen</a>

</li>

<li>

<a href="https://ticoticotaa.es" target="_blank">Web Ticoticotaa</a>

</li>

</ul>

12 Html Css. Formato barra de navegacion

Dando formato a la barra de navegacion (nav) de nuestra web.

Hoja de estilos CSS

*{
margin:0 auto;
padding:0px;
font-family:Arial;
}
header{
background:#FF5733;
color:#FFFFFF;
font-size:3em;
width:95%;
padding:10px;
margin:5px 5px;
display:inline-block;
border:solid 1px #ccc;
border-radius:25px;
}
header figure{
float:left;
}
header h1{
float:right;
}
nav{
font-size:1em;
width:95%;
padding:5px;
margin:1px 1px;
text-align:center;
}
nav ul{
list-style-type:none;
}
nav li{
display:inline;
text-align:center;
margin:0 15px 0 0;
}
nav li a{
padding:2px 7px 2px 7px;
color:#FF5733;
background-color:#FFFFFF;
border:1px solid #ccc;
text-decoration:none;
}
nav li a:hover{
background:#FF5733;
color:#FFFFFF;
}

03 Html Css. Barra de navegacion

Creamos nuestra barra de navegacion o menu para nuestra web.