# HTML
#### ¿Que es HTML?
>Tal vez en algún momento escuchaste acerca de HTML y tal vez te dijeron que es un lenguaje de proporcionaron, eso es incorrecto , **HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto**

#### ¿Que podemos hacer con HTML?
> Con HTML podemos crear varias cosas pero algunas de las sencillas son las siguientes
1. Encabezados o titulos
2. Crear un docuemnto online
3. Crear filas y columnas
4. Un sitio Web sencillo
> un sinfin de cosas mas pero con HTML basico es unas de las muchas cosas que se pueden crear.

#### Etiquetas de HTML
##### 1. < html > Elemento principal.
> Es la etiqueta dentro la cual va toda la estructura y el contendido de HTML
##### 2. < head > – El encabezado del documento
> Es la etiqueta donde se encuentra la informacion acerca de la pagina , estos son algunos de los elementos que se pueden encontrar dentro de la etiqueta head
>> < title > Es el nombre que lleva la pagina
>
>> < meta > para especificar cosas como conjuntos de caracteres, descripciones de página y palabras clave para motores de búsqueda.
>
>> < script > Script, para agregar código JavaScript a la página.
##### < body >
> Es donde generalmente va todo el contenido de la página
el body debe contener todos los elementos de tu sitio web: texto, imágenes, etc
estas son algunas de las etiquetas que podemos encontrar dentro de Body
>> < div > división dentro del contenido
>
>> < a > para enlaces
>
>> < strong > para poner el texto en negrita
>
>> < br > para saltos de línea
>
>> < H1 > … < H6 > para títulos dentro del contenido
>
>> < img > para añadir imágenes al documento
>
>> < ol > para listas ordenadas, < ul > para listas desordenadas, <li> para elementos dentro de la lista
>
>> < p > para parágrafos
>
>> < span > para estilos de una parte del texto

#### Para entender HTML
> Para entender mejor HTML te recomiendo checar estas etiquetas , las cuales son las que siempre usaras en su mayoría
1. [Estructura básica](http://fpsalmon.usc.es/genp/doc/cursos/html/estructura.html#:~:text=Estructura%20b%C3%A1sica,finalizar%C3%A1n%20con%20.)
2. [Títulos](https://www.w3schools.com/tags/tag_title.asp)
3.-[Tablas](https://www.w3schools.com/html/html_tables.asp).
4.- [Listas ](https://www.w3schools.com/html/html_lists.asp)
5. [Imágenes](https://www.w3schools.com/tags/tag_img.asp)
6. [Contenedores "div"](https://www.w3schools.com/tags/tag_div.ASP)
7. [Formularios](https://www.w3schools.com/tags/tag_form.asp)
8. [Inputs](https://www.w3schools.com/html/html_form_input_types.asp)
#### Cuánto tiempo para aprender HTML?
> En mi experiencia fue al rededor de unas 6 semanas correctamente , a mi modo fueron de estudiar al rededor de 1 hora al día con ejemplos y después de terminar esos ejemplos otra hora en hacer un ejercicio por mi cuenta lo que hace 2 horas por día, contando que lo hacia de lunes a jueves, hacen unas 8 horas a la semana.
No te preocupes si te llevas mas tiempo o menos incluso , todos aprendemos a diferentes tiempos.

#### Curso
> En el curso que te ofrezco aprenderemos desde lo mas básico de HTML hasta llegar a un nivel avanzado- medio. en el cual podrás saber el uso de las etiquetas mas comunes y poder darle solución a algún problema que tengas , también con el conocimiento adquirido poder crear un pequeño proyecto que tengas en mente, trabajaremos con ejercicios rápidos , sencillos y algunos avanzados para poder poner aprueba tus conocimientos , todo eso se trabajara con lo aprendido durante este periodo.
#### Temario
### Clase 0 (Inicio)
> ###### Que aprenderas en esta curso (10 mins)
>> Demostración (7 Mins)
>> Instalaciones necesarias (3 mins) <br>
>> **Actividades:** <br> Descargar Visual Studio Code [Aquí](https://code.visualstudio.com/) e instalar la extensión _live server_

### Semana 1 - Día 1
> ###### Introducción a HTML (30 mins)
>> Que es HTML( 5 mins)
>> Estructura básica de HTML (10 mins)
>> Títulos y párrafos (5 mins)
>> Uso de la etiqueta <h1.....h6> (5 mins)
>> uso de la etiqueta < p >, < span >,< br >,< hr > (5 mins)
>> Elementos bloque y en linea (5 mins) <br>
>> **Actividades:** <br> Completa los niveles del juego [Super Markup](https://markup.roppychop.com/)

### Semana 1 - Día 2
> ##### Uso de listas (10 mins)
>> Listas ordenadas (5 mins)
>> listas Desordenadas (5 mins) <br>
>> **Actividades:** <br> Realizar la siguiente lista: <br>

> ##### Imágenes y enlaces (15 mins)
>> Como insertar imágenes a HTML (8 mins)
>> Enlaces dentro de la pagina (2 mins)
>> Enlaces externos (5 mins) <br>
>> **Actividades:** <br> Completa el siguiente ejercicio: <br>
![Ejercicio imágenes] (https://i.imgur.com/bmokd3P.png)
> ##### Tablas (16 mins);
>> Uso de Thead (3 mins)
>> Uso de Tbody (3 mins)
>> Crear filas y columnas dentro de una tabla (8 mins)
>> Definir campos (3 mins)
>> **Actividades:** <br> Completa el siguiente ejercicio con al menos 10 productos: <br> 
### Semana 1 - Día 3
> #### Formularios (50 mins)
>> Estructura básica de un formulario (8 mins)
>> Label (3 mins)
>> Inputs (3 mins)
>> Tipo de inputs (8 mins)
>> Botón en formularios (3 mins)
>> botones type ( 5 mins)
>> Checkbox (5 mins)
>> Select (5 mins)
>> Multi select (3 mins) <br>
>> **Actividades:** Realizar el siguiente formulario: <br> 

### Built it here
> #### Ejercicio Final
>> Realizar una página html con todo lo visto en el curso <br>

#### Recursos
> Si te gustaría aprender un poco mas de HTMl con documentación y algunos ejemplos te recomiendo los siguientes sitios
1. [Modzile developer guide](https://developer.mozilla.org/en-US/docs/Web/HTML)
2. [W3SCHOOL](https://www.w3schools.com/html/default.asp)
### Recursos de juegis
1. [WORD SEARCH](http://preview.codecanyon.net/item/word-search-game/full_screen_preview/2708856)
2. [WOB BLOCKS](https://preview.codecanyon.net/item/woblox/full_screen_preview/6555245)
3. [PARKIN](http://preview.codecanyon.net/item/lets-parkhigh-quality-parking-game/full_screen_preview/7234144)
4. [PANDA LOVE](http://preview.codecanyon.net/item/panda-love/full_screen_preview/8539431)
#### Que es lo que sigue?
> Siguiente Nivel: [CSS](https://gitlab.com/name_dev_web/commons/-/wikis/Keppler-2b-CSS#css-cascading-style-sheets)