miércoles, 9 de septiembre de 2015

html clase 02 – armando el documento

  Conociendo como se abren y se cierran las etiquetas hoy continuaremos en esta clase 2 adquiriendo nuevas.

  Recordemos, para indicar que se trata de un documento html lo haremos con estas 2 etiquetas:
apertura: <html>
cierre: </html>

  entonces todo lo que esté en el medio será el texto del documento.
  Para indicarle el cuerpo del documento (todo su contenido) lo hacemos con la etiqueta body.
Apertura: <body>
cierre: </body>

  Y vimos el siguiente documento:

<html>
<body>
esta es mi web.
</body>
</html>

  Hasta aquí el resumen de la clase 1. pero... ¿Alguien se preguntó como es que llega esta información al cliente o usuario de nuestra web?. Si utilizamos un hosting (alojamiento web) o dropbox
como expliqué en este post.
A donde está alojado los archivos de nuestra web se lo conoce como servidor, entonces imaginemos:

1. El usuario pide una web
2. El servidor se fija si el la tiene, y le pasa el archivo principal.
3. El usuario recibe el código del archivo y el navegador de internet (firefox, chrome, etc) el que usemos lo recibe.
4. Lo procesa al código y podemos ver la web.

  Entendiendo esto podemos decir ahora: el archivo html cuenta de 2 partes.
1. La cabecera: son los datos que revisa antes de cargar el documento.
2. El cuerpo: es el código que procesa para mostrar el contenido.

  ya sabemos como indicar el cuerpo, así que veamos como son las etiquetas de la cabecera:
apertura: <head>
cierre: </head>

  En ella podemos indicar muchas cosas, por lo pronto solo indicaremos el título de la página. Y para ello utilizaremos la etiqueta título, que en inglés se escribe title.
apertura: <title>
cierre: </title>

  Entonces con estas nuevas cosas ampliemos nuestro código:

<html>
<head>
<title> mi web </title>
</head>
<body>
el texto.
</body>
</html>

  Aquí indicamos en la cabecera el título de la web, que sería lo primero que se carga antes del contenido. y luego el contenido del documento. Que podemos darle un poco mas de forma.

  Para indicar el título utilizaremos la etiqueta <h1>, ya sabemos como abrirla y cerarla, así que veremos un ejemplo:

<h1> el titulo del texto </h1>

  Y para indicar que lo que sigue es un párrafo de texto hay que hacerlo con la etiqueta <p> de la siguiente forma.

<p>Todo esto conforma mi gran texto, bla bla bla.</p>

  Entonces vamos a meterlo en el código anterior:
quedaría así, copien y peguen en el editor preferido (block de notas u otro) y lo guardan como web.html.

<html>
<head>
<title> mi web </title>
</head>
<body>
<h1> el titulo del texto </h1>
<p>Todo esto conforma mi gran texto, bla bla bla.</p>
</body>
</html>

  lo pueden ver en este link:
https://dl.dropboxusercontent.com/u/100311958/web/ejercicio2.html

  y para finalizar vamos a la ejercitación:
1. realizar un documento html que contenga 2 párrafos ambos con su título correspondiente.

  Hasta la próxima clase y recuerden que quien desee colaborar económicamente con el blog o quiera acceder a una tutoría conmigo pueden contactarme.

2 comentarios:

Quico Saval dijo...

Hola:

Escribo aquí para hacer mi pequeña aportación, debido a que ya he realizado algún tutorial de html, como, por ejemplo, el que viene en este link:

http://www.htmlya.com.ar

Si nos fijamos bien en las explicaciones que proporciona, nos daremos cuenta de que no hace falta cerrar la etiqueta de párrafo. De hecho, podéis editar el código que ha puesto Miguel quitando la etiqueta de cierre de párrafo y tratando de agregar un nuevo párrafo y veréis cómo vuestro navegador lo interpreta correctamente.

Así las cosas, ¿por qué tanto tú en tu tutorial como algún conversor que he probado cerráis esta etiqueta si en realidad no hace falta?

Un saludo.

Miguel Barraza dijo...

buenas, en la web que publicas también lo explica de la misma forma, la correcta es abriendo y cerrando la etiqueta. ya que al cerrar la el navegador hace una línea divisoria de párrafo. si no la cierras tienes un subpárrafo dentro de otro. hay miles de web que enseñan HTML y otros cientos que explican como programar, pero no todas las formas son las correctas. la adecuada es quienes se ajustan a los estándar. en el caso de HTML lo adecuado es seguir las normas prefijadas por la w3c: www.w3c.org porque si no la respetas en tu navegador se podría llegar a ver bien, pero si lo miras de otro navegador, o de otro sistema operativo, es probable que ya no siga viéndose de la misma forma. encambio si sigues las normas tu web se verá de la misma forma en cualquier navegador y sistema operativo.