introducción a HTML y JavaScript

objetivos del curso

Proveer al asistente de conceptos fundamentales que le permitan utilizar los lenguajes HTML y Javascript en sus proyectos informáticos.

temas del curso

click to edit

Internet y la WWW.

HTML.

Historia del HTML.

HTML – CSS – Javascript.

Elementos HTML.

Tipos

Atributos

Estructura

Contenedores

Tablas

Hipervínculos

Imágenes

Formularios

Estilos CSS.

Javascript.

El Futuro.

Conclusiones.

internet y la www

click to edit

Internet

WWW. Sitios Web y páginas Web.

Otros objetos en la Web.

¿Cómo funciona?

HTML

click to edit

HTML (Hypertext Markup Language)

HTML = Hypertext + MarkUp

Hypertext

Es texto ordinario al que se le incorporan funcionalidades adicionales como:

Formato,

Imágenes,

Multimedia

Y enlaces a otros documento.

MarkUp

Es el proceso de tomar el texto ordinario e incorporarle símbolos adicionales. Cada uno de estos símbolos identifica a un comando que le indica al navegador como mostrar ese texto.

historia del HTML

click to edit

En 1986 la organización internacional de Estándares publica el SGML (Standard Generalized Markup Language)

En 1990 Tim Berners-Lee crea la WWW y el HTML con base en un subconjunto del SGML.

En 1993 se crea el HTML 2.0 (o HTML+)

En 1995 el W3C (World Wide Web Consortium) define el HTML 3.0

El HTML 3.2 abandona las sugerencias del HTML 3.0 y adopta elementos desarrollados por Netscape. (Incorpora Tablas, Applets, Texto alrededor de imágenes)

En 1997 se define el estándar HTML 4.0

En 1999 aparece el estándar actual HTML 4.01

Más información en: http://www.w3.org/

el w3c

click to edit

El W3C (World Wide Web Consortiun) es un consorcio internacional donde Organizaciones miembro, Personal Full-time y el público en general trabajan para desarrollar Estándares Web.

La misión del W3C es la de maximizar el potencial de la WWW desarrollando protocolos y guías que aseguren el crecimiento futuro de la Web.

Algunas Organizaciones miembro del W3C

Adobe Ericsson Nokia

Apple Google, inc. Opera Software

AT&T HP Sun Microsystems

Cisco IBM Corporation Telefónica de España

Citigroup Microsoft Yahoo, inc.

Deutsche Telekom Mozilla Foundation VeriSign

…Y decenas de universidades de todo el mundo

contenedores

elementos HTML

click to edit

Los elementos son los componentes fundamentales del HTML

Cuentan con 2 propiedades básicas:

Atributos

Contenido

En general se conforman con una Etiqueta de Apertura y otra Cierre.

Los atributos se colocan dentro la etiqueta de apertura, y el contenido se coloca entre la etiqueta de apertura y la de cierre.

atributos

Los atributos de un elemento son pares de nombres y valores separados por un ‘=‘ que se encuentran dentro de la etiqueta de apertura de algún elemento. Los valores deben estar entre comillas.
ejemplo:
<span id=iddeesteelemento´style=`color:red:title=`curso de HTML`>curso de HTML

tipos de elementos

click to edit

Algunos tipos de Elementos

Estructurales

Describen el propósito del texto y no denotan ningún formato específico.

Por ejemplo:

<h1>Curso HTML</h1>


De Presentacion

Describen la apariencia del texto, independientemente de su función.

Por ejemplo:

<b>Curso HTML</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.

Por ejemplo:

<a href=“http://www.cema.edu.ar”>Universidad del Cema</a>

estructura de un documento HTML

click to edit

<HTML>… </HTML>


Delimita el Documento HTML

<HEAD> … </HEAD>


Delimita el encabezado del Documento HTML

En general incluye los metadatos del documentos y Scripts.

<BODY> … </BODY>


Delimita el Cuerpo del Documento HTML.

Es donde se incluyen los contenidos visibles del documento.

Ejemplo

<html>


<head>


Aquí se incluyen os distintos elementos del encabezado

</head>

<body>


Aquí se incluyen los distintos elementos contenedores o scripts

</body>

</html>

elementos del HEAD

click to edit

Alguno de los elementos factibles de incluir en el HEAD son:

<TITLE> … </TITLE>


Define el título del documento HTML

<SCRIPT> … </SCRIPT>


Se utiliza para incluir programas al documento. En general se tratan de Javascripts.

<STYLE> … </STYLE>


Especifica un estilo CSS para ser utilizado en el documento.

<META> … </META>


Permite especificar información de interés como: autor, fecha de publicación, descripción, palabras claves, etc.

click to edit

Parrafos

Es el contenedor mas común.

Su sintaxis es: <P> … </P>

Encabezados

Indican una jerarquía de secciones dentro del documento

Su sintáxis: <h1>…</h1>, <h2>…</h2>, <h3>…</h3>,.. <h6>…</h6>,

Listas

Listas de Definiciones (consistente de pares de términos y definiciones)

<dl>…</dl> Crea la lista

<dt>…</dt> Crea un nuevo término

<dd>…</dd> Crea una nueva definición

Lista Ordenada Enumerada

<ol> … </ol> Crea una nueva lista

<li> … </li> Crea un nuevo ítem en la lista

Lista Ordenada No Enumerada

<ul> … </ul> Crea una nueva lista

<li> … </li> Crea un nuevo ítem en la lista

Capas

Permiten agrupar y diagramar contenidos en los documentos.

Su sintaxis es: <DIV> … </DIV>

erick alvarado ibarra


20 de abril del 2021