CREANDO​ ​CON​ ​HTML

La​ ​siguiente​ ​es​ ​una​ ​plantilla​ ​para​ ​crear​ ​contenido​ ​personalizado

dentro​ ​de​ ​tu​ ​unidad.​ ​Lo​ ​primero​ ​que​ ​debes​ ​hacer​ ​es​ ​crear​ ​un
componente​ ​RAW​ ​HTML.

Para​ ​personalizar​ ​la​ ​fuente​ ​que​ ​se​ ​usará,​ ​debemos​ ​primero​ ​editar​ ​el
encabezado.​ ​El​ ​objetivo​ ​es​ ​que​ ​quede​ ​así:

1 <link
href="https://fonts.googleapis.com/css?family=Nosifer"
rel="stylesheet">

<style>
2
.Titulares​ ​{
font-family:​ ​'Nosifer',​ ​cursive;
font-size:​ ​20pt;
line-height:1em;
letter-spacing:​ ​2px;
color:#000000;
font-weight:​ ​bold;
}
</style>

3 <style>
.Desarrollo​ ​{
font-family:​ ​'Nosifer',​ ​cursive;
font-size:​ ​16px;
}
</style>

<style>
4
.PieFoto​ ​{
font-family:​ ​'Nosifer',​ ​cursive;
font-size:​ ​10px;
text-align:justify;
color:#606060
}
 </style>

Lo​ ​primero​ ​que​ ​vemos​ ​en​ ​el​ ​estilo​ ​es​ ​la​ ​fuente​ ​a​ ​utilizar.​ ​Esta​ ​se
recupera​ ​de​ ​https://fonts.google.com/​...

...y​ ​del​ ​recuadro​ ​“EMBED”​ ​en​ ​la​ ​pestaña​ ​inferior​ ​de​ ​color​ ​negro:
Lo​ ​segundo​ ​que​ ​vemos,​ ​es​ ​el​ ​estilo​ ​de​ ​titulares.​ ​Mira​ ​las​ ​partes​ ​de
este​ ​bloque.​ ​La​ ​tercer​ ​línea​ ​“font-family”​ ​se​ ​editarán​ ​conforme​ ​a​ ​la
fuente​ ​que​ ​hemos​ ​importado​ ​de​ ​google,​ ​en​ ​el​ ​recuadro​ ​“Specify​ ​in
CSS”​ ​(imagen​ ​de​ ​arriba):

A​ ​continuación,​ ​mira​ ​la​ ​función​ ​de​ ​cada​ ​etiqueta:

<style>​←​ ​ABRIR​ ​EL​ ​ESTILO

.Titulares{​ ​←​ ​NOMBRE​ ​DEL​ ​ESTILO
font-family:​ ​'Nosifer',​ ​cursive;​​ ​←​ ​FUENTE
font-size:​ ​20pt;​←​ ​TAMAÑO​ ​DE​ ​FUENTE
line-height:1em;​ ​←​ ​SEPARACIÓN​ ​ENTRE​ ​LÍNEAS
letter-spacing:​ ​2px;​ ​←​ ​SEPARACIÓN​ ​ENTRE​ ​LETRAS
color:#000000;​ ​←​ ​COLOR​ ​(http://htmlcolorcodes.com/es/)
font-weight:​ ​bold;​ ​←​ ​¿NEGRITA?
 }
</style>​←​ ​CERRAR​ ​EL​ ​ESTILO

El​ ​tercer​ ​elemento​ ​indica​ ​el​ ​estilo​ ​del​ ​cuerpo​ ​del​ ​texto.​ ​Sus
componentes​ ​son​ ​similares​ ​que​ ​en​ ​titulares,​ ​pero​ ​con​ ​valores
diferentes:

<style>
.Desarrollo​ ​{
font-family:​ ​'Nosifer',​ ​cursive​;
font-size:​ ​16px;
}
</style>

El​ ​cuarto​ ​elemento,​ ​son​ ​los​ ​pies​ ​de​ ​foto:

<style>
.PieFoto​ ​{
font-family:​ ​'Nosifer',​ ​cursive​;
font-size:​ ​10px;
text-align:justify;
color:#606060
}
</style>

