Curso de HTML, CSS y JavaScript

Ing. Ubaldo Acosta Soto

www.globalmentoring.com.mx
uacosta@globalmentoring.com.mx

Contenido del Curso

Contenido del Curso

Leccin 1. Introduccin a HTML
Leccin 2. Componentes de HTML
Leccin 3. Introduccin a CSS
Leccin 4. Uso de los estilos CSS
Leccin 5. Introduccin a JavaScript

Leccin 6. Validacin de un Formulario Web

Curso de HTML, CSS y JavaScript

Leccin 1. Introduccin a HTML

Leccin 1. Introduccin a HTML

HTML es un lenguaje que nos permite mostrar informacin
en un navegador web.
Las siglas de HTML significan HyperText Markup
Language, debido el concepto inicial de HTML era crear
documentos que se pudieran ligar unos a otros.
El protocolo HTTP es la base para poder utilizar HTML, ya
que es el protocolo que se utiliza en Internet.

HTML se basa en el concepto de etiquetas (tags), los

cuales nos permite desplegar informacin en un navegador
web.
Curso de HTML, CSS y JavaScript

Leccin 2. Componentes HTML

Leccin 2. Componentes HTML

Los componentes HTML se pueden dividir en:
Componentes de hipervnculos

Links
Botones
Imgenes

Componentes de un formulario:
Formulario
Checkboxes
Listas
Radiobuttons
Campos de texto y de rea

Otros Componentes:
Frames, Grficos, Div, Objetos Embebidos, etc
Curso de HTML, CSS y JavaScript

Leccin 2. Componentes HTML

Componentes de un URL
Un URL Uniform Resource Locator (Localizador Uniforme de
Recurso) es un medio estndar de identificar direcciones
internet en la Web
Los componentes de un URL son:
scheme:

//host

:port

/path

:parameters

?query

#fragments

Algunos ejemplos de URL son:

http://192.168.0.1:80/miSitioWeb?user=ubaldo
http://localhost/miSitioWeb/subcarpeta/index.html#fragmento1
Curso de HTML, CSS y JavaScript

Leccin 3. Introduccin a CSS

Leccin 3. Introduccin a CSS

CSS significa Cascade Stylesheet Language

Es utilizado para dar formato a las pginas HTML de una

manera centralizada
La idea es que se van aplicando los estilos en forma de
cascada o de manera heradada
El estilo ms externo (ej. Un estilo en un archivo .css) se
oculta y se sobrescribe por un estilo ms interno (ej. Un
estilo en una pgina HTML)
Los estilos se pueden aplicar en un archivo externo o en la
misma pgina HTML donde estamos trabajando.
Curso de HTML, CSS y JavaScript

Leccin 3. Introduccin a CSS

Leccin 3. Introduccin a CSS

Los selectores en CSS se clasificar en :

ID
Estos

selectores se utilizar para especificar el estilo de un

elemento nico en la pgina Web actual

Para
Se

definir un ID de CSS se utiliza el operador #

debe utilizar el atributo id en los elementos HTML

Class
Estos

selectores se utilizan para especificar el estilo de un

grupo de elementos

Para
Se

definir una clase CSS se utiliza el operador punto ( . )

utiliza el atributo class en los elementos HTML

Curso de HTML, CSS y JavaScript

Leccin 3. Introduccin a CSS

Leccin 3. Introduccin a CSS

Laboratorio CSS
Se solicita analizar el proyecto Laboratorio CSS, el cual
contiene la siguiente salida

El objetivo es entender cmo se crearon los tabuladores y

analizar los estilos que es aplicaron
Curso de HTML, CSS y JavaScript

Leccin 5. Introduccin a JavaScript

Leccin 5. Introduccin a JavaScript

Qu es JavaScript?
JavaScript

es un lenguaje que permite agregar cdigo dinmico a

una pgina HTML
Se

conoce como un lenguaje scripting, por lo que no necesita un

compilador, sino que es interpretando en tiempo de ejecucin
JavaScript

se puede incluir directamente en una pgina HTML o

como un archivo externo, similar al uso de las hojas CSS
JavaScript

no es Java. Aunque su sintaxis es similar, JavaScript es

un lenguaje mucho ms compacto que Java y sus objetivos son
distintos
Curso de HTML, CSS y JavaScript

Leccin 5. Introduccin a JavaScript

Leccin 5. Introduccin a JavaScript

Para qu utilizamos JavaScript?
Crear

interfaces HTML interactivas

Validar
Crear
Uso

formularios HTML

HTML dinmico al vuelo

de AJAX

Controlar

los navegadores Web

Para qu no se utiliza JavaScript?

No

podemos escribir a archivos de texto

NO

podemos comunicarnos con una Base de Datos

Mantener

el estado de las peticiones Web, excepto con Cookies

Curso de HTML, CSS y JavaScript

Leccin 5. Introduccin a JavaScript

Leccin 5. Introduccin a JavaScript

Servlets
Struts

CSS

JSF

Curso de HTML, CSS y JavaScript

EJBs de
Sesin
Spring

Capa de Datos

JavaScript

JSPs

Capa de Negocio

HTML

Capa Web

Capa de Presentacin

Dnde se utiliza JavaScript en una aplicacin empresarial?

EJBs de
Entidad

JPA
Hibernate