1 EMPECEMOS CON LA BASE : HTML
1.1 INTRODUCCIÓN
• ¿Cómo crear un archivo HTML? ¿Dónde programamos?
• ¿Qué herramienta se utiliza para visualizar la página?
1.2 P RIMERAS ETIQUETAS Y ESTRUCTURA BÁSICA DE HTML
• <html>, <head>, <body>.
• ¿Qué contiene el <head>?
• ¿Qué contiene el <body>?
1.3 PROFUNDIZAMOS EL < BODY >
• Títulos. <h1>…<h6>
• Párrafos. <p></p>
• Imágenes. <img>
• Formato en el texto:
o Texto en negrita: <b></b>
o Texto fuerte: <strong> </strong>
o Texto en cursiva: <i> </i>
o Texto enfatizado: <em> </em>
• Listas <li></li>:
o Ordenadas <ol></ol>
o Desordenadas <ul></ul>
• Enlaces/Links <a></a>.
• Tablas <table></table>.
• Atributo relacionado a CSS: style.
• Contenedores:
o No semánticos: <div> y <span>
o Semánticos (HTML5): <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.
• Formularios.
o Label,
o Input: text, submit, radio, checkbox, date, email, color, url, password.
o fieldset
• Otras consideraciones:
o Línea horizontal: <hr>
o Salto de línea: <br>
o Uso de comentarios en el código.
o Caracteres especiales.
2 AGREGAMOS DISEÑO A NUESTRO SITIO : CSS
2.1 I NTRODUCCIÓN .
• ¿Qué es CSS?
• Elemento <style>
• Reglas: Definición.
• Sintaxis: Selector y declaraciones.
• ¿Cómo agregar un archivo de hojas de estilos?
2.2 SELECTORES .
• Elementos HTML, id y class. Combinación de ellos.
o Agrupar selectores.
o Selectores descendientes.
o Selectores de atributos.
• Pseudoclases: focus, visited, actived, hover, nth-child.
2.3 TEXTO
• font-family
• font-size
• font-style
• font-weight
• text-tranform
• font-variant
• text-decoration
• line-height
• letter-spacing
• text-align
2.4 CONTENEDORES
• background
• width – height
• margin
• padding
• border
• box-sizing
• float
2.5 OTRAS PROPIEDADES
• position
o relative y absolute
o fixed
• display
o inline, inline-block
o block
o none
o table
• border-radius
3 TRABAJO FINAL & INTRODUCCIÓN JAVA SCRIPT (JS)
3.1 DESARROLLO DE UN SITIO :
• Se presenta cómo desarrollar un sitio web tipo blog desde cero, utilizando los lenguajes vistos: HTML y CSS. La temática de la página es a elección del estudiante.
3.2 INTRODUCCIÓN A JS.
• ¿Qué es JavaScript? ¿Qué función cumple?
• ¿Cómo agregar JavaScript a la hoja de HTML?
• Demostraciones:
o “¡Hola mundo!” con JS.
o Cambiar una imagen haciendo clic.
o Mensaje de bienvenida