1. Programación para Internet
PROGRAMACIÓN PARA INTERNET
Módulo 1. Construcción de páginas Web
Objetivo: El estudiante conocerá y explotará el lenguaje de
marcado XHTML como medio fundamental de creación de
páginas Web.
1.1. Fundamentos de XHTML
1.2. Uso de herramientas de diseño XHTML
1.3. Consideraciones sobre diseño de sitios Web
1.4. Introducción a las Hojas de estilo en cascada (CSS)
1.5. Uso de herramientas de diseño de hojas de estilo (CSS)
Lic. Nancy Michelle Torres Villanueva
2. Requisitos
PROGRAMACIÓN PARA INTERNET
● Lo único que necesitas es:
● Un editor de texto plano
● Un navegador que funcione bien y cumpla los
estándares: el Mozilla Firefox, por ejemplo
● Un navegador que funcione mal, tenga todo el
mundo y pase de los estándares: ¿Ya sabes cuál?
Lic. Nancy Michelle Torres Villanueva
3. XHTML
PROGRAMACIÓN PARA INTERNET
● XHTML significa eXtensible HyperText Markup
Language y es la versión modernizada del tradicional
HTML4 , pero compatible con XML.
● Es un lenguaje semántico, lo que quiere decir que no
definimos el aspecto de las cosas, sino lo que
significan. Por ejemplo, si tenemos nuestro título de la
página, en lugar de decir “Lo quiero grande en letras
rojas”, le indicamos al navegador que “Este es el título
principal de la página. Haz algo para que destaque”.
Lic. Nancy Michelle Torres Villanueva
4. CSS
PROGRAMACIÓN PARA INTERNET
● CSS son las siglas de Cascading Style
Sheets y son un regalo del cielo. Si el
documento XHTML está bien estructurado,
podemos cambiar totalmente su apariencia sin
tocar una sola línea de código en el archivo
.html.
● Esto nos permite separar el contenido del
aspecto, y es de gran importancia.
Lic. Nancy Michelle Torres Villanueva
5. Etiquetas en XHTML
PROGRAMACIÓN PARA INTERNET
XHTML está basado en etiquetas. Una etiqueta
tiene la siguiente forma:
<etiqueta> Algo aqui dentro </etiqueta>
Lic. Nancy Michelle Torres Villanueva
6. ... Etiquetas en XHTML
PROGRAMACIÓN PARA INTERNET
● Volviendo al ejemplo anterior de nuestro título:
la etiqueta para poner el título principal en la
página es <h1>. Entonces nos quedará:
<h1>What is the Matrix?</h1>
● Como ves, <h1> marca el inicio de la etiqueta,
mientras que </h1> se encarga de cerrarla.
Lic. Nancy Michelle Torres Villanueva
7. ... Etiquetas en XHTML
PROGRAMACIÓN PARA INTERNET
Hay etiquetas que pueden modificarse mediante
atributos. Su estructura es la siguiente:
<etiqueta atributo="valor">
● Por ultimo, comentar un par de reglas que
siguen las etiquetas: siempre en minúsculas y
los atributos entre comillas.
Lic. Nancy Michelle Torres Villanueva
8. Estructura de un documento
XHTML
PROGRAMACIÓN PARA INTERNET
● El DOCTYPE y la codificación
● El elemento raíz (HTML)
● La cabecera (HEAD)
● El cuerpo (BODY)
Lic. Nancy Michelle Torres Villanueva
9. DOCTYPE y codificación
PROGRAMACIÓN PARA INTERNET
● La primera línea que debemos tener en nuestro
documento XHTML es la que marca la
codificación, es decir, el formato en el que
guardamos nuestro archivo. La codificación
estándar es la Unicode (UTF-8) y soporta
caracteres de todas las lenguas (occidentales,
griegos, chinos, árabes, japoneses,
coreanos...). Asegúrate de que el editor de
textos que uses te guarda el archivo en formato
Unicode.
Lic. Nancy Michelle Torres Villanueva
10. ... DOCTYPE y codificación
PROGRAMACIÓN PARA INTERNET
● Tenemos que escribir esto:
<?xml version="1.0" encoding="UTF-8"?>
● A continuación tenemos que indicar el
DOCTYPE. Se encarga de decirle al navegador
qué contiene el archivo que está abriendo.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-strict.dtd">
Lic. Nancy Michelle Torres Villanueva
11. Notas
PROGRAMACIÓN PARA INTERNET
● Estas dos etiquetas no llevan la barra / de
cierre
● El doctype aparece en dos líneas. No hay
problema porque el navegador interpreta los
saltos de línea en el código como espacios en
blanco. En realidad podríamos escribir todo el
archivo XHTML en una sola línea. O cada
palabra en una línea diferente.
Lic. Nancy Michelle Torres Villanueva
12. El elemento raíz (HTML)
PROGRAMACIÓN PARA INTERNET
● El resto de nuestro documento tiene que ir
encerrado por la etiqueta <html>.
● Pero en esa etiqueta tenemos que indicar una
serie de cosas, como que nuestro documento
es XHTML y la lengua que utilizamos. Si
escribimos en español, nos quedaría:
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
Lic. Nancy Michelle Torres Villanueva
13. La cabecera (HEAD)
PROGRAMACIÓN PARA INTERNET
● La cabecera contiene información que no forma
parte del contenido de la página, como el título,
vínculos a hojas de estilo CSS, información
para robots de búsqueda, scripts, etc.
● La cabecera va encerrada entre <head> y
</head> y el título entre <title> y
</title>
Lic. Nancy Michelle Torres Villanueva
14. ... La cabecera (HEAD)
PROGRAMACIÓN PARA INTERNET
<head>
<title>Titulo de la web</title>
</head>
● La sangría no es necesaria, pero se
recomienda
Lic. Nancy Michelle Torres Villanueva
15. El cuerpo (BODY)
PROGRAMACIÓN PARA INTERNET
● Por ultimo, nos encontramos con el cuerpo,
encerrado entre <body> y </body>, y que
contiene todo el código. Quedaría así:
<body>
Aqui va el cuerpo de la web
</body>
Lic. Nancy Michelle Torres Villanueva
16. <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
PROGRAMACIÓN PARA INTERNET
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">
<head>
<title>Titulo de la web</title>
</head>
<body>
Aqui va el cuerpo de la web
</body>
</html>
Lic. Nancy Michelle Torres Villanueva
17. Guardar el archivo
PROGRAMACIÓN PARA INTERNET
● La extensión del archivo XHTML es .htm o
.html. No hay tal cosa como una extensión de
archivo xhtml. La forma en que se especifica al
navegador que un archivo es un archivo
XHTML es en la declaración DOCTYPE, no en
la extensión de archivo.
Lic. Nancy Michelle Torres Villanueva
18. Texto en XHTML
PROGRAMACIÓN PARA INTERNET
● HTML fue creado en principio para el alfabeto
en inglés, sin embargo se buscaron modos
para mostrar también caracteres o símbolos
denominados especiales.
● Para utilizar caracteres especiales usaremos
los símbolos & y ; para denotar el inicio y final
respectivamente de un símbolo especial.
Lic. Nancy Michelle Torres Villanueva 18
19. Texto: Descripción:
PROGRAMACIÓN PARA INTERNET
Pantalla:
´ Acento ´
ñ eñe ñ
" Comillas Dobles "
°: Grados °
á a con acento á
é e con acento é
espacio en blanco
Lic. Nancy Michelle Torres Villanueva 19
20. Párrafos
PROGRAMACIÓN PARA INTERNET
● Los párrafos sirven para estructurar el
contenido. En la web funcionan igual que en la
vida real: contienen una o más frases con
relación entre sí. Para crear un párrafo,
metemos texto entre las etiquetas <p> y </p>.
Lic. Nancy Michelle Torres Villanueva
21. Saltos de línea
PROGRAMACIÓN PARA INTERNET
● A veces, dentro de un mismo párrafo
necesitamos cambiar de línea. Esto lo
conseguimos con la etiqueta <br />
● <p>
● Esta es una linea <br />
● Esta es otra linea
● </p>
Lic. Nancy Michelle Torres Villanueva
22. Títulos
PROGRAMACIÓN PARA INTERNET
● Los títulos nos sirven para agrupar información.
● Para conseguir esto, tenemos las etiquetas
<hx> y </hx>, donde x es un número del 1 al
6. <h1> corresponde al título más importante y
debería haber solo uno por página.
●
Lic. Nancy Michelle Torres Villanueva
23. Los Blockquotes
PROGRAMACIÓN PARA INTERNET
● Los blockquotes sirven para mostrar un bloque que
indica que lo que hay en el interior es una cita. Los
navegadores normalmente los muestran con un
indentado, aunque esto se puede cambiar con CSS.
<blockquote>
<p>
Aqui va la cita
</p>
</blockquote>
Lic. Nancy Michelle Torres Villanueva
24. Separadores horizontales
PROGRAMACIÓN PARA INTERNET
● Los separadores horizontales (horizontal rules)
han caído en desuso, ya que podemos
conseguir bordes delimitadores mediante CSS.
Pero como el saber no afecta: la etiqueta es
<hr />
● Algunas de sus propiedades son:
● Align: Establece que la regla se alinee a la
izquierda, centro o derecha LEFT,CENTER o
RIGHT
● NOSHADE: Quita el sombreado predeterminado de
la regla.
Lic. Nancy Michelle Torres Villanueva
25. ... Separadores horizontales
PROGRAMACIÓN PARA INTERNET
● WIDTH: Permite especificar el ancho de la regla
(en pixeles o porcentaje)
● SIZE: Permite especificar el alto de la regla (en
pixeles)
Lic. Nancy Michelle Torres Villanueva
26. Comentarios
PROGRAMACIÓN PARA INTERNET
● Existen dos etiquetas distintas para ingresar
comentarios en nuestro código.
<!-- Comentario de una linea -->
<comment>Otro tipo</comment>
Lic. Nancy Michelle Torres Villanueva 26
27. Etiquetas de formato
PROGRAMACIÓN PARA INTERNET
● Ahora veremos cómo destacar ciertas partes
del contenido de nuestra página para hacer
más clara la lectura.
● Hay que tener en cuenta que el aspecto de
todos estos formatos son totalmente
configurables con CSS.
Lic. Nancy Michelle Torres Villanueva
28. Enfásis
PROGRAMACIÓN PARA INTERNET
● Para dar énfasis a un texto disponemos de la
etiqueta <em> . Si queremos dar un énfasis
más fuerte, utilizaremos <strong>.
<p>
<em>Remarcado</em> sin remarcar
y continua <strong>otro</strong>.
</p>
● Los navegadores suelen representar <em> con
cursiva y <strong> con negrita.
Lic. Nancy Michelle Torres Villanueva
29. Texto preformateado
PROGRAMACIÓN PARA INTERNET
● Recordemos que XHTML ignora espacios en
blanco consecutivos, tabuladores, saltos de
línea etc. Pero muchas veces nos interesa que
estas cosas se tengan en cuenta (por ejemplo
queremos mostrar código). Para esto tenemos
la etiqueta <pre>
Lic. Nancy Michelle Torres Villanueva
30. Citas
PROGRAMACIÓN PARA INTERNET
● Si queremos marcar un texto como una cita,
utilizaremos <cite> . La diferencia con
<blockquote> es que <cite> no crea la cita en
un bloque, sino que la integra en el mismo
texto. Los navegadores normalmente muestran
el texto citado con cursivas.
Lic. Nancy Michelle Torres Villanueva
31. Acrónimos y abreviaturas
PROGRAMACIÓN PARA INTERNET
● Para explicar el significado de los acrónimos y
abreviaturas usaremos <acronym> y <abbr> ,
respectivamente. El efecto es el mismo: al
pasar el ratón por encima de la palabra, nos
aparece un rectángulo de ayuda con lo que
significan.
● Estas etiquetas necesitan un atributo para
funcionar, y es title.
Lic. Nancy Michelle Torres Villanueva
32. ... Acrónimos y abreviaturas
PROGRAMACIÓN PARA INTERNET
<p>
Mi ordenador tiene 512 <abbr
title="Megabytes">Mb</abbr> de
memoria <acronym title="Random Access
Memory">RAM</acronym>.
</p>
Lic. Nancy Michelle Torres Villanueva
33. PROHIBIDO USAR
PROGRAMACIÓN PARA INTERNET
● Si ya sabías HTML ya no uses <b>, <i>, <font>
y ningún otro tipo de etiqueta que antes solías
usar para dar formato
Lic. Nancy Michelle Torres Villanueva
34. Enlace a una página externa
PROGRAMACIÓN PARA INTERNET
● Si queremos un link a una página que está en
otro servidor, usamos <a> de esta forma:
<a href="http://www.loquesea.com"
title="Descripcion">Texto del enlace
</a>
Lic. Nancy Michelle Torres Villanueva
35. Enlace a una página local
PROGRAMACIÓN PARA INTERNET
● Para enlazar a una página que está en nuestro
servidor, necesitamos saber la ruta.
<a href="profile.html"
title="Informacion sobre mi">
Ficha personal
</a>
Lic. Nancy Michelle Torres Villanueva
36. Enlace a una dirección de e-mail
PROGRAMACIÓN PARA INTERNET
● Podemos hacer un enlace que al pulsar sobre
él, se abra automáticamente una ventana del
cliente de correo electrónico que tenga el
usuario para que escriba un mensaje a esa
dirección.
<a href="mailto:correo@servidor.com"
title="E-mail de
contacto">Contactame</a>
Lic. Nancy Michelle Torres Villanueva
37. Anclas
PROGRAMACIÓN PARA INTERNET
● Las anclas nos permiten enlazar a una posición
concreta de la página.
● En el punto al que queremos saltar, insertamos
un ancla (usamos el atributo id):
<a id="nuestra_ancla" />
● Ahora debemos crear un link que nos lleve a
ese ancla:
<a href="#nuestra_ancla"
title="descripcion">Texto del
enlace</a>
Lic. Nancy Michelle Torres Villanueva
38. Listas
PROGRAMACIÓN PARA INTERNET
● Cuando necesitamos presentar en un texto una
serie de conceptos o ideas utilizamos listas.
● Las listas pueden ser ordenadas o no serlo.
Las que no son ordenadas, a cada término se
le antepone un círculo negro. Las ordenadas
tienen un número en cada término.
Lic. Nancy Michelle Torres Villanueva 38
40. Etiqueta <ul> </ul>
PROGRAMACIÓN PARA INTERNET
● Indica al navegador que cree una lista con
viñetas no ordenada.
● No solamente usada para fines de
numeraciones y viñetas, sino también para
fines de sangría o tabulaciones.
<ul>
<li>Esto es un tipo de punto.</li>
<li>Este es otro.</li>
<li>Y este es otro diferente.</li>
</ul>
Lic. Nancy Michelle Torres Villanueva 40
41. Etiqueta <ol> </ol>
PROGRAMACIÓN PARA INTERNET
●
Listas ordenadas, esta etiqueta predeterminada
indica al navegador que numera la lista de
elementos comprendidos dentro de las
etiquetas <ol>.
<ol>
<li value="20">Este sera el numero 20. </li>
<li>Este sera el 21. </li>
<li>Este sera el 22. Y asi sucesivamente. </li>
</ol>
Lic. Nancy Michelle Torres Villanueva 41
42. Etiqueta <li> </li>
PROGRAMACIÓN PARA INTERNET
● Se usa para indicar al navegador que exhiba el
texto que le sigue como un elemento de línea
en una lista.
● Utiliza los siguientes atributos:
<li value="20">Este sera el numero
20. </li>
Lic. Nancy Michelle Torres Villanueva 42
43. Listas de definición
PROGRAMACIÓN PARA INTERNET
● Las listas de definición se diferencian de las
anteriores en que cada “ítem” está compuesto
por un par de elementos: un término y su
definición. Se usan estas etiquetas: <dl> para
marcar la lista, <dt> para un término y <dd>
para su definición.
<dl>
<dt>:)</dt>
<dd>Sonrisa</dd>
</dl>
Lic. Nancy Michelle Torres Villanueva 43
44. Imágenes
PROGRAMACIÓN PARA INTERNET
● Podemos usar tres formatos de imagen: GIF, JPEG y
PNG.
● El JPEG es el más adecuado para imágenes con
muchos colores, como fotografías, y que no tengan
grandes áreas de colores planos.
● Las imágenes GIF son de sólo 8 bits (256 colores),
pero podemos usar un color transparente.
● El formato PNG es el estándar y podemos elegir
varias profundidades de paleta (número de colores).
Además, podemos utilizar un canal alpha para crear
transparencias.
Lic. Nancy Michelle Torres Villanueva 44
45. Insertar una imágen
PROGRAMACIÓN PARA INTERNET
● Para poner una imagen hacemos uso de la
etiqueta <img> con unos cuantos atributos:
<img src="image.gif" width="ancho"
height="alto" alt="descripcion" />
Lic. Nancy Michelle Torres Villanueva 45
46. Atributo Widht y Height
PROGRAMACIÓN PARA INTERNET
● Los atributos width y height nos permiten
establecer el ancho y el alto de la imagen.
Podemos indicar un valor en píxeles o en tanto
por ciento. width="200" muestra la imagen con
200 píxeles de ancho, mientras que
width="200%" hace que se vea al doble de su
anchura original.
● Es conveniente que pongamos las dimensiones
en píxeles reales, ya que ahorramos tiempo al
navegador a la hora de maquetar la página.
Lic. Nancy Michelle Torres Villanueva 46
47. Atributo Alt
PROGRAMACIÓN PARA INTERNET
● El atributo alt contiene una descripción de la
imagen, que veremos cuando pasemos el ratón
por encima y mientras se carga el fichero.
También se muestra esta descripción cuando
no se ha podido cargar la imagen. Es un
atributo obligatorio, por cuestiones de
accesibilidad.
<img src="banner.gif" width="200"
height="40"
alt="BenKo’s Art" />
Lic. Nancy Michelle Torres Villanueva 47
48. Imágenes como links
PROGRAMACIÓN PARA INTERNET
<a href="http://pagina.com"
title="Portafolio online">
<img src="banner.gif" width="200"
height="40"
alt="Imagen banner" />
</a>
Lic. Nancy Michelle Torres Villanueva 48
49. Thumbnails
PROGRAMACIÓN PARA INTERNET
● Thumbnail es una imagen más pequeña que la
original, de modo que al hacer clic sobre ella,
cargamos la imagen a tamaño completo.
<a href="matrix.jpg" title="Wallpaper
de Trinity">
<img src="matrix.jpg" width="100"
height="50" alt="Trinity" />
</a>
Lic. Nancy Michelle Torres Villanueva 49
50. ... Thumbnails
PROGRAMACIÓN PARA INTERNET
● Si nuestro wallpaper de Trinity ocupa 100Kb (o más),
tendremos esos 100Kb ¡como thumbnail! (justo lo que
queremos evitar). El escalar una imagen con width y
height no hace que ocupe menos espacio.
● Tenemos que escalar la imagen y guardar esta copia
más pequeña (de 5Kb, por ejemplo):
<a href="matrix.jpg" title="Wallpaper de
Trinity">
<img src="matrix_thumb.jpg" width="100"
height="50"
alt="Trinity" />
</a>
Lic. Nancy Michelle Torres Villanueva 50
51. Tablas
PROGRAMACIÓN PARA INTERNET
● En HTML también podemos incluir arreglos de
tablas.
● Se deben utilizar varias etiquetas que se
describen a continuación:
Lic. Nancy Michelle Torres Villanueva 51
52. ... Tablas
PROGRAMACIÓN PARA INTERNET
● <table>: Crea la tabla
● <caption>: Pone título a la tabla
● <tr>: Crea una fila
● <td>: Crea una celda
● <th>: Crea una celda de encabezamiento
Lic. Nancy Michelle Torres Villanueva 52
53. Atributos de table
PROGRAMACIÓN PARA INTERNET
● Align: Establece la alineación de la tabla o texto
mediante ALIGN=LEFT o ALIGN=RIGHT
● Border: Determina el ancho del borde en pixeles
● Cellpadding: Establece la cantidad de espacio libre
junto al contenido de una celda
● Cellspacing: Asigna la cantidad de espacio entre las
celdas de una tabla
● Width: Determina el ancho de la tabla en pixeles o en
un porcentaje
Lic. Nancy Michelle Torres Villanueva 53
54. Fusionar celdas
PROGRAMACIÓN PARA INTERNET
● Colspan: Expandir una celda varias columnas.
● Rowspan: Expandir una celda varias filas.
Lic. Nancy Michelle Torres Villanueva 54
56. <td>jose@prueba.com.bo</td>
</tr>
PROGRAMACIÓN PARA INTERNET
<tr>
<td>
Carolina Nuñez
</td>
<td>
453444
</td>
<td>carolina@prueba.com.bo</td>
</tr>
</table>
Lic. Nancy Michelle Torres Villanueva 56
57. Formularios
PROGRAMACIÓN PARA INTERNET
● Los formularios están delimitados con la
etiqueta <FORM>...</FORM>, que permite
reunir varios elementos de un formulario, como
botones y casillas de texto.
Lic. Nancy Michelle Torres Villanueva 57
58. ¿Cuáles son sus atributos?
PROGRAMACIÓN PARA INTERNET
● METHOD: indica cómo se enviarán las
respuestas.
"POST": Es el valor que envía los datos al
agente de procesamiento almacenándolos en el
cuerpo del formulario.
"GET": Envía los datos agregándolos a la
dirección URL y separándolos de la dirección con
un signo de interrogación.
Lic. Nancy Michelle Torres Villanueva 58
59. PROGRAMACIÓN PARA INTERNET
● ACTION: indica la dirección a la que se enviará
la información (un script o dirección de correo
electrónico (e_mail@hotmail.com))
Lic. Nancy Michelle Torres Villanueva 59
60. Ejemplo
PROGRAMACIÓN PARA INTERNET
● <FORM ACTION="procesa2.html"
METHOD="GET">
● <FORM ACTION="procesa2.html"
METHOD="POST">
Lic. Nancy Michelle Torres Villanueva 60
61. PROGRAMACIÓN PARA INTERNET
● La diferencia entre estos dos métodos radica
en la forma de enviar los datos a la página,
mientras que el método GET envía los datos
usando la URL, el método POST los envía por
la entrada estándar STDIO.
Lic. Nancy Michelle Torres Villanueva 61
62. PROGRAMACIÓN PARA INTERNET
● La etiqueta FORM actúa como una especie de
contenedor para almacenar elementos que
permiten al usuario seleccionar o introducir
datos.
● Todos los datos se enviarán a la dirección URL
indicada en el atributo ACTION de la etiqueta
FORM, por el método indicado en el atributo
METHOD.
Lic. Nancy Michelle Torres Villanueva 62
63. PROGRAMACIÓN PARA INTERNET
● Se puede insertar cualquier elemento HTML en
una etiqueta FORM (como texto, botones,
tablas y enlaces), pero los elementos
interactivos son los más interesantes.
Lic. Nancy Michelle Torres Villanueva 63
64. Elementos interactivos
PROGRAMACIÓN PARA INTERNET
● La etiqueta INPUT: Todos los botones y
casillas de texto.
● La etiqueta TEXTAREA: una casilla de texto.
● La etiqueta SELECT: una lista de opciones
múltiples.
Lic. Nancy Michelle Torres Villanueva 64
65. INPUT
PROGRAMACIÓN PARA INTERNET
● <INPUT type="tipo de campo" value="Valor
predeterminado" name="Nombre de
elemento">
Lic. Nancy Michelle Torres Villanueva 65
66. Atributo name
PROGRAMACIÓN PARA INTERNET
● Permite a algunos scripts reconocer qué campo
está asociado con un par nombre/valor, lo que
significa que el nombre del campo estará
seguido de un signo igual ("=") seguido de un
valor que el usuario introdujo, o si el usuario no
introdujo ningún valor, por el valor
predeterminado de la etiqueta value.
Lic. Nancy Michelle Torres Villanueva 66
67. Atributo type
PROGRAMACIÓN PARA INTERNET
● Se usa para especificar qué tipo de elemento
se representa con la etiqueta INPUT.
● Estos son los valores posibles:
● checkbox: Las casillas de elección pueden
adoptar uno de dos estados: checked
(seleccionado) o unchecked (no
seleccionado). Cuando la casilla es
seleccionada, el par nombre/valor se envía.
Lic. Nancy Michelle Torres Villanueva 67
68. Ejemplo de checkbox
PROGRAMACIÓN PARA INTERNET
<input type="checkbox"
name="transporte" value="1">Coche
<br>
<input type="checkbox"
name="transporte" value="2"
checked>Avión
<br>
<input type="checkbox"
name="transporte" value="3">Tren
Lic. Nancy Michelle Torres Villanueva 68
70. ... Atributo type
PROGRAMACIÓN PARA INTERNET
● hidden: Este campo, que el navegador no
muestra, es para definir una configuración
única que se enviará como par nombre/valor.
<INPUT TYPE=HIDDEN NAME="para"
VALUE="bufoland@entelchile.net">
● image: Un botón de envío personalizado que
aparece cuando se ubica una imagen en la
ubicación definida por el atributo SRC
<INPUT TYPE=IMAGE NAME="mono"
SRC="botoncito.gif" >
Lic. Nancy Michelle Torres Villanueva 70
71. ... Atributo type
PROGRAMACIÓN PARA INTERNET
● file: Este tipo de control permite a los usuarios
elegir un archivo para enviar. Este archivo es
enviado con el formulario. Nota que para carga
de archivos, el atributo "enctype" del formulario
debe tomar le valor "multipart/form-data".
<input name="imagen" type="file"
accept="image/gif" value="-" />
● password: Una casilla de texto donde los
caracteres escritos aparecen como asteriscos.
Lic. Nancy Michelle Torres Villanueva 71
72. ... Atributo type
PROGRAMACIÓN PARA INTERNET
● radio: Un botón que permite al usuario elegir
entre varias opciones. Cada uno de estos
botones debe tener el mismo atributo name. El
par nombre/valor del botón radio seleccionado
se enviará. Al aplicar el atributo checked para
uno de estos botones se definirá como
seleccionado de forma predeterminada.
Lic. Nancy Michelle Torres Villanueva 72
73. Ejemplo radio
PROGRAMACIÓN PARA INTERNET
<input type="radio" name="transporte"
value="1">Coche
<br>
<input type="radio" name="transporte"
value="2" checked>Avión
<br>
<input type="radio" name="transporte"
value="3">Tren
Lic. Nancy Michelle Torres Villanueva 73
74. ... Atributo type
PROGRAMACIÓN PARA INTERNET
● reset: Un botón de restauración para quitar
todos los elementos en el formulario y
restablecer sus valores predeterminados.
● submit: Un botón de envío para enviar el
formulario. El texto en el botón puede definirse
usando el atributo value.
Lic. Nancy Michelle Torres Villanueva 74
75. ... Atributo type
PROGRAMACIÓN PARA INTERNET
● text: Una casilla de texto para escribir una
línea de texto. El tamaño de la casilla puede
definirse usando el atributo size y la extensión
máxima del texto con el atributo maxlength.
Lic. Nancy Michelle Torres Villanueva 75
76. Textarea
PROGRAMACIÓN PARA INTERNET
● Se usa para definir un cuadro de texto más
grande que la línea simple propuesta por la
etiqueta INPUT.
Lic. Nancy Michelle Torres Villanueva 76
77. Atributos del Textarea
PROGRAMACIÓN PARA INTERNET
● cols: representa el número de caracteres que
puede contener un línea.
● rows: representa el número de líneas
● name: representa el nombre asociado con el
cuadro de texto, que permite su identificación
en el par nombre/valor.
Lic. Nancy Michelle Torres Villanueva 77
78. ... Atributos del Textarea
PROGRAMACIÓN PARA INTERNET
● readonly: impide que el usuario modifique el
texto predeterminado en el campo.
● value: representa el valor predeterminado que
se enviará al script si el usuario no ha escrito
nada en el cuadro de texto
Lic. Nancy Michelle Torres Villanueva 78
79. Ejemplo Textarea
PROGRAMACIÓN PARA INTERNET
<TEXTAREA COLS=20 ROWS=10
NAME="Texto">
</TEXTAREA>
Lic. Nancy Michelle Torres Villanueva 79
80. Select
PROGRAMACIÓN PARA INTERNET
● Sirve para crear una lista desplegable de
elementos (especificados por las etiquetas
OPTION dentro de ella).
Lic. Nancy Michelle Torres Villanueva 80
81. Atributos de Select
PROGRAMACIÓN PARA INTERNET
● name: representa el nombre asociado con la
casilla de texto, que permite su identificación
en el par nombre/valor.
● disabled: crea un lista desactivada, que
aparece atenuada
Lic. Nancy Michelle Torres Villanueva 81
82. ... Atributos de Select
PROGRAMACIÓN PARA INTERNET
● size: representa el número de líneas de la lista
(este valor puede ser más grande que el
número de elementos reales de la lista).
● multiple: Permite al usuario seleccionar varios
campos de la lista
Lic. Nancy Michelle Torres Villanueva 82
83. Ejemplo de Select
PROGRAMACIÓN PARA INTERNET
<select name="transporte">
<option>Coche</option>
<option>Avión</option>
<option selected>Tren</option>
</select>
<select name="transporte">
<option value="1">Coche</option>
<option value="2">Avión</option>
<option value="3">Tren</option>
</select>
Lic. Nancy Michelle Torres Villanueva 83
90. Herramientas de diseño
PROGRAMACIÓN PARA INTERNET
● Editores de texto plano y navegador
● Editores de texto especializados en HTML y
CSS
● Editores de texto especializados con ventana
de vista previa
● Editores WYSIWIG
Lic. Nancy Michelle Torres Villanueva 90
92. Extras
PROGRAMACIÓN PARA INTERNET
● Firebug: Plugin para visualizar el código fuente de las páginas
● Web Developer: Plugin con varias herramientas para
desarrolladores
● Color Scheme Designer: Útil para selección de colores
● W3C Markup Validation Service: Revisa el código
● Grid Designer: Genera el código de los grids que necesites
● Kotatsu: Genera el código de tablas
● CSS Redundancy Checker. Encuentra los selectores CSS que
no son utilizados por los archivos HTML y que puede ser
redundante
Lic. Nancy Michelle Torres Villanueva 92
93. ... Extras
PROGRAMACIÓN PARA INTERNET
● CSS Menu Maker. Crear y personalizar tus
menús CSS
● CSS Text Wrapper. De una manera muy
sencilla logramos que el texto HTML adquiera
una forma que no sean sólo un rectángulos
● PSDtoCSS online. Convierte tus archivos PSD
en un diseño XHTML-CSS
Lic. Nancy Michelle Torres Villanueva 93
94. Donde poner CSS
PROGRAMACIÓN PARA INTERNET
● Hay dos opciones para insertar estilos en un
documento XHTML. Lo más normal es hacerlo
en un archivo externo (que se llama hoja de
estilos) y enlazarlo desde nuestro documento
XHTML.
● Podemos enlazar una o más hojas poniendo
esto dentro de la cabecera (head):
<link href="nuestra_hoja.css"
rel="stylesheet" type="text/css" />
Lic. Nancy Michelle Torres Villanueva 94
95. ... Donde poner CSS
PROGRAMACIÓN PARA INTERNET
● La otra opción es escribir la información
referente a los estilos en el mismo archivo
XHTML. Lo podemos hacer escribiendo entre
las etiquetas <style> y </style>, que también
deben ir en la cabecera.
● Si hacemos las dos cosas a la vez, siempre
tienen prioridad las reglas que estén dentro de
<style>.
Lic. Nancy Michelle Torres Villanueva 95
96. Funcionalidad de CSS
PROGRAMACIÓN PARA INTERNET
● En una hoja de estilos utilizamos reglas que
consisten en elegir selectores a los que
asignamos una serie de propiedades.
● Los selectores los utilizamos para elegir a qué
elementos se aplican las propiedades que
escribimos. Hay diferentes tipos de selectores
Lic. Nancy Michelle Torres Villanueva 96
97. Selectores
PROGRAMACIÓN PARA INTERNET
● Si queremos elegir una etiqueta, simplemente
escribimos su nombre. Por ejemplo, si
queremos establecer propiedades para los
enlaces:
a {
...
}
Lic. Nancy Michelle Torres Villanueva 97
98. ... Selectores
PROGRAMACIÓN PARA INTERNET
● También podemos elegir un elemento único
utilizando su atributo id. Para ello, empleamos
numeral (#) almohadilla:
#menu {
...
}
Lic. Nancy Michelle Torres Villanueva 98
99. Clases
PROGRAMACIÓN PARA INTERNET
● Otra cosa que podemos hacer es definir una
clase y hacer que muchos elementos la
utilicen, escribiendo un punto antes del
nombre. Por ejemplo, si queremos destacar
algo:
.importante {
...
}
Lic. Nancy Michelle Torres Villanueva 99
100. ... Clases
PROGRAMACIÓN PARA INTERNET
● Luego podríamos usar esa clase en los
párrafos que queramos (o cualquier otro
elemento), usando el atributo class. De este
modo:
<p class="importante">Bla bla bla</p>
Lic. Nancy Michelle Torres Villanueva 100
101. Cascading
PROGRAMACIÓN PARA INTERNET
● Cascading significa cascada, y tiene que ver
con la herencia. En CSS los elementos hijos
heredan todas las propiedades de sus padres.
Por ejemplo, si establecemos una regla para el
elemento table, sus hijos (td entre otros)
también tendrán esas mismas reglas.
Lic. Nancy Michelle Torres Villanueva 101
103. Colores
PROGRAMACIÓN PARA INTERNET
● Se especifica el color deseado mediante números
hexadecimales mediante la siguiente estructura:
#RRVVAA
● El color tiene un signo de numeral # antecediendo a
los 6 números.
● Existen dos números para cada color principal: rojo,
verde y azul.
● Cada uno de los números varía hexadecimal mente
{0,1,2....,9,A,B,...F}.
Lic. Nancy Michelle Torres Villanueva 103
104. ... Colores
PROGRAMACIÓN PARA INTERNET
● Podemos hacerlo en inglés, por ejemplo. En
lugar de #fff escribimos white y lo
solucionamos.
● El inconveniente es que no todos los colores
tienen nombre.
Lic. Nancy Michelle Torres Villanueva 104
107. Fondo
PROGRAMACIÓN PARA INTERNET
● Podemos modificar el fondo de un elemento
con la propiedad background, que tiene la
siguiente sintaxis:
● background: [color] [image] [repeat]
[attachment] [position]
Lic. Nancy Michelle Torres Villanueva 107
108. ... Fondo
PROGRAMACIÓN PARA INTERNET
● image: indicamos qué imagen usaremos de fondo.
Por ejemplo, url("fondo.gif")
● repeat: con esto establecemos si queremos que la
imagen se repita o no, tanto horizontal como
verticalmente. Con repeat se repite siempre en
ambos sentidos (valor por defecto), mientras que
con no-repeat no se repite nunca. Con repeat-x se
repite sólo horizontalmente y con repeat-y lo hace
sólo en vertical.
Lic. Nancy Michelle Torres Villanueva 108
109. ... Fondo
PROGRAMACIÓN PARA INTERNET
● attachment: sirve para indicar si el fondo se queda
fijo en el sitio o se desplaza con el scroll. Con scroll
(valor por defecto) el fondo se desplaza y con fixed
se queda siempre en el mismo sitio.
● position: indica la posición del fondo. Indicamos
tanto la posición desde la izquierda como desde
arriba (ya sea en píxeles o porcentaje). Los valores
por defecto son 0% 0% que sitúan al fondo en la
esquina superior izquierda. Si lo quisiéramos en las
coordenadas 20,30, escribiríamos 20px 30px. Si
queremos el fondo centrado, pues 50% 50%.
Lic. Nancy Michelle Torres Villanueva 109
110. ... Fondo
PROGRAMACIÓN PARA INTERNET
/* solo color de fondo */
body { background-color: #fff; }
/* color de fondo e imagen en mosaico */
body { background: #fff url("fondo.gif");}
/* imagen fija, centrada y sin repetir, */
/* a modo de "marca de agua" */
body {
background: #fff url("fondo.gif") no-repeat
fixed 50% 50%;
}
Lic. Nancy Michelle Torres Villanueva 110
111. Fuente
PROGRAMACIÓN PARA INTERNET
● Usar sólo fuentes “estándar”, que tengan la
mayoría de ordenadores. Además, podemos
especificar varias, de forma que si no se tiene
la primera, se muestra la segunda, si no se
tiene la segunda, pues la tercera, etc.
● La propiedad que sirve para cambiar la fuente
es font-family.
● El tamaño de la fuente lo controlamos con font-
size. Podemos indicar medidas en píxeles (px)
o en puntos (pt).
Lic. Nancy Michelle Torres Villanueva 111
112. ... Fuente
PROGRAMACIÓN PARA INTERNET
● El tema de la negrita se controla con font-
weight asignándole bold o normal. La cursiva
con font-style, poniendo italic o normal. Si
queremos versales, pues font-variant con
small-caps o normal.
Lic. Nancy Michelle Torres Villanueva 112
113. ... Fuente
PROGRAMACIÓN PARA INTERNET
/* fuente para todo el documento */
body {
font: 11px Arial, Verdana, sans-serif;
color: #666;
}
/* para el enfasis fuerte */
strong {
font-variant: small-caps;
color: #000;
}
Lic. Nancy Michelle Torres Villanueva 113
114. Tarea
PROGRAMACIÓN PARA INTERNET
● Preparar una presentación de los temas del archivo:
Introducción CSS
1. Modelo de cajas
2. Posicionamiento y visualización
3. Texto
Entregar el archivo en PDF
4. Enlaces Utilizar muchos ejemplos
5. Imágenes
6. Listas
7. Tablas
8. Formularios
9. Layout
Lic. Nancy Michelle Torres Villanueva 114