Programacion Web

Curso Programación Web

Pág. 1

Curso Programación Web

Índice LENGUAJE HTML 1. INTRODUCCIÓN ...................................................................................................... 9 2. ESTRUCTURA DE UN DOCUMENTO HTML .................................................... 9 .- Estructura General..................................................................................................... 9 .- Formato del texto .................................................................................................... 10 3. LISTAS...................................................................................................................... 11 .- Listas no numeradas ................................................................................................ 11 ..- Listas numeradas .................................................................................................... 11 .- Listas de definición ................................................................................................. 11 4. COMENTARIOS NO VISIBLES EN LA PANTALLA....................................... 11 5. ENLACES ................................................................................................................. 12 .- Enlaces dentro de la misma página ......................................................................... 12 ..- Enlaces a otra página del sistema........................................................................... 12 .- Enlaces a otra página exterior ................................................................................. 12 .- Enlaces a una dirección de correo electrónico ........................................................ 13 6. IMÁGENES .............................................................................................................. 13 .- Mapas en las imágenes............................................................................................ 13 7. FONDOS ................................................................................................................... 14 .- Fondos con un color uniforme ................................................................................ 14 - Fondos con una imagen............................................................................................ 15 8. TABLAS .................................................................................................................... 15 .- Propiedades de las tablas......................................................................................... 15 .- Propiedades de las filas ........................................................................................... 16 .- Propiedades de las celdas ........................................................................................ 16 9. FORMULARIOS...................................................................................................... 17 .- Propiedades de los formularios ............................................................................... 17 .- Elementos de un formulario .................................................................................... 17 .- Cajas de texto: ......................................................................................................... 18 .- Texto oculto: ........................................................................................................... 18 .- Área de texto: .......................................................................................................... 18 .- Listas de opciones: .................................................................................................. 19 .- Botones de radio:..................................................................................................... 19 .- Cajas de validación: ................................................................................................ 19 .- Botones:................................................................................................................... 20 10. CAPAS..................................................................................................................... 20 .- Propiedades de las capas ......................................................................................... 20 11. FRAMES ................................................................................................................. 22 .- Propiedades de los frames ....................................................................................... 22 .- Atributos de le etiqueta : ................................................................ 22 .- Atributos de le etiqueta : ....................................................................... 23 .- Enlaces a frames...................................................................................................... 24 12 IFRAMES................................................................................................................. 25 LENGUAJE CSS 1. INTRODUCCIÓN .................................................................................................... 31 2. DEFINICIÓN DE ESTILOS ................................................................................... 31 .- Agrupación de varias marcas HTML con una misma regla de estilo. .................... 32 .- Definición de múltiples estilos para una misma marca HTML .............................. 32 Pág. 2

Curso Programación Web

3.- DEFINICIÓN DE ESTILOS DE LAS FUENTES DE TEXTO ......................... 32 .- font-family............................................................................................................... 32 ,. font-size ................................................................................................................... 32 .- font-style ................................................................................................................. 33 .- font-weight .............................................................................................................. 33 .- font-variant .............................................................................................................. 33 4. PROPIEDADES RELACIONAS CON EL TEXTO............................................. 33 .- color: ....................................................................................................................... 33 .- text-decoration......................................................................................................... 33 .- text-indent: .............................................................................................................. 34 .- text-transform:......................................................................................................... 34 .- letter-spacing: .......................................................................................................... 34 .- word-spacing : ......................................................................................................... 34 5. HERENCIA DE PROPIEDADES DE ESTILO. ................................................... 34 6.- DEFINICIÓN DE UN ESTILO EN FUNCIÓN DEL CONTEXTO.................. 34 7.- DEFINICIÓN DE HOJAS DE ESTILO EN UN ARCHIVO EXTERNO......... 35 8.- DEFINICIÓN DE ESTILOS POR MEDIO DE CLASES .................................. 35 9.- DEFINICIÓN DE ESTILOS POR MEDIO DE ID ............................................. 35 10.- PROPIEDADES RELACIONADAS CON LOS BLOQUES ........................... 36 11.- MANIPULAR ........................................................................................................ 37 .- Posicionamiento ...................................................................................................... 37 .- Visibilidad ............................................................................................................... 38 .- Dimensión ............................................................................................................... 38 .- Overflow ................................................................................................................. 38 .- Recorte .................................................................................................................... 39 .- Orden de visualización ............................................................................................ 39 .- Transparencia .......................................................................................................... 40 .- Display .................................................................................................................... 40 12. PROPIEDADES RELACIONADAS CON EL FONDO .................................... 40 13.- PROPIEDADES RELACIONADAS CON LAS LISTAS................................. 41 14. PROPIEDADES RELACIONADAS CON LAS TABLAS ................................ 41 15.- PSEUDOCLASES ................................................................................................. 42 16- CURSOR ................................................................................................................. 42 17.- FLOAT ................................................................................................................... 43 LENGUAJE JAVASCRIPT 1. INTRODUCCIÓN .................................................................................................... 47 2. INCORPORACIÓN DE JAVASCRIPT EN HTML ............................................ 47 .- Funciones básicas.................................................................................................... 47 .- Inclusión en etiquetas Script ................................................................................... 48 .- Inclusión en archivo externo ................................................................................... 48 3. SINTAXIS ................................................................................................................. 48 .- Variables.................................................................................................................. 48 .- Operadores .............................................................................................................. 49 .- Sentencias secuenciales........................................................................................... 50 .- Sentencias condicionales......................................................................................... 50 .- Sentencias iterativas ................................................................................................ 50 .- Comentarios ............................................................................................................ 51 .- Funciones ................................................................................................................ 51 4. Objetos....................................................................................................................... 52

