├── Parte_III_Aniadiendo_contenido_Etiquetas_Basicas ├── III_1_Elementos_Texto │ ├── Elementos_de_Texto.pdf │ ├── README.md │ └── texto.html ├── III_2_Imagenes_enlaces_rutas │ ├── Imágenes_Enlaces_y_rutas.pdf │ ├── README.md │ ├── imagenes_enlaces_rutas.html │ └── img │ │ ├── figure_dom.png │ │ └── openwebinars-logo.jpg ├── III_3_Ejercicio │ ├── Ejercicio_Práctico_Imágenes_Rutas_Enlaces.pdf │ ├── README.md │ ├── ejer_img.html │ └── img │ │ ├── chrome.jpeg │ │ ├── css3.png │ │ └── html5.png ├── III_4_Listas │ ├── Listas.pdf │ ├── README.md │ ├── img │ │ ├── description_list.png │ │ ├── ordered_list.png │ │ └── unordered_list.png │ └── listas.html ├── III_5_Ejercicio_Listas │ ├── Ejercicio_Práctico_Listas.pdf │ ├── README.md │ └── ejercicio_listas.html ├── III_6_Tablas │ ├── README.md │ ├── Tablas.pdf │ ├── img │ │ ├── complex_table.png │ │ └── tables.png │ └── tablas.html ├── III_7_Borde_de_Tablas │ ├── Borde_de_las_Tablas.pdf │ ├── README.md │ └── borde_tablas.html ├── III_8_Ejercicio_Tablas │ ├── Ejercicio_Práctico_Tablas.pdf │ ├── README.md │ ├── ex_table.html │ └── img │ │ ├── 100_ipod.png │ │ └── 120_ipod.png └── README.md ├── Parte_II_Documentos_HTML ├── II_1_Evolución_de_HTML │ └── Evolución_de_HTML.pdf ├── II_2_Etiquetas_atributos_comentarios │ ├── Etiquetas_atributos_comentarios.pdf │ └── README.md ├── II_3_Estructura_web │ ├── Estructura_de_una_pagina_Web.pdf │ ├── README.md │ ├── dom │ │ ├── html_dom.graphml.xml │ │ └── html_dom.png │ └── index.html ├── II_4_La_cabecera │ ├── La_cabecera_de_una_pagina_web.pdf │ ├── README.md │ └── charset_example.html ├── README.md └── img │ └── openwebinars-logo.jpg ├── Parte_IV_Formularios_en_HTML ├── Parte_IV_1_Formularios_HTML │ ├── Formulario_en_HTML_Estructura.pdf │ ├── README.md │ ├── forms.html │ └── img │ │ ├── fieldset.png │ │ └── formularios_elementos.png ├── Parte_IV_2_Tipos_de_Inputs_en_formularios │ ├── README.md │ ├── Tipos_de_Inputs_en_formularios.pdf │ ├── img │ │ └── tipos.png │ └── inputs.html ├── Parte_IV_3_Ejercicio_Formularios │ ├── Ejercicio_Práctico_Formularios.pdf │ ├── README.md │ ├── ejercicio_formularios.html │ └── img │ │ └── formularios_ejercicios.png └── README.md ├── Parte_I_Introduccion ├── Entorno_de_Trabajo.pdf ├── Estructura_Resto_del_Curso.pdf ├── Introducción_al_curso.pdf ├── Que_es_CSS.pdf ├── Que_es_HTML.pdf └── README.md ├── Parte_VI_CSS ├── README.md ├── VI_10_Propiedades_Navegadores │ ├── Propiedades_específicas_para_navegadores.pdf │ └── README.md ├── VI_11_Optimización_CSS │ ├── Optimización_de_CSS.pdf │ └── README.md ├── VI_12_Herramientas │ ├── Herramientas_relacionadas_con_CSS.pdf │ └── README.md ├── VI_1_Evolución_CSS_a_CSS3 │ ├── Evolución_de_CSS_hasta_CSS3.pdf │ └── README.md ├── VI_2_Estilo_en_HTML │ ├── Añadir_Estilos_a_muestro_HTML.pdf │ ├── README.md │ ├── css │ │ ├── estilos.css │ │ └── import.css │ └── estilos.html ├── VI_3_Modelo_de_Caja │ ├── El_modelo_de_caja.Elementos_en_linea_y_en_bloque.pdf │ ├── README.md │ ├── img │ │ ├── bloque.png │ │ ├── box.png │ │ ├── linea.png │ │ └── openwebinars-logo.jpg │ └── modelo_de_caja.html ├── VI_4_Selectores_CSS.En_cascada │ ├── README.md │ ├── Selectores.Hojas_de_estilos_en_cascada.pdf │ ├── css │ │ └── estilos.css │ ├── img │ │ ├── openwebinars-logo.jpg │ │ └── selectores.png │ └── selectores.html ├── VI_5_Propiedades_Interesantes │ ├── Propiedades_interesantes.pdf │ ├── README.md │ ├── css │ │ └── estilos.css │ ├── img │ │ ├── openwebinars-logo.jpg │ │ └── selectores.png │ └── propiedades.html ├── VI_6_Ejercicio_con_selectores │ ├── Ejercicios_con_selectores.pdf │ ├── README.md │ ├── css │ │ └── estilos.css │ ├── ejercicio.html │ └── img │ │ ├── 100_ipod.png │ │ ├── 120_ipod.png │ │ └── resultado.png ├── VI_7_Pseudoselectores_Pseudoelementos │ ├── Pseudoselectores.pdf │ ├── README.md │ ├── css │ │ └── estilos.css │ ├── img │ │ ├── pseudoelementos.png │ │ └── pseudoselectores.png │ └── pseudo.html ├── VI_8_Ejercicio_pseudo_selectores │ ├── Ejercicios_con_pseudoselectores.pdf │ ├── README.md │ ├── css │ │ └── estilos.css │ ├── ejercicio.html │ └── img │ │ └── resultado.png └── VI_9_Estilos_por_defecto │ ├── Estilos_por_defecto.Reseteo_de_propiedades.pdf │ ├── README.md │ ├── css │ └── estilos.css │ └── por_defecto.html ├── Parte_V_Mas_etiquetas_accesibilidad ├── Parte_V_1_Etiquetas_Multimedia │ ├── Etiquetas_Multimedia.pdf │ ├── README.md │ ├── img │ │ └── multimedia.png │ ├── multimedia.html │ └── multimedia_files │ │ ├── Frase_de_Neil_Armstrong.mp3 │ │ ├── Frase_de_Neil_Armstrong.ogg │ │ ├── Frase_de_Neil_Armstrong_en.vtt │ │ └── Frase_de_Neil_Armstrong_es.vtt ├── Parte_V_2_Etiquetas_Semanticas │ ├── Etiquetas_Semánticas.pdf │ └── README.md ├── Parte_V_3_Otras_etiquetas │ ├── Otras_Etiquetas.pdf │ ├── README.md │ └── otras.html ├── Parte_V_4_Accesibilidad_HTML │ ├── Accesibilidad_en_HTML.pdf │ └── README.md └── README.md └── README.md /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_1_Elementos_Texto/Elementos_de_Texto.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_1_Elementos_Texto/Elementos_de_Texto.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_1_Elementos_Texto/README.md: -------------------------------------------------------------------------------- 1 | Vamos a empezar a añadir elementos a nuestra página web que, es lo mismo que decir, que vamos a empezar a añadir etiquetas dentro de la etiqueta ****. 2 | 3 | Hay muchas etiquetas para añadir texto y nosotros vamos a presentarlas siguiendo la siguiente clasificación: 4 | 5 | - Encabezados 6 | - Etiquetas de formato 7 | - Otras etiquetas interesantes 8 | 9 | ### Encabezados 10 | 11 | Son etiquetas que nos van a permitir añadir "títulos" o encabezados a distintas secciones de nuestra página. Estas etiquetas tienen el siguiente formato: 12 | 13 | ```html 14 | 15 | ... 16 | Contenido o texto 17 | ... 18 | 19 | ``` 20 | 21 | **x** deberá ser sustituido por un número del 1 al 6, desde 1 que es el mayor tamaño hasta 6 que es el más pequeño. El texto se mostrará en negrita. 22 | 23 | Veámos un ejemplo simple: 24 | 25 | ```html 26 |

