HTML, CSS, JAVASCRIPT: footer

Mostrando entradas con la etiqueta footer. Mostrar todas las entradas

sábado, 19 de septiembre de 2020

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.

jueves, 17 de enero de 2019

14 Html CSS. Formato al aside y al footer

Continuando con el formato a nuestra web, en este video damos formato al lateral y al pie de pagina (aside y footer).

Este es el codigo que agregamos a la hoja de estilos CSS:

aside{
width:20%;
margin-left:15px;
margin-top:25px;
padding:10px;
border:1px solid #ccc;
float:left;
background:#E6E6E6;
color:#000000;
border-radius:25px;
font-size:1em;
}
aside a{
text-decoration:none;
}
aside a:hover{
color:#000000;
}
aside ul{
list-style-type:none;
}
footer{
width:95%;
clear:both;
margin-left:15px;
margin-top:25px;
padding:10px;
border:1px solid #ccc;
background:#FF5733;
color:#FFFFFF;
font-size:0.5em;
border-radius:25px;
}

lunes, 7 de enero de 2019

05 Html Css. Parte secundaria aside

Creamos la parte secundaria de nuestra #web, donde normalmente se colocan los enlaces a redes, anuncios, etc.

Y asi queda el codigo que llevamos realizado hasta ahora:

<!DOCTYPE html><html><head><title>Web principal</title><meta charset="utf-8"></head><body><header><h1>Cabecera de mi web</h1><figure><img src="milogo.jpg"/></figure></header> <nav><ul><li><a href="index.html">Inicio</a></li><li><a href="contacto.html">Contacto</a></li><li><a href="acercade.html">Acerca de</a></li></ul></nav><section><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article><article><hgroup><h2>Titulo del Parrafo</h2></hgroup><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p></article></section><aside><h3>Siguenos en: </h3><ul><li><a href="#">Facebook</a></li><li><a href="#">Twitter</a></li></ul></aside><footer><p>Jose Ojeda 2019&copy</p><p>email: nombre@email.com</p></footer></body></html>

viernes, 26 de enero de 2018

02 Curriculum Vitae. Adaptado a movil y cambio tipo letra

Mediante unas pequeñas modificaciones conseguimos que nuestra web se adapte a dispositivos moviles.
Vemos tambien como añadir tipos de fuentes desde google fonts.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Curriculum Vitae">
<meta name="keywords" content="curriculum,jose ojeda,html,css">
<meta name="author" content="Jose Ojeda">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Risque" rel="stylesheet">
<title>
Curriculum Vitae
</title>
</head>
<body>
<div id="contenido">

<header>
<h1>CV de Jose Ojeda</h1>
<p>Diplomado en Ciencias Empresariales</p><br/>
<p>Sobre 20 años de experiencia <br/>en tareas Administrativas y Contables
<br/><br/>ticoticotaa@gmail.com</p></header>
<section>

<article><div id="formacion">
<h3>Formacion</h3>
<dl>
<dt>
Diplomado en Ciencias Empresariales</dt>
<dd>Universidad de Sevilla</dd>
</dl>
<dl>
<dt>
Tecnico Superior en Prevencion de Riesgos Laborales</dt>
<dd>Seguridad, Ergonomia e Higiene Industrial</dd>
</dl>
</div>
<div id="imagen">
<img src="img/jose.jpg">
</div>
</article>
<article>
<h3>Experiencia Profesional</h3>
<dl>
<dt>
Contable - Administrativo</dt>
<dd>2000 - Actualidad</dd>
</dl>
<dl>
<dt>
Profesor Contabilidad y Matematicas Financieras</dt>
<dd>2002 - 2003</dd>
</dl>
<dl>
<dt>
Administrativo</dt>
<dd>1998 - 2000</dd>
</dl>
</article>
<article>
<h3>Otros</h3>
<dl>
<dt>
Docencia</dt>
<dd>Formador de formadores</dd>
</dl>
<dl>
<dt>
Programacion</dt>
<dd>Java, JavaScript, Php, Python, Android, Html, Css</dd>
</dl>
<dl>
<dt>
Software</dt>
<dd>Contabilidad, Nominas, Facturacion, Office, TPV, Navegadores, Correo</dd>
</dl>
</article>

