Sara Arévalo Jiménez 1ºbach1

Vídeo 1

Listas

• Unordered <ul> Listas sin ordenar (solo guiones)
  
  

• Oreded <ol> Listas ordenadas por númros
  
  

Combinadas: Listas deantro de listas

Tablas

<table> <td> <tr> thread y thead
Para crear tablas. "td" define una celda, y "tr" una fila

Son muy prácticas y se pueden añadir las filas y columnas que queramos

METATAGS

Los meta tags sirven para proporcionar información del contenido y elementos del código.

<meta name="" content="" charset"" http-equip="">

STYLES

Con <style> podemos cambiar la estética del código, por ejemplo:

• Border sirve para editar los bordes de un elemento, en este caso una celda de una tabla (tamaño y color)

ADD Y REMOVE CLASSES

Las clases sirven para aplicar estilos o comportamientos a elementos HTML, add() y remove() cambian el aspecto o comportamiento del HTML sin recargar la página
Un ejemplo es el siguiente:

<script>
const elemento = document.getElementById("texto");

elemento.classList.add("rojo");    // agrega una clase
elemento.classList.remove("rojo"); // elimina una clase
</script>

También se pueden seleccionar:

Vídeo 2

CSS

El codigo CSS permite mover elementos, alinearlos, poner columnas, colores, mejorar el diseño...
Si el HTML está mal organizado luego es muy difícil colocar los elementos con CSS.

Web con cajas invisibles

En el vídeo explica que una web es como un grupo de muchas cajas o boxes.
Cada sección de la web es una caja: encabezado, sidebar, contenido, pie de página, etc

Este ejemplo del video enseña cómo la web está dividida en varias cajas visibles: la de la izquierda para el sidebar, el contenido, el título...

Filas y columnas

Para organizar las páginas se utilizan las filas (rows) y columnas (columns)
Por ejemplo, una fila superior para el encabezado y otra debajo dividida en dos columnas para el contenido y el sidebar.

Cajas

• Pueden dividirse infinitas veces
• Una caja puede contener más cajas.
• Dentro de una columna puede haber más filas con más columnas

Div

Antes siempre se usaba <div> para organizar, pero ahora hay más elementos como section, article, main, nav, aside, header, footer, etc, que funcionan como contenedores invisibles para organizar.

Colores

Si añadimos "background color" y "border" podemos ver dónde están las cajas invisibles porque quedan marcadas con colores.

Cada color es una caja distinta

Clases

Agrega las clases como row, col-25 y col-75 para especificar que row es una fila, y las otras son columnas de distinto tamaño.

Style

El vídeo explica cómo escribir CSS dentro de <style>.

Un selector es el elemento que queremos modificar, una propiedad es lo que queremos cambiar, y un valor para darle ese nuevo valor a la propiedad. Ejemplo:

11. Padding

Padding añade espacio dentro de una caja. Sirve para separar el contenido de los bordes o hacer mas visible la estructura.

Aquí por ejemplo separaría 20 píxeles el contenido del borde de la caja.

Display flex

`
Aunque las cajas existen, el HTML coloca los elementos en bloque y debajo de otro, así que usamos display: flex para que los elementos hijos se coloquen en fila en vez de en columna

Como vemos, ahora se colocan en fila, no una debajo de otra

Flex

Flex= algo , controla cuánto espacio ocupa cada columna. Va por proporciones, no por porcentajes.

Aquí por ejemplo 5 y 5 hará que las columnas sean iguales sin poner 50% porque es la misma proporcion.

Antes se usaba float: left y float: right

Columnas dentro de una fila

Podemos dividir una fila en varias columnas para estructurar la información de muchas formas. En el ejemplo añade tres columnas en una misma fila

Margins

Añade espacio entre elementos:

En este añade espacio a ambos lados del texto para que no toque los bordes.
padding: espacio interno, margin: espacio externo.

Vídeo 3

Input boxes

Para introducir texto o datos a la página hace falta una caja de input

Para ello usa:

El texto que introducimos aparece entre comillas para evitar confundirlo con una variable, en la consola sale el 45 de esta forma:

ParseInt y ParseFloat

ParseInt sirve para convertir el número en un número entero (quita los decimales)

ParseFloat lo convierte en un número decimal

parseInt ( "45.87") lo convertiría a 45
parseFloat ("45.87") lo convierte a 45.87

Vídeo 4

Atributos

Añade información que el usuario no puede ver.

Esto es solo lo que se ve:

Consiste en poner la palabra "data" y un guion - para separar las siguientes palabras (las que queramos) para atribuir un nombre o un dato de un elemento.

En la consola SÍ aparecen los atributos

En este caso nos pemrite ver un valor del precio del café que no es visible, pero sí en la consola