Introducción a HTML
Definición de HTML
Se utiliza para crear páginas web en la actualidad, sus siglas significan “Hyper Text Markup
Language”; en español "lenguaje de marcado de hipertexto". Se encarga de describir el
esqueleto o estructura de nuestra página web, indicándole al navegador el contenido que será
o no visible para el usuario. Cuenta con una estructura de árbol, esto quiere decir que nuestros
HTML cuenta con un nodo padre o nodo principal a partir del cual nacen los nodos hijos, nodos
nietos y así sucesivamente. Dichos nodos se identifican por medio de una serie de etiquetas o
tags, escritas entre los operadores o signos menor y mayor < > dichas etiquetas cierran
añadiendo un / es decir, de esta forma </ > las etiquetas describirán o diferenciarán a lo
largo del código html tanto a los títulos, como a los párrafos, hipervínculos, tablas, imágenes,
videos, entre muchas otras más funcionalidades. Veamos el siguiente ejemplo con una
estructura básica de html:
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
head body
</head>
<body>
<h1>Titulo</h1>
<p>Párrafo</p>
<section> title h1 section
p
<p>Otro Párrafo</p>
</section>
</body>
</html>
head: Tiene contenido que no necesariamente el usuario va a ver, pero nos ayudara a incluir
otro tipo de código a nuestra página web.
body: Contiene todo el contenido que va a ser visible para el usuario.
Primeros pasos con HTML
Lo primero que vamos hacer es instalar la extensión Live Server en nuestro Visual Studio Code
Una vez comience la descarga dirá Installing
Al finalizar aparecerán estos botones
Recordemos que debemos crear una carpeta, workspace o sitio de trabajo para nuestros
proyectos. Para ello damos clic en File y luego Open Folder
Ubicamos la ruta donde queremos guardar nuestra carpeta, damos clic derecho, presionamos
Nuevo y damos clic en Carpeta. Así se nos crea una nueva carpeta, agregamos el nombre de
nuestra preferencia
En mi caso le coloque de nombre Proyectos HTML CSS JavaScript, damos doble clic en la
carpeta y luego presionamos el botón de seleccionar carpeta
Presionamos Yes
Y de esta forma, creamos nuestra carpeta principal. Paso siguiente es crear una carpeta dentro
de esa carpeta previamente creada. Para ello damos clic en New Folder y agregamos el
nombre de nuestra preferencia en mi caso use el nombre de calculadora, porque
próximamente crearemos una.
Luego creamos nuestro archivo ahora con extensión .html recuerda que debemos hacer clic en
New File, en mi caso le coloque como nombre index.html
Antes de elaborar nuestra calculadora conozcamos un poco acerca de las principales
funcionalidades que encontraremos en html. Con solo colocar en nuestro editor de código la
palabra html nos sugiere las siguientes tres opciones de las cuales seleccionaremos html:5 o
con sólo colocar el signo de exclamación ! y presionando tabular. En ambos casos se nos creará
automáticamente la estructura html de nuestro código. Estos son atajos o trucos muy valiosos.
Indiferentemente del atajo que seleccionemos, se nos escribirán las siguientes líneas de
código. Esto es posible gracias a que Visual Studio Code utiliza Emmet, para que con solo
escribir algunas letras de nuestro código, presionando luego clic o tabular nos genera una
estructura o líneas de código completas, esta es una de las grandes ventajas de utilizar un
editor de código. En nuestro caso nos generó el esqueleto o estructura de nuestro html como
se muestra a continuación
Ahora completemos por ejemplo, la siguiente estructura de nuestro html de esta forma:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
Contenido
<h1>Titulo</h1>
<p>Parrafo</p>
<section>
<p>Otro Parrafo</p>
</section>
</body>
</html>
En el caso de HTML el código se comenta haciendo uso del de estos signos <!-- Comentario -->
A continuación se muestran las líneas de código anteriores con su respectiva explicación:
<!-- Etiqueta para indicarle a nuestro navegador web
que el documento html es html5 -->
<!DOCTYPE html>
<!-- Etique raiz -->
<html lang="en">
<!-- Etiqueta de lo que no será totalmente necesario que
vea el usuario -->
<head>
<!-- Etiqueta que muestra información sobre la página web a los
motores de búsqueda -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<!-- Muestra los títulos de nuestro html -->
<title>Document</title>
<!--Cierra mi etiqueta head -->
</head>
<!--En esta etiqueta va todo el contenido de nuestro sitio web -->
<body>
Contenido
<!-- Etiqueta de cabecera 1 -->
<h1>Titulo</h1>
<!-- Etiqueta para párrafos -->
<p>Parrafo</p>
<!-- Etiqueta para dividir una sección de código -->
<section>
<p>Otro Parrafo</p>
</section>
<!--Cierre de nuestra etiqueta body -->
</body>
<!--Cierre de nuestra etiqueta raíz html -->
</html>
Ahora para ejecutar nuestro código tenemos dos formas
de realizarlo:
La primera manera es dando clic derecho sobre el archivo index.html y luego seleccionar la
opción de Reveal in File Explorer. No olvides que antes debes presionar Ctrl S para guardar.
Luego se nos abrirá la siguiente ruta, con la ubicación de nuestro archivo. Damos doble clic
sobre el archivo index y seleccionamos el navegador de nuestra preferencia.
Luego abrirá el navegador con el contenido de nuestro archivo index.html y aquí podemos ver
la función que realiza cada etiqueta en nuestras líneas de código. Cabe resaltar que la ruta o
link de nuestro archivo es solamente la ubicación en nuestro computador
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
Contenido
<h1>Titulo</h1>
<p>Parrafo</p>
<section>
<p>Otro Parrafo</p>
</section>
</body>
</html>
Ejecutando así nuestro proyecto nos vemos en la obligación de actualizar nuestro navegador
cada vez que queramos ver los cambios que realicemos al archivo index.html, pero
recordemos que en nuestro caso tenemos instalada la extensión Live Server que nos ayudará
en actualizar nuestro navegador apenas guardemos o presionemos Ctrl S en el archivo. Para
usarlo sólo damos clic derecho en nuestro editor y presionamos Open with Live Server
Observemos que ahora la ruta cambió a http://127.0.0.1:5500/Calculadora/index.html de
esta forma estamos ejecutando nuestro código en un servidor local para previsualizar nuestros
cambios automáticamente en el navegador
Recordemos que las líneas de código deben contener una especie de sangría, en
programación se llama que el contenido debe estar identado, que consiste en dejar 4
espacios de sangría o simplemente presionar la tecla tabular.
Como podrán notar el Titulo se ve más grande y negrita, debido a que la etiqueta <h1> o
heading nos ayudará a posicionar nuestra página web en los motores de búsqueda, así que allí
por lo general se deben usar palabras claves. Mientras que con la etiqueta <h2> la podemos
usar para mostrar subtítulos que se verán más pequeños y así sucesivamente hasta <h6>
Mientras que la etiqueta <hr> se encarga de dividir un heading de otro, como se muestra a
continuación:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0"> -->
<title>Document</title>
</head>
<body>
Contenido
<h1>Titulo</h1>
<h2> Subtitulo</h2>
<p>Parrafo</p>
<section>
<p>Otro Parrafo</p>
</section>
<hr>
<h3>Otro Subtitulo</h3>
<p>Otro Parrafo Más</p>
</body>
</html>
La etiqueta <br> asigna un texto en una nueva línea. href dentro de la etiqueta de hipervínculo
<a> nos sirve para navegar a un sitio web o dentro de la misma página, agregando target nos
señala dónde abrir dicho hipervínculo, en nuestro caso se abrirá en una nueva pestaña. Como
ejemplo hemos colocado que el hipervínculo va para la página principal del buscador de
Google. La etiqueta <img /> se usa para agregar una imagen, así que buscamos la imagen de
nuestra preferencia y la guardamos en nuestra carpeta del proyecto, para trabajar más
ordenado creamos una carpeta dentro del proyecto para almacenar dichas imágenes y
escribimos en src la ruta de la imagen, acá también puede contener solamente el link de una
imagen de internet. Podemos jugar con el alto y ancho de la misma haciendo uso de height y
width
También podemos agregar botones, usando los comandos que se muestran a continuación.
Los principales tipos de botones, son los siguientes: Tipo button hay que programar su
funcionalidad con JavaScript. Tipo submit hace la función de enviar el contenido de nuestro
formulario a una base de datos. Tipo reset limpia o deja un formulario con los valores iniciales.
También podemos programar listas, formularios y tablas con html, eso lo veremos en
próximos niveles del curso.
Introducción a CSS
Definición de CSS
Sus siglas significan Cascading Style Sheets en español; Hojas de Estilo en Cascada y
precisamente es la encargada de separar la parte estructural, que estará en manos del HTML;
de la parte estética en manos del CSS. Es decir, que sencillamente nos ayudara a controlar el
diseño y la presentación de nuestro sistema de información, esto nos indica que nos brindará
la posibilidad de agregar por ejemplo; colores, sombras, fuentes, tamaños, posicionamiento y
cualquier otro valor estético.
Primeros pasos con CSS
Sabemos que vamos a realizar una calculadora pero antes veamos un poco acerca de las
funcionalidades del CSS. Hay varias formas de implementar el CSS, la primera de ellas sería por
ejemplo así:
La etiqueta <span> en html nos ayuda a referenciar, manipular o señalar texto dentro de otras
etiquetas, si lo unimos con este pequeño comando de CSS style = "color:cadetblue" nos dará
la posibilidad de agregar color cadetblue al texto señalado con la etiqueta span, como se
muestra a continuación, pero también podemos cambiar el color de las letras de un botón:
En este ejemplo podemos ver que le estamos agregando el estilo directamente en la
estructura html. Sin embargo, trabajar de esta forma es muy desorganizado por lo que el
codigo del CSS se puede escribir en un archivo diferente, para luego importarlo al documento
html como se muestra a continuacion y siguiendo esta estructura:
Elemento a estilizar {
propiedad : valor ;
Recordemos que para ello lo primero es crear nuestro archivo con extension ahora .css en
nuestro caso se llamará style.css
Siguiendo la estructura anterior podemos por ejemplo hacer lo siguiente; decir que todo lo
que tiene la etiqueta <p> es decir, los parrafos serán de color marron (brown en ingles) sin
olvidar colocar la etiqueta <link> con la ruta del archivo style.css en nuestro index.html como
se muestra a continuación:
Agregandole mas propiedades a nuestra estructura css podemos cambiarle muchas cosas; en
nuestro ejemplo se ve como cambiamos el color de fondo, la fuente o letra y la alineación del
texto.
¡Como pueden notar, con las funcionalidades vistas hasta ahora
podemos programar desde cero un blog informativo!
¿Te animarias a programar uno?
Recuerda que la base de la programación es la investigación. ¡No te
quedes con lo visto en clases, se curioso y nutrete de nuevos
conocimientos todos los dias!
Hay muchisimas cosas que se pueden programar a nivel visual en nuestras aplicaciones, sitios
webs y sistemas de informacion en general, tanto html como css son un mundo inmenso, es
por ello que en el desarrollo de programas y aplicaciones, hay programadores que se dedican
sólo al backend o programación de funcionalidades internas con pruebas por terminal como lo
que hicimos en las clases pasadas. Y tambien hay programadores que se dedican solamente al
frontend; es decir, al desarrollo de pantallas y parte visual de los software como lo que hemos
visto en este guía. Pero tambien, hay desarrolladores full stack que se dedican a la
programación en ambas ramas.
¡No olvides que vamos a realizar una calculadora!
Con el conocimiento previo, veamos ahora como prodecer a elaborarla y además, conocerás
otras funcionalidades que podemos implementar tanto en html como en css:
La etiqueta <div> hace referencia a un contenedor, división o caja de contenido, dicha etiqueta
cierra con </div>
La etiqueta <form> representa a una sección con formularios que contiene controles
interactivos para la entrada de datos, a través de texto y botones; dicha etiqueta se cierra con
</form>
Cuando usamos class dentro de otra etiqueta, hacemos referencia a una clase que
manejaremos o manipularemos luego desde el css.
La etiqueta <input> representa que habrá entradas, en nuestro caso por ser una calculadora la
entrada de información será a través de hacer clic en los botones o button de dicha
calculadora, la cual tendrá un valor o value en cada tecla. También, hay un <input> que se
representa con tipo texto o text para el display o pantalla de nuestra calculadora.
Con el código anterior tenemos la siguiente salida por pantalla en nuestro navegador.
¡No te preocupes, que poco a poco nuestra calculadora va a ir tomando forma!
Ahora, solamente nos resta duplicar los cuatro botones con su respectivo <div> o contenedor
que abre y cierra. Solo cambiamos el campo value como se muestra a continuación:
Y así sucesivamente para los demás botones, recordemos que con sólo guardar o presionar
Ctrl S nuestro navegador nos va mostrando los cambios realizados a nuestro código.
Acá modifique el color del fondo o background de la calculadora y agregamos propiedades
ahora al form input de la calculadora y queda como se muestra a continuación
Nuevamente modificando el valor del box-shadow de .calculadora from input; además,
también cambiando el tamaño y color de la letra, agregando margen entre botones y la
propiedad del cursor, quedando el diseño de la siguiente forma:
Ahora resta aumentar el tamaño del display o pantalla de nuestra calculadora, para ello
creamos una nueva clase en el contenedor o div de pantalla
Ahora agregamos una clase en el botón igual de nuestro index.html y colocamos las
propiedades estéticas en el style.css lo único que se agrega es que el botón sea de 144 pixeles.
Con este código se muestra el evento clic en la pantalla y el += nos permite colocar un 7 al lado
de otro 7. Si colocamos solo = nos mostraría un único 7 por pantalla. Y de manera similar,
haremos lo mismo con las otras teclas.
La única excepción es: El botón AC (Clear o limpiar pantalla) y el botón DE (Delete o eliminar
número uno a uno) los cuales quedaran así:
El input del botón AC retorna la pantalla en vacío. Mientras que el botón DE diremos que en
términos generales convierte el valor en pantalla a string, para que luego la funcion slice vaya
eliminando los números de uno en uno.
<input type="button" value="AC" onclick="pantalla.value = '' ">
<input type="button" value="DE" onclick="pantalla.value =
pantalla.value.toString().slice(0,-1) ">
Tanto el método .toString como el .slice son funciones que se utilizan para trabajar con arrays
o arreglos, que veremos en próximos niveles del curso.
Y por último programamos nuestro botón igual de la siguiente forma, usando sencillamente la
función eval y enviando como parámetro la operación que tengamos en pantalla
<input type="button" value="=" onclick="pantalla.value =
eval(pantalla.value)" class="igual" >
La función eval ejecuta la instrucción que se le pasa por parámetro y escribirá el resultado en
la página web. Primero resuelve la operación que hay entre los paréntesis, con lo que se
obtiene un resultado y luego se ejecuta la instrucción de escribir el resultado por pantalla.
Y de esta forma nuestra calculadora está programada con JavaScript desde nuestro html, para
realizar operaciones básicas. Como pueden notar no tiene casi validaciones, debido a que la
función de este ejercicio era solamente explicar la manera en la que podemos programar las
pantallas de forma más gráfica y desde cero, utilizando tanto html, como css y javascript.
Recuerda que a esta calculadora aún le faltan validaciones y otras maneras de implementar
nuestro código JavaScript, ocultándolo de nuestra estructura html. Eso lo explicaremos en otros
niveles del curso.
A continuación se adjunta el código completo del proyecto, con sus respectivos comentarios,
recuerda que para los comentarios en HTML se usa <!-- > mientras que en CSS se utiliza
el /* */
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora usando JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="fondo">
<div class="calculadora">
<form>
<div class="pantalla">
<input type="text" name="pantalla">
</div>
<div>
<input type="button" value="AC" onclick="pantalla.value = '' ">
<input type="button" value="DE" onclick="pantalla.value =
pantalla.value.toString().slice(0,-1) ">
<input type="button" value="." onclick="pantalla.value += '.' ">
<input type="button" value="/" onclick="pantalla.value += '/' ">
</div>
<div>
<input type="button" value="7" onclick="pantalla.value += '7' ">
<input type="button" value="8" onclick="pantalla.value += '8' ">
<input type="button" value="9" onclick="pantalla.value += '9' ">
<input type="button" value="*" onclick="pantalla.value += '*' ">
</div>
<div>
<input type="button" value="4" onclick="pantalla.value += '4' ">
<input type="button" value="5" onclick="pantalla.value += '5' ">
<input type="button" value="6" onclick="pantalla.value += '6' ">
<input type="button" value="-" onclick="pantalla.value += '-' ">
</div>
<div>
<input type="button" value="1" onclick="pantalla.value += '1' ">
<input type="button" value="2" onclick="pantalla.value += '2' ">
<input type="button" value="3" onclick="pantalla.value += '3' ">
<input type="button" value="+" onclick="pantalla.value += '+' ">
</div>
<div>
<input type="button" value="00" onclick="pantalla.value += '00' ">
<input type="button" value="0" onclick="pantalla.value += '0' ">
<input type="button" value="=" onclick="pantalla.value =
eval(pantalla.value)" class="igual" >
</div>
</form>
</div>
</div>
</body>
</html>
style.css
/* Propiedades generales de la pantalla */
*{
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/* Propiedades del div fondo general de pantalla */
.fondo{
/* Ancho del fondo */
width: 100%;
/* Alto del fondo */
height: 100vh;
/* Color del fondo */
background:#4291a6;
/* Organizar, centrar y justificar el contenido de la pantalla */
display: flex;
align-items: center;
justify-content: center;
}
/* Propiedades del div calculadora */
.calculadora{
/* Color de fondo de la calculadora*/
background: #0b596e;
/* Bordes de color alrededor de la calculadora de 20 pixeles*/
padding: 20px;
/* Bordes ovalados de la calculadora de 10 pixeles*/
border-radius: 10px;
}
/* Estilizar tamaño de la calculadora tanto teclas como pantalla */
.calculadora form input{
/* Borde */
border: 0;
/* Contorno */
outline: 0;
/* Ancho */
width: 60px;
/* Alto */
height: 60px;
/* Radio u ovalacion de los bordes de las teclas y pantalla*/
border-radius: 10px;
/* Sombreado al recuadro de la calculadora color claro */
/* Parte superior izquierda primeros paréntesis*/
/* Parte inferior derecha segundos paréntesis */
box-shadow: 0px 5px 10px 0px rgba(0,255,255,0.7),
20px 20px 35px rgba(247, 247, 250, 0.527);
/* Color de fondo de los botones transparentes */
background: transparent;
/* Tamaño de la fuente */
font-size: 22px;
/* Color de las letras es blanco */
color: #fff;
/* Para que salga un dedo al pasar el cursor sobre las teclas */
cursor: pointer;
/* Margen de 10 pixeles */
margin: 10px;
}
/* Modificar propiedades de la pantalla del calculador */
form .pantalla{
display: flex;
/* Para que el contenido o recuadro del número se muestre desde el lado derecho
*/
justify-content: flex-end;
/* Margen de 20 pixeles */
margin: 20px;
}
/* Propiedades de la entrada por pantalla */
form .pantalla input{
/* Texto alineado a la derecha */
text-align: right;
/* Ancho completo es decir agrandar la pantalla de la calculadora */
flex: 1;
/* Tamaño de la fuente */
font-size: 25px;
}
/* Propiedades botón igual */
form input.igual{
/* Ancho del botón */
width: 144px;
}
