SlideShare una empresa de Scribd logo
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
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
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
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
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
... 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
... 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
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
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
... 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
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
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
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
... 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
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
<?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
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
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
Texto:              Descripción:
PROGRAMACIÓN PARA INTERNET


                                                   Pantalla:
                             &acute;               Acento                       ´
                             &ntilde;                 eñe                       ñ
                             &quot;          Comillas Dobles                    "
                             &deg:                Grados                        °
                             &aacute;          a con acento                     á
                             &eacute;          e con acento                     é
                                 &nbsp;             espacio en blanco


                                        Lic. Nancy Michelle Torres Villanueva       19
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
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
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
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
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
... 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
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
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
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
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
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
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
... 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
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
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
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
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
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
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
PROGRAMACIÓN PARA INTERNET




                             Lic. Nancy Michelle Torres Villanueva   39
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
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
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
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
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
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
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
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
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
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
... 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
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
... 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
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
Fusionar celdas
PROGRAMACIÓN PARA INTERNET




                             ●   Colspan: Expandir una celda varias columnas.
                             ●   Rowspan: Expandir una celda varias filas.




                                             Lic. Nancy Michelle Torres Villanueva   54
<table width=”80%” align=”center”>
                             <caption>Directorio telefonico</caption>
                             <tr>
PROGRAMACIÓN PARA INTERNET

                                <th colspan=”3”>Directorio telefonico</th>
                             </tr>
                             <tr align=”center”>
                                 <td width=”40%”>
                                     Nombre
                                 </td>
                                 <td width=”30%”>
                                      Teléfono
                                 </td>
                                 <td width=”30%”>
                                      E-Mail
                                 </td>
                             </tr>
                             <tr>
                                 <td>
                                  Jos&eacute; Rodr&iacute;guez
                                 </td>
                                 <td>
                                  223454
                                  </td>
                                           Lic. Nancy Michelle Torres Villanueva   55
<td>jose@prueba.com.bo</td>
                             </tr>
PROGRAMACIÓN PARA INTERNET


                             <tr>
                                <td>
                                   Carolina Nu&ntilde;ez
                                </td>
                                <td>
                                   453444
                                </td>
                                <td>carolina@prueba.com.bo</td>
                             </tr>
                             </table>




                                             Lic. Nancy Michelle Torres Villanueva   56
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
¿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
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
Ejemplo
PROGRAMACIÓN PARA INTERNET




                             ●   <FORM ACTION="procesa2.html"
                                 METHOD="GET">

                             ●   <FORM ACTION="procesa2.html"
                                 METHOD="POST">




                                          Lic. Nancy Michelle Torres Villanueva   60
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
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
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
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
INPUT
PROGRAMACIÓN PARA INTERNET




                             ●   <INPUT type="tipo de campo" value="Valor
                                 predeterminado" name="Nombre de
                                 elemento">




                                            Lic. Nancy Michelle Torres Villanueva   65
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
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
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
PROGRAMACIÓN PARA INTERNET




                             Lic. Nancy Michelle Torres Villanueva   69
... 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
... 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
... 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
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
... 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
... 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
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
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
... 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
Ejemplo Textarea
PROGRAMACIÓN PARA INTERNET




                             <TEXTAREA COLS=20 ROWS=10
                             NAME="Texto">
                             </TEXTAREA>




                                        Lic. Nancy Michelle Torres Villanueva   79
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
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
... 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
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
PROGRAMACIÓN PARA INTERNET




                             Lic. Nancy Michelle Torres Villanueva   84
PROGRAMACIÓN PARA INTERNET




                             Lic. Nancy Michelle Torres Villanueva   85
<form action="ejemplo.php" enctype="multipart/form-data">
                             <fieldset><legend>Información personal</legend>
PROGRAMACIÓN PARA INTERNET

                             Nombre: <input name="nombre" type="text" maxlength="20"
                             size="20" /><br />
                             Apellido: <input name="apellido" type="text" /><br />
                             Contraseña: <input name="contrasena" type="password"
                             /><br /><br />
                             Género:<br />
                             <input name="genero" type="radio" checked="checked"
                             value="masculino" />Masculino<br />
                             <input name="genero" type="radio" value="femenino"
                             />Femenino<br /><br />
                             Imagen: <input name="imagen" type="file" accept="image/gif"
                             />
                             </fieldset>




                                              Lic. Nancy Michelle Torres Villanueva   86
<fieldset> <legend>Intereses</legend>
                             <input name="intereses" type="checkbox"
PROGRAMACIÓN PARA INTERNET

                             checked="checked" />Deportes<br />
                             <input name="intereses" type="checkbox"
                             checked="checked" />Películas<br />
                             <input name="intereses" type="checkbox" />Viajes<br />
                             <input name="intereses" type="checkbox" />Arte<br />
                             <input name="intereses" type="checkbox" />Autos
                             </fieldset>
                             <input name="borrarform" type="reset" value="Borrar
                             formulario" />
                             <input name="enviarform" type="button" value="Enviar
                             formulario" />
                             <input name="email" type="hidden"
                             value="usuario@servidor.com" />
                             </form>



                                              Lic. Nancy Michelle Torres Villanueva   87
PROGRAMACIÓN PARA INTERNET




                             Lic. Nancy Michelle Torres Villanueva   88
PROGRAMACIÓN PARA INTERNET




                             Demuestra lo que aprendiste!!




                                 Lic. Nancy Michelle Torres Villanueva   89
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
Software
PROGRAMACIÓN PARA INTERNET




                             ●   Notepad++
                             ●   Gedit
                             ●   Bluefish
                             ●   Dreamweaver
                             ●   NVU




                                             Lic. Nancy Michelle Torres Villanueva   91
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
... 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
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
... 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
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
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
... 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
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
... 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
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
Comentarios
PROGRAMACIÓN PARA INTERNET




                             /* Esto es un comentario */




                                  Lic. Nancy Michelle Torres Villanueva   102
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
... 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
Modelo de cajas
PROGRAMACIÓN PARA INTERNET




                              Lic. Nancy Michelle Torres Villanueva   105