Hola

27 |

Hola

28 |

Hola

29 |

Hola

30 |
Hola
31 |
Hola
32 | ``` 33 | 34 | ### Etiquetas de formato 35 | 36 | Hay multitud, todas le dan cierto estilo al texto que contienen y destacaremos las siguientes: 37 | 38 | - **`...`** para poner un texto en negrita. 39 | - **`...`** para poner un texto en cursiva. 40 | - **`...`** para mostrar un texto tachado. 41 | - **`...`** para poner un texto con énfasis (similar a cursiva). 42 | - **`...`** para poner un texto como superíndice de otro texto. 43 | - **`...`** para poner un texto como subíndice de otro texto. 44 | - **`...`** para poner un texto subrayado (nuevo en html5). 45 | - **`...`** para mostrar una pequeña cita. 46 | - **`...`** para mostrar el título de una referencia bibliográfica. 47 | - **``** para mostrar horas. 48 | - **`
...
`** para mostrar direcciones. 49 | - **`
...
`** para poner citas largas. 50 | 51 | ### Otras etiquetas interesantes 52 | 53 | - **`
`** Salto de línea. 54 | - **`

...

`** Párrafo. 55 | - **`
`** Separación de Tema. 56 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_1_Elementos_Texto/texto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Elementos de texto 9 | 10 | 11 | 12 | 13 | 14 |

Hola

15 |

Hola

16 |

Hola

17 |

Hola

18 |
Hola
19 |
Hola
20 | 21 | 22 | Hola 23 | 24 | 25 | 26 | 27 | 28 | 29 |

Texto en negrita

30 | 31 |

Texto en cursiva

32 | 33 |

Texto tachado

34 | 35 |

Texto en enfasis

36 | 37 |

Texto pequeño

38 | 39 |

X2 y X3

40 | 41 |

Texto subrayado

42 | 43 |

Pequeña cita

44 | 45 |

46 | 47 |

Titulo de un artículo 48 |

49 | Texto largo del artículo al que hacemos referencia 50 |
51 |

52 | 53 |
54 |

Juan Diego Pérez

55 |

OpenWebinars.net

56 |

Sevilla

57 |
58 | 59 | 60 | 61 | 62 | Hola
Adiós 63 | 64 |
Cambiando de tema 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/Imágenes_Enlaces_y_rutas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/Imágenes_Enlaces_y_rutas.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/README.md: -------------------------------------------------------------------------------- 1 | ## Imagenes, enlaces y rutas 2 | 3 | Tras añadir elementos de texto a nuestra página, al cuerpo de la misma, vamos a continuar mejorando y haciendo nuestras webs más bonitas e interactivas ya que, hasta ahora, lo que hemos venido creando es realmente "feo". 4 | 5 | Para ello, en este apartado vamos a añadir dos elementos básicos en toda web: 6 | 7 | - Las imágenes 8 | - Los enlaces 9 | 10 | Y además, explicaremos qué es un ruta y las clases que hay ya que, estos dos elementos anteriores, van a utilizar rutas en sus atributos. 11 | 12 | ### Imágene simples 13 | 14 | La inclusión de imágenes simples se viene haciendo desde las primeras versiones de HTML con la etiqueta sin contendio **``** 15 | 16 | Los atributos más comunes que le podemos poner a esta etiqueta son: 17 | 18 | - **src:** que indica la ruta en la que se encuentra el archivo de la imagen. 19 | - **alt:** un texto alternativo para describir la imagen en caso de que no se cargue o para dispositivos especiales para usuarios con discapacidad visual (por ejemplo) 20 | - **width:** para especificar la anchura de la imagen (px, % etc..). Si no se escogerá la anchura propia de la misma. 21 | - **height:** para especificar la altura de la imagen (px, % etc..). Si no se escogerá la altura propia de la misma. 22 | 23 | Es importante destacar que la imagen es un elemento en línea que se pone, si cabe, inmediatamente después de los elementos previamente añadidos. 24 | 25 | Algunos ejemplos de utilización de estos atributos podrían ser: 26 | 27 | ```html 28 | 29 | 30 | Logo de OpenWebinars 31 | 32 | 33 | 34 | Logo de OpenWebinars 35 | 36 | 37 | Logo de OpenWebinars 38 | 39 | 40 | Logo de OpenWebinars 41 | Logo de OpenWebinars 42 | 43 | 44 | Logo de OpenWebinars 45 | ``` 46 | 47 | ### Rutas 48 | 49 | El concepto de ruta es un concepto muy importante ya que se utiliza es muchos temas relacionados con la informática y en concreto, en la creación de páginas WEB, se utiliza para referenciar archivos, recursos y/o partes de alguna web. De manera general podemos distinguir: 50 | 51 | - **Relativas:** Toman como base el directorio en el que se encuentra nuestro fichero. Son las recomendadas. 52 | 53 | ```html 54 | Logo de OpenWebinars 55 | ``` 56 | 57 | - **Absolutas:** Toman como base el directorio raíz de mi equipo (/ en Linux y c:\\ en Windows). Cuidado, sólo funcionarán en tu mismo equipo. 58 | 59 | ```html 60 | Logo de OpenWebinars 61 | ``` 62 | 63 | - **Url:** La dirección de Internet de un recurso (fichero, imagen etc..). Puede desaparecer y entonces dejará de mostrarse en nuestra web. 64 | 65 | ```html 66 | Logo de OpenWebinars 67 | ``` 68 | 69 | ### Figuras 70 | 71 | Una novedad en HTML5 es la construcción de etiquetas alrededor de **
** que nos va a permitir mostrar una imagen con un texto asociado. 72 | 73 | En este caso el árbol DOM será el siguiente: 74 | 75 | ![Árbol DOM para una figura](./img/figure_dom.png) 76 | 77 | Donde: 78 | 79 | - **`
`** es la etiqueta padre. 80 | - **``** es una etiqueta de imagen que hemos visto anteriormente. 81 | - **`
`** es una etiqueta que contendrá el texto asociado a la imagen. 82 | 83 | Un ejemplo: 84 | 85 | ```html 86 |
87 | Logo de OpenWebinars 88 |
Logotipo de OpenWebinars con la etiqueta figure
89 |
90 | ``` 91 | 92 | ### Enlaces 93 | 94 | Los enlaces, que se representan mediante el uso de la etiqueta **``** es una de las contrucciones más importantes en HTML. Esta etiqueta puede tener varios atributos, de lo cuáles los más importante son: 95 | 96 | - **href:** que es la dirección de Internet de destino (ya sea otra página web, un imágen, un fichero o lo que sea). 97 | - **target:** que indica dónde voy a abrir ese enlace. Si no pongo nada se abrirá en la misma pantalla y si le doy el valor **target="\_blank"** se abrirá en una nueva ventana de mi navegador. 98 | 99 | Varios ejemplos de enlaces: 100 | 101 | ```html 102 |

