You are on page 1of 79

2 HTML, XML Y CSS.
Conoce y aplica las
herramientas para
construir páginas
web, considerando la
interfaz gráfica de
usuario, un lenguaje
de marcado y de
presentación.

2 HTML, XML Y CSS.
2.1 Introducción.
2.2 Estructura global de un documento Web.
2.3 Elementos básicos: texto, vínculos, listas, tablas,
objetos, imágenes y aplicaciones.
2.4 Formularios.
2.5 Lenguajes de presentación en documentos Web.
2.6 Selectores.
2.7 Modelo de caja.

ACTIVIDADES Actividad Examen teórico Proyecto Integrador Prácticas HTML: de los elementos básicos del lenguaje de marcas. tales como: texto. listas. Practicas XML Proyecto individual Valor 20 % 20% 15% 15% 5% . objetos y formulario. vínculos.2 LENGUAJE DE MARCADO. tablas.

La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014 . HTML 4 también tiene grandes pasos hacia la internacionalización de los documentos. y una variante XHTML conocida como sintaxis XHTML5 que deberá servirse con sintaxis XML.1 INTRODUCCIÓN. con el objetivo de hacer la Web realmente todo el mundo.0 [RFC1866]). HTML 4 es compatible con más de opciones multimedia. HTML : (“Hiper Text Mark Up Language”) HTML es el lenguaje de marcado estándar utilizado para crear páginas web y sus elementos forman los bloques de construcción de todos los sitios web. multimedia y funciones de hipervínculo de las versiones anteriores de HTML (HTML 3.2. conocida como HTML5. lenguajes de script. Además del texto. mejores instalaciones de impresión y documentos que sean más accesibles a los usuarios con discapacidad.2 [HTML32] y HTML 2. HTML (text/html). HTML4 : Es el lenguaje de publicación de la World Wide Web. hojas de estilo. HTML5 : Especifica dos variantes de sintaxis para HTML: una «clásica».

2.. párrafos..texto normal <B> texto en negrita </B> resto del texto.1 INTRODUCCIÓN.. Un ejemplo podría ser resaltar un texto en negrita.. .. La etiqueta presenta frecuentemente dos partes: Una apertura de forma general Un cierre de tipo . El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta.. etc y son utilizadas para dar un tratamiento diferente al texto que se encuentre entre las marcas.. para ello se emplea la marca <B> y quedaría de la siguiente forma: . Marcas Las marcas delimitan elementos de un documento como cabeceras..texto normal <marca> texto afectado por la marca </marca> resto del texto.

Atributos de las marcas Algunas marcas pueden admitir atributos.1 INTRODUCCIÓN.2. pudiendo tener cada uno de estos atributos un valor.html"> <img src="imagenes/foto_01.jpg" width="600" height="337" /> . <marca atributo1=numerico atributo2="alfanumetrico"> Ejemplo: <table width="50" height="70" border="20"> </table> <a href="/home/default. Este valor ira entre comillas (") si dicho valor es alfanumérico.

html"> <img src="imagenes/foto_01.jpg" width="600" height="337" /> .2. Atributos de las marcas Algunas marcas pueden admitir atributos. Este valor ira entre comillas (") si dicho valor es alfanumérico. pudiendo tener cada uno de estos atributos un valor.1 INTRODUCCIÓN. <marca atributo1=numerico atributo2="alfanumetrico"> Ejemplo: <table width="50" height="70" border="20"> </table> <a href="/home/default.

2.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO WEB. .

.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO WEB.2.

videos etc.ico" /> <link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.) </p>        </article>     </section>     <aside>        <h3>Titulo de contenido</h3>            <p>contenido</p>     </aside>     <footer>         Creado por mi el 2011     </footer> </body> </html> .css" /> <link rel="shortcut icon" href="/favicon.<link rel="stylesheet" href="estilos.rss" /> </head>  <body>     <header>        <h1>Mi sitio web</h1>        <p>Mi sitio web creado en html5</p>     </header>     <section>        <article>            <h2>Titilo de contenido<h2>            <p> Contenido (ademas de imagenes. citas.

) </p>        </article>     </section>     <aside>        <h3>Titulo de contenido</h3>            <p>contenido</p>     </aside>     <footer>         Creado por mi el 2011     </footer> </body> </html> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3. citas.css" /> <link rel="shortcut icon" href="/favicon.01//EN" "http://www.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO WEB.<!DOCTYPE html> <html lang="es"> <head> <title>Titulo de la web</title> <meta charset="utf-8" /> <link rel="stylesheet" href="estilos. videos etc.dtd"> <HTML> <HEAD> <TITLE>Mi primer documento HTML</TITLE> </HEAD> <BODY> <P>¡Hola mundo! </p> </BODY> </HTML> .ico" /> <link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" /> </head>  <body>     <header>        <h1>Mi sitio web</h1>        <p>Mi sitio web creado en html5</p>     </header>     <section>        <article>            <h2>Titilo de contenido<h2>            <p> Contenido (ademas de imagenes.org/TR/html4/strict.

