Vous êtes sur la page 1sur 46

EL MUNDO DEL

HTML

Objetivo
Presentar

elementos
bsicos de diseo de
pginas WWW.
Mostrar ejemplos de
diseo de una pgina
WWW sencilla.

HTML
H

YPER

EXT

M A R K U P
L A N G U A G E

LENGUAJE DE EDICION DE HIPERTEXTO

HTML
EL LENGUAJE

HTML ES UN
CONJUNTO DE COMANDOS
QUE DEFINEN UN
DOCUMENTO Y GUAN SU
PRESENTACIN EN UN
AMBIENTE DE HIPERTEXTO

HTML

Diseado para especificar la


organizacin lgica de un documento,
con enlaces de hipertexto e interaccin
de usuario.
Requiere que se construyan
documentos con secciones de textos
marcadas como unidades lgicas.
Ttulos, Encabezados, Prrafos,
Listas, etc.

HTML

La diferencia entre un documento


HTML y simple documento se
encuentra en las etiquetas (tags).
Los tags son porciones de texto
encerradas entre signos < >
Son instrucciones que indican al
browser que significa cada parte
del documento.

HTML
Un

documento HTML se
compone de elementos.
Elementos Vacos : no afectan
un bloque de texto y no
requieren un tag final.
Elementos con Atributos : que
definen caractersticas
especiales del elemento.

DOCUMENTO H T M L

ES UN ARCHIVO PLANO EN
FORMATO ASCII, PARA SU
ELABORACIN SE PUEDE UTILIZAR
CUALQUIER EDITOR QUE PERMITA
SALVAR EL DOCUMENTO BAJO
ESTE TIPO DE FORMATO Y CON LA
EXTENSIN .html EN W95 O .htm

ELEMENTOS DE UN
DOCUMENTO H T M L
TTULOS
ENCABEZADOS
TABLAS
PRRAFOS
LISTAS
REFERENCIAS A OTROS

DOCUMENTOS

ESTRUCTURA DE UN
DOCUMENTO H T M L

LOS COMANDOS UTILIZADOS EN


EL HTML SE DELIMITAN POR
MEDIO DE LAS ETIQUETAS O TAGS.
Ej.

ESQUEMA DEL
DOCUMENTO HTML

INICIO DEL DOCUMENTO


ENCABEZADO
TTULO
FIN DEL ENCABEZADO
CUERPO DEL TEXTO
PRRAFOS
FIN DEL CUERPO DEL TEXTO
FIN DEL DOCUMENTO

COMANDOS BSICOS
UTILIZADOS EN EL HTML
<HTML>
INICIA EL BLOQUE

DE
ESCRITURA EN LA PGINA.
<HTML>
BLOQUE DE COMANDOS
</HTML>

COMANDOS BSICOS
UTILIZADOS EN EL HTML
<HEAD>

INICIO DEL BLOQUE DE ENCABEZADO,


SE USA DESPUS DEL <HTML>, EN EL
SE UBICA EL TTULO DE LA PGINA.

<HTML>
<HEAD>
TEXTO
</HEAD>
</HTML>

COMANDOS BSICOS
UTILIZADOS EN EL HTML
<TITLE> DESPLIEGA EL TTULO
DENTRO DE UNA PGINA

<HTML>
<HEAD>
<TITLE>BLOQUE DE TTULO
</TITLE >
</HEAD>
</HTML>

COMANDOS BSICOS
UTILIZADOS EN EL HTML
<BODY>

INICIA EL BLOQUE QUE CONTENDR EL


CUERPO DEL TEXTO
<HTML>
<HEAD>
<TITLE>BLOQUE

DE

TTULO</Title></HEAD>
<BODY>

CUERPO DE LA PGINA
</BODY>
</HTML>

EJEMPLO DE UN
DOCUMENTO HTML

<HTML>
<HEAD>
<TITLE> UN EJEMPLO SIMPLE</TITLE>
</HEAD>
<BODY>
<h1>HTML F&aacute;CIL DE APRENDER</H1>

<P>BIENVENIDOS AL MUNDO DEL


HTML</P>
</BODY>
</HTML>

HERR
A MI E
LA ED
NTAS
ICIN
PARA
DE T
EXTO

PRRAFOS
<P> DELIMITA LOS PRRAFOS
DENTRO DEL CUERPO DEL TEXTO

<P>BIENVENIDOS AL MUNDO DEL HTLM


<P> ESTE ES EL SEGUNDO P&Aacute;RRAFO

SALTO DE RENGLN
<BR>

PERMITE INSERTAR UN
ENTER CUANDO SE DESEA UN
CAMBIO DE RENGLN. Ej.

<P>BIENVENIDOS AL MUNDO<BR>DEL
HTLM

<P> ESTE ES EL SEGUNDO P&Aacute;RRAFO

EJEMPLO SALTO DE
RENGLN

<BR> PERMITE INSERTAR UN


ENTER CUANDO SE DESEA UN
CAMBIO DE RENGLN. Ej.

RESALTAR CON NEGRITA


<B> SE UTILIZA PARA PONER
EN NEGRITA UN TEXTO QUE SE
DESEA RESALTAR. PARA ELLO
SE COLOCA AL INICIO Y AL
FINAL DE DICHO TEXTO. Ej.
<B> TEXTO RESALTADO </B>

TABULADOR
<DD> PERMITE ESTABLECER
UNA SANGRA AL INICIO DE UN
PRRAFO

<DD><B>BIENVENIDOS AL MUNDO DEL HTLM


<P> ESTE ES EL SEGUNDO P&Aacute;RRAFO</B>

LETRA INCLINADA
<I>

LE ASIGNA UN ATRIBUTO DE
LETRA INCLINADA AL PRRAFO
QUE SE DESEA DESTACAR

<I>ESTE ES EL SEGUNDO
P&Aacute;RRAFO</I>

CENTRADO DE TEXTO
<CENTER> SE USA PARA
CENTRAR UN TEXTO. Ej.
<CENTER>BIENVENIDOS AL
MUNDO DEL HTML</CENTER>

TAMAOS DE LETRAS

<H#> PERMITE ESPECIFICAR UN

TAMAO DE LETRA, EL CUAL VA DESDE


EL 1 AL 6

<H1>.....</H1> LA MS GRANDE
<H2>.....</H2>
.
<H3>.....</H3>
.
<H4>.....</H4>
.
<H5>.....</H5>
.
<H6>.....</H6> LA MS PEQUEA

EJEMPLO DE TAMAOS DE
LETRAS

ACENTUACIN EN LAS
VOCALES
LA

ACENTUACIN SE HACE
POR MEDIO DE UNA
ENTIDAD

&_acute; tilde
&_tilde; ee

ACENTUACIN EN LAS
VOCALES
&aacute;

--
&eacute; --
&iacute; --
&oacute; --
&uacute; --
&ntilde; --

&Aacute;

-&Eacute; -&Iacute; -&Oacute; -&Uacute; -&Ntilde; --

Estructura de un
documento(1):
HEAD (Encabezamiento)
BODY (Cuerpo)
Ejemplo:

<HTML>
<HEAD>Zona del
encabezamiento</HEAD>
<BODY>Zona del cuerpo</BODY>

</HTML>
07/31/16

Estructura de un documento
(2): HEAD

<TITLE>... </TITLE>
En HTML 3.2 el elemento <TITLE> es
obligatorio (para asegurar que
cualquier navegador muestre la
pgina).
Solo debe haber un <TITLE> ...
</TITLE> por documento.
Se debe intentar que los titulos tengan
relacin con el contenido de la pagina.

07/31/16

Formateo Bsico: Formato del prrafo


<P>

Sirve para delimitar un prrafo. Inserta una lnea en


blanco antes del texto.

<CENTER> ...
</CENTER>

Permite centrar todo el texto del prrafo.

<PRE WIDTH=x> ... Representa el texto encerrado en ella con un tipo de letra
de paso fijo. Muy til a la hora de representar cdigo
</PRE>
fuente. El parmetro WIDTH especifica el nmero mximo
de caracteres en una lnea.

<DIV ALIGN=x>
</DIV>
<ADDRESS>...
</ADDRESS>
<BLOCKQUOTE>
</BLOCKQUOTE>

07/31/16

... Permite justificar el texto del prrafo a la izquierda


(ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a
ambos mrgenes (JUSTIFY)
Para escribir direcciones (de esas donde vive la gente, no
electrnicas).
Para citar un texto ajeno. Se suele implementar dejando

... mrgenes tanto a izquierda como a derecha, razn por la


que se usa habitualmente.

Formateo Bsico:
Las 6 cabeceras
Etiqueta

07/31/16

Resultado

<H1> ... </H1>

Cabecera de nivel 1

<H2> ... </H2>

Cabecera de nivel 2

<H3> ... </H3>

Cabecera de nivel 3

<H4> ... </H4>

Cabecera de nivel 4

<H5>..</H5>

Cabecera de nivel 5

<H6>..</H6>

Cabecera de nivel 6

Formateo Bsico:
Etiqueta

Tipo de letra Utilidad

<B> ... </B>

Pone el texto en negrita.

<I> ... </I>

Representa el texto en cursiva.

<U> ... </U>

Para subrayar algo.

<S> ... </S>

Para tachar.

<TT> ... </TT>

Permite representar el texto en un tipo de letra de paso fijo.

<SUP> ... </SUP>

Letra superndice.

<SUB> ... </SUB>

Letra subndice.

<BIG> ... </BIG>

Incrementa el tamao del tipo de letra.

<SMALL>...</SMALL>

Disminuye el tamao del tipo de letra.

<BLINK> ... </BLINK>

Hace parpadear el texto. Resulta algo irritante.

07/31/16

Formato de frase:
Etiqueta

Utilidad

<CITE> ... </CITE>

Para citar un texto ajeno.

<CODE> ... </CODE>

Para escribir cdigo fuente.

<STRONG></STRON
La cosa es importante.
G>
<EM> ... </EM>

Para dar nfasis.

<KBD> ... </KBD>

Texto tecleado por el usuario.

<VAR> ... </VAR>

Representar variables de un cdigo.

<SAMP> ... </SAMP>

Para representar una serie de caracteres


literalmente.

<ABBR> ... </ABBR>

Abreviaturas.

07/31/16

Otros Elementos:

Etiqueta
<HR>

Utilidad
Inserta una barra
horizontal.

<BR>

Salto de lnea.

<!-- ... -->

Comentarios.

07/31/16

Formularios(1)

<FORM> y</FORM>

Permiten dentro de una pgina Web


solicitar informacin al visitante.

Una vez relleno el formulario se pasan


los datos a un programa para
procesarlos.

07/31/16

Formularios(2)

ACTION = "ruta_programa".
Indica el programa del servidor que va a "tratar"
las variables que se enven con el formulario.

<FORM ACTION = www.servidor.com/servlet/MiServlet">

ENCTYPE =" tipo ".


Indica el tipo de documento en formato MIME.

TARGET= " nombre ".


Indica en qu ventana de una pagina con
marcos se debe mostrar el resultado del proceso
07/31/16

Formularios(3)

METHOD = " POST / GET " .


Indica el metodo en el que se pasan los datos del
formulario a la direccion indicada por ACTION.
GET: los datos son encadenados al URL
especificado en action , utilizando el tipo de
codificacin especificado en el atributo enctype. Es
el metodo por defecto.
POST: se realiza una transaccin mediante el
protocolo HTTP. Se usa en casos en los que hay que
pasar mucha informacion.

07/31/16

Formularios(4): <INPUT>

TYPE = " tipo

text
radio
checkbox
button
image
submit
reset
password
hidden

07/31/16

Formularios(5): <INPUT>

NAME =" nombre

SIZE =" n

VALUE =" texto

DISABLED: desabilita el input.

ALT = " texto

CHECKED : selecciona por defecto un radio.

07/31/16

Conceptos Bsicos
Javascript
Lenguaje de programacin del lado del cliente , soportado por
el navegador.

VBScript
Un lenguaje de programacin de scripts del lado del cliente,
pero slo compatible con Internet Explorer.

ASP (Active Server Pages)


Tecnologa desarrollada por Microsoft para la creacin de
pginas dinmicas del servidor

Dreamweaver MX
Software fcil de usar que permite crear pginas Web de una
forma sencilla

07/31/16

Lenguaje de Script:
Javascript (cliente)

La secuencia de rdenes se ejecuta en la mquina


cliente, aquella en la que se est usando el
navegador.

Permite llevar a cabo tareas como:

Crear interfaces de usuario activas,

Dinamizar las pginas con efectos como las


imgenes de sustitucin.
Validar la informacin suministrada por el usuario
en un formulario (antes de enviar los datos y
evitando ese trabajo al servidor).
Generar pginas web sobre la marcha, de acuerdo
con las acciones realizadas por el usuario.

07/31/16

Controlar las ventanas del navegador,

Lenguaje de Script:
Javascript (cliente)

CONCEPTOS BSICOS:
Objetos: Elementos que se pueden manipular:
ventanas, formularios, elementos de formularios.
Propiedades (atributos): Caractersticas de los
objetos descritas en sus clases.
Mtodos: Acciones que los objetos pueden realizar.
Eventos: Sucesos que se producen en el navegador
debidos a la interaccin del usuario, tales como la
pulsacin con el ratn o el envo de los datos de un
formulario.
Funciones: Bloques de cdigo que se definen como
una unidad independiente con nombre; se invocan
colocando su nombre seguido de parntesis.
07/31/16

Lenguaje de Script:
Javascipt (cliente)

07/31/16

SINTAXIS: Sintaxis basada en el lenguaje Java.


Distingue entre minsculas y maysculas.

Para acceder a una propiedad de un objeto o


pasar un mensaje a un objeto se hace uso de la
sintaxis de punto. Ejm:windows.status.

Valores y variables ( var ):Un valor es un dato; un


nmero, una cadena de caracteres, un booleano (
true / false ) o un objeto.

Operadores: + suma o concatenacin, - resta ,


multiplicacin, / divisin, % mdulo, ++ incremento,
decremento, -cambio de signo.

Asignacin: variable operador= otra_ variable

Comentarios: //........ /*....bloque......*/

*
--

Lenguaje de Script:
Javascript
(cliente)
Las funciones permiten reutilizar cdigo :

FUNCIONES:

Ejemplo:

function nombre() {
// cdigo de la funcin
<HTML>

}
<HEAD>
<TITLE> Alertas de JavaScript</TITLE>
<SCRIPT LANGUAGE=" JavaScript">
function alerta() {
alert(" Bienvenido a mi pgina!");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
alerta();
</SCRIPT>
</BODY>
</HTML>
07/31/16

M U C HA S
GRACIAS