Esto en un enlace en la propia página

103 | 104 |

Esto en un enlace en la propia página

105 | 106 | 107 | Logo de OpenWebinars 108 | ``` 109 | 110 | ### Enlaces dentro de la misma página 111 | 112 | Puedo enlazar enlaces dentro de la misma página con construcciones como la siguiente: 113 | 114 | ```html 115 | ... 116 | Contacto 117 | ... 118 |
119 | ..... 120 |
121 | .... 122 | ``` 123 | 124 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/imagenes_enlaces_rutas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Imágenes , enlaces y rutas 9 | 10 | 11 | 12 | 13 | 14 | 15 | Logo de OpenWebinars 16 | 17 | 18 | Logo de OpenWebinars 19 | 20 | 21 | Logo de OpenWebinars 22 | 23 | 24 | Logo de OpenWebinars 25 | Logo de OpenWebinars 26 | 27 | 28 | Logo de OpenWebinars 29 | 30 | 31 | 32 |
33 | Logo de OpenWebinars 34 |
Logotipo de OpenWebinars con la etiqueta figure
35 |
36 | 37 | 38 |

Esto en un enlace en la propia página

39 | 40 |

Esto en un enlace en la propia página

41 | 42 | 43 | Logo de OpenWebinars 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/img/figure_dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/img/figure_dom.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/img/openwebinars-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_2_Imagenes_enlaces_rutas/img/openwebinars-logo.jpg -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/Ejercicio_Práctico_Imágenes_Rutas_Enlaces.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/Ejercicio_Práctico_Imágenes_Rutas_Enlaces.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/README.md: -------------------------------------------------------------------------------- 1 | ## Ejercicio práctico con Imágenes y enlaces 2 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/ejer_img.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ejercicio de Imáges y enlaces 8 | 9 | 10 | 11 |

12 | 13 | 14 |

15 |

16 | 17 |

18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/img/chrome.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/img/chrome.jpeg -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/img/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/img/css3.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/img/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_3_Ejercicio/img/html5.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/Listas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/Listas.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/README.md: -------------------------------------------------------------------------------- 1 | Las listas son una de las construcciones más usadas a la hora de elaborar textos, no sólo en HTML. No obstante, en HTML están también presentes y pueden ser de 3 tipos: 2 | 3 | - **Listas Numeradas:** que son aquellas que expresan un orden enre los diferentes elementos de la lista. Este orden podrá ser numérico, alfabético etc.. 4 | - **Listas no numeradas:** que simplemente muestra los elementos de la lista uno tras otro. 5 | - **Listas de definición:** que muestran diversos términos junto con su definición. 6 | 7 | A continuación vamos a ver el árbol DOM para cada una de esta variedades: 8 | 9 | ###Lista Numeradas 10 | 11 | ![Arbol DOM listas numeradas](./img/ordered_list.png) 12 | 13 | Un ejemplo: 14 | 15 | ```html 16 | 17 |

Lista Numerada - Ordered List (ol)

18 |
    19 |
  1. Primer elemento
    2. 20 |
  2. Segundo elemento
    3. 21 |
  3. Tercer Elemento
    4. 22 |
  4. Cuarto elemento
    5. 23 |
24 | ``` 25 | 26 | **ol** sería la etiqueta padre y cada uno de los elemento de la lista iría en una etiqueta **li**. 27 | 28 | ###Listas no Numeradas 29 | 30 | ![Arbol DOM listas numeradas](./img/unordered_list.png) 31 | 32 | Un ejemplo: 33 | 34 | ```html 35 | 36 |

Lista NO Numerada - Unordered List (ul)

37 |
    38 |
  • Primer elemento
    • 39 |
  • Segundo elemento
    • 40 |
  • Tercer Elemento
    • 41 |
  • Cuarto elemento
    • 42 |
43 | ``` 44 | 45 | **ul** sería la etiqueta padre y cada uno de los elemento de la lista iría en una etiqueta **li**. 46 | 47 | ###Listas de definición 48 | 49 | ![Arbol DOM listas numeradas](./img/description_list.png) 50 | 51 | Un ejemplo: 52 | 53 | ```html 54 | 55 |

Lista de descripción - Description List (dl)

56 |
57 |
Primer término
58 |
Definición del primer término
59 |
Segundo término
60 |
Definición del segundo término
61 |
Tercer término
62 |
Definición del tercer término
63 |
Cuarto término
64 |
Definición del cuarto término
65 |
66 | ``` 67 | 68 | **Dl** sería la etiqueta padre y cada término se define mostrando consecutivamente las etiquetas **dt**, que se corresponde con el término que vamos a definir, y **dd** que es la definición del término anterior. 69 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/img/description_list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/img/description_list.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/img/ordered_list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/img/ordered_list.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/img/unordered_list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/img/unordered_list.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_4_Listas/listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Listas en HTML 9 | 10 | 11 | 12 | 13 |

Lista Numerada - Ordered List (ol)

14 |
    15 |
  1. Primer elemento
    2. 16 |
  2. Segundo elemento
    3. 17 |
  3. Tercer Elemento
    4. 18 |
  4. Cuarto elemento
    5. 19 |
20 | 21 | 22 | 23 |

Lista NO Numerada - Unordered List (ul)

24 |
    25 |
  • Primer elemento
    • 26 |
  • Segundo elemento
    • 27 |
  • Tercer Elemento
    • 28 |
  • Cuarto elemento
    • 29 |
30 | 31 | 32 |

Lista de descripción - Description List (dl)

33 |
34 |
Primer término
35 |
Definición del primer término
36 |
Segundo término
37 |
Definición del segundo término
38 |
Tercer término
39 |
Definición del tercer término
40 |
Cuarto término
41 |
Definición del cuarto término
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_5_Ejercicio_Listas/Ejercicio_Práctico_Listas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_5_Ejercicio_Listas/Ejercicio_Práctico_Listas.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_5_Ejercicio_Listas/README.md: -------------------------------------------------------------------------------- 1 | ## Ejercicio práctico con Listas 2 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_5_Ejercicio_Listas/ejercicio_listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
    11 |
  1. General Aviation 12 |
      13 |
    1. Single Aviation Aircraft
      2. 14 |
    2. Dual Engine Aircraft
      3. 15 |
    16 |
    2. 17 |
  2. Comercial Aviationgine 18 |
      19 |
    • Dual Engine
      • 20 |
    • Tri-Engine
      • 21 |
    22 |
    3. 23 |
24 | 25 |
    26 |
  • A 27 |
      28 |
    • B 29 |
        30 |
      1. C
        2. 31 |
      2. D
        3. 32 |
      33 |
      • 34 |
    • E 35 |
        36 |
      • F
        • 37 |
      • G
        • 38 |
      39 |
      • 40 |
    41 |
    • 42 |
  • B
    • 43 |
44 | 45 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/README.md: -------------------------------------------------------------------------------- 1 | ## Tablas en HTML 2 | 3 | Otras de las construcciones básicas en HTML son las tablas. 4 | 5 | Además de para la presentación de elementos se usaron históricamente para dar estructura a las páginas. No obstante, por motivos que explicaremos en el próximo curso de este itinerario, ya no se maqueta con tablas. 6 | 7 | A pesar de eso siguen siendo un elemento importante y a continuación vamos a presentar varias formas de hacer tablas. 8 | 9 | ### Tablas Simples 10 | 11 | La estructura del árbol DOM más simple para una tabla sería similar a la siguiente: 12 | 13 | - Una etiqueta **``** que contiene toda la tabla. 14 | - Como hijos directos, tantas etiquetas **** como fijas queramos que tenga nuestra tabla. 15 | - Dentro de cada filas tantas celdas (**
** o ****) como queramos que tengan nuestras filas.La única diferencia entre estas dos es que el contenido en la segunda se presenta centrado y el texto en negrita. 16 | 17 | **NOTA:** Si no coinciden el número de celdas en todas las filas veremos que sucecen cosas "extrañas". 18 | 19 | **NOTA:** La anchura de las celdas de una misma columna será la anchura de la más ancha de la columna. 20 | 21 | **NOTA:** La altura de las celdas de una misma fija será la altura de la más alta de la fila. 22 | 23 | ![Árbol DOM de Tabla Simple](./img/tables.png) 24 | 25 | Un ejemplo sería: 26 | 27 | ```html 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 |
NombreApellidosDirección
PepePérezAquí
ManuelLópezAllí
MaríaFernándezMas allá
SaraGallardoMas aquí
56 | ``` 57 | 58 | ### Tablas Completas 59 | 60 | Existe además una forma más precisa y completa de construir tablas. Una forma que puede contener (aunque no es obligatorio) otras etiquetas dentro de la etiqueta raíz **``**. Estas nuevas etiquetas pueden ser: 61 | 62 | - **``** que nos permite agrupar los columnas para darles estilos. Cada uno de esos grupos lo definiremos usando una etiqueta **** con un atributo **span** para definir el número de columnas de cada grupo. 63 | - **``** que contendrá la fila (usualmente) o filas que sean la cabecera de una tabla. 65 | - **``** que es donde pondremos las filas que son el contenido propiamente dicho de la tabla, el cuerpo. 66 | - **``** que es donde pondremos las filas que son el pie de nuestra tabla. 67 | 68 | ![Árbol DOM de Tabla Simple](./img/complex_table.png) 69 | 70 | Un ejemplo sería: 71 | 72 | ```html 73 |
`** para añadir un título o leyenda a la tabla en la parte superior. 64 | - **`
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 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 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 |
Alumnos matriculados
NombreApellidosDirecciónTeléfonoEmail
PepePérezAquí11111111yosoy@pepe.es
ManuelLópezAllí222222222yosoy@manuel.es
MaríaFernándezMas allá33333333yosoy@maria.es
SaraGallardoMas aquí44444444yosoy@sara.es
Pie de la tabla donde pongo más texto para que se vea como crecen
125 | ``` 126 | 127 | ### Tablas Complejas 128 | 129 | Con todo lo explicado anteriormente podemos ver que las tablas que conseguimos son relativamente sencillas. En la vida real, nos encontraremos con estructuras tabulares más complejas. Éstas también se pueden construir en HTML utilizando los siguientes atributos en las etiquetas **		** y ****, es decir, en las celdas. 130 | 131 | - **rowspan:** me va a permitir que una celda ocupe más de una fila. 132 | - **colspan:** me va a permitir que una celda ocupe más de una columna. 133 | 134 | **NOTA:** Antes de escribir el código HTML de una tabla compleja es recomendable estudiar su estructura previamente. Puede parecer broma pero yo sigo usando papel y lápiz para eso ;) (tú mismo) 135 | 136 | Un ejemplo sería: 137 | 138 | ```html 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 |
HORARIO DE CLASE CURSO 2018-2019
HORASLunesMartesMiércolesJuevesViernes
8:00MatemáticasLenguaInglésCiencias
9:00HistoriaCienciasMatemáticasLengua
10:00RECREO
10:30InglésCienciasMatemáticasLenguaHistoria
11:30HistoriaCienciasMatemáticasInglés
187 | ``` 188 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/Tablas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/Tablas.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/img/complex_table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/img/complex_table.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/img/tables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/img/tables.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_6_Tablas/tablas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tablas en HTML 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 |
NombreApellidosDirecciónTeléfonoEmail
PepePérezAquí11111111yosoy@pepe.es
ManuelLópezAllí222222222yosoy@manuel.es
MaríaFernándezMas allá33333333yosoy@maria.es
SaraGallardoMas aquí44444444yosoy@sara.es
52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 |
Alumnos matriculados
NombreApellidosDirecciónTeléfonoEmail
PepePérezAquí11111111yosoy@pepe.es
ManuelLópezAllí222222222yosoy@manuel.es
MaríaFernándezMas allá33333333yosoy@maria.es
SaraGallardoMas aquí44444444yosoy@sara.es
Pie de la tabla donde pongo más texto para que se vea como crecen
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
HORARIO DE CLASE CURSO 2018-2019
HORASLunesMartesMiércolesJuevesViernes
8:00MatemáticasLenguaInglésCiencias
9:00HistoriaCienciasMatemáticasLengua
10:00RECREO
10:30InglésCienciasMatemáticasLenguaHistoria
11:30HistoriaCienciasMatemáticasInglés
157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_7_Borde_de_Tablas/Borde_de_las_Tablas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_7_Borde_de_Tablas/Borde_de_las_Tablas.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_7_Borde_de_Tablas/README.md: -------------------------------------------------------------------------------- 1 | ## Borde de las tablas 2 | 3 | En el apartado anterior, apartado en el que hemos presentado las tablas, no hemos hablado para nada de los bordes que normalmente pueden presentar estas estructuras. 4 | 5 | De hecho habéis podido ver que, por defecto, los navegadores no le ponen borde a las tablas. 6 | 7 | Para ponerles bordes nos tenemos que adelantar un poquito en el temario y hablar de estilos, de CSS. 8 | 9 | No es totalmente correcto lo que vamos a hacer aquí, pero nos va a servir para entender los tipos de bordes más usados (hay muchos más). 10 | 11 | En princio lo que vamos a hacer es lo siguiente: 12 | 13 | ```html 14 | 15 | ... 16 | 17 | 18 | 23 | 24 | 25 | ``` 26 | 27 | Y vamos a presentar tres tipos de bordes, los que considero más usados. 28 | 29 | - **Bordes Simple** 30 | - **Bordes sin colapsar** 31 | - **Bordes inferior o superior** 32 | 33 | ### Bordes Simples 34 | 35 | Pondremos dentro la etiqueta **` --> 21 | 22 | 29 | 30 | 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 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
HORARIO DE CLASE CURSO 2018-2019
HORASLunesMartesMiércolesJuevesViernes
8:00MatemáticasLenguaInglésCiencias
9:00HistoriaCienciasMatemáticasLengua
10:00RECREO
10:30InglésCienciasMatemáticasLenguaHistoria
11:30HistoriaCienciasMatemáticasInglés
91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/Ejercicio_Práctico_Tablas.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/Ejercicio_Práctico_Tablas.pdf -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/README.md: -------------------------------------------------------------------------------- 1 | ## Ejercicio práctico con tablas 2 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/ex_table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ejercicio práctico con tablas 9 | 10 | 21 | 22 | 23 | 24 |

