Scribd
Cargar
30 vistas

HTML

Este documento introduce conceptos básicos de HTML y JavaScript. Explica elementos, atributos, estructura, contenedores, tablas, hipervínculos, imágenes y formularios de HTML. También cubre estilos CSS y JavaScript.

Cargado por

paola072787
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd
30 vistas

HTML

Este documento introduce conceptos básicos de HTML y JavaScript. Explica elementos, atributos, estructura, contenedores, tablas, hipervínculos, imágenes y formularios de HTML. También cubre estilos CSS y JavaScript.

Cargado por

paola072787
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 31

INTRODUCCION A HTML Y JAVASCRIPT

Temas del Curso Internet y la WWW.


HTML. Historia del HTML. HTML CSS Javascript. Elementos HTML.

Tipos Atributos Estructura Contenedores Tablas Hipervnculos Imgenes Formularios

Estilos CSS. Javascript. El Futuro. Conclusiones.

Internet y la WWW Internet


WWW. Sitios Web y pginas Web.

Otros objetos en la Web.


Cmo funciona?

HTML (Hypertext Markup Language) HTML = Hypertext + MarkUp Hypertext

HTML

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


Formato, Imgenes, Multimedia Y enlaces a otros documento. MarkUp

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

Historia del HTML


En 1986 la organizacin internacional de Estndares 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 imgenes) En 1997 se define el estndar HTML 4.0 En 1999 aparece el estndar actual HTML 4.01

Tim Berners-Lee Director del W3C

Ms informacin en: http://www.w3.org/

El W3C
El W3C (World Wide Web Consortiun) es un consorcio internacional

donde Organizaciones miembro, Personal Full-time y el pblico en general trabajan para desarrollar Estndares Web.
La misin del W3C es la de maximizar el potencial de la WWW desarrollando

protocolos y guas que aseguren el crecimiento futuro de la Web.


Algunas Organizaciones miembro del W3C

Adobe Apple AT&T Cisco

Ericsson Google, inc. HP IBM Corporation

Nokia Opera Software Sun Microsystems Telefnica de Espaa

Citigroup
Deutsche Telekom

Microsoft
Mozilla Foundation

Yahoo, inc.
VeriSign

Y decenas de universidades de todo el mundo

HTML CSS Javascript

Pgina Web Estructura Contenido Apariencia


Prrafos Tablas Encabezados Capas Listas Etc.
Textos Imgenes Enlaces Colores Tipografas Alineacin

HTML

Fondos Tamaos Etc.

CSS Javascript

Comportamiento

Efectos Validaciones Automatizacin

Los elementos son los componentes fundamentales del HTML


Cuentan con 2 propiedades bsicas:
Atributos Contenido

Elementos HTML

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.

Elemento
Etiqueta de Apertura Contenido Etiq. de Cierre

<p class=texto>Curso HTML CEMA</p>


Nombre Valor Atributo

Los atributos de un elemento son pares de nombres y valores separados por un

Atributos
Ejemplos:

= que se encuentran dentro de la etiqueta de apertura de algn elemento. Los valores deben estar entre comillas.

<span id=iddeesteelemento' style='color:red;' title=Curso de HTML'> Curso de HTML </span>

<a href=http://www.cema.edu.ar class=milink target=_blank> Universidad del Cema </a>

Algunos tipos de Elementos


Estructurales

Tipos de Elementos
Describen el propsito del texto y no denotan ningn formato especfico. Por ejemplo:

<h1>Curso HTML</h1>

De Presentacion
Describen la apariencia del texto, independientemente de su funcin. Por ejemplo:

<b>Curso HTML</b>
Los elementos de presentacin se encuentran obsoletos desde la aparicin 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


<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>

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

Elementos del HEAD

<TITLE> </TITLE>
Define el ttulo 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 informacin de inters como: autor, fecha de

publicacin, descripcin, palabras claves, etc.

Contenedores (Block-Level Parrafos Elements) Es el contenedor mas comn.


Su sintaxis es: <P> </P>

Encabezados Indican una jerarqua de secciones dentro del documento Su sintxis: <h1></h1>, <h2></h2>, <h3></h3>,.. <h6></h6>, Listas Listas de Definiciones (consistente de pares de trminos y definiciones)
<dl></dl> Crea la lista <dt></dt> Crea un nuevo trmino <dd></dd> Crea una nueva definicin

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>

Contenedores (Tablas) <table> </table> Crea la tabla


<tr> </tr>

<td> </td>

Crea una nueva fila Crea una nueva celda dentro de la fila

Por ejemplo: Creacin de una tabla de 2 x 2 <table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

Qu son y para qu sirven.


Atributos de las Tablas Atributos de las Celdas y Filas Prioridades en los formatos Tablas anidadas Tablas Irregulares (Atributos colspan y rowspan) Anchos (Pixels Vs. Porcentajes)

Tablas

Qu es un hipervnculo? Ubicacin y rutas de documentos. Rutas Absolutas Rutas Relativas Rutas relativas a la raz del sitio

Hipervnculos

Vnculos a otras pginas. Etiqueta <A>.


Uso del atributo target (Destino). Anclaje de nombre. Atributo name.

Comportamientos del Navegador ante distintos tipos de

archivos enlazados.

Imgenes Elemento <IMG>


Qu imgenes se pueden usar? Ventajas y desventajas de cada formato. Imgenes e Hipervnculos

Para qu sirven?

Formularios

Elementos para Formularios Campos de Texto Casillas de Verificacin Botones de opcin Mens Botones Campos ocultos Campos de carga de archivos

Cmo se enva la informacin?


Se pueden validar los Campos?

Elemento <FORM>

Formularios
Atributos: method, action

Elemento <INPUT>

Atributo: type (text, checkbox, radio, button, hidden)


Elemento <SELECT>

Elemento <TEXTAREA>

Ms Elementos Otros Elementos


Nueva linea <BR> Lnea Horizontal <HR> Comentarios. <!- - xxxxx - ->

Antes de la aparicin de los estilos, la presentacin se manejaba directamente

Estilos CSS

dentro de los elementos HTML por medio de atributos. Por ejemplo: <h2 align="center"> <font color=blue" size=3" face="Times New Roman, serif"> <i>Seminario de HTML UCEMA</i> </font> </h2> CSS permite separar el contenido de un documento de su presentacin.
En el documento HTML: <h2>Seminario de HTML UCEMA</h2>
En la hoja de estilos se define el formato de los encabezados h2: h2 { text-align: center; color: blue; font: italic large "Times New Roman", serif; }

Ventajas del uso de CSS Estandarizar la presentacin de un sitio web completo.


Haciendola fcil de mantener.
Diferentes usuarios pueden contar con diferentes estilos

acordes a sus necesidades. Ejemplos:


Estilos para personas con dificultades visuales, Estilos para dispositivos mviles, Estilos para dispositivos monocromos, Estilos para impresin, Etc. Los documentos HTML se reducen en tamao y complejidad.

Formatos CSS Propiedades de fuentes


Propiedades de color y fondo Propiedades de texto espaciado de palabras
Margin (Margen) Border (Borde) Padding (Relleno) Contenido

alineacin
Propiedades de caja Margen

Borde
Relleno Estilos de listas

Una hoja de estilos consiste en un conjunto de reglas. Cada regla esta formada por:
El Selector (nombre del estilo) La Declaracin (define el estilo) Propiedad
h2 { text-align: center; color: blue; font: italic large "Times New Roman", serif; } .textoresaltado { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; /* Esto es un comentario */ color: #000000; } #logo { background-image: url("/img/logo.gif"); background-position:center; background-repeat:no-repeat; height: 50px; width: 150px; position: absolute; left: 0px; top: 0px; }

Estilos CSS

Valor

Qu podemos hacer con los estilos?


Redefinir estilos de Etiquetas HTML. Crear Estilos Personalizados para

uso genrico (Clases)


Crear Estilos para un elemento

HTML especfico (por Id)

Inline Styles

Como incluir estilos CSS

Utilizando el atributo style se define el

<h2 style="color: blue; background: green;"> Curso HTML UCEMA </h2> <head> <style type="text/css"> h2 { font-style: italic; font-weight: bold; color: blue; } </style> </head> <body> <h2>Curso HTML UCEMA</h2> </body>

estilo de un elemento HTML en forma


individual.
Embedded Style

Se define la regla CSS dentro de un documento HTML. Se puede aplicar a cualquier elemento de ese documento.
Hojas de Estilos externas

Un archivo CSS independiente que se


encuentra referenciado en cada uno de los documentos HTML que desean

utilizarlo.

<head> <link rel=stylesheet type="text/css href=estilos.css"> </head>

Javascript
Creado por Brendan Eich para Netscapa aparece en

Netscape 2.0B3 en 1995. Es un lenguaje de programacin interpretado con base en la sintaxis del lenguaje C. Est basado en objetos y guiado por eventos. No tiene nada que ver con Java Las funciones Javascript se incluyen en los documentos HTML interactuando con el DOM (Document Object Model) de la pgina para realizar tareas no factibles de hacer con HTML slo.

Brendan Eich Creador del Javascript

DOM: Es una interface (independiente del lenguaje) que permite a los scripts acceder dinmicamente y actualizar el contenido, la estructura y el estilo de los documentos.

Algunas de las cosas que se pueden hacer con Javascript:

Capacidades de Javascript

Abrir nuevas ventanas controlando su tamao, look & feel, controles, etc. Incorporar validaciones a los formularios. Cambios de imgenes al colocar el mouse sobre algn objeto de la pgina

web.
Generar respuestas ante distintos eventos Efectos visuales en la pgina. Crear, Eliminar o cambiar atributos de elementos de una pgina HTML en

forma dinmica.
Crear o Leer Cookies Detectar la configuracin del Browser.

En general se utiliza el elemento script

Dnde incluir el Javascript


<script language="JavaScript" src ="archivo.js"> </script> <script language="JavaScript" type="text/JavaScript"> <!-function AbroVentana (URL,nombre,features) { //Esto es un comentario

Las funciones Javascript pueden estar en archivos independientes. Por ejemplo:

Tambin se pueden incluir las instrucciones dentro del elemento Script. Por ejemplo:

window.open(URL,nombre,features);
} //--> </script>
El cdigo Javascript tambin se puede incluir directamente en un evento asociado a algn

elemento del documento. Por ejemplo: <input type=button" onclick="alert(Gracias por su click');return false;" value="Click">

XHTML (Extensive Hyper Text MarkUp Language) Es la versin XML de HTML Tiene las mismas funciones que el HTML pero con una sintxis ms

El Futuro

estricta (como el XML).


Surge para facilitar el acceso a la web de nuevos dispositivos

(Por ejemplo: dispositivos mviles).


La sintaxis ms estricta obliga a un formato correcto, liberando a los

navegadores de tratar de interpretar documentos mal creados, lo que hace ms rpida la carga de documentos bien hechos.

Conclusiones
Pgina Web Estructura Contenido Apariencia
Prrafos Tablas Encabezados Capas Listas Etc.
Textos Imgenes Enlaces Colores Tipografas Alineacin

HTML

Fondos Tamaos Etc.

CSS Javascript

Comportamiento

Efectos Validaciones Automatizacin

Preguntas

También podría gustarte