ETIQUETAS, ATRIBUTOS Y ELEMENTOS BÁSICOS DE HTML EN MOODLE - Tercera Parte

Universidad Nacional Experimental 1

De Los Llanos Occidentales
“Ezequiel Zamora”

UNELLEZ

Profesores:
Juan Duran
Duglas Moreno

Barinas, Octubre de 2017

ETIQUETAS, ATRIBUTOS Y ELEMENTOS BÁSICOS DE HTML EN MOODLE –
TERCERA PARTE.

1. Etiqueta <img>

Esta etiqueta permite mostrar imágenes en el editor de texto de Moodle. Técnicamente la
imagen no es insertada dentro del documento, ya que lo que se hace es realizar un enlace a
la misma, encargándose el navegador de situarla en el documento. Entre los formatos más
populares de imagen aceptados, sin duda se encuentran el formato JPEG, y el formato PNG.
La sintaxis de la etiqueta es la siguiente:

<img alt="valor" height="valor" width="valor" src="valor" border="valor" align="valor"
hspace="valor" vspace="valor">

1.1.Atributo alt

El atributo alt significa Texto alternativo, y permite mostrar un texto alternativo para el
caso en que el navegador no sea capaz de mostrar la imagen.

1.2.Atributo src

El atributo src, permite especificar el origen de la imagen, es decir su ubicación mediante
la dirección web de la imagen o la ruta de la carpeta donde se encuentra almacenada.

1.3.Atributo align

El atributo align tiene como posibles valores top/middle/botton/left/rigth, permitiendo
indicar cómo se alineará el texto que siga a la imagen.

 top: alinea el texto con la parte superior de la imagen.
 middle: con la parte central.
 bottom: con la parte inferior.
 left: imagen alineada a la izquierda de la página.
 rigth: imagen alineada a la derecha de la página.

1.4.Atributo height
El atributo height, permite especificar el alto de la imagen en pixeles.

1.5.Atributo width

Con este atributo se especifica el ancho al que mostrará la imagen, ya sea en puntos de
pantalla (pixels) o en % del tamaño del documento. Estas características también son
aplicables en el atributo height.

1.6.Atributo border

Permite añadirle un borde a la imagen del tamaño que se desee, para lo cual se le debe
agregar un valor numérico, siendo el cero (0) como mínimo valor para una imagen sin borde.

1.7.Atributo hspace

Especifica el número de espacios horizontales (en puntos) que separarán a la imagen de
cualquier elemento que le siga o le anteceda, ya sea un texto u otra imagen.

1.8.Atributo vspace

Este atributo modificará el margen vertical (en puntos) que habrá entre la imagen y cualquier
otro elemento en el editor de texto de Moodle.

Posteriormente, al aplicar la etiqueta junto a todos los atributos mencionados, quedaría de
la siguiente forma:

<img alt="logo EaD" height="150px" width="120px"

src="http://www.edudigital.unellez.edu.ve/logo.png"border="1" align="top" hspace="15"

vspace="10" >

2. Etiqueta <mark>

La etiqueta <mark>, permite realizar el marcado de un texto dentro del documento web, el
efecto visual en el navegador del texto seleccionado, es como si se hubiera pasado un
bolígrafo resaltador de texto por encima del texto que se haya seleccionado. La sintaxis de la
etiqueta es la siguiente.

<p>El <mark>texto siguiente esta remarcado</mark>, dentro del párrafo</p>

3. Etiqueta <table>

La etiqueta <table>, permite definir tablas. Por lo tanto, una tabla es una cuadricula de
casillas o celdas, divididas en filas y columnas. Así mismo, para componer o crear las tablas
se hace uso de otras etiquetas, las cuales no tienen sentido sino están situadas dentro de una
etiqueta de tabla. Estas etiquetas son las siguientes.

Etiquetas Descripción
<table> Definición de una tabla.
Definición de cabecera de tabla.
<th> Define una fila en la tabla.
<tr> Define una celda en la tabla.
<td> Define el nombre o título de la tabla.
<caption> Define la cabecera de la tabla.
<thead> Define el cuerpo de la tabla
<tbody> Define el pie de la tabla.
<tfoot>

Ahora bien, un ejemplo sencillo utilizando la etiqueta table, sería el siguiente:

<table border="1">
<caption>Titulo de la tabla</caption>
<tr>
<th>Col.Cab.1</th>
<th>Col.Cab.2</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>

Por consiguiente, el ejemplo anterior se podría visualizar de la siguiente manera:

Título de la tabla
Col.Cab.1 Col.Cab.2
Celda 1 Celda 2

3.1.Definición de una tabla con combinación de columnas

Uno de los atributos que se pueden aplicar a las etiquetas de celda, independientemente

que sean de encabezado o normales, es el atributo colspan, el cual permite realizar la

combinación de varias columnas en una sola. Para especificar el valor del atributo, se ha de

indicar el número de columnas sobre las que se quiere realizar la combinación, utilizando un

valor numérico encerrado entre comillas dobles. Por ejemplo:

<table border="1">
<caption>Tabla con combinación de columnas</caption>
<tr>
<th colspan="2">Celda Combinada</th>
<th>Celda Normal</th>
<th colspan="2">Celda Combinada</th>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
</tr>
<tr>
<td>C6</td>
<td>C7</td>
<td>C8</td>
<td colspan="2">C9 Comb.</td>
</tr>
</table>

Quedando de la siguiente manera:

3.2.Definición de una tabla con combinación de filas

Al igual que se puede realizar la combinación de columnas, también se puede realizar la

combinación de filas, mediante el atributo rowspan. Para especificar el valor del atributo, se

ha de indicar el número de filas sobre las que se quiere realizar la combinación, utilizando

un valor numérico encerrado entre comillas dobles.

<table border="1">
<caption>Tabla con combinación de filas</caption>
<tr>
<th>Celda 1</th>
<th>Celda 2</th>
<th>Celda 3</th>
</tr>
<tr>
<td rowspan="2">Celda Combinada</td>
<td>Celda 5</td>
<td rowspan="2">Celda Combinada</td>
</tr>
<tr>
<td>Celda 7</td>
</tr>
</table>

4. Etiqueta <pre>

La etiqueta <pre>, permite definir lo que se denomina texto con formato o preformateado.

Como se ha comentado anteriormente el navegador no respeta los saltos de línea y espacios

en blanco sobrantes en un documento web. Al insertar en el contenido de esta etiqueta un

texto, el mismo se visualiza normalmente con una fuente de letra de ancho fijo, normalmente

suele ser el tipo de letra Courier.

<p>El ejemplo más usual en los lenguajes de programación</p>
<pre>
#include &lt;stdio.h&gt;;
int main(void) {
printf("Hola Mundo, Aprendoencasa.com");
return 0;
}
</pre>

Obtenido el siguiente resultado al implementar la etiqueta pre:

REFERENCIAS BIBLIOGRÁFICAS

Sánchez, l. (2007). Informática II. Un enfoque constructivista. Pearson Educación, México.
Gauchat, J. (2012). El Gran Libro de HTML5 CSS3 y JavaScript. Marcombo, S.A. España.
Castillo, L. (2013). Iniciación al diseño web en HTML5. Edición Cursos Prácticos.
Eguíluz, P. (2008). Introducción a XHTML. Edición electrónica disponible en:
http://www.librosweb.es/xhtml.