2 lenguaje html

Programación en la WEBProgramación en la WEB

Diapositiva 2 1

Lenguaje HTMLLenguaje HTML

Diapositiva 2 2

Programación en la Web

Contenido

• ObjetivoSintaxis básica• Sintaxis básica

• Formateo de TextoLi t• Listas

• Enlaces

Diapositiva 2 3


Contenido

• ImágenesTablas• Tablas

• FormasL j b d ti t (XML XHTML• Lenguajes basados en etiquetas (XML, XHTML, etc.)

Diapositiva 2 4


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


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

• Ejemplo:

Sintaxis básica

Diapositiva 2 8

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.


• 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 que sigue con más rigor el


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


• Versiones de DOCTYPE en HTML:


<!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>


<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).


<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


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


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 />


Imágenesg

• Formatos gráficos recomendados

Diapositiva 1 25


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


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


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>



<h1>Mi primera página web con enlaces </h1>

<h2>Enlace recomendado</h2>



<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


Enlaces









<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


Enlaces









<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


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


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


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


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


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


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


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


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


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


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


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


Formularios

• La importancia de los formularios

• El contenedor <form>

• La multifacética <input>p

• Listas

• Botones

• Etiquetando controlesq

• Agrupando elementosDiapositiva 8 42


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


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


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


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


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


El contenedor <form>• El resultado es el siguiente:


Diapositiva 8 48


El contenedor <form>• La etiqueta <form> permite definir un


“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


El contenedor <form>• action Especifica el script que va a procesar los


datos del formulario. • method Método mediante el cual se transmitirán los datos del formulario al servidor.

Diapositiva 8 50


El contenedor <form>• enctype Tipo de codificación MIME de los datos


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


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


La multifacética <input>La multifacética <input>

Diapositiva 8 53


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


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


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


ListasListas

Diapositiva 8 57


ListasListas

Diapositiva 8 58


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


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


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


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


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


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


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


Agrupando ElementosAgrupando Elementos

Diapositiva 8 66


Bibliografíag

• Murugarren, J. G. (s.f.). WebEstilo. Obtenido de http://www webestilo com/de http://www.webestilo.com/

• Pérez Eguíluz, J. (2007). Introducción a XHTML Libros Web de EspañaXHTML. Libros Web de España.

Diapositiva 2 67

2 lenguaje html

Documents