Você está na página 1de 71

CONSTRUCCIN DE ELEMENTOS DE

SOFTWARE WEB

2015

Qu es HTML?
HyperText
Markup
Language
(lenguaje
de
marcas
de
hipertexto). Es un estndar que
sirve
de
referencia
para
la
elaboracin de pginas web en sus
diferentes versiones, define una
estructura bsica y un cdigo
(denominado cdigo HTML)

Estructura bsica de un
documento HTML

<XYZ> este es el inicio de una


etiqueta.
</XYZ> este es el cierre de una
etiqueta.
<html> [Todo el documento] </html>

Un documento HTML est


dividido en dos zonas
principales:
1. El encabezamiento, comprendido
entre las etiquetas <head> y
</head>
2. El cuerpo, comprendido entre las
etiquetas <body> y </body>

<html>
<head>
<title> Ttulo de la pgina </title>
</head>
<body>
[Aqu van las etiquetas que visualizan la
pgina]
</body>
</html>

Color, tamao y tipo de letra


<font XYZXYZXY </font>
Atributo face:
<font
face="Comic
Sans
MS,arial,verdana">Este texto tiene otra
tipografa</font>
Atributo Size:
<font
size="4">Este
grande</font>

texto

es

ms

Color, tamao y tipo de letra


<font XYZXYXZX </font>
Atributo color:
<font color="red">Este texto
rojo</font>

est

en

Otras Etiquetas
<p> Aqu va el texto del prrafo que queramos
crear </p>
El <b>texto</b> en negritas. El texto en
negrita
El <i>texto</i> en cursiva.
El texto en
cursiva
El <u>texto</u>subrayado
El texto
subrayado

Otras Etiquetas
Titulares
<h1></h1> Sirven para poner ttulos en la
pgina
Estos ttulos van desde h1 hasta h6, del
mas
grande
al
mas
pequeo
respectivamente.
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Atributos para pginas

Estos atributos se definen en la etiqueta <body>


bgcolor: especificamos un color de fondo para la
pgina.
background: Sirve para indicar la colocacin de una
imagen como fondo de la
Pgina.
text: este atributo sirve para asignar el color del texto de
la pgina.
<body bgcolor="#000000" text="#ffffff" link="#ffff33"
alink="#ffffcc"
alink="ffff00">

Listas
1. Listas desordenadas
Son delimitadas por las etiquetas <ul> y </ul>
(unordered list). Cada uno de los elementos de la lista es
citado por medio de una etiqueta <li> (sin cierre, aunque no
hay inconveniente en colocarlo).
Ejemplo:
<p>Pases del mundo</p>
<ul>
<li>Argentina
<li>Per
<li>Chile
</ul>

Listas
<ul type="tipo de vieta">
donde tipo de vieta puede ser uno de los siguientes:
circle
disc
square
<ul type="square">
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4
</ul>

Listas
2. Listas ordenadas
En este caso usaremos las etiquetas <ol> (ordered list)
y su cierre. Cada elemento ser igualmente precedido de
su etiqueta <li>.
Ejemplo:
<p>Reglas de comportamiento en el trabajo</p>
<ol>
<li>El jefe siempre tiene la razn
<li>En caso de duda aplicar regla 1
</ol>

Listas
1
a
A
i
I

Para ordenar por nmeros


Por letras del alfabeto
Por letras maysculas del alfabeto
Ordenacin por nmeros romanos en minsculas
Ordenacin por nmeros romanos en maysculas

Listas
3. Listas de definicin
Cada elemento es presentado junto con su definicin. La
etiqueta principal es <dl> y </dl> (definition list). La
etiquetas del elemento y su definicin son <dt>
(definition
term)
y
<dd>
(definition
definition)
respectivamente.
<p>Diccionario de la Real Academia</p>
<dl>
<dt>Brujula
<dd>Serula montada en una escbula
<dt>Oreja
<dd>Sesenta minutejos
</dl

Listas
4.

Anidando listas

<p>Ciudades del mundo</p>


<ul>
<li>Argentina
<ol>
<li>Buenos Aires
<li>Bariloche
</ol>
</ul>

Actividad
Elabore un pgina que contenga los tres tipos
de
listas
(Ordenadas,
Sin
orden
y
de
definicin). Las listas de definicin deben estar
anidadas dentro de la lista ordenada.

Enlaces
Tipos de enlaces
Enlaces dentro de la misma pgina
Enlaces con otra pgina nuestra
Enlaces con una pgina fuera de nuestro
sistema
Enlaces con una direccin de e-mail
Enlaces con archivos: para que los usuarios
puedan descargarlos

Enlaces
<a href ="XXX"> YYY </a>
Donde XXX
es el destino del enlace
(Obsrvese las comillas). YYY es el
texto indicativo en la pantalla del enlace (con
un color especial y
generalmente subrayado)

Enlaces dentro de la misma


pgina
Su estructura es, entonces:
<a href="#MARCA"> YYY </a>
Y en el sitio exacto a donde queremos saltar,
debemos poner la siguiente etiqueta:
<a name ="MARCA"> YYY </a>

Enlaces con otra pgina nuestra


<a href="contactos.html"> si quiere contactarse
con nosotros </a>
Enlaces con una pgina fuera de nuestro
sistema
<a href="http://home.netscape.com/">
inicial de Netscape </a>

Pgina

Enlaces con una direccin de e-mail


<a href= mailto: direccin de e-mail> Texto del
enlace </a>
Enlaces con un archivo
<a
href="mi_archivo.zip">Descarga
mi_archivo.zip</a>

Actividad
Disee una pgina con sus aficiones principales
deben existir imgenes, enlaces dentro de las
misma pgina, y aplicar todos los conceptos vistos
en esta unidad.

Actividad

Formularios
Los formularios son definidos por medio de las
etiquetas <form> y </form>.
Action: Define el tipo de accin a llevar a cabo
con el formulario:
El formulario es enviado a una direccin de
correo electrnico
El formulario es enviado a un programa o script
que procesa su contenido

Formularios
Method: Este atributo se encarga de especificar la
forma en la que el formulario es enviado. Los dos
valores posibles que puede tomar esta
atributo son post y get.
Enctype: Se utiliza para indicar la forma en la que
viajar la informacin que se mande por
el
formulario. En el caso ms corriente, enviar el
formulario por correo electrnico, el valor
de este atributo debe de ser "text/plain". As
conseguimos que se enve el contenido del
formulario como texto plano dentro del email.

Formularios
<form action="mailto:direccion@correo.com (o
nombre del archivo de
proceso)" method="post" enctype="text/plain">

Elementos de los formularios


Texto corto:
<input type="text" name="nombre">
Size: Define el tamao de la caja en nmero de
caracteres. Si al escribir el usuario llega al final
de la caja, el texto ira desfilando a medida
que se escribe haciendo desaparecer la parte de
texto que queda a la izquierda.
Maxlength: Indica el tamao mximo del texto
que puede ser tomado por el formulario.

Elementos de los formularios


Texto corto:
Value: En algunos casos puede resultarnos
interesante asignar un valor definido al campo en
cuestin.
<input
type="text"
value="Pepito Perez">

name="nombre"

Elementos de los formularios


Texto oculto:
Podemos esconder el texto escrito por medio de
asteriscos de.
Este tipo de campos son
anlogos a los de texto con una
sola
diferencia:
remplazamos
el
atributo
type="text" por type="password":
<input type="password" name="nombre">

Elementos de los formularios


Texto largo
Rows: Define el nmero de lneas del campo de
texto.
Cols: Define el nmero de columnas del campo de
texto.
La etiqueta queda por tanto de esta forma:
<textarea name="comentario rows="10
cols="40"> </textarea>

Elementos de los formularios


Listas de opciones
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoo</option>
<option>Invierno</option>
</select>

Elementos de los formularios


Listas de opciones
Size: Indica el nmero de valores mostrados de la
lista. El resto pueden ser vistos por medio de la
barra lateral de desplazamiento.
Multiple: Permite la seleccin de ms varios
elementos de la lista
<select name="estacion" size="3" multiple>

Elementos de los formularios


Listas de opciones
Selected: Este atributo no toma ningn valor
sino que simplemente indica que la opcin que lo
presenta esta elegida por defecto.
Value: Define el valor de la opcin que ser
enviado al programa o correo electrnico.
<option value="1">Primavera</option>

Elementos de los formularios


Botones de radio
<input
type="radio"
value="1">Primavera
<br>
<input
type="radio"
value="2">Verano
<br>
<input
type="radio"
value="3">Otoo
<br>
<input
type="radio"

name="estacion"

name="estacion"

name="estacion"

name="estacion"

Elementos de los formularios


Botones de radio
Cabe sealar que es posible preseleccionar
por defecto una de las opciones. Esto puede
ser conseguido por medio del atributo checked:
<input type="radio" name="estacion" value="2"
checked>Verano

Elementos de los formularios


Cajas de validacin
Este tipo de elementos pueden ser activados
o desactivados por el visitante por un simple
clic sobre la caja en cuestin.
<input type="checkbox" name="pollo">Me gusta
el pollo

Elementos de los formularios


Botn de envo
<input type="submit" value="Enviar">
Botn de borrado
<input type="reset" value="Borrar">
Botones normales
<input type=button value="Texto escrito en el
botn">

Elementos de los formularios


nombre=juan jose restrepo
email= jjr@gmail.com
poblacion=Medelln, Antioquia
sexo=Varon
utilizacion=2
comentarios=No creo que sea una buena lnea.
Poner ms autobuses.
recibir_info=on

FRAMES ( MARCOS )

FRAMES ( MARCOS )
Lo primero que tenemos que hacer es crear un
documento HTML en el que definiremos cuntas
zonas va a haber, qu distribucin y tamao
van a tener, y cul va ser el contenido de
cada una de ellas.

PGINAS DE ESTILO EN
CASCADA Y JAVASCRIPT
El modo de funcionamiento de las CSS
consiste en definir, mediante una sintaxis
especial, la forma de presentacin que le
aplicaremos a:
Un web entero, de modo que se puede definir la
forma de todo el web de una sola vez.
Un documento HTML o pgina, se puede definir
la forma, en un pequeo trozo de cdigo en la
cabecera, a toda la pgina.

CSS
Una porcin del documento, aplicando estilos
visibles en un trozo de la pgina.
Una etiqueta en concreto, llegando incluso a
poder definir varios estilos diferentes para una
sola etiqueta.

USOS DE LAS CSS


Para definir estilos en secciones reducidas de una
pgina se utiliza la etiqueta <SPAN>. Con su
atributo style indicamos en sintaxis CSS las
caractersticas de estilos.
<p> Esto es un prrafo en varias palabras
<span
style="color:green">en
color
verde</span>. resulta muy fcil.
</p>

Estilo definido en una parte de


la pgina
Con la etiqueta <DIV> se pueden definir
secciones de una pgina y aplicarle estilos con el
atributo style, es decir, se pueden definir
estilos de una vez a todo un bloque de la
pgina.
<div style="color:#000099; font-weight:bold">
<h3>Estas
etiquetas
van
en
<i>azul
y
negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los
etilos

Estilo definido en una pgina

A grandes rasgos, entre de <STYLE> y


</STYLE>, se coloca el nombre de la
etiqueta que queremos definir los
estilos y entre llaves -{}- colocamos
en sintaxis CSS las caractersticas de
estilos.

Estilo definido para todo un sitio


web
1. Creamos el archivo con la declaracin
de estilos
2. Enlazamos la pgina web con la hoja
de estilos:
rel = "STYLESHEET" indicando que el
enlace es con una hoja de estilo
type = "text/css" porque el archivo es de
texto, en sintaxis CSS
href = "estilos.css" indica el nombre del
archivo fuente de los estilos

Declaracin de estilos con archivo


externo. (Para todo un sitio web)
Declaracin de estilos para toda la
pgina. (Con la etiqueta <STYLE>
en la cabecera de la pgina) Estilos
definidos en una parte de la pgina.
(Con la etiqueta <DIV>)
Definidos en una etiqueta en concreto.
(Utilizando el atributo style en la
etiqueta en cuestin)
Declaracin de estilo para una
porcin pequea del documento.
(Con la etiqueta<SPAN>)

Definir estilos utilizando clases


Una clase se puede definir entre las
etiquetas <STYLE> (en la cabecera del
documento), o en un archivo externo
a la pgina. Para definirlas se utiliza
la siguiente sintaxis, un punto seguido
del nombre de la clase y entre llaves los
atributos de estilos deseados. De esta
manera:
.nombredelaclase {atributo:
valor;atributo2:valor2; ...}

Definir estilos utilizando clases


Una vez se tiene una clase, se puede
utilizar en cualquier etiqueta HTML. Para
ello se utiliza el atributo class, ponindole
como valor el nombre de la clase, de esta
forma:
<ETIQUETA class="nombredelaclase">

Qu es JavaScript?
U

La sintaxis JavaScript
1.
2.
3.
4.
5.

Diferenciar MAYUSCULAS y minsculas


Palabras reservadas
Sentencias punto y coma
Comentarios
La etiqueta <Script>

Case Sensivity
1. Nombres JavaScript tales como: variables,
keywords, objects, functions y demas son
case sensivity.
2. trUe dar error
3. Algunos nombres son una mezcla de
maysculas y minsculas:
onClick
Math.floor

La sintaxis JavaScript
1. JavaScript ignora los espacios en blanco:
Var name=tom; Igual a: Var name = tom;
2. Los nombres de funciones no pueden contener
espacios en blanco:
onMouseOver(); no puede ser: on Mouse Over();
onClick();
no puede ser: on Click();

La sintaxis JavaScript
Var name = Suso document.write(hola+name);
Var name = Suso; document.write(hola+name);

La sintaxis JavaScript
// comentario en linea simple
/* Este es un bloque de
Comentarios que se extiende por
Varias lineas */

Atributos <script>
1. Language:
<script language="javascript>
</script>
2. Type
<script language="javascript
Type=text/javascript>
</script>
3. Src
<script language="javascript
Type=text/javascript src=ejemplo.js>
</script>

Combinar tareas usando


funciones
1. Funcin integrada
2. Declarar una funcin
3. Llamar una funcin
Document.write(ejemplo);

Entender los Objetos


Los objetos pueden almacenar datos:
Propiedades del objeto
Roberto.direccion
Roberto.telefono
Los objetos pueden
incluir mtodos
Funciones que trabajan con propiedades del
objeto
Roberto.mostrar

Declaraciones Condicionales
If(contador == 1) alert (El contador vale 1);

Declaraciones Condicionales
If(contador == 1)
{
alert (El contador vale 1);
}

Qu son los Arrays?


meses = new Array();
meses[0]=enero;
meses[1]=febrero;
meses[2]=marzo;

Arrays numrico
puntos = new Array(4);
puntos[0]=45;
puntos[1]=65;
puntos[2]=38;
puntos[3]=17;

Tamao de un Array
puntos = new Array(23);
Document.write(puntos.length);

Arrays String
paises = new Array(4);
paises[0]=colombia;
paises[1]=ecuador;
paises[2]=peru;
paises[2]=venezuela;

Uso de switch
Incluida en javascript 1,2 y superior

Uso de objetos de javascript


Objetos: Tipos de datos compuestos
Objetos: Modo de presentar y organizar datos
Propiedades: Adjetivos.
Objetos: Sustantivos.
Mtodos: Verbos

Estructura de un objeto

Crear Objetos
Podemos crear un objeto con el uso de la palabra
clave new y el uso del constructor Object().

El objeto Math

Math.PI;
Math.COS(x);
Busquemos propiedades del objeto Math.
mtodos del objeto Math.