Programació n Web.

HTML

Prof. David
C ervera
 HTML
(HyperText Markup Language)
¿Qué es una ?
fragmentos de texto rodeados por
corchetes
angulares < >
Etiquetas de apertura <strong>
Etiquetas de cierre </strong>

No todas las etiquetas tienen etiqueta

de cierre
Reflejamos un elemento puntual o
con un
contenido vacío.
 Por ejemplo:

Todas las etiquetas HTML

. Las normas de
la W 3C especifican que todas las
etiquetas se debeProfesor
escribir
D avid
en
minúsculas. Cervera
HTML. Estructura de u n a pá gina

Tipo de documento y normas a

las
que se ajusta
Principio del documento

Información técnica para

el navegador

Contenido que verá el

usuario

Fin del documento

Profesor D avid
Cervera
HTML. Estructura semá ntica
de u n a pá gina web

Título de la página web

N AV: Enlaces para desplazamiento en la
web

: Definir grandes secciones de la

w
e
b
:
Conten
ido
relacio
nado
pero
consid
Profesor D avid
Cervera
HTML. Estructura de los elementos

Profesor D avid
Cervera
 H TML. Metaetiquetas

: Son la mínima expresión

semántica que HTML proporciona a los buscadores web.
Describen el documento con una serie de datos
básicos, y siempre se escribe de la misma forma:

Profesor D avid
Cervera
 HTML. Etiquetas de texto
Etiquetas de párrafo y encabezados H T M L
<p> Indica que el elemento es un párrafo.
<h1> Señala que se trata de un titulo principal.
<h2>, <h3>, <h4>, <h5>, <h6>: indica niveles de
encabezado, subtítulos.
Lista de formatos y etiquetas de texto
H<b>:
T MPara
L texto en negrita. <small>: Para texto pequeño.
<em>: Para enfatizar texto. <sub>: Para texto subíndice.
<i>: Para texto en cursiva. <sup>: Para texto superíndice.
<u>: Para texto subrayado. <ins>: Para texto insertado.
<strong>:Textos importantes. <del>: Para texto borrado.
<big>:Texto grande. <mark>: Para texto marcado.

Profesor D avid
Cervera
 HTML. Otros Caracteres

br /> inserta un salto de línea en el texto. No genera un <dfn> para definiciones

nuevo <code> para bloques de código informático
párrafo <samp> para ejemplos
<hr /> inserta un salto de línea en el texto, pero <kbd> para texto de teclado
mostrando una línea horizontal <var> para definir una variable
<blockquote> y </blockquote> inserta un sangrado en el <cite> para una cita.
texto
&nbsp; Inserta un espacio blanco en el texto

Profesor D avid
Cervera
 Listas

Profesor D avid
Cervera
 Listas

Profesor D avid
Cervera
 H ojas de Estilo en C ascada . C S S
(en)
Boom de Internet (>1995) DIFICULTAD EN
Complicación excesiva de HTML LA CREACIÓN
Guerra de los navegadores(IE, WEB PARA
Nts) DIFERENTES
Ausencia de estándar N AVEGADORES

1998

W orld Wide Web

C onsortium

Puedes consultar más información sobre la creación del CSS en este

enlace
Profesor D avid
Cervera
Hojas de Estilo en Cascada

¿Para qué sirve el C SS si ya tenemos

HTML?

CONTENIDO PRESENTACIÓN

El contenido es lo que se escribe Cómo deseamos que ese

con el HTML. Es aquella información se muestre en la página.
contenido
que se presenta en una página, tanto distancias de márgenes, colocación
Colores,
textos como imágenes, de
los elementos en el
formularios… tipografías…
layout,
Profesor D avid
Cervera
 Hojas de Estilo en Cascada
¿Porqué hay que separlos?
Antiguamente contenido y presentación iban juntos en un
mismo archivo, dentro del código HTML, había (y hay)
etiquetas para
definir tipografía, tamaño, color, ….

