¿Qué es HTML?

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto),

es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado
para describir la estructura y el contenido en forma de texto, así como para
complementar el texto con objetos tales como imágenes.

HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>).

Los ejemplos que a continuación detallamos respecto al código HTML no explican la

codificación necesaria para componer una página HTML completa debido a que las
plantillas utilizadas en nuestras páginas ya se encargan de ello. Tampoco nos vamos a
detener en como codificar la creación de enlaces, URLs o imágenes ya que este tipo de
contenidos debemos realizarlos a través de las herramientas que OracleAS Portal pone a
nuestra disposición. Únicamente detallaremos los fragmentos de código necesarios para
poder insertar texto y las distintas estructuras en que este puede organizarse como tablas
y listas.

Nota importante:

Aunque puede utilizarse Internet Explorer para insertar texto a través del "Editor de
Texto Enriquecido" de Portal Oracle por razones de diseño y accesibilidad
recomendamos utilizar código HTML.

De igual manera hemos constatado que las últimas versiones de Internet Explorer son
incompatibles con la edición de código HTML por lo que el servicio web de la UNED
recomienda la utilización de otros navegadores como Firefox o Google Chrome.

NOTA: Es posible que algunas ilustraciones no se ajusten de manera estricta a los

estilos representados.

Encabezados
Los encabezamientos condicionan la importancia del texto que les acompaña.

El código HTML consta de una etiqueta de apertura <h1> y otra de cierre </h1>

El número indica la importancia o el tamaño del encabezado siendo el 1 el más grande y

5 el más pequeño.

El tamaño base a emplear en los encabezados es <h2> en el Título de la sección o

subpágina web. Los subtítulos que se añadan después han de respetar la numeración
decreciente <h3>, <h4> y <h5> manteniendo la homogeneidad del web.

Código de ejemplo:
<h1>Título</h1>

<h2>Título de la sección</h2>

<h3>Subtítulo de sección</h3>

Vista de los distintos encabezados en un navegador:

Párrafos
El párrafo forma la parte principal de contenido de una página web, por defecto aparece
alineado a la izquierda y sin justificar.
Existen varios tipos que se pueden utilizar según las necesidades:

Párrafo Simple:

Utilizar las etiquetas <p> </p>.

Código de ejemplo:

<p>no sea takimata sanctus es Lorem ipsum dolor sit amet. no sea takimata sanctus es
Lorem ipsum dolor sit amet. no sea takimata sanctus es Lorem ipsum dolor sit amet.
</p>

Párrafos destacados:

Utilizar las etiquetas <div class="parrafodestacado"> </div>.

Código de ejemplo:

<div class="parrafodestacado" >

<p> no sea takimata sanctus es Lorem ipsum dolor sit amet. no sea takimata sanctus es
Lorem ipsum dolor sit amet. no sea takimata sanctus es Lorem ipsum dolor sit
amet.</p>

</div>

Divisores o Recuadros:

Utilizar las etiquetas <div class="parrafoconrecuadro"> </div>.

Código de ejemplo:

<div class="parrafoconrecuadro" >

<p> no sea takimata sanctus es Lorem ipsum dolor sit amet. no sea takimata sanctus es
Lorem ipsum dolor sit amet. no sea takimata sanctus es Lorem ipsum dolor sit amet.
</p>

</div>

Avisos destacados:

Utilizar las etiquetas: <div class="avisos"> </div>.

Código de ejemplo:

<div class="avisos"><h3>Aviso Destacado</h3>

<p>no sea takimata sanctus es Lorem ipsum dolor sit amet. no sea takimata sanctus es
Lorem ipsum dolor sit amet. no sea takimata sanctus es Lorem ipsum dolor sit amet.
</p>

</div>

Vista de los distintos párrafos en un navegador:

Listas
Para editar con la aplicación y pode ordenar la información se ofrecen dos tipos de
listas: "Lista con viñetas" y "Lista numerada".

Lista con viñetas

Estas listas aparecen alineadas a la izquierda y con una viñeta marcando cada elemento.

El código HTML es el siguiente: La etiqueta <ul> abre la lista y </ul> la cierra.

Cada elemento de la lista va entre las etiquetas <li> y </li> como se muestra en el
ejemplo siguiente:

<ul>
<li>Lor separat existentie es un myth.</li>
<li>Lor separat existentie es un myth.</li>
<li>Lor separat existentie es un myth.</li>
</ul>
Lista numerada

Es similar a la anterior salvo que no utiliza viñetas, enumera los subelementos.

El código HTML es el siguiente:

La etiqueta <OL> abre la lista y </OL> la cierra.

Cada elemento de la lista va entre las etiquetas <LI> y </LI> como se muestra en el
ejemplo siguiente:

<ol>
<li>Lor separat existentie es un myth.</li>
<li>Lor separat existentie es un myth.</li>
<li>Lor separat existentie es un myth.</li>
</ol>

ablas
El uso de tablas en el Portal de la UNED debe cumplir las siguientes normas de
usabilidad sin importar el modelo de tabla creado.

 Las tablas deben utilizarse dentro del contenido sólo para mostrar datos y listas
de manera organizada.
 Incluya siempre un titulo de tabla, que describa el contenido de la misma, dentro
de las etiquetas CAPTION.
 Defina las tablas con encabezamientos <th> y con etiquetas para las columnas
<td> y filas <tr>, según corresponda, para facilitar la navegación de personas
con discapacidades.
 No utilice bordes en las tablas, ya que los bordes pueden verse de manera
diferente en los distintos navegadores y plataformas.
 Cuando sea posible, utilice los colores de fondo aprobados, por fila o columna,
para permitir una mejor lectura.
 No utilice tablas para aislar o destacar el texto en una página - dispone de estilos
y clases para destacar y estructurar la información, así como de dos áreas
laterales o columnas

Tabla genérica
La característica de esta tabla es la disposición de las filas y columnas por colores. Se
recomienda su uso por ser simple y con una visualización limpia y ordenada.
En caso de necesitar una tabla mas compleja se recomienda contactar con el equipo web
para estudiar los estilos necesarios y si es validada poner el material a disposición de
toda la comunidad.

Código HTML de la tabla genérica:

<div class="color">

<table border="0" cellpadding="0" cellspacin="0">

<caption>tabla de muestra:</caption>

<tr>

<th>header 1 </th>

<th>header 2 </th>

<th>header 3 </th>

<th>header 4 </th>

</tr>

<tr>

<td>cell 1 </td>

<td>cell 2 </td>

<td>cell 3 </td>

<td>cell 4 </td>

</tr>

<tr class="confondo">

<td>cell 5 </td>

<td>cell 6 </td>

<td>cell 7 </td>

<td>cell 8 </td>

</tr>
<tr>

<td>cell 9 </td>

<td>cell 10 </td>

<td>cell 11 </td>

<td>cell 12 </td>

</tr>

<tr class="confondo">

<td>cell 13 </td>

<td>cell 14 </td>

<td>cell 15 </td>

<td>cell 16 </td>

</tr>

</table>

</div>