Curso Interactivo de HTML

Comenzamos
En todo el Curso hablaremos de dos términos:

1. Etiqueta de Apertura <.......>

2. Etiqueta de cierre </.....>

Como vez la única diferencia entre ellas es una línea diagonal ( / ).

La expresión completa típica de la mayoría de Elementos consta de tres partes: la Etiqueta de apertura, el contenido que tu colocas y finalmente la Etiqueta de cierre.

Para practicar lo que viene a continuación, escribe tus prácticas en el Block de Notas, y lo guardas en formato "html". Presionas "Archivo"-----> "Guardar Como"---------> practica.html (utiliza este nombre). Ahora busca el archivo y lo abres con tu navegador.
Cada vez que quieres practicar editas el archivo "practica.html" con tu Block de Notas.

Ahora vamos a Escribir en formato HTML.

Para escribir texto en cursiva utilizamos el elemento <i>, ejemplo:

<i>Curso Interactivo</i>

Así se ve

Curso Interactivo

Como vez al utilizar el elemento <i>, debemos colocar una etiqueta de cierre </i>.

Para escribir un texto en negrita utilizamos el elmento <b>, ejemplo:

<b>Curso Interactivo</b>

Así se ve

Curso Interactivo

Como vez, también requiere etiqueta de cierre

Si queremos cambiar el tamaño de las letras, utilizamos cualquiera de estos elementos ...<h1>, <h2>, <h3>, <h4>, <h5>,o, <h6>. Requieren etiqueta de cierre. Por ejemplo:

<h3>Curso Interactivo</h3>

Así se ve

Curso Interactivo

Cada uno de ellos designa un tamaño diferente al texto, <h1> crea un texto gigante, <h6> crea un texto pequeño. Todos provocan un salto de línea

Para crear un salto de línea utilizamos el elemento <br>. En este elemento, la Etiqueta de Cierre está Prohibida. Ejemplo:

Curso Interactivo<br>

Continuamos con el elemento <p>. Sirve para separar párrafos de texto dentro de un documento. Inserta una línea en blanco inmediatamente después del texto del párrafo.
No requiere etiqueta de cierre, a menos que se definan atributos de párrafo. Pero yo te recomiendo que, siempre que esté permitido, utilices la etiqueta de cierre en todos los Elementos. Ejemplo:

<p>Curso Interactivo</p>

Con el elemento "p", puedes usar algunos "atributos", que alterando los valores producen cambios en el texto, por ejemplo:

align

<p align="center">Curso Interactivo</p>

<p align="left">Curso Interactivo</p>

<p align="right">Curso Interactivo</p>

<p align="justify">Curso Interactivo</p>

Así se ve

Curso Interactivo

Con el atributo "align", puedes alinear el texto utilizando los valores "center", "left", "right", o,"justify"

title

<p title="el título que quieras">Curso Interactivo</p>

Así se ve

Curso Interactivo

Con el atributo "title", puedes hacer que cuando pases el cursor sobre las letras, aparezca un título.

style

El atributo "style", permite la ejecución de múltiples cambios. En este momento nos enfocaremos en el cambio del color de las letras, por ejemplo:

<p style="color:#00FF00">Curso Interactivo</p>

Así se ve

Curso Interactivo

En este ejemplo el texto sería de color verde.

Nota: para conocer los diferentes tipos de códigos de colores, entra en la utilidad "Colores en Hex", que se encuentra en el bloque "Herramientas PC".

En resumen, el elemento "p", lo podemos usar de la siguiente manera:

<p style="color:#00FF00" align="center" title="el título que quieras">Curso Interactivo</p>

Así se ve

Curso Interactivo

Como has visto en este ejemplo, se deja un espacio en blanco entre cada atributo (style, align y title).

Elementos SUB y SUP
<sub>...</sub>
<sup>...</sup>
SUB, se utiliza cuando hay que incluir un subíndice.
SUP, cuando hay que utilizar un superíndice.
Requieren etiqueta de cierre. Ejemplo:

H<sub>2</sub>O

Así se ve

H₂O

Copia este ejemplo en tu hoja de práctica para que veas el efecto.

Elemento BDO
<bdo>...</bdo>
Permite cambiar la dirección del texto. Requiere etiqueta de cierre.
Atributos principales "dir", que puede asumir los valores:
dir="ltr"
dir="rtl"

Para usar <bdo>, es obligatorio usar el atributo "dir", porque este determina la dirección. Ejemplo:

<bdo dir="rtl">Curso Interactivo</bdo>

Así se ve

Curso Interactivo

Elemento <hr>

Este elemento crea una línea horizontal. Sus atributos son:

align="left", "center", "right"
size="número de pixels"
width="un porcentaje o número de pixels". Por defecto 100%.
color="#ff0099"

Ejemplo:

Así se ve

Espacio provocado

Podemo usar  
Este nos genera un espacio en blanco, por ejemplo, si queremos dejar espacio extra entre dos palabras hacemos lo siguiente:

Curso          Interactivo

Curso Interactivo

Cópia este ejemplo y observalo en tu hoja de práctica. Verás un aumento en la distancia entre una palabra y otra.

También puedes utilizar este código junto al elemento <p>. Si quieres aumentar el espacio entre un párrafo y otro, entonces haces lo siguiente:

<p>Curso Interactivo</p>
<p> </p>
<p> </p>
<p>Curso Interactivo</p>

Así se ve

Curso Interactivo

Ya vimos que el elemento <p> crea un doble salto de línea, pero siempre debemos poner algo dentro de sus etiquetas. Lo que estamos haciendo es aprovechar que " " es invisible, para crear varios espacios en blanco.

Recopilación:

<p style="color:#ff0000" align="center" title="el título que quieras"><i>Curso Interactivo1</i><b>Curso Interactivo2</b>Curso Interactivo3<br>Curso <sub>Interactivo4</sub>Curso <sup>Interactivo5</sup>Curso Interactivo6</p>

<bdo dir="rtl">Curso Interactivo7</bdo>

<h3>Curso Interactivo8</h3>

Así se ve

Curso Interactivo1Curso Interactivo2Curso Interactivo3
Curso _Interactivo4Curso ^Interactivo5Curso Interactivo6

Curso Interactivo7

Curso Interactivo8

Ahora les toca a ustedes aplicar lo aprendido... Antes de pasar al otro tema deben publicar sus prácticas con el nombre de archivo asignado, en el espacio web contratado. Procuren que sean aproximadamente 30 líneas de texto, para que tengan oportunidad de aplicar todas las opciones posibles sobre los temas anteriores (den rienda suelta a su creatividad).

Luego deben responder en el foro colocando el link que le hemos asignado, o pueden hacer alguna pregunta.

Es posible que el tema de esta primera parte sea bastante sencillo para muchos, pero la idea es dar oportunidad a quien no domina el HTML.

El desarrollo de este primer tema es muy importante, y todos los que deseen participar en el Curso, deben realizar sus prácticas (aunque la sientan muy fácil). De ello depende que continúe este proyecto.

A medida que avanzamos iré aumentando el nivel de dificultad.