Imagina que tienes una Esto ocurre así con

cabecera de color rosa y elemento,
cualquier
por poner otro
un
quieresdía
de decides
color verde.
que Como la el ejemplo,
un día decidías
si que había
contenido y presentación estaban CAMBIAR EL TIPO DE LETRA del
que
unidos en cada uno de los archivos contenido de tu sitio tenías
(páginas) de un sitio web, si querías que
hacer ese cambio,

. Vamos,
y en el lugar , sobretodo
donde habías escrito el color de tu teníamos un sitio grande con si
cabecera. decenas o cientos de páginas.
Profesor D avid
Cervera
Hojas de Estilo en Cascada

Profesor D avid
Cervera
Regla C S S

Profesor D avid
Cervera
 Inserció n de Reglas C S S
1.- INLINE. Definido en el propio elemento.
Mediante el se puede
alterar el aspecto del elemento al que se le aplica.
Se utiliza para hacer una en
un
elemento. Sólo se recomienda su uso de forma puntual
y no para dar estilo a un documento ya que
supondría sobrecargar el código con demasiadas
etiquetas de estilo.

Profesor D avid
Cervera
 Inserció n de Reglas C S S
2.- OUTLINE. Definido en la cabecera del documento HTML.
En la sección <head>, podemos especificar reglas CSS dentro
de
las etiquetas

Profesor D avid
Cervera
 Inserció n de Reglas C S S
3.- LIN K. Mediante enlace a una hoja externa
En un fichero aparte (estilo.css), al cual hay que establecerle un vínculo en
el
documento html mediante la etiqueta y los atributos rel,
href y type

Profesor D avid
Cervera
 Propiedades de Texto
Tipo de letra: font-family: Toma como valor el nombre concreto de una fuente. El
nombre de la fuente debe escribirse entre comillas si contiene espacios (y puede escribirse
entre comillas si no contiene espacios). Si el ordenador no tiene instalada la fuente indicada, el
navegador utilizará una fuente de la familia genérica serif

Tamaño de letra: font-size: Establece el tamaño del tipo de letra (fuente) del
elemento. Se puede expresar el tamaño de varias maneras: tamaño absoluto, tamaño relativo,
distancia o porcentaje, aunque generalmente se aconseja utilizar unidades relativas (% o
em).
Se puede definir el tamaño de cada elemento mediante porcentajes (o em o rem, teniendo en cuenta que 1em = 100% y que 1rem = 100%), que se
interpretan con respecto al tamaño base.

Profesor D avid
Cervera
 Propiedades de Texto
Estilo de fuente: font-style: Permite elegir la inclinación: normal, oblique o italic. Para
que los navegadores puedan mostrar las variantes oblicua e itálica es necesario que en el
ordenador esté instaladas fuentes de ambas variantes, lo que no suele ser habitual.

Grosor del trazo: font-weight: Permite elegir el grosor del trazo. Existen nueve valores
numéricos (100, 200, 300, 400, 500, 600, 700, 800, 900), del más fino al más grueso. Además,
normal y bold que deben coincidir respectivamente, con los valores numéricos 400 y 700.Y por
último, existen los valores lighter y bolder que significan, respectivamente, un valor inferior y
superior en la lista de valores numéricos y se interpretan respecto del elemento padre.

Profesor D avid
Cervera
 Propiedades de Texto
Font-variant: Se emplea para forzar que un texto concreto se muestre en mayúsculas con
tamaño de minúsculas, lo que se conoce como versalitas ("versal" es un sinónimo de
mayúsculas).
Letter-spacing: Establece un espaciado entre cada una de las letras de un bloque de texto
Text-indent: Permite establecer la sangría de un bloque de texto. Su valor se puede
establecer como cualquier otra longitud.
Text-align: Permite establecer la alineación horizontal de un bloque de texto
Text-decoration: Permite añadir a un bloque de texto distintos tipos de rayado
Text-shadow: Permite añadir una o varias sombras al texto
Color: Permite establecer el color del texto. Las formas de expresar colores se comentan
en la
lección CSS: Colores.

