Departamento de Programación Web II Semana 2

Clase 3-4

Unidad 1: Tecnologías del lado del servidor.

Asunto: Servidores Web, Hospedaje de sitios, Configuración de sitios Web con un editor.
Sumario: Recapitulación sobre HTML como lenguaje de presentación del lado del cliente.
Objetivo: Identificar los elementos del HTML en la programación del lado del cliente, a través de
sus características, su formato y sus elementos fundamentales contribuyendo al desarrollo del
pensamiento lógico de los estudiantes, así como al trabajo colaborativo y su independencia
cognoscitiva. Desarrollando en los estudiantes las habilidades necesarias para su desarrollo como
futuros profesionales.
Medios: PC, Pizarra, Presentación electrónica.
Método: Explicativa Demostrativa.
Bibliografía:
1. XHTML, serie práctica.
2. Diseño con estándares Web.
3. Diseño de sitios Web.

Introducción
1.Asegurar las condiciones del aula.
2.Asegurar el uso correcto del uniforme de cada alumno.
3.Verificar la asistencia y puntualidad de cada alumno.

Resumir que:

Cliente es el encargado de hacer solicitudes o realizar pedidos al servidor y esperar los resultados
que este le enviará. Estas peticiones pueden ser cosas como proporcionar datos de una base de
datos, aplicaciones, etc.
En la clase de hoy estudiaremos lo referente al cliente específicamente el HTML o XHTML;
Estructura y formato, así como sus etiquetas fundamentales.

Desarrollo:
Primer Turno:
HTML: Acrónimo inglés de HyperText Markup Language es un lenguaje muy sencillo que
permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable,
con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información
relacionadas, y con inserciones multimedia (gráficos, sonido...). Este lenguaje es el que se
utiliza para presentar información en el World Wide Web.

La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos,

párrafos de texto normal, enumeraciones, definiciones, citas, etc.), así como los diferentes
efectos que se quieren dar (cursiva, negrita, o un gráfico determinado) y dejar que luego la
presentación final de dicho hipertexto se realice por un programa especializado (como
Internet Explorer o Firefox).

XHTML: Acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje extensible

de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML
como estándar para las páginas web. XHTML es la versión XML de HTML, por lo que
tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más
estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium
de lograr una web semántica, donde la información, y la forma de presentarla estén
claramente separadas. En este sentido, XHTML serviría únicamente para transmitir la
información que contiene un documento, dejando para hojas de estilo (como las hojas de
estilo en cascada) y JavaScript su aspecto y diseño en distintos medios.

Diferencias entre HTML y XHTML.

La siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01.
Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML a ser una
aplicación del más estricto XML:
· Las etiquetas así como los atributos siempren deben estar en minúscula.
· Los elementos vacíos deben cerrarse siempre:
1. Incorrecto: <br>
2. Correcto: <br/> o <br />

Nota: Cualquiera de las tres formas es válida en XHTML. Se recomienda el cierre <br />
por razones de compatibilidad.

· Los elementos no vacíos también deben cerrarse siempre:

1. Incorrecto: <p>Primer párrafo<p>Segundo párrafo
2. Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p>

· Los elementos anidados deben tener un correcto orden de apertura/cierre (el que
se abre último, debe cerrarse primero).
1. Incorrecto: <em><strong>Texto</em></strong> //em: enfatiza el
contenido de forma cursiva
 2. Correcto: <em><strong>Texto</strong></em>

· Se debe siempre especificar un texto alternativo para imágenes (atributo "alt" para
la etiqueta "img").
<img src="http://upload.wikimedia.org/wikipedia/es/b/bc/Wiki.png" alt="Logo:
Wikipedia, la enciclopedia libre" /> // alt: En caso de faltar la imagen que salga el texto.

· Insertar elementos de línea dentro de elementos de bloque.

<h2><em>Título</em></h2>

Enlaces:

La característica que más ha influido en el espectacular éxito del WEB ha sido, aparte la
de su carácter de hipermedia, la posibilidad de unir los distintos documentos repartidos
por todo el mundo por medio de enlaces hipertexto.

En general, los enlaces tienen la siguiente estructura:

<a href="url"> texto de enlace </a> // <a href es una etiqueta de vinculo, es decir a donde
quiero llegar.

Donde URL es el destino del enlace (Obsérvese las comillas). “Texto de Enlace” es el
texto indicativo en la pantalla del enlace (con un color especial y generalmente
subrayado).

Tipos de enlaces

1. Enlaces dentro de la misma página.

2. Enlaces con otra página del mismo sitio.

3. Enlaces con una página fuera de nuestro sistema.

Imágenes: La etiqueta que nos sirve para incluir imágenes en nuestras páginas del WEB
es muy similar a la de enlaces a otras páginas, que hemos visto en el capítulo anterior. La
única diferencia es que, en lugar de indicar al programa navegador el nombre y la
localización de un documento de texto HTML para que lo cargue, se le indica el nombre y
la localización de un archivo que contiene una imagen.

La estructura de la etiqueta es:

<img src="imagen.gif" alt="descripción">

Con el atributo SRC (source) se indica que se quiere cargar una imagen llamada
imagen.gif (o el nombre que tenga).

Como vimos anteriormente, la estructura general de un enlace es:

<a href="url"> elementos de enlace </a>

En este caso sustituimos URL por el nombre del archivo de la página a la que queremos
acceder. Y en el lugar de los elementos de enlace, ponemos la etiqueta completa de la
imagen (que queda así enmarcada dentro de la etiqueta del enlace), Ej:

<a href="mipag2.html"><img src="hombre.gif"></a>

2do

Tablas: Las tablas pueden parecer un modo sencillo de disponer el texto en columnas o
tabular datos numéricos, o de tipo texto, aunque se puede hacer uso de la etiqueta
<table> para ubicar texto e imágenes con precisión, en casi cualquier lugar de una página,
se recomienda el uso de <div> para esta función.

Estructura de una tabla

<table> - Inicio de la tabla.

<tr> - Inicio de fila.

<td>dato</td> - Inicio y fin de celda.

</tr> - Fin de fila.

</table> - Fin de tabla.

Etiquetas de Formularios

Un formulario es una parte de un documento Web, utilizado para recolectar información

entre los usuarios. Consta de un contenido normal y de controles para la entrada de
información por parte del usuario. Una vez que los visitantes hayan introducido los datos,
pueden hacer clic en un botón para enviar el formulario. Después de procesados en el
servidor.
Ejemplo de definición de formulario:

<form name =¨form1¨>

...

</form>

Se puede utilizar cuatro tipos de control para recolectar datos en un formulario:

· Botones (etiqueta <button>).

· Campos de textos de entrada, casillas de verificación y botones radio (etiqueta

<input>).

· Lista de selección (etiqueta <select>).

· Campos de datos en varias líneas (etiqueta <textarea>).

Se utilizan todas estas etiquetas con un atributo name que ayuda a identificar los datos de
usuario una vez que el servidor los haya recibido.

También tienen un atributo type para distinguir entre los varios tipos de control.

Conclusiones:
Realizar un resumen de lo visto en la clase, enfatizando en la estructura del HTML

Se evaluaran los siguientes estudiantes:

1,2.
Norma y Clave de la pregunta oral:
1-Desenvolvimiento en la realización del contenido y conocimiento del mismo.
2-Tener contestada lo más que pueda el ejercicio impartido.
3-Tener en cuenta los pasos a seguir del mismo

Estudio Individual

1. A partir de lo visto en clases mencione otras etiquetas HTML que no hayan sido
abordadas en clase. Al menos mencione 3 juntamente con su breve explicación.
2. Elabore la estructura de un sitio Web y que vincule a 3 páginas que a su vez
contengan un enlace a la página inicial, y agréguele una hoja de estilo con el diseño de su
preferencia.

1R/ Otras etiquetas pueden ser:

 <marquee>: Texto que sea alternativo. </marquee>:
 <s> Tachado </s>
 <u> Subrayado </u>
 <center>Para centrarlo </center>
 _{Subíndice, es decir a2}
 ^{Superíndice, es decir elevado}

2R/
1era Pagina Index: