1. Atributos
1.1. Los atributos pueden modificar características de las etiquetas.
1.2. Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado.
1.3. Son opcionales, pueden usarse o no.
1.4. Se añaden en la etiqueta de apertura.
2. Estructura básica de una página web HTML
2.1. Para crear un documento HTML podemos usar cualquier editor de texto plano
2.2. Componentes básicos de la estructura HTML:
2.2.1. DOCTYPE: Indica qué tipo de archivo es.
2.2.2. <html>: Etiqueta raíz que contiene el resto de etiquetas.
2.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.
2.2.4. <meta charset="UTF-8" />: Indica la codificación usada
2.2.5. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.
3. Tipos de elementos
3.1. En bloque
3.1.1. Ocupan todo el ancho del elemento que los contiene
3.1.2. Los elementos van tras de ellos se visualizan debajo
3.1.3. Pueden contener otros elementos de bloque
3.2. En línea
3.2.1. Ocupan sólo el ancho necesario
3.2.2. Se sitúan uno al lado del otro hasta ocupar el ancho disponible
3.2.3. Sólo pueden contener otros elementos en línea, texto e imágenes.
4. Listas
4.1. <li> Representa cada uno de los items de la lista </li>
4.2. <ol> Representa una lista ordenada </ol>
4.3. <ul> Representa una lista sin orden </ul>
4.4. Listas ordenadas
4.4.1. Reversed : invierte el orden de la lista
4.4.2. Start: establece en qué número o letra empieza la lista. Ejemplo: <ol start=“2”>
4.4.3. Type: indica el tipo de numeral a utilizar. Ejemplo: <ol type=“a”> o <ol type=“i”>
4.5. Listas anidadas
4.5.1. Una lista puede estar dentro de otra lista
4.5.2. La lista interna formaría parte de un ítem
4.5.2.1. de la lista externa
5. Tablas
5.1. Son un elemento de bloque
5.2. Se crean con la etiqueta <table>
5.3. Las filas se crean con la etiqueta <tr> (table row)
5.4. Las filas contienen celdas que se crean con la etiqueta <td>
5.5. Atributo border: se usa indicar el ancho de los bordes de la tabla
5.6. Unir celdas
5.6.1. Atributos de la etiqueta <td> para unir celdas:
5.6.1.1. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas
5.6.1.2. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas
6. Enlaces
6.1. Son vínculos a otras páginas
6.2. Pueden ser:
6.2.1. Locales (dentro del sitio web)
6.2.2. Externos (en otro sitio web)
6.3. Etiqueta <a>
6.4. Atributos:
6.4.1. href : URL de la página de destino
6.4.2. Target="_blank" : abre la página de destino en una nueva pestaña
7. Colocación del código CSS
7.1. El código CSS se puede vincular a una estructura HTML de tres formas diferentes
7.1.1. En un atributo HTML, con el atributo style
7.1.2. Con la etiqueta <style>
7.1.3. En un archivo independiente
8. Colores
8.1. Propiedades
8.1.1. color: modifica el color de texto
8.1.2. background-color: modifica el color de fondo
8.2. RGB
8.2.1. colores formados mezclado estos 3 indicando proporción de cada uno
9. Tamaño
9.1. display: block. Visualizar como elemento de bloque.
9.2. display: inline. Visualizar como elemento en línea.
9.3. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo
9.4. width, height, max-width, max-height, min-width y min-height
10. Márgenes
10.1. margin: distancia con otros elementos que lo rodean
10.2. padding: margen interno entre el elemento y su contenido
10.3. Tanto el margin como el padding se suma al width
10.4. Márgenes individuales
10.4.1. Para modificar márgenes externos (margin) o internos (padding) podemos:
10.4.1.1. añadir -left –right –top –bottom
11. Imagen de fondo
11.1. propiedades:
11.1.1. background-image : url ('imagen.png');
11.1.2. background-image : url ('../imagen.png');
11.1.3. background-position: left top; /* posición horizontal y vertical */
11.1.4. background-position: center center;
11.1.5. background-position: right bottom;
11.1.6. background-repeat: repeat;
11.1.7. background-repeat: no-repeat;
11.1.8. background-repeat: repeat-x;
11.1.9. background-repeat
12. 1. Estructura de un documento web: HTML
12.1. herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos.
12.2. Puede venir acompañado de dos lenguajes
12.2.1. CSS
12.2.2. JavaScript
13. Etiquetas
13.1. Tienen un nombre que va entre los símbolos < y >.
13.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >.
13.3. Las etiquetas sin contenido pueden llevar el símbolo / antes de >
13.4. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas.
14. Etiquetas básicas
14.1. <div> Divide la página en secciones </div>
14.2. <p> Párrafo </p>
14.3. <span> Sirve para agrupar elementos en línea </span>
14.4. <u> Subrayado </u>
14.5. <em> Cursiva o énfasis </em>
14.6. <strong> Negrita o destacado </strong>
14.7. <sub> Subíndice </sub>
14.8. <br> Salto de línea
14.9. <hr> Línea de separación horizontal
15. Encabezados
15.1. Son títulos para las diferentes secciones de una página web
15.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>
15.3. El número indica la importancia del título (tamaño). El 1 el más importante.
16. Imágenes
16.1. Son un elemento en línea
16.2. Etiqueta: <img>
16.3. Atributos:
16.3.1. Alt: texto alternativo
16.3.2. Src: ruta de la imagen a visualizar
17. 3. Personalización del estilo: CSS
17.1. lenguaje utilizado para definir el modo en que se presenta el código HTML de una página web
17.2. Permite separar la estructura (HTML) de la presentación (CSS).
17.3. Ventajas de usar archivo CSS:
17.3.1. Con un solo archivo CSS podemos modificar varias páginas HTML
17.3.2. A la hacer cambios sólo se modifica en el archivo CSS (y no en todas las páginas HTML)
18. Selectores básicos
18.1. determinan qué elementos HTML se verán afectados por el código CSS
18.2. Tipos de selectores:
18.2.1. Por tipo : Etiqueta HTML.
18.2.2. class: (varios elementos)
18.2.3. id: (un elemento)
18.3. Prioridad
18.3.1. 1. Id 2. Clase 3. Tipo