Ya​ ​que​ ​tenemos​ ​el​ ​encabezado​ ​sigue​ ​elaborar​ ​el​ ​cuerpo,​ ​es​ ​decir,
nuestro​ ​texto​ ​incluyendo​ ​titulares,​ ​desarrollo,​ ​pies​ ​de​ ​foto​ ​y​ ​todo​ ​lo
que​ ​deseemos​ ​crear.

Cuando​ ​queramos​ ​escribir​ ​un​ ​titular​ ​en​ ​HTML​ ​lo​ ​haremos​ ​de​ ​la
siguiente​ ​forma.​ ​El​ ​texto​ ​en​ ​rojo​ ​es​ ​el​ ​que​ ​se​ ​editará.

<div​ ​class="Titulares">​ ​TÍTULO​​ ​</div>

Por​ ​ejemplo:
 <div​ ​class="Titulares">​ ​UNIDAD​ ​1​ ​</div>

Después​ ​de​ ​cerrar​ ​con​ ​la​ ​etiqueta​ ​</div>​,​ ​podemos​ ​insertar​ ​el
cuerpo​ ​del​ ​texto.​ ​Se​ ​hará​ ​de​ ​la​ ​siguiente​ ​forma:

<​div​ ​class="Desarrollo">
<p>​​ ​Texto​ ​texto​​ ​texto​ t
​ exto​ t ​ exto​ ​texto​ ​texto​ ​texto​ ​texto
texto​ ​texto​ ​</p>
<p>​​ ​Texto​ ​texto​ ​texto​ t ​ exto​ ​</p>​ ​</div>

Por​ ​ejemplo:

<div​ ​class="Desarrollo">
<p>​​ ​El​ ​ámbito​ ​educativo​ ​está​ ​incursionando​ ​en​ ​un​ ​nuevo​ ​mundo:
las​ ​redes​ ​sociales.​ ​Sin​ ​embargo,​ ​diferentes​ ​estudios​ ​que​ ​han
abordado​ ​este​ ​tema,​ ​no​ ​han​ ​determinado​ ​cuál​ ​es​ ​la​ ​manera
factible​ ​de​ ​usarlas​ ​como​ ​herramienta​ ​educativa.​​ ​ ​</p>
<p>​​ ​Este​ ​ejercicio​ ​de​ ​investigación​ ​propone​ ​la​ ​creación​ ​de
una​ ​herramienta​ ​a​ ​través​ ​de​ ​las​ ​redes​ ​sociales,
específicamente​ ​un​ ​grupo​ ​de​ ​Facebook,​ ​para​ ​crear​ ​una
comunidad​ ​de​ ​práctica​ ​entre​ ​los​ ​alumnos​ ​y​ ​profesores​ ​de
distintas​ ​secundarias,​ ​con​ ​la​ ​visión​ ​puesta​ ​en​ ​ayudar​ ​a
mejorar​ ​el​ ​rendimiento​ ​académico​ ​de​ ​los​ ​estudiantes.​​ ​ ​</p>
</div>

Cada​ ​etiqueta​ ​<p>​​ ​que​ ​se​ ​abre​ ​significa​ ​un​ ​párrafo​ ​nuevo.​ ​Por​ ​lo
que​ ​no​ ​debemos​ ​olvidar​ ​cerrar​ ​la​ ​etiqueta​ < ​ /p>​​ ​una​ ​vez​ ​concluído
el​ ​párrafo,​ ​así​ ​como​ ​cerrar​ ​con​ ​</div>​​ ​una​ ​vez​ ​concluído​ ​todo​ ​el
texto.

Insertar​ ​pies​ ​de​ ​foto​ ​sigue​ ​la​ ​misma​ ​lógica,​ ​aquí​ ​un​ ​ejemplo:

<img​ ​src=​ ​"/imagen.png"​ ​/>

<div​ ​class="PieFoto">​ ​Figura​ ​1.​ ​</div>

Entonces,​ ​nuestro​ ​componente​ ​HTML​ ​quedaría​ ​así:

<link​ ​href="https://fonts.googleapis.com/css?family=Nosifer"
rel="stylesheet">

<style>
.Titulares​ ​{
font-family:​ ​'Nosifer',​ ​cursive;
font-size:​ ​20pt;
line-height:1em;
letter-spacing:​ ​2px;
color:#000000;
font-weight:​ ​bold;
}
</style>

