Calculadora: el contenido

Contenido HTML

En este segundo paso simplemente vamos a escribir nuestro esquema de la página web (<doctype, html etc) y vamos a rellenarlo con el contenido, de acuerdo a lo que piden las especificaciones.

Tendremos un contenedor o marco que es el bloque dentro del que se colocan las teclas y el visor de nuestra calculadora

Vamos a usar bloques div para estos elementos. Si más adelante durante el desarrollo del proyecto es necesario podemos modificar los detalles que veamos necesario

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Mini Calculadora</title>

<link href="calculadora.css rel="stylesheet" type="text/css">

</head>

<body>

<div>

  <div>0</div>

  <div>1</div>

  <div>2</div>

  <div>3</div>

  <div>4</div>

  <div>5</div>

  <div>6</div>

  <div>7</div>

  <div>8</div>

  <div>9</div>

  <div>0</div>

  <div>.</div>

  <div>+</div>

  <div>-</div>

  <div>*</div>

  <div>/</div>

  <div>+/-</div>

  <div>Enter</div>

  <div>C</div>

</div>

</body>

</html>

Comentarios

Escribe este código en tu editor, procura escribirlo y no usar el copiar y pegar. Luego guárdalo con el nombre calculadora.html

Si ahora accedes a este documento con tu navegador verás una página que no se parece en nada al boceto.

¿Que ocurre? Solo has puesto contenido, pero aún no has definido el estilo, no has pintado la casa y se ve rara.