Pág. 3

Curso Programación Web

.- Cadenas ................................................................................................................... 52 .- Arrays ...................................................................................................................... 53 .- Fecha ....................................................................................................................... 54 ,- Math ........................................................................................................................ 55 5.- EVENTOS................................................................................................................ 56 .- Manejadores de eventos .......................................................................................... 57 .- Objeto Event............................................................................................................ 57 .- Eventos de Teclado ................................................................................................. 58 .- Eventos de Ratón..................................................................................................... 59 6.- CONTROL DE FORMULARIOS......................................................................... 59 7. DOOM ....................................................................................................................... 59 .- Objeto WINDOW ................................................................................................... 61 .- Objeto LOCATION ................................................................................................ 63 .- Objeto HISTORY.................................................................................................... 64 .- Objeto NAVIGATOR ............................................................................................. 64 .- Objeto DOCUMENT .............................................................................................. 65 .- Objeto FRAMES ..................................................................................................... 66 8.- ESTRUCTURA DE UN DOCUMENTO HTML................................................. 67 .- innerHTML ............................................................................................................. 68 .- Acceso directo a los nodos ...................................................................................... 68 .- Acceso directo a los atributos de los nodos. ........................................................... 69 .- Creación de Nodos on the fly.................................................................................. 69 9.- PASO DE PARÁMETROS .................................................................................... 69 LENGUAJE PHP 1. INTRODUCCIÓN .................................................................................................... 75 2. EL LENGUAJE PHP ............................................................................................... 75 .- Delimitadores .......................................................................................................... 75 .- Instrucción echo ...................................................................................................... 76 .- Definición de etiquetas HTML en el código PHP .................................................. 76 .- Definición de etiquetas PHP en el código HTML................................................... 76 .- Comentarios ............................................................................................................ 76 .- Variables.................................................................................................................. 76 .- Tipos de datos ......................................................................................................... 76 .- Constantes ............................................................................................................... 77 .- Operadores Aritméticos........................................................................................... 77 .- Operadores Lógicos................................................................................................. 78 .- Estructuras de control.............................................................................................. 79 .- Inclusión .................................................................................................................. 81 3. CADENAS................................................................................................................. 81 4. MANIPULACIÓN DE ARRAYS............................................................................ 82 5. FORMULARIOS...................................................................................................... 82 .- Envío de ficheros en el formulario.......................................................................... 84 .- Manipulación de Ficheros ....................................................................................... 84 6. PASO DE PARAMETROS POR URL................................................................... 86 7. SESIONES................................................................................................................. 86 8. MANIPULACIÓN DE BASES DE DATOS .......................................................... 87 Formateado de los datos extraídos de una base de datos............................................ 89 .- Inserción de nuevos datos ....................................................................................... 90

Pág. 4

Curso Programación Web

AJAX 1. INTRODUCCIÓN .................................................................................................... 95 2. EL OBJETO XMLHttpRequest ............................................................................. 95 3. Funcionamiento ........................................................................................................ 97 .- Crear el elemento XMLHttpRequest....................................................................... 97 .- Crear el elemento XMLHttpRequest....................................................................... 98 Realizar la petición al servidor ................................................................................... 98 .- Ejecutar la función de respuesta.............................................................................. 99 4. Invocación ficheros HTM ...................................................................................... 101 5. Invocación a fichero JavaScript ............................................................................ 102 6. Invocación a fichero PHP ...................................................................................... 103

