├── Curso HTML y CSS ├── CSS │ ├── 2 Ejemplos de Webs │ │ ├── 1 free-code-camp │ │ │ ├── img │ │ │ │ ├── gatos.jpg │ │ │ │ └── lasagna.jpg │ │ │ ├── index.html │ │ │ ├── style.css │ │ │ └── unidades relativas y absolutas │ │ │ │ ├── index.html │ │ │ │ └── style.css │ │ └── 2 midudev │ │ │ ├── 1 Curso de CSS desde cero para principiantes │ │ │ ├── index.html │ │ │ └── style.css │ │ │ └── 2 Guía de CSS Flexbox para aprender de forma sencilla │ │ │ ├── index.html │ │ │ ├── indexFlex.html │ │ │ ├── indexSticky.html │ │ │ ├── style.css │ │ │ ├── styleFlex.css │ │ │ └── styleSticky.css │ └── README.md └── HTML │ ├── 1 Curso │ ├── 0 Introducción │ │ ├── introduccion.html │ │ ├── prueba │ │ │ └── prueba-anchor.html │ │ └── x.png │ ├── 1 Etiquetas Head │ │ ├── 1-etiqueta-head.html │ │ ├── 2-etiqueta-meta.html │ │ ├── 3-etiqueta-link.html │ │ ├── 4-etiquetas-redes-sociales.html │ │ └── 5-etiquetas-precarga.html │ ├── 2 Etiquetas Body │ │ ├── 01-etiquetas-agrupacion │ │ │ ├── 01-etiquetas-agrupacion.html │ │ │ ├── 02-etiqueta-div.html │ │ │ ├── 03-etiquetas-ul-ol.html │ │ │ ├── 04-etiqueta-blockquote.html │ │ │ ├── 05-etiqueta-pre.html │ │ │ ├── 06-etiqueta-dl.html │ │ │ └── 07-etiqueta-figure.html │ │ ├── 02-etiquetas-multimedia │ │ │ ├── 01-intro-etiquetas-multimedia.html │ │ │ ├── 02-etiqueta-img.html │ │ │ ├── 03-etiqueta-picture-source.html │ │ │ ├── 04-etiqueta-video.html │ │ │ ├── 05-etiqueta-audio.html │ │ │ ├── 06-etiqueta-track.html │ │ │ ├── 07-etiqueta-iframe.html │ │ │ └── img │ │ │ │ └── aspect-ratio.png │ │ ├── 03-etiquetas-texto │ │ │ ├── 01-etiquetas-semanticas-texto.html │ │ │ ├── 02-enlaces-hipervinculos.html │ │ │ ├── 03-etiqueta-a.html │ │ │ ├── 04-etiqueta-strong.html │ │ │ ├── 05-etiqueta-em.html │ │ │ ├── 06-etiqueta-mark.html │ │ │ ├── 07-etiqueta-s.html │ │ │ ├── 08-etiqueta-span.html │ │ │ ├── 09-etiquetas-q-cite.html │ │ │ ├── 10-etiquetas-sup-sub.html │ │ │ ├── 11-etiqueta-small.html │ │ │ ├── 12-etiquetas-abbr-dfn.html │ │ │ ├── 13-etiquetas-wbr-br.html │ │ │ ├── 14-etiquetas-kbd-samp.html │ │ │ ├── 15-etiquetas-time-data.html │ │ │ ├── 16-etiquetas-code.html │ │ │ └── 17-etiquetas-ins-del.html │ │ ├── 04-etiquetas-semánticas │ │ │ ├── 01-etiquetas-semanticas-seccion.html │ │ │ ├── 02-etiqueta-article.html │ │ │ ├── 03-etiqueta-nav.html │ │ │ ├── 04-etiquetas-header-footer.html │ │ │ ├── 05-etiqueta-search.html │ │ │ ├── 06-etiqueta-section.html │ │ │ ├── 07-etiquetas-h1-a-h6.html │ │ │ └── 08-etiqueta-address.html │ │ ├── 05-etiquetas-tablas │ │ │ ├── 01-etiqueta-table.html │ │ │ ├── 02-tablas-celdas-irregulares.html │ │ │ ├── 03-organizacion-tablas.html │ │ │ └── 04-columnas-tabas.html │ │ ├── 06-etiquetas-formularios │ │ │ ├── 01-resumen-formularios.html │ │ │ ├── 02-etiqueta-form.html │ │ │ ├── 03-etiqueta-input.html │ │ │ ├── 04-etiqueta-textarea.html │ │ │ ├── 05-etiqueta-input-numeros.html │ │ │ ├── 06-etiqueta-input-fechas.html │ │ │ ├── 07-etiqueta-input-casillas.html │ │ │ ├── 08-etiqueta-input-colores.html │ │ │ ├── 09-etiqueta-select.html │ │ │ ├── 10-etiqueta-datalist.html │ │ │ ├── 11-etiqueta-input-ficheros.html │ │ │ ├── 12-organizacion-campos.html │ │ │ ├── 13-etiqueta-progress.html │ │ │ ├── 14-etiqueta-meter.html │ │ │ ├── 15-etiqueta-input-submit.html │ │ │ └── Validaiones de Formularios │ │ │ │ ├── 01-introduccion-validaciones.html │ │ │ │ ├── 02-validaciones-basicas-html5.html │ │ │ │ └── 03-atributo-pattern.html │ │ ├── 07-etiquetas-interactivas │ │ │ ├── 01-etiqueta-details.html │ │ │ ├── 02-popovers-elementos-emergentes.html │ │ │ ├── 03-etiqueta-dialog.html │ │ │ ├── 04-eventos-html.html │ │ │ ├── 05-atributo-contenteditable.html │ │ │ └── 06-atributo-hidden.html │ │ ├── Información añadida │ │ │ ├── 1 Etiquetas desaconsejadas │ │ │ │ └── index.html │ │ │ ├── 2 Anatomía de una página web │ │ │ │ ├── index.html │ │ │ │ ├── script.js │ │ │ │ └── style.css │ │ │ └── 3 Caracteres especiales │ │ │ │ └── index.html │ │ └── img │ │ │ └── x.ico │ └── 3 Otras etiquetas │ │ └── 01-etiquetas-scripting │ │ ├── 01-etiqueta-script.html │ │ ├── 02-atributos-defer-async.html │ │ ├── 03-modulos-javascript-esm.html │ │ └── 04-bloque-datos-desconocido.html │ ├── 2 Ejemplos de webs │ ├── 1 soy-dalto │ │ ├── cuenta.html │ │ ├── index.html │ │ └── nosotros.html │ └── 2 midudev │ │ ├── index.html │ │ └── persona-random.png │ └── README.md ├── LICENSE ├── Lenguaje de Marcas ├── CSS │ ├── Ejercicio 1 │ │ └── Ejercicio1CSS.html │ ├── Ejercicio 10 │ │ └── Ejercicio 10CSS.html │ ├── Ejercicio 11 │ │ └── Ejercicio11CSS.html │ ├── Ejercicio 12 │ │ └── Ejercicio12_CSS.html │ ├── Ejercicio 13 │ │ ├── Ejercicio13_CSS.html │ │ └── img │ │ │ ├── fondo_azul.jpg │ │ │ └── sunset.jpg │ ├── Ejercicio 14 │ │ ├── Ejercicio14.html │ │ └── img │ │ │ ├── catedrais.jpg │ │ │ ├── cies.jpg │ │ │ └── ribeira_sacra.jpg │ ├── Ejercicio 15 │ │ └── Ejercicio15CSS.html │ ├── Ejercicio 16 │ │ └── Ejercicio16CSS.html │ ├── Ejercicio 2 │ │ ├── Ejercicio2CSS.html │ │ └── estilos.css │ ├── Ejercicio 3 │ │ └── Ejercicio3CSS.html │ ├── Ejercicio 4 │ │ ├── Ejercicio4CSSenlinea.html │ │ ├── Ejercicio4CSSexterno.html │ │ ├── croquetas.jpg │ │ ├── css │ │ │ └── estilosCSS.css │ │ ├── mexico.jpg │ │ ├── paris.jpg │ │ ├── pasta.jpg │ │ ├── roma.jpg │ │ └── tacos.jpg │ ├── Ejercicio 5 │ │ ├── Ejercicio5CSS1.html │ │ ├── Ejercicio5CSS2.html │ │ ├── Ejercicio5CSS3.html │ │ └── Ejercicio5CSS4.html │ ├── Ejercicio 6 │ │ ├── Ejercicio6CSS.html │ │ └── estilosSolucion.css │ ├── Ejercicio 7 │ │ └── Ejercicio7CSS.html │ ├── Ejercicio 8 │ │ └── EjercicioCSS8.html │ └── Ejercicio 9 │ │ └── Ejercicio9CSS.html ├── HTML │ ├── Ejercicio 1 │ │ └── Ejercicio1HTML.html │ ├── Ejercicio 10 │ │ └── Ejercicio10HTML.html │ ├── Ejercicio 11 │ │ └── Ejercicio11HTML.html │ ├── Ejercicio 12 │ │ └── Ejercicio12HTML.html │ ├── Ejercicio 13 │ │ └── Ejercicio13HTML.html │ ├── Ejercicio 2 │ │ └── Ejercicio2HTML.html │ ├── Ejercicio 3 │ │ ├── Ejercicio3HTML.html │ │ └── polynesia.jpg │ ├── Ejercicio 4 │ │ └── Ejercicio4HTML.html │ ├── Ejercicio 5 │ │ ├── Ejercicio5ConRecreoHTML.html │ │ └── Ejercicio5SinRecreoHTML.html │ ├── Ejercicio 6 │ │ └── Ejercicio6HTML.html │ ├── Ejercicio 7 │ │ └── Ejercicio7HTML.html │ ├── Ejercicio 8 │ │ ├── 100_ipod.png │ │ ├── 120_ipod.png │ │ └── Ejercicio8HTML.html │ └── Ejercicio 9 │ │ └── Ejercicio9HTML.html └── XML │ ├── 1 Lenguage XML │ ├── Ejercicio 1 │ │ └── Ejercicio1XML.xml │ ├── Ejercicio 2 │ │ ├── EjercicioXML2A.xml │ │ └── EjercicioXML2B.xml │ ├── Ejercicio 3 │ │ └── EjercicioXML3.xml │ └── Ejercicio 4 │ │ └── Ejercicio4.1_4XML.xml │ ├── 2 Validación de documentos XML │ ├── Ejercicio 1 │ │ ├── Ejercicio 1.pdf │ │ ├── Ejercicio1externo.xml │ │ ├── Ejercicio1interno.xml │ │ └── email.dtd │ ├── Ejercicio 2a │ │ ├── Ejercicio 4-2_2.pdf │ │ └── Ejercicio2aXML.xml │ ├── Ejercicio 2b │ │ ├── Ejercicio2bXML.xml │ │ └── Ejercicio4.2-2b.pdf │ ├── Ejercicio 3 │ │ ├── Ejercicio 3.pdf │ │ ├── Ejercicio3.xml │ │ └── email.dtd │ ├── Ejercicio 4a │ │ ├── Ejercicio 4a.docx.pdf │ │ ├── Ejercicio4a1.xml │ │ ├── Ejercicio4a2.xml │ │ └── Ejercicio4a3.xml │ ├── Ejercicio 4b │ │ ├── Ejercicio 4b.pdf │ │ ├── Ejercicio4b-a.xml │ │ ├── Ejercicio4b-b.xml │ │ ├── Ejercicio4b-c.xml │ │ └── Ejercicio4b-d.xml │ ├── Ejercicio 5 │ │ ├── 07Correa_Segade_Cristina5aXML.xml │ │ ├── 07Correa_Segade_Cristina5bXML.xml │ │ ├── 07Correa_Segade_Cristina_Ejercicio5XML.PDF │ │ ├── Ejercicio5.PDF │ │ └── Tarefa5a.dtd │ ├── Ejercicio 6 │ │ ├── Ejercicio 6.pdf │ │ └── Ejercicio6.xml │ └── Ejercicio 7 │ │ ├── 07Correa_Segade_CristinaEjercicio7XML.xml │ │ ├── Ejercicio 4-2_7.pdf │ │ └── comunidades.dtd │ └── XSD │ └── Ej 1 │ ├── Ejercicio 1 XSD.pdf │ ├── marcadores.xml │ └── marcadores.xsd └── README.md /Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/img/gatos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/img/gatos.jpg -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/img/lasagna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/img/lasagna.jpg -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Aprende HTML y CSS - Curso Desde Cero 7 | 8 | 9 | 10 | 11 | 12 | 16 | 30 | 31 | 32 |

