2 1 HTML PDF

Tema 2 (primera parte)
Lenguajes de
marcado: HTML
y XHTML
http://www.flickr.com/photos/nolanus/5848333881/
1. Conceptos bsicos
2. Formatos bsicos
3. Multimedia
4. Secciones de pgina
5. Formularios
6. Tablas
2.1
Conceptos
http://www.flickr.com/photos/26158205@N04/4500611033/
bsicos
HTML 4, HTML5, XHTML...
Lenguajes de marcado
HTML Lenguajes de marcado 3
Lenguaje de marcado (etiquetas) para escribir pginas web

<p>Como mucha gente sabe, los <strong> lenguajes
de marcado </strong> usan etiquetas mezcladas
con el texto </p>
Es el contenido de la pgina, no el estilo (apariencia visual)
El estilo se expresa en otro lenguaje llamado CSS
Tiene una sintaxis no demasiado estricta
An as, un alto porcentaje de las pginas web existentes (alrededor de un 70%, segn
estudios de Google) contienen errores de sintaxis
Qu ocurrira si realmente los navegadores fueran tan estrictos como los
compiladores?...
La versin actual es la 4.01 (la 5 est en desarrollo)
El lenguaje lo define un organismo internacional llamado W3C, en el que participan
empresas, universidades, organismos sin nimo de lucro, As se asegura que los
estndares no son propiedad de nadie
HTML 4 vs. XHTML Lenguajes de marcado 4
XHTML contiene las mismas etiquetas que HTML (es decir, cualquier
navegador antiguo lo lee perfectamente), solo que tiene una sintaxis
mucho ms estricta
Se facilita la deteccin y correccin automtica de errores
Se simplifica la tarea del navegador. El parser es ms sencillo
Por desgracia, en la prctica se ha visto que el incentivo para usar XHTML
en vez de HTML es pequeo
Como las etiquetas son las mismas, no aporta nada nuevo, salvo la satisfaccin
de las cosas bien hechas. Cuntale eso a alguien que hace webs con FrontPage
Un documento XHTML se puede enviar en modo texto (compatible HTML)
o XML (algo as como estricto). Si se hace de la ltima forma, El IE8 no lo
acepta. Si se hace de la primera, entonces le estamos diciendo al navegador
(cualquiera) que no se ponga estricto con la sintaxis. Con lo que no hemos
ganado mucho
El W3C ha tirado la toalla y deja de apoyar XHTML en favor de HTML 5
HTML 5 vs. HTML 4 Lenguajes de marcado 5
Una evolucin de HTML 4, no de XHTML

Sintaxis menos estricta, perdonando los errores del autor
S se define de forma estricta cmo procesar (perdonar) los errores
Ms orientado a aplicaciones web que a pginas estticas
Se puede dibujar en 2D sobre <canvas>
Se puede mostrar video sin Flash ni otros plugins
http://openvideo.dailymotion.com/
http://www.youtube.com/html5
Hay nuevos APIs javascript
Ver por ejemplo http://html5demos.com/
Tambin hay nuevas etiquetas
Para representar elementos comunes en muchas pginas: barras de navegacin,
pies
Para mejorar los formularios HTML, un poco anticuados
Lxico de HTML Lenguajes de marcado 6
Las maysculas/minsculas no son significativas. En XHTML deberan

ser minsculas
<P> Esto es raro pero vlido en HTML, aunque no en XHTML </p>
No son significativos los espacios en blanco, retornos de carro o

tabuladores (como en casi cualquier lenguaje de programacin)
En contra de lo que pudiera
parecer, todo esto aparecer dentro del mismo prrafo en
HTML, y todo seguido
Se pueden deben poner comentarios 

Entidades: smbolos accesibles mediante un cdigo
< (<)!& (&) € () 水 (ideograma
Etiquetas Lenguajes de marcado 7
Etiqueta:
<h1>
Elemento: <etiqueta> contenido </etiqueta>

<h1> Bienvenidos a mi pgina </h1>

<hr></hr>

<hr/>
Atributos: pares nombre=valor. Siempre van en la apertura,

nunca en el cierre. Las comillas son opcionales en HTML y
obligatorias en XHTML

<h1 id=titulo> Bienvenidos a mi pgina </h1>
Estructura de un documento HTML5 Lenguajes de marcado 8
Declaracin de tipo
<!DOCTYPE html>
de documento
<html>
! <head>
!! <title> Cabecera (HEAD)
! ! Mi primer documento HTML Ttulo pgina (TITLE)
Metainformacin (META)
! ! </title> Estilos (STYLE)
! </head>
! <body>
!! <p>Hola mundo!</p> Cuerpo
! </body>
</html>
Los DOCTYPES Lenguajes de marcado 9
Indican el lenguaje que usamos (HTML5/HTML4/XHTML) e

incluso la variante
Por ejemplo, HTML4 viene en tres variantes, strict, transitional y
frameset
Con IE5 para Mac a Microsoft se le ocurri la idea de usar el
DOCTYPE para indicar si se quiere o no respetar el estndar
Si no hay DOCTYPE, los navegadores (no solo IE) se ponen en quirks
mode: no se respeta estrictamente el estndar y se usan los mismos
trucos/errores que a finales de los 90 (poca del IE5.5)
Si hay DOCTYPE, se respeta el estndar (standards mode)
En realidad, la cosa es ms complicada, ya que hay un almost
standards mode (!). Consultad http://hsivonen.iki.fi/doctype/
Estructura de un documento XHTML Lenguajes de marcado 10
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" Declaracin de tipo
"DTD/xhtml1-strict.dtd"> de documento
<html xmlns="http://www.w3.org/1999/xhtml">
<head> Cabecera (HEAD)
<title> Ttulo pgina (TITLE)
Metainformacin (META)
Mi primera pgina XHTML
Estilos (STYLE)
</title>
</head>
<body> Cuerpo
Hola mundo <br/ >
</body>
</html>
2.2
Texto y enlaces
http://www.flickr.com/photos/26158205@N04/4500611033/
Estilos bsicos
Texto bsico Lenguajes de marcado 12
Recordad que los espacios, etc. no son significativos, por lo que

hacen falta etiquetas para saltar de lnea
Saltos de lnea <br>
No es verdad, ngel de amor <br> que en esta apartada
Orilla <br> ms pura la luna brilla <br> y se respira
mejor?
Prrafos: <p>
<p> Esto es un prrafo </p>
<p> Y esto otro </p>
Forzar espacio en blanco:

Texto: estilos basados en contenido Lenguajes de marcado 13
Indican estructura ms que estilo

Ejemplo: un elemento nfasis (<em>) simplemente debe destacarse del
resto del texto. Normalmente esto se interpreta como cursiva. <strong>
es nfasis fuerte, normalmente negrita
Encabezados: definen secciones <h1>...</h1>,.. <h6>...</h6>
Por defecto, el tamao de letra de h1 es el mayor y va disminuyendo hasta
h6
<h1> Introduccin al HTML </h1>

<h2> Etiquetas y atributos </h2>
<h2> Estructura de un documento </h2>
Texto: estilos fsicos Lenguajes de marcado 14
Indican formato concreto (tienden a desaparecer)
Negrita <b>, itlica <i>, grande <big>, subndices <sub>, superndices

<sup>,...
Para dar estilo fsico se usa CSS
<b> Negrita </b>, <i> itlica </i>, H<sub>2</sub>O

Listas Lenguajes de marcado 15
Cada elemento se define con un <li>

Listas con vietas <ul>
La lista de la compra:
<ul>
<li> Patatas </li>
<li> 1 botella de Smirnoff </li>
</ul>
Listas numeradas <ol>

<ol>
! <li> Conceptos bsicos </li>
! <ol>
! ! <li> Sintaxis bsica
! ! <li> Estructura de un documento </li>
! </ol>
! <li>Texto </li>
</ol>
Enlaces: etiqueta <a> Lenguajes de marcado 16
Define un enlace o destino de enlace

Atributos
href: URL a la que se enlaza (absoluta o relativa)
id: para crear un destino de salto
Aqu tienes informacin sobre mi <a href=#experiencia>

experiencia laboral </a>, estudios, <a
href=aficiones.html> aficiones </a>, ...
Estudi en la <a href=http://www.ua.es> Universidad de

Alicante </a>
...
<a id=experiencia> Experiencia laboral </a>
Tres aos como programador en Java en...
Los enlaces y el HTTP Lenguajes de marcado 17
Al pulsar en un enlace estamos desencadenando una peticin HTTP

al servidor (GET)
En aplicaciones web se suelen usar enlaces con parmetros.Veremos

cmo se pueden generar los valores de los parmetros sobre la
marcha usando Javascript
<a href=verNota?id=21230345> Pedro Prez </a> <br/>

<a href=verNota?id=21783843> Eva Martnez </a> <br/>
2.3
Multimedia
http://www.flickr.com/photos/30363492@N06/5852901232
Imgenes (HTML4), audio y

video (HTML5)
Imgenes: etiqueta <img> Lenguajes de marcado 19
Atributos
src: URL del fichero que contiene la imagen
alt: texto alternativo
width, height: ancho y alto en pixels
border: ancho del borde en pixels (mejor a 0 en enlaces)
Este soy yo:<img src=homer.jpg alt=Foto de

Homer>

<a href=http://www.ua.es/TW> <img src=logoTW.gif
width=200 height=100 border=0> </a>
Video Lenguajes de marcado 20
Con HTML5 se hace posible introducir video y audio de forma

nativa
Ya que hasta el momento solo se poda hacer con plugins (Flash)
En teora debera ser tan sencillo como con las imgenes
<video src= "mivideo.m4v" width="320" height="240"
controls></video>
Por desgracia, no todos los navegadores implementan los mismos

codecs
De hecho, no hay un codec compatible con TODOS los navegadores
Video para todos los navegadores Lenguajes de marcado 21
Necesitamos el mismo video en diferentes formatos

Tomado de Video for everybody http://camendesign.com/code/
video_for_everybody
<video width="640" height="360" controls>


<source src=mivideo.mp4" type="video/mp4" />
<source src=mivideo.ogv" type="video/ogg" />

<object width="640" height="360" type="application/x-shockwave-flash"
data=flash_player.swf">

<param name="movie" value=flash_player.swf" />
<param name="flashvars" value="controlbar=over&
image=poster.jpg&file=mivideo.mp4" />
</object>
</video>
2.4
Secciones de
pgina
http://www.flickr.com/photos/roguemm/2890526876
Todas las pginas tienen

secciones diferenciadas:
cabecera, contenido, pie,
Lenguajes de marcado barra de navegacin...
Secciones de pgina en HTML4 Lenguajes de marcado 23
Las etiquetas <div> y <span> permiten marcar las secciones

lgicas del documento
<div> fuerza retorno de carro antes y despus, no as <span>
<body>
<div id="cabecera">
<img src="imag/logo.png" />
</div>
<div id="navegacion">
<p>Enlaces</p>
<a href="...">Principal</a>
<a href="...">Teora</a>
...
</div>
<div id="novedades">
<h1>Novedades</h1>
<span class="fecha">(27-09-07)</span>
<a href="...">Notas...</a><br />
...
</div>
<div id="contenido"><br />
<h1>Curso 2006/2007</h1>
...
</div>
</body>
Secciones de pgina en HTML5 Lenguajes de marcado 24
<section>: una seccin de un documento

<article>: un elemento auto-contenido como un post de un blog o
un artculo en una revista
<aside>: algo separado del contenido principal o tangencial a l
<nav>: barra de navegacin con enlaces
<header>: cabecera o introduccin a algo
<footer> pie o apndice o similar
Etiq. HTML5 en navegadores antiguos Lenguajes de marcado 25
Cuando un navegador se encuentra con una etiqueta que no

entiende simplemente la ignora
Las etiquetas que el navegador entiende tienen asociado un formato
visual especial, pero no as las dems
Tendremos que asociar un formato visual a estas etiquetas. Esto se hace
con CSS (parte 2 de este tema)
En Explorer 8 y anteriores hay que usar algn que otro truco, ver por
ejemplo http://remysharp.com/2009/01/07/html5-enabling-
script/
http://caniuse.com Tablas
de compatibilidad de varios navegadores
con HTML5 (entre otros estndares)
2.5
Formularios
http://www.flickr.com/photos/cssercom/5419851057
Enviar datos al servidor
Formularios y HTTP Lenguajes de marcado 27
Como es lgico, una aplicacin tiene que tener datos de entrada

para poder trabajar. Los formularios son la forma ms comn de
enviar datos al servidor.
Se enva lo que tecleamos en los campos de texto, las opciones que
marcamos, los archivos que subimos...
Al pulsar en el botn de enviar o aceptar de un formulario, se
desencadena una peticin HTTP al servidor
Hasta ahora solo hemos visto peticiones GET, pero existen
tambin las peticiones POST. La diferencia bsica est en dnde se
envan los datos (los parmetros)
Paso de parmetros: GET vs. POST Lenguajes de marcado 28
Los parmetros siempre se envan como una secuencia

parametro=valor&parametro2=valor2

login=pepe&password=nunca%20lo%20adivinarias
Con GET, van en la lnea de peticin

Se ven en la URL del navegador
Tienen una longitud limitada (255 en teora, aunque bastante ms en la
prctica)
Con POST, van en el cuerpo de la peticin (tras la lnea en blanco)

GET vs. POST (II) Lenguajes de marcado 29
GET: en enlaces o formularios con datos cortos y no privados
GET /login.jsp?login=pepe&pw=pepito HTTP/1.0

(resto de la peticin)
POST: normalmente en formularios
POST /login.jsp HTTP/1.0

(cabeceras)
(lnea en blanco)
login=pepe&pw=pepito
Formularios: <form> Lenguajes de marcado 30
Atributos:
action: URL del programa que va a tratar el formulario
method: cmo se enviarn los datos (GET o POST)
enctype: cmo se codifican los datos antes de enviarlos (no es lo mismo
que encriptar). Salvo que tengamos un formulario para subir archivos, no
hace falta especificarlo en general.
<form action=login method=post>

! Login: <input type=text name=login> <br>
! Password: <input type=password
name=password> <br>
! <input type=submit value=entrar>
</form>
Envo de los datos Lenguajes de marcado 31
Como se ha visto, los datos son pares variable=valor

El nombre de la variable se saca del atributo name asociado al campo
El valor es el contenido actual del campo o el del atributo value
En botones, el value es el texto del botn
<form action=login method=post>

! Login: <input type=text name=login
value=guest> <br>
! Password: <input type=password
name=password> <br>
! <input type=submit value=entrar>
</form>
Controles de formulario Lenguajes de marcado 32
La mayor parte se definen con <input>

El atributo type indica el tipo de control
Controles bsicos
Cuadro de texto de 1 lnea: type=text
Cuadro de password: type=password
No se muestra en pantalla: type=hidden (para cuando se necesita
enviar un parmetro fijo con el que no queremos marear al usuario)
Subir archivo: type=file. Necesita del enctype="multipart/
form-data" en el formulario
Botones de accin
Enviar formulario: type=submit
Borrar controles: type=reset
Controles (II): Casillas de verificacin Lenguajes de marcado 33
type=checkbox
Todos los del mismo grupo deben tener el mismo name
<form action=user.jsp method=get>
Describa aficiones: <br/>
<input type=checkbox name=aficion value=cine checked> Cine
<input type=checkbox name=aficion value=alcohol> Alcohol y otros
<input type=submit value=Enviar>
</form>
Peticin HTTP: user.jsp?aficion=cine

Controles (III): Botones de radio Lenguajes de marcado 34
type=radio
Todos los del mismo grupo deben tener el mismo name
<input type=radio name=voto value=enrique checked> Enrique
Iglesias
<input type=radio name=voto value=manolo> Manolo Kabezabolo
<input type=submit value=Vota!>
</form>
Peticin HTTP: user.jsp?voto=enrique

Controles (IV): cuadros de lista Lenguajes de marcado 35
<select>: cuadro de lista o lista desplegable

Atributos
multiple: si est presente, se puede seleccionar ms de una opcin
size=tamao: nmero de opciones simultneas en pantalla (si tamao=1,
lista desplegable)
<option>: define cada opcin

Atributos
value: si no est presente, el value es el contenido de <option>
selected: seleccionada por defecto
Controles (IVb) cuadros de lista Lenguajes de marcado 36

<select name=edad size=1>
<option value=1> menor de 18 </option>
<option value=2 selected> 18-25 </option>
<option value=3> mayor de 25 </option>
</select>
</form>
Peticin HTTP: user.jsp?edad=2

Controles (V): rea de texto Lenguajes de marcado 37
Cuadros de texto multilinea

<textarea name=texto rows=4 cols=40>
Este texto saldr escrito por defecto
</textarea>
</form>
Formularios en HTML5 Lenguajes de marcado 38
Incluyen (entre otras cosas) varios tipos nuevos de controles

<input>
Campo de email <input type=email>
Campo de URL <input type=url>
Campo de nmero <input type=number>
Slider <input type=range>
Fecha <input type=date>
Los navegadores que no reconocen los campos anteriores los tratan
por defecto como type=text
As que no se pierde nada por usarlos (aunque probablemente tampoco
se gane mucho ahora mismo)
Por desgracia, los que los reconocen son todava pocos. Por el
momento, el ms destacado es Opera
Mviles y formularios HTML5 Lenguajes de marcado 39
El navegador del iPhone adapta el teclado virtual en pantalla al tipo

de campo, para optimizar la escritura. Por el momento Android no
lo hace.
http://www.flickr.com/photos/teleniek0/3345012448
2.6
Tablas
Un poco de historia Lenguajes de marcado 41
Hace unos aos las tablas eran el nico medio que tena el
diseador web para poder maquetar las pginas (distribuir en
pantalla los elementos)
Hoy en da para eso se usa el CSS, que veremos en la siguiente parte

del tema
Si esta fuera una asignatura de diseo web, las tablas para maquetar
estaran estrictamente prohibidas, pero adoptaremos un punto de
vista pragmtico
Podis maquetar con CSS (preferiblemente) o con tablas, pero
conforme se complica la estructura, las tablas van complicando en
exceso el HTML
Tablas HTML para maquetar Lenguajes de marcado 42
Tablas: <table> Lenguajes de marcado 43
Algunos atributos:
width: ancho en pixeles o en porcentaje de
ventana (%)
border: ancho del borde
cellspacing: espacio entre celdas
cellpadding: espacio entre limite de celda y
texto en ella
Tablas (II) Lenguajes de marcado 44
<thead>: cabecera de la tabla (opcional)

<tbody>: cuerpo de la tabla (opcional)
<tr>: define una fila de datos
<td>: define una celda de datos (en la cabecera es <th> en lugar de
<td>)
Algunos atributos
width: ancho en pixeles o en porcentaje de tabla (%). Se suele dar ancho a
las celdas de la primera fila, y las siguientes conservan este ancho
height: alto mnimo
rowspan: filas abarcadas por la celda
colspan: columnas abarcadas por la celda
Tablas (III) Lenguajes de marcado 45
<table border="3" cellspacing="10" cellpadding="5">

<thead>
<tr>
<th colspan="2">Temas</th>
<th width=50%> Sesiones </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> HTTP </td>
<td> 1 </td>
</tr>
<tr>
<td> 2 </td>
<td>XHTML y CSS </td>
<td> 3 </td>
</tr>
</tbody>
</table>

2 1 HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

2 1 HTML PDF

Uploaded by

Copyright:

Available Formats

Tema 2 (primera parte)

HTML 4, HTML5, XHTML...

Lenguaje de marcado (etiquetas) para escribir pginas web

Una evolucin de HTML 4, no de XHTML

Las maysculas/minsculas no son significativas. En XHTML deberan

No son significativos los espacios en blanco, retornos de carro o

Se pueden deben poner comentarios

Atributos: pares nombre=valor. Siempre van en la apertura,

Indican el lenguaje que usamos (HTML5/HTML4/XHTML) e

Recordad que los espacios, etc. no son significativos, por lo que

Forzar espacio en blanco: &nbsp;

Indican estructura ms que estilo

<h1> Introduccin al HTML </h1>

Indican formato concreto (tienden a desaparecer)

Negrita <b>, itlica <i>, grande <big>, subndices <sub>, superndices

<b> Negrita </b>, <i> itlica </i>, H<sub>2</sub>O

Cada elemento se define con un <li>

Listas numeradas <ol>

Define un enlace o destino de enlace

Aqu tienes informacin sobre mi <a href=#experiencia>

Estudi en la <a href=http://www.ua.es> Universidad de

Al pulsar en un enlace estamos desencadenando una peticin HTTP

En aplicaciones web se suelen usar enlaces con parmetros.Veremos

<a href=verNota?id=21230345> Pedro Prez </a> <br/>

Imgenes (HTML4), audio y

Este soy yo:<img src=homer.jpg alt=Foto de

Con HTML5 se hace posible introducir video y audio de forma

Por desgracia, no todos los navegadores implementan los mismos

Necesitamos el mismo video en diferentes formatos

<video width="640" height="360" controls>

Todas las pginas tienen

Las etiquetas <div> y <span> permiten marcar las secciones

<section>: una seccin de un documento

Cuando un navegador se encuentra con una etiqueta que no

Enviar datos al servidor

Como es lgico, una aplicacin tiene que tener datos de entrada

Los parmetros siempre se envan como una secuencia

Con GET, van en la lnea de peticin

Con POST, van en el cuerpo de la peticin (tras la lnea en blanco)

GET: en enlaces o formularios con datos cortos y no privados

GET /login.jsp?login=pepe&pw=pepito HTTP/1.0

POST: normalmente en formularios

POST /login.jsp HTTP/1.0

<form action=login method=post>

Como se ha visto, los datos son pares variable=valor

<form action=login method=post>

La mayor parte se definen con <input>

Peticin HTTP: user.jsp?aficion=cine

Peticin HTTP: user.jsp?voto=enrique

<select>: cuadro de lista o lista desplegable

<option>: define cada opcin

<form action=user.jsp method=get>

Peticin HTTP: user.jsp?edad=2

Cuadros de texto multilinea

<form action=user.jsp method=get>

Incluyen (entre otras cosas) varios tipos nuevos de controles

El navegador del iPhone adapta el teclado virtual en pantalla al tipo

Hoy en da para eso se usa el CSS, que veremos en la siguiente parte

<thead>: cabecera de la tabla (opcional)

<table border="3" cellspacing="10" cellpadding="5">

You might also like

Forzar espacio en blanco: