Briefly about HTML, CSS, and JS

[ pruebas de UI ]

Cada página web está hecha de código.

HTML, CSS y JavaScript son las tecnologías clave usadas para crear sitios web:

HTML (HyperText Markup Language) define la estructura y el contenido de una página.
CSS (Cascading Style Sheets) define el aspecto visual de la página: colores, fuentes, espaciados, tamaños y más.
JS (JavaScript) hace que las páginas sean dinámicas e interactivas.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js">
</head>
<body>
    <h1>Encabezado</h1>
    <p>Y esto es un párrafo</p>
    <button>Botón</button>
</body>
</html>

Cómo procesa el navegador el código

1. Construcción del árbol de elementos

El navegador carga la página HTML, analiza su estructura y construye una representación jerárquica de elementos: el DOM (Document Object Model)

2. Aplicación de estilos

Después de construir el DOM, el navegador aplica estilos CSS para definir cómo deben verse los elementos para el usuario

3. Ejecución de scripts

Luego ejecuta el código JavaScript, que puede modificar el contenido, añadir animaciones y gestionar acciones del usuario

Antes del procesamiento del navegador

<body>
    <h1 style="color: blue">Encabezado</h1>
    <p style="border: dashed">Y esto es un párrafo</p>
    <button style="width: 50px">Botón</button>
</body>

Después del procesamiento del navegador

Encabezado

Y esto es un párrafo

Elementos de interfaz en código HTML

Los elementos de interfaz se describen usando tags HTML.

Tag es un marcado especial usado para definir la estructura de una página. Las etiquetas se encierran entre corchetes angulares y a menudo vienen en pares: una etiqueta de apertura <tag> y un tag de cierre </tag>. Puedes ver la lista completa de etiquetas aquí.

Dentro del tag de apertura puedes definir atributos — propiedades del elemento: id (un identificador único del elemento), type, name, style y otros.

Código HTML antes del procesamiento del navegador	Después del procesamiento del navegador
`<input type="radio" name="answer" value="Yes"> Sí <input type="radio" name="answer" value="No"> No`	Sí No
`<input type="checkbox" name="toppings" value="Nuts"> Nueces <input type="checkbox" name="toppings" value="Caramel"> Caramelo`	Nueces Caramelo
`<input type="text" name="field-name" placeholder="Introduce texto">`
`<textarea name="textarea-name" placeholder="Introduce texto"></textarea>`
`<button>¡Haz clic!</button>`

De texto plano a HTML + CSS + JS paso a paso

Construyamos una calculadora web.

0. Primero, prepara el contenido de la página: el texto que aparecerá en los botones.

1. Convirtamos el texto plano en una HTML página. Agruparemos el contenido lógicamente y describiremos los elementos usando tags:

<button>C</button>, <button>+</button>, <button>7</button>...
<input type="text" placeholder="0" readonly>

2. Después, añade CSS: define la fuente, tamaños de elementos y esquema de colores.

3. Luego escribe JS : ahora la calculadora puede responder a acciones del usuario y realizar cálculos.

0. TEXT

C / X - 7 8 9 + 4 5 6 = 1 2 3 0

1. TEXT + HTML

2. TEXT + HTML + CSS

3. TEXT + HTML + CSS + JS

Puedes inspeccionar la estructura HTML y los estilos CSS de cada uno de los cuatro prototipos de calculadora usando DevTools Elements, y ver los archivos JavaScript cargados adicionalmente en DevTools Sources.

Tarea