Ejercicio práctico con Tablas

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 41 | 44 | 47 | 50 | 53 | 54 | 55 | 56 | 57 | 64 | 65 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 |
Capacidad 39 |

2GB

40 | 		42 |

4GB

43 | 		45 |

8GB

46 | 		48 |

32GB

49 | 		51 |

2GB

52 |
ColoresBlanco 58 |
    59 |
  • Negro
    • 60 |
  • Rosa
    • 61 |
  • Dorado
    • 62 |
63 | 		Negro 66 |
    67 |
  • Negro
    • 68 |
  • Blanco
    • 69 |
70 |
Pantalla3 pulgadas7 pulgadas
Tiempo de Carga1 hora5 horas
30 minutos para 75%
89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/img/100_ipod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/img/100_ipod.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/img/120_ipod.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/III_8_Ejercicio_Tablas/img/120_ipod.png -------------------------------------------------------------------------------- /Parte_III_Aniadiendo_contenido_Etiquetas_Basicas/README.md: -------------------------------------------------------------------------------- 1 | ## Iniciación a HTML y CSS 2 | 3 | ### Añadiendo contenidos a mi página. Etiquetas básicas 4 | 5 | - Etiquetas relacionadas con texto, cabeceras, párrafos y demás. 6 | - Imágenes, enlaces y rutas. 7 | - Ejercicio práctico con imágenes y enlaces. 8 | - Listas. 9 | - Ejercicio práctico con listas. 10 | - Tablas. 11 | - El borde de las tablas. 12 | - Ejercicio práctico con tablas. 13 | 14 | Curso desarrollado por [pekechis](http://github.com/pekechis) para [OpenWebinars](https://openwebinars.net/) 15 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_1_Evolución_de_HTML/Evolución_de_HTML.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_II_Documentos_HTML/II_1_Evolución_de_HTML/Evolución_de_HTML.pdf -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_2_Etiquetas_atributos_comentarios/Etiquetas_atributos_comentarios.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_II_Documentos_HTML/II_2_Etiquetas_atributos_comentarios/Etiquetas_atributos_comentarios.pdf -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_2_Etiquetas_atributos_comentarios/README.md: -------------------------------------------------------------------------------- 1 | Anteriormente hemos definido **HTML** como un lenguaje de marcas o etiquetas pero, ¿qué es eso de una etiqueta? y ¿qué tipos de etiquetas tengo? 2 | 3 | Básicamente podemos distinguir entre dos tipos de etiquetas: 4 | 5 | - Etiquetas con contenido 6 | - Etiquetas sin contenido 7 | 8 | ### Etiquetas con contenido. 9 | 10 | Son etiquetas que tiene tres partes (por este orden) 11 | 12 | 1. Apertura de la etiqueta 13 | 2. Contenido de la etiqueta 14 | 3. Cierre de la etiqueta 15 | 16 | Algo así: 17 | 18 | ```xml 19 | 20 | Contenido de la etiqueta 21 | 22 | ``` 23 | 24 | HTML tiene un número limitado de etiquetas y no es necesario conocer todas. Con una lista más o menos pequeña podemos construir la gran mayoría de páginas web. En caso contrario, siempre podemos visitar las referencias. 25 | 26 | Un ejemplo de etiqueta de HTML con contenido sería un párrafo: 27 | 28 | ```html 29 |

