1. Personalización del estilo: CSS
1.1. CSS es el lenguaje utilizado para definir el modo en que se presenta el código HTML de una página web
1.2. Permite separar la estructura (HTML) de la presentación (CSS).
1.3. Ventajas de usar archivo CSS
1.3.1. Con un solo archivo CSS podemos modificar varias páginas HTML
1.3.2. A la hacer cambios sólo se modifica en el archivo CSS
1.4. 9.1 Colocación del código CSS
1.4.1. El código CSS se puede vincular a una estructura HTML de tres formas diferentes
1.4.1.1. En un atributo HTML, con el atributo style
1.4.1.1.1. <div style="width: 100px; height: 100px; background-color: red;"></div>
1.4.1.2. Con la etiqueta <style>
1.4.1.2.1. <style type="text/css"> div { width: 100px; height: 100px; background-color:red; } </style>
1.4.1.3. En un archivo independiente
1.4.1.3.1. <link rel="stylesheet" href="css/estilo.css" type="text/css" />
1.5. 9.2 Selectores básicos
1.5.1. Los selectores determinan qué elementos HTML se verán afectados por el código CSS
1.5.2. Tipos de selectores
1.5.2.1. Por tipo : Etiqueta HTML
1.5.2.1.1. p { color: green; }
1.5.2.2. De clase: (varios elementos)
1.5.2.2.1. .botonRojo { background-color: red;}
1.5.2.3. De id: (un elemento)
1.5.2.3.1. #primerParrafo { color: grey; }
1.5.3. En caso de que un elemento esté afectado por varios selectores, la prioridad es
1.5.3.1. Id
1.5.3.2. Clase
1.5.3.3. Tipo
1.6. 9.3 Colores
1.6.1. Propiedades
1.6.1.1. color: modifica el color de texto
1.6.1.2. background-color: modifica el color de fondo
1.6.2. Nombres: red, orange, blue, brown, cyan, black, white, grey, darkgrey...
1.6.3. RGB (Red Green Blue): colores formados mezclado estos 3 indicando proporción de cada uno
1.6.3.1. #FF0000 : tres números hexadecimales (rojo)
1.6.3.2. rgb(255,0,0) : decimales de 0 a 255
1.6.3.3. rgb(100%,0,0) : porcentajes
1.6.3.4. rgba(255,0,0,0.5) : tres números de 0 a 255 y un número de 0 a 1 que indica el nivel de tranparencia, siendo 0 = transparente y 1 = opaco
1.6.4. Ejemplo
1.6.4.1. HTML
1.6.4.1.1. <div id="ejemploColor">Hola</div>
1.6.4.2. CSS
1.6.4.2.1. #ejemploColor { color:cyan; background-color: rgb(0, 150, 255); }
1.7. 9.4 Texto
1.7.1. text-align : left, right, center o justify
1.7.2. text-decoration : underline, none, overline o line-through
1.7.3. text-transform : uppercase, lowercase y capitalize
1.7.4. font-size : 12px, 12pt o x-small, small, mediuum, large o x-large
1.7.5. font-family : serif, sans-serif, monospace, Verdana, Helvetica, etc.
1.7.6. font-style : italic o normal
1.7.7. font-weight : bold o normal
1.7.8. text-shadow : -4px 2px 5px grey; 4px a la izquierda, 2px hacia abajo, 5px difuminado y color de sombra.
1.8. 9.5 Tamaño
1.8.1. Horizontal por defecto
1.8.1.1. Elementos de bloque: ocupan todo el ancho disponible
1.8.1.2. Elementos en línea: ocupan en función de su espacio
1.8.2. Vertical por defecto: ambos casos depende de su contenido
1.8.3. Con CSS podemos modificar el tamaño de la mayoría de elementos
1.8.4. display: block. Visualizar como elemento de bloque
1.8.5. display: inline. Visualizar como elemento en línea
1.8.6. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo
1.8.7. width, height, max-width, max-height, min-width y min-height
1.8.7.1. Sus valores se fijan en pixeles o en porcentajes
1.9. 9.6 Bordes
1.9.1. border-width : se establece en pixels
1.9.1.1. Border-left-width, border-right-width, border-top-width, border-bottom-width
1.9.2. border-style: solid, dashed (línea discontinua), dotted, double (línea doble)
1.9.2.1. border-left-style, border-right-style, border-top-style, border-bottom-style
1.10. 9.7 Márgenes
1.10.1. Margin: distancia con otros elementos que lo rodean
1.10.2. Padding: margen interno entre el elemento y su contenido
1.10.3. Tanto el margin como el padding se suma al width
1.10.4. 9.7.1 Márgenes individuales
1.10.4.1. Para modificar márgenes externos (margin) o internos (padding) podemos
1.10.4.1.1. Añadir -left –right –top –bottom
1.10.4.1.2. Establecer cada una de las medidas en orden: arriba derecha abajo izquierda
1.11. 9.8 Posicionamiento
1.11.1. Position: static -> posicionamiento por defecto
1.11.2. Position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom
1.11.3. Position: absolute -> posición dentro del documento
1.11.4. Position: sticky -> sitúa al elemento basado en el scroll
1.11.5. Position: fixed -> posición dentro de la ventana del navegador
1.12. 9.9 Imagen de fondo
1.12.1. Podemos fijar una imagen de fondo en un elemento usando estas propiedades
1.12.1.1. background-image : url ('imagen.png')
1.12.1.2. background-image : url ('../imagen.png')
1.12.1.3. background-position: left top; /* posición horizontal y vertical */
1.12.1.4. background-position: center center
1.12.1.5. background-position: right bottom
1.12.1.6. background-repeat: repeat
1.12.1.7. background-repeat: no-repeat
1.12.1.8. background-repeat: repeat-x
1.12.1.9. background-repeat: repeat-y
2. Publicación de páginas web
2.1. Hostinger
2.1.1. Nos permite
2.1.1.1. Crear un sitio web con nuestras propias páginas
2.1.1.1.1. Subiendo nuestras páginas por FTP
2.1.1.1.2. Subiendo nuestras páginas desde la propia página
2.1.1.2. Crear un blog con WordPress
2.1.1.3. Crear un sitio desde la página de Hostinger.es
3. Estructura de un documento web: HTML
3.1. HTML -> HyperText Markup Language (Lenguaje de marcas de hipertexto)
3.1.1. Hipertexto: "herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos."
3.1.2. HTML se usa para crear la estructura de las páginas web
3.1.3. No se considera un lenguaje de programación
3.1.4. Puede venir acompañado de dos lenguajes
3.1.4.1. CSS: define el formato de la página web
3.1.4.2. JavaScript: lenguaje de programación, añade dinamismo
3.2. 8.1 Etiquetas
3.2.1. Tienen un nombre que va entre los símbolos < y >
3.2.2. Algunas tienen contenido y para delimitarlo se usa el nombre de la etiqueta entre </ y >
3.2.2.1. <p>Esto es un párrafo</p>
3.2.2.2. <strong>Este texto se vería en negrita</strong>
3.2.3. Las que no llevan contenido pueden llevar el símbolo / antes de >
3.2.3.1. <br />
3.2.4. Algunas pueden contener a otras (las internas debe cerrarse antes de las externas)
3.2.4.1. <p>Todo el texto se vería normal, excepto <strong>este texto</strong><p>
3.3. 8.2 Atributos
3.3.1. Los atributos pueden modificar características de las etiquetas
3.3.2. Tienen un nombre que indica que propiedad modifican, y un valor entrecomillado
3.3.3. Son opcionales, pueden usarse o no
3.3.4. Se añaden en la etiqueta de apertura
3.3.5. Ejemplos
3.3.5.1. <img src="foto1234.jpg" />
3.3.5.2. <img src="foto2134.jpg" alt="Dia soleado en el campo" />
3.3.5.3. <p align="right">Párrafo alineado a la derecha.</p>
3.4. 8.3 Estructura básica de una página HTML
3.4.1. Para crear un documento HTML podemos usar cualquier editor de texto plano
3.4.1.1. Bloc de notas
3.4.1.2. Notepad++: Resalta con colores las etiquetas HTML y podemos abrir varios documentos en pestañas
3.4.2. Componentes básicos de la estructura HTML
3.4.2.1. DOCTYPE: Indica qué tipo de archivo es
3.4.2.1.1. <!DOCTYPE html>
3.4.2.2. <html>: Etiqueta raíz que contiene el resto de etiquetas
3.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
3.4.2.4. <meta charset="UTF-8" />: Indica la codificación usada
3.4.2.5. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web
3.5. 8.4 Tipos de elementos
3.5.1. Elementos de bloque
3.5.1.1. Ocupan todo el ancho del elemento que los contiene
3.5.1.2. Los elementos van tras de ellos se visualizan debajo
3.5.1.3. Pueden contener otros elementos de bloque
3.5.1.4. Ejemplos
3.5.1.4.1. <p> párrafo
3.5.1.4.2. <div> bloque
3.5.1.4.3. <ul> lista sin orden
3.5.1.4.4. <ol> lista ordenada
3.5.1.4.5. <table> tabla
3.5.2. Elementos en línea
3.5.2.1. Ocupan sólo el ancho necesario
3.5.2.2. Se sitúan uno al lado del otro hasta ocupar el ancho disponible
3.5.2.3. Sólo pueden contener otros elementos en línea, texto e imágenes
3.5.2.4. Ejemplos
3.5.2.4.1. <img> imagen
3.5.2.4.2. <a> enlace
3.5.2.4.3. <button> botón
3.5.2.4.4. <strong> texto resaltado
3.6. 8.5 Etiquetas básicas
3.6.1. División
3.6.1.1. <div> Divide la página en secciones </div>
3.6.2. Párrafo
3.6.2.1. <p> Párrafo </p>
3.6.3. Agrupar elementos en línea
3.6.3.1. <span> Sirve para agrupar elementos en línea </span>
3.6.4. Subrayado
3.6.4.1. <u> Subrayado </u>
3.6.5. Cursiva
3.6.5.1. <em> Cursiva </em>
3.6.6. Negrita
3.6.6.1. <strong> Negrita </strong>
3.6.7. Subíndice
3.6.7.1. <sub> Subíndice </sub>
3.6.8. Superíndice
3.6.8.1. <sup> Superíndice </sup>
3.6.9. Salto de línea
3.6.9.1. <br> Salto de línea
3.6.10. Separación horizontal
3.6.10.1. <hr> Línea de separación horizontal
3.7. 8.6 Listas
3.7.1. <li> Representa cada uno de los items de la lista </li>
3.7.2. <ol> Representa una lista ordenada </ol>
3.7.3. <ul> Representa una lista sin orden </ul>
3.7.4. Ejemplo
3.7.4.1. <ul> <li> Item </li> <li> Item </li> <li> Item </li> </ul>
3.7.4.2. <ol> <li> Item </li> <li> Item </li> <li> Item </li> </ol>
3.7.5. 8.6.1 Listas ordenadas
3.7.5.1. Tienen varios atributos propios
3.7.5.1.1. Reversed : invierte el orden de la lista
3.7.5.1.2. Start: establece en qué número o letra empieza la lista
3.7.5.1.3. Type: indica el tipo de numeral a utilizar
3.7.6. 8.6.2 Listas aninadas
3.7.6.1. Una lista puede estar dentro de otra lista
3.7.6.2. La lista interna formaría parte de un ítem de la lista externa
3.7.6.3. Ejemplo
3.7.6.3.1. <ol> <li>Frutas <ol> <li>Manzanas</li> <li>Peras</li> </ol> </li> <li>Verduras <ol> <li>Judías</li> <li>Espinacas</li> </ol> </li> </ol>
3.8. 8.7 Encabezados
3.8.1. Los encabezados son títulos para las diferentes secciones de una página web
3.8.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>
3.8.3. El número indica la importancia del título (tamaño), siendo el 1 el más importante
3.9. 8.8 Tablas
3.9.1. Las tablas son un elemento de bloque
3.9.2. Se crean con la etiqueta <table>
3.9.3. Las filas se crean con la etiqueta <tr>
3.9.4. Las filas contienen celdas que se crean con la etiqueta <td>
3.9.5. Atributo border: se usa indicar el ancho de los bordes de la tabla
3.9.6. Ejemplo
3.9.6.1. <table> <tr> <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td> </tr> <tr> <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td> </tr> </table>
3.9.7. 8.8.1 Unir celdas
3.9.7.1. Atributos de la etiqueta <td> para unir celdas
3.9.7.1.1. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas
3.9.7.1.2. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas
3.10. 8.9 Imágenes
3.10.1. Las imágenes son un elemento en línea
3.10.2. Etiqueta: <img>
3.10.3. Atributos
3.10.3.1. Alt: texto alternativo
3.10.3.2. Src: ruta de la imagen a visualizar. Las imágenes se almacenan en una carpeta diferente a la de las páginas.
3.10.3.2.1. Ejemplos
3.11. 8.10 Enlaces
3.11.1. Son vínculos a otras páginas
3.11.2. Pueden ser
3.11.2.1. Locales (dentro del sitio web)
3.11.2.2. Externos (en otro sitio web)
3.11.3. Etiqueta <a>
3.11.4. Atributos
3.11.4.1. href : URL de la página de destino
3.11.4.2. Target="_blank" : abre la página de destino en una nueva pestaña