</section>
<footer>
<address>
Mi direccion <br/>
Mi ciudad
</address>
</footer>

</div>
</body>
</html>

CSS

body{
   font-family: 'Risque', cursive;
   margin:0;
   width-max:960px;
}
header,footer{
   background-color:#f06292;
   color:white;
   text-align:center;
   padding:5px;
   margin-right:auto;
   margin-left:auto;
}
h1{
   display:inline-block;
   width:400px;
   font-weight:700;
}
h3{
   font-size:36px;
   font-weight:700;
}
p{
   display:inline-block;
   width:400px;
   font-weight:200;
}
section{
   width:80%;
   margin-right:auto;
   margin-left:auto;
   vertical-align:top;
}
article{
   display:inline-block;
   width:97%;
   font-size:22px;
   margin-bottom:12px;
   margin-top:36px;
}
#imagen{
   display:inline-block;
   margin-top:45px;
   margin-left:10px;
   width:18%;
   float:left;
}
#formacion{
   display:inline-block;
   width:80%;
   float:left;
}
/*movil*/
@media screen and (max-width:480px){
   *{
       display:block;
       margin:1px;

   }
   h1{
       font-weight:300;
   }
   h3{
       font-weight:200;
   }
   article{
       font-size:1em;
   }
   p{

       font-size:1em;
   }
   #imagen{
       display:none;
   }
}

sábado, 6 de mayo de 2017

Crea tu web Responsive Video 04

Cambiaremos el formato de nuestra web, seleccionando el color del sitio; iremos cambiando cada apartado de nuestra web (nav, article, aside, footer).

sábado, 29 de abril de 2017

Crea tu Web Responsive 3

Paleta de colores

Preparemos la gama de colores que utilizaremos en nuestra web, para ello visitamos la web https://www.materialpalette.com/ y seleccionamos dos colores, en este caso he seleccionado light blue y deep orange.

Una vez seleccionados los dos colores damos al botón de descarga y lo descargamos como CSS.

Abrimos dicho archivo seleccionamos su texto y lo copiamos a nuestro CSS, desde aquí iremos cambiando los colores de los apartados de nuestra web.

Se podría hacer incluyendo clases en el HTML, pero en nuestro caso lo haremos en los apartados del fichero CSS.

Cabecera

Vamos a cambiar el tamaño del texto y titulo de la cabecera, asi como el color (quitamos también el color para otras visualizaciones), daremos un margen interno (padding) y un margen superior e inferior, dando como automatico los márgenes laterales, damos también un borde redondeado, después de esto el CSS para la cabecera queda de la siguiente forma:

header{

background: #0288D1;

color: #B3E5FC;

padding:10px;

margin:10 auto;

border-radius:10px;

}

header h1 {

font-size:3em;

}

header p{

font-size:1.5em;

}

Barra de menus

Para la barra de navegación o menú vamos a realizar algunos cambios además de poner los colores de nuestra paleta, cuando se este visualizando en un Ordenador o Tablet serán botones horizontales, en móvil pasaran a ser verticales, el código CSS seria asi:

nav{

background: #03A9F4;

color: #212121;

width:100%;

text-align:center;

border-radius:10px;

}

nav ul{

padding:5px;

margin:5px;

}

nav ul li{

list-style:none;

display:inline-block;

width:100%;

cursor:pointer;

font-weight:bold;

border-bottom:2px solid #BDBDBD;

border-radius:10px;

}

nav ul li a{

text-decoration:none;

}

nav ul a:hover{

color:#B3E5FC;

background:#FF5722;

border-bottom:2px solid #03A9F4;

}

