Programacion Web

Laboratorio de Cómputo de Ingeniería Programación para Web
PROGRAMACIÓN PARA WEB

Objetivo:
Adquirir por medio de prácticas dirigidas los conocimientos suficientes para la combinación
de HTML, JavaScript y CSS necesarios para crear una pagina Web de calidad, en forma
sencilla.
1. Introducción
El tecnicismo HTML significa Hiper Text Markup Lenguage, que no es mas que texto plano
con etiquetas llamadas Tags que hacen desplegar en el browser fondos, colores, fuentes,
imágenes, y formatos todo encaminado al mejor diseño de una página web. Para editar estos
archivos de texto basta con contar con algún editor simple de texto como Notepad, Edit,
Vi, Pico, etc.
2. HTML
2.1 Tags ó etiquetas
Los tags o etiquetas son parte de un documento HTML mediante los cuales indicamos un
formato u objeto a poner dentro de la página. Un tag se empieza con el símbolo "<", a
continuación el nombre del tag a poner y finalmente el símbolo ">" que determina el fin del
tag. Así tendríamos lo siguiente:
< nombre_del_tag >
Por lo regular los tags de formato funcionan como un encapusulador en donde todo lo que
va después de ese tag es afectado por este mismo, por lo tanto tienen un terminador el cual
siempre es el mismo tag antecedido por el símbolo "/" de la manera siguiente:
< /nombre_del_tag>
Los tags de objeto por lo regular no tienen un terminador sin embargo hay algunas
excepciones como veremos mas adelante.
2. 2 Forma del archivo básico HTML
Para dar inicio al formato básico de un archivo HTML es necesario conocer las etiquetas
básicas, a continuación se dará una breve descripción de estas.
Capacitación 1
2. 3 Etiquetas (tags) básicas
<html> </html>
Crea un documento HTML
<head> </head>
Encabezado con información de nuestra página que no es mostrada.
<body> </body>
Define la porción visible del documento.
<title> </title>
Define el nombre que aparecerá en la barra de título.
Conociendo los anteriores tags podemos continuar con el formato del archivo básico HTML
que es el siguiente:
<HTML>
<HEAD>
Información general de la página, Scripts, Hojas de estilo, etc.
<TITLE>
Título de la Página.
</TITLE>
</HEAD>
<BODY>
Texto, video, imágenes, sonido, objetos, etc.
</BODY>
</HTML>
El formato anterior deberá ir siempre en cada página para que esta funcione correctamente
en todos los browsers.
2. 4 Atributos del Encabezado
El encabezado servirá para dar información adicional del documento, esta información no
será desplegada en el browser sin embargo podrá afectar a toda la página con comandos o
scripts.
La información de la página se dará en el tag "META" el cual estará dentro del tag "HEAD"
de las siguientes formas:
<META HTTP-EQUIV="comando" CONTENT="configuraciones del comando">
En esta forma el browser obedece a alguno de los siguientes comandos:
Capacitación 2
<META HTTP-EQUIV="content-type" CONTENT="Contenido del tipo MIME">

Este comando dice que tipo de archivo será mostrado en el browser, indicado por el tipo
MIME que es un estándar de formatos. A continuación veremos un ejemplo:
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-

1">
<META HTTP-EQUIV="refresh" CONTENT="segudos_a_esperar;

url="direccion_archivo_ó_marca">
Este comando hace que el browser cargue alguna página en cierta cantidad de tiempo, a
continuación veremos un ejemplo:
<META HTTP-EQUIV="refresh" CONTENT="10; url="http://www.ulsa.edu.mx">
En esta forma se especificará información de la página de la manera siguiente:
<META NAME="titulo_de_la_información" CONTENT="contenido de la

información">
Se puede poner cualquier cantidad de información que uno quiera sin embargo hay
información estándar que veremos a continuación:
<META NAME="author" CONTENT="Nombre del autor">

Especifica el nombre del autor de dicha página.
<META NAME="generator" CONTENT="Nombre del programa">

Especifica el nombre del programa que generó el documento HTML..
<META NAME="description | keywords" CONTENT="lista de palabras separadas

