Unidad 2

UD1: El lenguaje HTML
I.
HTML: el formato de las pginas Web
Una pgina HTML consiste en una mezcla de texto y elementos especiales,

llamados etiquetas (tags), que estructuran el documento y delimitan sus porciones
de contenido, dndoles un formato reconocible.
Las etiquetas son delimitadores de los elementos y estn encerradas por los
signos < y >.
De este modo, para indicar el comienzo de un elemento en una pgina web,
usaremos una etiqueta de apertura de elemento que escribiremos como
<elemento> y para indicar el fin del elemento usaremos una etiqueta de cierre de
elemento que escribiremos como </elemento>.
Por regla general, a todo elemento HTML le corresponde:
Etiqueta de apertura
Etiqueta de cierre, se debe llamar igual que la de apertura, aunque se
diferencia porque va precedida por una barra oblicua (/).
Como norma general, una etiqueta con la barra al final es equiparable a un
par de etiquetas que se abren y se cierran y que estn una junto a la otra sin nada
que las separe. Es decir, que <hr/> equivale a <hr></hr>.
Existe una buena prctica en HTML que indica que toda etiqueta HTML que
se abra debe cerrarse:
Nos permite delimitar explcitamente dnde comienza y dnde acaba
cada elemento.
estructura sin ambigedad posible
Algunas reglas simples que ser preciso respetar a la hora de escribir

etiquetas son:
Toda etiqueta abierta se cierre.
Las etiquetas son sensibles a las maysculas o minsculas. De este
modo es diferente escribir <ETIQUETA>, <Etiqueta> o <etiqueta>.
Las etiquetas deben anidarse y desanidarse correctamente, por
ejemplo:
o
o
Es correcto: <x><y><z> </z></y></x>

Es incorrecto: <x><y><z> </x></y></z>
Los valores de los atributos deben informarse siempre entre comillas.
II.
El documento HTML5 mnimo
Es la ltima versin de HTML, donde todo documento HTML debe comenzar

con un doctype.HTML5 propone un doctype nico y simplificado.
<!DOCTYPE html>
El elemento <html> indica al navegador que se trata de un documento

HTML. El elemento <html> es el elemento raz del documento. Se declara justo
debajo de la declaracin de doctype.
<head>
Contiene el encabezado del documento.

Informacin relativa al propio documento, pero no visible en el rea de
maquetado que ofrece el navegador.
<title>
Etiqueta obligatoria y que debe aparecer slo una vez en el documento.

Se visualiza en la barra del ttulo, situada en la parte superior izquierda de
cualquier navegador
<meta>
Codificacin del documento

<body>
Definimos el cuerpo del documento.

Aqu se sita el cdigo HTML que se usar para elaborar el contenido de la
pgina.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
<br>
Retorno de carro o salto de lnea.

Se suele encontrar sin cierre.
<b>
Texto en Negrita
<i>
Texto en Cursiva
<sup>
Escribe el contenido en superndice.

<sub>
Escribe el contenido en subndice

<pre>
Texto preformateado, sirve para preservar espacios en blanco.

<abbr>
Definir abreviaturas y acrnimos.

<del>
Texto suprimido o caducado.

<p>
Delimita prrafos.
Conveniente usar prrafos cortos, para generar legibilidad y compresin.
<h1>
Definen los ttulos.

<hr>
Separador horizontal
<<!-->
Para comentar cdigo HTML

<blockquote>
Sirve para delimitar citas

<div>
Para crear contenedores genricos, secciones, capas, partes del documento

HTML que se pueden considerar pertenecientes a un mismo bloque.
<img>
Para incluir imgenes en un documento.

S las imgenes estn en otra carpeta, el atributo src debe apuntar al
camino hacia esa imagen.
Cuando una imagen que tiene contenido, no se puede visualizar por el

motivo que sea es conveniente usar un texto alternativo que explique esa
imagen. Sera con el atributo alt.
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find an image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
<a href=></a>
Enlaces, hipertexto
El destino puede ser:
o
o
o
o
Un lugar de la pgina en curso.

