Introducción a HTML, CSS y JavaScript Utilizando

codePen.
Elementos básicos de HTML.
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para
estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus
contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de
datos. Como lo sugiere el título, este artículo te dará una comprensión básica
de HTML y cúal es su función.
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

Entonces, ¿qué es HTML en realidad?

HTML no es un lenguaje de programación; es un lenguaje de marcado que
define la estructura de tu contenido. HTML consiste en una serie de elementos
que usarás para encerrar diferentes partes del contenido para que se vean o
comporten de una determinada manera. Las etiquetas de encierre pueden
hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden
cambiar palabras a cursiva, agrandar o achicar la letra, etc.
(Conceptos Básicos de HTML - Aprende Desarro

Anatomía de un elemento HTML

Las partes principales del elemento son:

 La etiqueta de apertura: consiste en el nombre del elemento (en este
caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre.
Establece dónde comienza o empieza a tener efecto el elemento en este
caso, dónde es el comienzo del párrafo.
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN
 La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que
incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece
dónde termina el elemento en este caso dónde termina el párrafo.
(Conceptos Básicos de HTM
 El contenido: este es el contenido del elemento, que en este caso es sólo
texto. (Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)
  El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el
contenido equivale al elemento.
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

Los elementos pueden también tener atributos, que se ven así:

Los atributos contienen información adicional acerca del elemento, la cual no

quieres que aparezca en el contenido real del elemento. Aquí class es el
nombre del atributo y editor-note el valor del atributo. En este caso, el atributo
class permite darle al elemento un nombre identificativo, que se puede utilizar
luego para apuntarle al elemento información de estilo y demás cosas.
(Conceptos Básicos de HTML - Ap

Un atributo debe tener siempre:

 Un espacio entre este y el nombre del elemento (o del atributo previo, si
el elemento ya posee uno o más atributos).
 El nombre del atributo, seguido por un signo de igual (=).
 Comillas de apertura y de cierre, encerrando el valor del atributo.
(Conceptos Básicos de HTM

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento,

nunca en la de cierre.
Anidar elementos
Puedes también colocar elementos dentro de otros elementos esto se llama
anidamiento. Si, por ejemplo, quieres resaltar una palabra del texto (en el
ejemplo la palabra «muy»), podemos encerrarla en un elemento <strong>, que
significa que dicha palabra se debe enfatizar:
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

<p>Mi gato es
<strong>muy</strong
> gruñon.</p>
Debes asegurarte que los elementos estén correctamente anidados: en el
ejemplo de abajo, creaste la etiqueta de apertura del elemento <p> primero,
luego la del elemento <strong>, por lo tanto, debes cerrar esta etiqueta
primero, y luego la de <p>. Esto es incorrecto:
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

<p>Mi gato es
<strong>muy
gruñon.</p></strong>
Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se
encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran
solapados, el navegador web tratará de adivinar lo que intentas decirle, pero
puede que obtengas resultados inesperados. Así que, ¡no lo hagas!
(Conceptos Básicos de HTML - Aprende Desarro

Elementos vacíos
Algunos elementos no poseen contenido, y son llamados elementos vacíos.
Toma, por ejemplo, el elemento <img> de nuestro HTML:

<img
src="images/firefox-
icon.png" alt="Mi
Posee dos atributos, pero imagen de prueba" /> no hay etiqueta de
cierre </img> ni contenido encerrado.
Esto es porque un elemento de imagen no encierra contenido al cual afectar.
Su propósito es desplegar una imagen en la página HTML, en el lugar en que
aparece. (Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)
Anatomía de un documento HTML
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no
son muy útiles por sí solos. Ahora verás cómo los elementos individuales son
combinados para formar una página HTML entera. Vuelve a visitar el código de
tu ejemplo en index.html (que viste por primera vez en el artículo Manejo de
archivos): (Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

Tienes:

 <!DOCTYPE html> — el tipo de documento. Es un preámbulo requerido.

Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de
documento actuaban como vínculos a un conjunto de reglas que el
código HTML de la página debía seguir para ser considerado bueno, lo
que podía significar la verificación automática de errores y algunas otras
 cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto
antiguo que a nadie le importa, pero que debe ser incluido para que todo
funcione correctamente. Por ahora, eso es todo lo que necesitas saber.
(Conceptos Básicos de HT
 <html></html> — el elemento <html>. Este elemento encierra todo el
contenido de la página entera y, a veces, se le conoce como el elemento
raíz (root element).
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)
 <head></head> — el elemento <head>. Este elemento actúa como un
contenedor de todo aquello que quieres incluir en la página HTML que no
es contenido visible por los visitantes de la página. Incluye cosas como
palabras clave (keywords), una descripción de la página que quieres que
aparezca en resultados de búsquedas, código CSS para dar estilo al
contenido, declaraciones del juego de caracteres, etc.
(Conceptos Básicos de HTML - Aprende D
 <meta charset="utf-8"> — <meta>. Este elemento establece el juego
de caracteres que tu documento usará en utf-8, que incluye casi todos
los caracteres de todos los idiomas humanos. Básicamente, puede
manejar cualquier contenido de texto que puedas incluir. No hay razón
para no establecerlo, y puede evitar problemas en el futuro.
(Conceptos Básicos de HTML - Aprende
 <title></title> — el elemento <title> establece el título de tu página,
que es el título que aparece en la pestaña o en la barra de título del
navegador cuando la página es cargada, y se usa para describir la
página cuando es añadida a los marcadores o como favorita.
(Conceptos Básicos de HTML - Aprende
 <body></body> — el elemento <body>. Encierra todo el contenido que
deseas mostrar a los usuarios web que visiten tu página, ya sea texto,
imágenes, videos, juegos, pistas de audio reproducibles, y demás.
(Conceptos Básicos de HTM

Imágenes
Presta atención nuevamente al elemento imagen <img>:

<img
src="images/firefox
-icon.png" alt="Mi
Como ya se dijo antes, imagen de incrusta una imagen en
la página, en la posición prueba" /> en que aparece. Lo logra
a través del atributo src (source), el cual
contiene el path (ruta o ubicación) de tu archivo de imagen.
(Conceptos Básicos de HTML - Aprende Desarrollo Web | M

También se incluye un atributo alt (alternative) el cual contiene un texto que

debería describir la imagen, y que podría ser accedido por usuarios que no
pueden ver la imagen, quizás porque:
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)
 1 Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos
visuales usualmente utilizan herramientas llamadas Lectores de pantalla
(Screen Readers), los cuales les leen el texto contenido en el atributo alt.
(Conceptos Básicos de HT
2 Se produjo algún error en el código que impide que la imagen sea
cargada. Como ejemplo, modifica deliberadamente la ubicación dentro
del atributo src para que este sea incorrecto. Si guardas y recargas la
página, deberías ver algo así en lugar de la imagen:
(Conceptos Básicos de HTML - Aprende Desarrollo

La frase clave acerca del texto alt de arriba es «texto que debería describir la
imagen». El texto alt debe proporcionarle al lector la suficiente información
como para que este tenga una buena idea de qué muestra la imagen. Por lo
que tu texto actual «Mi imagen de prueba» no es para nada bueno. Un texto
mucho mejor para el logo de Firefox sería: «El logo de Firefox: un zorro en
llamas rodeando la Tierra».
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

Marcado de texto
Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el
marcado de texto.
Encabezados
Los elementos de encabezado permiten especificar que ciertas partes del
contenido son encabezados, o subencabezados del contenido. De la misma
forma que un libro tiene un título principal, y que a su vez puede tener títulos
por cada capítulo individual, y subtítulos dentro de ellos, un documento HTML
puede tenerlos también. HTML posee seis niveles de encabezados, <h1>–
<h6>, aunque probablemente solo llegues a usar 3-4 como mucho:
(Conceptos Básicos de HTML - Aprende Desarro

<h1>Mi título principal</h1>

<h2>Mi título de nivel superior</h2>
<h3>Mi subtítulo</h3>
<h4>Mi sub-subtítulo</h4>
Párrafos
Como se explicó más arriba, los elementos <p> se utilizan para encerrar
párrafos de texto; los usarás frecuentemente para el marcado de contenido de
texto regular:
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

<p>Este es un simple parrafo</p>

Listas
Mucho del contenido web está dado por listas, así que HTML tiene elementos
especiales para ellas. El marcado de listas se realiza siempre en al menos dos
elementos. Los dos tipos de listas más comunes son las listas ordenadas y las
desordenadas:
(Conceptos Básicos de HTML - Aprende Desarrollo Web | MDN, n.d.)

Las listas desordenadas son aquellas en las que el orden de los items no es
relevante, como en una lista de compras. Estas son encerradas en un elemento
<ul> (unordered list).
Las listas ordenadas son aquellas en las que el orden sí es relevante, como en
una receta. Estas son encerradas en un elemento <ol> (ordered list).
(Conceptos Básicos de HTML - Ap

Cada elemento de la lista se coloca dentro de un elemento <li> (list item).

<p>En Mozilla, somos una comunidad de</p>

<ul>
<li>tecnólogos</li>
<li>pensadores</li>
<li>constructores</li>
</ul>

<p>trabajando juntos...</p>
Vínculos
Los vínculos o enlaces son muy importantes —son los que hacen de la web, la
web—. Para implementar un vínculo, necesitas usar un vínculo simple — <a>
— la a es la abreviatura de la palabra inglesa «anchor» («ancla»). Para
convertir algún texto dentro de un párrafo en un vínculo, sigue estos pasos:
(Conceptos Básicos de HTML - Ap

1 Elige algún texto. Nosotros elegimos «Manifesto Mozilla».

2 Encierra el texto en un elemento <a>, así:

3 Proporciónale al elemento <a> un atributo href, así:

4 Completa el valor de este atributo con la dirección web con la que

quieras conectar al vínculo:
Podrías obtener resultados inesperados si al comienzo de la dirección web
omites la parte https:// o http:// llamada protocolo. Así que luego del marcado
del vínculo, haz clic en él para asegurarte que te dirige a la dirección deseada.
(Conceptos Básicos de HTML - Ap

Elementos básicos de CSS

CSS (Hojas de Estilo en Cascada) es el código que usas para dar estilo a tu
página web. CSS Básico te lleva a través de lo que tú necesitas para empezar.
Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo
hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo
decoro mi página web con imágenes de fondo y colores?
(CSS Básico - Aprende Desarrollo Web | MDN, n.d.)

Entonces ¿qué es CSS, realmente?

Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en
español, no es realmente un lenguaje de programación, tampoco es un
lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te permite
aplicar estilos de manera selectiva a elementos en documentos HTML. Por
ejemplo, para seleccionar todos los elementos de párrafo en una página HTML
y volver el texto dentro de ellos de color rojo.
(CSS Básico - Aprende Desarrollo Web | MDN, n.d.)

 Font-family:
Define la familia tipográfica. Es conveniente poner una lista de dos o tres
tipografías separadas por coma, porque si el usuario no tiene instalada la
tipografía que nosotros elegimos, el navegador opta por mostrar la siguiente
que debería ser una similar, si tampoco la tiene instalada, mostrará la
tipografía por defecto.
(¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

p{
font-family: Courier, `Lucida Console`, monospace
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Font-size:
Define el tamaño de la fuente y el valor se puede escribir en pixels o en ems.
En este momento se recomienda usar ems. Los dos son valores relativos, el
pixel es un valor relativo a la resolución de la pantalla, pero el em es relativo al
tamaño de la fuente definida por el usuario. Si el usuario no cambió la
configuración, el valor por defecto de los textos en todos los navegadores es de
16px. Entonces 1em = 16px.
(¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

p{
font-size:14pt;
font-style:italic
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Color:
Define el color de la tipografía. Los colores se pueden escribir de 3 formas
distinas: con sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Con
los nombres de los colores (más limitado) por ejemplo: black, red, green. O
usando RGB, esta paleta permite agregar el canal alfa para hacer
transparencias.
(¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

.cuadro {
color:red;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Width:
Define el ancho de un elemento, el valor se puede escribir en pixels, ems o
porcentaje. (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)
#container {
width:960px;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Max-width o min-width:
Definen el ancho máximo o mínimo de un elemento. Muy importante en sitios
adaptables.
(¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

#container {
max-widt:3.5em;
 min-widt:10%
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Height:
Define el alto de un elemento, el valor se puede escribir en pixels, ems o
porcentaje. (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)
.cuadro {
height:120px;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Max-height o min-height:
Definen el alto máximo o mínimo de un elemento. Muy importante en sitios
adaptables.
(¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

#container {
max-height:300px;
min-height:150px;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Padding:
Es la distancia desde el borde de un elemento hasta su contenido.
(¿Conoces Cuáles Son Las Propiedades Mas Ut

div {
padding top:10px;
padding right:20px;
padding bottom:30px;
padding left:20px;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Margin:
Es la distancia entre un elemento y otro (desde el borde de un elemento hacia
afuera). (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)
div {
margin-top:10px;
margin-bottom:10px;
margin-left:10px;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

 Border:
Define el borde de un elemento, su color, su estilo y grosor.
(¿Conoces Cuáles Son Las Propiedades Mas Utilizadas E

div {
border-top: 1px solid #C00;
border-bottom: 1px solid #C00;
border-bottom: 1px solid #C00;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

Background:
Define los fondos de un objeto. El fondo puede ser una imagen o un color. El
color puede ser pleno o degradado. La imagen se puede repetir formando una
trama (es lo que ocurre por defecto) o se puede especificar que no repita y que
se coloque en determinada posición.
(¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

div {
background-image: url(`images/imagen_pequena.png`);
background-repeat: no-repeat;
background-position: 2em 1.5cm;
background-attachment: fixed;
} (¿Conoces Cuáles Son Las Propiedades Mas Utilizadas En CSS?, n.d.)

¿Qué es JavaScript realmente?

JavaScript es un robusto lenguaje de programación que se puede aplicar a un
documento HTML y usarse para crear interactividad dinámica en los sitios web.
Fue inventado por Brendan Eich, cofundador del proyecto Mozilla, Mozilla
Foundation y la Corporación Mozilla.
Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con
pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y
respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de
crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas
en bases de datos ¡y mucho más!
JavaScript por sí solo es bastante compacto aunque muy flexible, y los
desarrolladores han escrito gran cantidad de herramientas encima del núcleo
del lenguaje JavaScript, desbloqueando una gran cantidad de funcionalidad
adicional con un mínimo esfuerzo. Esto incluye:
 Interfaces de Programación de Aplicaciones del Navegador (APIs) — APIs
construidas dentro de los navegadores que ofrecen funcionalidades
como crear dinámicamente contenido HTML y establecer estilos CSS,
hasta capturar y manipular un vídeo desde la cámara web del usuario, o
generar gráficos 3D y muestras de sonido.
 APIs de terceros, que permiten a los desarrolladores incorporar
funcionalidades en sus sitios de otros proveedores de contenidos como
Twitter o Facebook.
 Marcos de trabajo y librerías de terceros que puedes aplicar a tu HTML
para que puedas construir y publicar rápidamente sitios y aplicaciones.

Variables
as variables en los lenguajes de programación siguen una lógica similar a las
variables utilizadas en otros ámbitos como las matemáticas. Una variable es un
elemento que se emplea para almacenar y hacer referencia a otro valor.
Gracias a las variables es posible crear "programas genéricos", es decir,
programas que funcionan siempre igual independientemente de los valores
concretos utilizados.
De la misma forma que si en Matemáticas no existieran las variables no se
podrían definir las ecuaciones y fórmulas, en programación no se podrían hacer
programas realmente útiles sin las variables.
Si no existieran variables, un programa que suma dos números podría
escribirse como:

El programa anterior es tan poco útil que sólo sirve para el caso en el que el
primer número de la suma sea el 3 y el segundo número sea el 1. En cualquier
otro caso, el programa obtiene un resultado incorrecto.
Sin embargo, el programa se puede rehacer de la siguiente manera utilizando
variables para almacenar y referirse a cada número:

Los elementos numero_1 y numero_2 son variables que almacenan los valores
que utiliza el programa. El resultado se calcula siempre en función del valor
almacenado por las variables, por lo que este programa funciona
correctamente para cualquier par de números indicado. Si se modifica el valor
de las variables numero_1 y numero_2, el programa sigue funcionando
correctamente.
Las variables en JavaScript se crean mediante la palabra reservada var. De esta
forma, el ejemplo anterior se puede realizar en JavaScript de la siguiente
manera:

La palabra reservada var solamente se debe indicar al definir por primera vez
la variable, lo que se denomina declarar una variable. Cuando se utilizan las
variables en el resto de instrucciones del script, solamente es necesario indicar
su nombre. En otras palabras, en el ejemplo anterior sería un error indicar lo
siguiente:

Si cuando se declara una variable se le asigna también un valor, se dice que la

variable ha sido inicializada. En JavaScript no es obligatorio inicializar las
variables, ya que se pueden declarar por una parte y asignarles un valor
posteriormente. Por tanto, el ejemplo anterior se puede rehacer de la siguiente
manera:
Una de las características más sorprendentes de JavaSript para los
programadores habituados a otros lenguajes de programación es que tampoco
es necesario declarar las variables. En otras palabras, se pueden utilizar
variables que no se han definido anteriormente mediante la palabra
reservada var. El ejemplo anterior también es correcto en JavaScript de la
siguiente forma:

Operadores

Las variables por sí solas son de poca utilidad. Hasta ahora, sólo se ha visto
cómo crear variables de diferentes tipos y cómo mostrar su valor mediante la
función alert(). Para hacer programas realmente útiles, son necesarias otro tipo
de herramientas.
Los operadores permiten manipular el valor de las variables, realizar
operaciones matemáticas con sus valores y comparar diferentes variables. De
esta forma, los operadores permiten a los programas realizar cálculos
complejos y tomar decisiones lógicas en función de comparaciones y otros
tipos de condiciones.
Operadores de asignación
Un operador de asignación asigna un valor a su operando izquierdo basándose
en el valor de su operando derecho. El operador de asignación simple es igual
(=), que asigna el valor de su operando derecho a su operando izquierdo. Es
decir, x = y asigna el valor de y a x.
También hay operadores de asignación compuestos que son una abreviatura de
las operaciones enumeradas en la siguiente tabla:

Nombre Operador abreviado Significado

Asignación x=y x=y
Asignación de adición x += y x=x+y
Asignación de resta x -= y x=x-y
 Asignación de multiplicación x *= y x = x *y
Asignación de división x /= y x = x /y
Asignación de residuo x %= y x = x %y
Asignación de exponenciación x **= y x = x ** y
Asignación de desplazamiento a la x <<= y x = x << y
izquierda
Asignación de desplazamiento a la x >>= y x = x >> y
derecha
Asignación de desplazamiento a la x >>>= y x = x >>> y
derecha sin signo
Asignación AND bit a bit x &= y x =x&y
Asignación XOR bit a bit x ^= y x =x^y
Asignación OR bit a bit x |= y x =x|y
Asignación AND lógico x &&= y x && (x = y)
Asignación OR lógico x ||= y x || (x = y)
Asignación de anulación lógica x ??= y x ?? (x = y)

Operadores de comparación
Un operador de comparación compara sus operandos y devuelve un valor
lógico en función de si la comparación es verdadera (true) o falsa (false). Los
operandos pueden ser valores numéricos, de cadena, lógicos u objetos. Las
cadenas se comparan según el orden lexicográfico estándar, utilizando valores
Unicode. En la mayoría de los casos, si los dos operandos no son del mismo
tipo, JavaScript intenta convertirlos a un tipo apropiado para la comparación.
Este comportamiento generalmente resulta en comparar los operandos
numéricamente. Las únicas excepciones a la conversión de tipos dentro de las
comparaciones involucran a los operadores === y !==, que realizan
comparaciones estrictas de igualdad y desigualdad. Estos operadores no
intentan convertir los operandos a tipos compatibles antes de verificar la
igualdad. La siguiente tabla describe los operadores de comparación:

Operador Descripción Ejemplos que

devuelven true

Igual (==) Devuelve true si los operandos son iguales. 3 == var1

"3" == var1
3 == '3'

No es igual (!=) Devuelve true si los operandos no son var1 != 4

iguales. var2 != "3"

Estrictamente Devuelve true si los operandos son iguales 3 === var1

igual (===) y del mismo tipo. Consulta
también Object.is y similitud en JS.

Desigualdad Devuelve true si los operandos son del var1 !== "3"
estricta (!==) mismo tipo pero no iguales, o son de 3 !== '3'
diferente tipo.

Mayor que (>) Devuelve true si el operando izquierdo es var2 > var1 "12" >
 mayor que el operando derecho. 2

Mayor o igual Devuelve true si el operando izquierdo es var2 >= var1 var1
que (>=) mayor o igual que el operando derecho. >= 3

Menor que (<) Devuelve true si el operando izquierdo es var1 < var2
menor que el operando derecho. "2" < 12

Menor o Devuelve true si el operando izquierdo es var1 <= var2 var2

igual (<=) menor o igual que el operando derecho. <= 5

Operadores aritméticos
Un operador aritmético toma valores numéricos (ya sean literales o variables)
como sus operandos y devuelve un solo valor numérico. Los operadores
aritméticos estándar son suma (+), resta (-), multiplicación (*) y división (/).
Estos operadores funcionan como lo hacen en la mayoría de los otros lenguajes
de programación cuando se usan con números de punto flotante (en particular,
ten en cuenta que la división entre cero produce Infinity).

Operador Descripción Ejemplo

Residuo (%) Operador binario. 12 % 5 devuelve 2.

Devuelve el resto entero
de dividir los dos
operandos.

Incremento (++) Operador unario. Agrega Si x es 3, +

uno a su operando. Si se +x establece x en 4 y
usa como operador prefijo devuelve 4, mientras
(++x), devuelve el valor que x++ devuelve 3 y , solo
de su operando después entonces, establece x en 4.
de agregar uno; si se usa
como operador sufijo (x+
+), devuelve el valor de
su operando antes de
agregar uno.

Decremento (--) Operador unario. Resta Si x es 3, entonces --

uno de su operando. El x establece x en 2 y
valor de retorno es devuelve 2, mientras
análogo al del operador que x-- devuelve 3 y, solo
de incremento. entonces, establece x en 2.

Negación Operador unario. Si x es 3, entonces -

unaria (-) Devuelve la negación de x devuelve -3.
su operando.

Positivo Operador unario. Intenta +"3" devuelve 3. +true dev

 unario (+) convertir el operando en uelve 1.
un número, si aún no lo
es.

Operador de Calcula la base a la 2 ** 3 returns 8. 10 ** -

exponenciación ( potencia de exponente, es 1 returns 0.1.
**) decir, baseexponente

Referencias
HYPERLINK
"https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/
HTML_basics"https://developer.mozilla.org/es/docs/Learn/
Getting_started_with_the_web/HTML_basics
https://blog.mgpanel.org/post/-conoces-cuales-son-las-propiedades-mas-utilizadas-
en-css-
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/
CSS_basics
https://uniwebsidad.com/libros/javascript
https://aprendejavascript.org/