AppDeGatos

33 | 34 |

AppDeGatos 2

35 |

AppDeGatos 3

36 |
37 |

Imágenes de Gatos

38 | 39 |

40 | Haz click aquí para ver más 41 | imágenes de gatos 44 |

45 |
46 | 47 | Un gatito naranja acostado sobre su espalda 53 | 54 |
55 |
56 |

Listas de Gatos

57 |
58 |

Cosas que los gatos aman:

59 | 64 | 69 | Lañana 70 |

Cosas que los gatos odian

71 |
    72 |
  1. Tratamiento antipulgas
    2. 73 |
  2. Truenos
    3. 74 |
  3. Otros gatos
    4. 75 |
76 | Grupo de gatitos en un prado 81 |
82 | Un gatito naranja acostado sobre su espalda 88 |
89 | Grupo de gatitos en un prado 95 |
96 |
97 | 100 |
101 | 104 |
105 | 108 |
109 | 112 |
113 | 116 |
117 | 123 |
124 | 125 |
126 |
127 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/style.css: -------------------------------------------------------------------------------- 1 | /* Según la Guía de Estilos de Google, se debería de dejar una línea en blanco entre cada regla css */ 2 | 3 | /* Variables: https://caniuse.com/css-variables */ 4 | :root { 5 | /* Variables globales */ 6 | --color-crimson: crimson; 7 | --color-amarillo: yellow; 8 | --color-blanco: #fff; 9 | --color-random: green; 10 | } 11 | 12 | body { 13 | background-color: royalblue; 14 | /* 15 | Ponemos el color 2 veces porque hay varios navegadores que aún no aceptan las variables de css (https://caniuse.com/css-variables) 16 | Así que para prevenir que un navegador no interprete las variables, deberíamos de escribirlas así: */ 17 | color: white; 18 | color: var(--color-blanco, white); 19 | } 20 | 21 | h2 { 22 | font-size: 50px; 23 | font-family: "Ephesis", cursive; 24 | } 25 | 26 | h3 { 27 | font-size: 23px; 28 | font-family: "Roboto", sans-serif; 29 | } 30 | 31 | /* 32 | Ponemos el color 2 veces porque hay varios navegadores que aún no aceptan las variables de css (https://caniuse.com/css-variables) 33 | Así que para prevenir que un navegador no interprete las variables. 34 | Podemos quitar el color de respaldo de la variable como vemos en este ejemplo, pero si hay un navegador que interprete variables y no esté bien escrita la variable (haya un error de tipeo), no interpretará bien el código. 35 | Lo ideal es poner: 36 | background-color: crimson; 37 | background-color: var(--color-crimson, crimson); 38 | */ 39 | #contenedor-foto-gato { 40 | background-color: crimson; 41 | background-color: var(--color-crimson); 42 | } 43 | 44 | a { 45 | font-family: "Gemunu Libre", sans-serif; 46 | } 47 | 48 | img { 49 | width: 100px; 50 | } 51 | 52 | #foto-gato { 53 | padding: 15px; 54 | /* Ponemos como respaldo "yellow" por si hay un error de tipeo al escribir la variable: background-color: var(--color-amarillo, yellow); */ 55 | background-color: var(--color-amarillo, yellow); 56 | border-style: solid; 57 | border-width: 2px; 58 | border-color: black; 59 | } 60 | 61 | .imagen-de-gatos { 62 | width: 200px; 63 | border-style: solid dotted dashed double; 64 | border-width: 5px; 65 | /* Podemos redefinir una variable global y se redefinirá para toda la etiqueta en donde la redefinimos y sus hijas */ 66 | --color-random: brown; 67 | border-color: var(--color-random); 68 | } 69 | 70 | .bordes-redondeados { 71 | border-radius: 20px; 72 | } 73 | 74 | .circular { 75 | border-radius: 70%; 76 | } 77 | 78 | .contenedor-listas { 79 | background-color: silver; 80 | } 81 | 82 | ul, 83 | ol { 84 | font-size: xx-small; 85 | color: chocolate; 86 | font-family: Verdana, Geneva, Tahoma, sans-serif; 87 | } 88 | 89 | #lista-gatos-aman { 90 | font-size: 15px; 91 | color: blueviolet; 92 | } 93 | 94 | #lista-gatos-odian { 95 | font-size: 18px; 96 | font-family: Arial, Helvetica, sans-serif; 97 | } 98 | 99 | #foto-gato-solo { 100 | background-color: yellow; 101 | border-width: 2px; 102 | border-color: black; 103 | /* 104 | Es lo mismo poner esto: 105 | padding-top: 20px; 106 | padding-right: 15px; 107 | padding-left: 10px; 108 | padding-bottom: 5px; 109 | 110 | Que poner esto: */ 111 | padding: 20px 15px 5px 10px; 112 | /* 113 | Hay que ponerlo en sentido de las agujas del reloj: arriba, derecha, abajo, izquierda 114 | Si lo pones con solo dos parámetros -> padding: 20px 5px; significa que arriba y abajo tienen 20px, e izquierda y direcha tienen 5px 115 | Si lo pones con tres parámetros -> padding: 20px 5px 15px; significa que arriba tiene 20px, a la izquierda y derecha 5px y abajo 15px 116 | 117 | Ej: 118 | -> arriba y abajo | izquierda y derecha 119 | padding: 5% 10%; 120 | 121 | -> arriba | izquierda y derecha | abajo 122 | padding: 1em 2em 2em; 123 | 124 | -> arriba | derecha | abajo | izquierda 125 | padding: 5px 1em 0 2em; 126 | */ 127 | } 128 | 129 | #foto-gatitos-juntos { 130 | background-color: yellow; 131 | border-width: 4px; 132 | border-color: black; 133 | padding: 20px 5px; 134 | /* Pasa lo mismo con el padding y sus parámetros, que con el margin y sus parámetros correspondientes */ 135 | margin: 15px; 136 | } 137 | 138 | /* Para clases */ 139 | .lista-de-gatos { 140 | color: burlywood; 141 | } 142 | 143 | /* Para ids */ 144 | #titulo-app-gatos { 145 | color: crimson; 146 | } 147 | 148 | /* Selectores de atributo */ 149 | img[src="img/gatos.jpg"] { 150 | width: 500px; 151 | } 152 | 153 | input[type="radio"] { 154 | margin: 50px; 155 | } 156 | 157 | a[href="#"] { 158 | color: fuchsia; 159 | font-weight: bolder; 160 | text-decoration: none; 161 | } 162 | 163 | /* Prioridades: ->

AppDeGatos 3

*/ 164 | #titulo-app-gatos { 165 | color: yellow; 166 | } 167 | 168 | .pruebaPrioridades { 169 | color: purple !important; /* Al final prevalece esta gracias al "!important", si no primero iría ponerle los estilos en línea, luego el estilo del id y por último este */ 170 | } 171 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/unidades relativas y absolutas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Prueba de unidades absolutas y relativas 7 | 8 | 9 | 10 |
11 | 12 |
200px de Ancho
13 |
200pt de Ancho
14 | 15 |
20vw de Ancho
16 |
20em de Ancho
17 |
20rem de Ancho
18 |
20ex de Ancho
19 |
20vmin de Ancho
20 |
20vmax de Ancho
21 |
22 |
23 | 24 |
200px de Ancho
25 |
200pt de Ancho
26 | 27 |
20vw de Ancho
28 |
20em de Ancho
29 |
20rem de Ancho
30 |
20ex de Ancho
31 |
20vmin de Ancho
32 |
20vmax de Ancho
33 |
34 | 35 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/1 free-code-camp/unidades relativas y absolutas/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: black; 3 | padding: 5px; 4 | background-color: yellow; 5 | font-family: Verdana, Geneva, Tahoma, sans-serif; 6 | } 7 | 8 | body>div{ 9 | background-color: rebeccapurple; 10 | margin: 5px 0px 20px; 11 | } 12 | 13 | #contenedor-principal { 14 | font-size: 10px; 15 | } 16 | 17 | #contenedor-secundario { 18 | font-size: 25px; 19 | } 20 | 21 | .rectangulo { 22 | padding: 5px; 23 | margin: 5px; 24 | } 25 | 26 | .px { 27 | background-color: chartreuse; 28 | width: 200px; 29 | } 30 | 31 | .pt { 32 | background-color: aqua; 33 | width: 200pt; 34 | } 35 | 36 | .vw { 37 | background-color: coral; 38 | width: 20vw; 39 | } 40 | 41 | .em { 42 | background-color: violet; 43 | width: 20em; 44 | font-size: 1.5em; 45 | } 46 | 47 | .rem { 48 | background-color: plum; 49 | width: 20rem; 50 | } 51 | 52 | .ex { 53 | background-color: orange; 54 | width: 20ex; 55 | } 56 | 57 | .vmin { 58 | background-color: deepskyblue; 59 | width: 20vmin; 60 | } 61 | 62 | .vmax { 63 | background-color: springgreen; 64 | width: 20vmax; 65 | } 66 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/2 midudev/1 Curso de CSS desde cero para principiantes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Curso de CSS desde cero para principiantes - midudev 7 | 8 | 9 | 10 | 16 |

Elementos en línea:

17 |
18 | Lorem ipsum dolor sit amet 1 19 | Lorem ipsum dolor sit amet 2 20 | Lorem ipsum dolor sit amet 3 21 | Lorem ipsum dolor sit amet 4 22 | Lorem ipsum dolor sit amet 5 23 |
24 |

Elementos en bloque:

25 |
26 |
Div número 1
27 |
Div número 2
28 |
Div número 3
29 |
Div número 4
30 |
Div número 5
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/2 midudev/2 Guía de CSS Flexbox para aprender de forma sencilla/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Guía de CSS Flexbox para aprender de forma sencilla - midudev 7 | 8 | 9 | 10 |
CSS IS AWESOME
11 |
CSS IS AWESOME
12 |
CSS SOMETIMES IS AWESOME
13 |
CSS IS AWESOME
14 |
CSS IS AWESOME
15 |
16 |
17 |
18 | parent container no relative -> absolute top 0, right 0 19 |
20 |
21 | parent container no relative -> absolute top 0, right 50% 22 |
23 |
24 | parent container no relative -> absolute centrado 25 |
26 |
27 | parent container no relative -> fixed bottom 0, right 0 28 |
29 |
30 |
31 |
32 |
33 | parent container relative -> absolute top 0, right 0 34 |
35 |
36 | parent container relative -> absolute top 0, right 50% 37 |
38 |
39 | parent container relative -> absolute centrado 40 |
41 |
42 | parent container relative -> fixed bottom 0, right 150px 43 |
44 |
45 |
46 |

Pruebas de z-index

47 |

Sin z-index (en orden del html)

48 |
49 |
Black box
50 |
Gray box
51 |
Green box
52 |
53 |

Con z-index haciendo que la negra esté por encima, luego la gris y por último la verde

54 |
55 |
Black box
56 |
Gray box
57 |
Green box
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/2 midudev/2 Guía de CSS Flexbox para aprender de forma sencilla/indexFlex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flex 7 | 8 | 9 | 10 |

Displays que vimos en el anterior vídeo

11 |

display: block;

12 |
13 |
1
14 |
2
15 |
3
16 |
17 |

display: inline;

18 |
19 |
1
20 |
2
21 |
3
22 |
23 |
24 |

Displays flex con diferente flex-direction

25 |

display: flex; flex-direction: row;

26 |
27 |
1
28 |
2
29 |
3
30 |
31 |

display: flex; flex-direction: column;

32 |
33 |
1
34 |
2
35 |
3
36 |
37 |

display: flex; flex-direction: row-reverse;

38 |
39 |
1
40 |
2
41 |
3
42 |
43 |

display: flex; flex-direction: column-reverse;

44 |
45 |
1
46 |
2
47 |
3
48 |
49 |
50 |

Pruebas de diferentes "direction" y "flex-direction"

51 |

display: flex; flex-direction: flex; direction: ltr;

52 |
53 |
1
54 |
2
55 |
3
56 |
57 |

display: flex; flex-direction: flex; direction: rtl;

58 |
59 |
1
60 |
2
61 |
3
62 |
63 |

display: flex; flex-direction: row-reverse; direction: ltr;

64 |
65 |
1
66 |
2
67 |
3
68 |
69 |

display: flex; flex-direction: row-reverse; direction: rtl;

70 |
71 |
1
72 |
2
73 |
3
74 |
75 |
76 |

Pruebas de diferentes "writting-mode" y "flex-direction"

77 |

display: flex; flex-direction: flex; writing-mode: vertical-lr;

78 |
79 |
1
80 |
2
81 |
3
82 |
83 |

display: flex; flex-direction: flex; writing-mode: vertical-rl;

84 |
85 |
1
86 |
2
87 |
3
88 |
89 |

display: flex; flex-direction: column-reverse; writing-mode: vertical-lr;

90 |
91 |
1
92 |
2
93 |
3
94 |
95 |

display: flex; flex-direction: column-reverse; writing-mode: vertical-rl;

96 |
97 |
1
98 |
2
99 |
3
100 |
101 |
102 |

Pruebas con flex-wrap y flex-flow

103 |

flex-direction: row; flex-wrap: nowrap;

104 |
105 |
1
106 |
2
107 |
3
108 |
109 |

flex-direction: row; flex-wrap: wrap;

110 |
111 |
1
112 |
2
113 |
3
114 |
115 |

flex-flow: row wrap;

116 |
117 |
1
118 |
2
119 |
3
120 |
121 |

flex-direction: row nowrap;

122 |
123 |
1
124 |
2
125 |
3
126 |
127 |
128 |

Posicionamiento con nowrap

129 |

Ejemplo por defecto

130 |
131 |
1
132 |
2
133 |
3
134 |
135 |

Ejemplo resuelto con flex-grow: 1;

136 |
137 |
1
138 |
2
139 |
3
140 |
141 |

Ejemplo resuelto con flex-basis: 200px;