Otra pgina, normalmente cuando se abre reemplaza al de la anterior
en la pestaa actual (se puede volver atrs con la flecha izquierda del
navegador) y s queremos que se abra en nueva pestaa, podemos
usar el atributo target. Con target=_blank se abrir una pestaa
nueva.
Una direccin de correo electrnico.
Un archivo para descargar.
<!DOCTYPE html>
<html>
<body>
<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
<ul> <li>
Para listas no ordenadas

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol> <li>
Para listas ordenadas

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<table>
Una tabla se compone de filas <tr> y las filas se componen de celdas

<td>-
Las propiedades de la tabla, tales como su ancho, borde, alineacin, etc se

debe definir en hoja de estilos.
Las celdas de encabezado de columnas o de filas se definen la etiqueta

<th>.
Las tablas pueden tener sus celdas de encabezado <th> por filas o por
columnas indistintamente.
El elemento <caption> define el titulo de la tabla.

Las celdas pueden ocupar ms de una columna usando el atributo
colspan=. Sino se indica nada, es como s tiene valor 1.
Igualmente ocurre con las filas que las celdas tambin pueden ocupar ms
de una ella usando el atributo rowspan.
<form>
Definen un formulario.
El atributo action establece la accin a realizar cuando se rellene el
formulario.
El atributo enctype especifica en que formato se tramitarn los datos del

formulario al servidor.
El atributo method indica si la peticin del formulario se debe realizar con el

mtodo GET o el mtodo POST.
Para que en el formulario los usuarios con discapacidad puedan distinguir

unos campos de otros es necesario usar el elemento <label> en cada
campo.
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
Tambin, para estos mismos colectivos suele ser interesante agrupar
campos de formularios usando las etiquetas <fieldset> y <legend>.
UD2: HTTP Y HOJAS DE ESTILO

Con CSS se puede conseguir un diseo web responsive, es decir, un diseo
en el que diferentes usuarios y navegadores pueden adaptar a sus diferentes
tamaos de pantalla la forma en la que visualizar una pgina web.
III.
HTTP: el protocolo de comunicacin de la Web

El protocolo de transferencia de hipertexto.
Ingrediente fundamental, junto con HTML, sobre el que se fund la
Web.
Es un protocolo de aplicacin cliente-servidor que proporciona un
formato estndar para especificar las peticiones y las respuestas de
los recursos en la Web.
Inventado en la dcada de 1990 con el objetivo de crear un
sistema hipermedia distribuido, permitiendo el acceso a los
documentos
multimedia
almacenados
en
servidores
interconectados que se comunican a travs de una red TCP/IP.
Antes de l ya existan los protocolos de SMTP (correo electrnico)
o FTP (transferencia de ficheros).
A travs de HTTP, un usuario que usa una aplicacin de cliente (por

ejemplo, un navegador) puede solicitar recursos disponibles en un servidor
remoto (servidor web).
Puesto que tales recursos se distribuyen a travs de Internet, se
necesita un mecanismo de identificacin para ser localizado y accedido. El
identificador de recursos que hace referencia es una cadena, llamada URL,
que especifica:
El protocolo.
El nombre o direccin IP del equipo que aloja el recurso.
Un nmero de puerto opcional.
El nombre del documento y su ubicacin.
Opcional, puede haber parmetros
a) Peticiones
Las directivas de peticin de informacin que define HTTP 1.1,
son:
GET, Peticin de recurso.
POST, Peticin de recurso pasando parmetros.
HOST, Peticin de datos sobre recurso.
PUT, Creacin o envo de recurso.
DELETE, Eliminacin del recurso.
TRACE, Devuelve al origen la peticin tal como se ha
recibido en el receptor, para depurar errores.
OPTIONS, Sirve para comprobar las capacidades del
servidor.
CONNECT, Reservado para uso de servidores intermedios
capaces de funcionar como tneles.
Los mtodos HTTP ms importantes son GET y POST. El mtodo GET

enva una solicitud normal para un recurso en el servidor web, y permite al
usuario enviar entradas simples a travs de la cadena de consulta. El
mtodo POST enva una solicitud que permite al usuario enviar datos ms
complejos (por ejemplo, un texto largo o un archivo) para ser procesados
por el servidor. Con el mtodo POST, la entrada del usuario se empaqueta
como un archivo adjunto a la solicitud, y constituye el denominado cuerpo
de la peticin.
Una peticin GET sigue el siguiente formato:
b) Respuestas
Al recibir la solicitud, el servidor localiza el recurso y enva una

respuesta al cliente. El mensaje de respuesta incluye una lnea de estado,
que incluye informacin sobre la versin del protocolo y un cdigo de estado
numrico con su mensaje asociado (por ejemplo, HTTP/1.1 404 Not Found), y
un cuerpo del mensaje que lleva el recurso real que se intercambia. Por
ejemplo:
IV.
Diseo de pginas WEB
Lo primero que hemos de tener presente al disear un documento o

un conjunto de pginas web es que se trata de un documento de hipertexto y
no de un documento lineal, como podra ser un libro.
El objetivo principal del diseo de aplicaciones web es el de facilitar la
comprensin de la solucin que se va a desarrollar.
El diseo de aplicaciones web puede ser considerado como el
conjunto de actividades que refinan las abstracciones identificadas durante el
anlisis de requisitos con el fin de especificar la organizacin de los datos, la
navegacin, la presentacin y la arquitectura de la aplicacin.
Hay que tener en cuenta que no necesariamente todos los requisitos
tienen que ser recogidos y analizados antes de que comience el diseo. En
caso de que los requisitos estn incompletos, el ciclo de desarrollo puede
abordar los requisitos que son conocidos. Los requisitos no cubiertos sern
tenidos en cuenta en sucesivas iteraciones.
Otro objetivo del diseo de aplicaciones web es representar la

organizacin lgica de una aplicacin web desde diferentes perspectivas y
facilitar la toma de decisiones sobre alternativas de implementacin.
a) Conceptos de Diseo
Abstraccin
o
o
Dedicado a gestionar la complejidad de aplicaciones software.

La abstraccin nos permite concentrarnos en un problema en
algn nivel de generalizacin, independientemente de los
detalles de implementacin de bajo nivel.
Ventajas
Abstraccin orientada al dominio, promueve el uso de la
terminologa del dominio de la aplicacin como la
ingeniera de requisitos, para facilitar la interaccin con
el usuario o cliente.
Abstraccin orientada a la solucin, usa el lenguaje de
programacin de destino para facilitar la discusin de la
organizacin del software dentro del equipo de
desarrollo.
Abstraccin de procedimientos.
Abstraccin de datos.
Abstraccin de control
Refinamiento
o
o
Va de la mano de la abstraccin.
Se emplea el refinamiento paso a paso de las abstracciones
para concretar los detalles de los diseos y sus
transformaciones a los modelos ms cerca del entorno de
implementacin.
Juega un papel crucial en el diseo de aplicaciones web
tambin.
Modularidad
o
o
o
o
o
Permite que el software sea manejable.

El software se descompone en un conjunto de mdulos
que se integran para satisfacer los requisitos recogidos.
Mejor comprensibilidad de los subproblemas e
integrabilidad.
Reduce el impacto de los fallos a submdulos
especficos.
Una tcnica de modularizacin adoptada es information
hiding, segn la cual los detalles de implementacin de
un objeto, mdulo, paquete o clase estn ocultos y solo
la informacin que se necesita para usar e integrar el
mdulo se da a conocer a travs de una interfaz

adecuada.
V.
CSS: el embellecimiento de las pginas web
Las hojas de estilo abarcan todo aquello relacionado con la