30 | HOLA MUNDO 31 |

32 | ``` 33 | 34 | - **** Sería la apertura 35 | - **HOLA MUNDO** sería el contenido, en este caso sólo texto aunque podríamos meter muchas cosas "dentro" 36 | - **** Sería el cierre de la etiqueta 37 | 38 | ### Etiquetas sin contenido 39 | 40 | Son etiquetas que sólo tienen parte de apertura y carecen de contenido. Pueden estar cerradas o no, aunque yo recomiendo que se cierren. De esta manera: 41 | 42 | - `` 43 | - `` 44 | 45 | Un ejemplo de etiqueta HTML sin contenido sería una imagen: 46 | 47 | ```html 48 | 49 | ``` 50 | 51 | ### Atributos 52 | 53 | Las etiquetas pueden tener atributos de los que nos interesa saber lo siguiente: 54 | 55 | - Proporcionan información adicional sobre la etiqueta. 56 | - Las etiquetas puede tener o no tener atributos e incluso tener más de uno. 57 | - Siempre se añaden en la etiqueta de apertura. 58 | - Hay atributos generales (para todas) o específicos (para algunas). 59 | - Se respresentan nombre_atributo="valor_atributo". 60 | 61 | Un ejemplo: 62 | 63 | ```html 64 | 65 | ``` 66 | 67 | ### Tipos de etiquetas 68 | 69 | Hay muchos tipos de etiquetas pero a lo largo de este curso vamos a centrarnos en las siguientes: 70 | 71 | - Etiquetas de cabecera 72 | - Etiquetas de texto 73 | - Etiquetas de imágenes, tablas, listas y enlaces 74 | - Etiquetas multimedia 75 | - Etiquetas semánticas 76 | - Y alguna más pero no todas ;) . 77 | 78 | ### Comentarios 79 | 80 | Además de todas estas etiquetas nuestra página web podrá llevar comentarios que son, normalmente, texto descriptivos que no se van a mostrar en nuestra web. 81 | 82 | Los comentarios van encerrados en esta estructura **``** y un ejemplo sería: 83 | 84 | ```html 85 | 86 | ``` 87 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_3_Estructura_web/Estructura_de_una_pagina_Web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_II_Documentos_HTML/II_3_Estructura_web/Estructura_de_una_pagina_Web.pdf -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_3_Estructura_web/README.md: -------------------------------------------------------------------------------- 1 | **¡¡¡Vamos al lío!!!** 2 | 3 | Una vez ya tenemos claro qué es eso de _etiqueta_ con lo que yo voy a llenar mi página web el siguiente paso es tener muy claro qué estructura tiene que tener mi web. 4 | 5 | **NOTA:** Recordad que HTML define la estructura que tiene que tener una web. 6 | 7 | De manera general podemos representar toda página Web como un árbol _genealógico_ cuya estructura común, para todas las webs, podemos decir que será la siguiente: 8 | 9 | ![HTML Web DOM](./dom/html_dom.png) 10 | 11 | Esto significa lo siguiente: 12 | 13 | - Hay una etiqueta _padre_ de todo, la etiqueta **html** y entre la apertura y el cierre de esta etiqueta meteremos el resto de nuestra página. 14 | - La etiqueta **html** tiene dos hijos, la etiqueta **head** que es la cabecera, que ya veremos que elementos contiene, y la etiqueta **body** que es la que en realidad contiene los elementos de mi web. 15 | - A su vez esas dos etiquetas anteriores puede tener sus propios hijos y así sucesivamente. 16 | 17 | Un ejemplo de esto sería: 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | Mi primera página 28 | 29 | 30 | 31 |

HOLA MUNDO

32 | 33 | 34 | ``` 35 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_3_Estructura_web/dom/html_dom.graphml.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | HTML 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | HEAD 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | BODY 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | META 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | TITLE 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | ... 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | ... 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_3_Estructura_web/dom/html_dom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_II_Documentos_HTML/II_3_Estructura_web/dom/html_dom.png -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_3_Estructura_web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Mi primera página 9 | 10 | 11 | 12 |

