View
18
Download
0
Category
Preview:
Citation preview
Modulo 2. Creación de paginas Web con HTML.
2.1 Estructura de un documento HTML.
Las páginas Web pueden crearse de diferentes maneras y pueden contener una amplia variedad de tipos
de contenido. Una de las maneras es utilizando el lenguaje HTML.
HTML (HyperText Markup Language) es el acrónimo inglés de Lenguaje de marcado de hipertexto. Es un
estándar empleado en todo el mundo para utilizar código incrustado, “etiquetas o tags”, con el fin de
indicar el formato que debe aplicarse al texto. Los documentos escritos en HTML constan del texto mismo
del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser:
texto afectado
La tag del principio activa la orden y la última (precedida del signo /) la desactiva.
HTML es el lenguaje con el que se construyen las páginas Web. La idea inicial de HTML era describir la
estructura y el contenido de un documento, sin embargo la tendencia actual es utilizarlo también como un
lenguaje de descripción, controlando el aspecto de documento (tipografía, posicionado, etc.).
El programa encargado de interpretar el texto HTML es el navegador o browser.
La estructura de un documento HTML es la siguiente:
Título del documento
Cuerpo del documento
Entre y se encuentra la definición de la página propiamente dicha.
En el bloque delimitado por y se establecen ciertas características de la página,
tales como el título, quien las construyó, etc. De estas características de la página, la única que es
obligatoria declarar es el título. Esto se hace mediante el par de tags y .
Por último está y , entre los cuales se encierra toda la información que el
navegador debe mostrar.
Ejemplo 1: Ejemplo que muestra la estructura de un archivo HTML.
Ejemplo 1 Bienvenidos al curso de Desarrollo de Aplicaciones Web.
El archivo html, se crea como cualquier documento de texto, el cual puede ser creado con el Bloc de
Notas de Windows y si utiliza Macintosh con el Simple Text. Si utiliza procesadores de texto más potentes
debe guardar sus documentos como "solo texto" ya que HTML ignora todos los espacios en blanco. Una
vez guardado convierta la extensión de texto por la extensión html.
Para visualizar el archivo basta hacer doble clic sobre el y el navegador lo ejecutara. El archivo anterior
será: Ver ejemplo
2.1.1 Atributos o propiedades de las Etiquetas HTML
Algunas etiquetas o tags contienen atributos que las definen. Por ejemplo los atributos de la etiqueta body
pueden ser: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK y ALINK.
La descripción de cada etiqueta se muestra en la siguiente tabla.
Propiedad Descripción
Background Establece una imagen de fondo en la página.
Bgcolor Color de fondo de la página.
Text Establece el color del texto de la página.
Bgsound Sonido que se escuchara al mostrar la página.
Link Color del vínculo.
Vlink Color del vínculo al estar el mouse encima.
Alink Color del vínculo al ser visitado.
Ejemplo 2. Modificación del ejemplo anterior, añadiendo atributos a la etiqueta body.
Ejemplo 2 Bienvenidos al curso de Desarrollo de Aplicaciones Web.
Ver Ejemplo.
No todos los atributos se tienen que declarar, solo aquellos que se requieran.
2.2 Etiquetas de texto.
Existen etiquetas qué afectan a la distribución y aspecto del texto. Los más importantes agrupados en las
categorías Tamaño, Estilos, Tipo de letra y posición.
Tamaño
, , Son llamados Titulares y sirven para dividir el texto en secciones, con diferente
tamaño cada uno. Se pueden definir seis niveles de titulares. Se definen mediante las tags
..... hasta .....
Estilos de texto.
La siguiente tabla muestra las principales etiquetas que afecta al aspecto del texto.
Atributo Sintaxis Resultado
Énfasis (cursiva) Quiero destacar esto. Quiero destacar esto.
Fuerte (negrita) Quiero recalcar esto. Quiero recalcar esto.
Subrayado Quiero recalcar esto. Quiero recalcar esto.
Tipo de letra
Para cambiar el tipo de letra o fuente se utiliza la etiqueta Font.
Ejemplo
El tipo de letra puede ser: "Arial", "Courier", "Comic Sans MS", "Impact", "Lucida Console", "MS Serif",
"Modern", "Monotype Corsiva", "System", "Tahoma", "Times New Roman", entre otras.
Posición
Las diferentes etiquetas que determinan la posición del testo son:
y
Párrafos. Este tag, en un principio, señala el inicio de un párrafo y provoca un salto de línea precedido por un renglón en blanco
Saltos de línea. Este tag sirve para realizar un salto de línea sin
renglón en blanco.
y Centran el texto entre los márgenes.
Ejemplo 3. Aplicación de las diferentes etiquetas de texto. Considerando el Ejemplo 2, del tema
anterior.
Ejemplo 3 Bienvenidos al curso de Desarrollo de Aplicaciones Web.
Te encuentras el módulo 2. En este tema aprenderás a:
Cambiar el tipo de letraVer ejemplo 3.
La etiqueta Font tiene diferentes propiedades que permite modificar l contenido de la página.
Otras propiedades de fuente son:
Propiedad Definición
Color Color del texto
Size Permite cambiar el tamaño del texto, valores entre 1 y 7.
Style= "Background-color :color" Color de fondo donde esta el texto
Ejemplo 4: Modificación del ejemplo 3, añadiendo propiedades de la etiqueta Font.
Ejemplo 4 Bienvenidos al curso de Desarrollo de Aplicaciones Web.
Te encuentras el módulo 2. En este tema aprenderás a:
Cambiar el tipo de letra
Establecer estilos como negrita
Establecer diferentes posiciones
Texto con tamaño 5 color verde
Ver ejemplo 4.
NOTA:
Se puede utilizar las propiedades FACE, SIZE, COLOR juntas dentro de la misma etiqueta FONT.
2.3 Etiquetas Graficas.
Se puede incorporar imágenes a una página Web, la estructura de la etiqueta es:
Las propiedades o atributos de la etiqueta img.
SRC (image source, fuente de la imagen). indica que se
quiere cargar una imagen llamada imagen.gif (o el
nombre que tenga). Al programa navegador se le
indica el nombre y la localización de un archivo que
contiene una imagen.
ALT Se introduce una descripción (una palabra o una frase breve)
indicativa de la imagen. Este comando, que en principio se
puede omitir, es en beneficio de los que accedan a la página con
un programa navegador en forma de texto solamente. Ya que no
son capaces de ver la imagen, por lo menos pueden hacerse
una idea sobre ella. Pero no es sólo por esto. Hay casos, en los
que se utiliza una imagen como enlace a otra página. Si se
omitiera este comando, los que utilizan dichos navegadores no
podrían de ninguna manera acceder a esas páginas.
WIDTH y HEIGHT Alto y el ancho de la imagen. Por defecto, HTML toma las
dimensiones reales de la imagen. Pero si se incluye estos
valores la página HTML se presentará mucho más rápido en
pantalla (el texto) mientras se acaban de transmitir las
imágenes.
ALIGN Específica como se va a alinear la imagen con respecto a la
página (horizontalmente) puede ser: center, left o right.
VALIGN Específica como se va a alinear la imagen con respecto a la
página (verticalmente) puede ser: top, bottom o middle.
BORDER Define un borde en píxeles alrededor de la imagen.
Ejemplo:
Con respecto a la localización del archivo de esa imagen, si no se indica nada especial, como en el caso
que se ha expuesto, quiere decir que el archivo imagen.gif está en el mismo directorio que el documento
HTML que se esta escribiendo.
Un buen consejo al diseñar la Web es crear un directorio para las imágenes. De este modo siempre se
debe direccional al directorio de imágenes para que aparezcan las imágenes correctamente en la página
Web.
Los formatos más utilizados son del tipo:
Formato GIF
Apropiado para logotipos y además arte gráfica, para imágenes con colores sólidos y continuos
(especialmente para imágenes con bordes definidos, u texto o un dibujo). Este es el único
soportado por cualquier navegador existente.
Además comprime la información de la imagen sin pérdida de información.
Este formato soporta un máximo de 256 colores.
Un GIF puede ser transparente; la transparencia permite crear imágenes que comparten el
mismo color de fondo de la página, simulando una apariencia no rectangular.
Formato JPEG
Apropiado para imágenes complejas o para fotografías, ya que es bueno para trabajar con
imágenes con múltiples patrones y contrastes.
JPEG comprime y destruye parte de la información de la imagen.
Soporta hasta 16,6 millones de colores.
Un JPEG no puede ser transparente.
Un aspecto muy importante a tener en cuenta es el tamaño de las imágenes, pues una imagen grande
supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente
riesgo de que quien esté intentando cargar nuestra página se canse de esperar, y desista de ello.
Además las imágenes incrustadas en páginas Web son en partes responsables de los cuellos de botellas
existentes en la WWW.
Ejemplo:
Ejemplo 5. Inserción de Imágenes.
Ejemplo 5 Inserción de imágenes
Imagen con tamaño normal
Imagen cambiando las dimensiones originales
2.4 Links.
El link es uno de los elementos más importantes, es posible pasar de un Web a otro, alojados en
servidores remotos, separados por miles de kilómetros.
Para generar un enlace a otro documento se necesita el nombre de un archivo o su dirección URL
(Localizador Universal de Recursos, son las direcciones de las informaciones que buscamos en
Internet) y el texto que servirá de punto de activación del otro documento. Este segundo elemento será el
que se visualice en pantalla y que se servirá del primero para saltar de documento.
En general, los enlaces tienen la siguiente estructura:
yyy
dónde xxx es el destino del enlace e yyy es el texto indicativo del enlace (con un color especial y
generalmente subrayado).
La URL o dirección pueden ser absolutas o relativas. En el caso de direcciones absolutas se especifica
la dirección completa a la que apunta el enlace. Por ejemplo:
Enlace
Si el enlace apunta a una página dentro del mismo servidor, se debe utilizar direcciones relativas, es
decir sin hacer referencia a la dirección de Internet. Por ejemplo
Enlace2
En el ejemplo anterior, las palabras "Enlace2" son un enlace a la página ejemplo.html situada en el
directorio test2, al mismo nivel en el árbol de directorios que la página donde se encuentra el enlace. Para
ascender niveles en una estructura de árbol de directorios se utilizan los dos puntos (exactamente igual
como se hace en MS-DOS o Unix).
Tipos de enlaces
Se puede distinguir cuatro tipos de enlaces:
1. Enlaces dentro de la misma página
2. Enlaces con otra página nuestra
3. Enlaces con una página fuera de nuestro sistema
4. Enlaces con una dirección de email
1. Enlaces dentro de la misma página
En el caso de documentos (o páginas) muy extensos, puede interesar dar un salto desde una posición a
otra determinada.
En este caso, lo que es llamado XXX, es decir, el destino del enlace, es el sitio dentro de la página a
donde se quiere saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que se
desea). Lo que se ha llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en
color (en forma de hipertexto). Su estructura es, entonces:
YYY
Y en el sitio exacto a donde se quiere saltar, se debe poner la siguiente etiqueta:
2. Enlaces con otra página nuestra
Puede ser que se tenga una sola página. Pero lo más frecuente es que se tenga varias páginas, una
inicial o principal y otras conectadas a ella, e incluso entre ellas mismas.
En este caso, simplemente se sustituye lo que se ha llamado XXX (el destino del enlace) por el nombre
del archivo: Ejemplo
Si se desea que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, a
donde va por defecto, en ese sitio se tiene que colocar una marca, y completar el enlace con la referencia
a esa marca.
Una observación importante: Suponemos que la página en la que se escribe esta etiqueta y la otra página
a la que quiere saltar están en el mismo directorio. Porque puede ocurrir que se organice el sitio del Web
con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que se quiere saltar está, por
ej. en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/pag2.html".
Y a la inversa, si se quiere saltar desde una página a otra que está en un directorio anterior, en la etiqueta
tendría que ponerse "../pag2.html". Esos dos puntos hacen que se dirija al directorio anterior. Obsérvese
que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro \, que es propio únicamente
de Windows.
Si se quiere evitar todas estas complicaciones, podemos tener todo junto en un único directorio, pero esto
tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras
modificaciones.
3. Enlaces con una página fuera del sistema
Si se quiere enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor
distinto al que soporta nuestra página), es necesario conocer su dirección completa o URL. Una vez
conocida la dirección (o URL), se coloca en lugar de lo que se ha llamado anteriormente xxx (el destino
del enlace). Si se quiere enlazar con la página de clavijero, la etiqueta sería:
Página inicial de Consorcio Clavijeo
Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas,
pues los servidores UNIX sí las distinguen).
4. Enlaces con una dirección de email
En este caso, se sustituye lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la
dirección de email. La estructura de la etiqueta es:
Texto del enlace
Un ejemplo
Cualquier duda, escribe aProfesor Titular
Ejemplo No. 6. Uso de Vínculos.
Ejemplo 6 Página de enlaces Ir abajo
Ir a ejemplo 4
Ir a Consorcio Clavijero
.
.
.
.
.
.
.
.
.
.
.
.
Cualquier duda, escribe aProfesor Titular
Ir arriba
2.4.1 Imágenes utilizadas como enlace
Se puede utilizar una imagen como enlace a otra página. Para estos casos se utilizan generalmente
imágenes pequeñas (iconos), aunque se puede usar cualquier tipo de imagen.
La estructura general de un enlace es:
yyy
donde xxx era el destino del enlace e yyy el texto del enlace . En este caso se sustituye xxx por el nombre
del archivo de la página a la que se quiere acceder. Y en lugar de yyy ponemos la etiqueta completa de la
imagen
También se puede utilizar una imagen para enlazar con otra imagen. En este caso se sustituye xxx (el
destino del enlace) con el nombre del archivo de la imagen a la que se quiere acceder e yyy
Por último, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso se
sustituye xxx (el destino del enlace) con el nombre del archivo de la imagen a la que se quiere acceder e
yyy (lo que aparece en pantalla como el enlace) por el texto.
un paraíso tropical
Un tipo de imágenes del que se hace abundante uso y que sirven para mejorar la presentación de la
página son los iconos, botones, barras separadoras, etc. A pesar de su tamaño o forma, son imágenes
como cualquier otra.
Ejemplo 7. Uso de Imágenes como vínculos.
Ejemplo 7
Imágenes de enlaces
Visualizar Mapa Conceptual del Modulo 2
2.5 Tablas
Las tablas permiten representar y ordenar cualquier elemento de una pagina en diferentes filas y
columnas de modo que se pueda resumir grandes cantidades de información que puede representarse
rápida y fácilmente.
El contenido de una tabla se encierra entre las tags ......
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las
columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags ...... Las tags y con sus
correspondientes tags de cierre, indican para indicar las celdas individuales dentro de cada fila. Las tags
..... indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse
en negrita. Las tags ..... indican que se trata de celdas comunes.
Los atributos de las etiquetas del manejo de tablas son:
Propiedades de la etiqueta TABLE
Border Permite establecer o no el borde de toda la tabla. Los
valores pueden ser: 0 – No hay borde, 1 – Borde
simple, 2 – Borde doble.
WIDTH ancho de la tabla
CAPTION Añade un título a la tabla de acuerdo a la alineación
del mismo, indicado por la propiedad ALIGN, que
puede ser BOTTOM, TOP, LEF, RIGTH
TH Formatea las celdas de la primera fila y columna como
cabeceras que salen en negrilla y centradas.
BGCOLOR Establece el color de fondo de toda la tabla.
ALIGN Establece la alineación de la tabla con respecto a la
página (center | left | right)
BORDERCOLOR Establece el color del borde.
BACKGROUND = archivo Imagen de fondo a la tabla
CELLSPACING=numero Espacio entre celdas
CELLPADING = numero Tamaño del renglón
RULES = none | all | rows | cols Líneas que se visualizarán de la tabla.
Propiedades del renglón TR
BGCOLOR Establece el color de fondo del renglón
VALIGN Establece la alineación a lo alto del renglón (top,
bottom, center).
Propiedades de la columna TD
BGCOLOR Establece el color de fondo de la celda
ALIGN Establece la alineación a lo ancho de la columna
(left, center, right).
Ejemplo 8. Uso de Tablas
Ejemplo 7 Tablas básicas Cabecera 1 Cabecera 2 Cabecera 3 Dato 1 Dato 2 Dato 3 Dato 4 Dato 5 Dato 6
Ejemplo 9. Tablas con titulo Ejemplo 8 Materias del Ciclo IV, V y VI Ciclo IV Ciclo V Ciclo VI Desarrollo de Aplicaciones en Web Redes y Telecomunicaciones I Redes y Telecomunicaciones II Fundamentos de Base de Datos Sistemas de Administración de Base de Datos Software de Aplicación Administrativa Plataformas Operativas de Tecnologías de Información Administración de Tecnologías de Información Servicio Social
2.6 Fames o marcos
Con los frames se puede dividir una página HTML en varias y navegar dentro de cada frame. Por ejemplo
es muy común utilizar un frame para situar en él un menú o iconos de navegación dentro del Web que
permanece siempre en pantalla, mientras que las páginas van apareciendo en el segundo frame.
Se puede dividir las páginas HTML con los frames horizontalote (líneas) o verticalmente (columnas).
También se admiten frames anidados.
Ejemplo de Frames Horizontales.
Ejemplo de Fames Verticales.
Ejemplo de Frames Anidados
==== frame3.gif ====
Propiedades de los frames:
ROWS Establece el total de marcos horizontales. Se
pueden definir separados por comas. Los
valores se indican con porcentajes de la
pantalla, indicando un número que representa
total de píxeles. El * en el valor representa lo
que queda de lo ancho de la pagina.
COLS Establece el total de marcos verticales. Se
pueden definir separados por comas. Los
valores se indican igual que rows.
NAME Define el nombre del marco.
SRC Establece el archivo a visualizar.
SCROLLING Indica si aparece la barra de desplazamiento.
Los valores puede ser: yes, no, auto.
NORESIZE Indica que no puede cambiar su tamaño el
frame.
FRAMEBORDER Indica si se desea o no el borde de división entre
un marco y otro. Los valores son: yes, no
BORDER Indica la anchura del borde.
MARGINWIDTH Margen izquierdo del marco.
MARGINHEIHT Margen superior del marco.
Visualización de una pagina en un frame.
Es posible que al hacer referencia de un vínculo, en una pagina que contenga Frames, se desea mostrar
la información en otro frame. Por ejemplo, supongamos las siguientes páginas:
La pagina anterior esta formada de 3 archivos: el que establece los frames (divisiones), el que contiene el
menú y la pagina del lado derecho. El código correspondiente a cada página es el siguiente:
Pagina de Frames Pagina del menú (lado izquierdo) Pagina Inicial (lado derecho)
Opciones
Lectura de Datos
Salir
Desarrollo de Aplicaciones en Web
A cada uno de los frames, se les establece un nombre (puede ser cualquier nombre, sin espacios).
Cuando se desea que los vínculos se visualicen en otro frame, por ejemplo el frame del lado izquierdo,
llama a un archivo a que se visualice en el frame derecho. Se tiene que añadir en la etiqueta , la propiedad TARGET, indicando el nombre del frame.
Existen valores por default que se pueden asignar a la propiedad TARGET, estos hacen referencia a
ventanas independientes y no a los frames definidos. Los valores son:
“_blank” La información debe cargarse en una ventana blanca.
“_self” La información se carga en el mismo marco invocado.
“_parent” La información se visualiza en el marco padre. Se utiliza cuando la página de
marcos es otra página de marcos.
“_top” Se visualiza en ventana completa, cancelando la estructura de marcos.
En el ejemplo anterior la opción Salir se visualizara en ventana completa.
Salir
2.7 Formularios.
Un formulario HTML con listas de selección, menús desplegables, campos de texto, botones, etc., te
permite introducir cualquier tipo de información para que la comunicación sea bidireccional, dejando de
ser un mero espectador. La información introducida en el formulario es tratada en el servidor por un
programa (PHP por ejemplo) y puede responder con una nueva página presentada en el navegador.
Sin embargo, sin necesidad de utilizar programas PHP se puede recibir información de los visitantes de la
Web vía correo electrónico. Una de las mayores ventajas de la Web es que es interactiva. Los usuarios
de una página no tienen más que escribir al autor de la misma para comentarle cualquier cosa de la
página. Sin embargo, si se desea que solo digan sólo unas cosas concretas (responder a alguna
pregunta, seleccionar entre varias opciones, etc.) se debe utilizar formularios.
Una forma es definida con la etiqueta y . Ejemplo:
Como atributos de la etiqueta FORM se encuentran:
a) ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo
(precedida de mailto:, en cuyo caso se debe añadir el parámetro ENCTYPE="text/plain" para que lo que
se reciba resulte legible.
Ej: action="mailto:jmelo@clavijero.org", enviara el contenido de los campos del formulario
directamente en el buzón de correo indicado después de mailto.
También puede llamar a una pagina de un servidor Web vía HTTP, por ejemplo
action="http://panuco_online/registro.php"
b) El parámetro METHOD define la manera en que se mandará el formulario. Es recomendable utilizar
POST. En el caso de que se este mandando el formulario a nuestra dirección de correo electrónico es
obligado usarlo.
Elementos en un formulario.
La etiqueta Input es la más usada en un formulario. El tipo del input especifica con el atributo type.
Ejemplo:
Nombre:
¿Cuantos son dos y dos?
3
4
5
Se verá así:
Nombre:
¿Cuantos son dos y dos?
3
4
5
Enviar
El botón no hace nada porque no se ha definido qué debe hacer.
Los tipos input mas usados comúnmente son:
Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en un formulario. Las dos primeras se
obtienen por medio de la etiqueta :
El primero dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero
no se vera lo que se teclee en él. Estos son los atributos para modificarlos:
Parámetro Utilidad
SIZE Tamaño de la caja de texto.
MAXLENGTH Número máximo de caracteres que puede introducir el usuario.
VALUE Texto por defecto que contendrá la caja.
Por otro lado, puede que se necesite que el usuario pueda introducir más de una línea. En ese caso se
utilizará la siguiente etiqueta:
Por defecto
Lo que se incluya entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite
estos parámetros:
Parámetro Utilidad
ROWS Filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto.
Opciones
Si lo que se desea es que el usuario decida entre varias opciones se puede hacer de dos modos. El
primero es el que se mostró en el ejemplo inicial:
3
4
5
3
4
5
Para asociar varios botones de radio a una misma variable se les pone a todos ellos el mismo NAME.
Aparte de esto acepta los siguientes parámetros:
Parámetro Utilidad
VALUE Este es el valor que asignará a la variable.
CHECKED Si lo indicamos en una de las opciones esta será la que esté activada por defecto.
También existen las listas desplegables. Para emplearlas se deberá utilizar dos etiquetas, SELECT y
OPTION:
Netscape
Explorer
Opera
Lynx
Otros
Los parámetros que admite SELECT son las siguientes:
Parámetro Utilidad
SIZE El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de
selección y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción.
y OPTION estos:
Parámetro Utilidad
VALUE Este es el valor que asignará a la variable.
SELECTED Si lo indicamos en una de las opciones esta será la seleccionada por defecto.
Botones del formulario
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya
rellenado el usuario:
Enviar
Restablecer
Se puede cambiar el texto que el navegador pone por defecto en esos botones utilizando el parámetro
VALUE.
Otros elementos
Puede que se necesite que el usuario sencillamente se confirme o niegue algo. Esto se consigue por
medio de controles de confirmación:
Me considero guapo/a Me considero guapo/a
Si se desea que el control esté activado por defecto se le añade el parámetro CHECKED. El formulario
asignará a la variable NAME el valor on u off.
Ejemplo No. 10. Creación de un Formulario.
Captura tus datos por favor...
Nombre:
Ap. Paterno:
Ap. Materno:
Sexo:
Femenino
Masculino
Edad:
20
21
22
23
24
25
26
27
28
29
30
Comentarios Generales:
=== Escribe tus comentarios ====
2.8 Otras Etiquetas.
Listas
Hay varias maneras de tratar listas. Las principales son la lista numerada (OL) y de los puntos
conductores (UL) que tiene un par de variantes. También hay una lista pensada para glosarios de
términos (DL).
Una Lista Numerada (Ordered List)
Animales
Plantas
o Propiedades de OL (Lista Ordenada)
TYPE Define el tipo de numeración y puede ser: A | a | I
| i | 1
START Valor con el que iniciará la lista.
o Propiedades de LI
TYPE Define el tipo de numeración del elemento y
puede ser: A | a | I | i | 1
VALUE Valor que tomará el elemento.
Una lista No Numerada (Unordered List)
Animales
Plantas
o Propiedades de UL
TYPE Define el tipo de viñeta y puede ser: disc ● |
circle ○ | square □
Una Lista de Definiciones (Definition List)
Animales
Son unos bichitos que algunos tienen espinazo y otros no.
Plantas
Se ve así:
. Animales
. Plantas
Se ve así:
1. Animales
2. Plantas
Están vivas pero no les puedes llamar bichos. No sería correcto.
.
A veces resulta útil anidar las listas para representar un esquema jerárquico. Un ejemplo:
Animales
Vertebrados
Invertebrados
Plantas
Verdes
Nucleares
Líneas divisorias o reglas.
Crea una línea divisoria horizontal.
Propiedades:
Propiedad Definición
Color = color Color de la línea
Width = tamaño Tamaño de la línea
Align = left | right | center Alineación de la regla en la pantalla
Comentarios
Un comentario es un texto que permite aclarar un código o dar la explicación del mismo. El texto entre
comentarios no se visualiza en el navegador. Para establecer un comentario en HTML se utiliza.
Se ve así:
Animales
o Vertebrados
o Invertebrados
Plantas
o Verdes
o Nucleares
Se ve así:
Animales
Son unos bichitos que tienen espinazo y otros no.
Plantas
Están vivas pero no se les puede llamar bichos. No sería correcto
Marquesinas
Una marquesina es un texto que se desplaza a través de la página. Para establecer una marquesina al
texto.
Texto
Propiedades:
Propiedad Definición
Behavior = scroll | alternate Tipo de movimiento
Direction = down | up | left | right Dirección del movimiento
Otras etiquetas
Para establecer el texto tachado.
Texto
Para establecer un subíndice.
Texto
Para establecer un superíndice.
Texto
Ejemplo 12. Aplicación de otras etiquetas.
Bienvenidos a esta pagina
Algunas Formulas son:
Agua: H2O
Binomio Cuadrado Perfecto: x2 + 2xy + y2
Este texto este subrayado Hola Ejemplo de Listas
Lista Numerada
Animales Plantas Lista no Numerada
Animales Plantas
Lista de Definiciones
Animales Son unos bichitos que algunos tienen espinazo y otros no.
Plantas Están vivas pero no les puedes llamar bichos. No sería
correcto.
Recommended