Formación para el Trabajo

Etiquetas para Texto

Bienvenidos estimados aprendices al curso de Fundamentos de HTML5, En esta nueva guia virtual analizaremos las diferentes etiquetas HTML que nos sirven para estructurar componentes de texto y construir proyectos practicos para adquirir conocimiento y experiencia.

1. Etiquetas para Texto y Formato de Texto

Las etiquetas para texto en HTML, así como las etiquetas de formato, aquellas que se emplean exclusivamente para crear elementos de texto y controlar su formato hasta cierto punto, HTML nos permite indicar cómo se muestra un texto en la página web mediante las etiquetas correspondientes.

Etiquetas para Texto

Como su nombre lo indican, las etiquetas para texto permiten modificar la apariencia que tendrá un bloque de texto al interior de la página.

Las etiquetas que siempre indican texto:

Etiqueta Descripción
<p> Indica que el elemento es un párrafo.
<h1> Indica que se trata de un titulo principal
<h2>, <h3>,<h4>, <h5>, <h6> indica niveles de subtítulos, los elemento de cabecera implementan seis niveles

Ejemplo de etiquetes para texto:

Titulo h1

Titulo h2

Titulo h3

Titulo h4

Titulo h5
Titulo h6

Soy un parrafo, Lorem ipsum dolor sit amet...


<h1>Titulo h1</h1>
<h2>Subtitulo h2</h2>
<h3>Subtitulo h3</h3>
<h4>Subtitulo h4</h4>
<h5>Subtitulo h5</h5>
<h6>Subtitulo h6</h6>
<p>Soy un parrafo, Lorem ipsum dolor sit amet...</p>

Etiquetas para Formato de Texto

Esta etiquetas indican un formato semantico en el texto:

Etiqueta Descripción
<b> Texto en negrilla
<em> Texto en cursiva con enfasis
<i> Texto en cursiva
<u> Texto subrayado
<strong> Texto en negrilla importante
<big> Texto grande
<small> Texto pequeño
<mark> Texto resaltado
<cite> Título de una obra ó Autor
<blockquote> Contenido citado desde otra fuente
<span> Texto sin formato semantico
<br> Salto de linea
<hr> Linea de quiebre tematico

Ejemplo de etiquetas de Formato de texto:

Texto con negrilla simple, Lorem ipsum dolor sit amet...

Texto con cursiva enfatizado, Lorem ipsum dolor sit amet...

Texto con cursiva simple, Lorem ipsum dolor sit amet...

Texto con subrayado, Lorem ipsum dolor sit amet...

Texto con negrilla importante, Lorem ipsum dolor sit amet...

Texto con grande, Lorem ipsum dolor sit amet...

Texto con pequeño, Lorem ipsum dolor sit amet...

Texto con subrayado, Lorem ipsum dolor sit amet...

Texto con Titulo ó Autor, Autor: Lorem ipsum dolor sit amet...

Texto con cotenido citado,

Lorem ipsum dolor sit amet...

Texto con salto de linea br,
Lorem ipsum dolor sit amet...

Linea de Quiebre con hr,



 <p>Texto con negrilla simple, <b>Lorem ipsum dolor sit amet...</b></p>
 <p>Texto con cursiva enfatizado, <em>Lorem ipsum dolor sit amet...</em></p>
 <p>Texto con cursiva simple, <i>Lorem ipsum dolor sit amet...</i></p>
 <p>Texto con subrayado, <u>Lorem ipsum dolor sit amet...</u></p>
 <p>Texto con negrilla importante, <strong>Lorem ipsum dolor sit amet...</strong></p>
 <p>Texto con grande, <big>Lorem ipsum dolor sit amet...</big></p>
 <p>Texto con pequeño, <small>Lorem ipsum dolor sit amet...</small></p>
 <p>Texto con subrayado, <mark>Lorem ipsum dolor sit amet...</mark></p>
 <p>Texto con Titulo ó Autor, <cite>Lorem ipsum dolor sit amet...</cite></p>
 <p>Texto con cotenido citado, <blockquote>Lorem ipsum dolor sit amet...</blockquote></p>
 <p>Texto con salto de linea br, <br>Lorem ipsum dolor sit amet...</p>
 <p>Linea de Quiebre con hr, <hr>  </p>

Ejemplo Practico: Un Articulo

Cómo ya hemos dicho es un lenguaje de marcas (etiquetas). Así que todo nuestro texto estará encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.

Analisis y Desarrollo de Sistemas de Información


Perfil del aprendiz

Un Analista de Sistemas es responsable del estudio de los problemas y las necesidades presentes en la organización para determinar en qué medida pueden las aplicaciones de software, los servicios tecnologicos web y bases de datos, las redes, las personas y los procedimientos actuar conjuntamente para resolver los problemas del modo más adecuado y mejorar los sistemas de la empresa y de información .

      
<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>adsi</title>
   </head>
   <body>
                                 
      <h1>Analisis y Desarrollo de Sistemas de Información<h1>
      <hr>
      <h2>Perfil del aprendiz</h2>
      <p>
         Un <b>Analista de Sistemas<b> es responsable del <strong>estudio de los problemas<strong> y las necesidades presentes en la <em>organización<em> para determinar en qué medida pueden las <i>aplicaciones de software<i>, los servicios tecnologicos web
         y bases de datos, las <small>redes<small>, las  <big>personas<big>  y los procedimientos actuar conjuntamente para resolver los problemas del modo más adecuado y <mark>mejorar los sistemas de la empresa y de información<mark> .
      <p>
                                 
   </body>
</html>

Actividad #4. HTML5: ETIQUETAS PARA TEXTO

Actividad para el desarrollo de habilidades el el uso del lenguaje HTML5 para crear paginas estaticas.

Te ha resultado util esta guia de aprendizaje ?

Que tal el contenido?