Html Xhtml

HTML/XHTML

Unidad
1

Asignatura
“Diseño
y
Desarrollo
Mul3media
para
la
Educación”

Profesorado
de
Informá3ca
-‐
Ins3tuto
Normal
de
Enseñanza
Técnica

Gabriela
Pérez
Caviglia

hIp://crea3vecommons.org/licenses/by-‐nc-‐nd/3.0/

¿Qué
es?

HTML
es
lo
que
se
u2liza
para
crear
la
mayoría
las
páginas
web

de
Internet

HTML

Lenguaje
Estructurado
de
Marcación
de
contenidos

(HyperText
Markup
Lenguage)

Es
un
estandar

W3C
(World
Wide
Web
Consor3um)

Especificación
Oficial

Son
las
normas
de
codificación
que
se
deben
seguir
para
codificar

el
html.

W3C

Especificación
oficial
de
HTML
4.01
(hIp://www.w3.org/TR/
html401/)

Especificación
oficial
de
XHTML
1.0
(hIp://www.w3.org/TR/
xhtml1/)

El
estándar
XHTML
1.0
=
95%
HTML
4.01
+
mejoras

HTML
y
CSS

Originalmente
las
páginas
incluían
además
de
sus
contenidos,
información

sobre
el
aspecto
de
los
mismos,
todo
en
un
mismo
archivo,
lo
que
diﬁcultaba
su

mantenimiento.

CSS

Mecanismo
que
permite
separar
los
contenidos
del
aspecto
que
deben
presentar.

Cascade
Style
Sheet
–
Hojas
de
es3lo
en
Cascada

Lenguaje
de
e3quetas

Al
inicio
se
almacenaba
información
sin
formato,

esto
se
solucionó
a
través
de
una
tabla
de

conversión
que
vincula
las
letras
del
alfabeto
a
un

valor.

¿Y
como
hacemos
con
los
textos
con
formato?

¿Como
almacenamos
un
texto
de
color
azul
o
en

negrita?

La
solución
fue
crear
una
zona
reservada
en
el
archivo
donde
se
“marca”
y
se

guarda
la
información
sobre
el
formato.

<parrafo>

Contenido
de
texto
con
<importante>algunas
palabras</
importante>
resaltadas
de
forma

especial.

</parrafo>

HTML
lenguaje
de
e3quetas

<html>

<head>

<2tle>El
primer
documento
HTML</2tle>

</head>

<body>

<p>El
lenguaje
HTML
es
<strong>tan
sencillo</strong>
que

prác3camente
se
en3ende
sin
estudiar
el
signiﬁcado

de
sus
e3quetas
principales.</p>

</body>

</html>

E3quetas
y
Atributos

HTML
deﬁne
91
e2quetas

Los
atributos
agregan
información
adicional

sobre
las
e3quetas

<html>

<head>

<2tle>Ejemplo
de
atributos
en
las
e3quetas</3tle>

</head>

<body>

<p>

Los
enlaces
son
muy
fáciles
de
indicar:

<a>Soy
un
enlace
incompleto,
porque
no
tengo
dirección
de

des3no</a>.

<a
href=”hTp://www.google.com”>Este
otro
enlace
apunta

a
la
página
de
Google</a>.

</p>

</body>

</html>

Párrafos

<p></p>

de
las
e3quetas
más
u3lizadas
de
HTML

<html>

<head>

<2tle>Ejemplo
de
texto
estructurado
con
párrafos</3tle>

</head>

<body>

<p>Este
es
el
texto
que
forma
el
primer
párrafo
de
la
página.

Los
párrafos
pueden
ocupar
varias
líneas
y
el
navegador
se
encarga
de
ajustar
su
longitud
al
tamaño

de
la
ventana.</p>

<p>El
segundo
párrafo
de
la
página
también
se
deﬁne
encerrando
su
texto
con
la
e3queta
p.
El

navegador
también
se
encarga
de

separar
automá3camente
cada
párrafo.</p>

</body>

</html>

Secciones
Jerárquicas

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Son
las
e3quetas
que
deﬁnen
ptulos
de
sección

<html>

<head>

<2tle>Ejemplo
de
texto
estructurado
con
secciones</2tle>

</head>

<body>

<h1>Titular
de
la
página</h1>

<p>Párrafo
de
introducción...</p>

<h2>La
primera
sub-‐sección</h2>

<p>Párrafo
de
contenido...</p>

<h2>Otra
subsección</h2>

<p>Más
párrafos
de
contenido...</p>

</body>

</html>

Espacios
y
saltos
de
línea

<br></br>
o
<br/>

Salto
de
línea

 

Espacios
adicionales

En
html
si
se
inserta
texto
y
se
deﬁne
el
salto
de
línea
o
mas
de
un
espacio,
por

más
que
visualmente
cuente
con
él,
no
se
verá
así.
Ejemplo:

<html>

<head><2tle>Ejemplo
de
e3queta
p</2tle></head>

<body>

<p>Este
primer
párrafo
no
con3ene
saltos
de
línea
ni
otro
3po
de
espaciado.</p>

<p>Este

segundo
párrafo

sí
que

con3ene
saltos

de

línea

y

