ETIQUETAS, ATRIBUTOS Y ELEMENTOS BÁSICOS DE HTML EN MOODLE - Cuarta 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 –
CUARTA PARTE.

1. Atributo<style>

El atributo style permite especificar un estilo CSS (Hojas de Estilo en Cascada
“Cascading Style Sheets”), asociado al elemento sobre el cual se aplica, para cambiar su
formato de presentación. Es importante destacar, que Moodle, emplea este atributo por
defecto para darle los distintos estilos existentes a los textos, imágenes, videos, entre otros,
en el editor de texto TinyMCE. Es decir, cuando se modifica el tamaño, color y/o tipo de
fuente de un texto cualquiera mediante el uso de los iconos de la barra de edición, Moodle
automáticamente convierte esas características a valores del atributo style.

<Etiqueta style=”Regla CSS 1; Regla CSS 2”>Contenido del elemento</Etiqueta>

Entre las reglas más utilizadas para el atributo style, podemos encontrar:

REGLA DESCRIPCIÓN
Color Modifica el color del texto.
Font-size Permite modificar el tamaño de la fuente.
text-align Alinea el texto en el sentido indicado en el documento.
font-family Indica el tipo o familia de fuente que se desee usar.
background-color Se utiliza para dar color de fondo al texto.
margin Permite agregar márgenes horizontales y verticales a las imágenes.
border Se puede utilizar para dar bordes al elemento seleccionado.
vertical-align Alinea una imagen en la posición deseada con respecto al texto.

Al implementar algunas de las reglas para el atributo style mencionadas anteriormente,
las sintaxis del atributo serían las siguientes:

<p style="color: red;">El párrafo tiene un estilo de color asociado.</p>
<p style="font-size: 2em;">El párrafo tiene un estilo de fuente asociado.</p>
<p style="color: blue; font-size: 1.4em;">Parrafo con dos estilos asociados</p>
<p style="color: red; text-align: justify; font-family: times new roman,times,serif; font-size:
medium; color: #ffff00; background-color: #ff0000;">El párrafo posee varias reglas del
atributo style.</span></strong></em></p>

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

Mientras que la sintaxis para imagen cualquiera, aplicando el atributo de style, sería la
siguiente:

<img src="dirección web" alt="nombre alternativo" title="título de la imagen"
style="margin: 2px 1px; border: 2px solid black; vertical-align: bottom;" width="50%"
height="50%" />

En la estructura anterior, se puede observar cómo se combinan atributos de la etiqueta img

con el atributo style.

VALOR DESCRIPCIÓN
border: dotted Borde punteado, formado por una serie de puntos separados
border: dashed
border: solid por espacios.
vertical-align: baseline Borde discontinuo, formado por una serie de pequeños
vertical-align: top
vertical-align: middle trazos intercalados por espacios.
vertical-align: bottom
vertical-align: text-top Borde continuo, formado por una línea recta continua.
vertical-align: text-bottom
float: left Alinea la línea base del elemento con la línea base de la
float: right imagen.

Alinea la parte superior del elemento con el elemento más
alto en la línea.

Alinea el punto medio vertical del elemento con la línea
base más la mitad de la imagen.

Alinea la parte inferior del elemento con el elemento más
bajo en la línea.

Alinea las partes superiores del elemento y la fuente del
elemento.

Alinea las partes inferiores del elemento y la fuente del
elemento.

La imagen se desplaza todo lo posible a la izquierda de la
posición en la que se encontraba.

La imagen se desplaza todo lo posible a la derecha de la
posición en la que se encontraba.

2. Etiquetas <span> y <div>

La etiqueta <span> se utiliza para asignar un nombre a un elemento en específico del
código html. Es decir, es un contenedor en línea. El cual sirve para aplicar estilo al texto o
agrupar elementos en línea.

Mientras que la etiqueta <span> se usa dentro de un elemento a nivel de línea,

posibilitando definir un área del documento y a su vez usado para poner referencias y asignar

atributos o estilos, la etiqueta <div> se usa para agrupar uno o más elementos a nivel de

bloque. Por lo tanto, permite envolver un área de contenido para definir una sección. Por

consiguiente, las etiquetas <div> y <span>, no tienen ningún tipo de significado especial,

solo que la primera se define como un elemento de bloque y por tanto el navegador mostrara

un salto de línea antes y después de la misma. Mientras que la segunda es un elemento de

línea. Ejemplos:

<div> Contenido del bloque, Otras etiquetas, etc. </div>
<div>Contenido <span>del bloque</span> con elementos en línea</div>
<p>Elementos de bloque y línea</p>
<div style="color: red">
<h3>Encabezado de tipo 3</h3>
<p>Párrafo con formato aplicado.</p>
</div>
<div>
<p>Párrafo con formato <span style="color: blue">aplicado</span> a un elemento en
línea</p>
</div>

3. Etiqueta <details>

La etiqueta <details>, permite definir contenido que el usuario puede visualizar u ocultar

según le interese. La etiqueta permite cualquier tipo de contenido, y para visualizar el mismo

se ha de realizar un clic sobre el símbolo correspondiente en el navegador, para que la etiqueta

muestre su contenido, ya que por defecto y si no se especifica lo contrario se establece como

oculto. La sintaxis de la etiqueta es la siguiente.

<details>
<summary>Titulo del contenido</summary>
Contenido de la etiqueta …
</details>

Por otra parte, para que se visualice como título de la etiqueta, sirviendo a su vez de texto

de referencia, para visualizar o no el contenido, se utiliza la etiqueta

<summary></summary>, en la que se ha de teclear el título que se desea visualizar, esta

etiqueta de título ha de ser la primera etiqueta del contenido de la etiqueta <details>. El

siguiente ejemplo muestra el uso de la etiqueta en un documento web.

<h1>Páginas webs interesantes</h1>
<p>
<details>
<summary>Buscadores</summary>
<ul>
<li><a href="http://www.google.es">Google</a></li>
<li><a href="http://www.bing.es">Bing</a></li>
</ul>
</details>
<details>
<summary>Educación</summary>
<ul>
<li><a href="http://unellez.edu.ve/">Universidad</a></li>
<li><a href=" http://www.edudigital.unellez.edu.ve/">Estudios a Distancias</a></li>
</ul>
</details>
</p>

4. Etiqueta <iframe>

La etiqueta iframe representa un contexto de navegación anidado, lo que es básicamente

un documento anidado en el documento actual en el cual se está trabajando, es decir, la

etiqueta <iframe> permite insertar un documento html dentro de otro o la inserción de un

marco en línea dentro del documento web, permitiendo insertar contenido dentro de un

documento como puede ser otro documento web, un mapa de google maps, un video de

youtube, entre otros. Así mismo, puede aparecer como elemento de bloque o como elemento

en-línea. Es importante destacar que la dirección desde la cual el navegador debería recuperar

el documento incrustado puede ser provista en el atributo src.

La sintaxis de la etiqueta es la siguiente:

<iframe height=”valor” width=”valor” name=”valor” src=”valor”></iframe>

Algunos ejemplos al implementar la etiqueta iframe:
<iframe width="560" height="315" src="dirección web a insertar" frameborder="0"
allowfullscreen></iframe>

El ejemplo anterior, representa la inserción de videos comúnmente desde youtube, donde
podemos observar como se selecciona un tamaño fijo, un borde en cero y se permite la
pantalla complete para el video. Mientras que en el siguiente ejemplo se podrá observar cómo
se utiliza el atributo style para darle todas las características visuales que se desee al marco
insertado.

<iframe src=" dirección web a insertar " style="width: 400px; height: 200px;"></iframe>

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.