PDF de programación - tema 2.2 - Elementos básicos de HTML

Índice: Tema 2.2

2.2 Elementos básicos de HTML

2.2.1 Párrafos
2.2.2 Formato de texto
2.2.3 Hipervínculos
2 2 4 Li t
2.2.4 Listas
2.2.5 Tablas
2.2.6 Imágenes
g
2.2.7 Otros elementos

Índice: Tema 2.2

2.2 Elementos básicos de HTML

2.2.1 Párrafos
2.2.2 Formato de texto
2.2.3 Hipervínculos
2 2 4 Li t
2.2.4 Listas
2.2.5 Tablas
2.2.6 Imágenes
g
2.2.7 Otros elementos

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  5

 Organización del texto (1)

 El texto del cuerpo se estructura en párrafos.
 Los párrafos se identifican como elementos de tipo <p> y contienen texto y otros 

elementos.

<p>Ante la ley hay un guardián. Un campesino se presenta ante
el guardián y pide entrar en la ley. Pero el guardián le dice
el guardián y pide entrar en la ley. Pero el guardián le dice
que por el momento no puede dejarlo entrar. Tras reflexionar,
pregunta si lo dejarán entrar más tarde.</p>
</ >
<p>Es posible -dice el guardián-, pero ahora no.</p>
< >E

ibl

diá

di

l

h

 El texto de los párrafos se muestra, si no se indica otra cosa, con el formato por 

defecto del navegador, dejando una línea de espacio entre ellos.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

3

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  5

 Organización del texto (2)

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

4

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  6

 Saltos de línea forzados

 Para forzar un salto de línea dentro de un párrafo se utiliza el elemento <br>, un 

elemento que, al no tener contenido, no tiene etiqueta de cierre asociada.

 Se pasa a la siguiente línea sin dejar una en blanco entre medias, como se hace 

entre las líneas de los párrafos.

 Línea horizontal (1)

 Otra forma de separar bloques de texto mediante el elemento <hr>, un elemento 

que tampoco tiene etiqueta de cierre asociada, pero si admite atributos.
<p>Ante la ley hay un guardián. Un campesino se presenta ante
el guardián y pide entrar en la ley. Pero el guardián le dice
que por el momento no puede dejarlo entrar.<br>
Tras reflexionar, pregunta si lo dejarán entrar más tarde.<hr>
Es posible -dice el guardián-, pero ahora no.</p>

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

5

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  6

 Línea horizontal (2)

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

6

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  7

 Espacios en blanco (1)

 En HTML varios espacios en blanco seguidos son interpretados por el navegador 

como un único espacio en blanco.

 La referencia de carácter &nbsp; es un espacio en blanco que no se puede 

ignorar y unión entre la palabra que le precede y la que le sigue (misma línea, 
espacio en blanco inseparable).
<p>Ante la ley hay un guardián. Un campesino se presenta ante
el&nbsp;&nbsp;guardián y pide entrar en la ley. Pero el
guardián le dice que por el momento no puede dejarlo
guardián le dice que por el momento no puede dejarlo
entrar.</p>

 Las palabras “el” y “guardián” estarán separadas por dos espacios y siempre en la
 Las palabras  el  y  guardián  estarán separadas por dos espacios y siempre en la 

misma línea.

 La etiqueta <pre> muestra el texto tal y como se ha escrito
 La etiqueta <pre> muestra el texto tal y como se ha escrito.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

7

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  7

 Espacios en blanco (2)

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

8

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  8

 Alineamiento de párrafos (1)

 Para alinear el contenido de un párrafo se emplea el atributo align. El contenido 
del párrafo puede alinearse a la izquierda (left), a la derecha (right), centrado 
(center) o justificado (justify).

<p align="center">Ante la ley hay un guardián. Un campesino se
presenta ante el guardián y pide entrar en la ley. Pero el
guardián le dice que por el momento no puede dejarlo
entrar.</p>

 En concreto, para centrar el texto también existe la etiqueta <center> ...

</center>. 

 Los bloques de texto se especifican usando la etiqueta <blockquote> ...

</blockquote>. Un bloque de texto aparece sangrado hacia la derecha.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

9

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  8

 Alineamiento de párrafos (2)

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

10

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  9

 Encabezamientos

 Son tipos especiales de párrafos que se muestran con características de formato 

diferentes (normalmente para delimitar diferentes secciones).

 HTML define seis tipos de elementos para construir párrafos que sean 

encabezamientos (títulos) de secciones o epígrafes de la página (h1-h6).

 El tamaño para cada uno es distinto, siendo el mayor el de tipo h1 y el menor el de 

tipo h6
<p>Párrafo normal.</p>
<h1>Encabezamiento de tipo h1</h1>
<h2>Encabezamiento de tipo h2</h2>
<h3>Encabezamiento de tipo h3</h3>
<h4>Encabezamiento de tipo h4</h4>
<h5>Encabezamiento de tipo h5</h5>
<h6>Encabezamiento de tipo h6</h6>
<h6>Encabezamiento de tipo h6</h6>

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

11

2.2
2.2.1

ELEMENTOS BÁSICOS DE HTML
PÁRRAFOS

EJERCICIO  9

 Encabezamientos (2)

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