142 |
143 |
1
144 |
2
145 |
3
146 |
147 | 148 | 149 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/2 midudev/2 Guía de CSS Flexbox para aprender de forma sencilla/indexSticky.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejemplos con sticky 7 | 8 | 9 | 10 |
11 |
12 | parent container relative -> sticky bottom 0, right 0 13 |
14 |
15 |
16 |
17 | parent container relative -> sticky bottom 0, right 0 18 |
19 |
20 |
21 |
22 | parent container relative -> sticky bottom 0, right 0 23 |
24 |
25 | 26 | -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/2 Ejemplos de Webs/2 midudev/2 Guía de CSS Flexbox para aprender de forma sencilla/styleSticky.css: -------------------------------------------------------------------------------- 1 | /* 2 | A parte de posiciones "relative", "absolute" y "fixed", también hay una "position: sticky" la cual es 3 | muy confundida con "fixed". 4 | 5 | Por una parte, el "fixed" se queda fijo en pantalla y no le afecta el "relative"; pero "sticky" 6 | no se queda fijo en pantalla como "fixed", se queda pegado al contenedor en el que está, por lo 7 | que sí que le afecta si el contenedor es "relative" o no. "sticky" siempre mantiene su posición 8 | dentro del contenedor "relative" que lo contenga. Pero no se queda en la misma posición como el 9 | "absolute", el "sticky" también depende del viewport, por lo que si el sticky está en el top 0; 10 | right 0; siempre estará en la esquina superior derecha desde nuestra perspectiva, de hecho, al 11 | hacer scroll, mientras aún esté dentro del contenedor, se moverá hacia abajo al hacer scroll hacia 12 | abajo, porque el "sticky" depende del viewport y del contenedor, por lo que irá hacia abajo para 13 | parecer que siempre está en la esquina superior derecha hasta que se acabe el contenedor. 14 | 15 | "sticky" deja su posición en el contenedor siempre que pueda, pero al hacer scroll, se ve empujado 16 | hacia abajo (o hacia arriba) hasta donde puede en el contenedor en el que se encuentra. Este sí 17 | que tiene que ver con el contenedor en el que se encuentra 18 | 19 | Ejemplos en indexSticky.html 20 | */ 21 | body{ 22 | background-color: seashell; 23 | } 24 | 25 | .stickyParent { 26 | border: 5px solid #000; 27 | height: 500px; 28 | width: 250px; 29 | box-sizing: border-box; 30 | } 31 | 32 | .stickyParent:nth-child(3){ 33 | height: 1000px; 34 | } 35 | 36 | .sticky1 { 37 | width: 100px; 38 | height: 100px; 39 | position: sticky; 40 | background-color: rgb(252, 138, 237); 41 | top: 0; 42 | right: 0; 43 | } -------------------------------------------------------------------------------- /Curso HTML y CSS/CSS/README.md: -------------------------------------------------------------------------------- 1 | # APUNTES Y CONSEJOS CON CSS 2 | ## Para buscar referencias 3 | - Buscar en un navegador: mdn + nombre-lo-que-busques + css 4 | - [Repositorio learning-area de mdn](https://github.com/mdn/learning-area) 5 | 6 | ## Guías de Estilos de Referencia 7 | - [Trello CSS Guide](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80) → guía de estilo para el CSS utilizado en Trello, una plataforma de gestión de proyectos. 8 | 9 | ## Apuntes o cursos gratis 10 | 11 | - [Página de MDN para aprender CSS](https://developer.mozilla.org/es/docs/Learn/CSS) → Recurso educativo que proporciona información sobre CSS, desde los fundamentos hasta cosiñas más avanzadas como la aplicación de estilos a texto y cajas, y el diseño responsive (RWD). El contenido de la página está dividido en varios módulos que siguen un orden recomendado de aprendizaje. 12 | 13 | - [Página de Manz Dev para aprender CSS](https://lenguajecss.com/) → Página para aprender CSS, tener una cheat sheet de referencia, vídeos centrados en el tema e información adicional 14 | 15 | - [Página de Google Developers para aprender CSS](https://web.dev/learn/css?hl=es) → Herramienta educativa proporcionada por Google Developers para ayudar a entender y dominar los conceptos fundamentales de CSS. El curso se divide en varios módulos que cubren temas como el modelo de caja, selectores, animaciones... 16 | 17 | - [Lista de vídeos de Youtuve de Midudev](https://www.youtube.com/playlist?list=PLUofhDIg_38q7l8gV4IVCz_pjUeyD99_j) → Lista de 4 vídeos de MiduDev centrados en aprender CSS. En la carpeta de "Ejemplos de Webs" encontrarás apuntes y demás que he tomado al ver los vídeos. 18 | 19 | - [Cursos de Stephanie Eckles](https://egghead.io/q/resources-by-stephanie-eckles) → Cursos de Stephanie Eckles para aprender desarrollo web con HTML y CSS 20 | 21 | - [Learn How To Make a Website with Steph](https://learnfromsteph.dev/) → Serie de videos educativos creada por Stephanie Eckles, diseñado para personas sin experiencia previa en desarrollo web, ofreciendo una forma accesible y práctica de aprender los fundamentos del desarrollo front-end. 22 | 23 | - [Curso Buenas Prácticas con Selectores - Codely](https://pro.codely.com/library/buenas-practicas-con-css-selectores/path/) → Curso de Buenas Prácticas con Selectores de CSS 24 | 25 | ## Guías para mejorar css 26 | - [csswizardry guide to css](https://cssguidelin.es/) → Este documento es una guía de mejores prácticas y recomendaciones para escribir y estructurar CSS de manera eficiente y efectiva 27 | 28 | ## Metodologías 29 | - [CSS with BEM](https://en.bem.info/methodology/css/) → En el contexto de CSS, BEM (Block, Element, Modifier) proporciona una estructura clara para nombrar y organizar las clases CSS, facilitando la comprensión y el mantenimiento del código 30 | 31 | ## Juegos para mejorar 32 | ### General 33 | - [CSS Diner](https://flukeout.github.io/) → Para aprender selectores CSS. 34 | 35 | - [CSS Speedrun](https://css-speedrun.netlify.app/) → Pone a prueba conocimientos de pseudo-clases en CSS. 36 | 37 | - [Guess CSS](https://www.guess-css.app/) → Juego de Opción Múltiple que evalúa tus los conocimientos de CSS. 38 | 39 | - [Modern CSS Challenges](https://challenges.moderncss.dev/) → Para mejorar las habilidades CSS resolviendo desafíos prácticos. 40 | 41 | - [12 Days of Web](https://12daysofweb.dev/) → Calendario de Adviento con retos de HTML, CSS y JS. 42 | 43 | ### Flex Box 44 | - [Flex Box Froggy](https://flexboxfroggy.com/#es) → Enseña a cómo usar Flex Box a través de desafíos. 45 | 46 | - [Flex Box Defense](http://www.flexboxdefense.com/) → Ayuda a aprender a usar Flex Box con desafíos. 47 | 48 | - [Flex Box Adventure](https://codingfantasy.com/games/flexboxadventure) → Para saber usar Flex Box a través de desafíos. 49 | 50 | - [Flex Box Zombies](https://mastery.games/flexboxzombies/) → Para aprender Flex Box con desafíos. 51 | 52 | ### Grid 53 | - [Grid Garden](https://cssgridgarden.com) → Explica cómo usar CSS Grid con desafíos. 54 | 55 | - [Grid Attack](https://codingfantasy.com/games/css-grid-attack) → Diseñado para enseñar a utilizar CSS Grid a través de desafíos. 56 | 57 | 58 | ## Artículos y webs donde completar información 59 | - [csswizardry articles](https://csswizardry.com/page2/#section:articles) → Artículos de csswizardy donde se tratan temas centrados en css y cómo mejorar el rendimiento de una página web 60 | 61 | - [Modern CSS Solutions for Old CSS Problems](https://moderncss.dev/) → Plataforma dedicada a enseñar CSS moderno. A través de una variedad de recursos, como artículos, tutoriales y ejemplos prácticos. 62 | 63 | ## Páginas y herramientas para mejorar 64 | #### Páginas para CSS en general 65 | - [Google Fonts](https://fonts.google.com/) → Es la biblioteca oficial de Google Fonts. Proporciona un servicio que da acceso a una gran colección de fuentes de texto gratuitas. Estas fuentes se pueden usar en nuestro CSS para aplicarlo a nuestra página web. 66 | 67 | - [Calculadora de especifidad de CSS](https://specificity.keegan.st/) → Proporciona una forma visual para entender la especificidad en CSS. 68 | 69 | - [codi.link](https://codi.link/) → Es una web que permite a los usuarios abrir archivos de código directamente y visualizarlos en tiempo real, por lo que ayuda mucho a practicar CSS desde cualquier dispositivo. Se puede arrastrar y soltar un archivo de código en la ventana del navegador para visualizarlo y editarlo. 70 | 71 | #### Herramientas para los colores: 72 | - [Conversor de colores](https://convertacolor.com/) → Recurso que al escribir un color en un formato, te da este en diferentes formatos como pueden ser HEX, RGB, HSL o CMYK. No tiene todavía la opción de OKLCH 73 | 74 | - [Conversor a oklch](https://oklch.com/) → Herramienta que convierte cualquier color HEX, RGB o HSL a OKLCH. 75 | 76 | 77 | #### Recursos: 78 | - [scrollbar.app](https://scrollbar.app/) → Plataforma dedicada a la creación de barras de desplazamiento personalizadas para sitios web. 79 | 80 | - [Scrollbar Playground](https://lyqht.github.io/scrollbar-playground/) → Herramienta para experimentar con diferentes estilos de barras de desplazamiento (scrollbars) sin tener que escribir y probar código cada vez. 81 | 82 | #### UX: 83 | - [Laws Of UX](https://lawsofux.com/es/) 84 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/0 Introducción/prueba/prueba-anchor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Página 2 7 | 8 | 9 | Volver a la introducción 10 | 11 | 12 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/0 Introducción/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/0 Introducción/x.png -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/1 Etiquetas Head/4-etiquetas-redes-sociales.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiquetas redes sociales 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/01-etiquetas-agrupacion/05-etiqueta-pre.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <pre> 7 | 8 | 9 | 10 | 13 | 14 | 15 |
16 | function mensaje(str) { 17 | console.log(str); 18 | } 19 |
20 | 21 | 
 22 |         function mensaje(str) {
 23 |           console.log(str);
 24 |         }
 25 |
26 | 27 | 
 28 |         
 29 |           function mensaje(str) {
 30 |             console.log(str);
 31 |           }
 32 |         
 33 |
34 | 35 | 36 | 
 37 |         
 38 |           function mensaje(str) {
 39 |             console.log(str);
 40 |           }
 41 |         
 42 |
43 | 44 | 
 45 |         
 46 |           function
 47 |           mensaje
 48 |           (str)
 49 |           {
 50 |             console.log
 51 |             (str)
 52 |             ;
 53 |           }
 54 |         
 55 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/01-etiquetas-agrupacion/06-etiqueta-dl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <dl> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
EtiquetaSignificadoDescripción
<dl>Description ListDefine una lista de descripciones. Es la etiqueta contenedora.
<dt>Description TermTérmino de la descripción. Contiene el nombre o término a describir.
<dd>Description DetailsDescripción o valor asociado al término. Pueden existir varios por término.
35 |
36 |
37 |
Gallina
38 |
Ave doméstica del orden de las galliformes.
39 |
Cobarde, pusilánime.
40 | 41 |
Gato
42 |
Animal que en algún momento dominó Internet y en el futuro dominará el mundo.
43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/01-etiquetas-agrupacion/07-etiqueta-figure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <figure> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
EtiquetaDescripción
<figure>Establece una figura, que puede contener una serie de elementos diversos.
<figcaption>Asocia una leyenda, generalmente texto, a la figura anterior. Opcional.
27 |
28 |
29 | Logotipo de HTML5 30 |
Logotipo oficial del lenguaje de marcas HTML5.
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/02-etiquetas-multimedia/01-intro-etiquetas-multimedia.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Multimedia 7 | 8 | 9 | 10 | 11 |

Imagenes:

12 |

Aquí va la imagen

13 | Imagen de unos dados 18 | 24 |
25 | Persona Random 30 |
31 | 32 |
33 | 34 | 35 | 36 | 51 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/02-etiquetas-multimedia/05-etiqueta-audio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <audio> 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/02-etiquetas-multimedia/06-etiqueta-track.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <track> 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/02-etiquetas-multimedia/07-etiqueta-iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <iframe> 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/02-etiquetas-multimedia/img/aspect-ratio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/02-etiquetas-multimedia/img/aspect-ratio.png -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/04-etiqueta-strong.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/04-etiqueta-strong.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/05-etiqueta-em.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/05-etiqueta-em.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/06-etiqueta-mark.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/06-etiqueta-mark.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/07-etiqueta-s.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Precio de subscripción: 5.99€ ¡3.99€!

10 | 11 | 12 | 27 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/08-etiqueta-span.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <span> 7 | 8 | 9 | 10 |

11 | Este párrafo de texto tiene 12 | algunos fragmentos de texto 13 | que mantienen su disposición original. 14 |

15 | 16 | 17 |

18 | Este es un párrafo en francés. 19 |

20 | 21 |

22 | Este es un párrafo en árabe. 23 |

24 | 25 |

26 | Este es un párrafo en francés y con una direccionalidad de texto diferente. 27 |

28 | 29 | 30 |

31 | Esto es un fragmento de texto válido. 32 |

33 | 34 | 35 |

36 | Esto es un fragmento de

texto
inválido. 37 |

38 | 39 | 40 | 78 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/09-etiquetas-q-cite.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/09-etiquetas-q-cite.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/10-etiquetas-sup-sub.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/10-etiquetas-sup-sub.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/11-etiqueta-small.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiqueta <small> 7 | 8 | 9 |

10 | Para abrir este archivo necesitarás el programa Manz9000. 11 | Es necesario 10GB disponibles en disco. 12 |

13 | 14 |

15 | Visite nuestro sitio web para obtener más información 16 | (requisitos de admisión). 19 |

20 | 21 |

Última actualización: 10 de marzo de 2023

22 |

23 | La fecha límite para la presentación de solicitudes es el 31 de marzo de 24 | 2023. 25 |

26 | 27 | 31 | 32 | 35 | 36 | 37 | 55 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/12-etiquetas-abbr-dfn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiquetas <abbr> y <dfn> 7 | 8 | 9 |

El término Km es una unidad de longitud.

10 | 11 |

12 | El término Km es una unidad de longitud. 13 |

14 | 15 |

El término Kilómetro es una unidad de longitud.

16 | 17 |

I do HTML

18 |

Using HTML is fun and easy!

19 |

Using CSS, you can style your abbreviations!

20 | 21 |

22 | You can use CSS (Cascading Style Sheets) to style your 23 | HTML (HyperText Markup Language). Using style sheets, you can 24 | keep your CSS presentation layer and HTML content layer separate. This is 25 | called "separation of concerns." 26 |

27 | 28 |

El HTML es un lenguaje de marcado para hipertextos.

29 | 30 |

31 | A validator is a program that checks for 32 | syntax errors in code or documents. 33 |

34 | 35 | 36 |

37 | El término Km es una unidad de 38 | longitud. 39 |

40 | 41 | 42 | 76 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/13-etiquetas-wbr-br.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/13-etiquetas-wbr-br.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/14-etiquetas-kbd-samp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiquetas <kdb> y <samp> 7 | 8 | 9 |

10 | Para abrir una nueva pestaña en el navegador, pulsa la combinación de 11 | teclas CTRL+T. 12 |

13 | 14 |

15 | Para abrir una nueva pestaña en el navegador, pulsa la combinación de 16 | teclas CTRL+T. 17 |

18 | 19 |

20 | Internet Explorer mostró un mensaje: 21 | Error: Todo ha ido bien. 22 |

23 | 24 | 25 |

Si está conforme escriba sí. Si no, pulse esc

26 | 27 |

28 | Please press Ctrl + Shift + R to 29 | re-render an MDN page. 30 |

31 | 32 |

33 | Use the command help mycommand to view documentation for the 34 | command "mycommand". 35 |

36 | 37 | 38 |

I was trying to boot my computer, but I got this hilarious message:

39 |

40 | Keyboard not found
Press F1 to continue 41 |

42 | 43 |

44 | When the process is complete, the utility will output the text 45 | Scan complete. Found N results. You can then proceed 46 | to the next step. 47 |

48 | 49 | 
50 |     mike@interwebz:~$ md5 -s "Hello world"
51 |     MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62
52 |     
53 |     mike@interwebz:~$ █
54 | 55 | 56 | 91 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/15-etiquetas-time-data.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/15-etiquetas-time-data.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/16-etiquetas-code.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/16-etiquetas-code.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/17-etiquetas-ins-del.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/03-etiquetas-texto/17-etiquetas-ins-del.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/01-etiquetas-semanticas-seccion.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/02-etiqueta-article.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/03-etiqueta-nav.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/03-etiqueta-nav.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/04-etiquetas-header-footer.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/04-etiquetas-header-footer.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/05-etiqueta-search.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/05-etiqueta-search.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/06-etiqueta-section.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/06-etiqueta-section.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/07-etiquetas-h1-a-h6.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/07-etiquetas-h1-a-h6.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/08-etiqueta-address.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/04-etiquetas-semánticas/08-etiqueta-address.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/05-etiquetas-tablas/01-etiqueta-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tablas 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
PersonasNombreApellidosCiudadNúmero
SushmaPadínFerrol2
José ManuelCarreraOurense1
AldánCreoSantiago de Compostela3
Número total de amigos en la tabla 3 amigos
47 | 48 | 49 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/05-etiquetas-tablas/02-tablas-celdas-irregulares.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/05-etiquetas-tablas/02-tablas-celdas-irregulares.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/05-etiquetas-tablas/03-organizacion-tablas.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/05-etiquetas-tablas/03-organizacion-tablas.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/05-etiquetas-tablas/04-columnas-tabas.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/05-etiquetas-tablas/04-columnas-tabas.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/02-etiqueta-form.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/02-etiqueta-form.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/03-etiqueta-input.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/03-etiqueta-input.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/04-etiqueta-textarea.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/04-etiqueta-textarea.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/05-etiqueta-input-numeros.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/05-etiqueta-input-numeros.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/06-etiqueta-input-fechas.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/06-etiqueta-input-fechas.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/07-etiqueta-input-casillas.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/07-etiqueta-input-casillas.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/08-etiqueta-input-colores.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/08-etiqueta-input-colores.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/09-etiqueta-select.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/09-etiqueta-select.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/10-etiqueta-datalist.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/10-etiqueta-datalist.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/11-etiqueta-input-ficheros.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/11-etiqueta-input-ficheros.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/12-organizacion-campos.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/12-organizacion-campos.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/13-etiqueta-progress.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/13-etiqueta-progress.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/14-etiqueta-meter.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/14-etiqueta-meter.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/15-etiqueta-input-submit.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/15-etiqueta-input-submit.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/Validaiones de Formularios/01-introduccion-validaciones.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/Validaiones de Formularios/01-introduccion-validaciones.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/Validaiones de Formularios/02-validaciones-basicas-html5.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/Validaiones de Formularios/02-validaciones-basicas-html5.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/Validaiones de Formularios/03-atributo-pattern.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/06-etiquetas-formularios/Validaiones de Formularios/03-atributo-pattern.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/01-etiqueta-details.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/01-etiqueta-details.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/02-popovers-elementos-emergentes.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/02-popovers-elementos-emergentes.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/03-etiqueta-dialog.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/03-etiqueta-dialog.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/04-eventos-html.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/04-eventos-html.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/05-atributo-contenteditable.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/05-atributo-contenteditable.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/06-atributo-hidden.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/07-etiquetas-interactivas/06-atributo-hidden.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/Información añadida/2 Anatomía de una página web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simple Layout example 7 | 8 | 9 | 10 | 11 |
12 | 15 | 24 |
25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime fuga, 26 | non suscipit asperiores neque iure, quas excepturi facere optio sapiente 27 | alias ipsa itaque, repellendus accusantium ratione eos doloribus ducimus 28 | ullam. 29 |
30 | 31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/Información añadida/2 Anatomía de una página web/script.js: -------------------------------------------------------------------------------- 1 | //Cristina Correa 2 | 3 | function sayHello() { 4 | alert("Hello"); 5 | } -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/Información añadida/2 Anatomía de una página web/style.css: -------------------------------------------------------------------------------- 1 | /* Cristina Correa */ 2 | 3 | #mainContainer { 4 | width: 600px; 5 | } 6 | 7 | #header { 8 | background-color: #0026FF; 9 | font-size: x-large; 10 | color: white; 11 | } 12 | 13 | #header h1{ 14 | margin: 0px; 15 | padding: 10px; 16 | } 17 | 18 | #sideBar{ 19 | background-color: #FF6A00; 20 | width: 150px; 21 | height: 300px; 22 | float: left; 23 | } 24 | 25 | #mainContent{ 26 | background-color: #DDEEDD; 27 | width: 450px; 28 | height: 300px; 29 | float: left; 30 | } 31 | 32 | #footer { 33 | background-color: #FFD800; 34 | clear: both; 35 | text-align: center; 36 | } -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/Información añadida/3 Caracteres especiales/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Uso de caracteres especiales 7 | 8 | 9 | La etiqueta <span> sirve para "agrupar elementos de una página web". 10 | 11 | 12 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/img/x.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/2 Etiquetas Body/img/x.ico -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/01-etiqueta-script.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/01-etiqueta-script.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/02-atributos-defer-async.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/02-atributos-defer-async.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/03-modulos-javascript-esm.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/03-modulos-javascript-esm.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/04-bloque-datos-desconocido.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/1 Curso/3 Otras etiquetas/01-etiquetas-scripting/04-bloque-datos-desconocido.html -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/2 Ejemplos de webs/1 soy-dalto/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Curso de HTML5 desde CERO 8 | 9 | 10 |
11 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/2 Ejemplos de webs/1 soy-dalto/nosotros.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sobre nosotros 8 | 9 | 10 |
11 | 18 |
19 |
20 |
21 |

Título de una noticia

22 |

Resumen de la noticia

23 |

24 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores 25 | dolorum non repellendus, unde repellat dignissimos aliquam recusandae, 26 | mollitia nulla ab molestiae nam beatae officiis. Iusto minus 27 | asperiores optio facilis assumenda! Laudantium voluptates velit quod 28 | cupiditate ad consequatur autem temporibus aliquam culpa nobis 29 | mollitia quis, libero dolore vel quo illum maxime tenetur sit 30 | reiciendis numquam, ea blanditiis deserunt. Magni, quasi sunt! At 31 | tempore rerum quaerat totam? Ut facilis doloribus tempora, sunt quam, 32 | deleniti voluptatibus itaque dolores velit nulla quisquam reiciendis 33 | labore fugit autem qui, provident magnam inventore. Asperiores nemo 34 | eius deleniti. Ducimus ea laboriosam doloremque velit enim, iure quia 35 | aperiam voluptatum tempora dolor, esse porro, modi rerum! Ea, a 36 | laudantium vel alias quibusdam architecto, facilis iste voluptatem 37 | numquam ad, unde esse! Assumenda, amet. Placeat at cupiditate 38 | asperiores consectetur esse doloribus minima laudantium ad quas magnam 39 | sed, incidunt debitis magni libero fugit sapiente facilis nisi 40 | possimus. Laudantium hic distinctio asperiores est pariatur! 41 |

42 |
43 |
44 | 56 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Curso HTML y CSS/HTML/2 Ejemplos de webs/2 midudev/persona-random.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Curso HTML y CSS/HTML/2 Ejemplos de webs/2 midudev/persona-random.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Cris Correa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 1/Ejercicio1CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 07 Cristina Correa Formulario Ejercicio 1 CSS 6 | 7 | 22 | 23 | 24 |

Mi primer ejemplo con CSS

25 | 26 |

27 | What is Lorem Ipsum? 28 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 29 | dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 30 | book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 31 | unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 32 | recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 33 |

34 | 35 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 10/Ejercicio 10CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 Cristina Correa Segade Ejercicio10 6 | 7 | 54 | 55 | 56 |
57 | 58 | 59 | 60 | 61 | 62 | 70 | 71 | 72 | 73 | 74 | 82 | 83 | 84 | 85 | 86 |
Soy Cristina Correa. Cabecera
63 | 69 | ContenidoMenú lateral
75 |
76 | 77 | 78 | 79 | 80 |
81 |
Soy Cristina Correa. Pie
87 |
88 | 89 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 11/Ejercicio11CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 Cristina Correa Segade Ejercicio 11 6 | 7 | 55 | 56 | 57 |
58 |
59 |

Soy Cristina. Cabecera

60 |
61 |
62 | 68 | 76 |
77 |
78 | paris 83 | Lorem Ipsum es simplemente el texto de relleno de las 84 | imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno 85 | estandar de las industrias desde el año 1500, cuando un impresor (N. del 86 | T. persona que se dedica a la imprenta) desconocido usó una galería de 87 | textos y los mezcló de tal manera que logró hacer un libro de textos 88 | especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como 89 | texto de relleno en documentos electrónicos, quedando esencialmente 90 | igual al original. Fue popularizado en los 60s con la creación de las 91 | hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más 92 | recientemente con software de autoedición, como por ejemplo Aldus 93 | PageMaker, el cual incluye versiones de Lorem Ipsum. Es un hecho 94 | establecido hace demasiado tiempo que un lector se distraerá con el 95 | contenido del texto de un sitio mientras que mira su diseño. El punto de 96 | usar Lorem Ipsum es que tiene una distribución más o menos normal de las 97 | letras, al contrario de usar textos como por ejemplo "Contenido aquí, 98 | contenido aquí". Estos textos hacen parecerlo un español que se puede 99 | leer. Muchos paquetes de autoedición y editores de páginas web usan el 100 | Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem 101 | Ipsum" va a dar por resultado muchos sitios web que usan este texto si 102 | se encuentran en estado de desarrollo. Muchas versiones han evolucionado 103 | a través de los años, algunas veces por accidente, otras veces a 104 | propósito (por ejemplo insertándole humor y cosas por el estilo). 105 |
106 | 107 |
108 |

Soy Cristina. Pie

109 |
110 |
111 | 112 | 113 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 12/Ejercicio12_CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cristina Correa Ejercicio 12 7 | 69 | 70 | 71 |

Cabeceira de primeiro nivel moi looooooooooooooooonga

72 |

Cabeceira de segundo nivel

73 |

74 | Os nomes Galiza e Galicia derivan da 75 | palabra latina Gallaecia (ou Callaecia), que significaba literalmente 76 | terra dos galaicos .
77 | Os galaicos foron o pobo máis numeroso do noroeste da Península Ibérica xa 78 | antes da súa integración ao Imperio Romano no século I a.C. 79 |

80 |

81 | Este é un exemplo de como se poden incluír 82 | unha ligazón e 83 | outra ligazón . 84 |

85 | palabra 86 | 87 | 88 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 13/Ejercicio13_CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cristina Correa Ejercicio 13 7 | 87 | 88 | 89 |

Cabeceira de primeiro nivel moi looooooooooooooooonga

90 |

Cabeceira de segundo nivel

91 |

92 | Os nomes Galiza e Galicia derivan da 93 | palabra latina Gallaecia (ou Callaecia), que significaba literalmente 94 | terra dos galaicos .
95 | Os galaicos foron o pobo máis numeroso do noroeste da Península Ibérica xa 96 | antes da súa integración ao Imperio Romano no século I a.C. 97 |

98 |

99 | Este é un exemplo de como se poden incluír 100 | unha ligazón e 101 | outra ligazón . 102 |

103 | palabra 104 |

Este es un párrafo importante

105 | 106 | 107 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 13/img/fondo_azul.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 13/img/fondo_azul.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 13/img/sunset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 13/img/sunset.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 14/Ejercicio14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 Cristina Correa Segade Ejercicio 14 6 | 48 | 49 | 50 | Illas Cíes 51 | Ribeira Sacra 52 | Praia das Catedrais 53 |

54 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae 55 | tellus sodales, vehicula lorem ac, ornare nunc. Nunc sem velit, 56 | pellentesque nec sodales at, pretium in turpis. Donec tristique, augue id 57 | molestie porttitor, lorem augue hendrerit dui, vitae interdum sem dolor 58 | eget nunc. Nam dignissim quam sed semper semper. Pellentesque velit lacus, 59 | imperdiet eu semper at, congue ac dui. Lorem ipsum dolor sit amet, 60 | consectetur adipiscing elit. Nulla feugiat felis sit amet finibus 61 | venenatis. Mauris eu turpis vulputate, luctus sapien id, iaculis eros. 62 | Fusce ac pellentesque turpis. In interdum ornare eros non egestas. Quisque 63 | rhoncus in dolor eget rutrum. Integer vitae erat in leo imperdiet finibus 64 | et quis velit. Praesent aliquet aliquet tempus. 65 |

66 | 67 |

68 | Praesent in massa ut est blandit congue non facilisis elit. Integer 69 | scelerisque maximus posuere. Vivamus at venenatis tortor. Nam accumsan 70 | nulla tempus, posuere massa lobortis, pretium est. Vestibulum ante ipsum 71 | primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque 72 | tempor varius mauris a condimentum. Vivamus ullamcorper lobortis orci, et 73 | maximus velit viverra in. Nunc a arcu nulla. Duis tincidunt nibh eget 74 | tellus varius, eget scelerisque nibh mattis. Pellentesque neque libero, 75 | cursus nec laoreet eu, tempor sed justo. Nam eros risus, rutrum sit amet 76 | leo sit amet, faucibus pharetra nisi. Aliquam at ante facilisis, porta 77 | purus vitae, aliquam orci. Vestibulum gravida aliquet consequat. Donec sed 78 | tincidunt libero, vitae scelerisque nulla. Curabitur malesuada finibus 79 | erat vel feugiat. 80 |

81 | 82 |

83 | Aliquam nibh nulla, elementum vitae rutrum in, mollis ut velit. Sed 84 | rutrum, sapien id posuere condimentum, eros urna hendrerit mi, at sagittis 85 | an-te nulla vitae leo. Mauris sodales semper metus at pulvinar. Curabitur 86 | quis odio ex. Fusce efficitur justo ut quam sodales, blandit mollis mi 87 | elementum. Nam id purus vitae ex rutrum pretium. In hac habitasse platea 88 | dictumst. Ali-quam dapibus, purus viverra sollicitudin auctor, purus dui 89 | lacinia dolor, vi-tae semper nunc dolor at magna. 90 |

91 | 92 |

93 | Etiam sodales, lectus quis finibus lacinia, leo tortor tempor nunc, 94 | accumsan gravida nibh orci at sem. Aenean ornare magna tellus, sit amet 95 | frin-gilla urna maximus id. Sed tincidunt metus erat, in eleifend lectus 96 | rhoncus et. Vivamus posuere, augue sit amet consequat mattis, nisi enim 97 | tincidunt ipsum, eget imperdiet sapien felis id justo. Duis nunc lectus, 98 | tincidunt quis euismod semper, porta in nibh. Pellentesque sit amet nisl 99 | nisl. Quisque consectetur fermentum varius. Sed dictum volutpat quam nec 100 | pharetra. Donec li-gula odio, molestie sed eros vel, aliquet interdum 101 | elit. 102 |

103 | 104 |

105 | Fusce sagittis vulputate imperdiet. Curabitur maximus ipsum vel ipsum 106 | sodales, a tincidunt felis ullamcorper. Curabitur congue egestas tellus, 107 | id bibendum mi pharetra ac. Curabitur eu orci est. Nullam et erat ut odio 108 | finibus ornare. Nullam elit neque, porttitor nec gravida ut, pretium ut 109 | ipsum. Quisque odio arcu, aliquet at nibh eget, tempus posuere est. Mauris 110 | nec tinci-dunt dolor, nec ultrices lectus. 111 |

112 | 113 | 114 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 14/img/catedrais.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 14/img/catedrais.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 14/img/cies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 14/img/cies.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 14/img/ribeira_sacra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 14/img/ribeira_sacra.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 15/Ejercicio15CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML & Cristina Correa Segade Ejercicio 15 6 | 39 | 40 | 41 |

HTML & CSS: Curso práctico avanzado

42 | 43 |

Datos del libro

44 | 45 | 52 | 53 |

Descripción del libro

54 | 55 |

56 | Aunque los inicios de Internet se remontan a los años sesenta, no ha sido 57 | hasta los años noventa cuando, gracias a la Web, se ha extendido su uso 58 | por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se 59 | ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos 60 | que eran visitadas por unos pocos usuarios a páginas complejas, con 61 | contenidos dinámicos que provienen de bases de datos y que son visitadas 62 | por miles de usuarios al mismo tiempo. 63 |

64 | 65 |

66 | Todas las páginas están internamente construidas con la misma tecnología, 67 | con el Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) 68 | y con las Hojas de estilo en cascada (Cascading Style Sheets, CSS). 69 |

70 | 71 |

72 | Este libro es adecuado para cualquiera que tenga interés en aprender a 73 | desarrollar sus propias páginas web. No son necesarios conocimientos 74 | previos para aprender con este libro, lo único que es necesario es saber 75 | utilizar un ordenador y saber navegar por la Web. 76 |

77 | 78 |

Contenido del libro

79 | 80 |

81 | El contenido de este libro se estructura en tres apartados bien 82 | diferenciados: 83 |

84 | 85 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 16/Ejercicio16CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML & Cristina Correa Segade Ejercicio 16 6 | 25 | 26 | 27 |

HTML & CSS: Curso práctico avanzado

28 | 29 |

Datos del libro

30 | 31 | 38 | 39 |

Descripción del libro

40 | 41 |

42 | Aunque los inicios de Internet se remontan a los años sesenta, no ha sido 43 | hasta los años noventa cuando, gracias a la Web, se ha extendido su uso 44 | por todo el mundo. En pocos años, la Web ha evolucionado enormemente: se 45 | ha pasado de páginas sencillas, con pocas imágenes y contenidos estáticos 46 | que eran visitadas por unos pocos usuarios a páginas complejas, con 47 | contenidos dinámicos que provienen de bases de datos y que son visitadas 48 | por miles de usuarios al mismo tiempo. 49 |