<HTML> <HEAD> <TITLE> Bienvenido a nuestra guía rápida </TITLE> </HEAD> Cuerpo del documento …</HTML> .2 ESTRUCTURA GLOBAL DE UN DOCUMENTO WEB. Cabecera La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>. Dentro de la cabecera podemos destacar el título que indica el nombre del documento <TITLE> </TITLE>.2.

url=pippo.2.css"> <script src="js/jquery.js"></script> </head> <body> </body> </html> .htm> <link rel="stylesheet" href="css/style.realización páginas web"> name="descripcion" content="Mi primera portada "> name="GENERATOR" content="BOC DE NOTAS Win95"> name="author" content="Nombre Apellidos"> HTTP-EQUIV="Refresh" content="5".0//EN"> <html> <head> <title> MI PRIMERA PAGINA </title> <META <META <META <META <META name="keywords" content="HTML.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO WEB <!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.

racotecnic.. .. Esta es la estructura mínima que debe poseer todo documento HTML: <BODY> Documento.com/tutorials/2011/HTML5/ Cuerpo El resto del documento residirá entre las marcas <BODY> y </BODY>.2 ESTRUCTURA GLOBAL DE UN DOCUMENTO WEB. http://www. </BODY></HTLM> A continuación describiremos algunos elementos que pueden aparecer dentro del cuerpo.2.

Encabezado Los encabezados se emplean para dividir los documentos en secciones o mas concretamente para marcar los títulos de esas secciones. donde # puede ser un número cualquiera entre 1 y 6. <H1>Tamaño mayor</H1> Tamaño menor <H6>Tamaño menor</H6> Tamaño mayor .2 ESTRUCTURA GLOBAL DE UN DOCUMENTO WEB. Las marcas son del tipo <H#> título </H#>.2.

DTD HTML 4.0//EN"> DOCTYPE: Proporciona información al servidor de web anfitrión de la página entregando los datos necesarios para la Comunicación entre el navegador y el servidor.2.0: La versión de HTML soportada es la 4. IETF: El tipo de HTML público está gestionado por la Internet Engineering Task Force.3 TIPOS DE DATOS BÁSICOS. . (no es Obligatorio) Su forma estándar es la siguiente: HTML PUBLIC: El documento es público.0. EN: El idioma del documento es el inglés. <!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.

REFRESH: Refrescar la página cada cierto tiempo. DESCRIPCION: Título que aparecerá tras la búsqueda.3 TIPOS DE DATOS BÁSICOS. AUTHOR: Autor de la página.2. META: Son cadenas de códigos que son las primeras que leen Los buscadores. KEYWORDS: Las palabras clave son los términos que. de manera resumida describen el contenido de una página web. NOINDEX: Es cuando se desea que una página NO sea Indicizada en los motores de búsqueda. GENERATOR: Nombre del editor que se ha generado el Documento. .

