Post on 24-Apr-2015
Programación en la Web
Contenido
• ObjetivoSintaxis básica• Sintaxis básica
• Formateo de TextoLi t• Listas
• Enlaces
Diapositiva 2 3
Programación en la Web
Contenido
• ImágenesTablas• Tablas
• FormasL j b d ti t (XML XHTML• Lenguajes basados en etiquetas (XML, XHTML, etc.)
Diapositiva 2 4
Programación en la Web
Objetivoj
• Al finalizar la unidad, el alumno elaborarápáginas Web utilizando las etiquetas HTMLpáginas Web utilizando las etiquetas HTMLmás comunes.
Diapositiva 2 5
Programación en la Web
Sintaxis básica
• HTML (HyperText Markup Language) es unlenguaje muy sencillo que permite describirlenguaje muy sencillo que permite describirhipertexto, es decir, texto presentado deforma estructurada y agradable, con enlacesy g ,(hyperlinks) que conducen a otrosdocumentos o fuentes de informaciónrelacionadas, y con inserciones multimedia(gráficos, sonido...).
Diapositiva 2 6
Sintaxis básica
• Una etiqueta puede contener parámetros o
Sintaxis básica
atributos (opciones), estos son indicados a continuación de la palabra clave de la etiqueta. Sintaxis:
Diapositiva 2 7
Sintaxis básica
• La estructura básica de un documento HTML
Sintaxis básica
incluye etiquetas, que rodean el contenido y le aplican formato.
Diapositiva 2 9
Sintaxis básica
• Otro ejemplo:
Sintaxis básica
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd">html<html>
<body>Ésta es mi primera página web
</body></html></html>
Diapositiva 2 10
La declaración DOCTYPE
• DOCTYPE se refiere al tipo de documento.
La declaración DOCTYPE
• Técnicamente, podemos decir que un documento HTML válido debe declarar cual de las versiones de HTML está siguiendo, y puede además señalar la DTD (Document Type ( ypDefinition) correspondiente.
Diapositiva 2 11
La declaración DOCTYPE
• La declaración que sigue con más rigor el
La declaración DOCTYPE
estándar HTML es:
!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4 01//EN"<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
Diapositiva 2 12
La declaración DOCTYPE
• Versiones de DOCTYPE en HTML:
La declaración DOCTYPE
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">p // g/ / /
<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01 Frameset//EN"
Diapositiva 2 13
"http://www.w3.org/TR/html4/frameset.dtd">
Tít lFormateo de texto Títulos• Hemos agregado dos elementos nuevos aquí,
Formateo de texto
que empiezan con la etiqueta head y title (y ve como ambas se cierran).
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html>h d<head>
<title>Mi primera páginaweb</title></head><body>
É i i á i bÉsta es mi primera página web</body></html>
Diapositiva 2 14
Pá fFormateo de texto Párrafos• Agrega otra línea a tu documento:
Formateo de texto
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"h // /TR/ h l /DTD/ h l i d d""http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title>/h d</head>
<body>Ésta es mi primera página webQué emocionante
/b d</body></html>
Diapositiva 2 15
Pá fFormateo de texto Párrafos• Cambia las dos líneas para que se muestren
Formateo de texto
así:<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"h // /TR/ h l /DTD/ h l i d d""http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title>/h d</head>
<body><p>Ésta es mi primera página web</p> <p>Qué emocionante</p>
/b d</body></html>
Diapositiva 2 16
É f iFormateo de texto Énfasis
• Puedes dar énfasis a un texto en un párrafo
Formateo de texto
usando em (énfasis) y strong (mayor énfasis). Éstas son dos maneras de hacer más o menos lo mismo aunque tradicionalmente losmismo, aunque tradicionalmente, los navegadores muestran em en itálicas y strong en negritas.g
Diapositiva 2 17
É f iFormateo de texto
<!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1 0 Strict//EN”
ÉnfasisFormateo de texto
<!DOCTYPE html PUBLIC ‐//W3C//DTD XHTML 1.0 Strict//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title><title>Mi primera página web</title></head><body>
<p>Ésta es mi primera página web</p> <p>Sí eso <em>es</em> lo que dije Es <strong>muy</strong> emocionante </p><p>Sí, eso <em>es</em> lo que dije. Es <strong>muy</strong> emocionante.</p>
</body></html>
Diapositiva 2 18
C t d líFormateo de texto Cortes de línea• Una etiqueta de corte de línea también puede
Formateo de texto
usarse para separar líneas así:
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title></head><body>
Ésta es mi primera página web <br />p p g /Qué emocionante
</body></html> Diapositiva 2 19
EncabezadosFormateo de texto
• Son h1, h2, h3, h4, h5 y h6. Siendo h1 el mayor y h6 el menor
Formateo de texto
y h6 el menor.<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title></head><body>
<h1>Mi primera página web</h1><h1>Mi primera página web</h1>
<h2>¿Qué es esto?</h2><p>Una página simple creada usando HTML</p>
h P é t ? /h<h2>¿Para qué es esto?</h2><p>Para aprender HTML</p>
</body></html> Diapositiva 2 20
Listas
• Las hay de tres tipos: ordenadas (ol), desordenadas (ul) y de definiciones (li).
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title>title Mi primera página web /title</head><body>
<h1>Mi primera página web</h1>
<h2>¿Qué es esto?</h2><p>Una página simple creada usando HTML</p>
<h2>¿Para qué es esto?</h2><ul>
<li>Para aprender HTML</li><li>Presumir</li><li>Presumir</li><li>Porque me he enamoradode mi computadora y quiero darle amorHTML.</li>
</ul></body></html> Diapositiva 2 21
Listas
• Ahora cambia las etiquetas ul por ol.
Listas
• Luego, reemplaza el código anterior por esto:
<ul><li>Para aprender HTML</li><li>
Para presumir<ol><ol>
<li>A mi maestra</li><li>A mis amigos</li><li>A mi gato</li><li>Al pequeño pato hablador en mi cerebro</li>
/ l</ol></li><li>Porque me he enamorado de mi computadora y quiero darle amor HTML.</li>
</ul> Diapositiva 5 22
Programación en la Web
Imágenesg
• Dentro de las imágenes que se pueden incluir en una página HTML se deben distinguir 2 tipos: – las imágenes de contenido
las imágenes de adorno– las imágenes de adorno
Diapositiva 1 23
Programación en la Web
Imágenesg
• La etiqueta <img> es usada para insertar una imagen en un documento HTMLimagen en un documento HTML.
• El atributo src le dice al navegador dónde estála imagen.
• El atributo alt proporciona un texto alternativo a la imagen
• Los atributos ancho (width) y la altura (height)• Los atributos ancho (width) y la altura (height) son necesarios.
<img src=" http://www google com/images/logo gif " width="157" height="70" alt=“Google Logo" />
Diapositiva 1 24
<img src= http://www.google.com/images/logo.gif width= 157 height= 70 alt= Google Logo />
Programación en la Web
Enlaces
• El enlace es elemento principal del hipertexto, también se le conoce como hiperenlace o linktambién se le conoce como hiperenlace o link.
• Los enlaces se utilizan para establecer relaciones entre dos recursos webrelaciones entre dos recursos web.
• La mayoría de los enlaces relacionan páginas web, pero también es posible enlazar otrosweb, pero también es posible enlazar otros recursos como imágenes, documentos, archivos, programas, etc.
Diapositiva 1 26
Programación en la Web
Enlaces
• Una característica del enlace es que comienza en un extremo y apunta hacia el otro extremoen un extremo y apunta hacia el otro extremo. Cada uno de los dos extremos se llaman “anclas” (“anchors” en inglés).( g )
• Etiqueta <a>
• Atributos:name = “texto”href = “url”
Diapositiva 1 27
Programación en la Web
Enlaces
• Ejemplo:<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title>
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title><title>Mi primera página web</title></head><body>
<h1>Mi primera página web con enlaces </h1>
<h2>Enlace recomendado</h2>
<title>Mi primera página web</title></head><body>
<h1>Mi primera página web con enlaces </h1>
<h2>Enlace recomendado</h2><p><a href='http://www.uady.mx/'>Universidad Autónomade Yucatan</a></p>
</body></html>
<p><a href='http://www.uady.mx/'>Universidad Autónomade Yucatan</a></p></body></html>
Diapositiva 1 28
Programación en la Web
Enlaces
• Ejemplo:<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title>
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title><title>Mi primera página web</title></head><body>
<h1>Mi primera página web con enlaces </h1>
<h2>Enlace recomendado</h2>
<title>Mi primera página web</title></head><body>
<h1>Mi primera página web con enlaces </h1>
<h2>Enlace recomendado</h2><a href='/fondo.jpg'> Imagen para fondode escritorio </a>
</body></html>
<a href='/fondo.jpg'> Imagen para fondode escritorio </a></body></html>
Diapositiva 1 29
Programación en la Web
Enlaces
• Ejemplo:<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title>
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN”"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head>
<title>Mi primera página web</title><title>Mi primera página web</title></head><body>
<h1>Mi primera página web con enlaces </h1>
<h2>Enlace recomendado</h2>
<title>Mi primera página web</title></head><body>
<h1>Mi primera página web con enlaces </h1>
<h2>Enlace recomendado</h2><a href='/fondo.jpg'> Imagen para fondode escritorio </a>
</body></html>
<a href='/fondo.jpg'> Imagen para fondode escritorio </a></body></html>
Diapositiva 1 30
Programación en la Web
Enlaces
• Rutas relativas y rutas absolutas:Las rutas absolutas proporcionan el URL– Las rutas absolutas proporcionan el URL completo del documento vinculado, incluido el protocoloprotocolo.
– Las rutas relativas, como subcarpeta1/pagina.html, son las mássubcarpeta1/pagina.html, son las más adecuadas para utilizar con vínculos locales en la mayoría de los sitios Web.
Diapositiva 1 31
Programación en la Web
Enlaces
• En la rutas relativas es común usar:“/” (raíz del sitio)– “/” (raíz del sitio)
– “.” (carpeta actual)“ ” ( t i l i i di t )– “..” (carpeta en nivel superior inmediato).
Diapositiva 1 32
Programación en la Web
Enlaces
• Ejemplos:Enlaces a otra página web utilizando name– Enlaces a otra página web utilizando name.
– enlaces dentro de una misma página web utilizando nameutilizando name.
Diapositiva 1 33
Programación en la Web
Tablas
• Tablas en HTML:HTML definió desde sus primeras versiones un– HTML definió desde sus primeras versiones un completo modelo para la creación de tablas en sus documentossus documentos.
– El modelo propuesto por HTML es sencillo, flexible y completo.flexible y completo.
Diapositiva 1 34
Programación en la Web
Tablas
• Tablas en HTML:HTML utiliza los mismos conceptos de filas– HTML utiliza los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicaciónutilizan en cualquier otro entorno de publicación de documentos.
– HTML permite diseñar tablas muy complejas conHTML permite diseñar tablas muy complejas con agrupación de filas y de columnas, cabeceras y pies de tabla, subdivisiones en la tabla, múltiples cabeceras, etc.
Diapositiva 1 35
Programación en la Web
Tablas
• Tablas básicas:Las tablas más sencillas de HTML se definen– Las tablas más sencillas de HTML se definen con 3 etiquetas: <table>, <tr> y <td>. La etiqueta <table> delimita la tabla de datos– La etiqueta <table> delimita la tabla de datos,
– la etiqueta <tr> define cada fila de datos y la etiq eta <td> define cada na de las– la etiqueta <td> define cada una de las columnas de las filas de la tabla
Diapositiva 1 36
Programación en la Web
Tablas
• Tablas básicas:Algunas de las celdas de la tabla se utilizan– Algunas de las celdas de la tabla se utilizan como cabecera de las demás celdas de la fila o de la columnade la columna,
– Para este caso, HTML define la etiqueta <th>.
Diapositiva 1 37
Programación en la Web
Tablas
• Tablas básicas:La etiqueta <td> utiliza dos atributos muy útiles– La etiqueta <td> utiliza dos atributos muy útiles para fusionar celdas:
• colspan• colspan.• rowspan.
Diapositiva 1 38
Programación en la Web
Tablas
• Tablas básicas:HTML define <caption> para establecer la– HTML define <caption> para establecer la leyenda o título de una tabla. Debe colocarse inmediatamente después de la– Debe colocarse inmediatamente después de la etiqueta <table>.
– Cada tabla solo puede tener un <caption>– Cada tabla solo puede tener un <caption>.
Diapositiva 1 39
Programación en la Web
Tablas
• Las tablas más complejas están formadas por una sección de cabecera una sección de pie yuna sección de cabecera, una sección de pie y varias secciones de datos.– thead Define la cabecera de tablathead Define la cabecera de tabla.– tbody Define una sección de la tabla.– tfoot Define el pie de tabla– tfoot Define el pie de tabla.
Diapositiva 1 40
Programación en la Web
Tablas
• Cada tabla puede tener una cabecera, un pie y una o más secciones Las etiquetas <thead> yuna o más secciones. Las etiquetas <thead> y <tfoot> deben colocarse inmediatamente antes que cualquier etiqueta <tbody>q q q y
Diapositiva 1 41
Programación en la Web
Formularios
• La importancia de los formularios
• El contenedor <form>
• La multifacética <input>p
• Listas
• Botones
• Etiquetando controlesq
• Agrupando elementosDiapositiva 8 42
Programación en la Web
La importancia de los formulariosLa importancia de los formularios• El aspecto más diferenciado del lenguaje HTML respecto de otros lenguajes de marcado es la posibilidad de definir elementos interactivos como formularios que permiten crear aplicaciones Web con la que los usuarios pueden interactuar.
Diapositiva 8 43
Programación en la Web
La importancia de los formularios• Aunque presenta varias carencias importantes
La importancia de los formularios
(sliders, spinners, combobox, barras de progreso, etc.) el lenguaje HTML define suficientes tipos de controles como para crear formularios completos.
Diapositiva 8 44
Programación en la Web
La importancia de los formularios• Los formularios son de gran ayuda del lado del
La importancia de los formularios
cliente para que el usuario proporcione información vía Web. Cuando un visitante introduce información en un formulario visualizado en un navegador Web (el cliente) y hace clic en el botón de envío, la información se transfiere al servidor donde será procesada por una aplicación o un script del lado del servidor
Diapositiva 8 45
Programación en la Web
La importancia de los formularios• Entre las tecnologías del lado del servidor La importancia de los formularios
habitualmente utilizadas para tratar datos de formularios se incluyen las de ColdFusion, Microsoft Active Server Pages (ASP) y PHP. El servidor responde devolviendo la información solicitada al usuario (o cliente) o bien realizando alguna acción basada en el contenido del formulario.
Diapositiva 8 46
Programación en la Web
El contenedor <form>• El formulario más sencillo se puede crear con solo
El contenedor <form>
dos etiquetas: <form> y <input>
<form action="manejador.php" method="post" enctype="multipart/form‐data"name="contacto" id="contacto">
Nombre: <input type="text" name="nombre" value="" />Nombre: <input type= text name= nombre value= /><input type="submit" value="Enviar" />
</form>
Diapositiva 8 47
Programación en la Web
El contenedor <form>• El resultado es el siguiente:
El contenedor <form>
Diapositiva 8 48
Programación en la Web
El contenedor <form>• La etiqueta <form> permite definir un
El contenedor <form>
“contenedor” de los controles que forman el formulario. Los atributos más importantes (y que se emplean en todos los formularios) son action y method.
Diapositiva 8 49
Programación en la Web
El contenedor <form>• action Especifica el script que va a procesar los
El contenedor <form>
datos del formulario. • method Método mediante el cual se transmitirán los datos del formulario al servidor.
Diapositiva 8 50
Programación en la Web
El contenedor <form>• enctype Tipo de codificación MIME de los datos
El contenedor <form>
remitidos al servidor para su procesamiento. El valor predeterminado application/x‐www‐form‐urlencode se utiliza normalmente junto con el método post. Si crea un campo de carga de archivos, especifique el tipo MIME multipart/form‐data.
Diapositiva 8 51
Programación en la Web
La multifacética <input>• La etiqueta <input> permite definir 10 controles
La multifacética <input>
diferentes de formulario, por lo que es la más utilizada al crear formularios. Para especificar el tipo de control que se incluye en el formulario, se vale de su atributo type, el cual puede tomar alguno de los siguientes valores: "text | password | checkbox | radio | submit | reset | file | hidden | image | button".
Diapositiva 8 52
Programación en la Web
La multifacética <input>La multifacética <input>• Entrada de texto de línea• Entrada de texto de contraseña• Entrada de texto de múltiples líneasEntrada de texto de múltiples líneas• Ocultando informaciónC ill d ifi ió• Casillas de verificación
• Radio botones
Diapositiva 8 54
Programación en la Web
ListasListas• Las listas pueden ser insertadas usando tres etiquetas: – select (contenedor principal), – option (declaración de opción) y – optgroup (grupo de opciones).
Diapositiva 8 55
Programación en la Web
ListasListas• Este tipo de lista puede ser usado como una lista de botones radio o como una lista de casillas de verificación, dependiendo de la presencia del atributo "multiple".
Diapositiva 8 56
Programación en la Web
BotonesBotones• Los botones son útiles en formularios para enviarlos, reestablecerlos o para ejecutar funciones personalizadas. Pueden ser insertados usando la etiqueta input (submit, reset e image) o la etiqueta button (botones con contenido).
Diapositiva 8 59
Programación en la Web
BotonesBotones• Botones de envío• Botones de reestablecimiento• Botones de imagenBotones de imagen• Botones con contenidoE t d d hi• Entrada de archivos
Diapositiva 8 60
Programación en la Web
Etiquetando ControlesEtiquetando Controles• Las etiquetas de los elementos pueden hacer que tu página se vea mejor y agregar una pequeña funcionalidad para navegadores visuales.
Diapositiva 8 61
Programación en la Web
Etiquetando ControlesEtiquetando Controles• Las etiquetas pueden ser insertadas usando la etiqueta label y son asociadas al control mediante el atributo "for". Para lograr esto, el valor del atributo "for" de la etiqueta labeldebe coincidir con el valor del atributo "id" del control.
Diapositiva 8 62
Programación en la Web
Etiquetando ControlesEtiquetando Controles…<label for="nombre">Nombre:</label><input type="text" id="nombre" name="nombre"<input type text id nombre name nombre /> <br />
…
Diapositiva 8 63
Programación en la Web
Agrupando ElementosAgrupando Elementos• Todos los elementos de un formulario pueden también ser agrupados temáticamente con la etiqueta fieldset. Esta etiqueta contiene a un grupo de controles que se relacionan unos con otros de alguna forma (por ejemplo, información personal, información laboral, información financiera, intereses, etc.).
Diapositiva 8 64
Programación en la Web
Agrupando ElementosAgrupando Elementos• El título para cada grupo de elementos puede establecerse con la etiqueta legend que debe ser definido justo a continuación de la etiqueta de apertura del fieldset, y proveer un título descriptivo para el grupo de controles.
Diapositiva 8 65