50 | 51 |

52 | Todas las páginas están internamente construidas con la misma tecnología, 53 | con el Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) 54 | y con las Hojas de estilo en cascada (Cascading Style Sheets, CSS). 55 |

56 | 57 |

58 | Este libro es adecuado para cualquiera que tenga interés en aprender a 59 | desarrollar sus propias páginas web. No son necesarios conocimientos 60 | previos para aprender con este libro, lo único que es necesario es saber 61 | utilizar un ordenador y saber navegar por la Web. 62 |

63 | 64 |

Contenido del libro

65 | 66 |

67 | El contenido de este libro se estructura en tres apartados bien 68 | diferenciados: 69 |

70 | 71 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 2/Ejercicio2CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 07 Cristina Correa Formulario Ejercicio 2 CSS 6 | 7 | 8 | 9 | 10 |

Mi primer ejemplo con CSS

0 11 | 12 | 13 |

14 | What is Lorem Ipsum? 15 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 16 | dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 17 | book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 18 | unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 19 | recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 20 |

21 |
22 | 23 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 2/estilos.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: lightblue; 3 | } 4 | 5 | h1 { 6 | color: white; 7 | text-align: center; 8 | } 9 | 10 | p { 11 | font-family: Verdana; 12 | font-size: 20px; 13 | } -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 3/Ejercicio3CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cristina Correa Segade Ejercicio 3 CSS 5 | 6 | 66 | 67 | 68 | 69 |

nº7 Cristina Correa Segade

70 |

Encabezado nivel 1

71 |

Esto es un párrafo

72 |

Encabezado nivel 2

73 |

74 | Esto es un párrafo de la clase 75 | especial 76 |

77 |

Encabezado nivel 3

78 |

79 | Esto es otro párrafo 80 | enlace a html colors 83 | enlace sin visitar 87 | enlace sin visitar 90 |

91 |

Encabezado nivel 4

92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/Ejercicio4CSSenlinea.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Cristina Correa Segade Ejercicio 4CSS 4 | 21 | 22 | 23 |

7 Cristina Correa Segade

24 | 25 | 26 | 27 | 34 | 37 | 40 | 43 | 44 | 45 | 46 | 54 | 57 | > 58 | 59 | 60 | 68 | 71 | 72 | 73 | 81 | 84 | 85 |
Mis lugares favoritos 28 |
    29 |
  1. Roma
    2. 30 |
  2. Paris
    3. 31 |
  3. Mexico
    4. 32 |
33 | 		35 | imagen roma 36 | 38 | imagen paris 39 | 41 | imagen mexico 42 |
Mis comidas favoritas 47 | 53 | 55 | imagen pasta 56 |
61 | 67 | 69 | imagen tacos 70 |
74 | 80 | 82 | imagen croquetas 83 |
86 | 87 | 88 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/Ejercicio4CSSexterno.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 Cristina Correa Segade 4 | 5 | 6 | 7 | 8 |

7 Cristina Correa Segade

9 | 10 | 11 | 12 | 19 | 22 | 25 | 28 | 29 | 30 | 31 | 39 | 42 | 43 | 44 | 52 | 55 | 56 | 57 | 65 | 68 | 69 |
Mis lugares favoritos 13 |
    14 |
  1. Roma
    2. 15 |
  2. Paris
    3. 16 |
  3. Mexico
    4. 17 |
18 | 		20 | imagen roma 21 | 23 | imagen paris 24 | 26 | imagen mexico 27 |
Mis comidas favoritas 32 | 38 | 40 | imagen pasta 41 |
45 | 51 | 53 | imagen tacos 54 |
58 | 64 | 66 | imagen croquetas 67 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/croquetas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 4/croquetas.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/css/estilosCSS.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | th{ 4 | font-family: Times New Roman; /*El texto que emplee en las cabeceras lo pondrá en Times New Roman*/ 5 | color: blueviolet; /*El color que emplee en las cabeceras lo pondrá en blueviolet*/ 6 | border: black solid; /*Con esta sentencia pongo el borde de estas casillas en negro*/ 7 | } 8 | 9 | a { 10 | font-family: Courier; /*El texto que emplee en los links lo pondrá en Courier*/ 11 | color:green /*El color que emplee en los links lo pondrá en verde*/ 12 | } 13 | td{ 14 | font-family: Arial; /*El texto que emplee en las columnas lo pondrá en Arial*/ 15 | color: red; /*El color que emplee en las columnas lo pondrá en rojo*/ 16 | border: black solid; /*Con esta sentencia pongo el borde de estas casillas en negro*/ 17 | } 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/mexico.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 4/mexico.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/paris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 4/paris.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/pasta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 4/pasta.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/roma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 4/roma.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 4/tacos.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/CSS/Ejercicio 4/tacos.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 5/Ejercicio5CSS1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 |

Selector descendiente

12 |
13 |

Párrafo 1 en div.

14 |

Párrafo 2 en div.

15 |

Párrafo 3 en div.

 16 |
17 |

Párrafo 4. No en div.

18 |

Párrafo 5. No en div.

19 | 20 | 21 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 5/Ejercicio5CSS2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 |

Selector hijo

12 |
13 |

Párrafo 1 en div.

14 |

Paragraph 2 en div.

15 |

Párrafo 3 en div.

 16 | 17 |

Párrafo 4 en div.

18 |
19 |

Párrafo 5. Not en div.

20 |

Párrafo 6. Not en div.

21 | 22 | 23 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 5/Ejercicio5CSS3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 |

Selector Hermano Adyacente

12 |
13 |

Párrafo 1

14 |

Párrafo 2

15 |
16 |

Párrafo 3

17 |

Párrafo 4

18 |
19 |

Párrafo

20 |

Párrafo 6

21 |
22 |

Párrafo 7

23 |

Párrafo 8

24 | 25 | 26 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 5/Ejercicio5CSS4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 |

Selector de hermanos generales

12 |

Párrafo 1

13 |
14 |

Párrafo 2

15 |
16 |

Párrafo 3

17 | Algún código 18 |

Párrafo 4

19 | 20 | 21 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 6/Ejercicio6CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Selectores en CSS 6 | 7 | 8 | 9 | 10 |

Este párrafo se selecciona con el selector #id

11 | 12 |

Normal

13 |

Especial

14 |

Normal

15 |

Especial

16 | 17 |

Varios elementos

18 |

Varios elementos

19 | 20 | 30 | 31 |

Antes

32 | 33 |

34 | primera foto 35 | segunda foto 36 |

37 | 38 |

Después

39 | 40 | 41 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 6/estilosSolucion.css: -------------------------------------------------------------------------------- 1 | /* Selector universal */ 2 | /* Sus atributos modifican el tipo de letra */ 3 | * { 4 | font-family: "Courier New", Courier, monospace; 5 | } 6 | 7 | /*Lo que esté marcado con el identificador main se muestra en color de fondo gris*/ 8 | /* Sus atributos modifican el color de fondo */ 9 | #main { 10 | background-color: grey; 11 | } 12 | 13 | /*Los encabezados h1 de la clase especial se muestran en color azul*/ 14 | /* Sus atributos modifican el color de la letra */ 15 | h1.especial { 16 | color: blue; 17 | } 18 | 19 | /*A todos los encabezados de tipo h2 y h3 se les pone un borde naranja de 1 pixel y línea continua (solid)*/ 20 | h2, 21 | h3 { 22 | border: 1px solid orange; 23 | } 24 | 25 | /*Los elementos de una lista ordenada o desordenada están en color rojo*/ 26 | li { 27 | color: red; 28 | } 29 | 30 | /*Los elementos de una lista que van dentro de otra lista, elementos de una sublista, están en verde*/ 31 | li li { 32 | color: green; 33 | } 34 | 35 | /*Selecciona las imágenes que vayan dentro de un párrafo, img es hijo directo de p y le pone borde negro de 5px*/ 36 | p > img { 37 | border: 5px solid black; 38 | } 39 | 40 | /*Selecciona las imágenes que tengan el valor "segunda" en el atributo alt y le pone el borde sólido, rojo de 5px*/ 41 | img[alt="segunda"] { 42 | border: 5px solid red; 43 | } 44 | 45 | /*Selecciona los encabezados h3 de la clase antes que están antes de un párrafo y los pone en rosa*/ 46 | p ~ h3.antes { 47 | background-color: pink; 48 | } 49 | 50 | /*Selecciona los encabezados h3 que están después de un párrafo y los pone en azul*/ 51 | p + h3 { 52 | background-color: blue; 53 | } 54 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 7/Ejercicio7CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 Cristina Correa Segade Ejercicio 7CSS 4 | 22 | 23 | 24 |

Componente de paginación con botones activos y hover

25 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 8/EjercicioCSS8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 07 Cristina Correa Segade Ejercicio 8 8 | 25 | 26 | 27 |

28 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod nostrum 29 | illo quibusdam impedit perferendis aperiam voluptatem eum sit incidunt hic 30 | esse, voluptatibus deleniti sed autem ratione consequuntur, saepe culpa 31 | cupiditate? 32 |

33 |

Lemonade

34 | 35 | 36 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/CSS/Ejercicio 9/Ejercicio9CSS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ejercicio de selectores 6 | 64 | 65 | 66 |

Lorem ipsum dolor sit amet

67 |

68 | Nulla pretium. Sed tempus nunc vitae neque. 69 | Suspendisse gravida, metus a scelerisque sollicitudin, 70 | lacus velit ultricies nisl, nonummy tempus neque diam quis felis. 71 | Etiam sagittis tortor sed arcu sagittis 72 | tristique. 73 |

74 |

Aliquam tincidunt, sem eget volutpat porta

75 |

76 | Vivamus velit dui, placerat vel, feugiat in, ornare et, urna.Aenean turpis metus, aliquam non, tristique in, pretium varius, sapien. Proin vitae nisi. Suspendisse 80 | porttitor purus ac elit. Suspendisse 81 | eleifend odio at dui. In in elit sed metus pretium elementum. 82 |

83 | 84 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
85 | Título de la tabla 86 |
Título columna 1Título columna 2
Título columna 1Título columna 2
Título fila 1Donec purus ipsumCurabitur blandit
Título fila 2Donec purus ipsumCurabitur blandit
114 |
115 |

116 | Donec purus ipsum, posuere id, venenatis at, 117 | placerat ac, lorem. Curabitur blandit, eros sed gravida 118 | aliquet, risus justo porta lorem, ut mollis lectus tortor in orci. 119 | Pellentesque nec augue. 120 |

121 |

122 | Fusce nec felis eu diam pretium adipiscing. 123 | Nunc elit elit, vehicula vulputate, venenatis 124 | in, posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam 125 | nisi feugiat ante, eu congue magna mi non nisl. 126 |

127 |

128 | Vivamus ultrices aliquet augue. 129 | Donec arcu pede, pretium vitae, rutrum aliquet, 130 | tincidunt blandit, pede. Aliquam in nisi. Suspendisse volutpat. Nulla 131 | facilisi. Ut ullamcorper nisi quis mi. 132 |

133 |
134 | 135 | 136 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 1/Ejercicio1HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Mi primera página web 5 | 6 | 7 |

Primer encabezado

8 |

Segundo encabezado

9 | Esta es una cita 10 | 
11 |         What is Lorem Ipsum? 

12 |         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
13 |         dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
14 |         book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
15 |         unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
16 |         recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
17 |         

18 |
19 | 
20 |         Why do we use it? 

21 |         It is a long established fact that a reader will be distracted by the readable content of a page when looking at its
22 |         layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
23 |         'Content here, content here', making it look like readable English. Many desktop publishing packages and web page
24 |         editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites
25 |         still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
26 |         (injected humour and the like).
27 |
28 |
29 | 
30 |         Where does it come from? 

31 |         Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature
32 |         from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
33 |         looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of
34 |         the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
35 |         of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
36 |         on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
37 |         amet..", comes from a line in section 1.10.32.
38 |         
39 |         The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and
40 |         1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
41 |         English versions from the 1914 translation by H. Rackham.
42 |
43 | 44 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 11/Ejercicio11HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 07 Cristina Correa Formulario Ejercicio 11 6 | 7 | 8 |
9 |
10 | Datos Fiscales 11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 | Datos Personales 20 | 21 |

22 | 23 | 24 |

25 | 26 |

31 | 32 | 33 |
34 | 35 |
36 | 37 |
38 |
39 | 40 | 41 |
42 | 43 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 12/Ejercicio12HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 07 Cristina Correa Formulario Ejercicio 12 6 | 7 | 8 |
9 |
10 | Datos Fiscales 11 |

17 | 18 | 19 | 20 | 21 | 22 |

23 | 24 |
25 |
27 |
28 | 29 | 30 |
31 | 32 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 13/Ejercicio13HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 07 Cristina Correa Formulario Ejercicio 13 6 | 7 | 8 |
9 |
10 | Laboral 11 | Por cuenta ajena 12 | Autónomo
13 | ¿Alguna vez en el extranjero? 14 | 15 | 16 | 19 | 27 | 28 | 29 | 32 | 33 |
17 | Sí 18 | 20 |
26 |
30 | No 31 |
34 |
35 |
36 | Personal 37 | 38 |

39 | 40 | Conocimientos sobre:
41 | 47 |
48 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 2/Ejercicio2HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cristina Correa 5 | 6 | 7 |

Lista desordenada

8 | 13 |
14 |

Lista ordenada

15 |
    16 |
  1. Café
    2. 17 |
  2. Auga
    3. 18 |
  3. Leite
    4. 19 |
20 |
21 |

Lista mixta

22 | 36 |
37 |

Lista de definición

38 |
39 |
Coche
40 |
Vehículo de catro rodas
41 |
Moto
42 |
Vehículo de dúas rodas
43 |
44 | 45 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 3/Ejercicio3HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cristina Correa 5 | 6 | 7 |

Esta página tiene dos enlaces: el primer enlace y el segundo enlace

8 | No se encontró la primera foto de la Polynesia 9 | No se encontró la segunda foto de la Polynesia 10 | 11 | No se encontró la segundaa foto de la Polynesia 15 | 16 | 17 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 3/polynesia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/HTML/Ejercicio 3/polynesia.jpg -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 4/Ejercicio4HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 07 Cristina Correa Práctica 4 5 | 6 | 7 | 8 |

Índice

9 | Lenguajes de marcas 10 |
11 | Tipos 12 |
13 | XML 14 | 15 | 16 |

Lenguajes de marcas

17 | 18 | 19 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 20 | dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 21 | book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 22 | unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 23 | recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 24 | 25 | 26 |

Tipos

27 | 28 | 29 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 30 | dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 31 | book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 32 | unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 33 | recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 34 | 35 | 36 |

XML

37 | 38 | 39 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 40 | dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 41 | book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 42 | unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 43 | recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 5/Ejercicio5ConRecreoHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cristina Correa 5 | 6 | 7 |

07 Correa Segade Cristina Ejercicio 5

8 |

Calendario con recreo

9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
LunesMartesMiércolesJuevesViernes
16:00-16:50SORFOL
16:50-17:40FOLFOLAW
17:40-18:30SRSOR
18:30-19:20SRSGI
Recreo
19:35-20:25SRSGIAWSORSGI
20:25-21:15EIESR
21:15-22:05EIE
67 | 68 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 5/Ejercicio5SinRecreoHTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cristina Correa 6 | 7 | 8 | 9 |

07 Correa Segade Cristina Ejercicio 5

10 |

Calendario sin recreo

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
LunesMartesMiércolesJuevesViernes
16:00-16:50SORFOL
16:50-17:40FOLFOLAW
17:40-18:30SRSOR
18:30-19:20SRSGI
19:35-20:25AWSGI
20:25-21:15EIESR
21:15-22:05EIE
63 | 64 | 65 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 6/Ejercicio6HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cristina Correa 5 | 6 | 7 |

07 Correa Segade Cristina Ejercicio 6

8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Cabecera 1Cabecera 2Cabecera 3Cabecera 4
Puedes acabar esto.Puedes estirarte por aquí
Como un puzzleEncima de aquí
AsíAsí
Me perdí
31 | 32 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 7/Ejercicio7HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cristina Correa 5 | 6 | 7 |

07 Correa Segade Cristina Ejercicio 7

8 | 9 | 10 | 11 | 18 | 25 | 32 | 39 | 40 | 41 | 42 | 48 | 54 | 55 | 56 | 62 | 69 | 70 | 71 | 77 | 84 | 85 |
Mis lugares favoritos 12 |
    13 |
  1. Toronto
    2. 14 |
  2. Reykjavik
    3. 15 |
  3. París
    4. 16 |
17 | 		19 | No se encuentra la imagen 24 | 26 | No se encuentra la imagen 31 | 33 | No se encuentra la imagen 38 |
Mis comidas favoritas 43 |
    44 |
  • Comida 1
    • 45 |
46 | Enlace a Receta 47 | 		49 | No carga la imagen 53 |
57 |
    58 |
  • Comida 2
    • 59 |
60 | Enlace a Receta 61 | 		63 | No se encuentra la imagen 68 |
72 |
    73 |
  • Comida 3
    • 74 |
75 | Enlace a Receta 76 | 		78 | No se encuentra la imagen 83 |
86 | 87 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 8/100_ipod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/HTML/Ejercicio 8/100_ipod.png -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 8/120_ipod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/HTML/Ejercicio 8/120_ipod.png -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 8/Ejercicio8HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Cristina Correa 5 | 6 | 7 |

07 Correa Segade Cristina Ejercicio 7

8 | 9 | 10 | 11 | 18 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 42 | 43 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
12 | No se encuentra la imagen 17 | 19 | No se encuentra la imagen 23 |
Capacidad2GB4GB8GB32GB2GB
ColoresBlanco 36 |
    37 |
  • Negro
    • 38 |
  • Rosa
    • 39 |
  • Dorado
    • 40 |
41 | 		Negro 44 |
    45 |
  • Negro
    • 46 |
  • Blanco
    • 47 |
48 |
Pantalla3 pulgadas7 pulgadas
Tiempo de Carga1 hora5 horas
30 minutos para 75%
64 | 65 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/HTML/Ejercicio 9/Ejercicio9HTML.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 07 Cristina Correa Formulario Ejercicio 9 6 | 7 | 8 |
9 | Nombre:
10 |

11 | 12 | Apellidos:
13 |

14 |
15 |

16 |
17 |

18 | 19 | Sexo:
20 | Hombre 21 | Mujer

22 | 23 | Redes sociales usadas habitualmente:
24 | Facebook
25 | Twitter
26 | Pinterest
27 | Instagram
28 | Otras
29 |

30 | 31 | Provincia
32 |

39 | 40 | Sube tu foto...
41 |

42 |

43 | 44 |
45 | 46 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/1 Lenguage XML/Ejercicio 1/Ejercicio1XML.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bohemian Rhapsody 5 | '39 6 | 7 | 8 | 9 | 10 | Superman 11 | These days 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/1 Lenguage XML/Ejercicio 2/EjercicioXML2A.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bohemian Rhapsody 6 | '39 7 | 8 | 9 | 10 | 11 | 12 | Superman 13 | These days 14 | 15 | 16 | 17 | 18 | 21 | Candy 22 | My Baby Wants 23 | to Rock 24 | & Roll 25 | 26 | 27 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/1 Lenguage XML/Ejercicio 2/EjercicioXML2B.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Programas con data > 2008 e < 2013 4 | 5 | GPL 6 | LGPL 7 | 8 | 9 | GPL 10 | Windows 11 | Linux 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/1 Lenguage XML/Ejercicio 3/EjercicioXML3.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Anaya 5 | El Principito 6 | Antoine de Saint-Exupéry 7 | En este gran clásico de la literatura francesa del pasado siglo, 8 | el autor nos demuestra la diferencia entre pretender escribir para niños y escribir a 9 | través del niño que fuimos. 10 | 11 | 12 | Ediciones Catedra 13 | Cantares Gallegos 14 | Rosalía de Castro 15 | En 1863 Rosalía publica "Cantares gallegos", cuyo prólogo 16 | contiene un alegato reivindicativo de Galicia y sus gentes 17 | 18 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/1 Lenguage XML/Ejercicio 4/Ejercicio4.1_4XML.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | Planificación e administración de redes 9 | 213 10 | 11 | 12 | Fundamentos hardware 13 | 107 14 | 15 | 16 | Xoan 17 | Cancedo da Foz 18 | 06/11/1991 19 | Xa fixo outro ciclo 20 | 21 | 22 | 23 | 24 | Maria 25 | Perez Gomez 26 | 06/12/1993 27 | Traballa polas trades 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 1/Ejercicio 1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 1/Ejercicio 1.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 1/Ejercicio1externo.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | maria@gmail.com 6 | ignacio@gmail.com 7 | pedro@edu.xunta.es 8 | Envíoche os arquivos 9 | D:\fotos\dePesca.jpg 10 | D:\docs\carta.odt 11 | D:\fotos\naCea.jpg 12 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 1/Ejercicio1interno.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | ]> 10 | 11 | 12 | maria@gmail.com 13 | ignacio@gmail.com 14 | pedro@edu.xunta.es 15 | Envíoche os arquivos 16 | D:\fotos\dePesca.jpg 17 | D:\docs\carta.odt 18 | D:\fotos\naCea.jpg 19 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 1/email.dtd: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 2a/Ejercicio 4-2_2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 2a/Ejercicio 4-2_2.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 2a/Ejercicio2aXML.xml: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 22 | 23 | 34 | 35 | 53 | 54 | 78 | 79 | 80 | 82 | 83 | 84 | 85 | 86 | 87 | ]> 88 | 89 | 90 | 91 | Michael Jackson 92 | cantante 93 | 94 | 95 | La voz 96 | cantante 97 | actor 98 | 12-dec-1915 99 | 100 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 2b/Ejercicio2bXML.xml: -------------------------------------------------------------------------------- 1 | 2 | 27 | 28 | 63 | 64 | 93 | 94 | 134 | 135 | 136 | 138 | 139 | 140 | ]> 141 | 142 | A linguaxeXMLouExtensible Markup Language 143 | é un subconxunto deSGMLque ten como propósito principal 144 | facilitar a transferencia de datos a través de diferentes plataformas, especialmente 145 | as conectadas a Internet 146 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 2b/Ejercicio4.2-2b.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 2b/Ejercicio4.2-2b.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 3/Ejercicio 3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 3/Ejercicio 3.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 3/Ejercicio3.xml: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 16 | 17 | 18 | maria@gmail.com 19 | ignacio@gmail.com 20 | pedro@edu.xunta.es 21 | Envíoche os arquivos 22 | D:\fotos\dePesca.jpg 23 | D:\docs\carta.odt 24 | D:\fotos\naCea.jpg 25 | 26 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 3/email.dtd: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4a/Ejercicio 4a.docx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4a/Ejercicio 4a.docx.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4a/Ejercicio4a1.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | ]> 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4a/Ejercicio4a2.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | ]> 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4a/Ejercicio4a3.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 7 | ]> 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4b/Ejercicio 4b.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4b/Ejercicio 4b.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4b/Ejercicio4b-a.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | ]> 9 | 10 | 11 | Bases de datos 12 | XML 13 | Redes 14 | 15 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4b/Ejercicio4b-b.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | ]> 8 | 9 | 10 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4b/Ejercicio4b-c.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | ]> 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 4b/Ejercicio4b-d.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | 11 | 12 | ]> 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 5/07Correa_Segade_Cristina5aXML.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ponzano 6 | 66 7 | Madrid 8 | Madrid 9 | 28003 10 | 11 | 12 | Formigón 13 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 5/07Correa_Segade_Cristina5bXML.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 8 | 9 | 13 | 14 | 15 | 16 | ]> 17 | 18 | 19 | 20 | 21 | 22 | Escola de música Andaina 23 | 24 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 5/07Correa_Segade_Cristina_Ejercicio5XML.PDF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 5/07Correa_Segade_Cristina_Ejercicio5XML.PDF -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 5/Ejercicio5.PDF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 5/Ejercicio5.PDF -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 5/Tarefa5a.dtd: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 6/Ejercicio 6.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 6/Ejercicio 6.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 6/Ejercicio6.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | 14 | 15 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | ]> 28 | 29 | 30 | 31 | 32 | 33 | Chegan sobre as 23:30 34 | 35 | 36 | 37 | 38 | Saída as 16:00 39 | 40 | 41 | 42 | 43 | 44 | 45 | Eva 46 | Sobral García 47 | 688998899 48 | eva.sobral@meucorreo.com 49 | 50 | 51 | Xan 52 | López Paz 53 | 677778899 54 | 55 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 7/07Correa_Segade_CristinaEjercicio7XML.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Alberto Núñez Feijóo 6 | 7 | 8 | 9 | 7092 10 | A Coruña 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 9856 24 | Lugo 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 7273 38 | Ourense 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 7/Ejercicio 4-2_7.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 7/Ejercicio 4-2_7.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/2 Validación de documentos XML/Ejercicio 7/comunidades.dtd: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 32 | 33 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/XSD/Ej 1/Ejercicio 1 XSD.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CrisCorreaS/apuntes-html-css-xml/e530c363fbbe74f1c9adb5efb1864fc4af514ca4/Lenguaje de Marcas/XML/XSD/Ej 1/Ejercicio 1 XSD.pdf -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/XSD/Ej 1/marcadores.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | Abrirllave 6 | Tutoriales de informática. 7 | http://www.abrirllave.com/ 8 | 9 | 10 | Wikipedia 11 | La enciclopedia libre. 12 | http://www.wikipedia.org/ 13 | 14 | 15 | W3C 16 | World Wide Web Consortium. 17 | http://www.w3.org/ 18 | 19 | -------------------------------------------------------------------------------- /Lenguaje de Marcas/XML/XSD/Ej 1/marcadores.xsd: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Repositorio de Ejercicios de HTML, CSS y XML 2 | ![Badge Finalizado](https://img.shields.io/badge/STATUS-FINALIZADO-violet) 3 | License MIT
4 | html5 5 | css3 6 |
7 |
8 | Este repositorio contiene una colección de ejercicios de HTML, CSS y XML que realicé como parte de la asignatura de "Lenguajes de Marcas y Sistemas de Gestión de Información" y un conjunto de cursos de HTML y CSS variados que he hecho y de los que he sacado un montón de apuntes. 9 | 10 | ## 📖 Contenido 11 | El repositorio se divide en diferentes secciones: 12 | 13 | ### 📓 Lenguaje de Marcas: 14 | 15 | ##### HTML 16 | - **Ejercicios Básicos de HTML:** En esta sección se presentan ejercicios introductorios de HTML. Aquí encontrarás ejemplos simples de estructura de páginas web, etiquetas HTML básicas, enlaces, imágenes, listas, etc. 17 | 18 | ##### CSS 19 | - **Ejercicios Básicos de CSS:** En esta sección se presentan ejercicios introductorios de CSS. Aquí encontrarás ejemplos de estilos básicos para modificar la apariencia de elementos HTML, como colores, fuentes, márgenes y tamaños. 20 | 21 | ##### XML 22 | - **Ejercicios de Base de XML:** En esta sección se encuentran ejercicios que abarcan los fundamentos del lenguaje XML. Aquí se pueden encontrar ejemplos de estructura de documentos XML, uso de elementos y atributos, y prácticas relacionadas con la organización y jerarquía de los datos. 23 | 24 | - **Ejercicios de Validación de Documentos:** Esta sección contiene ejercicios enfocados en la validación de documentos XML. Aquí se exploran conceptos como DTD (Document Type Definition) y XML Schema, y se practica la validación de documentos XML utilizando estas herramientas. 25 | 26 | ### 📚 Curso HTML y CSS: 27 | 28 | ## 📈 Nivel de Dificultad 29 | Este repositorio está diseñado para principiantes que acaban de aprender los conceptos básicos de los lenguajes de marcado. Los ejercicios se centran en sentar las bases y brindar práctica en la aplicación de los conceptos aprendidos. 30 | 31 | ## 💻 Uso 32 | - Puedes clonar este repositorio en tu máquina local utilizando el siguiente comando: 33 | `git clone https://github.com/CrisCorreaS/repositorio-de-ejercicios-html-css-xml.git` 34 | 35 | - Explora las diferentes secciones y los ejercicios disponibles. Cada ejercicio se encuentra en una carpeta separada y contiene los archivos necesarios para completarlo. 36 | 37 | ## ✨ Contribuciones 38 | Las contribuciones a este repositorio no están abiertas en este momento. 39 | 40 | ## ➡️ Licencia 41 | Este proyecto se encuentra bajo la licencia MIT. Consulta el archivo LICENSE para obtener más información. 42 | --------------------------------------------------------------------------------