por comas">
Especifica palabras que proveen una descripción de la página generalmente usado por
algunos buscadores, como Infoseek y Altavista.
Capacitación 3
2.5 Atributos del Cuerpo
Los atributos del cuerpo nos servirán para dar un formato general a la página así como
cambiar algunos parámetros importantes del navegador.
<body bgcolor=...>
Define el color de fondo, usando un nombre o el código hexadecimal.
<body background=...>
Define una imagen de fondo, usando un nombre del archivo.
<body text=...>
Define el color del texto, usando un nombre o el código hexadecimal.
<body link=...>
Define el color de los links, usando un nombre o el código hexadecimal.
<body vlink=...>
Define el color de los links ya explorados, usando un nombre o el código hexadecimal.
<body alink=...>
Define el color de los links que están activos en ese momento, usando un nombre o el código
hexadecimal.
2.6 Tags para el formato de texto
<h1> </h1>
Crea el título de mayor tamaño posible.
<h6> </h6>
Crea el título de menor tamaño posible.
<b> </b>
Aplica negritas.
<i> </i>
Aplica cursivas.
<font size=#> </font>

Define el tamaño de los caracteres de 1 a 7.
<font face=...> </font>
Capacitación 4
Define el tipo de fuente por ejemplo Tahoma, Arial, Verdana, etc..
<font color=...> </font>

Define el color de los caracteres, usando un nombre o código hexadecimal.
2.7 Ligas
<a href="http://..."> </a>

Crea una liga a un archivo o página.
<a href="mailto:e-mail"> </a>

Crea una liga para enviar un e-mail.
<a name="nombre"> </a>

Crea una etiqueta de destino de una liga dentro de un documento.
<a href="#nombre"> </a>

Vincula con una etiqueta de destino desde cualquier otra parte del mismo documento.
2.8 Diagramación
<p>
Define un nuevo párrafo.
<p align=...>
Alinea un párrafo hacia la izquierda (left), derecha (right), o centro (center).
<br>
Inserta un salto de línea (line break).
<blockquote> </blockquote>
Genera una sangría por ambos costados.
<ol type=...> </ol>

Crea una lista numerada de varias formas, romana minúscula ( i ), romana mayúscula (I),
numérica (1).
<li>
Precede cada ítem de la lista y agrega un número, según la posición en la lista.
<ul></ul>
Capacitación 5
Crea una lista no numerada (con "bullets").
<div align=...>
Tag genérico para formatear bloques grandes de texto y hojas de estilo
2.9 Elementos gráficos
<img src="...">
Inserta una imagen.
<img src="..." align=...>

Alinea una imagen (left, right, center, bottom, top, middle).
<img src="..." border=?>

Define el tamaño del borde alrededor de la imagen.
<img src="..." name="nombre">

Define el nombre de la imagen como un objeto específico.
<hr>
Inserta una línea horizontal.
<hr size=#>
Define el tamaño (altura) de la línea.
<hr width=#>
Define el ancho de la línea, valor absoluto (píxeles) o con % que indica porcentaje.
<hr noshade>
Crea una línea sin sombra.
Capacitación 6
2.10 Tablas
<table></table>
Crea una tabla.
<tr></tr>
Define una nueva fila en la tabla.
<td></td>
Define cada celda en la fila.
<th></th>
Define una celda de encabezado (texto centrado y en negrita).
2.10.1 Atributos de Tabla
<table border=#>
Coloca un borde alrededor de las celdas.
<table cellspacing=#>
Define el espacio entre las celdas.
<table cellpadding=#>
Define el espacio entre el borde de la celda y su contenido.
<table width=# o %>

