Universidad Europea de Madrid _ Ingenieria Informática _ Programación Web _ Apuntes WE

Programación I

•
Outros

Materiales Generales
17/5/2022
Esta es una vista previa del archivo. Inicie sesión para ver el archivo original
Apuntes WEB/Apuntes CSS.pdf
 
 
 
 
 
 
 
ANA DEL VALLE CORRALES PAREDES 
 
 
 CSS - Cascading Style Sheets – 
 
Es un lenguaje de estilo que define la presentación de los documentos HTML. 
HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido 
previamente estructurado. 
http://www.w3schools.com/css/default.asp 
 
Método inline 
 
Supongamos que tenemos el siguiente código HTML. 
<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>Inline styles</title> 
</head> 
<body> 
<h1>Usando inline styles</h1> 
<h2>Probando CSS en la misma línea usando el atributo 
"style".</h2> 
</body> 
</html> 
 
Si queremos colocar un estilo para la etiqueta <h2> tendríamos: 
<h2 style="color:red; font-weight:normal;">Probando CSS en la mísma línea usando el 
atributo "style".</h2> 
 
Usaremos el atributo style y le asignaremos las características con los valores 
deseados. 
property: value; 
Ejemplo: 
http://www.w3schools.com/css/default.asp
color: red; font-weight:normal; 
Método Interno 
En el método interno hacemos uso de la etiqueta <style>. 
Esta etiqueta debe ir dentro del elemento <head> 
<!doctype html> 
<html lang="es"> 
<head> 
 <meta charset="utf-8"> 
 <title>Embedded styles</title> 
 <style> 
 h2{ 
 color: red; 
 font-weight:normal; 
} 
</style> 
</head> 
<body> 
<h1>Lorem ipsum dolor sit amet...</h1> 
<h2>Probando CSS usando el tag style </h2> 
</body> 
</html> 
 
Si tenemos varias etiquetas <h2> y solo quiero modificar una, puedo asignar el 
atributo class y diferenciarla. 
<!doctype html> 
<html lang="es"> 
<head> 
 <meta charset="utf-8"> 
 <title>Embedded styles</title> 
 <style> 
 h2.alerta{ 
 color: red; 
 font-weight:normal; 
} 
</style> 
</head> 
<body> 
<h1>Lorem ipsum dolor sit amet...</h1> 
<h2 class="alerta">Probando CSS...</h2> 
<h2> Otro título en h2… </h2> 
</body> 
</html> 
 
También podemos definir que solo se cambie aquellas que tienen como atributo 
class=”alert”, independientemente del tag. 
Ejemplo 
<!doctype html> 
<html lang="es"> 
<head> 
 <meta charset="utf-8"> 
 <title>Embedded styles</title> 
 <style> 
 .alerta{ 
 color: red; 
 font-weight:normal; 
} 
</style> 
</head> 
<body> 
<h1 class="alerta">Lorem ipsum dolor sit amet...</h1> 
<h2 class="alerta">Probando CSS...</h2> 
<h2> Otro título en h2… </h2> 
</body> 
</html> 
 
Fuentes y Tipografía 
h1 { 
 font-family: Georgia, "Times New Roman", Times, serif; 
 font-size: 2em; 
 font-weight: normal; 
 font-style: italic; 
} 
 
Cómo añadir fuentes de Google Fonts 
Podemos ver las disponibles en: https://fonts.google.com/ 
 
