Página personal de Manuel Angel Picallo Perez

Crear una página web personal simulada, que incluya al menos:

  1. Uso de colores para texto y fondo, incluyendo al menos colores degradados en alguna de sus cajas.
  2. Inclusión de tipografías externas de Google Fonts, Adobe Edge Web Fonts o un servicio similar on line.
  3. Distintos encabezados.
  4. Uso de caracteres especiales.
  5. Incluir, imágenes de tipo bitmap y vectorial.
  6. Incluir algún vídeo.
  7. Incluir bordes redondeados en alguna de sus cajas.
  8. La página debe comenzar con el siguiente encabezamiento: "Página personal de <nombre y apellido del alumno>"

Código Calculadora

<!DOCTYPE html>
<html>
 
    <head>        
 
        <meta charset="ISO-8859-1"> 
 
        <title>Title of the document</title>
 
<script>
var cadena = "";
 
function calcular(){
 
var entrada = document.getElementById("txt_entrada");
var cad = (cadena === "") ?  entrada.value : "(" + cadena  + ")" + entrada.value;
 
try{
 
var resultado = eval(cad);
document.getElementById("p_resultado").innerHTML = resultado;
entrada.value = "";
cadena = cad;
document.getElementById("p_cadena").innerHTML = cadena;
 
}catch(err){
alert("Expresión mal forma...");
}
 
}
 
function borrar(){
var entrada = document.getElementById("txt_entrada");
entrada.value = "";
cadena = "";
document.getElementById("p_resultado").innerHTML = "0";
document.getElementById("p_cadena").innerHTML = cadena;
}
 
function identificar_tecla(evento){
 
// Verificar si se presiona la tecla "Enter"
if(evento.keyCode==13){
calcular();
 
// Verificar si se presiona la tecla "Esc"
}else if(evento.keyCode==27){
borrar();
}
}
 
function tecla (texto){
var entrada = document.getElementById("txt_entrada");
entrada.value+=texto;
}
 
</script>
 
    </head>
 
    <body>
 
<div style="width:700px;margin:auto;">
 
<!-- Espacio de entrada -->
<div style="width:520px;height:120px;float:left;border:2px solid;border-radius:5px;">
 
<div style="width:500px;margin-left:10px;margin-top:10px;float:left;">
<b>Entrada:</b>
</div>
 
<div style="width:500px;margin-left:10px;float:left;">
<input id="txt_entrada" type="text" style="width:100%;" onkeydown="identificar_tecla(event)" autofocus>
</div>
 
<div style="width:500px;margin-left:10px;margin-bottom:10px;float:left;color:blue;">
<p id="p_cadena">
 
</p>
</div>
 
</div>
 
 
<!-- Espacio de resutlado -->
<div style="width:160px;height:120px;float:right;border:2px solid;border-radius:5px;">
 
<div style="width:140px;margin-left:10px;margin-top:10px;float:left;">
<b>Resultado:</b>
</div>
 
<div style="width:140px;margin-left:10px;float:left;text-align:center;color:blue;font-size:23px;">
<p id="p_resultado">
0
</p>
</div>
</div>
 
 
<!-- Aqui van los botones de la calculadora -->
<div style="width:150px;height:140px;float:left;margin-top:10px;border:2px solid;border-radius:5px;">
 
 
          <br>
            <td> <BUTTON  id="0" onclick="tecla('0')">0</BUTTON></td>
  <td> <BUTTON   id="1" onclick="tecla('1')">1</BUTTON></td>
  <td> <BUTTON  id="2" onclick="tecla('2')">2</BUTTON></td>
  <td> <BUTTON  id="3" onclick="tecla('3')">3</BUTTON></td>
   <td> <BUTTON  id="4" onclick="tecla('4')">4</BUTTON></td>
  <td> <BUTTON  id="5" onclick="tecla('5')">5</BUTTON></td>
  <td> <BUTTON id="6" onclick="tecla('6')">6</BUTTON></td>
  <td> <BUTTON  id="7" onclick="tecla('7')">7</BUTTON></td> 
  <td> <BUTTON  id="8" onclick="tecla('8')">8</BUTTON></td>
  <td> <BUTTON id="9" onclick="tecla('9')">9</BUTTON></td>
  <td> <BUTTON  id="-" onclick="tecla('-')">-</BUTTON></td>
  <td> <BUTTON  id="/" onclick="tecla('/')">/</BUTTON></td>
  <td> <BUTTON  id="*" onclick="tecla('*')">*</BUTTON></td>
  <td> <BUTTON  id="." onclick="tecla('.')">.</BUTTON></td>
  <td> <BUTTON  id="+" onclick="tecla('+')">+</BUTTON></td>
  <td> <BUTTON  id="BORRAR" onclick="borrar()">BORRAR</BUTTON></td> 
 <td> <BUTTON  id="=" onclick="calcular()">ENTER</BUTTON></td>           
 
 
</div>
</br>
</div>  
    </body>
 
</html>

Calculadora

Imágenes

JPG

aguila.png

SVG

flower.svg