HTML, CSS, JAVASCRIPT

lunes, 7 de enero de 2019

04 Html Css. Contenido principal

Añadiendo el contenido principal de nuestra #web usando las etiquetas #section #article.

domingo, 6 de enero de 2019

03 Html Css. Barra de navegacion

Creamos nuestra barra de navegacion o menu para nuestra web.

02 Html Css. Plantilla web y Cabecera

Creamos la plantilla basica de nuestra web y preparamos la cabecera o header usando html.

01 Html Css. Presentacion curso

Presentacion curso #html y #css.

sábado, 1 de diciembre de 2018

Html + Css Acceso Usuarios

En el siguiente enlace puedes ver como crear una pagina que sirva de plantilla para un acceso de usuarios al sistema, usando HTML y CSS.
Este proyecto avanzara usando PHP y MySql para controlar el acceso.

domingo, 11 de marzo de 2018

04 Web. Pagina de contacto con Mapa de direccion

Vemos como realizar nuestra pagina web de contacto insertando un mapa de Google marcando la direccion que necesitamos.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-secale=1.0">
<meta name="author" content="Jose Ojeda (ticoticotaa)">
<meta name="keywords" content="html,web,contacto">
<meta name="description" content="contacto web">
<link href="css/estiloContacto.css" rel="stylesheet" type="text/css">
<title>Contacto</title>
</head>
<body>
<section>
<article>
<header>
<h1>Contacta con nosotros</h1>
<address>C/ Calle, nยบ 25</address>
<a href="mailto:kjkdjkf@djkd.com">Enviar email</a>
</header>
<div id="mapa">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.161976248746!2d-5.995048934340552!3d37.3860015298321!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9d4fd647e46b7247!2sLa+Giralda!5e0!3m2!1ses!2ses!4v1520802459105" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</article>
</section>
</body>
</html>

CSS

*{
    max-width:960px;
    margin:0 auto;
}
h1{
    font-size:3em;
    text-align:center;
    padding:10px;
}
a{
    color:blue;
    padding:4px;
    background-color:white;
    text-decoration:none;
    border-radius:15px;
    border: 5px solid #bbb;
    text-align:center;
    margin:20px;
}
address{
    text-align:center;
    padding:10px;
}
header{
    text-align:center;
    padding:10px;
    margin:15px;
}
#mapa{
margin:0 auto;
}

sábado, 3 de marzo de 2018

05 JavaScript. Contador de tiempo

Creamos un contador de tiempo para nuestra web, para ello usamos HTML, CSS y JavaScript.

El codigo es:

HTML

<!DOCTYPE html>
<html>
<head>
<link href="css/estilo.css" rel="stylesheet" type="text/css">
<title>
Contador
</title></head>
<body>
<section>
<div id="contenido">
<article>
<div id="tiempo">
<h5 id="titulo">
<span>Horas</span>
<span>Minutos</span>
<span>Segundos</span>
</h5>
<h2 id="contador">
<span id="horas">00</span>
<span id="minutos">00</span>
<span id="segundos">00</span>
</h2>
</div>
</article>
</div></section>
<script src="js/tiempo.js"></script>
</body></html>

CSS

body{
    margin:0 auto;
    max-width:98%;
    font-family: Helvetica, Arial;
    font-size:14px;

}
#titulo{
    font-size:1.3em;
    text-align:center;
    margin-top:5em;
    padding:1.3em;
    color:#434343;
}
#contador{
    font-size:2.2em;
    text-align:center;
    color:#434343;
}

JavaScript

var horas,minutos,segundos;
horas=0;
minutos=0;
segundos=0;
hor=document.getElementById("horas");
min=document.getElementById("minutos");
seg=document.getElementById("segundos");
function tiempo(){
    var contador=0;
    window.setInterval(function(){
        if(contador<10){
            seg.innerHTML="0"+contador;
        }else{
            seg.innerHTML= contador;
        }
        if(contador>59){
            segundos=0;
            contador=0;
            minutos=minutos+1;
        }
        if(minutos>59){
            minutos=0;
            horas=horas+1;
        }
        if(horas>23){
            horas=0;

        }
        if(minutos<10){
            min.innerHTML="0"+minutos;
        }else{
            min.innerHTML=minutos;
        }
        if(horas<10){
            hor.innerHTML="0"+horas;
        }else{
            hor.innerHTML=horas;
        }
        contador++;
    },1000);
}
tiempo();