Nerea Robles Cervigón 1ºBach1

Primer vídeo

Sección del cuerpo

Tipos de listas :

• < ul>

< li > < /li> : sublista

Tablas :

Tiene una estructura parecida a una hoja de cálculo . Para crearla se añade el tag < table > < / table > . Dentro de este tag se pone el tag < tr > para añadir las diferentes filas de la tabla . Tambien se añade el tag < th > que es la etiqueta de las diferentes columnas . Dentro de el tag < table > también se puede añadir el tag < td > que es para añadir columnas .

• < thead >

• < tbody >
  Estos dos tag se suelen utilizar en CSS para dar estilo .
  

• td {border : 1px solid black} : esta secuencia pone los bordes en las tablas .
  

metatags

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

styles

Podemos cambiar la estética del código como por ejemplo para editar los bordes de un elemento, en este caso una celda de una tabla . En este ejemplo podemos ver que se modifica el tamaño y color .

• add y remove classes
  Las clases sirven para aplicar estilos o comportamientos a elementos HTML como add() y
  remove() cambian el aspecto o comportamiento del HTML sin recargar la página.
  

Segundo vídeo

En este vídeo se centra tanto en el CSS que permite mover elementos, alinearlos, poner columnas, colores, mejorar el diseño entre otras funciones ; y el HTML que si está mal organizado luego es muy difícil colocar los elementos con CSS.

Web con cajas invisibles

En el vídeo dice que una web es como un conjunto de cajas o boxes ,cada sección de la web es una caja: encabezado, sidebar, contenido, pie de página, etc. Podemos ver todo esto en el ejemplo

Estas son las diferentes cajas o boxes en las que se divide este ejemplo .

Filas y columnas

Para que todo este bien ordenado se utilizan filas y columnas .

Cajas

Algunas de sus funciones son :

• 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

Es un contenedor invisible que se solía utilizar antes para organizar , pero ahora hay más elementos como section, main, nav, aside,article, header, footer, etc,

Colores

Para poder diferenciar las distintas cajas invisibles se añade "background color" y "border" y quedan marcadas cada una de un color distinto .

Clases

En el vídeo añade 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

En el vídeo lo explica usando código de 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.

Padding

Añade espacio dentro de una caja y sirve para separar el contenido de los bordes o hacer mas visible la estructura.

Display flex

Usamos display: flex para que los elementos hijos se coloquen en fila en vez de en columna.

Flex

Controla cuánto espacio ocupa cada columna. Va por proporciones, no por porcentajes.

Columnas dentro de una fila

Margins

Añade espacios entre elementos

Tercer vídeo

Input boxes

Sirve para introducir texto o datos a la página y hace falta una caja de input.
Para ello usa :

El texto que introducimos aparece entre comillas para evitar confundirlo con una variable.

ParseInt y ParseFloat

• Parselnt : ParseInt sirve para convertir el número en un número entero (quita los decimales).
• ParseFloat : ParseFloat lo convierte en un número decimal.
  

Cuarto vídeo

Atributos

Añade información que el usuario no puede ver. En cambio , en la consola SÍ aparecen los atributos.