HTML

INTRODUCCION
A HTML Y
JAVASCRIPT
Ing. Diego J. Arcusin

darcusin@cema.edu.ar
Objetivos del Curso
Proveer al asistente de conceptos fundamentales que le

permitan utilizar los lenguajes HTML y Javascript en sus
proyectos informticos.
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
HTML (Hypertext Markup Language)

HTML = Hypertext + MarkUp
Hypertext
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
Tim Berners-Lee
imgenes) Director del W3C
En 1997 se define el estndar HTML 4.0
En 1999 aparece el estndar actual HTML 4.01
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 Ericsson Nokia
Apple Google, inc. Opera Software
AT&T HP Sun Microsystems
Cisco IBM Corporation Telefnica de Espaa
Citigroup Microsoft Yahoo, inc.
Deutsche Telekom Mozilla Foundation VeriSign
Y decenas de universidades de todo el mundo
HTML CSS Javascript
Pgina Web
Prrafos Tablas
Estructura Encabezados Capas
Listas Etc. HTML
Textos
Contenido Imgenes
Enlaces
Colores Fondos
Apariencia Tipografas Tamaos CSS
Alineacin Etc.
Efectos
Comportamiento Validaciones Javascript
Automatizacin
Elementos HTML
Los elementos son los componentes fundamentales del HTML

Cuentan con 2 propiedades bsicas:
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.
Elemento
Etiqueta de Apertura Contenido Etiq. de Cierre
<p class=texto>Curso HTML CEMA</p>

Nombre Valor
Atributo
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 algn elemento. Los
valores deben estar entre comillas.
Ejemplos:
<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>
Tipos de Elementos
Algunos tipos de Elementos

Estructurales
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>
Elementos del HEAD
Alguno de los elementos factibles de incluir en el HEAD son:

<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 Elements)
Parrafos
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> Crea una nueva fila
<td> </td> 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>
Tablas
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)
Hipervnculos
Qu es un hipervnculo?
Ubicacin y rutas de documentos.
Rutas Absolutas
Rutas Relativas
Rutas relativas a la raz del sitio
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
Formularios
Para qu sirven?
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?
Formularios
Elemento <FORM>
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 - ->
Estilos CSS
Antes de la aparicin de los estilos, la presentacin se manejaba directamente
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
Eneleldocumento
documentoHTML:
HTML: En
Enlalahoja
hojade
deestilos
estilosse sedefine
defineelelformato
formatode
delos
los
<h2>Seminario
<h2>Seminariode
deHTML
HTMLUCEMA</h2>
UCEMA</h2> encabezados
encabezadosh2: h2:
h2
h2{ {
text-align:
text-align:center;
center;
color:
color:blue;
blue;
font:
font:italic
italiclarge
large"Times
"TimesNewNewRoman",
Roman",serif;
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 Margin (Margen)
espaciado de palabras Border (Borde)
alineacin Padding (Relleno)
Propiedades de caja Contenido

Margen
Borde
Relleno
Estilos de listas
Estilos CSS
Una hoja de estilos consiste en un conjunto de reglas.
Cada regla esta formada por: h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman", serif;
El Selector (nombre del estilo) }

.textoresaltado {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
La Declaracin (define el estilo) font-style: normal;

font-weight: bold;
color: #000000;
/* Esto es un comentario */
Propiedad #logo {
background-image: url("/img/logo.gif");
background-position:center;
background-repeat:no-repeat;
Valor }
height: 50px; width: 150px;
position: absolute; left: 0px; top: 0px;
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)
Como incluir estilos CSS
Inline Styles
<h2
<h2style="color:
style="color:blue;
blue;background:
background:green;">
green;">
Utilizando el atributo style se define el Curso HTML UCEMA
Curso HTML UCEMA
</h2>
</h2>
estilo de un elemento HTML en forma
individual. <head>
<head>
<style
<styletype="text/css">
type="text/css">
Embedded Style h2
h2{ {
Se define la regla CSS dentro de un font-style:
font-style:italic;
italic;
font-weight:
font-weight:bold;
bold;
documento HTML. Se puede aplicar a color:
color:blue;
blue;
}}
cualquier elemento de ese documento. </style>
</style>
Hojas de Estilos externas </head>
</head>
<body>
<body>
Un archivo CSS independiente que se <h2>Curso
<h2>CursoHTML HTMLUCEMA</h2>
UCEMA</h2>
</body>
</body>
encuentra referenciado en cada uno de los
documentos HTML que desean utilizarlo. <head>
<head>
<link
<linkrel=stylesheet
rel=stylesheettype="text/css
type="text/csshref=estilos.css">
href=estilos.css">
</head>
</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.
Capacidades de Javascript
Algunas de las cosas que se pueden hacer con 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.
Dnde incluir el Javascript
En general se utiliza el elemento script
Las funciones Javascript pueden estar en archivos independientes. Por ejemplo:
<script language="JavaScript" src ="archivo.js"> </script>
Tambin se pueden incluir las instrucciones dentro del elemento Script. Por ejemplo:
<script language="JavaScript" type="text/JavaScript">

</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">
El Futuro
XHTML (Extensive Hyper Text MarkUp Language)

Es la versin XML de HTML
Tiene las mismas funciones que el HTML pero con una sintxis ms
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
Prrafos Tablas
Estructura Encabezados Capas
Listas Etc. HTML
Textos
Contenido Imgenes
Enlaces
Colores Fondos
Apariencia Tipografas Tamaos CSS
Alineacin Etc.
Efectos
Comportamiento Validaciones Javascript
Automatizacin
Preguntas

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

INTRODUCCION

Ing. Diego J. Arcusin

Proveer al asistente de conceptos fundamentales que le

HTML (Hypertext Markup Language)

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

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

Los elementos son los componentes fundamentales del HTML

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

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

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

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

Algunos tipos de Elementos

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

<table> </table> Crea la tabla

Por ejemplo: Creacin de una tabla de 2 x 2

Qu son y para qu sirven.

Estandarizar la presentacin de un sitio web completo.

Propiedades de caja Contenido

El Selector (nombre del estilo) }

La Declaracin (define el estilo) font-style: normal;

Qu podemos hacer con los estilos?

Creado por Brendan Eich para Netscapa aparece

Algunas de las cosas que se pueden hacer con Javascript:

XHTML (Extensive Hyper Text MarkUp Language)

Vous aimerez peut-être aussi