Professional Documents
Culture Documents
Utiliza HTML,
2
¿QUÉ ES HTLM ?
operación a realizarse.
Comandos cerrados: son aquellos que tienen
una palabra clave que indica el principio de la
operación y otra que indica el final y lleva el
símbolo «/» (diagonal) después el comando a
de ambas.
ETIQUETAS HTML O TAGS
Las etiquetas de HTML son palabras clave entre
corchetes como el ángulo de <html>
5
Inicio y fin son también llamadas etiquetas de
apertura y cierre.
ESTRUCTURA BÁSICA DE UN DOCUMENTO
HTML
</html>
QUÉ NECESITAS PARA CREAR UNA PAGINA
EN HTML
14
LÍNEAS EN HTML
Separadores: Se utilizan para identificar las
secciones dentro de una misma página, es una
regla horizontal.
<br>
<pre></pre>
Dentro de esta etiqueta no se puede incluir
etiquetas <img>, <object>, <big>, <small>, 18
<sub> y <sup>
Sangrado de Texto: Es un margen que se
establece a ambos lados del texto.
<basefont>
<a> </a>
La etiqueta <a> se puede utilizar de dos
maneras:
1. Crear un vinculo a otro documento mediante el
atributo href.
23
2. Crear un marcador dentro de un documento
utilizando el atributo nombre.
Sintaxis del link.
<a href=“http://
www.w3schools.com”
> w3schools</a> 25
REFERENCIA RELATIVA AL SITIO
Conduce a un documento situado dentro del
mismo sitio que el documento actual.
27
PUNTO DE FIJACIÓN DE ANCLAS
Es utilizado cuando se tienen documentos
extensos divididos en varios apartados.
_blank
Abre el documento vinculado en una ventana
nueva del navegador.
_parent
Abre el documento vinculado en la ventana del 30
marco que contiene el vinculo o en el conjunto de
marcos padre.
_self
Es la opción predeterminada, Abre el documento
vinculado en el mismo marco.
</a>
IMÁGENES EN HTML
Se definen a través de la etiqueta
<img> </img>
<img src=
“imagen.jpg ”></img>
32
Atributo Significado Valor
Width Determina el ancho de la imagen Pixeles
<table></table>
<map> </map>
Identifican que vamos a crear un mapa de
imágenes.
El atributo name es obligatorio, este atributo esta
asociado con el atributo usemap del tag <img>,
creando una relación entre el mapa y la imagen.
El elemento del mapa contiene una serie de 38
elementos area, que definen áreas clic en el mapa
de imagen
TAG AREA
La etiqueta < area > define un área dentro de una
imagen de mapa.
El elemento de área es siempre anidada dentro de
<form> </form> 41
46
ETIQUETA INPUT
La sintaxis es:
< form>
< form>
< form>
Sexo:
< form>
Hobbies:
< / form>
El campo oculto no puede ser visto por el usuario,
debe incluirse el atributo value para que en el
formulario se pase un valor al servidor, el usuario
no puede modificar este valor, aunque en realidad
56
8. FILE. Fichero.
< / form>
Define un archivo que puede ser enviado junto con
los datos del formulario, y en donde la ruta puede
ser relativa al directorio de carpetas del servidor o
una ruta URL absoluta de internet.
58
9. IMAGE. Botón de envió.
< / form>
Introduce un botón definido por una imagen, en
vez del formato estándar de botones, con lo que
podemos así personalizar el botón.
62
PAGINAS ESTÁTICAS
64
PANTALLA PRINCIPAL Barra de aplicación
Pestañas de documento
Barra de navegación
con navegador
Paneles
Inspector de Propiedades
Barra de estado
65
LAS BARRAS
Barra de la aplicación.
Contiene los menús, botones de la aplicación, el
conmutador de espacio de trabajo y una caja de
sobre la otra.
CONFIGURACIÓN DEL SITIO
Un sitio web es un conjunto de archivos y
carpetas, relacionados entre sí, con un diseño
similar y un objetivo común.
75
Independientemente de la forma de crear el sitio,
se mostrara la siguiente ventana. Selecciona la
carpeta Avanzadas y llena los campos.
Ruta donde se
localiza el sitio
76
ABRIR UN SITIO
Para abrir un sitio ya definido:
1. Menú Sitio Administrar sitios.... seleccionar
el sitio de la lista de sitios
78
Las propiedades están organizadas en categorías.
1. Apariencia (CSS) encontramos las
propiedades:
Fuente de página: tipo de letra que le aplicaremos
al texto.
página.
EL TEXTO: PROPIEDADES Y FORMATO
Las características del texto seleccionado pueden
ser definidas a través del menú Formato o a
través del inspector de propiedades, que están
91
HIPERENLACES
Un hiperenlace, hipervínculo, o vínculo, no es
más que un enlace, que al ser pulsado lleva de
una página o archivo a otra página o archivo.
92
Tipos de referencia
Existen diferentes clases de rutas de acceso a la
hora de definir los vínculos. Estas referencias no
se limitan a los enlaces, se comportarán igual
94
Crear enlaces
La forma más sencilla de crear un enlace es a
través del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a
97
Destino del enlace
El destino del enlace determina en qué ventana
va a ser abierta la página vinculada, puede
variar dependiendo de si el documento está
100
También es posible a través del menú Insertar,
opción Vínculo de correo electrónico.
102
Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector
de propiedades muestra esta apariencia:
104
IMAGEN DE SUSTITUCIÓN. ROLLOVER
Un rollover es una imagen que cambia por otra
cuando el puntero se sitúa sobre ella. Este tipo de
imagen suele utilizarse en los menús o en los
105
TABLAS
Todos los objetos se alinean por defecto a la
izquierda de las páginas web, pero gracias a las
tablas es posible distribuir el texto en columnas,
108
Formato de tabla
Las propiedades de la tabla se especifican a
través de su inspector de propiedades.
122
Botón El botón tiene asignadas tres opciones:
Enviar formulario, Restablecer formulario (borrar
todos los campos del formulario), o Ninguna (para
poder asignarle un comportamiento diferente de
los dos anteriores).
134
Para que el archivo se reproduzca continuamente
se añade loop="true".
Para reproducir automáticamente, se añade
autostart="false"
En código HTML quedaría de la siguiente forma:
136
El inspector de propiedades para vídeo es el
mismo que el de audio, ya que ambos se insertan
como Plug-in.
El ancho y alto por defecto es de 32 x 32
que el sonido.
PLANTILLAS
Al crear un sitio web, se debe tomar en cuenta
que las páginas deben seguir un formato
uniforme, además es frecuente que ciertos
en sitio.
Al guardar la plantilla la página cambia de
carpeta, a Templates. Si contiene enlaces o
imágenes se activa la opción de Actualizar
vínculos. Al hacerlo, la plantilla se verá con
142
MARQUESINAS
Las marquesinas son texto, imágenes, o una
mezcla entre texto e imágenes, que pueden
desplazarse de un lado a otro de la ventana en
144
REGLA HORIZONTAL
La regla horizontal es una línea que cruza
horizontalmente, suele utilizarse para separar
secciones dentro de una misma página.
145
Se puede modificar la apariencia de la regla, con Al
(altura) y Sombreado, el color mediante CSS.
CAPAS
Las capas son unos recuadros, elementos de
bloque, destinados a contener y agrupar otros
elementos, son llamadas también layers o
146
Las capas pueden moverse de una posición a otra
y redimensionarse.
Dentro de la capa es posible insertar texto,
tablas, imágenes, animaciones flash, y todos los
esté viendo)
Hidden (la capa está oculta).
desplazamiento a la capa.
Auto (automático) el navegador muestra barras de
154
6. Después de elegir una acción, el comportamiento
correspondiente aparece en el panel
Comportamientos.
Cada comportamiento
botones .
PÁGINAS DINAMICAS
Para la creación de páginas dinámicas, además
de etiquetas HTML es necesaria la utilización de
169
Para inicializar el servidor busque en su computadora la
ruta que muestra la figura.
<?php
180
Elaboró: Guadalupe Angeles Mata.
María Victoria Cortes Gómez.
Almendra Cabrera Hernández
181
UN PRIMER EJEMPLO
SINTAXIS BÁSICA
Delimitadores de inicio y fin:
<?php ?>
Comentarios:
Una sola línea //
Varias líneas /* - */.
182
Tipos de datos:
Array
$ a[ 3 ] = " 123 " ;
Entero
$ a = 123 ;
Cadena
$var = "Bob";
$Var = "Joe";
184
Elaboró: Guadalupe Angeles Mata.
María Victoria Cortes Gómez.
Almendra Cabrera Hernández
185
UN SEGUNDO EJEMPLO
Variables externas a PHP:
189
Elaboró: Guadalupe Angeles Mata.
María Victoria Cortes Gómez.
Almendra Cabrera Hernández
190
Ejemplos:
Elaboró: Guadalupe Angeles Mata.
María Victoria Cortes Gómez.
Almendra Cabrera Hernández
191
OPERADORES
=
Comparación
Aritméticos
Asignación
Elaboró: Guadalupe Angeles Mata.
María Victoria Cortes Gómez.
Almendra Cabrera Hernández
192
Para crear una pagina dinámica seleccione PHP del
menú Crear nuevo
DREAMWEAVER
Elaboró: Guadalupe Angeles Mata.
María Victoria Cortes Gómez.
Almendra Cabrera Hernández
193
Pantalla principal de Dreamweaver.
Para comenzar una página dinámica es necesario crear
primeramente un Sitio.
1. Seleccionamos menú Sitio.
195
7. Finalmente dar clic en Guardar,.
196
7. Finalmente dar clic en Guardar,.
197
10. Una vez activado el panel, Da clic en el botón ,
esquina inferior derecha, para desplegar el menú
emergente Conexión MySQL.
198
200
4. Escribe el nombre para el RecordSet.
5. Deja los valores que vienen por default.
201
7. Deja los valores que vienen por default y da clic en
Aceptar.
202
INSERCIÓN DE REGISTROS
1. Selecciona la pestaña Datos.
2. Da clic en Insertar registro.
204
Elaboró: Guadalupe Angeles Mata.
María Victoria Cortes Gómez.
Almendra Cabrera Hernández
205
El resultado en el explorador será el siguiente.
8.
ACTUALIZAR DE REGISTROS
1. Selecciona la pestaña Datos.
2. De clic en Actualizar registro.
206
5. Selecciona el archivo tabla.php.
6. Da clic en el botón
Aceptar .
207
8. Guarda el documento con el nombre de Actualizar.
9. Agrega una Barra de navegación.
208
ELIMINAR DE REGISTROS
dirección.
12. Inserta un formulario
13. Agrega un campo oculto.
14. En la ventana de propiedades, cambia el nombre del
campo oculto por NC.
15. Da clic en vincular
212
18. Inserta un botón al formulario, cambia la etiqueta a
Eliminar.
213
21. Selecciona el formulario, cambia el Método de envió a
GET.
215