Clase 1: Introduccin y

HTML 1
 Clase 1: Contenido
1. Introduccin 2. Programacin en HTML
Qu es Launchpad? Sintaxis
Contenidos del programa Estructura base del documento HTML
La importancia de la programacin Etiquetas
Ice Breaker: introducciones <h>
Claves para el xito <p>
Ambiente de programacin <br>
 Qu es Launchpad?
Launchpad es un curso acelerado de
programacin en frontend web
(interfaz de usuario web)

De 3 semanas de duracin y en las

tardes (orientado para
universitarios o ejecutivos jvenes)
Presencial (pero con tareas para la
casa)
Orientado a la accin! Menos
teora, ms prctica
Contenidos del programa

+ +

= Frontend!
Por qu aprender a programar?
 Introdcete

Tu nombre

Cul es tu app favorita?

Por qu quieres
aprender a programar?
 Claves para el xito
1. Debes invertir tiempo
2. Hazte dueo de tu aprendizaje (y
haz las tareas!)
3. Ensear es aprender (se aprende
el triple)
4. Programa en parejas cuando
puedas
5. Haz cosas difciles (sal de tu zona
de confort)
Ambiente de programacin

Google
Atom Slack
Chrome
 Atom
Funciones
Entiende qu cdigo ests escribiendo y
lo colorea para que sea ms fcil de leer
Autocompleta cdigo
Maneja muchas pestaas
simultneamente y separar pantallas
Permite cargar varios archivos desde la
barra lateral. Y bastante ms!
Qu es?
Es un editor de texto avanzado Descarga: https://atom.io/
y orientado a programacin
 Slack
Funciones
Permite comunicarte con muchas
personas desde el telfono y el
computador
Permite usar canales de trabajo (ej.:
#slides)
Permite compartir cdigo de diversos
lenguajes (lo colorea) y todo tipo de
Qu es? archivos
Descarga
Es un whatsapp pero orientado al trabajo
muchos le llaman el email killer
https://slack.com/downloads/
 Qu es HTML? (1/2)
HTML es un lenguaje de marcado que se utiliza
para el desarrollo de pginas de Internet. Se
trata de la sigla que corresponde a HyperText
Markup Language, es decir, Lenguaje de
Marcas de Hipertexto, que podra ser traducido
como Lenguaje de Formato de Documentos
para Hipertexto.
 Qu es HTML? (2/2)

Est compuesto por etiquetas

Es el esqueleto de cualquier sitio web
Slo se necesita un editor de texto y un
navegador
Los archivos HTML deben tener como
extensin .html
Documento HTML: estructura
 Sintaxis HTML (1/3)
Las etiquetas HTML se escriben entre < y >

Deben abrirse y cerrarse, su forma es la siguiente:

Apertura Cierre
 Sintaxis HTML (2/3)
Etiquetas vacas, o etiquetas que no se cierran:
No llevan </etiqueta> al final, solo tienen apertura

Ej. <br>
<img>
<input>
 Sintaxis HTML (3/3)
Por convencin las etiquetas se escriben en minsculas,
aunque el navegador tambin las reconocer si estn
escritas en maysculas.

Correcto Incorrecto
 Identacin de cdigo
El cdigo escrito debe ser de fcil lectura para
cualquier persona, para esto existe una buena prctica
llamada identacin.

Con identacin Sin identacin

 Etiquetas <h></h>
Se utilizan para indicar ttulos y sub ttulos.
Van desde la h1 hasta la h6.
 Etiquetas <p></p>
Se utiliza para indicar un prrafo de texto.
 Etiquetas <br/>
Se utilizan para salto de lnea.
No requieren cerrarse y llevan un /
 Ejercicio #1 (1/2)
Generar cdigo para lo siguiente:
 Ejercicio #1 (2/2)
Generar cdigo para lo siguiente
Clase 1: Introduccin y
HTML 1