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.
Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
sábado, 1 de diciembre de 2018
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
CSS
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
El codigo es:
HTML
<!DOCTYPE html>CSS
<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>
body{JavaScript
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;
}
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();
lunes, 26 de febrero de 2018
viernes, 2 de febrero de 2018
03 Curriculum Vitae. Degradado de color y movimiento.
En este video continuamos con la mejora de nuestra Web Curriculum, para ello vamos a ver como redondear las esquinas y asignarle un degradado de color.
Tambien vemos como dar movimiento y animar objetos de nuestra web mediante animate.css.
Codigo CSS
Codigo HTML
Tambien vemos como dar movimiento y animar objetos de nuestra web mediante animate.css.
Codigo 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;
border-radius:30px;
background: linear-gradient(to right,#f06292,#a84466);
}
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;
}
}
Codigo 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="css/animate.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 class="option animated rotateIn">
<div id="imagen">
<img src="img/jose.jpg">
</div></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>
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
Vemos tambien como añadir tipos de fuentes desde google fonts.
HTML
<!DOCTYPE html>CSS
<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>
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;
}
}
domingo, 21 de enero de 2018
01 Curriculum Vitae. Realizado con Html y Css
Realizamos nuestro Curriculum Vitae para publicar en la web, para ello utilizaremos el editor de textos Notepad++ y usaremos Html y Css.
El codigo obtenido es el siguiente:
El codigo obtenido es el siguiente:
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">
<title>
Curriculum Vitae
</title>
</head>
<body>
<section>
<header>
<h1>CV de Jose Ojeda</h1>
<p>Diplomado en Ciencias Empresariales</p>
<p>Sobre 20 años de experiencia <br/>en tareas Administrativas y Contables
<br/><br/>ticoticotaa@gmail.com</p></header>
<div id="contenido">
<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>
</div>
</section>
</body>
</html>
CSS
body{
font-family: Helvetica, Arial;
margin:0;
}
header{
background-color:#f06292;
color:white;
text-align:center;
padding:5px;
}
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:960px;
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;
}
Suscribirse a:
Entradas (Atom)