<style>
.Desarrollo​ ​{
font-family:​ ​'Nosifer',​ ​cursive;
font-size:​ ​16px;
}
</style>

<style>
.PieFoto​ ​{
font-family:​ ​'Nosifer',​ ​cursive;
font-size:​ ​10px;
text-align:justify;
color:#606060
}
</style>

<div​ ​class="Titulares">​ ​UNIDAD​ ​1​ ​</div>

<div​ ​class="Desarrollo">
<p>​​ ​El​ ​ámbito​ ​educativo​ ​está​ ​incursionando​ ​en​ ​un​ ​nuevo​ ​mundo:
las​ ​redes​ ​sociales.​ ​Sin​ ​embargo,​ ​diferentes​ ​estudios​ ​que​ ​han
abordado​ ​este​ ​tema,​ ​no​ ​han​ ​determinado​ ​cuál​ ​es​ ​la​ ​manera
factible​ ​de​ ​usarlas​ ​como​ ​herramienta​ ​educativa.​​ ​ ​</p>
<p>​​ ​Este​ ​ejercicio​ ​de​ ​investigación​ ​propone​ ​la​ ​creación​ ​de
una​ ​herramienta​ ​a​ ​través​ ​de​ ​las​ ​redes​ ​sociales,
específicamente​ ​un​ ​grupo​ ​de​ ​Facebook,​ ​para​ ​crear​ ​una
comunidad​ ​de​ ​práctica​ ​entre​ ​los​ ​alumnos​ ​y​ ​profesores​ ​de
distintas​ ​secundarias,​ ​con​ ​la​ ​visión​ ​puesta​ ​en​ ​ayudar​ ​a
 mejorar​ ​el​ ​rendimiento​ ​académico​ ​de​ ​los​ ​estudiantes.​​ ​ ​</p>
</div>

<img​ ​src=​ ​"/imagen.png"​ ​/>

<div​ ​class="PieFoto">​ ​Figura​ ​1.​ ​</div>

Y​ ​se​ ​verá​ ​así:

NOTA:​ ​En​ ​este​ ​ejemplo​ ​se​ ​ha​ ​utilizado​ ​una​ ​fuente​ ​muy​ ​llamativa
para​ ​dar​ ​a​ ​notar​ ​la​ ​diferencia.​ ​En​ ​los​ ​cursos​ ​en​ ​línea​ ​se​ ​recomienda
utilizar​ ​fuentes​ ​Sans​ ​Serif​ ​para​ ​facilitar​ ​la​ ​lectura.
Para​ ​tener​ ​más​ ​elementos​ ​HTML​ ​te​ ​mostramos​ ​los​ ​siguientes:

TEXTO​ ​DE​ ​COLOR​ ​(TODO​ ​EL​ ​PÁRRAFO)

<p​ ​style="color:#f1582b>​ ​TEXTO​ ​</p>

UNA​ ​SOLA​ ​PALABRA​ ​DE​ ​COLOR​ ​DENTRO​ ​DEL​ ​PÁRRAFO

<span​ ​style="color:#f1582b">​ ​palabra​​ ​</span>

CENTRAR​ ​(TODO​ ​EL​ ​PÁRRAFO)

<p​ ​style="text-align:center">​ ​TEXTO​ ​</p>

NEGRITAS
<strong>​ ​TEXTO​​ ​</strong>
<b>​ ​TEXTO​​ ​</b>

CURSIVAS
<i>​ ​TEXTO​​ ​</i>

SUBRAYADO
<u>​ ​TEXTO​​ ​</u>

COLOCAR​ ​UN​ ​HIPERVÍNCULO

<a​ ​href="​enlacepagina.html​"​ ​target="_blank">​ ​ENLACE​ ​A​ ​OTRA​ ​PÁGINA
</a>

VIÑETAS
<ul>
<li>​ ​TEXTO
<li>​ ​TEXTO
</ul>

LISTA​ ​NUMÉRICA
<ol>
<li>​ ​TEXTO
<li>​ ​TEXTO
</ol>

INSERTAR​ ​IMAGEN
<img​ ​src=​ ​"​LINK​ ​DE​ ​LA​ ​IMAGEN​"​ ​/>