Profesor D avid
Cervera
H TML. E n laces

Profesor D avid
Cervera
 H TML. E n laces

A modo de ejemplo podríamos tener los

siguientes enlaces:
<a href="documento.html#resumen">Enlace a una parte de un
documento</a>
<a href="http://www.manualweb.net">Enlace a una web</a>
<a href="http://www.manualweb.net/tutorial-html/">Enlace a un
directorio</a>

<a href="documento.html">Enlace a un documento</a>

<a href="miimagen.png">Enlace a una imagen</a>
<a href="mimusica.mp3">Enlace a un archivo de sonido</a>

Profesor D avid
Cervera
 H TML. E n laces

Destino del enlace, pero, ¿dónde se abre el enlace?

Eso lo podemos hacer mediante el atributo target.

• _blank, en una nueva ventana. La nueva ventana no tendrá nombre.

•_self, en el mismo marco donde está en código actual.
• Cuando usamos frameset (actualmente en desuso), se usan también
•_parent, Frame set padre
•_top, Intentará abrir el enlace en la ventana padre. En el caso de que
exista
un frameset lo eliminará y se hará con toda la ventana.
•nombre_marco, se podrá indicar el nombre de un frame.

<a href="enlace.html" target="_blank">Abrir enlace en una nueva ventana</a

<a href="enlace.html" target="_top">Abrir enlace en la ventana superior</a>

Profesor D avid
Cervera
HTML. Enlaces. Tipos Específicos

Archivos para descargar

Podemos enlazar archivos, de tal manera que si el navegador
no
puede abrir por sus medios el archivo dará la posibilidad de
abrirlo
<a href=“presentación.pptx">Enlace a una presentación</a>

Dos páginas ubicadas en la misma carpeta

<a href=“página2.html">Enlace a página 2</a>

Profesor D avid
Cervera
HTML. Enlaces. Tipos Específicos

Dos páginas ubicadas carpetas diferentes

La página “pagina2.html” está en la carpeta
“contenido”

<a href=“contenido/pagina2.html">Enlace a página 2</a> ?

¿Y qué ocurre si el archivo no está ubicado en una ?
subcarpeta sino en una carpeta Raíz?
¿Q ué hacemos entonces… ?
<a href=“../pagina2.html">Enlace a página 2</a>

Profesor D avid
Cervera
HTML. Enlaces. Tipos Específicos

Sólo hay que

tener claro el
nivel de
carpeta del

y el nivel
de carpeta
del
Profesor D avid
Cervera
HTML. Enlaces. Tipos Específicos

Enlace a un ancla en una

misma página web
Un ancla es un punto de referencia que
puedes incluir en tus páginas HTML
cuando son muy largas. Se usa para
crear un enlace a un punto situado más
abajo en la misma página web.
C ONSTA D E D OS PARTES
ENLACE: <a href=“#NombreDelAncla">Enlace a un ancla</a>
DESTINO : Cualquier etiqueta con lel atributo “id” o la etiqueta <a>
con el atributo “name”

Profesor D avid
Cervera
HTML. Enlaces. Tipos Específicos
Enlace a un correo electrónico
Con mailto: podemos crear a un correo
electrónico. De este modo, al hacer clic
sobre él, se abrirá la aplicación de correo
electrónico de nuestro visitante para que
pueda escribir a esa dirección.
<a href=“mailto:[email protected]">Envíanos un correo</a>

Si queremos que aparezca con un asunto preestablecido:

<a href="mailto:[email protected]
?subject=Questions">Preguntas aquí</a>
Si deseas agregar contenido:
<a href="mailto:[email protected] ?subject=Questions
& body=Escribe aquí si tienes preguntas " >Preguntas
aquí </a>
También podrás usar: cc:Copia, bcc:Copia oculta, en lugar de body

Profesor D avid
Cervera