HOLA MUNDO

13 | 14 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_4_La_cabecera/La_cabecera_de_una_pagina_web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_II_Documentos_HTML/II_4_La_cabecera/La_cabecera_de_una_pagina_web.pdf -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_4_La_cabecera/README.md: -------------------------------------------------------------------------------- 1 | La cabecera de mi página web es lo que está dentro de la etiqueta **__** y en relación a ella es importante saber lo siguiente: 2 | 3 | - Todo lo que va dentro de esa etiqueta no representa contenido alguno, es decir, nada de lo que yo pongo se va a ver en nuestro navegador. 4 | - Contiene otras etiquetas que nos van a ayudar a dar una descripción de mi página. 5 | - Puede contener enlaces a hojas de estilos y scripts. 6 | 7 | De las etiquetas que puede contener la cabecera destacaremos las siguientes: 8 | 9 | - **title:** que nos sirve para indicar el título de la página que es lo que se muestra en la parte de arriba del navegador. 10 | - **style:** que es una etiqueta que me permite incluir estilos y que veremos con más detenimiento al final de este mismo curso. 11 | - **meta:** que es una etiqueta que puede aparecer varias veces y con distintos atributos y que nos va a servir para dar una descripción de la página de diversas formas y maneras. 12 | - **link:** para enlazar con archivos externos, normalmente hojas de estilos. 13 | - **base:** para indicar la ruta base para contruir el resto de las rutas a archivos en mi página web. 14 | - **script:** para incluir normalmente ficheros javascript que doten de vida o animación a mi web. 15 | 16 | ### La etiqueta meta 17 | 18 | Es una etiqueta muy importante ya que, aunque no muestre nada, describe mi web y es, entre otras cosas, lo primero que leen tanto los navegadores como los buscadores. 19 | 20 | Puede tener varias posibilidades, dependiendo de los atributos que lleve. 21 | 22 | - **``** Es lo que pondremos siempre para no tener problemas con caracteres "extraños" (acentos, ñ etc...) u otros tipos de alfabetos. 23 | - **``** Es lo que incluiremos para añadir una descripción sobre lo que es mi web. Ese texto descriptivo irá en en el atributo _`content`_. 24 | - **``** Es lo que incluiremos para categorizar el contenidos de mi web. Por ejemplo: _`content="programacion,html,meta"`_ 25 | - **``** ;) 26 | - **``** que es nuevo en HTML5 y que me asegura que mi web escalará para adaptarse a la pantalla del dispositivo. Esto, no obstante no asegura que se vea bien. 27 | - **``** que refrescará la web cada X segundos. Puede ser interesante para mostrar actualizaciones automáticamente en páginas que cambian , por ejemplo, las de resultados deportivos. 28 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/II_4_La_cabecera/charset_example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Charset Example 9 | 10 | 11 | 12 |