presentacin del documento HTML como el color, la alineacin, el tamao, los
bordes, los fondos o el interlineado. Normalmente, las hojas de estilo CSS se
definen en ficheros externos que se vinculan a la pgina HTML con una
etiqueta <link>.
La etiqueta <link> es la opcin recomendable para conseguir que el
formato de un sitio web sea homogneo en todas sus pginas.
No obstante, a efectos de poder tener integrado en un mismo
documento de pruebas el HTML y el CSS, usaremos en nuestros ejemplos la
etiqueta <style>. Tambin se puede usar el atributo style para aplicar estilo
a ciertas etiquetas en concreto, pero no es recomendable usar este atributo,
sino que es mejor tener todas las reglas en un nico lugar de forma que las
podamos sustituir por otras completamente si lo que queremos es dar un
aspecto totalmente diferente a nuestra web.
Usar hojas de estilo mejora la accesibilidad de la Web,
proporcionando reglas especficas sobre cmo se debe mostrar cada
elemento de la pgina web. A esto se le llama diseo web responsive.
a) Frameworks CSS
CSS es un formato sencillo, pero contempla un nmero elevado de
reglas que hace que conseguir crear desde cero una hoja de estilo que se
vea bien y sea web responsive requiera tiempo.
Para facilitarnos esta tarea, tenemos a nuestra disposicin numerosos
frameworks que son web responsive y que incluso podemos personalizar si
modificamos algunas reglas.
a) Reglas CSS
Para cambiar el fondo a la pgina hay que usar background-color
aplicando a la etiqueta body
<style>
body {
background-color: green;
}
</style>
En cambio s son etiquetas hay que usar background-color aplicado a
cada etiqueta
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
</style>
Para cambiar el color del texto, hay que usar color.
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
Para cambiar el alineamiento del texto, hay que usar text-align
<style>
div {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
Una etiqueta puede ser ms de una clase a la vez. Para ello, se puede
poner los valores de la clase separados por espacios dentro del atributo
class.
Con el selector punto, no hace falta poner el nombre de la etiqueta
s queremos que la regla se aplique a cualquier elemento con esa clase,
independientemente del tipo de etiqueta.
A una etiqueta se le pueden aplicar varias reglas CSS a la vez. Se
aplicaran todas a la vez.
Para cambiar la decoracin (subrayar, tachar) hay que usar textdecoration.
<style>
h1 {
text-decoration: overline; // lnea por encima del texto
}
h2 {
text-decoration: line-through; // tachado
}
h3 {
text-decoration: underline; // subrayado
}
</style>
Para cambiar la indentacin hay que usar text-indent:
<style>
p{
text-indent: 50px;
}
</style>
Para cambiar el interlineado hay que usar line-height.
<style>
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
</style>
Para cambiar el tipo de fuente hay que usar font-family
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
</style>
Para cambiar los bullets de la lista hay que usar list-style-image
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
Para especificar bordes de las tablas (no dobles) hay que usar
border.
<style>
table, td, th {
border: 1px solid black;
}
</style>

Unidad 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad 2

Cargado por

Copyright:

Formatos disponibles

UD1: El lenguaje HTML

HTML: el formato de las pginas Web

Una pgina HTML consiste en una mezcla de texto y elementos especiales,

Algunas reglas simples que ser preciso respetar a la hora de escribir

Es correcto: <x><y><z> </z></y></x>

Los valores de los atributos deben informarse siempre entre comillas.

El documento HTML5 mnimo

Es la ltima versin de HTML, donde todo documento HTML debe comenzar

El elemento <html> indica al navegador que se trata de un documento

Contiene el encabezado del documento.

Etiqueta obligatoria y que debe aparecer slo una vez en el documento.

Codificacin del documento

Definimos el cuerpo del documento.

Retorno de carro o salto de lnea.

Escribe el contenido en superndice.

Escribe el contenido en subndice

Texto preformateado, sirve para preservar espacios en blanco.

Definir abreviaturas y acrnimos.

Texto suprimido o caducado.

Definen los ttulos.

Para comentar cdigo HTML

Sirve para delimitar citas

Para crear contenedores genricos, secciones, capas, partes del documento

Para incluir imgenes en un documento.

Cuando una imagen que tiene contenido, no se puede visualizar por el

Un lugar de la pgina en curso.

Para listas no ordenadas

Para listas ordenadas

Una tabla se compone de filas <tr> y las filas se componen de celdas

Las propiedades de la tabla, tales como su ancho, borde, alineacin, etc se

Las celdas de encabezado de columnas o de filas se definen la etiqueta

El elemento <caption> define el titulo de la tabla.

El atributo enctype especifica en que formato se tramitarn los datos del

El atributo method indica si la peticin del formulario se debe realizar con el

Para que en el formulario los usuarios con discapacidad puedan distinguir

UD2: HTTP Y HOJAS DE ESTILO

HTTP: el protocolo de comunicacin de la Web

A travs de HTTP, un usuario que usa una aplicacin de cliente (por

Los mtodos HTTP ms importantes son GET y POST. El mtodo GET

Al recibir la solicitud, el servidor localiza el recurso y enva una

Diseo de pginas WEB

Lo primero que hemos de tener presente al disear un documento o

Otro objetivo del diseo de aplicaciones web es representar la

Dedicado a gestionar la complejidad de aplicaciones software.

Permite que el software sea manejable.

mdulo se da a conocer a travs de una interfaz

CSS: el embellecimiento de las pginas web

Las hojas de estilo abarcan todo aquello relacionado con la

También podría gustarte