otro

3po

de

espaciado.</p>

</body>

</html>

Espacios
y
saltos
de
línea

Como
se
vé:

Espacios
y
saltos
de
línea

<br></br>
o
<br/>

Salto
de
línea

En
html
si
se
inserta
texto
y
no
se
deﬁne
el
salto
de
línea,
por
más
que

visualmente
cuente
con
él,
no
se
verá
así.
Ejemplo:

<html>

<head><2tle>Ejemplo
de
e3queta
p</2tle></head>

<body>

<p>Este
primer
párrafo
no
con3ene
saltos
de
línea
ni
otro
3po
de
espaciado.</p>

<p>Este
segundo
párrafo
sí
que
con3ene
saltos<br/>

de<br/>

línea<br/>

y
  otro 
3po
 de
 espaciado.</p>

</body>

</html>

Espacios
y
saltos
de
línea

<pre>
</pre>

Texto
preformateado

Muestra
el
texto
tal
y
como
esta
escrito

<html>

<head><2tle>Ejemplo
de
e3queta
pre</2tle></head>

<body>

<pre>

La
e3queta
pre

respeta
los
espacios
en
blanco

y

muestra
el
texto

tal
y
como

está
escrito

</pre>

Enlaces

<a>
</a>

Pueden
ser
rela3vos

Pueden
ser
absolutos

Pueden
apuntar
a
una
parte
del
mismo
documento.

Algunos
ejemplos:

<a
href=”hIp://www.google.com”>Página
principal
de
Google</a>

URL
absoluta:
hIp://www.ejemplo.com/ruta1/ruta2/ruta3/index.html

URL
rela2va:
index.html

URL
rela2va:
../index.html

URL
rela2va:
ruta4/index.html

No
ordenadas

<html>

<head><2tle>Ejemplo
de
e3queta

UL</2tle></head>

<body>

<h1>Menú</h1>

<ul>

<li>Inicio</li>

<li>No3cias</li>

<li>Arpculos</li>

<li>Contacto</li>

</ul>

</body>

</html>

Ordenadas

<html>

<head><2tle>Ejemplo
de
e3queta

OL</2tle></head>

<body>

<h1>Instrucciones</h1>

<ol>

<li>Enchufar
correctamente</li>

<li>Comprobar
conexiones</li>

<li>Encender
el
aparato</li>

</ol>

</body>

</html>

Imágenes

<img>

Imágenes

<img
src=”logo2po.gif”
alt=”Logo2po
de
Mi
Si2o”
/>

Algunos
de
los
atributos
más
importantes

src
=
Indica
la
URL
de
la
imagen
que
se
muestra

alt
=
Descripción
corta
de
la
imagen

height
=
Indica
la
altura
con
la
que
se
debe
mostrar
la
imagen
(no
es

obligatorio
que
coincida
con
la
altura
original
de
la
imagen)

width
=
Indica
la
anchura
con
la
que
se
debe
mostrar
la
imagen
(no
es

obligatorio
que
coincida
con
la
anchura
original
de
la
imagen)

Conceptos

Las
tablas
en
HTML
u3lizan
los
mismos
conceptos
de
ﬁlas,
columnas,
cabeceras
y

[tulos
que
los
que
se
u3lizan
en
cualquier
otro
entorno
de
publicación
de

documentos,
como
por
ejemplo
una
planilla
de
cálculo

Tablas
Básicas

Las
tablas
más
sencillas
de
HTML
se
deﬁnen
con
tres
e3quetas:
<table>
para
crear
la

tabla,
<tr>
para
crear
cada
ﬁla
y
<td>
para
crear
cada
columna.

<html>

<head><2tle>Ejemplo
de
tabla
sencilla</2tle></head>

<body>

<h1>Listado
de
cursos</h1>

<table>

<tr>

<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>

</tr>

<tr>

<td>CSS</td>
<td>20</td>
<td>16:00
-‐
20:00</td>

</tr>

<tr>
<td>HTML</td>
<td>20</td>
<td>16:00
-‐
20:00</td>
</tr>

<tr>
<td>Dreamweaver</td>
<td>60</td><td>16:00
-‐
20:00</td>
</tr>

</table>

</body>
</html>

Fusión
de
columnas

<table>

<tr>

<td
colspan=”2”>A</td>

</tr>

<tr>

<td>B</td>

<td>C</td>

</tr>

</table>

Fusión
de
ﬁlas

<table>

<tr>

<td>A</td>

<td
rowspan=”2”>B</td>

</tr>

<tr>

<td>C</td>

</tr></table>

Fusión
de
ﬁlas
y
columnas

<table
border=”1”><tr>

<td
colspan=”3”>A</td>

<td>B</td>

</tr>

<tr>

HTML

39

<td>C</td>

<td
colspan=”2”>D</td>

<td>E</td>

</tr>

<tr>

<td
colspan=”4”>F</td>

</tr>

<tr>

<td>G</td>

<td>H</td>

<td>I</td>

<td>J</td>

</tr>

</table>

Html Xhtml

Más contenido relacionado

La actualidad más candente (18)

Destacado (7)

Similar a Html Xhtml (20)

Último (20)

Html Xhtml