Introducción a HTML - CSS - JS

HTML- CSS - JS
Alejandro de Arriba
adearriba@outlook.com
@lex0712
facebook.com/adearriba.baranda

Agenda
• HTML:
•
•
•
•

¿Qué es HTML?
Sintaxis de HTML
Esqueleto de un documento HTML
Clases IDs y su diferencia

• CSS
•
•
•
•

¿Qué es CSS?
Comprender la Sintaxis de CSS
Selectores
Herencia

• JS
•
•
•
•
•
•
•

¿Qué es Javascript?
¿Cómo utilizar JS?
Peculiaridades de sintaxis
Variables y Funciones
Decisiones y Ciclos
Seleccionando elementos del DOM
Agregar eventos

HTML 101 - ¿Qué es HTML?

HyperText
Markup
Language

Lenguaje de
etiquetas

Un estándar

Sirve para crear
documentos
electrónicos

Cuyas normas
las define el
Consorcio W3C

SOLO
ESTRUCTURA!

HTML 101 – Sintaxis -> Etiquetas
Sin Atributos:
<p>texto</p>
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2> ….. </h6>

Con contenido:
<x> = apertura
</x> = cierre
<x> contenido </x>

Con atributos:
<img src=“imagen.jpg” alt=“texto” />
<a href=“enlace”>texto</a>

Sin contenido
<x/> = cierre al final

<div> </div> 

<br/>, <img />, …

HTML 101 – Sintaxis -> Esqueleto
<!DOCTYPE html>
<html lang=“es”>
<head>
</head>

Encabezado:
<head> </head>

<body>

</body>
</html>

Cuerpo:
<body> </body>

HTML 101 – Clases identificadores
Identificadores
• Identificar un elemento del documento.
• No debe repetirse, debe ser único.

Clases
• Identificar un grupo de elementos.
• Reutilizar reglas sobre un grupo de elementos.

CSS 101 - ¿Qué es CSS?

Lenguaje de hojas
de estilos.

Controla el aspecto
de los documentos
electrónicos. ->
HTML

Separar el
contenidos de su
aspecto

CSS 101 - Sintaxis
•

•
•

•

•

Regla: cada uno de los estilos que componen
una hoja de estilos CSS.
Selector: indica el elemento o elementos HTML
a los que se aplica la regla CSS.
Declaración: especifica los estilos que se
aplican a los elementos. Está compuesta por
una o más propiedades CSS.
Propiedad: característica que se modifica en el
elemento seleccionado, como por ejemplo su
tamaño de letra, su color de fondo, etc.
Valor: establece el nuevo valor de la
característica modificada en el elemento.

Tile One

CSS 101 - ¿Cómo agregar CSS a un HTML?
Incluir CSS en el mismo documento HTML (Interno)
Usando etiqueta Style

Incluir CSS en los elementos HTML (Entre lineas)
<p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>

Definir CSS en un archivo externo (Externo)
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
rel: Para los archivos CSS, siempre se utiliza el valor stylesheet
type: indica el tipo de recurso enlazado.
href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o
absoluta y puede apuntar a un recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los estilos del archivo CSS.

CSS 101 - Selectores
Selector universal (*)
Selector de tipo o etiqueta (p, div, a, …)
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos.
p span { color: red; }

Selector de clase (.)
Selectores de ID (#)
Combinación de selectores básicos
div.aviso span.especial { ... }

CSS 101 - Herencia
Una de las características principales de CSS es la
herencia de los estilos definidos para los elementos.
Cuando se establece el valor de una propiedad CSS en un
elemento, sus elementos descendientes heredan de forma
automática el valor de esa propiedad.
body { color: blue; }
Todos los elementos dentro del elemento body tendrán color
azul.

Javascript 101 - ¿Qué es Javascript?

Lenguaje de
Programación
interpretado

Normalmente
utilizado en el
navegador

Recientemente
utilizado al lado
del servidor
(node.js)

Sintaxis basada
en C

Javascript 101 - ¿Cómo utilizar Javascript?

Incluir
JavaScript
en el mismo
documento

Definir
JavaScript
en un
archivo
externo

Incluir
JavaScript
en los
elementos

Javascript 101 – Peculiaridades de la sintaxis

Se ignoran los espacios en blanco y las nuevas líneas
Se distinguen las mayúsculas y minúsculas
Débilmente Tipado - No se define el tipo de las variables
Se pueden incluir comentarios

Javascript 101 – Variables y Funciones
var msj = "hola mundo"; //Está será una variable de tipo string.
var numero = 5; //Está será una variable de tipo entero.
function nombreFuncion (parámetro 1, parámetro n){
//qué hacer
}
var nombreFuncion = function(parámetro 1, parámetro n){
//qué hacer
}

Javascript 101 – Ciclos y Decisiones
if (condición)
{
//si la condición es verdadera
} else {
//si la condición es falsa
}

for (var i = 0; i < longitud; i++)
{
//realizar tarea
};
while (condición) //mientras se cumpla
{
//realizar tarea
}

Javascript 101 – Seleccionando Elementos

getElementByID

getElementsByTag

querySelector

querySelectorAll

Javascript 101 – Agregando eventos

En elementos como:
onclick, onfocus, onblur, …

Programáticamente:
addEventListener

Introducción a HTML - CSS - JS

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Introducción a HTML - CSS - JS (20)

Último (20)

Introducción a HTML - CSS - JS