Unidad 3:
by Eloy Garcia
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
1.5. Ejemplos:
1.6. <img src="foto1234.jpg" />
1.7. <img src="foto2134.jpg" alt="Dia soleado en el campo" />
1.8. <p align="right">Párrafo alineado a la derecha.</p>
2. Estructura básica de una página web HTML:
2.1. Para crear un documento HTML podemos usar cualquier editor de texto plano. Por ejemplo:
2.2. Bloc de notas
2.3. Notepad++: Resalta con colores las etiquetas HTML y podemos abrir varios documentos en pestañas.
2.4. Componentes básicos de la estructura HTML:
2.5. DOCTYPE: Indica qué tipo de archivo es. Ejemplo: <!DOCTYPE html>
2.6. <html>: Etiqueta raíz que contiene el resto de etiquetas
2.7. <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.8. <meta charset="UTF-8" />: Indica la codificación usada
2.9. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.
3. Estructura básica de una página web HTML (II):
3.1. Estructura básica: <!DOCTYPE html> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> Contenido de la página </body> </html>
4. Etiquetas básicas:
4.1. <div> Divide la página en secciones </div>
4.2. <p> Párrafo </p>
4.3. <span> Sirve para agrupar elementos en línea </span>
4.4. <u> Subrayado </u>
4.5. <em> Cursiva o énfasis </em>
4.6. <strong> Negrita o destacado </strong>
4.7. <sub> Subíndice </sub>
4.8. <br> Salto de línea
4.9. <hr> Línea de separación horizontal
5. Listas ordenadas:
5.1. Las listas ordenadas tienen varios atributos propios:
5.2. Reversed : invierte el orden de la lista
5.3. Start: establece en qué número o letra empieza la lista. Ejemplo: <ol start=“2”>
5.4. Type: indica el tipo de numeral a utilizar. Ejemplo: <ol type=“a”> o <ol type=“i”>
6. Encabezados:
6.1. Los encabezados son títulos para las diferentes secciones de una página web
6.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>
6.3. El número indica la importancia del título (tamaño). El 1 el más importante.
7. Unir celdas:
7.1. Atributos de la etiqueta <td> para unir celdas:
7.2. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas
7.3. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas
7.4. Ejemplo 1:
7.5. <td colspan="2">esta celda ocupa dos columnas</td>
7.6. Ejemplo 2:
7.7. <td rowspan="3">esta celda ocupa tres filas</td>
8. Enlaces:
8.1. Son vínculos a otras páginas
8.2. Pueden ser:
8.3. Locales (dentro del sitio web)
8.4. Externos (en otro sitio web)
8.5. Etiqueta <a>
8.6. Atributos:
8.7. href : URL de la página de destino
8.8. Target="_blank" : abre la página de destino en una nueva pestaña
8.9. Ejemplos:
8.10. <a href="http://www.calasancioalicante.org">Calasancio Alicante</a>
8.11. <a href="otrapagina.html"></a>
9. Colocación del código CSS:
9.1. El código CSS se puede vincular a una estructura HTML de tres formas diferentes:
9.2. En un atributo HTML, con el atributo style <div style="width: 100px; height: 100px; background-color: red;"></div>
9.3. Con la etiqueta <style> <style type="text/css"> div {
9.4. width: 100px; height: 100px; background-color:red; } </style>
9.5. En un archivo independiente: <link rel="stylesheet" href="css/estilo.css" type="text/css" />
10. Colores:
10.1. Propiedades:
10.2. color: modifica el color de texto
10.3. background-color: modifica el color de fondo
10.4. Nombres: red, orange, blue, brown, cyan, black, white, gray, darkgray... más colores
10.5. RGB (Red Green Blue): colores formados mezclado estos 3 indicando proporción de cada uno:
10.6. #FF0000 : tres números hexadecimales (rojo)
10.7. rgb(255,0,0) : decimales de 0 a 255
10.8. rgb(100%,0,0) : porcentajes
10.9. 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 (0 = transparente, 1 = opaco
11. Tamaño:
11.1. Recuerda
11.2. Tamaño horizontal por defecto:
11.3. Elementos de bloque: ocupan todo el ancho disponible
11.4. Elementos en línea: ocupan en función de su espacio
11.5. Tamaño vertical por defecto: ambos casos depende de su contenido
11.6. Con CSS podemos modificar el tamaño de la mayoría de elementos
11.7. display: block. Visualizar como elemento de bloque.
11.8. display: inline. Visualizar como elemento en línea.
11.9. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo
11.10. width, height, max-width, max-height, min-width y min-height
11.11. Sus valores se fijan en pixeles o en porcentajes
12. Márgenes:
12.1. margin: distancia con otros elementos que lo rodean
12.2. padding: margen interno entre el elemento y su contenido
12.3. Tanto el margin como el padding se suma al width
13. Posicionamiento:
13.1. position: static -> posicionamiento por defecto
13.2. position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom
13.3. position: absolute -> posición dentro del documento
13.4. Position: sticky -> sitúa al elemento basado en el scroll
13.5. Position: fixed -> posición dentro de la ventana del navegador
14. . Estructura de un documento web: HTML:
14.1. HTML -> HyperText Markup Language (Lenguaje de marcas de hipertexto)
14.2. Hipertexto: "herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos."
14.3. HTML se usa para crear la estructura de las páginas web.
14.4. No se considera un lenguaje de programación.
14.5. Puede venir acompañado de dos lenguajes:
14.6. CSS: define el formato de la página web
14.7. JavaScript: lenguaje de programación, añade dinamismo
15. Etiquetas:
15.1. Tienen un nombre que va entre los símbolos < y >. Ejemplo: <p>
15.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >. Ejemplos:
15.3. <p>Esto es un párrafo</p>
15.4. <strong>Este texto se vería en negrita</strong>
15.5. Las etiquetas sin contenido pueden llevar el símbolo / antes de > Ejemplo:
15.6. <br />
15.7. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas. Ejemplo:
15.8. <p>Todo el texto se vería normal, excepto <strong>este texto</strong><p>
16. Tipos de elementos:
16.1. Ocupan todo el ancho del elemento que los contiene Los elementos van tras de ellos se visualizan debajo Pueden contener otros elementos de bloque Ejemplos: <p> párrafo <div> bloque <ul> lista sin orden <ol> lista ordenada <table> tabla Ver ejemplo (pulsar 'run')
17. Listas:
17.1. <li> Representa cada uno de los items de la lista </li>
17.2. <ol> Representa una lista ordenada </ol>
17.3. <ul> Representa una lista sin orden </ul>
17.4. Sintaxis:
18. Listas anidadas:
18.1. Una lista puede estar dentro de otra lista La lista interna formaría parte de un ítem de la lista externa Ejemplo
19. Tablas:
19.1. Las tablas son un elemento de bloque
19.2. Se crean con la etiqueta <table>
19.3. Las filas se crean con la etiqueta <tr> (table row)
19.4. Las filas contienen celdas que se crean con la etiqueta <td>
19.5. Atributo border: se usa indicar el ancho de los bordes de la tabla
19.6. Ejemplo:
19.7. <table>
19.8. <tr>
19.9. <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td>
19.10. </tr>
19.11. <tr>
19.12. <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td>
19.13. </tr>
19.14. </table>
20. Imágenes:
20.1. Las imágenes son un elemento en línea
20.2. Etiqueta: <img>
20.3. Atributos:
20.4. Alt: texto alternativo
20.5. Src: ruta de la imagen a visualizar. Generalmente las imágenes se almacenan en una carpeta diferente a la de las páginas. Ejemplos:
20.6. Imagen.jpg : la imagen se encuentra en la misma carpeta de la página
20.7. Img/imagen.jpg : la imagen se encuentra dentro de la carpeta Img
20.8. ../imagen.jpg : la imagen se encuentra en la carpeta superior o padre
20.9. Ejemplo:
20.10. <img src="../imagenes/image.jpg" alt="bosque" />
21. Personalización del estilo: CSS:
21.1. CSS es el lenguaje utilizado para definir el modo en que se presenta el código HTML de una página web
21.2. Permite separar la estructura (HTML) de la presentación (CSS).
21.3. Ventajas de usar archivo CSS:
21.4. Con un solo archivo CSS podemos modificar varias páginas HTML
21.5. A la hacer cambios sólo se modifica en el archivo CSS (y no en todas las páginas HTML)
22. Selectores básicos:
22.1. Los selectores determinan qué elementos HTML se verán afectados por el código CSS
22.2. Tipos de selectores:
22.3. Por tipo : Etiqueta HTML. Ejemplo: p { color: green; }
22.4. class: (varios elementos) .botonesRojos { background-color: red;}
22.5. id: (un elemento) #primerParrafo { color: gray; }
22.6. En caso de que un elemento esté afectado por varios selectores, la prioridad es:
22.7. Id
22.8. Clase
22.9. Tipo
22.10. <p id="primerParrafo" class="botonesRojos">Lorem ipsum</p>
23. Propiedades del texto:
23.1. text-align : left, right, center o justify
23.2. text-decoration : underline, none, overline o line-through
23.3. text-transform : uppercase, lowercase y capitalize
23.4. font-size : 12px, 12pt o x-small, small, mediuum, large o x-large
23.5. font-family : serif, sans-serif, monospace, Verdana, Helvetica, etc.
23.6. font-style : italic o normal
23.7. font-weight : bold o normal
23.8. text-shadow : -4px 2px 5px grey; 4px a la izquierda, 2px hacia abajo, 5px difuminado y color de sombra.
24. Bordes:
24.1. border-width : se establece en pixels
24.2. Border-left-width, border-right-width, border-top-width, border-bottom-width
24.3. border-style: solid, dashed (línea discontinua), dotted, double (línea doble)
24.4. border-left-style, border-right-style, border-top-style, border-bottom-style
24.5. border-color:
24.6. border: 2px solid red;
24.7. border-radius: radio del borde en px
25. Márgenes individuales:
25.1. Para modificar márgenes externos (margin) o internos (padding) podemos:
25.2. añadir -left –right –top –bottom
25.3. Ejemplo: margin-left: 10px;
25.4. Establecer cada una de las medidas en orden: arriba derecha abajo izquierda. Ejemplo:
25.5. Ejemplo: margin: 10px 5px 30px 5px;
26. Imagen de fondo:
26.1. Podemos fijar una imagen de fondo en un elemento usando estas propiedades:
26.2. background-image : url ('imagen.png');
26.3. background-image : url ('../imagen.png');
26.4. background-position: left top; /* posición horizontal y vertical */
26.5. background-position: center center;
26.6. background-position: right bottom;
26.7. background-repeat: repeat;
26.8. background-repeat: no-repeat;
26.9. background-repeat: repeat-x;
26.10. background-repeat: repeat-y;