Apunte Resumen HTML - v3

HTML
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para

estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus
contenidos podrían ser párrafos, una lista con viñetas, imágenes y/o tablas de
datos.
La estructura básica de un HTML se presenta en la Fig. 1.
Fig. 1 Estructura de un HTML
En la Fig. 1, se debe notar que el contenido de la sección entre las etiquetas

<body> y </body> (en fondo blanco) se representa en el navegador. Mientras que
el contenido entre <title> y </title> se muestra en la barra de título del
navegador o en la pestaña de la página.
Al trabajar en Moodle, sólo se requiere incluir el texto que iría dentro del cuerpo
del HTML (entre las etiquetas <body> y </body>).
Elementos
Los elementos se encuentran delimitados por dos etiquetas, que siguen la
estructura <element> </element>. Algunos de los elementos más utilizados se
presentan a continuación:
1. Encabezados: Los encabezados se definen con las etiquetas <h1>, <h2>, …,

<h6>. La etiqueta <h1> define el encabezado de mayor importancia, y <h6>
define el menos importante.
Ejemplo: Resultado:
<h1>Este es el encabezado 1</h1>

2. Párrafos: Los párrafos se definen con la etiqueta <p>.
Ejemplo: Resultado:
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
3. Enlaces web: Los enlaces web se pueden definir con la etiqueta <a>. En
este caso, la etiqueta de inicio (o apertura) incluye un atributo, donde se
ubica el enlace web. De forma general, los atributos se utilizan para
entregar información adicional a un elemento.
Ejemplo: Resultado:
<a href="https://www.w3schools.com">Este
es un enlace.</a>
En caso de hacer clic izquierdo sobre el texto, el navegador abrirá el enlace

web.
4. Imágenes: Las imágenes se definen con la etiqueta <img>. Se debe

proveer los siguientes atributos: archivo fuente (src), texto alternativo
(alt), ancho (width) y alto (height) de la imagen.
Ejemplo: Resultado:
<img src="w3schools.jpg" alt="W3Schools.com"

width="104" height="142">
Al trabajar en Aula Virtual, que está basada en Moodle, recomendamos cargar

las imágenes por medio de la herramienta de carga de imágenes (1), y luego
al ver el código HTML (2), ajustar el ancho y alto de la imagen.
(1) (2)
Elementos y atributos adicionales

1. Estilo de texto: Es posible ajustar el estilo de texto en negrita, cursiva,
subrayado y tachado, por medio de las etiquetas <b>, <i>, <u> y <s>,
respectivamente.
Ejemplo:
<p>El texto puede estar en <b>negrita</b>, <i>cursiva</i>,

<u>subrayado</u> o <s>tachado</s>.</p>
<p><b><i> Este texto en negrita y cursiva</i></b></p>
Resultado:
2. Color de fuente: Se definir el color de la fuente, así como otras

características, por medio de la etiqueta <span> y el atributo style.
Ejemplo:
<p>Matías usa un traje <span style="color:blue">azul</span> y corbata

<span style="color:red">roja</span>.</p>
<p>También, se puede poner el texto en negrita y/o cursiva por medio

del atributo style:</p>
< <p>Matías usa un traje <span style="color:blue; font-

weight:bold">azul</span> y corbata <span style="color:red;font-
weight:bold;font-style:italic">roja</span>.</p>
Resultado:
También, es posible agregar colores diferentes a los provistos por defecto,

usando su código HEX, RGB o HSL.
3. Viñetas: Se puede incorporar viñetas o bullet points, por medio de las

etiquetas <ul> y <li>.
Ejemplo: Resultado:
<ul>
<li>Primer texto</li>
<li>Segundo texto</li>
<li>Tercer texto</li>
<li>Cuarto texto</li>
</ul>
4. Salto de línea: Se obtiene un salto de línea por medio de la etiqueta <br>.

No es necesario usar una etiqueta de cierre.
Ejemplo: Resultado:
<p>Este texto tiene<br> un salto de

línea</p>
Ejemplo
Para conseguir las etiquetas utilizadas en el Aula de Formación del taller, se
configura una Etiqueta de Moodle con el siguiente código:
<div style="background-color: #e80f57; padding: 5px 15px 5px 15px;

border-bottom: #355e925px solid; border-radius: 20px; width: 100%;">
<center><span style="font-family: verdana, arial, helvetica, sans-
serif; font-size: large;"><b><span style="color:
#ffffff;">Clase</span></b>
</span>
</center>
</div>
Lo anterior, produce la siguiente etiqueta de Moodle:
Observación: <div> permite crear un contenedor o “caja”, que puede ser

personalizado con diversos atributos (background-color, padding, border-
bottom y border-radius).
Enlaces de interés
Introducción a XHTML:
http://dis.um.es/~lopezquesada/documentos/IES_1213/LMSGI/curso/UT4/libr
oswebxhtml/www.librosweb.es/xhtml/index.htm
Códigos de color HTML:

https://htmlcolorcodes.com/
Editor HTML online:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_headings
Propiedad border-radius de CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Apunte Resumen HTML - v3

Cargado por

Información del documento

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

Apunte Resumen HTML - v3

Cargado por

Copyright:

Formatos disponibles

HTML

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para

Fig. 1 Estructura de un HTML

En la Fig. 1, se debe notar que el contenido de la sección entre las etiquetas

1. Encabezados: Los encabezados se definen con las etiquetas <h1>, <h2>, …,

<h1>Este es el encabezado 1</h1>

2. Párrafos: Los párrafos se definen con la etiqueta <p>.

En caso de hacer clic izquierdo sobre el texto, el navegador abrirá el enlace

4. Imágenes: Las imágenes se definen con la etiqueta <img>. Se debe

<img src="w3schools.jpg" alt="W3Schools.com"

Al trabajar en Aula Virtual, que está basada en Moodle, recomendamos cargar

Elementos y atributos adicionales

<p>El texto puede estar en <b>negrita</b>, <i>cursiva</i>,

<p><b><i> Este texto en negrita y cursiva</i></b></p>

2. Color de fuente: Se definir el color de la fuente, así como otras

<p>Matías usa un traje <span style="color:blue">azul</span> y corbata

<p>También, se puede poner el texto en negrita y/o cursiva por medio

< <p>Matías usa un traje <span style="color:blue; font-

También, es posible agregar colores diferentes a los provistos por defecto,

3. Viñetas: Se puede incorporar viñetas o bullet points, por medio de las

4. Salto de línea: Se obtiene un salto de línea por medio de la etiqueta <br>.

<p>Este texto tiene<br> un salto de

<div style="background-color: #e80f57; padding: 5px 15px 5px 15px;

Observación: <div> permite crear un contenedor o “caja”, que puede ser

Códigos de color HTML:

Editor HTML online:

Propiedad border-radius de CSS:

También podría gustarte