Scribd
Cargar
212 vistas

Semana 2 HTML 5 - Javascript

Este documento presenta una introducción a las tecnologías web HTML, CSS y JavaScript durante la segunda semana de un curso de programación web. Explica brevemente los conceptos básicos de HTML para estructurar el contenido, CSS para darle estilo y JavaScript para agregar comportamiento interactivo a las páginas web. También incluye ejemplos prácticos de cómo aplicar estas tecnologías.

Cargado por

Jairo Alonso PARRA CANTOR
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
212 vistas

Semana 2 HTML 5 - Javascript

Este documento presenta una introducción a las tecnologías web HTML, CSS y JavaScript durante la segunda semana de un curso de programación web. Explica brevemente los conceptos básicos de HTML para estructurar el contenido, CSS para darle estilo y JavaScript para agregar comportamiento interactivo a las páginas web. También incluye ejemplos prácticos de cómo aplicar estas tecnologías.

Cargado por

Jairo Alonso PARRA CANTOR
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 33

SEMANA 2

PROGRAMACIÓN WEB

HTML(5), VBSCRIPT, JAVA SCRIPT, CSS


EJEMPLOS APLICADOS
Estructura de una página web

Página Web
• Párrafos •Tablas
Estructura • Encabezados
• Listas
• Capas
• Etc.
HTML
• Textos
Contenido • Imágenes
• Enlaces

• Colores • Fondos
Apariencia • Tipografías
• Alineación
•
•
Tamaños
Etc.
CSS

• Efectos
Comportamiento • Validaciones
• Automatización Javascript
HTML5

Qué es HTML(5)?

⮚ Es un lenguaje de marcas utilizado para el desarrollo de páginas web.

⮚ Define la estructura y contenido que debe tener una web.

⮚ No define el estilo visual que tendrá para eso se usará CSS.

⮚ Ha sido establecido como estándar de diseño web por el W3C.

⮚ Los navegadores deben saber interpretar este lenguaje de manera


correcta

⮚ Sobre HTML se desarrollan tecnologías para facilitar a los usuarios


el diseño de una web.|
HTML5
HTML5

• Tipos de elementos HTML


• Estructurales:
• Describen el propósito del texto y no denotan ningún formato específico.
<h1>CURSO PROGRAMACION WEB</h1>
• De Presentacion:
• Describen la apariencia del texto, independientemente de su función.
<b>CURSO PROGRAMACION </b>
• Los elementos de presentación se encuentran obsoletos desde la aparición del CSS.
• De HiperTexto:
• Relaciona una parte del documento a otros documentos.
<a href=“http://www.uniminuto.edu.co”>Universidad Minuto de Dios</a>
HTML5

• Estructura base de un documento html.


<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<!– Encabezado de la web. Aquí incluiremos metainformación y cargaremos
componentes y estilos utilizados en la web-->
</head>
<body>
<!– Cuerpo de la web. Aquí escribiremos el contenido-->
…..
</body>
</html>
HTML5

Contenido Etiq. de Cierre


HTML5

• Definir un documento HTML.


• El primer paso es crear un fichero html o xhtml.
• Una vez creado deberemos especificar el tipo de
documento, para ello la primera línea debe ser:
• <!DOCTYPE html> si es HTML
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> si es XHTML

• Una vez realizado esto podremos comenzar con el


contenido de nuestro fichero HTML
• HTML layout
HTML5

• La sección HEAD
• Contiene metainformación de la página
• Establecemos título y palabras clave para los buscadores
• Incluimos hojas de estilo (CSS) a utilizar en la página
• Podemos introducir código javascript a usar en nuestra página.

Referencia: http://www.w3schools.com/html/html_head.asp
HTML5

• La sección BODY
• Alberga el "contenido" real de la página.
• Establece cómo se visualizan los elementos.
• Hace uso de los scripts y hojas de estilo definidos en la sección
HEAD.
• En este punto tenemos a nuestra disposición de todos los tags
disponibles para maquetar nuestra página.

Referencia: Elementos HTML


HTML5

• La sección BODY
• Alberga el "contenido" real de la página.
• Establece cómo se visualizan los elementos.
• Hace uso de los scripts y hojas de estilo definidos en la sección
HEAD.
• En este punto tenemos a nuestra disposición de todos los tags
disponibles para maquetar nuestra página.

Referencia: Elementos HTML


VBSCRIPT

Qué es VBSCRIPT,

⮚ VBScript (abreviatura de Visual Basic Script Edition) es un lenguaje


interpretado por el Windows Scripting Host de Microsoft. 

⮚ VBScript funciona de forma muy similar a JavaScript, procesando código


contenido en el documento HTML.

⮚ Para insertar código VbScript en un pagina HTML añadiremos al tag


<SCRIPT> el parámetro LANGUAGE= “VBScript” que determina cual de
los lenguajes de script utilizamos.

⮚ Solo funciona correctamente para los navegadores de Windows


JAVASCRIPT

⮚ Inicialmente se llamaba LiveScript.


⮚ Lenguaje de guiones (script).
⮚ Con el respaldo de SUN en 1995 pasó a llamarse JavaScript.
⮚ Es un lenguaje interpretado.
⮚ Se ejecuta en el cliente, nunca en el servidor.
⮚ Parte de un conjunto limitado de objetos y clases
⮚ No permite interacción cliente-servidor, únicamente opera en el cliente
(Conseguido con jQuery).
JAVASCRIPT

⮚ Diseñado para programas sencillos y pequeños.


⮚ Muy utilizado para validación de datos.
⮚ Utilizado junto con CSS para poner efectos en las páginas de
Web.
⮚ Es independiente de la plataforma.
⮚ Es bajamente tipado.
⮚ Fácil de aprender, pero difícil de depurar.
⮚ Gran parecido con Java pero mucho más limitado.
JAVASCRIPT

⮚ Javascript se integra en HTML de dos maneras:


• Como fichero *.js incluido en la misma sección que los
CSS.
• Como código directamente en el fichero HTML haciendo
uso de la etiqueta <script>
⮚ Algunos navegadores no soportan scripts por lo que tendremos
que tenerlo en cuenta.
• Para tratar el problema haremos uso de la etiqueta
<noscript>
JAVASCRIPT

⮚ La declaración de variables se hace sin especificar el tipo:


• var miVariable;
⮚ Si intento hacer una operación no permitida sobre el tipo que
contiene la variable tendré un error.
⮚ Para mostrar mensajes por pantalla haré uso de:
• alert("texto del mensaje")
⮚ Los métodos se declaran con la etiqueta function:
• function hola(){ … }
• Para devolver un valor haremos uso de "return".
JAVASCRIPT

⮚ La llamada a los métodos Javascript se hará desde elementos


HTML.
⮚ Los elementos HTML tienen asociados determinados eventos
cuando su estado cambie.
⮚ En esos eventos podemos llamar a código Javascript.
⮚ Haciendo uso de Jquery como extensión de Javascript podremos
realizar funcionalidad antes de que un documento se cargue.
JAVASCRIPT

Javascript: jQuery

⮚ Jquery es una librería Javascript que pretende facilitar el uso del código
Javascript a los programadores.
⮚ Añade un conjunto nuevo de eventos a los ya existentes HTML.
⮚ Permite hacer llamadas AJAX, por lo que permite que, el cliente, llame
directamente al servidor.
⮚ Incorpora librerías de componentes HTML con funcionalidad enriquecida
que podemos usar con poco esfuerzo. jQuery
⮚ Tutorial: jQuery tutorial
JAVASCRIPT

⮚ Al igual que en CSS haremos uso de selectores para recuperar un


elemento concreto.
⮚ La sintaxis es $(selector):
• $("p"): recuperaría todos los elementos HTML de tipo <p>
• $(".test"): recuperaría todos los elementos HTML cuyo atributo
"class" fuera "test".
• $("#test"): recuperaría todos los elementos HTML cuyo atributo
"id" fuera "test".
CSS

Qué es CSS,
⮚ El CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia
de un documento escrito en un lenguaje de marcado (por ejemplo, HTML).
Así, a los elementos de la página web creados con HTML se les dará la
apariencia que se desee utilizando CSS: colores, espacios entre elementos,
tipos de letra, ... separando de esta forma la estructura de la presentación.

⮚ Esta separación entre la estructura y la presentación es muy importante, ya


que permite que sólo cambiando los CSS se modifique completamente el
aspecto de una página web. Esto posibilita, entre otras cosas, que los
usuarios puedan usar hojas de estilo personalizadas (como hojas de estilo
de alto contraste o de accesibilidad).
CSS

HISTORIA
⮚ El lenguaje HTML está limitado a la hora de aplicarle forma a
un documento.
⮚ Sus estructuras tienen poca flexibilidad a la hora de dar forma al
contenido mostrado.
⮚ HTML se creó originariamente para uso científico y
posteriormente fue adoptado para el desarrollo web.
⮚ Para "maquetar" se utilizan elementos HTML en un uso
diferente de su objetivo (tablas por ejemplo).
⮚ Todos estos problemas dieron lugar al origen de CSS.
CSS

⮚ Principales características
• Permite definir el estilo de cada elemento HTML de manera
exacta.
• Permite escalar tamaños en función del tamaño de la pantalla.
• Aísla el contenido de la presentación.
• Permite incorporar cierta lógica a los estilos aplicados (LESS
y SASS).
• Permite crear plantillas de estilos que pueden importarse en
otros HTML.
CSS

⮚ Los estilos CSS deben darse de alta en un fichero acorde para


ello, no obstante:
• Pueden declararse dentro de un HTML mediante la
etiqueta <style>
• Pueden aplicarse directamente sobre un elemento concreto
en la propiedad "style".
⮚ Lo correcto es llevar los estilos a un o unos ficheros css, pero se
permite añadir pequeños retoques directamente sobre el HTML.
CSS

• Cómo se define un estilo en css:

Declaración
Selector { propiedad: valor; ...}

Ejemplo:
H1 {color:#CC9900;}
CSS

• Un selector es un identificador para saber sobre qué elemento HTML


debemos aplicar el estilo.
• Existen diferentes tipos de selectores.
• Se pueden crear jerarquías de estilos.
• Podemos definir estilos por defecto para los elementos HTML estándar.
• Los estilos pueden sobreescribir a otro, el orden de sobreescritura es el
mismo en el que se cargan los ficheros css o se lee el fichero.
• Si queremos que un estilo prevalezca sobre el resto, podemos indicarlo
con !important
CSS

• Tipos de selectores:
• De elemento HTML:
• h1, table, div, span…
• De identificador
• Todos los elementos HTML cuya propiedad "id" tenga un
determinado valor, tendrán ese estilo.
• De clase
• Todos los elementos HTML cuya propiedad "class" tenga un
determinado valor tendrán ese estilo.
CSS

• Normalmente se le aplica un estilo por defecto a los elementos HTML para


conformar una plantilla.
• La personalización definitiva se suele realizar haciendo uso de la propiedad
"class".
• No es recomendado usar el selector por id. Sólo se recomienda cuando el
componente, además de estilo realiza alguna funcionalidad javascript.
• Cuando incluyamos plantillas en un fichero HTML hay que estar seguros
que no incorporan estilos CSS que sobreescriban los nuestros.
• En caso de conflicto, debemos asegurar que nuestros estilos quedan
situados por encima de los otros (aunque no siempre es posible)
CSS

• CSS3 como mejora de CSS incorpora propiedades para una mejor


maquetación y decoración de los elementos.
• Se han añadido propiedades para aplicar efectos de pintado.
• Se permiten realizar animaciones.
• Habilita el uso de lógica en los CSS.
• Ejemplo de dibujado HTML + CSS: Minion
CSS

• CSS3 como mejora de CSS incorpora propiedades para una mejor


maquetación y decoración de los elementos.
• Se han añadido propiedades para aplicar efectos de pintado.
• Se permiten realizar animaciones.
• Habilita el uso de lógica en los CSS.
• Ejemplo de dibujado HTML + CSS: Minion
Realizar la siguiente estructura de maquetación empleando HTML5 y CSS3
HTML5
CSS3

También podría gustarte