Color del texto
PROGRAMACIÓN PARA INTERNET




                             body { color:#666; }




                                        Lic. Nancy Michelle Torres Villanueva   106
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
... 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
... 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
... 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
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
... 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
... 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
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

Más contenido relacionado

La actualidad más candente

Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
Carlos Cubillos
 
Nombres
NombresNombres
Nombres
Jhony Jacm
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
GinoRomero13
 
Htlm y javascrip
Htlm y javascripHtlm y javascrip
Htlm y javascrip
juan jose
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
geralyfernandacabreraaldana
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Carlos Parrado Roa
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
Juan David Valderrama
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
SoloCaliRadical
 

La actualidad más candente (9)

Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Nombres
NombresNombres
Nombres
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Htlm y javascrip
Htlm y javascripHtlm y javascrip
Htlm y javascrip
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nicolas esguerra222
Colegio nicolas esguerra222Colegio nicolas esguerra222
Colegio nicolas esguerra222
 

Similar a XHTML y CSS

Introducción a xhtml
Introducción a xhtmlIntroducción a xhtml
Introducción a xhtml
Denisse C
 
Principios basicos del html
Principios basicos del htmlPrincipios basicos del html
Principios basicos del html
wenorro
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
camdia2rx
 
Presentación
PresentaciónPresentación
Presentación
Angelica Claro
 
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarraTics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
blogjuan2012
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
MaryCarmen Rivera
 
Introducción a la web
Introducción a la webIntroducción a la web
Introducción a la web
iConstruye
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
Dxniel Felipe
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
Dxniel Felipe
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
Dxniel Felipe
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
Dxniel Felipe
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
Dxniel Felipe
 
Colegio nacional nicolás esguerra trabajo nº1 (1)
Colegio nacional nicolás esguerra trabajo nº1 (1)Colegio nacional nicolás esguerra trabajo nº1 (1)
Colegio nacional nicolás esguerra trabajo nº1 (1)
cabj1975
 
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internet
lorenzosc1995
 
DESARROLLO DE APLICACIONES WEB.pdf
DESARROLLO DE APLICACIONES WEB.pdfDESARROLLO DE APLICACIONES WEB.pdf
DESARROLLO DE APLICACIONES WEB.pdf
AlexisMrquez5
 
Html
HtmlHtml
Entorno de Programacion
Entorno de ProgramacionEntorno de Programacion
Entorno de Programacion
Jose Hernandez Landa
 
XHTML
XHTMLXHTML
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internet
lorenzosc1995
 

Similar a XHTML y CSS (20)

Introducción a xhtml
Introducción a xhtmlIntroducción a xhtml
Introducción a xhtml
 
Principios basicos del html
Principios basicos del htmlPrincipios basicos del html
Principios basicos del html
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
Presentación
PresentaciónPresentación
Presentación
 
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarraTics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
Tics 4º eso bloque 5 publicacion y difusión de contenidos. ed donostiarra
 
Desarrolla aplicaciones-web
Desarrolla aplicaciones-webDesarrolla aplicaciones-web
Desarrolla aplicaciones-web
 
Introducción a la web
Introducción a la webIntroducción a la web
Introducción a la web
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
 
Introduccion a html
Introduccion a htmlIntroduccion a html
Introduccion a html
 
Colegio nacional nicolás esguerra trabajo nº1 (1)
Colegio nacional nicolás esguerra trabajo nº1 (1)Colegio nacional nicolás esguerra trabajo nº1 (1)
Colegio nacional nicolás esguerra trabajo nº1 (1)
 
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internet
 
DESARROLLO DE APLICACIONES WEB.pdf
DESARROLLO DE APLICACIONES WEB.pdfDESARROLLO DE APLICACIONES WEB.pdf
DESARROLLO DE APLICACIONES WEB.pdf
 
Html
HtmlHtml
Html
 
Entorno de Programacion
Entorno de ProgramacionEntorno de Programacion
Entorno de Programacion
 
XHTML
XHTMLXHTML
XHTML
 
Lenguaje de programción en internet
Lenguaje de programción en internetLenguaje de programción en internet
Lenguaje de programción en internet
 

Más de Michelle Torres

Prototipado rápido para web y mobile
Prototipado rápido para web y mobilePrototipado rápido para web y mobile
Prototipado rápido para web y mobile
Michelle Torres
 
Uso de Puerto paralelo en C
Uso de Puerto paralelo en CUso de Puerto paralelo en C
Uso de Puerto paralelo en C
Michelle Torres
 
Arreglos en PHP
Arreglos en PHPArreglos en PHP
Arreglos en PHP
Michelle Torres
 
Material de administración y auditoría de la función informática
Material de administración y auditoría de la función informáticaMaterial de administración y auditoría de la función informática
Material de administración y auditoría de la función informática
Michelle Torres
 
Cpu12 Reference Manual
Cpu12 Reference ManualCpu12 Reference Manual
Cpu12 Reference Manual
Michelle Torres
 
Taller de programación de sistemas. Descripción de práctica 2
Taller de programación de sistemas. Descripción de práctica 2Taller de programación de sistemas. Descripción de práctica 2
Taller de programación de sistemas. Descripción de práctica 2
Michelle Torres
 
Taller de programación de sistemas. Descripción de práctica 1
Taller de programación de sistemas. Descripción de práctica 1Taller de programación de sistemas. Descripción de práctica 1
Taller de programación de sistemas. Descripción de práctica 1
Michelle Torres
 
Modos de direccionamiento para el HC12 de motorola
Modos de direccionamiento para el HC12 de motorolaModos de direccionamiento para el HC12 de motorola
Modos de direccionamiento para el HC12 de motorola
Michelle Torres
 
Manejo de archivos en JAVA
Manejo de archivos en JAVAManejo de archivos en JAVA
Manejo de archivos en JAVA
Michelle Torres
 
Programación Orientada a Objetos en JAVA
Programación Orientada a Objetos en JAVAProgramación Orientada a Objetos en JAVA
Programación Orientada a Objetos en JAVA
Michelle Torres
 
Recordando Java desde Cero
Recordando Java desde CeroRecordando Java desde Cero
Recordando Java desde Cero
Michelle Torres
 
Rubrica (primera entrega)
Rubrica (primera entrega)Rubrica (primera entrega)
Rubrica (primera entrega)
Michelle Torres
 
Cv resumido conaic
Cv resumido conaicCv resumido conaic
Cv resumido conaic
Michelle Torres
 
Introducción a la programación en ambientes web
Introducción a la programación en ambientes webIntroducción a la programación en ambientes web
Introducción a la programación en ambientes web
Michelle Torres
 
Servidores web
Servidores webServidores web
Servidores web
Michelle Torres
 
My sql para principiantes
My sql para principiantesMy sql para principiantes
My sql para principiantes
Michelle Torres
 

Más de Michelle Torres (16)

Prototipado rápido para web y mobile
Prototipado rápido para web y mobilePrototipado rápido para web y mobile
Prototipado rápido para web y mobile
 
Uso de Puerto paralelo en C
Uso de Puerto paralelo en CUso de Puerto paralelo en C
Uso de Puerto paralelo en C
 
Arreglos en PHP
Arreglos en PHPArreglos en PHP
Arreglos en PHP
 
Material de administración y auditoría de la función informática
Material de administración y auditoría de la función informáticaMaterial de administración y auditoría de la función informática
Material de administración y auditoría de la función informática
 
Cpu12 Reference Manual
Cpu12 Reference ManualCpu12 Reference Manual
Cpu12 Reference Manual
 
Taller de programación de sistemas. Descripción de práctica 2
Taller de programación de sistemas. Descripción de práctica 2Taller de programación de sistemas. Descripción de práctica 2
Taller de programación de sistemas. Descripción de práctica 2
 
Taller de programación de sistemas. Descripción de práctica 1
Taller de programación de sistemas. Descripción de práctica 1Taller de programación de sistemas. Descripción de práctica 1
Taller de programación de sistemas. Descripción de práctica 1
 
Modos de direccionamiento para el HC12 de motorola
Modos de direccionamiento para el HC12 de motorolaModos de direccionamiento para el HC12 de motorola
Modos de direccionamiento para el HC12 de motorola
 
Manejo de archivos en JAVA
Manejo de archivos en JAVAManejo de archivos en JAVA
Manejo de archivos en JAVA
 
Programación Orientada a Objetos en JAVA
Programación Orientada a Objetos en JAVAProgramación Orientada a Objetos en JAVA
Programación Orientada a Objetos en JAVA
 
Recordando Java desde Cero
Recordando Java desde CeroRecordando Java desde Cero
Recordando Java desde Cero
 
Rubrica (primera entrega)
Rubrica (primera entrega)Rubrica (primera entrega)
Rubrica (primera entrega)
 
Cv resumido conaic
Cv resumido conaicCv resumido conaic
Cv resumido conaic
 
Introducción a la programación en ambientes web
Introducción a la programación en ambientes webIntroducción a la programación en ambientes web
Introducción a la programación en ambientes web
 
Servidores web
Servidores webServidores web
Servidores web
 
My sql para principiantes
My sql para principiantesMy sql para principiantes
My sql para principiantes
 

Último

TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
KukiiSanchez
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
larapalaciosmonzon28
 
Second Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro TapiaSecond Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro Tapia
al050121024
 
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
codesiret
 
Inteligencia Artificial
Inteligencia ArtificialInteligencia Artificial
Inteligencia Artificial
YashiraPaye
 
Manual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputosManual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputos
cbtechchihuahua
 
Modo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdfModo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdf
ranierglez
 
Programming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdfProgramming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdf
Manuel Diaz
 
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdfPLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
70244530
 
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDADEXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
AngelCristhianMB
 
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIAMONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
leia ereni
 
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...
AMADO SALVADOR
 
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdfPresentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
giampierdiaz5
 
La Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docxLa Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docx
luiscohailatenazoa0
 
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANOREVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
gisellearanguren1
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
YaniEscobar2
 
El uso de las TIC por Cecilia Pozos S..pptx
El uso de las TIC  por Cecilia Pozos S..pptxEl uso de las TIC  por Cecilia Pozos S..pptx
El uso de las TIC por Cecilia Pozos S..pptx
cecypozos703
 
INFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIAINFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIA
renzocruz180310
 
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
AbrahamCastillo42
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
Paola De la Torre
 

Último (20)

TIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololoTIC en educacion.rtf.docxlolololololololo
TIC en educacion.rtf.docxlolololololololo
 
Presentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre bloggerPresentación de Tic en educación y sobre blogger
Presentación de Tic en educación y sobre blogger
 
Second Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro TapiaSecond Life, informe de actividad del maestro Tapia
Second Life, informe de actividad del maestro Tapia
 
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
Infografia TCP/IP (Transmission Control Protocol/Internet Protocol)
 
Inteligencia Artificial
Inteligencia ArtificialInteligencia Artificial
Inteligencia Artificial
 
Manual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputosManual de Soporte y mantenimiento de equipo de cómputos
Manual de Soporte y mantenimiento de equipo de cómputos
 
Modo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdfModo test refrigeradores y codigos de errores 2018 V2.pdf
Modo test refrigeradores y codigos de errores 2018 V2.pdf
 
Programming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdfProgramming & Artificial Intelligence ebook.pdf
Programming & Artificial Intelligence ebook.pdf
 
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdfPLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
PLAN DE MANTENMIENTO preventivo de un equipo de computo.pdf
 
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDADEXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
EXAMEN DE TOPOGRAFIA RESUELTO-2017 CURSO DE UNIVERSIDAD
 
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIAMONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
MONOGRAFIA memoria RAM.docx trabajo DE TECNOLOGIA
 
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...
Catalogo general tarifas 2024 Vaillant. Amado Salvador Distribuidor Oficial e...
 
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdfPresentación Seguridad Digital Profesional Azul Oscuro (1).pdf
Presentación Seguridad Digital Profesional Azul Oscuro (1).pdf
 
La Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docxLa Inteligencia Artificial en la actualidad.docx
La Inteligencia Artificial en la actualidad.docx
 
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANOREVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
REVISTA TECNOLOGICA PARA EL DESARROLLO HUMANO
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
 
El uso de las TIC por Cecilia Pozos S..pptx
El uso de las TIC  por Cecilia Pozos S..pptxEl uso de las TIC  por Cecilia Pozos S..pptx
El uso de las TIC por Cecilia Pozos S..pptx
 
INFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIAINFORMATICA Y TECNOLOGIA
INFORMATICA Y TECNOLOGIA
 
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
Todo sobre la tarjeta de video (Bienvenidos a mi blog personal)
 
Flows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos FeaturesFlows: Mejores Prácticas y Nuevos Features
Flows: Mejores Prácticas y Nuevos Features
 

XHTML y CSS

  • 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: &acute; Acento ´ &ntilde; eñe ñ &quot; Comillas Dobles " &deg: Grados ° &aacute; a con acento á &eacute; e con acento é &nbsp; 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
  • 39. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 39
  • 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
  • 55. <table width=”80%” align=”center”> <caption>Directorio telefonico</caption> <tr> PROGRAMACIÓN PARA INTERNET <th colspan=”3”>Directorio telefonico</th> </tr> <tr align=”center”> <td width=”40%”> Nombre </td> <td width=”30%”> Teléfono </td> <td width=”30%”> E-Mail </td> </tr> <tr> <td> Jos&eacute; Rodr&iacute;guez </td> <td> 223454 </td> Lic. Nancy Michelle Torres Villanueva 55
  • 56. <td>jose@prueba.com.bo</td> </tr> PROGRAMACIÓN PARA INTERNET <tr> <td> Carolina Nu&ntilde;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
  • 69. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 69
  • 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
  • 84. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 84
  • 85. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 85
  • 86. <form action="ejemplo.php" enctype="multipart/form-data"> <fieldset><legend>Información personal</legend> PROGRAMACIÓN PARA INTERNET Nombre: <input name="nombre" type="text" maxlength="20" size="20" /><br /> Apellido: <input name="apellido" type="text" /><br /> Contraseña: <input name="contrasena" type="password" /><br /><br /> Género:<br /> <input name="genero" type="radio" checked="checked" value="masculino" />Masculino<br /> <input name="genero" type="radio" value="femenino" />Femenino<br /><br /> Imagen: <input name="imagen" type="file" accept="image/gif" /> </fieldset> Lic. Nancy Michelle Torres Villanueva 86
  • 87. <fieldset> <legend>Intereses</legend> <input name="intereses" type="checkbox" PROGRAMACIÓN PARA INTERNET checked="checked" />Deportes<br /> <input name="intereses" type="checkbox" checked="checked" />Películas<br /> <input name="intereses" type="checkbox" />Viajes<br /> <input name="intereses" type="checkbox" />Arte<br /> <input name="intereses" type="checkbox" />Autos </fieldset> <input name="borrarform" type="reset" value="Borrar formulario" /> <input name="enviarform" type="button" value="Enviar formulario" /> <input name="email" type="hidden" value="usuario@servidor.com" /> </form> Lic. Nancy Michelle Torres Villanueva 87
  • 88. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 88
  • 89. PROGRAMACIÓN PARA INTERNET Demuestra lo que aprendiste!! Lic. Nancy Michelle Torres Villanueva 89
  • 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
  • 91. Software PROGRAMACIÓN PARA INTERNET ● Notepad++ ● Gedit ● Bluefish ● Dreamweaver ● NVU Lic. Nancy Michelle Torres Villanueva 91
  • 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
  • 102. Comentarios PROGRAMACIÓN PARA INTERNET /* Esto es un comentario */ Lic. Nancy Michelle Torres Villanueva 102
  • 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
  • 105. Modelo de cajas PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 105
  • 106. Color del texto PROGRAMACIÓN PARA INTERNET body { color:#666; } Lic. Nancy Michelle Torres Villanueva 106
  • 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