Define el ancho de la tabla, en píxeles (#) o en porcentaje (#%) del ancho del documento.
<tr align=...> o <td align=...>

Define la alineación en la celda (= left, center, o right).
<tr valign=...> o <td valign=...>

Define la posición vertical del contenido de la celda (= top, middle, o bottom).
<td colspan=#>
Define la cantidad de columnas que puede ser abarcada por la celda (1 por default).
<td rowspan=#>
Define la cantidad de filas que puede ser abarcada por la celda (1 por default).
<td nowrap>
Evita que las líneas de texto de una celda sean cortadas por un salto de línea.
Capacitación 7
2.11 Atributos de Multimedia
<embed src="...">
Inserta un objeto de multimedia directamente en la página.
<embed src="..." HIDDEN="true" ó "false">

Oculta el objeto de la página.
<embed src="..." LOOP=n,"true">

Repite la acción del objeto n número de veces o infinitamente.
<embed src="..." AUTOSTART="true" ó "false">

El objeto empezará automáticamente al cargarse o impedirá que esta empiece después de
cargarse.
<embed src="..." WIDTH=# ó % HEIGHT=# ó %>

El objeto tomará el tamaño especificado de ancho y alto en píxeles o en porcentaje.
Nota: Existen otras formas de insertar multimedia en una página, las cuales veremos mas
adelante.
2.12 Formas
<form></form>
Crea un formulario.
<select multiple name="nombre" size=#></select>

Crea un menú en forma de lista. El tamaño "size" indica el número de ítems visibles antes
de desplazar la lista.
<option>
Define cada ítem del menú.
<select name="nombre"></select>
Crea un menú desplegable.
<option>
Define cada ítem del menú.
<textarea name="nombre" cols=# rows=#></textarea>

Crea una caja de texto. "Cols" define el ancho y "rows" define el alto.
<input type="checkbox" name="nombre">
Capacitación 8
Crea un cuadro de elección (checkbox). El texto va a continuación.
<input type="radio" name="nombre" value="x">

Crea un botón de activado y desactivado. El texto lo sigue. "Value" es el valor asociado
(que devuelve el form sí se activa el botón).
<input type=text name="nombre" size=n>

Crea un área de texto de una línea. Se indica su longitud (size) en número de caracteres.
<input type="submit" value="nombre">

Crea un botón de envío. "Value" es la palabra que aparecerá dentro del botón.
<input type="image" border=0 name="nombre" src="nombre.gif">

Crea un botón de envío de datos usando una imagen.
<input type="reset">
Crea un botón de "Reset" limpia la forma a su valor inicial.
Nota: Para que las formas funcionen efectivamente, se requiere un script CGI. HTML sólo
crea el aspecto de la forma.
Ahora que conocemos los tags suficientes para realizar una página web sencilla, ahora
pasaremos a la sección de "Hojas de estilo (CSS)", en la cual veremos otro enfoque de
páginas web.
Capacitación 9
2.13 Hojas de estilo (CSS)
Una hoja de estilo es un conjunto de reglas que se aplican a una o más etiquetas HTML y
definen qué apariencia tendrá el contenido de esa hoja al enviarla a pantalla, al imprimirla, o
con cualquier dispositivo que se use para ver una página web. El lenguaje y reglas de CSS
(Cascading Style Sheet. Hojas de Estilo en Cascada.) hacen este trabajo de forma muy
simple y clara, facilitando la tarea de diseñar páginas web atractivas y vistosas.
CSS consta de reglas que describen la forma en como se visualiza cada uno de los elementos
como veremos a continuación:
<style type="text/css">
tags_seleccionadores { propiedad1: valor1; propiedad2:valor2; ... propiedadN:valorN;}
</style>
Así las propiedades están agrupadas por tipos, propiedades de texto, propiedades de fuente,
propiedades de color y fondo, propiedades de diagramación, propiedades de
posicionamiento.
2.13.1 Propiedades de texto

Características que se modificarán del texto tales como espacio y alineación.
word-spacing:valor;
Cambia el espacio entre palabras, si se asigna algún valor negativo las palabras
aparecerán encimadas unas sobre otras.
letter-spacing:valor;
Cambia el espacio entre caracteres de un texto, si se asigna algún valor negativo los
caracteres se encimarán unos sobre otros.
text-decoration:valor;
Cambia la decoración del texto, con alguno de los valores siguientes:
none: sin decoración alguna.
underline: Subrayado.
overline: Una línea por encima del texto.
line-through: tachado.
text-transform:valor;
Modifica la propiedad de mayúsculas y minúsculas del elemento con los valores siguientes:
none: No lo modifica.
capitalize: Pone mayúscula a la primera letra de cada palabra.
uppercase: Pone en mayúsculas todas las letras.
lowercase: Pone en minúsculas todas las letras.
Capacitación 10
text-align:valor;
Modifica la alineación del texto con los valores siguientes:
left: Alinea el elemento hacia la izquierda.
right: Alinea el elemento hacia la derecha.
center: Centra el elemento.
justify: Justifica el elemento.
text-ident:valor;
Indica la identación o sangría que hará en la primera línea del bloque de texto.
2.13.2 Propiedades de fuente
Se afectan las características de la letra como el tamaño y el tipo de fuente.
font-family:fuente1,fuente2,fuente3,...,fuenteN;
Cambia el tipo de fuente que se desea para el seleccionador se escogerá la que se encuentre
primero.
font-style:estilo;
Cambia el estilo de la fuente con los valores siguientes:
normal: No la modifica.
italic: Aplica itálica, cursiva.
oblique: Inclinada un estilo entre normal y cursiva.
font-weight:peso;
Aplica negritas proporcionales en donde 100 es el valor más ligero y 900 el más pesado.
font-size:valor;
Cambia el tamaño de la fuente que se usará en el seleccionador.
2.13.3 Propiedades de color y fondo
color:color;
Indica el color del elemento al que se aplica.
background-color:color;
Indica el color de fondo del elemento al que se aplica, se pueden utilizar las unidades CSS o
bien el valor transparent que asigna el color transparente.
background-image:url;
Asigna una imagen como fondo al elemento que se aplica.
Capacitación 11
background-repeat:modo;
Cambia la forma en como se repetirá la imagen de fondo, los valores aceptados son los
siguientes:
repeat: La imagen se repetirá tanto horizontal como verticalmente.
repeat-x: La imagen se repetirá solo en horizontal.
repeat-y: La imagen se repetirá solo en vertical.
no_repeat: La imagen no se repetirá.
background-attachment:modo;
La imagen permanecerá fija al hacer un scroll al contenido de la página los valores
aceptados son los siguientes:
scroll: La imagen se desplazara con el scroll.
fixed: La imagen no se desplazara con el scroll.
2.13.4 Propiedades de diagramación
margin-top:valor;
Cambia el valor del margen hacia arriba del elemento.
margin-botton:valor;
Cambia el valor del margen hacia abajo del elemento.
margin-right:valor;
Cambia el valor del margen hacia la derecha del elemento.
margin-left:valor;
Cambia el valor del margen hacia la izquierda del elemento.
border-top-width:valor;
Cambia el tamaño del borde superior del elemento con alguno de los siguientes valores:
thin: Borde fino.
medium: Borde medio.
thick: Borde grueso.
border-botton-width:valor;
Cambia el tamaño del borde inferior del elemento con alguno de los siguientes valores:
thin: Borde fino.
border-right-width:valor;
Cambia el tamaño del borde derecho del elemento con alguno de los siguientes valores:
Capacitación 12
thin: Borde fino.

border-left-width:valor;
Cambia el tamaño del borde izquierdo del elemento con alguno de los siguientes valores:
thin: Borde fino.
border-color:color;
Cambia el color del borde.
width:valor;
Cambia el ancho de un elemento.
height:valor;
Cambia el alto de un elemento.
float:valor;
Cambia la alineación del elemento con alguno de los siguientes valores:
left: Alinea hacia la izquierda.
right: Alinea hacia la derecha.
none: Sin alineación.
white-space:valor;
Especifica el modo en que se tratarán lo espacios, valor puede tomar alguno de los
siguientes valores:
normal: Si hay varios espacios seguidos, se tomarán como uno solo.
pre: Se representarán todos los espacios.
nowrap: La línea no se cortará al llegar al final de la página.
2.13.5 Propiedades de posicionamiento
position:modo;
Especifica si el elemento puede ser posicionado o no, acepta alguno de los siguientes
valores:
absolute: El elemento se posicionará con coordenadas absolutas en cualquier parte del
documento.
relative: El elemento se posicionará según el lugar en donde se encuentre el seleccionador.
static: El elemento permanecerá estático.
left:valor;
Capacitación 13
Especifica la posición a la izquierda del elemento.
right:valor;
Especifica la posición a la derecha del elemento.
top:valor;
Especifica la posición hacia arriba del elemento.
botton:valor;
Especifica la posición hacia abajo del elemento.
visibility:valor;
Especifica si el elemento será visible o invisible.
z-index:valor;
Especifica la posición del layer con respecto a otros layers, se aceptan valores positivos
enteros.
clip:(x,x1,y,y1);
Especifica la parte visible del elemento.
2.13.6 Ligando archivos de hojas de estilo
Ahora en vez de tener el código de nuestra hoja de estilo en la misma página

podemos tenerla en otro archivo aparte, de donde se pueden insertar en otros varios archivos
sin la necesidad de repetir código, se usa la siguiente instrucción:
<LINK REL="stylesheet" HREF="archivo.css" TYPE="text/css">
El archivo archivo.css contendrá la siguiente información:
/* Ejemplo de una hoja de estilo externa */
BODY {background: #FFFFD8; margin-top: 20}

A {color: #400080; background: #FFFFD8}
H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8;
font-family: 'Gill Sans', Arial, sans-serif}
2.13.7 Usando ID como seleccionador.
El ID se define como el nombre del elemento al que se requiere insertar el estilo, un ejemplo
se ve a continuación:
Capacitación 14
<HEAD>
<STYLE>

</STYLE>
</HEAD>
<BODY>
<DIV ID=elemento1>Elemento 1 con fuentes itálicas a 14 puntos.</DIV>
</BODY>
Capacitación 15
3. JavaScript
JavaScript es un lenguaje que fue desarrollado principalmente para el web como una
solución ligera que aprovecha los recursos del navegador de una manera sencilla y en línea,
el lenguaje es muy parecido a C con orientación a objetos y a eventos, así la integración
entre objetos del browser, así como objetos creados con CSS hacen de JavaScript una
herramienta poderosa pero ligera.
3.1 JavaScript en HTML
Para añadir un programa de JavaScript en HTML usaremos el siguiente código:
<SCRIPT LANGUAJE="JavaScript">
....código
</SCRIPT>
3.2 Variables JavaScript
JavaScript manera variables internas y externas la manera de asignación del tipo esta
controlada por JavaScript de la siguiente forma:
var mi_variable1;
mi_variable1="Variable tipo string"
var mi_variable2;
mi_variable2=5;
Las variables globales se declararan fuera de las funciones y las locales dentro de la
función que será local.
3.3 Operadores aritméticos
+ suma
- resta
/ división
* multiplicación
% modulo
++ incremento en 1
-- decremento en 1
Capacitación 16
3.4 Operadores lógicos
&& AND Lógico

|| OR Lógico
! NOT Lógico
3.5 Operadores de comparación
== igual
!= diferente
< menor que
> mayor que
<= menor o igual que
>= mayor o igual que
3.6 Sentencias de control
if else
if (condición) {
sentencias1
} else {
sentencias2
}
for
for (expresión_incial;condición;expresión_contador) {
sentencias
}
while
while (expresión) {
sentencias
}
3.7 Método write
Este método sirve para escribir directamente en la página, esto se hace

dinámicamente mientras la página se carga por lo que es muy útil en codificación específica
para diferentes configuraciones de equipo, se usa de la siguiente manera:
document.write ("Esta es una línea");
Capacitación 17
3.8 Funciones en JavaScript
Las funciones en JavaScript se declaran de la siguiente forma:
function nombre_de_la_función ( lista_de_argumentos ) {

instrucciones;
}
A continuación un ejemplo de como se inserta una función de JavaScript en HTML:
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
saludo("Hola mensaje 1");
saludo("Hola mensaje 2");
</SCRIPT>
</BODY>
3.9 Objetos en JavaScript
La notación para representar objetos dentro de JavaScript es la siguiente:
Nombre_del_Objeto.Propiedad_ó_método
Ahora veremos un ejemplo de esto:
auto.marca="Ford"
auto.modelo=1990
auto.color="Rojo"
auto.precio=precio(auto.modelo);
//La asociación a un objeto a una función se le llama método.
3.10 Objetos predefinidos
Capacitación 18
Son objetos ya definidos en JavaScript por el navegador, a continuación veremos una

lista de ellos así como sus propiedades y métodos.
windows
Propiedades:
open
[Variable=][windows.]open("URL","Nombre",""Propiedades");
El método open sirve para crear y abrir una ventana.
El parámetro URL, contiene la dirección de la ventana que estamos abriendo
El nombre será el que queramos que se utilice como parámetro de un TARGET y las
Propiedades son una lista separada por comas de algunos de los siguientes elementos:
toolbar[=yes|no]
location[=yes|no]
directories[=yes|no]
status[=yes|no]
menubar[yes|no]
scrollbars[=yes|no]
resizable[=yes|no]
width=pixels
height=pixels
Close
Variable.close()
Cierra la ventana Variable
alert
Variable.alert("Mensaje");
Muestra una ventana de diálogo en la ventana Variable con el mensaje especificado.
status
Define la cadena de caracteres que saldrá en la barra de estado en un momento dado.
defaultStatus
Define la cadena de caracteres que saldrá por defecto en la barra de estado.
Capacitación 19
3.10.1 History
Este objeto contiene todas las direcciones que se han visitado en la sesión actual. Tiene tres
métodos:
document.history.back(); Volver a la página anterior.

document.history.forward(); Ir a la página siguiente.
document.history.go(+/- n); Ir a donde se indique.
3.10.2 Navigator
A través de este objeto podremos averiguar varias características del navegador que usamos:
navigator.appName; Nombre del navegador
navigator.appVer; Número principal de versión
navigator.languaje; Idioma del mismo
navigator.platform; Plataforma donde esta ejecutándose
3.10.3 Screen
Con este objeto podremos averiguar la configurar de la pantalla:

screen.height; Altura
screen.width; Anchura
screen.pixelDepth; Número de bits por píxel
3.10.4 Eventos
Un evento es algo que sucede. Para que una rutina se ejecute sólo cuando suceda algo
deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un
elemento HTML y se incluyen así:
<A HREF="<http://www.ulsa.edu.mx>" onMouseOver="MiFuncion()">
Capacitación 20
3.10.5 Lista de eventos
Evento Descripción Elementos que lo admiten

OnLoad Terminar de cargarse una página <body><frameset><layer>
OnUnLoad Salir de una página <body><frameset><layer>
OnMouseOver Pasar el mouse por encima <a href><area><layer>
OnMouseOut Que el mouse deje de estar encima <a href><area><layer>
OnSubmit Enviar una forma <form>
OnClick Dar un click a un elemento <input type="button, checkbox,
link">
OnBlur Quitar el cursor <input type="text">
OnChange Cambiar el contenido o quitar el cursor <input type="text"><textarea>
OnFocus Poner el cursor <input type="text"><textarea>
<layer>
OnSelect Seleccionar texto <input type="text"> <textarea>
Capacitación 21
4. CGI
Un CGI (Common Gateway Interface) es un programa que se ejecuta en tiempo real en un

Web Server en respuesta a una solicitud de un Browser. Cuando esto sucede el Web Server
ejecuta un proceso hijo que recibirá los datos que envía el usuario (en caso de que los haya),
pone a disposición del mismo algunos datos en forma de variables de ambiente y captura la
salida del programa para enviarlo como respuesta al browser.
El CGI puede estar codificado en cualquier lenguaje soportado por el sistema operativo del
servidor web, los mas usados son: C, Perl, TCL y otros.
Para enviar información del tipo html del CGI al browser es necesario añadir la siguiente
línea y enviarla como salida, a continuación un ejemplo de esto en el lenguaje C:
int main () {
printf ("Content-Type: text/html\n\n");
printf ("<html>\n<head>\n<title>CGI</title>\n</head>\n>");
printf ("<body><center>Programa CGI</center></body></html>");
return(0);
}
4.1 Enviando datos mediante formas a programas CGI
Existen dos métodos de enviar datos a un programa CGI mediante formas, los
métodos son: GET y POST.
4.1.1 GET
El CGI lo recibe por medio de una variable de entorno lo que significa una
restricción en el tamaño de los datos.
El Browser envía los datos visiblemente haciendo una llamada de la forma:
.../cgi-bin/cgi.pl?campo=algo
4.1.2 POST
El CGI lo recibe por medio de la entrada estándar (como si fuera teclado) lo que
significa virtualmente recibir cualquier tamaño de datos.
El Browser envía los datos directamente al CGI por lo cual no se ven en el browser (ideal
para campos ocultos).
Capacitación 22
Universidad La Salle
Directorio:
H. Raúl Valadez García, FSC
Rector
Ing. Edmundo Barrera Monsivais

Vicerrector Académico
Hno. Martín Rocha Pedrajo

Vicerrector de Formación
Ing. José Antonio Torres Hernández

Director de la Escuela de Ingeniería
Ing. Raúl Morales Farfán

Secretario de Talleres y Laboratorios
Ing. Luis M. Aguillón Banda

Jefe del Laboratorio de Cómputo de Ingeniería
Realización Revisión
Javier Garrido Alfaro
Líder de Proyectos
Revisión
Ana Yasmeen Chong Rosales
Líder de Proyectos
Laboratorio de Cómputo de Ingeniería

MMI
Capacitación 23
1. INTRODUCCIÓN 1
2. HTML 1
2.1 Tags ó etiquetas 1
2. 2 Forma del archivo básico HTML 1
2. 3 Etiquetas (tags) básicas 2
2. 4 Atributos del Encabezado 2
2.5 Atributos del Cuerpo 4
2.6 Tags para el formato de texto 4
2.7 Ligas 5
2.8 Diagramación 5
2.9 Elementos gráficos 6
2.10 Tablas 7
2.10.1 Atributos de Tabla 7
2.11 Atributos de Multimedia 8
2.12 Formas 8
2.13 Hojas de estilo (CSS) 10

2.13.1 Propiedades de texto 10
2.13.2 Propiedades de fuente 11
2.13.3 Propiedades de color y fondo 11
2.13.4 Propiedades de diagramación 12
2.13.5 Propiedades de posicionamiento 13
2.13.6 Ligando archivos de hojas de estilo 14
2.13.7 Usando ID como seleccionador. 14
3. JAVASCRIPT 16
3.1 JavaScript en HTML 16
3.2 Variables JavaScript 16
3.3 Operadores aritméticos 16
3.4 Operadores lógicos 17
3.5 Operadores de comparación 17
Capacitación 24
3.6 Sentencias de control 17
3.7 Método write 17
3.8 Funciones en JavaScript 18
3.9 Objetos en JavaScript 18
3.10 Objetos predefinidos 18

3.10.1 History 20
3.10.2 Navigator 20
3.10.3 Screen 20
3.10.4 Eventos 20
3.10.5 Lista de eventos 21
4. CGI 22
4.1 Enviando datos mediante formas a programas CGI 22

4.1.1GET 22
4.1.2 POST 22
Capacitación 25

Programacion Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programacion Web

Uploaded by

Copyright:

Available Formats

Laboratorio de Cómputo de Ingeniería Programación para Web

PROGRAMACIÓN PARA WEB

2.1 Tags ó etiquetas

< nombre_del_tag >

2. 2 Forma del archivo básico HTML

2. 3 Etiquetas (tags) básicas

2. 4 Atributos del Encabezado

<META HTTP-EQUIV="comando" CONTENT="configuraciones del comando">

En esta forma el browser obedece a alguno de los siguientes comandos:

<META HTTP-EQUIV="content-type" CONTENT="Contenido del tipo MIME">

<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-

<META HTTP-EQUIV="refresh" CONTENT="segudos_a_esperar;

<META HTTP-EQUIV="refresh" CONTENT="10; url="http://www.ulsa.edu.mx">

En esta forma se especificará información de la página de la manera siguiente:

<META NAME="titulo_de_la_información" CONTENT="contenido de la

<META NAME="author" CONTENT="Nombre del autor">

<META NAME="generator" CONTENT="Nombre del programa">

<META NAME="description | keywords" CONTENT="lista de palabras separadas

2.5 Atributos del Cuerpo

2.6 Tags para el formato de texto

<font size=#> </font>

<font face=...> </font>

Define el tipo de fuente por ejemplo Tahoma, Arial, Verdana, etc..

<font color=...> </font>

<a href="http://..."> </a>

<a href="mailto:e-mail"> </a>

<a name="nombre"> </a>

<a href="#nombre"> </a>

<ol type=...> </ol>

Crea una lista no numerada (con "bullets").

2.9 Elementos gráficos

<img src="..." align=...>

<img src="..." border=?>

<img src="..." name="nombre">

2.10.1 Atributos de Tabla

<table width=# o %>

<tr align=...> o <td align=...>

<tr valign=...> o <td valign=...>

2.11 Atributos de Multimedia

<embed src="..." HIDDEN="true" ó "false">

<embed src="..." LOOP=n,"true">

<embed src="..." AUTOSTART="true" ó "false">

<embed src="..." WIDTH=# ó % HEIGHT=# ó %>

<select multiple name="nombre" size=#></select>

<textarea name="nombre" cols=# rows=#></textarea>

<input type="checkbox" name="nombre">

Crea un cuadro de elección (checkbox). El texto va a continuación.

<input type="radio" name="nombre" value="x">

<input type=text name="nombre" size=n>

<input type="submit" value="nombre">

<input type="image" border=0 name="nombre" src="nombre.gif">

2.13 Hojas de estilo (CSS)

2.13.1 Propiedades de texto

2.13.2 Propiedades de fuente

Se afectan las características de la letra como el tamaño y el tipo de fuente.

2.13.3 Propiedades de color y fondo

2.13.4 Propiedades de diagramación

thin: Borde fino.

2.13.5 Propiedades de posicionamiento

Especifica la posición a la izquierda del elemento.

2.13.6 Ligando archivos de hojas de estilo

Ahora en vez de tener el código de nuestra hoja de estilo en la misma página

<LINK REL="stylesheet" HREF="archivo.css" TYPE="text/css">