1. 1. Estructura de un documento web: HTML
1.1. herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos.
1.2. Puede venir acompañado de dos lenguajes
1.2.1. CSS
1.2.2. JavaScript
2. Etiquetas
2.1. Tienen un nombre que va entre los símbolos < y >.
2.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >.
2.3. Las etiquetas sin contenido pueden llevar el símbolo / antes de >
2.4. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas.
3. Atributos
3.1. Los atributos pueden modificar características de las etiquetas.
3.2. Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado.
3.3. Son opcionales, pueden usarse o no.
3.4. Se añaden en la etiqueta de apertura.
4. Estructura básica de una página web HTML
4.1. Para crear un documento HTML podemos usar cualquier editor de texto plano
4.2. Componentes básicos de la estructura HTML:
4.2.1. DOCTYPE: Indica qué tipo de archivo es.
4.2.2. <html>: Etiqueta raíz que contiene el resto de etiquetas.
4.2.3. <head>: Primera etiqueta tras <html>. Contiene información sobre la página web. Dentro se encuentra la etiqueta <title> que indica cuál es el título.
4.2.4. <meta charset="UTF-8" />: Indica la codificación usada
4.2.5. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.
5. Tipos de elementos
5.1. En bloque
5.1.1. Ocupan todo el ancho del elemento que los contiene
5.1.2. Los elementos van tras de ellos se visualizan debajo
5.1.3. Pueden contener otros elementos de bloque
5.2. En línea
5.2.1. Ocupan sólo el ancho necesario
5.2.2. Se sitúan uno al lado del otro hasta ocupar el ancho disponible
5.2.3. Sólo pueden contener otros elementos en línea, texto e imágenes.
6. Etiquetas básicas
6.1. <div> Divide la página en secciones </div>
6.2. <p> Párrafo </p>
6.3. <span> Sirve para agrupar elementos en línea </span>
6.4. <u> Subrayado </u>
6.5. <em> Cursiva o énfasis </em>
6.6. <strong> Negrita o destacado </strong>
6.7. <sub> Subíndice </sub>
6.8. <br> Salto de línea
6.9. <hr> Línea de separación horizontal
7. Listas
7.1. <li> Representa cada uno de los items de la lista </li>
7.2. <ol> Representa una lista ordenada </ol>
7.3. <ul> Representa una lista sin orden </ul>
7.4. Listas ordenadas
7.4.1. Reversed : invierte el orden de la lista
7.4.2. Start: establece en qué número o letra empieza la lista. Ejemplo: <ol start=“2”>
7.4.3. Type: indica el tipo de numeral a utilizar. Ejemplo: <ol type=“a”> o <ol type=“i”>
7.5. Listas anidadas
7.5.1. Una lista puede estar dentro de otra lista
7.5.2. La lista interna formaría parte de un ítem
7.5.2.1. de la lista externa
8. Encabezados
8.1. Son títulos para las diferentes secciones de una página web
8.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>
8.3. El número indica la importancia del título (tamaño). El 1 el más importante.
9. Tablas
9.1. Son un elemento de bloque
9.2. Se crean con la etiqueta <table>
9.3. Las filas se crean con la etiqueta <tr> (table row)
9.4. Las filas contienen celdas que se crean con la etiqueta <td>
9.5. Atributo border: se usa indicar el ancho de los bordes de la tabla
9.6. Unir celdas
9.6.1. Atributos de la etiqueta <td> para unir celdas:
9.6.1.1. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas
9.6.1.2. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas
10. Imágenes
10.1. Son un elemento en línea
10.2. Etiqueta: <img>
10.3. Atributos:
10.3.1. Alt: texto alternativo
10.3.2. Src: ruta de la imagen a visualizar
11. Enlaces
11.1. Son vínculos a otras páginas
11.2. Pueden ser:
11.2.1. Locales (dentro del sitio web)
11.2.2. Externos (en otro sitio web)
11.3. Etiqueta <a>
11.4. Atributos:
11.4.1. href : URL de la página de destino
11.4.2. Target="_blank" : abre la página de destino en una nueva pestaña
12. 3. Personalización del estilo: CSS
12.1. lenguaje utilizado para definir el modo en que se presenta el código HTML de una página web
12.2. Permite separar la estructura (HTML) de la presentación (CSS).
12.3. Ventajas de usar archivo CSS:
12.3.1. Con un solo archivo CSS podemos modificar varias páginas HTML
12.3.2. A la hacer cambios sólo se modifica en el archivo CSS (y no en todas las páginas HTML)
13. Colocación del código CSS
13.1. El código CSS se puede vincular a una estructura HTML de tres formas diferentes
13.1.1. En un atributo HTML, con el atributo style
13.1.2. Con la etiqueta <style>
13.1.3. En un archivo independiente
14. Selectores básicos
14.1. determinan qué elementos HTML se verán afectados por el código CSS
14.2. Tipos de selectores:
14.2.1. Por tipo : Etiqueta HTML.
14.2.2. class: (varios elementos)
14.2.3. id: (un elemento)
14.3. Prioridad
14.3.1. 1. Id 2. Clase 3. Tipo
15. Colores
15.1. Propiedades
15.1.1. color: modifica el color de texto
15.1.2. background-color: modifica el color de fondo
15.2. RGB
15.2.1. colores formados mezclado estos 3 indicando proporción de cada uno
16. Propiedades del texto
16.1. text-align
16.2. text-decoration
16.3. text-transform
16.4. font-size
16.5. font-family
16.6. font-style
16.7. font-weight
16.8. text-shadow
17. Tamaño
17.1. display: block. Visualizar como elemento de bloque.
17.2. display: inline. Visualizar como elemento en línea.
17.3. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo
17.4. width, height, max-width, max-height, min-width y min-height
18. Bordes
18.1. border-width
18.2. border-style
18.3. border-color
18.4. border
18.5. border-radius
19. Márgenes
19.1. margin: distancia con otros elementos que lo rodean
19.2. padding: margen interno entre el elemento y su contenido
19.3. Tanto el margin como el padding se suma al width
19.4. Márgenes individuales
19.4.1. Para modificar márgenes externos (margin) o internos (padding) podemos:
19.4.1.1. añadir -left –right –top –bottom
20. Posicionamiento
20.1. position: static -> posicionamiento por defecto
20.2. position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom
20.3. position: absolute -> posición dentro del documento
20.4. Position: sticky -> sitúa al elemento basado en el scroll
20.5. Position: fixed -> posición dentro de la ventana del navegador
21. Imagen de fondo
21.1. propiedades:
21.1.1. background-image : url ('imagen.png');
21.1.2. background-image : url ('../imagen.png');
21.1.3. background-position: left top; /* posición horizontal y vertical */
21.1.4. background-position: center center;
21.1.5. background-position: right bottom;
21.1.6. background-repeat: repeat;
21.1.7. background-repeat: no-repeat;
21.1.8. background-repeat: repeat-x;
21.1.9. background-repeat