---
# System prepended metadata

title: HTML

---

# HTML  
 ![HTML 5](https://www.sistemex.com/blog/wp-content/uploads/2015/09/html5.jpg)  
#### ¿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)  
![cap_1](uploads/2d548c717d1cceb370fabb8c49085e50/cap_1.png)
>> Títulos y párrafos (5 mins)  
>> Uso de la etiqueta <h1.....h6> (5 mins)  
![cap2](uploads/5bfc3341b6cea436ca4bcabf5badface/cap2.png)
>> 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> 
![Lista](uploads/366716950965db5e067e73e0d5b9f045/cap12.png)  

> ##### 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)  
![lo](uploads/05aa9378585224192c2fb96bd6cec5b6/lo.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> ![Tabla](uploads/863e5b29265601c8dcca91f0dbb484a7/image.png)  
### 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> ![Pantallazo-Formulario_WEB_basico_-_Google_Chrome-2](uploads/7a8e02f821cf3ea669662cfadfd86780/Pantallazo-Formulario_WEB_basico_-_Google_Chrome-2.png)

### Built it here
> #### Ejercicio Final
>> Realizar una página html con todo lo visto en el curso <br>
![image](uploads/c25fd3cc5f73cc3de2654adbd552ed0f/image.png)

#### 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)