Este código lo incluimos en la parte global del CSS, lo que queramos cambiar para según que medidas de visualización lo iremos incluyendo en los apartados con los minimos de ancho, especificando solo lo que queramos cambiar.

En el código anterior hemos añadido margen interior y exterior para las listas que estén dentro del nav “nav ul”.

Despues para los ítems incluidos en lista y nav, les quitamos el estilo de lista (list-style), le ponemos un ancho del 100% para que ocupe cada uno el total (disminuir para ver como queda), ponemos el cursor para que cambie al pasar por el enlace, añadimos letra negrita y un borde inferior.

A los enlaces le quitamos el subrayado, añadimos color de letra y fondo.

Con “a:hover” indicamos el formato que tendrá cuando pongamos el cursor del raton encima, en este caso intercambiamos colores y eliminamos parte del subrayado del borde.

Contenido

Con el contenido vamos a incluir margen de 10 px, padding de 10 px, borde redondeado, cambiamos los colores y eliminamos los colores según visualización, el apartado “section” lo dejamos en blanco por si nos hace falta mas adelante.

Cambiamos también el color para los “h2” que están dentro de “article”.

section{

}

article{

background: #03A9F4;

color: #212121;

padding:10px;

margin:10px;

border-radius:10px;

}

article img{

width:200px;

height:200px;

float:left;

}

article h2{

color:#B3E5FC;

}

Insertaremos en el html una imagen dentro del “article”, para ello la imagen la grabaremos en una carpeta llamada img dentro del espacio de trabajo donde tenemos los archivos de nuestra web, el código a insertar en el html es:

</figure>

Con este código marcamos donde ira la imagen y con “alt” el texto que aparecerá si no carga o da error.

En el CSS hemos añadido un ancho y alto para la imagen, asi como que flote a la izquierda para que el texto pueda rellenar la parte derecha.

Aside (parte secundaria)

Aquí haremos también los cambios en márgenes y paddings, también color y forma de presentar los enlaces y títulos.

aside{

background: #03A9F4;

color:#B3E5FC;

padding:5px;

margin:10px;

border-radius:10px;

}

aside ul li{

list-style:none;

cursor:pointer;

}

aside ul li a{

text-decoration:none;

background: #03A9F4;

color: #212121;

}

aside ul li a:hover{

color:#B3E5FC;

background:#FF5722;

}

Cuando ponemos algo como “aside ul li a {…}” quiere decir que cambiaremos propiedades a los enlaces que están dentro de una lista desordenada dentro del aside.

Aquí también aparece “…a:hover” con este cambiamos las propiedades que queramos modificar cuando el cursor del raton se situe encima.

Footer(pie de pagina)

Hemos llegado a la parte final de nuestra web, en este caso damos los mismos colores de fondo y de texto que la cabecera, le ponemos margen y padding de 10 px y un borde redondeado, ocupara el 98% del ancho.

footer{

background: #0288D1;

color: #B3E5FC;

padding:10px;

margin:10 auto;

border-radius:10px;

width:98%;

}

Fin del css

Con esto hemos terminado de diseñar el formato y estructura de nuestra web, os servirá de base para poder practicar, os aconsejo que cambiéis propiedades y que experimentéis con las paletas de colores y formas que podeis dar a la web.

Podeis ver como va quedando la web en el siguiente enlace.

sábado, 19 de septiembre de 2020

13 Section, aside, footer y Google fonts

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;

}

Google fonts

Identificadores, clases

jueves, 17 de enero de 2019

14 Html CSS. Formato al aside y al footer

lunes, 7 de enero de 2019

05 Html Css. Parte secundaria aside

viernes, 26 de enero de 2018

02 Curriculum Vitae. Adaptado a movil y cambio tipo letra

sábado, 6 de mayo de 2017

Crea tu web Responsive Video 04

sábado, 29 de abril de 2017

Crea tu Web Responsive 3

Paleta de colores

Cabecera

Barra de menus

Contenido

Aside (parte secundaria)

Footer(pie de pagina)

Fin del css

Vistas de página en total

Licencia