12

Índice: Tema 2.2

2.2 Elementos básicos de HTML

2.2.1 Párrafos
2.2.2 Formato de texto
2.2.3 Hipervínculos
2 2 4 Li t
2.2.4 Listas
2.2.5 Tablas
2.2.6 Imágenes
g
2.2.7 Otros elementos

2.2
2.2.2

ELEMENTOS BÁSICOS DE HTML
FORMATO DE TEXTO

EJERCICIO  10

 La etiqueta <font> (1)

 Permite modificar el tipo de letra, el tamaño y el color del texto . Todo el texto 

entre las etiquetas <font> ... </font> se muestra según los valores 
especificados en los atributos de la etiqueta.
• Para modificar el tipo de letra se emplea el atributo face.
<p><font face="Courier">Texto en Courier</font></p>
• Para modificar el tamaño del texto se emplea el atributo size (valor entre 1 y 7, siendo el 
tamaño normal 3, o expresado desde ‐2 hasta +4 relativo al normal).
<p><font size="+3">Texto en tamaño 6</font></p>
• Para modificar el color del texto se emplea el atributo color
Para modificar el color del texto se emplea el atributo color.
<p><font color="#0000FF">Texto en color azul</font></p>

 Por supuesto, los atributos se pueden combinar.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

14

2.2
2.2.2

ELEMENTOS BÁSICOS DE HTML
FORMATO DE TEXTO

EJERCICIO  10

 La etiqueta <font> (2)

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

15

2.2
2.2.2

ELEMENTOS BÁSICOS DE HTML
FORMATO DE TEXTO

EJERCICIO  11

 Formato de caracteres (1)

 Se trata de un formatos que se aplica “en línea” (inline), lo que significa que no 

interrumpen el fluir del texto (no producen saltos de línea ni nada similar), por lo 
que se pueden aplicar a caracteres individuales. Se dividen en lógicos y físicos.

 Los físicos siempre se representan de la misma forma:

<b>Texto en negrita</b>
<i>Texto en cursiva</i>
< >T t
<u>Texto subrayado</u>
d </ >
<tt>Texto en teletipo (fuente fija)</tt>
<strike>Texto tachado</strike>
<strike>Texto tachado</strike>
<s>También funciona</s>

b

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

16

2.2
2.2.2

ELEMENTOS BÁSICOS DE HTML
FORMATO DE TEXTO

EJERCICIO  11

 Formato de caracteres (2)

 Los lógicos dependen del navegador (cada uno lo puede interpretar de distinta 

forma):

<cite>Cita</cite>
<cite>Cita</cite>
<code>Código</code>
<dfn>Definición</dfn>
<em>Enfatizado</em>
<kbd>Texto tecleado</kbd>
<strong>Texto grueso</strong>
<var>Texto variable</var>

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

17

2.2
2.2.2

ELEMENTOS BÁSICOS DE HTML
FORMATO DE TEXTO

EJERCICIO  11

 Formato de caracteres (3)

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

18

Índice: Tema 2.2

2.2 Elementos básicos de HTML

2.2.1 Párrafos
2.2.2 Formato de texto
2.2.3 Hipervínculos
2 2 4 Li t
2.2.4 Listas
2.2.5 Tablas
2.2.6 Imágenes
g
2.2.7 Otros elementos

2.2
2.2.3

ELEMENTOS BÁSICOS DE HTML
HIPERVÍNCULOS

 Hipervínculos

 Es el mecanismo habitual para navegar a través de la web.
 Todos los hipervínculos se crean con elementos <a> (ancla), especificando el 

destino con el atributo href:
<a href="...">texto del vínculo</a>

Destino del hipervínculo

 Tipos de hipervínculos más usuales:

• Vínculo a un punto de un documento.

• Vínculo a una página web.

• Vínculo a envío de correo electrónico.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

20

2.2
2.2.3

ELEMENTOS BÁSICOS DE HTML
HIPERVÍNCULOS

 Vínculo a un punto de un documento (1)

 Los marcadores se pueden fijar en cualquier lugar de un documento.
 Para establecer el marcador se usa el atributo name. Por ejemplo, para establecer 

un marcador llamado “destino” en el texto “Esto es el destino”:
<a name="destino">Esto es el destino</a>

 Una vez colocado el marcador, para ir al mismo desde el hipervínculo 

correspondiente, se puede utiliza el atributo href y la # antes del nombre del 
marcador:
marcador:
<a href="#destino">enlace</a>

 Si el marcador está en una página diferente a la del hipervínculo, ésta debe 

especificarse antes del nombre del marcador precedido por # en href:
< h f "htt
</ >
<a href="http://www.pagina.html#destino">...</a>

ht l#d

//

i

ti

">

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

21

2.2
2.2.3

ELEMENTOS BÁSICOS DE HTML
HIPERVÍNCULOS

EJERCICIO  12

 Vínculo a un punto de un documento (2)

Aquí está el marcador

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

22

2.2
2.2.3

ELEMENTOS BÁSICOS DE HTML
HIPERVÍNCULOS

EJERCICIO  13

 Vínculo a un punto de un documento (3)

El enlace es, en este caso, a 
un marcador de otra página

APLIC