Está en la página 1de 60

HTML/CSS

Mi primera pgina

Qu es HTML
Es un lenguaje de marcas para formatear y
estructurar un documento, que puede leerse en
cualquier navegador.
<html> </html>

Estandarizado en la norma ISO de SGML


(Standard Generalized Markup Lenguage).
El W3C desarrolla especificaciones tcnicas y
directrices, de forma que se pueda asegurar una
alta calidad tcnica y editorial.

Estructura HTML
Un documento HTML tiene tres etiquetas que describen la
estructura general de un documento y dan una informacin sencilla
sobre l. <html>, <head> y <body>
Las etiquetas pueden escribirse tanto en maysculas como en
minsculas, pero se recomienda el uso de minsculas: <html> o
<HTML>, <body> o <BODY>
Editor

Visualizacin en el navegador

Estructura HTML
<!doctype html> declara un documento HTML5 para que se
visualice correctamente.
Doctype comienza a utilizarse en HTML4.01 y XHTML
http://validator.w3.org/

<!doctype html>

Estructura HTML
<html> para identificar que esta codificado en este lenguaje y
Limitar, el principio y el fin del documento.
<html> </html >

Estructura HTML
<HEAD> la cabecera, que contiene informacin y recursos sobre el
propio documento y que no aparece en el documento, destacando
el titulo <TITLE>. Ser el nombre que aparece en la cabecera del
visualizador y en los buscadores de ah la importancia de que sea
significativo.
<head> </head>
<title> </title>

Estructura HTML
La etiqueta meta define varios tipos de metadatos.
El atributo charset especifica la codificacin usada en nuestra
pgina.
<meta charset="character_set">
<meta charset="utf-8">

Estructura HTML
Charset utf-8 es la Unicode Transformation Format 8-bit representa
el cdigo de caracteres UNICODE. Es compatible con ASCII.
Permite visualizar los caracteres de todos los idioma.

Estructura HTML
Caracteres especiales: para incluir en el texto caracteres que son propias del
lenguaje HTML es necesario usar su anotacin codificada:
http://dev.w3.org/html5/html-author/charref
Espacio en blanco (non-breaking space)

&nbsp;

<

Menor que

&lt;

>

Mayor que

&gt;

&

Ampersand

&amp;

Comillas

&quot;

apstrofo

&apos;

Estructura HTML
<body> El cuerpo contiene los elementos visibles en la pgina.
Las imgenes, los encabezados, los prrafos de texto, las listas, las
tablas, los hipervnculos
<body> </body>

Editores HTML
Antes de comenzar a trabajar con un editor especfico, es recomendable conocer
el cdigo.
Podemos usar programas que trabajen con texto plano, sin aadir sus propias
marcas de edicin, en Windows el Bloc de Notas y en Macintosh el TextEdit.
TextEdit est por defecto en Rich Text es necesario configurarlo para que guarde
tu trabajo como archivos de texto plano.
Los documentos HTML deben tener la extensin html o htm.
Usar un editor wysiwyg como el Adobe Dreamweaver o el BlueGriffon
(http://www.bluegriffon.org/) o un editor con ayudas visuales como el sublime
(http://www.sublimetext.com/) nos facilitar las cosas.
Ver comparativa: http://en.wikipedia.org/wiki/Comparison_of_HTML_editors

Estructura HTML
Mi primera pgina vista en el programa Bloc de Notas

Estructura HTML
Mi primera pgina vista en el programa Sublime.

Estructura HTML
Mi primera pgina vista en el programa Dreamweaver.

Lenguaje HTML
Un documento HTML inserta en el texto etiquetas que controlan
los diferentes aspectos de la presentacin y la semntica del
contenido.
Los textos habituales estn formados por encabezados <h1>,
prrafos <p>, texto importante <strong>, enfatizado <em>, listas
<ul> <li>...

Selectores CSS
Para aplicar un estilo de presentacin, el selector de elemento
puede ser una etiqueta HTML:
p, h1, ul, li
El estilo afecta a todo el contenido incluido dentro de esa etiqueta
<p> </p>, <h1></h1>, <ul></ul>.
El selector puede aplicarse a ms de una etiqueta HTML:
elemento, elemento
h1,h2, h3
Afecta a los elementos <h1>, <h2> y <h3>.

CSS
El estilo puede estar en la cabecera de la pgina, debe expresarse
en un elemento <style> dentro de la cabecera <head> del
documento.
Selector { y cada declaracin: propiedad : valor;}

Recursos HTML
MDN: Lista de Elementos HTML5
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
W3C: HTML5 elements
http://dev.w3.org/html5/markup/elements.html

Woork Up: HTML5 tag reference


http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-CheatSheet1.pdf

HTML/CSS(
Marcas(bsicas(

HTML(
Las(marcas(de(texto(en(html,(se(emplean(para(el(estructurado(
(((
semnTco(del(contenido.(
((
((
Los(textos(habituales(estn(formados(por(prrafos,(palabras(en(
negrita(o(cursiva,(anotaciones(y(correcciones,(citas(a(otros(
documentos(externos...(
(
Marcado(bsico:(
<p></p>(e(prrafo(
<em></em>(e(da(nfasis(al(texto(que(encierra(
<strong></strong>(e(Mxima(importancia(al(texto(que(encierra(

Las(eKquetas(<b>(para(la(bold(o(negrita((y(la(eKqueta(<i>(para(la(itlica(o(cursiva,(
son(similares(visualmente,(pero(sin(signicado(semnKco.((
h\p://www.w3.org/wiki/HTML/Elements/b(

(
(

CSS(
El(lenguaje(de(marcas(HTML,(est(orientado(a(la(denicin(de(la(
(((
estructura(y(la(semnKca(del(documento(y(no(a(su(representacin(
((
(
grca.((
(
CSS(controla(el(aspecto(grco(del(documento(mediante(hojas(de(
esKlo)(style)sheets),(indicando(al(navegador(como(se(deben(
visualizar(los(elementos(de(un(documento(HTML.(As(se(consigue(
separar(el(aspecto(del((contenido.(
(
(
(
Proyecto(css(Zen(Garden:(
h\p://www.mezzoblue.com/zengarden/alldesigns/(
(
(
(

CSS(
Cada(eKqueta(HTML(Kene(unos(valores(de(CSS(por(defecto,(que(
(((
pueden(variar(segn(el(navegador,(que(tendremos(que(modicar(
((
(
con(nuestros(esKlos(personales.((
(
( Visualizacin(valores(por(
(
defecto(CSS(en(el(navegador(

HTML(
Ejemplo(valores(CSS(por(defecto(del(navegador,(de:(h1,(p,(strong,(
(((
em.(
((
h1({(
display:(block;(
((
p({(
fontesize:(2em;(
display:(block;(
(
marginebefore:(0.67em;(
(

marginea{er:(0.67em;(
marginestart:(0;(
margineend:(0;(
fonteweight:(bold;(}(

strong({(
fonteweight:(bold;(}(

marginebefore:(1em;(
marginea{er:(1em;(
marginestart:(0;(
margineend:(0;(}(

em({(
fontestyle:(italic;(}(

CSS(
Ms(informacin(valores(por(defecto:(
(((
W3C:(
((
h\p://dev.w3.org/html5/markup/elements.html(
(

(
Internet(Explorer:((
h\p://www.iecss.com/((

(
Firefox:(

h\p://mxr.mozilla.org/mozillaecentral/source/layout/style/html.css(

(
Chrome,(Safari:(

h\p://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css(

(
Opera(

h\p://www.iecss.com/operae10.51.css(

(
(

CSS(
La(primera(forma(de(aadir(el(esKlo(CSS(a(un(documento(HTML(es(
(((
con(elementos(en(lnea,(es(el(mtodo(ms(sencillo,(aadiendo(un(
((
(
atributo(style(en(el(elemento(concreto(dentro(de(la(pgina.(No(se(
pueden(reuKlizar(para(varios(elementos(que(comparten(las(mismas(
propiedades.(
Se(escriben(las(propiedades(del(esKlo(en(las(marcas(del(HTML(como(
"nombre:(valor"(separadas(por(punto(y(coma.(
((
<body style="color: red; ">
<p style="font-size: 16px; color: blue; font-family: Arial,
Helvetica, sans-serif;">
Mi primera pgina</p>

(
(
(

CSS(
La(segunda(forma(aade(el(esKlo(CSS(en(un(bloque(<style>(en(la(
(((
cabecera((<head>)(y(aplica(el(esKlo(a(varios(elementos(de(la(pg..(
((
Cada(elemento(HTML(Kene(una(caja(asociada,(donde(aplican(los(
(
comandos(de(esKlo(CSS.(El(color(de(fondo(aplicado(a(cada(
elemento(HTML(del(ejemplo,(muestra(la(caja(asociada(a(cada(uno.(
(
(
(
(

CSS(
Lo(ms(aconsejable(para(mantener(la(separacin(entre(contenido(y(
(((
presentacin,(en(una(hoja(de(esKlo(CSS(separada(del(HTML,(que(se(
((
importa(con(un(elemento(<link>(en(la(cabecera.(
(
((
(
(
(
(

CSS(
La(principal(ventaja(es(que(las(hojas(
(((
de(esKlo(son(aplicables(a(una(o(a(
((
muchas(pginas.(Permite(adems((
(
adaptar(la(presentacin(a(PCs,(
mviles,(tabletas(o(impresoras((con(
el(atributo(media(que(acKvar(el(
esKlo(especco(de(cada(disposiKvo.(
(
<link rel="stylesheet"
type="text/css" media="screen"
href="sans-serif.css">
<link href=estilo.css"
rel="stylesheet" type="text/css"
media="(min-width:380px)">

h\p://www.w3.org/TR/css3emediaqueries/(((

CSS(
Formato(de(las(normas(y(comandos(de(esTlo(
(((
(((
((
(
((
El(esKlo(se(dene(entre(llaves("{"(y("}";(el(selector(determina(sobre(
que(elementos(HTML(aplica(el(esKlo,(cada(bloque)de)declaracin:(
{declaracin;(declaracin}(separadas(por(punto(y(coma(";".((
Cada(declaracin:(propiedad(:(valor,((ja(un(valor(para(una(
propiedad)del)es>lo).(((
(
H1 {color : green; text-align : center}

(
(
(
(

HTML(
Listas:(
(((
<ul></(ul(>(e(dene(listas,(no(ordenadas.(
((
<ol></(ol(>(e(dene(listas,(ordenadas.(
(
<li></li>(e(dene(los(elementos(de(las(listas(
(
(
(

ul({(
display:(block;(
listestyleetype:(disc;(
marginebefore:(1em;(
marginea{er:(1em;(
marginestart:(0;(
margineend:(0;(
paddingestart:(40px;(}(
ol({(
display:(block;(
listestyleetype:(decimal;(
marginebefore:(1em;(
marginea{er:(1em;(
marginestart:(0;(
margineend:(0;(
paddingestart:(40px;(}(

Texto(HTML(
Citas:(<blockquote></(blockquote(>(e(citas(textuales(de(un(texto(
(((
externo.((
((
(
El(atributo(cite(=("url"(e(Indica(la(direccin(de(la(pgina(web(original(
de(la(que(se(extrae(la(cita.(
(
(

blockquote({(
display:(block;(
marginebefore:(1em;(
marginea{er:(1em;(
marginestart:(40px;(
margineend:(40px;(}(

Texto(HTML(
Texto(preformateado:(
(((
<pre></(pre(>(e(manKene(el(aspecto(visual,(los(elemento(en(blanco(
((
(
se(manKenen(igual(que(en(el(texto(original.(
(

pre({(
display:(block;(
fontefamily:(monospace;(
whiteespace:(pre;(
margin:(1em(0;(}(

Texto(HTML(
Abreviatura(y(acrnimo:(
(((
<abbr></abbr>(e(para(indicar(el(signicado(de(una(abreviatura(o(un(
((
(
acrnimo.(
(
(
(
(
(

Texto(HTML(
Salto(de(lnea:(
(((
<br>(e(Salto(de(lnea(en(el(texto,(sin(los(mrgenes(denidos(para(el(
((
prrafo.((
(
Pocas(veces(hay(que(usar(un(salto(de(lnea:(Una(poesa,(un(listado(
del(cdigo,(cuando(cada(lnea(no(es(un(prrafo(por(s(sola.((
(
(
(
(
(
(

Texto(HTML(
Superndices(y(subndices:(
(((
<sup></sup>((
((
(
<sub></sub>(e(para(eKquetar(el(texto(como(super(o(subndices.(
sub({(
verKcalealign:(sub;(
fontesize:(smaller;(}(

sup({(
verKcalealign:(super;(
fontesize:(smaller;(}(

Texto(HTML(
code:(
(((
<code></code>(e(para(representar(fragmentos(de(cdigo(
((
(
informKco.(
Valores(por(defecto:(
code({(
fontefamily:(monospace;}(
(
Otras(marcas(de(texto:(
Texto(borrado(<del>(e(insertado(<ins>(en(un(documento.(
Listas(de(deniciones(<dl>,(<dt>(y(<dd>(
(
(
(
(
(
(

Tabla(
Las(tablas(se(denen(con(las(eKquetas(<table>,(<tr>(para(cada(la(y(
(((
<td>(para(cada(columna(<th>(indica(que(una(celda(es(la(cabecera.(
((
((
(
(
(
(
(
(
(
(
(
(
(
(
(

Tabla(CSS(
(
((((
((
((
(
(
(
(
(
(
(
(
(
(
(
(
(

Texto(HTML(
LIBROS(WEB:(Marcado(bsico(de(texto(
(((
h\p://librosweb.es/xhtml/capitulo_3/
((
(
marcado_basico_de_texto.html(
(
Con(Clase:((Texto(
h\p://html.conclase.net/w3c/html401ees/struct/text.html(
(
MDN:(CSS(
h\ps://developer.mozilla.org/eneUS/docs/Web/CSS(
(
(
(
(
(
(
(

Codificacin de caracteres,
UNICODE y character entity

Alfabeto, cdigo y codificacin


Juego de caracteres o alfabeto
!

Conjunto de caracteres normalizados para representar una lengua

Cdigo de caracteres (ver http://www.w3schools.com/tags/ref_charactersets.asp)


!

Cdigo numrico asignado a cada carcter de un alfabeto, p.e.


" ASCII: Alfabeto ingls (EEUU) codificado en 7 bits por carcter
" ISO Latin-1 (ISO 8859, ISO Latin-15): Alfabetos de Europa occidental, 8 bits
" UNICODE: cdigo internacionalizado que soporta muchas lenguas

Codificacin
!

representacin binaria de un cdigo de caracteres, p.e. UNICODE tiene


" UTF-8: Cdigo de longitud variable de 1, 2, 3 o 4 bytes, eficiente para lenguas latinas
" UTF-16: Codifica plano BMP en 2 bytes, otros planos en 4 bytes
" UTF-32: Cdigo de longitud fija: 4 bytes eficiente con planos que no son BMP
Juan Quemada, DIT, UPM

Unicode Consortium
UNICODE es un consorcio internacional
!

Define normas de internacionalizacin (I18N)


" cdigos de caracteres (UNICODE), smbolos, libreras software, formatos, .

http://www.unicode.org/

! !
Cdigo UNICODE
!

Cdigo de caracteres internacionalizado,


" es el resultado mas conocido del consorcio

puede representar muchas lenguas


" ver: http://www.unicode.org/charts/

Juan Quemada, DIT, UPM

Cdigo Unicode
Unicode asigna un cdigo numrico a cada carcter
!
Los caracteres se agrupan en planos
4 Cada plano se codifica en 2 bytes
2 bytes (octetos): 65,536 caracteres

!
Planos ms importantes

4 BMP (Basic Multilingual Plane)


Agrupa los smbolos ms habituales de la mayora de lenguas actuales

4 SMP (Suplementary Multilingual Plane): Lenguas antiguas y mas


4 SIP (Supl. Ideographic Plane): Ext. CJK (China, Japan, Korea)
4 TIP (Tiertary Ideographic Plane): Lenguas antiguas asiticas
4 SSP (Suplementary Special-purpose Plane): usos especiales
4

UNICODE BMP: subconjunto ASCII (Basic Latin)


http://www.unicode.org/charts/PDF/U0000.pdf

UNICODE BMP: extensin ISO Latin1


http://www.unicode.org/charts/PDF/U0080.pdf

Ejemplo Unicode
Cdigos Unicode BMP: algunos ideogramas chinos Kangxi

Cuantos cdigos de
caracteres manejamos?
El diseo de una pgina Web
!

Se pueden utilizar cdigos diferentes


" El editor utilizar el cdigo seleccionado
" El fichero se podr guardar con otro cdigo
" El SO (Windows, Linux, ..) utiliza otro cdigo

La navegacin por Internet


!

puede utilizar cdigos diferentes


" El navegador tiene un cdigo configurado
" por el usuario que lo utiliza
" El servidor suele estar internacionalizado
" HTML indica el cdigo de la pgina
" OJO: debe coincidir con el del fichero

en disco
Juan Quemada, DIT, UPM

Teclado chino

Introduccin de textos
La informacin textual se introduce a travs de un teclado
!

Cada tecla enva un carcter


" Los teclados solo solo suelen letras de un rea geogrfica determinada

!
El teclado incluye un conjunto limitado de teclas
!

Los caracteres no incluidos necesitan un cdigo especial


" HTML utiliza caracteres escapados lo caracteres no incluidos
" por ejemplo &copy; se utiliza para el smbolo de copyright

!
!
La pantalla es grfica
!

Teclado arabe

puede representar cualquier carcter


Juan Quemada, DIT, UPM

ENTIDADES DE CARCTER

Entidad de carcter
HTML

> &lt;
&#60; => significa menor que
< &gt; &#62; => significa mayor que
&quot; &#22; =>ampersand o smbolo &
& &amp; &#38; =>ampersand o smbolo &
..

La sintxis de HTML obliga a no utilizar algunos caracteres


!

< es comienzo de marca y no se puede incluir dentro de un texto


" Dentro de un texto < debe representarse con character entities

Problemas similares ocurren con otros caracteres: >, &, ..

!
Caracteres especiales HTML o sin tecla sern character entities
!

Por ejemplo, un bloque <div> con: Si x < y, e y < z, entonces x < z,


" Ser en HTML:

<div> Si x &gt; y, e y &gt; z, entonces x &gt; z, &copy; </div>

La tabla superior incluye algunos entidades, tablas completas estn en


" http://brajeshwar.github.io/entities/
" http://www.w3schools.com/html/html_entities.asp
" http://www.w3.org/TR/html4/sgml/entities.html
Juan Quemada, DIT, UPM

10

URLs, recursos y enlaces

Juan Quemada, DIT, UPM

11

google.com

Recurso Web, URL y HTTP


http://google.com/picture.png

Recurso Web
!

Contenido digital procesable con HTTP


" Normalmente se almacena en un fichero en un servidor
!

p.e., pgina Web, foto, pelicula, fichero o parte de el, registro de una BD, .....

!
URL Web
!

Direccin unvoca de un recurso Web en Internet


" HTTP permite procesar el recurso Web identificados por el URL Web

!
Un URL Web tiene 3 componentes bsicos
!

Por ejemplo, en http://google.com/picture.png


" http es el protocolo o mtodo de acceso al recurso
" google.com es la direccin del servidor en Internet donde reside el recurso
" /picture.com es el camino (path) dentro del servidor que identifica el fichero

Juan Quemada, DIT, UPM

12

google.com

URLs en HTML
http://google.com/picture.png

URL (Uniform Resource Locator)


!

Direccin de recursos en Internet, definidos en normas de IETF


" RFC 2396 (98), RFC 2732 (99), RFC 3986 (05), ... (http://tools.ietf.org/html/)

Caso particular de URI (Uniform Resource Identifier)

!
Los URLs asociados a marcas HTML identifican
!

Recursos externos asociados al elemento definido por la marca

!
Por ejemplo:
!

<a href=http://www.upm.es>
" identifica la pgina Web a la que se navegar al hacer click en el hiperenlace

<img src= http://google.com/picture.png>


" Identifica el recurso con la imagen asociada a la marca <img ....>

Juan Quemada, DIT, UPM

13

Path o camino de un URL


El path es la ruta desde el directorio raz
!

a travs de los directorios del servidor


" que lleva al recurso

!
Los servidores Web suelen estar configurados
!

para que el fichero index.html o index.htm se pueda omitir


" /lib/coches/index.htm ser equivalente a /lib/coches/

!
El camino (path) es el camino de directorio UNIX (path)
!

.. se refiere al directorio anterior


" /lib/casas/../coches/vw.htm es equivalente a /lib/coches/vw.htm

Juan Quemada, DIT, UPM

14

Hiperenlace
El hiperenlace permite navegar por Internet
! Define una relacin entre documentos
" <a href="http://upm.es">UPM</a>

!
Atributos de <a ....>
! href: hiperenlace asociado
! alternate: pgina alternativa
! rel: relacin con la pgina enlazada
" alternate, author, license, tag, ...
! type: mime-type de pgina enlazada
! ....

!
Ejemplos
!

<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/">license</a>

Juan Quemada, DIT, UPM

15

El ancla (anchor) se aade al final del URL

Ancla
(Anchor o
Fragment)

identifica un elemento dentro una pgina Web


" El identificador debe ser nico en la pgina Web
Formato: <protocol://><host><path><anchor>
! Por ejemplo: http://dit.upm.es/ej_id.html#seccion2
" #seccion2: identifica la seccion 3 de la pgina HTML
!

Juan Quemada, DIT, UPM

16

URLs relativos
relativos al recurso anterior
!

Solo llevan path, el navegador aade


" host, protocol y port del acceso anterior

Ejemplos
!

Path absoluto:
/lib/coches/vw.html
" camino absoluto desde el directorio raz del servidor
Path relativo:
coches/vw.html, vw.html
" Camino relativo desde el directorio del recurso actual

Path relativo con ..: ../casas/chalet.html


" Camino relativo con vuelta a directorio padre

Anchor solo:

#seccion3

" Elemento con id=seccion3 en el mismo recurso


!

Ojo! El navegador no accede al servidor, el recurso ya esta cargado

Juan Quemada, DIT, UPM

17

URL con pregunta o query


Se puede aadir una pregunta o query con parmetros
!

<protocol://><host><path><query>
" pregunta o query: parmetros con la siguiente sintxis
!

?param1=valor1&param2=valor2&.........

Se utilizan en interfaces REST de acceso a servicios


" Identifican informacin en una base de datos

Ejemplo
!

http://upm.es/lib/rec1.html?usuario=1527
" ?usuario=1527: enva el parmetro usuario=1527

Juan Quemada, DIT, UPM

18

Otros URLs
El URL soporta otros servicios accesibles con otros protocolos, tales
como telnet, mailto, file, ftp, ......

URL de identificacin de ficheros locales (con un path):

!
!

file:///dir1/dir2/fichero.html

Solo tiene protocolo y path absoluto.

Juan Quemada, DIT, UPM

19

URL de email

Permite crear correos electrnicos en documentos Web. Al hacer


clic en ellos se despliega el correo especificado.

Mas informacin en:


http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm

Juan Quemada, DIT, UPM

20

http://vishub.org/categories/43
Seleccionar
ejemplo

Hacer clic para


actualizar pag.

Hacer clic
en el
Modulo 1

Editor
Interactivo

Juan Quemada, DIT, UPM

21