Listas, Enlaces y Tablas

Listas
Etiqueta Descripción
<ul> Se emplea para enmarcar listas desordenadas.
<ol> Se emplea para enmarcar listas ordenadas.
<li> Se emplea para definir cada elemento de una lista (ordenada o desordenada).
<dl> Se emplea para enmarcar las listas de definición.
<dt> Se emplea para indicar los términos en una lista de definición.
<dd> Se emplea para indicar las definiciones en una lista de definición.
Se puede definir el tipo de lista con el atributo type dentro de las etiquetas <ul> y
<ol>. Los posibles valores de esta propiedad son:
Listas ordenadas 1 Números arábigos (predeterminado)

<ol>
A Letras mayúsculas
a Letras minúsculas
I Números romanos
i Números romanos minúscula
Listas Circle o Viñeta circular
desordenadas Square  Viñeta cuadrada
<ul>
Disc  Viñeta redonda sólida
Ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de listas </title>
</head>
<body>
<h1>Lista desordenada</h1>
<ul>
<li>Un elemento de una lista desordenada.</li>
<li>Otro elemento de una lista desordenada.</li>
</ul>
<h1>Lista ordenada</h1>
<ol>
<li>Primer elemento de una lista ordenada.</li>
<li>Segundo elemento de una lista ordenada.</li>
<li>Tercero elemento de una lista ordenada.</li>
</ol>
<h1>Lista de definición</h1>
<dl>
<dt>ul</dt>
<dd>Para enmarcar listas desordenadas.</dd>
<dt>ol</dt>
<dd>Para enmarcar listar ordenadas.</dd>
</dl>
</body>
</html>
Elementos multimedia
Imágenes
<img> Se emplea para incluir imágenes en los documentos
Atributo Descripción
src = "url" Indica la URL de la imagen que se muestra
alt = "texto" Descripción corta de la imagen
height = Indica la altura con la que se debe mostrar la imagen
"unidad_de_medida" (no es obligatorio que coincida con la altura original
de la imagen)
width = Indica el ancho con el que se debe mostrar la imagen
"unidad_de_medida" (no es obligatorio que coincida con la altura original
de la imagen)
border=tamaño Especifica el grosor del borde de la imagen
Ejemplo
<head>
<title>Ejemplo de imágenes </title>
</head>
<body>
<img src="imagen_ejemplo5.jpg"/>
<img src="imagen_ejemplo5.jpg" alt="Ancho 100" width="100"/>
<img src="imagen_ejemplo5.jpg" alt="Deformada" width="300" height="200"/>
</body>
</html>
Vídeo
Para añadir vídeos se emplea la etiqueta <video controls>, que admite 3 tipos de
formatos: MP4(video/mp4), WebM(video/webm) y Ogg(video/ogg). Por
ejemplo:
<video width=”320” height=”240” controls autoplay>
<source src=”mivideo.mp4” type=”video/mp4”>
</video>
Audio
Para añadir elementos de audio se emplea la etiqueta <audio controls>, que admite 3
tipos de formatos: MP3(audio/mpeg), WAV(audio/wav) y OGG(audio/ogg).
Por ejemplo:
<audio controls autoplay>
<source src=”miaudio.mp3” type=”audio/mpeg”>
</audio>
Enlaces
Permiten saltar a otra página web o a otra zona dentro de la misma página
<a> Se emplea para incluir enlaces en los documentos
href = "url" Indica la URL del recurso que se quiere enlazar
name = “texto” Permite nombrar el enlace para que se pueda acceder
desde otros enlaces, anteponiendo el carácter # a ese
nombre
El contenido de href puede ser de dos tipos:

 Una dirección de Internet
<a href=”www.google.es”>Ir a Google</a>
 Una página dentro del directorio raíz del sitio web que se está desarrollando.
<a href=”actividad2.html”>Enlace a actividad 2</a>
 Una dirección de correo electrónico
<a href=”mailto:correo@gmail.com”>Enviar correo</a>
 Otra zona dentro del mismo documento (ancla)
<a href=”#parrafo”>Saltar a párrafo</a>
Para que las anclas funcionen, es necesario incluir en el elemento destino una
referencia de la siguiente manera:
<a name=”parrafo”>texto...</a>
Ejemplo

<head>
<title>Ejemplos de enlaces </title>
</head>
<body>
<a href ="#portal">Portal</a>
<a href ="#recursos">Recursos</a>
<h1>Portal educativo</h1>
<a name ="portal"/>
<p>Se puede acceder al portal educativo en el <a
href="http://edu.xunta.es">siguiente enlace</a>.</p>
<h1>Otros recursos</h1>
<a name ="recursos"/>
<p>En esta sección iremos poniendo otros enlaces de
páginas interesantes.</p>
</body>
</html>
Tablas
<table> Se emplea para definir una tabla.
bgcolor=”color” Especifica el color de fondo de la tabla
bordercolor=”color” Especifica el color del borde de la tabla
valign=”valor” Alinea verticalmente el contenido de las
celdas (top, bottom, middle)
align=”valor” Alinea el texto(left, center, right)
background=”imagenfondo” Permite colocar una imagen de fondo
cellpadding=”numero” Espacio entre los bordes y el contenido
cellspacing=”numero” Espacio entre los bordes(en píxeles)
height=”numero” Altura de la tabla
width=”numero” Ancho de la tabla
<tr> Se emplea para definir una fila de la tabla.
<td> Se emplea para definir una celda dentro de una fila (es decir, una columna).
colspan = “número” Número de columnas que ocupa esa celda.
rowspan = “número” Número de filas que ocupa esa celda.
<th> Se emplea para definir las celdas que constituyen la cabecera de la tabla.
colspan = “número” Número de columnas que ocupa esa celda.
rowspan = “número” Número de filas que ocupa esa celda.
<caption> Se emplea para definir el título de la tabla.
Ejemplo
NOTA: En el ejemplo se incluye el atributo border para que sea visible el borde de
las celdas y así visualizar mejor el resultado, pero no debe ser establecido así, sino
utilizando hojas de estilos.
<head>
<title>Ejemplos de tablas </title>
</head>
<body>
<h1>Listado de cursos</h1>
<table border="1">
<tr>
<th>
<strong>Curso</strong>
</th>
<th>
<strong>Horas</strong>
</th>
<th>
<strong>Plazas</strong>
</th>
</tr>
<tr>
<td>CSS</td>
<td>20</td>
<td>25</td>
</tr>
<tr>
<td>HTML</td>
<td>20</td>
<td>40</td>
</tr>
</table>
<h1>Fusión de columnas</h1>
<table border="1">
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
<h1>Fusión de filas</h1>
<table border="1">
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
</body>
</html>

Listas, Enlaces y Tablas

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Listas, Enlaces y Tablas

Cargado por

Copyright:

Formatos disponibles

Listas

Listas ordenadas 1 Números arábigos (predeterminado)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

El contenido de href puede ser de dos tipos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

También podría gustarte