Campeón de España

13 | 14 | 15 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/README.md: -------------------------------------------------------------------------------- 1 | ## Iniciación a HTML y CSS 2 | 3 | ### Documentos HTML 4 | 5 | - Evolución de HTML hasta HTML5. 6 | - Etiquetas, atributos y comentarios. 7 | - Estructura de una página Web. 8 | - La cabecera de una página Web. 9 | 10 | Curso desarrollado por [pekechis](http://github.com/pekechis) para [OpenWebinars](https://openwebinars.net/) 11 | -------------------------------------------------------------------------------- /Parte_II_Documentos_HTML/img/openwebinars-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_II_Documentos_HTML/img/openwebinars-logo.jpg -------------------------------------------------------------------------------- /Parte_IV_Formularios_en_HTML/Parte_IV_1_Formularios_HTML/Formulario_en_HTML_Estructura.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebinarsNet/curso-html5-y-css3/d719212b8e9a96fdc350b0d909c61e6530d80829/Parte_IV_Formularios_en_HTML/Parte_IV_1_Formularios_HTML/Formulario_en_HTML_Estructura.pdf -------------------------------------------------------------------------------- /Parte_IV_Formularios_en_HTML/Parte_IV_1_Formularios_HTML/README.md: -------------------------------------------------------------------------------- 1 | ## Formularios en HTML 2 | 3 | Los formularios son otros de los elementos que se han asociado desde siempre a las páginas webs. Los hemos usado tanto que es difícil calcular cuántos formularios habremos rellenado a lo largo de nuestra larga vida (al menos la mía) como usuario de la web. 4 | 5 | Formularios de registro, usuario y contraseña, solicitudes etc... son contextos en los que los podemos encontrar. 6 | 7 | De un modo más formal podemos decir lo siguiente: 8 | 9 | - Los formularios son elementos, que como los enlaces, permiten una interacción del usuario con la página web. 10 | - Su tarea principal es recoger información. El usuario, por tanto, debe introducir esa información en los campos del formulario. 11 | - Una vez se ha recogido esa información el formulario la enviará al servidor, por correo o donde decida el programador para ser tratada, mostrada y/o almacenada. 12 | 13 | ### Estructura del formulario 14 | 15 | En un formulario nos podemos encontrar con muchos elementos. 16 | 17 | ![Elementos de un formulario](img/formularios_elementos.png) 18 | 19 | El más importante de todo es el elemento padre, la etiqueta **`
`** que va a contener en su interior todos los elementos que conformen nuestros formularios. 20 | 21 | Esta etiqueta puede tener varios atributos de entre los que destacamos: 22 | 23 | - **method** que indica cómo se va a pasar la información al destino. Puede ser por GET (se ve la información en la barra del navegador) y por POST ( no se ve y es la opción por defecto). 24 | - **action** que indica el destino de nuestros datos. Normalmente será una URL o dirección de Internet. Existen más opciones. Os invito a visitar la documentación de referencia. 25 | 26 | A continuación vamos a ver algunos de los elementos más frecuentes y a describir su estructura y funcionamiento. 27 | 28 | ### Labels e Input 29 | 30 | Normalmente para la recogida de información los formularios usando etiquetas **``**. Pero, para poder saber qué campos estamos rellenando una buena práctica (se puede de otras maneras menos elegantes) es poner una etiqueta **