Post 4: Leer y editar código HTML en la vista "Código".

En uno de nuestros post anteriores  "Creando nuestro primer sitio"  construimos una página web muy básica simplemente trabajando igual que como si estuviéramos en la herramienta de Office Microsoft Word, trabajando únicamente sobre la vista "Diseño". Pero llego el momento de ver que pasa en la vista "Código" mientras vamos realizando nuestra página Web en modo "Diseño". También vamos a ver como trabajar de forma muy básica en la vista "Código", y en nuestro próximo post vamos a ver como importar código de un archivo de Microsoft Word, y como dejar de forma más limpia y leíble el texto importado. 

Editar un archivo existente utilizando la vista "Código".

Antes de meternos de lleno en lo que es editar una pagina Web en la vista "Código", echemos un vistaso de ambas vistas juntas en el modo "Dividir". En la Fig 1 podemos ver ambas vistas, "Código" y "Diseño" pero lo que es importante ver es como nuestro código HTML fue cambiando a medida que editábamos nuestra página en el modo "Diseño".

Fig 1 - Vista "Dividir" donde vemos el codigo HTML y la pagina tal cual la veríamos en un navegador. Para verlo mejor haga click en la imagen.

Comencemos por ver que es cada cosa de nuestra vista "Código". Si hacemos click en el título en la vista "Diseño", este se va a pintar de color rosado, y si miramos en el HTML vamos a notar que también se nos pinta la línea donde está especificado nuestro encabezado. Este Título, en la vista "Código" aparece entre <h1> y </h1>. Ambos son llamados Tags o etiquetas, estos tags son los que le dicen a nuestro navegador que el texto que está entre ellos lo tiene que desplegar con estilo de encabezado. En la Fig 2 podemos observar lo dicho renglones anteriores.

Fig 2 - En esta imagen vemos como se interpreta el HTML en el modo "Diseño" según las etiquetas presentes en el código. Para agrandar hacer click en la imagen.

Al editar y crear código HTML tenemos que tener en claro que el mismo siempre está entre dos etiquetas (también llamadas tags), la primera al principio para marcar el comienzo y la segunda al final marcando el fin . Todas las etiquetas de comienzo consisten en el símbolo de “menor que” ( < ), seguido de el nombre del la etiqueta y termina con el símbolo de “mayor que”( > ). Las etiquetas al final del código HTML son muy similares pero con la única diferencia que se le agrega una barra ( / ) antes del nombre de la etiqueta o función. Por  ejemplo el texto que aparece entre las etiquetas h1 y /h1 quiere decir que es un encabezado, en nuestra pagina se ve así.

<h1>Este es el titulo de mi primer pagina web!!</h1>

Ahora podemos decir que tenemos dos formas de cambiar la apariencia de nuestra página: Una de ellas es utilizar el menú desplegable de estilos como vimos en el post numero 2, o podemos ir a la vista "Código" y cambiar los estilos manualmente.

Podemos notar también que Expression Web automáticamente siempre está buscando errores en nuestro código, por ejemplo si nosotros cambiamos el primer tag <h1> (encabezado) por <p> (párrafo), Expression Web va a pintar las letras de la etiqueta en rojo y el fondo en amarillo, advirtiéndonos que nuestro código tiene errores. Esto también lo podemos notar en la barra de estatus ya que la misma nos va a estar mostrando los errores y advertencias de nuestro código. En la Fig 3 podemos visualizar lo que mencionamos anteriormente.

 Fig 3 - Como se visualiza la vista "Código" cuando cometemos un error al editar el HTML. Apliar la fig haciendo click sobre ella.

Breve tutorial de HTML.

Este tutorial es simplemente una guía rápida sobre HTML, se puede conseguir más información buscando en Internet sobre este tema. En post siguientes iremos también explicando todas las etiquetas nuevas que se nos vayan presentando. Ya culminada ésta introducción podemos pasar al breve tutorial.

Que es HTML?

 Algo que tenemos que tener bien claro es que decir documentos HTML es lo mismo que decir página Web. Algunos tips más:

• Los documentos HTML describen las paginas Web.
• Los documentos HTML contienen etiquetas y texto plano.
• Los documentos HTML son también llamados páginas Web.

El propósito de un navegador es leer el documento HTML, interpretarlo y desplegarlo como una página Web. El navegador no va a desplegar las etiquetas HTML, al contrario utiliza esas etiquetas para interpretar el contenido de la página.

Un documento HTML va a tener esta forma:

<html>
<body>
<h1> Encabezado 1</h1>
<p>Mi primer párrafo</p>
</body>
</html>

Explicación de las etiquetas anteriores:

<html> - Nos indica el comienzo de una página web.

<body> - Entre estas etiquetas va el contenido visible de nuestra página web.

<h1> - Despliega el texto entre estas etiquetas con estilo de Encabezado.

<p> - Despliega el texto entre estas etiquetas con estilo párrafo.

Encabezados en HTML

Las etiquetas de encabezados en HTML son definidos entre <h1> y <h6>. Hay seis tipos de encabezados, a medida que crece el numero, más chico es el tamaño de la letra.

<h1> Encabezado1 </h1>
<h2> Encabezado2 </h2>
<h3> Encabezado3 </h3>

Parrafos en HTML 

Los parrafos en HTML son definidos con la etiquta <p>.
El elemento párrafo arranca en la etiqueta <p> y termina en la etiqueta </p>.
El contenido del elemento párrafo es en el ejemplo siguiente "Este en mi primer párrafo".

<p> Este es mi primer párrafo </p>
<p> Este es mi segundo párrafo </p> 


Links en HTML 


Los Links en HTML son definidos con la etiqueta <a>

<a href="http://www.todosobreexpressionweb.blogspot.com">Este es un link</a> 


Imágenes en HTML


La imágenes en HTML son definidas con la etiqueta <img>

<img src="Expression Web.jpg" width="100" height="130" />

 Comentarios en HTML

En nuestro código HTML podemos poner comentarios para hacer más entedible y leíble nuestro documento para terceras personas y para nosotros mismos cuando queremos leer y entender nuestro código. Los comentarios son ignorados por el navegador y son escritos de la siguiente forma.

<!--Esto es un comentario -->

Formato de texto en HTML

etiqueta	Explicación de la etiqueta
<b>	Texto en negrita
<big>	Texto en letras grande
<em>	Texto con énfasis similar a cursiva
<i>	Texto en cursiva
<small>	Texto en letras pequeña
<strong>	Texto fuerte, similar a Negrita
<sub>	Texto en subíndice
<sup>	Texto en superíndice