@import url(https://fonts.googleapis.com/css?family=Crushed); 
 
h2{ 
 font-family: 'Crushed', cursive; 
 font-size: 1.5em;} 
 
Existen otros atributos útiles. Por ejemplo: 
line-height: 1.6; 
Asigna el valor del espacio entre líneas en 1.6. 
text-align: justify; 
Es la propiedad para alinear al texto: left, right, center, justify… 
width: 80%; 
Width, asigna el valor del ancho que ocupara el elemento en la pantalla. 
Por ejemplo: 
body { 
 width: 70%; 
} 
 
Márgenes 
 
https://fonts.google.com/
https://fonts.googleapis.com/css?family=Crushed
margin: 10px 5px 15px 20px; 
• top margin is 10px 
• right margin is 5px 
• bottom margin is 15px 
• left margin is 20px 
margin: 10px 5px 15px; 
• top margin is 10px 
• right and left margins are 5px 
• bottom margin is 15px 
 
margin:10px 5px; 
• top and bottom margins are 10px 
• right and left margins are 5px 
 
margin:10px; 
all four margins are 10px 
También se pueden especificar individualmente usando las propiedades: 
margin-top , margin-bottom , margin-left, margin-right 
 
Ejemplo con un paragraph <p> 
p { 
 line-height: 1.6; 
 text-align: justify; 
 margin: 1em 0 .4em; 
 margin-bottom: 1em; 
 width: 80%; 
 } 
 
Colores 
background-color: #E6E6E6; 
color: #FFF; (si es una fuente por ejemplo) 
 
Se puede colocar en hexadecimal, colocando el nombre del color o en rgb(valor, 
valor, valor) 
 
 
		CSS - Cascading Style Sheets –
		Método inline
		Método Interno
		Fuentes y Tipografía
		Cómo añadir fuentes de Google Fonts
		Márgenes
		Colores
__MACOSX/Apuntes WEB/._Apuntes CSS.pdf
Apuntes WEB/Apuntes HTML.pdf
 
 
APUNTES DE HTML 
PROGRAMACIÓN WEB 
PROF. ANA CORRALES PAREDES 
 
ENERO DE 2017 
1 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 
Tags para Formato de Texto 
<br> 
Salto de línea 
El elemento p (párrafo) es el apropiado para distribuir el texto en párrafos. Crea una caja: en 
bloque. 
Si quiero colocar una caja vacía, para agregar un espacio en blanco, puedo usar 
<p>&nbsp;</p> 
non-breaking space: &nbsp; Tiene el efecto de pulsar la barra espaciadora. 
Es útil para colocar espacios entre palabras. 
No confundir con un salto de línea o <br>. 
Tamaños 
<p style="font-size: 40px;">Esto está a un tamaño de 40px</p> 
<p style="font-size: small;">Esto está a un tamaño small</p> 
<p style="font-size: medium;">Esto está a un tamaño medium</p> 
<p style="font-size: large;">Esto está a un tamaño large</p> 
<p style="font-size: xx-large;">Esto está a un tamaño xx-large</p> 
<p style="font-size: xx-small;">Esto está a un tamaño xx-small</p> 
<p style="font-size: 2%;">Esto está a un tamaño 2%</p> 
<p style="font-size: 20%;">Esto está a un tamaño 20%</p> 
<p style="font-size: 80%;">Esto está a un tamaño 80%</p> 
<p style="font-size: 200%;">Esto está a un tamaño 200%</p> 
<p style="font-size: 300%;">Esto está a un tamaño 300%</p> 
 
 
<pre> </pre> 
El Elemento HTML <pre> (o Texto HTML Preformateado) representa texto preformateado. El 
texto en este elemento típicamente se muestra en una fuente fija, no proporcional, 
exactamente como es mostrado en el archivo. Los espacios dentro de este elemento también 
son mostrados como están escritos. 
 
2 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 
Títulos 
<h1> <h2> … <h6> 
 
 
 
<i> </i> <em> </em> 
Coloca el texto en cursiva 
<i> Contenido </i> 
<em> Contenido </em> 
<b> </b> 
Coloca el texto en negrita 
También es posible usar el elemento <strong> </strong> 
 
<blockquote> </blockquote> 
Texto en formato cita 
 
3 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
Caracteres especiales 
 
 
<span> </span> 
 
Nos permite aplicar nuestros propios estilos en una línea 
<p>My mother has <span style="color:blue">blue</span> eyes.</p> 
 
Divisiones 
<div> </div> 
Es la hermana mayor del párrafo <p>. Se utiliza para dividir el contenido de la web en 
subgrupos o divisiones. Se utiliza para mantener unidos objetos relacionados (párrafos, 
imágenes, etc.) 
Es útil pensar en las divisiones como capítulos de un libro, donde los párrafos permanecen 
agrupados. 
4 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
<div style="color: blue;"> 
 <h2> Ejemplo de div y span </h2> 
 <p> 
 Esto es un párrafo dentro de un div, 
 <span style="color: red;"> y esto un span dentro de un párrafo.</span> 
 </p> 
</div> 
 
 
Imágenes 
 
img (no necesita cerrar el tag) 
<img src="url" alt="some_text" style="width:width;height:height;"> 
 
<!DOCTYPE html> 
<html> 
<body> 
 
<h2>Spectacular Mountain</h2> 
<img src="pic_mountain.jpg" alt="Mountain 
View" style="width:304px;height:228px;"> 
 
<img src="smiley.gif" alt="Smiley face" height="42" width="42"> 
 
</body> 
</html> 
 
Enlaces 
Existen 2 tipos, absolutos y relativos. 
Absolutos
Los absolutos son los que me proporcionan la dirección con la ruta completa. 
<a href=http://madrid.universidadeuropea.es/conoce-uem/campus-
universitarios/selecciona-campus> Como llegar a la UEM </a> 
 
Relativos 
 No proporcionan todos los detalles de la página a la que se hace referencia. 
 Son útiles para enlazar con otras páginas que estén en el mismo sitio Web. 
http://madrid.universidadeuropea.es/conoce-uem/campus-universitarios/selecciona-campus
http://madrid.universidadeuropea.es/conoce-uem/campus-universitarios/selecciona-campus
5 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 
 
 
 
6 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 Si el directorio comienza por una barra (/), se trata de un subdirectorio del directorio 
raíz. 
 Si comienza por un punto y una barra (./ ), se trata de un subdirectorio del directorio 
actual, en el que reside la página actual. 
 Si comienza por dos puntos y una barra(../), se trata de un directorio anterior al 
actual. 
Destinos del enlace 
El atributo target de los enlaces permite elegir dónde queremos que se abra el documento 
de destino: 
 target= _blank Abre el documento en una ventana nueva o pestaña. 
 target = _self Muestra el destino en el frame actual. 
 target = _parent Muestra el destino en el frame padre. 
 target = _top Lo abre en la ventana principal sustituyendo todos los marcos. 
 
Enlaces ancla 
Se usan cuando quiero ir a un sitio dentro de la misma web. En ocasiones, tenemos páginas 
que nos interesa enviar a estas visitas no a una página sino a una "parte" concreta de una 
página de nuestra web. Usados en webs del tipo One Page. 
http://www.sonnylangers.com/ 
Se puede usar el atributo name o id 
Ejemplo 
 
<h1><a name=”intro”>Introducción</a></h1> 
 
<h1 id=”intro”>Introducción</h1> 
 
El link a esa sección quedaría de la siguiente manera 
<a href=”#intro”> Enlace a Introducción </a> 
Elementos de Organización 
Listas 
Listas descriptivas 
<dl> 
 <dt>Coffee</dt> 
 <dd>Black hot drink</dd> 
 <dt>Milk</dt> 
 <dd>White cold drink</dd> 
</dl> 
http://www.sonnylangers.com/
7 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
Listas Simples 
<ul> 
 <li>Coffee</li> 
 <li>Tea</li> 
 <li>Milk</li> 
</ul> 
 
Listas Ordenadas 
<ol> 
 <li>Coffee</li> 
 <li>Tea</li> 
 <li>Milk</li> 
</ol> 
 
Tablas 
<table> Es el tag que representa el elemento Tabla 
<tr> Corresponde a la fila de una tabla 
<td> Columnas de la tabla 
Tabla Simple 
<table> 
 <tr> 
 <td>John</td> 
 <td>Doe</td> 
 </tr> 
 <tr> 
 <td>Jane</td> 
 <td>Doe</td> 
 </tr> 
</table> 
 
Tabla con Cabecera o título 
<p>Simple table with header</p> 
<table> 
 <tr> 
 <th>First name</th> 
 <th>Last name</th> 
 </tr> 
 <tr> 
 <td>John</td> 
 <td>Doe</td> 
 </tr> 
 <tr> 
 <td>Jane</td> 
 <td>Doe</td> 
 </tr> 
</table> 
 
8 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 
Tabla con <colgroup> y color 
<table> 
 <colgroup> 
 <col span="2" style="background-color:red"> 
 <col style="background-color:yellow"> 
 </colgroup> 
 <tr> 
 <th>ISBN</th> 
 <th>Title</th> 
 <th>Price</th> 
 </tr> 
 <tr> 
 <td>3476896</td> 
 <td>My first HTML</td> 
 <td>$53</td> 
 </tr> 
</table> 
 
 
Tablas con bordes 
 
Se pueden colocar bordes usando el Atributo border. 
También podemos asignar el número de columnas o filas que deseamos que ocupe un dato. 
Ejemplo 
9 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
<table border=1> 
 <thead> 
 <tr> 
 <th colspan="2">Alumnos de Programación Web </th> 
 </tr> 
 <tr> 
 <th>Nombre</th> 
 <th>Apellido</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>Iván</td> 
 <td>Calvo Figueroa</td> 
 </tr> 
 <tr> 
 <td>Sergio</td> 
 <td>Candel Van Kooten</td> 
 </tr> 
 <tr> 
 <td>David</td> 
 <td>Fernández Cruz</td> 
 </tr> 
 <tr> 
 <td>Ricardo</td> 
 <td>López Pensado</td> 
 </tr> 
 </tbody> 
 </table> 
 
 
 Probar colocando el atributo cellspacing=0 
Formularios 
 
Los formularios de HTML proporcionan una manera de utilizar una interfaz gráfica estándar 
para presentar y recoger datos. 
Incluyen: 
10 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 Cuadros de texto, 
 Casillas de verificación, 
 Listas desplegables, etc. 
 
<form> 
. 
 
. 
</form> 
 
 
Texto 
 
<form> 
 Firstname:<br> 
 <input type="text" name="firstname"><br> 
 Lastname:<br> 
 <input type="text" name="lastname"> 
</form> 
 
Botones de selección (radio) 
 
<form> 
 <input type="radio" name="gender" value="male" checked> Male<br> 
 <input type="radio" name="gender" value="female"> Female<br> 
 <input type="radio" name="gender" value="other"> Other 
</form> 
 
Boton Submit <input type="submit"> 
 
<form action="action_page.php"> 
 First name:<br> 
 <input type="text" name="firstname" value="Mickey"><br> 
 Last name:<br> 
 <input type="text" name="lastname" value="Mouse"><br><br> 
 <input type="submit" value="Submit"> 
</form> 
 
11 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
Área de Texto 
<textarea rows="4" cols="50"> 
Ingrese aquí su texto 
</textarea> 
 
Menú desplegable de selección 
<select> 
 <option value="volvo">Volvo</option> 
 <option value="saab">Saab</option> 
 <option value="mercedes">Mercedes</option> 
 <option value="audi">Audi</option> 
</select> 
 
Selección agrupada 
<select> 
 <optgroup label="Swedish Cars"> 
 <option value="volvo">Volvo</option> 
 <option value="saab">Saab</option> 
 </optgroup> 
 <optgroup label="German Cars"> 
 <option value="mercedes">Mercedes</option> 
 <option value="audi">Audi</option> 
 </optgroup> 
</select> 
 
Formulario agrupado 
 
<form> 
 <fieldset> 
 <legend>Datos personales:</legend> 
 Nombre: <input type="text"><br> 
 Email: <input type="text"><br> 
 Fecha de Nacimiento: <input type="date"> 
 </fieldset> 
</form> 
 
Etiqueta Meta <meta> 
 
Describe información del documento HTML. Debe ir dentro del elemento <head> 
12 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
<head> 
 <meta charset="UTF-8"> 
 <meta name="description" content="Descripción 
del contenido de la web"> 
 <meta name="keywords" content="HTML,CSS,XML,Ja
vaScript"> 
 <meta name="author" content="Juan Schafer"> 
 <meta name="viewport" content="width=device-
width, initial-scale=1.0"> 
</head> 
13 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 
Diseño de la web 
 
 
 
14 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
Semantic Elements 
 
 <header/> : Nos permite identificar la cabecera de la página, de un documento o 
sección. 
<header> 
 <h1>Título</h1> 
 <p>Texto que también forma parte de la cabecera</p> 
 </header> 
 <nav/> : Nos permite marcar conjunto de links como menús y por tanto ayudar a 
los buscadores a detectar nuestra estructura web 
<nav> 
 <a href="/html/">HTML</a> | 
 <a href="/css/">CSS</a> | 
 <a href="/js/">JavaScript</a> | 
 <a href="/jquery/">jQuery</a> 
</nav> 
 <main> Especifica el contenido principal de un documento. 
15 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
El contenido dentro del elemento <main> debe ser exclusivo para el documento. No 
debe contener ningún contenido que se repita en documentos como barras laterales,
vínculos de navegación, información sobre derechos de autor, logotipos de sitios y 
formularios de búsqueda. 
 <section> : Define una sección en un documento. 
<section> 
 <h1>Título de la sección</h1> 
 <p>Texto explicativo….</p> 
</section> 
 <article> : El elemento <article> especifica un contenido independiente y 
autónomo. Un artículo debe tener sentido por sí mismo, y debería ser posible leerlo 
independientemente del resto del sitio web. 
Ejemplos de dónde puede usarse un elemento <article>: 
Puede representar un artículo, ya sea un artículo de opinión, un entrada en un blog, un 
comentario en un foro, una noticia, una descarga, o simplemente un contenido estático de 
una web como el típico quienes somos o a qué nos dedicamos. Por ejemplo, se usa para 
representar el contenido típico que se publica en una RSS. 
<article> 
 <h1>Título de la sección</h1> 
 <p>Texto explicativo….</p> 
</article> 
 <aside>. Es una columna o sección que normalmente contiene datos relacionados al 
contenido principal pero con una relevancia o importancia menor. El contenido e 
<aside> debe estar relacionado con el contenido principal. 
El elemento <aside> puede estar localizado en cualquier parte del diseño; la etiqueta no 
define la posición. El elemento <aside> sólo describe la información que engloba, no un 
lugar en la estructura y se puede utilizar siempre que el contenido no quiera ser 
considerado como el contenido principal del documento. 
 <footer>: especifica un pie de página para un documento o sección. 
Un pie de página normalmente contiene al autor del documento, información sobre 
derechos de autor, enlaces a términos de uso, información de contacto, etc. 
 
<footer> 
 <p>Autor: Juan Pérez</p> 
 <p>Contacto: <a href="mailto:juanperez@example.com"> 
 juanperez@example.com</a>.</p> 
</footer> 
 
 
 
 
16 
 
Programación Web anadelvalle.corrales@universidadeuropea.es 
 
 
Ejemplo de una web (body) 
 
<body> 
<header> 
 <p class="logo"><a href="...">...</a></p> 
 <nav><ul> 
 <li><a href ... </li> 
 [etc...] 
 </ul></nav> 
</header> 
<article> 
 <header> 
 <hgroup><h1>Mi titulo</h1><h3>Mi subtítulo</h3></hgroup> 
 </header> 
 <section> 
 <p>Contenido contenido contenido</p> 
 </section> 
 <aside> 
 <p>Datos extra para completar el contenido</p> 
 </aside> 
</article> 
<div class="blocks"> 
 <section> 
 <hgroup><h2>Bloque 1 que nos ha puesto el diseñador</h2></hgroup> 
 <ul><li>...</li></ul> 
 </section> 
 <section> 
 <hgroup><h2>Bloque 2 que nos ha puesto el diseñador</h2></hgroup> 
 <ul><li>...</li></ul> 
 </section> 
</div> 
<footer> 
<ul><li><a href="... [links del footer]</li></ul> 
</footer> 
 
__MACOSX/Apuntes WEB/._Apuntes HTML.pdf
Apuntes WEB/Captura de pantalla 2017-02-23 a las 11.58.52.png
__MACOSX/Apuntes WEB/._Captura de pantalla 2017-02-23 a las 11.58.52.png
Apuntes WEB/Intro Javascript(1).pdf
Image by Lumina
Programación Web
Prof. Ana Corrales Paredes
Ana Corrales Paredes
Front End
HTML CSS JS
Estructura esencial Diseño de la página Comportamiento
Ana Corrales Paredes
JavaScript
• JavaScript es un lenguaje de scripting multiplataforma y 
orientado a objetos.
• No es necesario compilar.
• Es interpretado comando por comando cada vez que se 
ejecuta.
• Los programas escritos con JavaScript se pueden probar 
directamente en cualquier navegador
• JavaScript no es Java
• Controlan eventos de usuario, tales como:
• Al hacer clic en un elemento.
• la entrada de datos en un formulario 
• y la navegación por una página.
Ana Corrales Paredes
Ana Corrales Paredes
JavaScript
Limitaciones
• No pueden comunicarse con recursos que no 
pertenezcan al mismo dominio desde el que se 
descargó el script
• No pueden cerrar ventanas que no hayan abierto 
esos mismos scripts
• No pueden acceder a los archivos del ordenador 
del usuario (ni en modo lectura ni en modo 
escritura)
• No pueden acceder a dispositivos (hardware)
Ana Corrales Paredes
JavaScript
Sintáxis
• No se tienen en cuenta los espacios en blanco.
• Se distinguen las mayúsculas y minúsculas
• No se define el tipo de las variables
• Se pueden incluir comentarios
Tipos de Variables
• Numéricas
• Cadenas de texto
Una nueva línea \n
Un tabulador \t
Una comilla simple \'
Una comilla doble \"
Una barra inclinada \\
Tipos de Variables
• Arrays
• Booleanos
Control de flujo
• If
if(condicion) {
... 
}
• If / else
if(condicion) {
... 
}
else {
... 
}
Funciones
function nombre_funcion() {
... 
}
function nombre_funcion(par1, par2) {
... 
}
• Document Object Model permite a los 
programadores web acceder y manipular las 
páginas HTML
Ana Corrales Paredes
DOM
HTML
head body
meta title
texto
p ul
texto strong li li li
texto atexto texto texto
texto
Ana Corrales Paredes
var parrafos = document.getElementsByTagName("p");
var enlaces = primerParrafo.getElementsByTagName("a");
var primerParrafo = parrafos[0];
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
Acceso a DOM
Ana Corrales Paredes
Acceso a DOM
Ana Corrales Paredes
Crear elementos DOM
• A partir de la página web proporcionada y 
utilizando las funciones DOM, mostrar por pantalla 
la siguiente información:
• Número de enlaces de la página
• Dirección a la que enlaza el penúltimo enlace
• Numero de enlaces que enlazan a http://prueba/
• Usar elemento.href para acceder al atributo del link. 
• Número de enlaces del tercer párrafo
Ana Corrales Paredes
Ejercicios DOM
http://prueba/
• Completar el código JavaScript proporcionado para 
que se añadan nuevos elementos a la lista cada vez 
que se pulsa sobre el botón. Utilizar las funciones 
DOM para crear nuevos nodos y añadirlos a la lista 
existente. En este ejercicio, sólo se debe saber que 
al pinchar sobre el botón, se ejecuta la función 
llamada agregar().
Ana Corrales Paredes
<input type="button" value="Añadir elemento" onclick="agregar();">
Ejercicios DOM
• onload
• onclick, 
• onmouseover,
• onmouseout
Ana Corrales Paredes
Eventos
Ana Corrales Paredes
Acceso a Formularios
Ana Corrales Paredes
Acceso a Formularios
o
• onchange se produce cuando el usuario cambia el valor 
de un elemento de texto (<input 
type="text"> o <textarea>). 
También se produce cuando el usuario selecciona una 
opción en una lista desplegable (<select>). 
• onclick evento que se produce cuando se hace click
sobre un elemento.
• onfocus se produce cuando el usuario selecciona un 
elemento del formulario.
• onblur: se produce cuando el usuario 
ha deseleccionado un elemento por haber seleccionado 
otro elemento del formulario.
Ana Corrales Paredes
Eventos usados en formularios
o
• Obtener datos
• Cuadro de texto
Ana Corrales Paredes
Formularios
o
• Obtener datos
• Radio button
Ana Corrales Paredes
Formularios
o
• Obtener datos
• Checkbox
Ana Corrales Paredes
Formularios
• www.w3.org
• www.whatwg.org
• www.webplatform.org
• www.developers.mozilla.es
Bibliografía
Ana Corrales Paredes
http://www.w3.org/
http://www.whatwg.org/
http://www.webplatform.org/
http://www.developers.mozilla.es/
__MACOSX/Apuntes WEB/._Intro Javascript(1).pdf
Apuntes WEB/Intro Web Parte 2.pdf
Image by Lumina
Programación Web
Prof. Ana Corrales Paredes
Ana Corrales Paredes
WEB
WWW (World Wide Web) Sistema de distribución de documentos 
de hipertexto 
Permite a los usuarios consultar 
información de forma rápida y 
sencilla. 
Ana Corrales Paredes
WEB
Elementos Multimedia Enlaces de hipertexto
1. A otras páginas web.
2. Llamadas a programas.
Ana Corrales Paredes
WEB
Tim Berners-Lee Robert Caillau
¿CUÁNDO?
1989 - 1990
¿DÓNDE?
CERN: 
European Organization for 
Nuclear Research
¿PARA QUÉ?
Sistema estándar para la 
distribución de
documentos
Ana Corrales Paredes
World Wide Web
Red de millones de computadoras 
de todo el mundo que se utilizan 
para compartir y transmitir 
información. 
Sistema de distribución de documentos 
de hipertexto.
Es un modo de transmitir datos sobre
Internet usando el protocolo HTTP
Ana Corrales Paredes
Clientes
WEB
Los clientes hacen las peticiones, interpretan y 
muestran al usuario el contenido de la web.
Ana Corrales Paredes
Servidores
WEB
Los servidores son aplicaciones que ofrecen 
contenido o servicios web a los clientes
Ana Corrales Paredes
WEB
Cliente Servidor
Internet
HTTP
Ana Corrales Paredes
WEB
Las diferentes aplicaciones web se comunican a través de protocolos de red. 
Hypertext Transfer Protocol o HTTP (en 
español protocolo de transferencia 
de hipertexto) :
Es el protocolo de comunicación que permite 
las transferencias de información en la World
Wide Web
Ana Corrales Paredes
WEB
¿Cómo se accede al contenido?
URL (Uniform Resource Locator) o Localizador 
de Recursos Uniforme.
http://localhost:8080/
Protocolo Resource name
<Protocolo>://<dirección de maquina>:<puerto>/<ruta>/<fichero>
http://madrid.universidadeuropea.es/
ftp://ftp.rediris.es 
Ana Corrales Paredes
WEB
Cliente
Web Server
HTTP
http://www.20minutos.es205.251.196.234
DNS (Domain Names Server)
Ana Corrales Paredes
Ana Corrales Paredes
Requisitos de un sitio Web
1. Requisitos Funcionales: 
1. ¿Cuál es el objetivo?
2. ¿Qué tipo de usuarios tendrá?
3. ¿Qué tareas llevarán a cabo los usuarios?
4. Funciones del sitio
Ana Corrales Paredes
Requisitos de un sitio Web
1. Arquitectura del sitio web: Organización de contenidos
2. Usabilidad
3. Accesibilidad: “El poder de la web es su universalidad”
4. Rendimiento
5. Funcionamiento bajo cualquier entorno
6. Responsive
Ana Corrales Paredes
CREATIVIDAD
Ana Corrales Paredes
EVALUACIÓN
Entrega de trabajos realizados a lo largo del curso: 
Examen teórico: 
Proyecto:
30%
35%
35%
Evaluación competencial: 10% de las notas del trabajo en clase 
y del proyecto final
Responsabilidad, asistencia, toma de decisiones, 
Trabajo en equipo…
Mínimo un 5 en todas las actividades para la nota media ponderadaAna Corrales Paredes
anadelvalle.corrales@universidadeuropea.es
16:00Martes
Ana Corrales Paredes
__MACOSX/Apuntes WEB/._Intro Web Parte 2.pdf
Apuntes WEB/Prog. Web Tema 1. Intro Web.pdf
Image by Lumina
Programación Web
Prof. Ana Corrales Paredes
If you don't have an E-mail address, you're in the Netherworld. If 
you don't have your own World Wide Web page, 
you're a nobody. 
Clifford Stoll
www.thehowlcollective
Presenter
Presentation Notes
Ian Ritchie
Tim Berners-Lee
Inventó WWW en 1989
Fundó el consorcio W3C en 1994
Fundó la Web Foundation
Co-fundó el Open Data Institute
Presenter
Presentation Notes
Robert Caillou
Primera comunicación entre un cliente y un servidor usando el protocolo HTTP 
 En octubre de 1994 fundó el Consorcio de la World Wide Web (W3C) con sede en el MIT, para supervisar y estandarizar el desarrollo de las tecnologías sobre las que se fundamenta la Web y que permiten el funcionamiento de Internet.
 Él y su grupo crearon lo que por sus siglas en inglés se denomina Lenguaje HTML (HyperText Markup Language) o lenguaje de etiquetas de hipertexto, el protocolo HTTP (HyperText Transfer Protocol) y el sistema de localización de objetos en la web URL (Uniform Resource Locator).

He founded the Web Foundation whose mission is that the WWW serves Humanity, and co-founded the Open Data Institute in London
WWW
World Wide Web
Internet!=
Red de millones de computadoras 
de todo el mundo que se utilizan 
para compartir y transmitir 
información. 
Sistema de distribución de documentos 
de hipertexto.
Es un modo de transmitir datos sobre Internet 
usando el protocolo HTTP
Presenter
Presentation Notes
Internet Red de millones de computadoras de todo el mundo 
que se utilizan para compartir y transmitir información. 
Esto se hace a través de varios protocolos y lenguajes e incluye cosas 
como correo electrónico, mensajería SMS, datos de aplicaciones, 
así como la propia web.
Clientes Servidores
WEB
Presenter
Presentation Notes
Los clientes hacen las peticiones, interpretan y muestran al usuario el contenido de la web.
�Los servidores son aplicaciones que ofrecen contenido o servicios web a los clientes













































































































WEB
Cliente Servidor
Internet
HTTP
Presenter
Presentation Notes
Los clientes hacen las peticiones, interpretan y muestran al usuario el contenido de la web.
�Los servidores son aplicaciones que ofrecen contenido o servicios web a los clientes

Hypertext Transfer Protocol o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo de comunicación que permite las transferencias de información en la World Wide Web

Navegador web o browser : programa que se ejecuta en tu ordenador y te muestra los archivos de la web











































































































Full Stack Web Developer
		Slide Number 1
		Slide Number 2
		Slide Number 3
		Slide Number 4
		Slide Number 5
		Slide Number 6
		Slide Number 7
		Slide Number 8
		Slide Number 9
		Slide Number 10
		Slide Number 11
		Slide Number 12
		Slide Number 13
		Slide Number 14
		Slide Number 15
__MACOSX/Apuntes WEB/._Prog. Web Tema 1. Intro Web.pdf
Apuntes WEB/Prog. Web. UA1. Tema 2. Arquitecturas Distribuidas.pdf
Programación	Web
UA1.	Arquitecturas	Distribuidas
Tema	2:	Arquitecturas	Distribuidas
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Sistemas	Distribuidos
§ Un	Sistema	Distribuido	es	un	sistema	software	cuyos	elementos	están	repartidos
entre	diferentes	equipos	o	máquinas	que	se	comunican	entre	sí.	
§ La	comunicación se	realiza	mediante	el	paso	de	mensajes.
§ Esta	estrategia	suele	implicar	concurrencia:	varios	elementos	del	sistema	pueden	
esta	funcionando	a	la	vez.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Características	de	un	sistema	distribuido
§ Heterogeneidad
§ Debe	poder	conectar	máquinas	de	diferentes	redes,	diferentes	plataformas	
HW,	SO,	etc.
§ Extensibilidad
§ Propiedad	de	extender	o	expandir	un	elemento	hacia	otros.	Por	ejemplo,	en	
la	web	podemos	hacer	clic	en	un	enlace	que	nos	lleve	a	una	imagen.
§ Para	lograr	esto	es	necesario	que	las	interfaces	sean	bien	conocidas,	para	
saber	qué	servicios	ofrece	cada	máquina	del	sistema	distribuido.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Características	de	un	sistema	distribuido
§ Seguridad
§ Cualquier	dato	recibido	por	alguna	de	las	máquinas	podría	ser	malicioso,	por	
lo	que	la	seguridad	es	clave.
§ Escalabilidad
§ Garantiza	que	el	consumo	de	recursos	del	sistema	(almacenamiento,	
memoria,	etc.)	es	proporcional	al	número	de	usuarios	o	peticiones	recibidas.
§ Gestión	del	fallo
§ Debe	tolerar	fallos	y	recuperarse	de	los	mismo.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Características	de	un	sistema	distribuido
§ Transparencia
§ El	cómo	se	organiza	la	distribución,	comunicación	del	sistema	y	la	gestión	de	
sus	recursos	debe	ser	transparente	al	usuario.
§ Concurrencia
§ La	concurrencia	implica	la	ejecución	
simultanea de	tareas,	lo	que	puede	
implicar	que	diferentes	máquinas	del	
sistema	traten	de	acceder	a	un	mismo	
recuso	a	la	vez,	con	los	problemas	que	
esto	puede	originar.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Sistemas	distribuidos	vs	paralelos
§ Ambos	tipos	de	sistemas	tienen	el	mismo	objetivo:
§ Procesar	más	información	usando	recursos	que	funcionan	
concurrentemente.
§ Aún	así	hay	diferencias	significativas.
§ Sistema	paralelo:
§ Una	sola	máquina	con	varios	procesadores	intercomunicados.
§ Comparten	memoria	local
§ Sistema	distribuido:
§ Varias	máquinas	comunicadas	en	red.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Capas	de	software
§ Capa	de	aplicación
§ Es	el	resultado	del	desarrollo	cuando	se	
programan	aplicaciones	distribuidas.
§ Middleware
§ Es	una	capa	lógica	cuyo	objetivo	es	hacer	de	
intermediario entre	las	comunicaciones	de	una	
aplicación	y	otros	elementos	(otras	aplicaciones,	
redes,	hardware,	sistemas	operativos,	etc.)
§ Plataforma	(S.O.	y	Hardware)
§ Se	refiere	al	hardware	en	general	(ordenador,	
hardware	de	red)	y	los	elementos	software	de	
más	bajo	nivel,	como	S.O.,	sistemas	
empotrados,	drivers,	etc.
S.O. HW
Middleware
Capa	de	
aplicación
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Arquitectura	cliente	– servidor
§ Es	una	de	las	arquitecturas	distribuidas	más	utilizadas.
§ Es	simple,	potente	y	versátil.
§ Consiste	básicamente	en	la	existencia	de	dos	roles:
§ Clientes:	máquinas	que	piden	la	información	y	quedan	a	la	espera	de	recibirla.
§ Servidores:	máquinas	reactivas,	a	la	espera	de	solicitudes	de	información	que	procesar.
Servidor
Cliente
Servidor	(y	cliente)
Cliente solicitud
respuesta
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Arquitectura	cliente	– servidor
§ En	ocasiones	un	servidor	puede	hacer	una	petición	a	otro	servidor.
§ Por	ejemplo	un	servidor	web	haciendo	una	consulta	a	un	servidor	de	BBDD	
para	mostrar	un	contenido	dinámico.
§ Ventajas:
§ Control	centralizado:	la	gestión	y	actualización	de	recursos	la	gestiona	el	
servidor.
§ Escalabilidad:	se	puede	aumentar	la	capacidad	de	cada	nodo	por	separado.	
§ Fácil	mantenimiento: se	pueden	llevar	a	cabo	actualizaciones	de	manera	
transparente	al	usuario.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Arquitectura	cliente	– servidor
§ Desventajas:
§ Congestión:	el	exceso	de	peticiones	a	un	mismo	servidor	pueden	
provocar	la	caída	del	servicio.
§ Centralización	del	servicio:	si	el	servidor	no	está	activo,	no	se	puede	
acceder	a	los	recursos.	
§ En	redes	P2P,	por	ejemplo,	el	contenido	se	reparte	entre	
diferentes	pares.
§ Fuerte	dependencia	HW	y	SW:	las	especificaciones	del	equipo	
pueden	influir	mucho	en	la	eficacia	del	servidor.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Actividad:	ataque	DDoS
§ Un	ataque	DDoS es	un	ataque	de	denegación	de	servicios,	uno	de	los	más	
comunes	en	Internet.
§ Se	pide:
1. Indicar	en	qué	consiste	exactamente	este	tipo	de	ataques.
2. Documentar	al	menos	dos	ejemplos	reales,	por	ejemplo	uno	más	
representativo	y	otro	más	reciente.
3. Indicar	las	estrategias	más	comunes	utilizadas	para	protegerse	ante	este	
tipo	de	ataques.
http://bit.ly/200ZDnO
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Arquitectura	multi-servidor
§ Es	una	extensión	del	enfoque	cliente—servidor	clásico.
§ Se	plantea	para	cubrir	situaciones	en	las	que	un	solo	servidor	no	puede	cubrir	
todas	las	solicitudes.
§ ¿Cómo	funciona?
§ El	cliente	se	conecta	a	un	servidor.
§ Internamente	se	decide	quién	resuelve	la	petición	(balanceo	de	carga).
§ Normalmente	todos	los	servidores	replican	la	información	y	servicios.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Servidores	proxy	y	cachés
§ Se	trata	de	dos	tipos	de	servidores	que	suelen	trabajar	conjuntamente.
§ Se	utilizan	mucho	en	lugares	donde	muchos	usuarios	comparten	conexión	a	
Internet.
§ Servidor	proxy:
§ Servidor	por	el	que	pasan	todas	las	conexiones	entre	una	red	local	y	otra	red	(también	
local	o	externa).
§ Suelen	usarse	para	filtrar	contenidos	(spam,	porno,	violencia,	etc.).
§ Servidor	caché:
§ También	centralizan	toda	la	información.	Suelen	estar	
asociados	a	servidores	proxy.
§ Su	objetivo	es	almacenar la	información	que	entra	en	la	
red	local	procedente	de	otra.
§ Así,	si	otro	usuario	solicita	la	misma	información	no	es	
necesario	repetir	la	petición.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	Distribuidas.	
Arquitecturas	peer-to-peer	(P2P)
§ Se	trata	de	una	arquitectura	“entre	iguales”	(pares,	“peers”).
§ Los	nodos	pueden	hacer	tanto	de	servidores	como	de	clientes	a	la	vez.
§ Se	usan	principalmente	para	crear	redes	de	distribución	de	contenidos.
§ Un	cliente	puede	estar	descargando	parte	de	un	fichero	y	a	la	vez	estar	enviando	otras	
partes	ya	descargadas.
§ Permite	distribuir	gran	cantidad	de	contenido	sin	necesidad	de	tener	servidores	
dedicados.	Ejemplo:	Spotify
Nodo
Nodo
Nodo
__MACOSX/Apuntes WEB/._Prog. Web. UA1. Tema 2. Arquitecturas Distribuidas.pdf
Apuntes WEB/Prog. Web. UA1. Tema 3. Arquitecturas N capas.pdf
Programación	Web
UA1.	Arquitecturas	Distribuidas
Tema	3:	Arquitecturas	de	N	capas
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Introducción
§ El	modelo	multicapa	es	una	arquitectura	cliente-servidor	donde	se	
separa	la	aplicación	en	diferentes	capas	(n	capas).
§ Cada	capa	es	la	responsable	de	un	aspecto	del	sistema.
Arquitectura	de	mainframes
§ Antiguamente	la	estrategia	mas	utilizada	era	la	basada	en	mainframes.
§ Los	mainframes	son	servidores	con	gran	capacidad	de	proceso y	
almacenamiento.
§ Los	usuarios	accedían	al	mainframe	desde	máquinas	“tontas”
§ Toda	la	información	y	todas	las	aplicaciones	residían	en	el	mainframe.
§ Los	terminales	sólo	servían	como	equipos	de	interacción.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	dos	capas
§ En	la	arquitectura	cliente-servidor	de	2	capas	la	organización	es	la	
siguiente:
§ Cliente:	
§ Presentación	de	datos	(interfaz).
§ Procesamiento	de	datos.
§ Lógica	de	negocio.
§ Bases	de	datos.
§ Servidor:
§ Alojamiento	de	la	BD.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	dos	capas
§ Ventajas:
§ Se	reduce	notablemente	la	carga	de	trabajo	del	servidor.
§ Desventajas:
§ Gestión	de	la	seguridad:	no	tenemos	el	control	en	el	servidor	o	en	un	único	
lugar.
§ Mayores	costes	y	esfuerzos	de	implantación y	mantenimiento al	estar	la	
lógica	de	negocio	en	los	clientes.
§ Escalabilidad:	tampoco	controlamos	el	HW	y	SW	del	cliente.
AplicaciónCapa
Cliente
Datos	del
negocio
Capa
Servidor
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	tres	capas
§ Surge	como	alternativa	al	problema	de	
tener	tanta	carga
en	el	lado	del	cliente.
§ Separa	la	lógica	de	negocio,	la	lógica	de	
presentación	(interfaz)	y	los	datos.
§ El	cliente se	encarga	de	la	interfaz	y	
conecta	con	el	servidor.
§ El	servidor lleva	la	lógica	de	negocio	y	
conecta	con	otro	servidor	de	datos.
§ El	servidor	de	datos	gestiona	la	BD,				
donde	están	los	datos	del	negocio.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	tres	capas
§ Principales	ventajas:
§ Mayor	facilidad	de	mantenimiento
§ Mejor	balanceo	de	carga	al	separar	los	
datos	del	negocio	de	sus	reglas.
§ Mejora	y	mayor	transparencia	en	al	
seguridad.
§ Clientes	más	ligeros.
§ Mejora	en	la	escalabilidad.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	tres	capas
§ Existen	muchas	variantes	de	esta	arquitectura.	Todas	encajan	en	este	
esquema	general:
Capa	de	
Datos
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	tres	capas
§ Capa	de	datos
§ Formada	por	los	SGBD	(MySQL,	PostgreSQL,	Oracle,	etc.)
§ Idealmente	se	encarga	únicamente	del	almacenamiento y	recuperación
de	los	datos.	
§ No	debería	ser	su	responsabilidad	manipular	y	enviar estos	datos.
§ Capa	de	acceso	a	datos
§ Hace	de	interfaz con	la	BD.
§ Permitirá	operaciones	de	creación	y	gestión	de	conexiones,	o	bien	
hacer	altas	o	bajas	en	la	BD.	
§ En	general	se	encarga	de	gestionar	las	sentencias	SQL contra	la	BD.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	tres	capas
§ Capa	de	negocio
§ Es	donde	se	realiza	el	procesamiento dentro	de	la	aplicación.
§ Contiene	las	reglas	de	negocio,	las	reglas	de	manipulación	de	datos,	etc.
§ Esta	capa	no	sabe	cómo:
1. Presentar	o	mostrar los	datos	 à Capa	de	presentación
2. Acceder a	los	datos	 à Capa	de	acceso	a	datos
§ “Sólo”	sabe	trabajar	con	ellos	(procesarlos)	para	producir	los	resultados	
esperados.
§ Si	decidimos	modificar	la	BD	o	la	interfaz	esto	no	afecta	para	nada	a	
esta	capa.
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
Arquitectura	de	tres	capas
§ Capa	de	presentación
§ Es	la	responsable	de	la	interfaz del	usuario.
§ Trabaja	con	los	resultados	devueltos	por	la	capa	de	negocio.
§ Los	presenta	de	manera	atractiva	y	fácil	de	entender	por	el	usuario.
§ Capa	proxy	y	de	lógica	distribuida
§ No	todas	las	aplicaciones	presentan	estas	capas.
§ Capa	proxy:	hace	de	intermediaria	entre	la	capa	de	lógica	distribuida	y	
la	de	negocio	cuando	hay	que	trabajar	de	manera	distribuida.	
Enrique	Puertas	– enrique.puertas@universidadeuropea.es
Programación	Web.	Arquitecturas	Distribuidas.	
Arquitecturas	de	N	capas.	
MVC	vs.	Arquitectura	de	N	capas
§ La	arquitectura	de	N	capas	puede	recordar	a	patrón	Modelo	Vista	
Controlador	(MVC),	pero	existen	diferencias:
§ El	MVC	está	pensado	para	sistemas	ejecutados	en	una	misma	máquina,	no	
distribuidos.
§ La	arquitectura	del	MVC	es	triangular,	no	lineal	como	la	de	N	capas:
§ N	capas:	el	cliente	nunca	interactúa	con	el	servidor	de	datos.	Todo	se	hace	a	través	del	
servidor	de	lógica	de	negocio.
Usuario
Modelo
Vista
Controlador
Capa	de	Datos
Capa	de
Presentación
Capa	de	Negocio
__MACOSX/Apuntes WEB/._Prog. Web. UA1. Tema 3. Arquitecturas N capas.pdf
Apuntes WEB/Prog.Web.Tema 4. Intro HTML.pdf
Image by Lumina
Programación Web
Prof. Ana Corrales Paredes
Ana Corrales Paredes
Front End
HTML CSS JS
Estructura esencial Diseño de la página Comportamiento
Ana Corrales Paredes
Presenter
Presentation Notes
Documentos de hipertexto: documento enlazados entre sí.	








































HTML Hypertext Markup Language
• Contenido
• Markup
• Referencias a otros documentos
• Links a otras páginas
Ana Corrales Paredes
Estructura de una página HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Título de mi web</h1>
<p>Mi primer párrafo.</p>
</body>
</html>
Ana Corrales Paredes
Estructura de una página HTML
Ana Corrales Paredes
Ana Corrales Paredes
Estructura de una página HTML
Ana Corrales Paredes
Editores para HTML
• Notepad++
• Brackets www.brackets.io
• www.scratchpad.io
Ana Corrales Paredes
http://www.brackets.io/
http://www.scratchpad.io/
HTML
Plain Text
En la asignatura Programación Web vamos a aprender HTML 
MarkupTags
<name> Contenido </name>
elemento
Ana Corrales Paredes
HTML
Text
En la asignatura Programación Web vamos a aprender HTML 
Bold tag
<b> Contenido </b>
<em> Contenido </em>
Cursiva
Ana Corrales Paredes
HTML
• Probar tags anidados.
• ¿Qué pasa si no coloco el final de la 
etiqueta?
Ana Corrales Paredes
HTML
Texto en línea, cajas de texto
<br> Funciona como un break o salto de línea
Estamos aprendiendo <br> HTML
<!– Contenido -->
<span> text 1 
Text 2 
</span> My mother 
has <span style="color:blue">blue</span> eyes.
Ana Corrales Paredes
HTML
Cajas de texto
Párrafo
<p> Content </p>
<p> Línea 1 </p>
<p> Línea 2 </p>
En bloque (Caja imaginaria)
<div> Texto 1 </div> Texto 1
Ana Corrales Paredes
HTML
HTML Attributes 
<tag ATTR= ”value”> Contenido </tag>
Links
Anchor <a> </a> 
<a href = “http://www.google.es”> Buscador 
</a>
Ana Corrales Paredes
http://www.google.es/
HTML
Cajas de texto
<div style="color:#0000FF">
<h3>Título</h3>
<p>Párrafo.</p>
</div>
<p>Mas texto….</p>
Ana Corrales Paredes
HTML
Imágenes <img>
<img src =”url” ALT=”texto que se muestra cuando la imagen no carga ”>
Ana Corrales Paredes
Ana Corrales Paredes
• www.w3.org
• www.whatwg.org
• www.webplatform.org
• www.developers.mozilla.es
Bibliografía
Ana Corrales Paredes
http://www.w3.org/
http://www.whatwg.org/
http://www.webplatform.org/
http://www.developers.mozilla.es/
		Slide Number 1
		Slide Number 2
		Slide Number 3
		Slide Number 4
		Slide Number 5
		Slide Number 6
		Slide Number 7
		Slide Number 8
		Slide Number 9
		Slide Number 10
		Slide Number 11
		Slide Number 12
		Slide Number 13
		Slide Number 14
		Slide Number 15
		Slide Number 16
		Slide Number 17
		Slide Number 18
__MACOSX/Apuntes WEB/._Prog.Web.Tema 4. Intro HTML.pdf
Entonces, ¿te gustó este material?
Ayude a animar a otros estudiantes a mejorar el contenido
¿Te gustó este material? ¡Compartir! 🧡