<PRE> (Texto preformateado). size. <HR> (Línea Horizontal. atributos: noshade. sus atributos son left. <BLOCKQUOTE> (Párrafos Tabulados). right. <CENTER> (Centrado de bloques) . width. align). center). <BR> (Salto de línea).LENGUAJE HTML SEPARADORES DE BLOQUES <P> (Separador de párrafos.

atributoN > El atributo BGCOLOR Este atributo permite escoger un color para el fondo de la página <BODY BGCOLORS="#rrggbb"> donde "rr" "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturación de los colores rojo. el color de los caracteres del texto..LENGUAJE HTML Fondos y colores de texto Un cierto número de atributos de la marca BODY permiten controlar el color del fondo de la ventana del browser.gif“> . <BODY BACKGROUND="fichero_gráfico. El atributo BACKGROUND Este atributo especifica una imagen residente en el servidor la cual se utilizará como fondo de página. y finalmente el color de los enlaces: < BODY atributo1 atributo2 atributo3 . verde y azul..

VLINK y ALINK Controlan el color de los enlaces: LINK color del enlace que aún no ha sido visitado. es decir. todo texto que no especifique un enlace. <BODY TEXT="#rrggbb"> Los atributos LINK.<BODY LINK="#rrggbb"> ALINK color muy fugaz que aparece cuando se hace clic sobre el enlace <BODY ALINK="#rrggbb"> VLINK es el color de un enlace que ya ha sido visitado <BODY VLINK="#rrggbb"> .LENGUAJE HTML Fondos y colores de texto El atributo TEXT Permite controlar el color del texto estándar.

.0//EN"> <html> <head> <title> MI PRIMERA PAGINA </title> <META name="keywords" content="HTML.htm> </head> <body bgcolor="#AEAEFF"> Tipo de letra <B>negrita</B>. <font> .. realización páginas web"> <META name="descripcion" content="Mi primera portada "> <META name="GENERATOR" content="BOC DE NOTAS Win95"> <META name="author" content="Nombre Apellidos"> <META HTTP-EQUIV="Refresh" content="5". letra <I>cursiva</I> y letra <TT>courier</TT>.3 TIPOS DE DATOS BÁSICOS. <CENTER>Este texto está centrado</CENTER> <P Align="left">Este texto está alineado a la izquierda</P> <P Align="center">Este texto está centrado</P> <P Align="right">Este texto está alineado a la derecha</P> <font face="Arial“ size=3 color=#008000> texto.2. <!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.url=pippo.

<h1>Cabecera <h2>Cabecera <h3>Cabecera <h4>Cabecera <h5>Cabecera <h6>Cabecera tipo tipo tipo tipo tipo tipo 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6> Internet<img src="imagenes/internet1.3 TIPOS DE DATOS BÁSICOS.2.jpg" width="98" height="122"> <p> separador</p> <ol> <li>Fichero de imagen</li> <li>Fichero de sonido</li> <li>Fichero de video</li> <ol> </body> </html> .

Aquí va un ejemplo:  Este palabra la vamos a poner en <b>negrita</b> y esta otra <strong>también</strong> Este palabra la vamos a poner en negrita y esta otra también . LISTAS.  La primera es la etiqueta <b> y la otra es la etiqueta <strong>. OBJETOS. o sea.  Negrita Existen dos etiquetas que harán que nuestro texto se convierta en negrita. IMÁGENES Y APLICACIONES. son una serie de etiquetas que escribimos en html rodeando la palabra o el texto y que transforman ese texto en el formato que nosotros le hemos querido dar. el formato del texto.2. VÍNCULOS.5 ELEMENTOS BÁSICOS: TEXTO. Formato Texto El formateo del texto. Puedes usar la que prefieras. 1. TABLAS. La utilización de cualquiera de ellas es indiferente.

2.5 ELEMENTOS BÁSICOS: TEXTO. es indiferente el uso de una u otra. IMÁGENES Y APLICACIONES. También podemos utilizar la etiqueta <em>. OBJETOS. Texto Cursiva: Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>). LISTAS. VÍNCULOS. Aquí os dejo un ejemplo: Este palabra la vamos a poner en <i>cursiva</i> y esta otra <em>también</em> Este palabra la vamos a poner en cursiva y esta otra también . Como en el caso de la negrita. TABLAS.

VÍNCULOS. Texto Subrayado: Si queremos que la palabra o el texto quede subrayado. OBJETOS. deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. Así subrayaríamos una frase importante: <u>Así subrayaríamos una frase importante</u> Así subrayaríamos una frase importante . </u>. TABLAS.5 ELEMENTOS BÁSICOS: TEXTO. LISTAS. IMÁGENES Y APLICACIONES.2. O sea.

2. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. IMÁGENES Y APLICACIONES. LISTAS. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan. VÍNCULOS. . OBJETOS.5 ELEMENTOS BÁSICOS: TEXTO. TABLAS. Texto Cabeceras <h1>Cabecera <h2>Cabecera <h3>Cabecera <h4>Cabecera <h5>Cabecera <h6>Cabecera tipo tipo tipo tipo tipo tipo 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6> : Atributo face Define el tipo de letra.

2. tipo de letra y tamaño Atributo face Define el tipo de letra. IMÁGENES Y APLICACIONES.arial. Color.5 ELEMENTOS BÁSICOS: TEXTO. LISTAS. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan.verdana" .verdana">Este texto tiene otra tipografía</font> face="Comic Sans MS. TABLA OBJETOS. <font face="Comic Sans MS.arial. Este atributo es interpretado por versiones de Netscape a partir de la 3 y de MSIE 3 o superiores. VÍNCULOS.

Color.2.5 ELEMENTOS BÁSICOS: TEXTO. <font size=4>Este texto es tamaño 4</font> <font size=12>Este texto es tamaño 12</font> . LISTAS. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande. TABLA OBJETOS. tipo de letra y tamaño Atributo size Define el tamaño de la letra. existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Este tamaño puede ser absoluto o relativo. IMÁGENES Y APLICACIONES. VÍNCULOS.Si hablamos en términos absolutos.

OBJETOS. VÍNCULOS. tipo de letra y tamaño Atributo color El color del texto puede ser definido mediante el atributo color. verde y azul al color en cuestion.2. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. <font color="red">Este texto está en rojo</font> <font color="#FF0000"> Este texto está en rojo </font> .5 ELEMENTOS BÁSICOS: TEXTO. Color. LISTAS. TABLAS. Cada una de estas partes representa la contribución del rojo. IMÁGENES Y APLICACIONES.

El texto del párrafo lo puedes alinear utilizando la etiqueta align utilizando los parámetros “center” (para alinearlo al centro).5 ELEMENTOS BÁSICOS: TEXTO. Formato Parrafos Para indicarle al navegador que queremos poner ese texto en un párrafo. TABLA OBJETOS. “right” (para alinearlo a la derecha). Un ejemplo de esta etiqueta con sus respectivos parámetros es el siguiente: <p align="center">Este texto se alineará al centro</p> <p align="right">Este texto se alineará a la derecha</p> <p align="left">Este texto se alineará a la izquierda</p> . debemos escribirlo entre las etiquetas <p> y su cierre </p>.2. VÍNCULOS. Así el texto quedará dentro de un párrafo. “left” (para alinearlo a la izquierda) y “justify” (para justificar el texto). 2. IMÁGENES Y APLICACIONES. LISTAS. separado por un espacio en blanco por encima y uno por abajo.

TABLA OBJETOS. Son las etiquetas <br> y <br/> ambas son interpretadas igual por el navegador. LISTAS. IMÁGENES Y APLICACIONES. <p > Este texto estará en la primera fila<br/> Este texto estará en el centro <br/> Este texto estara a lo ultimo</p> .5 ELEMENTOS BÁSICOS: TEXTO. Párrafos saltos de línea Existen dos etiquetas para indicar que queremos hacer un salto de línea normal. VÍNCULOS.2. Esta etiqueta no hace falta abrirla y cerrarla. sólo con escribirla el navegador ya la interpreta.

vínculos.html) Indicaciones: Elaborar un documento HTML en que se incluya:  Encabezados (h1 – h7)  Texto tamaño (1-4)  Estilos de texto (normal. cursiva. negrita. derecha e izquierda) Extra: Agregar al menos tres párrafos de texto con tipos distintos de estilo. . tales como: texto. alineación etc.ACTIVIDAD 1: FORMATO Elementos básicos del lenguaje de marcas. subrayado. Practica: Formato (practica_1_1_formato_texto. colores. superíndice)  Párrafos alineados ( Justificado. listas. tipos de letra. subíndice. Centro. tablas.

EJEMPLO .ACTIVIDAD 1: FORMATO.

EJEMPLO .ACTIVIDAD 1: FORMATO.

LISTAS. IMÁGENES Y APLICACIONES. las celdas que queremos. 2. pero… ¿podemos predefinir  características de esa tabla? Por supuesto que sí. Ya hemos dicho que esta etiqueta nos indica que empieza una tabla.2. TABLAS. Pero vamos a empezar explicándote la etiqueta <table>. Una tabla admite muchos parámetros. Entre esas dos etiquetas definiremos la tabla.5 ELEMENTOS BÁSICOS: TEXTO. VÍNCULOS. las columnas y las características de cada uno de estos parámetros. . Nosotros vamos a explicarte los principales. OBJETOS. Tablas Una tabla en html viene marcada por las etiquetas <table> </table>.

a una tabla también lo podemos definir el fondo de la misma. Recuerda que si la imagen es más pequeña que la tabla.5 ELEMENTOS BÁSICOS: TEXTO. IMÁGENES Y APLICACIONES. que nos pondrá un color de fondo. LISTAS.2. ésta se repetirá tanto a lo ancho como a lo largo. OBJETOS. La tabla: <table> Como ya ocurre con la etiqueta body. <table width="100%" border="1" bordercolor="#0000FF" cellspacing="0" cellpadding="0"> <tr> <td>holaa</td> <td>holaa2</td> </tr> </table> .  o "background" para poner una imagen de fondo. Esto lo podemos conseguir con el parámetro "bgcolor". VÍNCULOS. TABLAS.

Por supuesto a las filas también les podemos definir el color de fondo ("bgcolor") y el color del borde ("bordercolor"). El contenido de las columnas que están dentro de la fila lo podemos alínear tanto horizontal como verticalmente. . VÍNCULOS. LISTAS TABLAS. a la izquierda ("left"). en el centro ("middle") o debajo ("bottom").2. OBJETOS. Para alinearlo verticalmente utilizaremos el atributo "valign" para poder alinearlo arriba de la celda ("top").5 ELEMENTOS BÁSICOS: TEXTO. Con este atributo podremos alinear el contenido de las celdas en el centro ("center"). Tablas Las filas: <tr> Como hemos visto en el encabezado las filas se escriben gracias a las etiquetas <tr> con su correspondiente cierre </tr>. IMÁGENES Y APLICACIONES. Para alinearlo horizontalmente utilizaremos el atributo "align". a la derecha ("right") o justificado ("justify").

2. Al igual que en las filas. la indicación sería la siguiente: <td rowspan= "2"></td>. VÍNCULOS.5 ELEMENTOS BÁSICOS: TEXTO. Tablas Las celdas <td> Las celdas que van dentro de cada fila las tenemos que escribirlas con la etiqueta <td> y su correspondiente cierre </td>. para agrupar en una celda 2 columnas tenemos que escribir: <td colspan="2"></td>. LISTAS. OBJETOS. Por ejemplo. Y para agrupar dos filas. TABLAS. Para agrupar celdas utilizaríamos el atributo "colspan" y para agrupar celdas el atributo "rowspan". IMÁGENES Y APLICACIONES. . en las celdas podemos definir el la alineación del contenido que está dentro con los atributos "valign" y "align". Las celdas poseen unos atributos que nos ayudan a poder agrupar tantas celdas o tantas columnas como indiquemos en él.

2.5 ELEMENTOS BÁSICOS: TEXTO. Tablas . TABLAS. OBJETOS. IMÁGENES Y APLICACIONES. VÍNCULOS. LISTAS.

ACTIVIDAD 2: TABLAS Y LISTAS – EJEMPLO <table border="1px"> <tr> <td>Nombre</td> <td>Apellido</td> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> <table border="3px" bordercolor="#0099FF"> <tr> <td>Borde</td> <td>3 pixels</td> </tr> </table> .

ACTIVIDAD 2: TABLAS Y LISTAS – EJEMPLO <table border="1px" bordercolor="#333333" cellpadding="20px"> <tr> <th bgcolor="#CCCCCC">Nombre</th> <th bgcolor="#CCCCCC">Apellido</th> </tr> <tr> <td>Pedro</td> <td>Garcia</td> </tr> </table> <table border="1px" cellspacing="15px" bgcolor="#3399FF"> <tr> <th bordercolor="#0033FF" bgcolor="#ffffff">Nombre</th> <th bordercolor="#0033FF" bgcolor="#ffffff">Apellido</th> </tr> <tr> <td bgcolor="#CCCCCC">Pedro</td> <td bgcolor="#CCCCCC">Garcia</td> </tr> </table> .

ACTIVIDAD 2: TABLAS Y LISTAS – EJEMPLO .

ACTIVIDAD 2: TABLAS Y LISTAS – EJEMPLO .

tales como: texto. vínculos. Practica: Tablas y listas (practica_1_2_tablas_y_listas. tablas. colores de fuentes y tipos de letra distintos.html) Indicaciones: Elaborar un documento HTML en que se incluya:  Distintos formatos de tablas  Distintos formatos de listas Extra: Agregar 2 tablas con formato de relleno.ACTIVIDAD 2: TABLAS Y LISTAS Elementos básicos del lenguaje de marcas. listas. Ejemplos .

lo haremos dentro de la etiqueta <li> y su cierre. <ul> <li type="circle">Esto es un tipo de punto. TABLAS.</li> <li type="square">Este es otro. IMÁGENES Y APLICACIONES. Listas Listas no ordenadas: <ul>Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>.</li> <li type="disc">Y este es otro diferente. LISTAS. VÍNCULOS.5 ELEMENTOS BÁSICOS: TEXTO.</li> </ul> .2. Cada punto que queramos añadir a la lista. 3. OBJETOS.

Los siguientes puntos que escribamos se generarán automáticamente por orden. Pero al ser listas ordenadas los símbolos serán números y éstos se irán generando automáticamente por orden. <ol> <li value="20">Este será el número 20. OBJETOS. Listas ordenadas: <ol> Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>.2. IMÁGENES Y APLICACIONES. En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. partiendo de ese número. conforme escribamos nuevos puntos. </li> </ol> . LISTAS. </li> <li> Este será el 22. </li> <li>Este será el 21. Y así sucesivamente. VÍNCULOS.5 ELEMENTOS BÁSICOS: TEXTO. Lo conseguiremos gracias al atributo “value”. TABLAS.

ACTIVIDAD 2: TABLAS Y LISTAS – EJEMPLO .

ACTIVIDAD 2: TABLAS Y LISTAS – EJEMPLO .

Objetos Insertar objetos: <object> y <param> La etiqueta <object> permite insertar cualquier tipo de documentos (no solamente de texto) dentro de un documento html. como muestra el siguiente ejemplo. VÍNCULOS. OBJETOS. IMÁGENES Y APLICACIONES. 4. Algunos tipos de documentos necesitan información adicional que se proporciona mediante la etiqueta <param>. LISTAS TABLAS.2. el navegador suele necesitar plug-ins. .5 ELEMENTOS BÁSICOS: TEXTO. Para poder mostrar esos archivos. Ejemplos de inserción de objetos Insertar una página web Se puede insertar una página web en una página web mediante la etiqueta <object>.

OBJETOS. IMÁGENES Y APLICACIONES. VÍNCULOS.html"> </iframe> .5 ELEMENTOS BÁSICOS: TEXTO. 4.2. LISTAS TABLAS. Objetos <iframe src="ejemplo_iframe.

html"   style="width: 400px.2. height:200px." >   ERROR (no puede mostrarse el objeto) </object> Deberá crear un archivo de html llamado objeto_pagina. OBJETOS. TABLAS. VÍNCULOS. LISTAS. <object type="text/html"   data=“objeto_pagina.5 ELEMENTOS BÁSICOS: TEXTO. como muestra el siguiente ejemplo.html para mandarlo llamar . 4. IMÁGENES Y APLICACIONES. Objetos Ejemplos de inserción de objetos Insertar una página web Se puede insertar una página web en una página web mediante la etiqueta <object>.

s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&amp.023188. s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&amp.output=embed"   style="width: 425px." >   ERROR (no puede mostrarse el objeto) </object> <iframe width="425" height="350" src="http://maps.-0. hl=es&amp.iwloc=A&amp.es/maps?f=q&amp.iwloc=A&amp. ll=39. VÍNCULOS.477148.q=ies+abastos&amp.cid=11271517402525668942&amp.google. ie=UTF8&amp.382204&amp. IMÁGENES Y APLICACIONES.0.036478&amp.source=s_q&amp.output=embed"> </iframe> . ll=39.spn=0. OBJETOS.geocode=&amp. Objetos Ejemplos de inserción de objetos Insertar un mapa de google <object type="text/html"   data="http://maps.0.382204&amp.036478&amp. height:350px.q=ies+abastos&amp.cid=11271517402525668942&amp.source=s_q&amp. hl=es&amp. z=14&amp.geocode=&amp.spn=0. TABLAS. ie=UTF8&amp.google.5 ELEMENTOS BÁSICOS: TEXTO. z=14&amp.es/maps? f=q&amp.023188. LISTAS.-0.477148. 4.2.

es simplemente ejemplo.2. Para insertar otro archivo PDF habría que indicar la URI del archivo mediante el atributo data (en el ejemplo. OBJETOS. 4. LISTAS." > ERROR (no puede mostrarse el objeto) </object> . como muestra el siguiente ejemplo. VÍNCULOS.pdf" style="width: 400px.5 ELEMENTOS BÁSICOS: TEXTO. <object type="application/pdf" data="pdf/programacion_web. TABLAS.pdf). height: 550px. Objetos Insertar un archivo PDF Se puede insertar un archivo PDF en cualquier página web. IMÁGENES Y APLICACIONES.

TABLAS. VÍNCULOS.youtube. Objetos Insertar un vídeo de YouTube Los vídeos de YouTube están en formato Flash. <iframe class="youtube-player" type="text/html" width="340" height="200" src="http://www. IMÁGENES Y APLICACIONES. OBJETOS. como muestra el siguiente ejemplo. el código del vídeo es vZV-t3KzTpw).5 ELEMENTOS BÁSICOS: TEXTO. Para insertar otro vídeo habría que sustituir el código del vídeo en el atributo data (en el ejemplo. 4. LISTAS. por lo que se pueden insertar en una página web mediante la etiqueta <object>.com/embed/ikp9TNCGNDU" frameborder="0"></iframe> .2.

ACTIVIDAD 3: OBJETOS Elementos básicos del lenguaje de marcas.html) Indicaciones: Elaborar un documento HTML en que se incluya los siguientes objetos: 1. Embeber una pagina con Iframe. Embeber un archivo pdf 4. Practica: Tablas y listas (practica_1_3_objetos. 2. Mapa de google con Iframe y objet 3. tablas. listas. Embeber un video de YouTube Extra: Agregar 2 objetos más. Ejemplos Reproductor de audio Reproductor de video ( diferente a YouTube) . vínculos. tales como: texto.

ACTIVIDAD 3: OBJETOS .

pueden ir los valores: TOP . 6. LISTAS TABLAS. Imágenes Atributos de IMG Los atributos de la imagen pueden ser los siguientes: ALT="Texto que aparece al situar el cursor sobre la imagen“ También muestra este mismo texto en caso de que el navegador no cargue la imagen. HEIGTH=100: Indican la anchura y altura de la imagen en píxels. IMÁGENES Y APLICACIONES. ALIGN= Nos indica la posición de la imagen respecto del texto. Después del signo igual. a la imagen. En este caso de 2 píxels. LEFT y RIGHT . a modo de marco. MIDDLE. VÍNCULOS. WIDTH=80. BOTTOM. OBJETOS. en este caso 80x100 píxels.5 ELEMENTOS BÁSICOS: TEXTO.2. . BORDER=2 Añade un borde.

LISTAS.2. OBJETOS.5 ELEMENTOS BÁSICOS: TEXTO. "rgb(123. por ejemplo.123. 5. IMÁGENES Y APLICACIONES. TABLAS. "#123456" (en notación hexadecimal). Los valores de esta propiedad son los valores de color normales. .123)" (en notación RGB) o "yellow" (por nombre del color). VÍNCULOS. Imágenes Anchura del borde [border-width] Color del borde [border-color] La propiedad border-color define el color del borde.

Todos los ejemplos se muestran con el valor del color a "oro" y el valor de la anchura a "thick".jpg" width="259" height="194" border="8" style="border-color:#900.5 ELEMENTOS BÁSICOS: TEXTO. en otros colores y grosores <img src="imagenes/paisaje4. border-style:dashed" /> . IMÁGENES Y APLICACIONES.2. pero se pueden mostrar.5. Más abajo se muestran 8 estilos de borde según los interpreta Internet Explorer 5. OBJETOS. por supuesto. TABLAS. 5. Imágenes Estilo de borde [border-style] Se puede elegir entre diferentes estilos de borde. LISTAS. VÍNCULOS.

VÍNCULOS.2. border-style:dashed.jpg" width="259" height="194" border="8" vspace="10" hspace="10" alt="Cascada" style="border-color:#9C0.jpg"></div> . IMÁGENES Y APLICACIONES.jpg" width="259" height="194" border="8" aling="bottom" vspace="10" hspace="10" alt="la playa" /> <br /> <img src="paisaje2.5 ELEMENTOS BÁSICOS: TEXTO. TABLAS. Imágenes <img src="paisaje4. OBJETOS. aling:middle" /> <br /> <img src="paisaje1. borderstyle:groove" /> <div align="center"><img src="paisaje4. LISTAS.jpg" width="489" height="322" border="8" aling="bottom" vspace="10" hspace="10" alt="el puente" style="border-color:#09F. 5.

.

Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas. de forma similar a las cartas de respuestas que se encuentra en algunas revistas. El lector escribe la información rellenando campos o haciendo clic sobre botones. por ejemplo. y luego presiona un botón de envío para enviarla a una dirección URLque se suele dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP. para recibir mensajes de sus lectores. ASP o CGI.7 FORMULARIOS.2. .

ya que el valor predeterminado (application/x-www-form-urlencoded) es el único valor válido. La etiqueta FORM Los formularios están delimitados con la etiqueta <FORM> . El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos que el formulario puede enviar. ..2. De cualquier forma. esto no necesita especificarse. como botones y casillas de texto y que debe poseer los siguientes atributos: 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. </FORM>. que permite reunir varios elementos de formulario. ACTION indica la dirección a la que se enviará la información (un script CGI o dirección de correo electrónico (mailto:dirección_de_correo_e@equipo)) Un atributo opcional de la etiqueta FORM es ENCTYPE. en tanto que "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 (para aprender más sobre los métodos POST y GET.. que especifica cómo se codifican los datos del formulario.7 FORMULARIOS.

2.7 FORMULARIOS.
La etiqueta FORM
Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ...
</FORM>
Aquí hay algunos ejemplos de las etiquetas FORM:
<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">
<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">

2.7 FORMULARIOS.
Dentro de la etiqueta FORM

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.
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. Estos elementos interactivos son:
•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

2.7 FORMULARIOS.
Envío de datos

Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del
formulario se envían a un script CGI bajo la forma de pares nombre/valor, es decir
conjuntos de datos representados por el nombre del elemento formulario, un signo
igual ("=") y luego el valor asociado. Estos pares nombre/valor se separan unos de
otros mediante el símbolo de unión ("&"). Por lo tanto, los datos que se envían al
script se verán así:
campo1=valor1&field2;=valor2&field3;=valor3
Con el método GET (enviar los datos mediante una dirección URL), la URL será una
cadena como la siguiente:
http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2

  . o si el usuario no introdujo ningún valor. lo que significa que el nombre del campo estará seguido de un signo igual ("=") seguido de un valor que el usuario introdujo. ya que permite al script CGI reconocer qué campo está asociado con un par nombre/valor. La sintaxis de esta etiqueta es la siguiente: <INPUT type="Nombre de campo" value="Valor predeterminado" name="Nombre de elemento">El atributo name es esencial.7 FORMULARIOS. por el valor predeterminado de la etiqueta value.2. ya que se usa para crear muchos elementos “interactivos”. La etiqueta INPUT La etiqueta INPUT es una etiqueta esencial para los formularios.

que el navegador no muestra.7 FORMULARIOS. Estos son los valores posibles: checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). es para definir una configuración única que se enviará al CGI como par nombre/valor. Los tipos de archivo que pueden ser enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta FORM.2. hidden: Este campo. . Cuando la casilla es seleccionada. La etiqueta INPUT El atributo type se usa para especificar qué tipo de elemento se representa con la etiqueta INPUT. file: Un campo que permite al usuario especificar una ruta de archivo que lleva al archivo que se enviará con el formulario. el par nombre/valor se envía al CGI.

La etiqueta INPUT image: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo SRC.7 FORMULARIOS. password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos para camuflar el texto de entrada.2. . Cada uno de estos botones debe tener el mismo atributo name. radio: Un botón que permite al usuario elegir entre varias opciones. Al aplicar el atributo checked para uno de estos botones se definirá como seleccionado de forma predeterminada. El par nombre/valor del botón radio seleccionado se enviará al CGI.

2. submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value. . text: Una casilla de texto para escribir una línea de texto. La etiqueta INPUT reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados.7 FORMULARIOS. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength.

7 FORMULARIOS. 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 .2. que permite su identificación en el par nombre/valor. Esta etiqueta tiene los siguientes atributos: 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. La etiqueta TEXTAREA La etiqueta TEXTAREA se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT.

que permite su identificación en el par nombre/valor. La etiqueta SELECT La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son: name: name: representa el nombre asociado con la casilla de texto. disabled: crea un lista desactivada. que aparece atenuada 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).2. multiple: Permite al usuario seleccionar varios campos de la lista .7 FORMULARIOS.

2. Los atributos de esta etiqueta son: name: name: representa el nombre asociado con la casilla de texto.7 FORMULARIOS. La etiqueta SELECT La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). que permite su identificación en el par nombre/valor. disabled: crea un lista desactivada. multiple: Permite al usuario seleccionar varios campos de la lista . que aparece atenuada 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).

Formularios <TD>Nombre</TD> <TD> <INPUT type=text name="nombre"> </TD> </TR> <TR> <TD>Género</TD> <TD> Masculino: <INPUT type=radio name="género" value="M"> <br>Femenino: <INPUT type=radio name="género" value="F"> </TD> </TR> <TR> <TD>Ocupación</TD> <TD> <SELECT name="ocupación"> <OPTION VALUE="profesor">Profesor</OPTION> <OPTION VALUE="estudiante">Estudiante</OPTION> <OPTION VALUE="ingeniero">Ingeniero</OPTION> <OPTION VALUE="jubilado">Jubilado</OPTION> <OPTION VALUE="otro">Otro</OPTION> </SELECT> </TD> </TR> <TR> <TD>Comentarios</TD> <TD> <TEXTAREA rows="3" name="comentarios"> Escriba aquí sus comentarios</TEXTAREA> </TD> </TR> <TR> <TD COLSPAN=2> Enviar <INPUT type="submit" value="Enviar"> </TD> </TR> </TABLE> </FORM> .<FORM method=post action="formulario.html"> Registro de un usuario <TABLE width="346" BORDER=0> <TR> <TD width="140">Apellido</TD> <TD width="196"> <INPUT type=text name="apellido"> </TD> </TR> ACTIVIDAD 4 FORMULARIOS <TR> 4.

ACTIVIDAD 4 FORMULARIOS .

7 FORMULARIOS.2. Atributos de formulario y entradas Enviar .

Enviar .2.7 FORMULARIOS.

Enviar .2.7 FORMULARIOS.