Pág. 5

Curso Programación Web

Pág. 6

Curso Programación Web

Pág. 7

Curso Programación Web

Pág. 8

Curso Programación Web

1. INTRODUCCIÓN HTML es el acrónimo inglés de HyperText Markup Language, que se traduce al español como Lenguaje de Marcas Hipertextuales. Es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estándar de las páginas web. Gracias a Internet y a los navegadores como Internet Explorer, Opera, Firefox, Netscape o Safari, el HTML se ha convertido en uno de los formatos más populares y fáciles de aprender que existen para la elaboración de documentos para web. El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Cada etiqueta define una propiedad que deberá ser aplicada sobre el documento. Las etiquetas se representan de la siguiente manera:. .La mayoría de las etiquetas tienen una marca de inicio y otra de fin y la propiedad que representan será aplicada entre ambas marcas. TEXTO HTML Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad, se usarán en este manual solamente las mayúsculas.

2. ESTRUCTURA DE UN DOCUMENTO HTML .- Estructura General Un documento HTML se encuentra entre las etiquetas y . El documento en sí está dividido en dos zonas principales: el encabezamiento, comprendido entre las etiquetas y y el cuerpo, comprendido entre las etiquetas y . Dentro del encabezamiento hay información del documento, que no se ve en pantalla, principalmente el título del documento, comprendido entre las etiquetas y . El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones). Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.) Antes de crear la primera página, unas consideraciones sobre el texto: el texto se acomoda a la página, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos párrafos debemos usar la etiqueta , (que no tiene su correspondiente etiqueta de cierre )

Pág. 9

Curso Programación Web

.- Cabeceras El texto puede tener unas cabeceras, comprendidas entre las etiquetas y , y , etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Otra forma de cambiar los tamaños de letra es utilizar el elemento con el atributo SIZE, que es un número entre 1 y 7. El valor por defecto del texto es 3, por lo que valor puede ser positivo (+) o negativo (-) respecto a 3. Una gran ventaja de esta notación respecto a la anterior es que no se produce un salto de párrafo después de cada cambio. .- Formato del texto Otro atributo que se puede incorporar a la etiqueta es FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador. Para alinear un párrafo en la página web se usa la etiqueta junto con la propiedad ALIGN. Así, las diferentes alineaciones se indicaran de la siguiente manera: Alineación Izquierda: Alineación Derecha: Alineación Centrada: Alineación Justificada: También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo. Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos una etiqueta parecida (break, o romper). Tampoco tiene etiqueta de cierre. Si queremos obtener múltiples líneas en blanco, no basta con repetir la etiqueta , sino que hay que combinarla con la etiqueta . Se puede controlar el color del texto utilizando el elemento con el atributo COLOR="xxx", donde xxx es el nombre en inglés del color que se desea. Algunas etiquetas adicionales para dar formato al texto son las siguientes: Texto en negrita:

Texto en negrita

Texto realzado:

Texto realzado

Texto en itálica

Texto en itálica

Texto con énfasis:

Texto con énfasis

Pág. 10

Curso Programación Web

Texto subrayado:

Texto subrayado

Texto tachado:

Texto tachado

3. LISTAS Este elemento se utiliza para organizar un conjunto de componentes. Existen diferentes tipos de listas, y su utilización dependerá del tipo de organización que se quiera representar. .- Listas no numeradas Son listas sin numeración. s decir, toda la lista está dentro de la etiqueta y , y luego cada cosa va precedida de la etiqueta (list item). ..- Listas numeradas Sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa. Son listas sin numeración. Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas. .- Listas de definición Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas y . Y a diferencia de las dos anteriores, cada renglón de la lista tiene dos partes: 1. El nombre de la cosa a definir, que se consigue con la etiqueta (definition term) 2. La definición de dicha cosa, que se consigue con la etiqueta (definition definition). Son listas sin numeración.

4. COMENTARIOS NO VISIBLES EN LA PANTALLA A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos símbolos: Ejemplo:

Pág. 11

Curso Programación Web

5. ENLACES La característica que más ha influido en el espectacular éxito del Web ha sido la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. En general, los enlaces tienen la siguiente estructura: