Todo lo que necesitas saber para hacer tu primer página de HTML (segunda parte)

texto escrito en la etiqueta body

Seguramente, para estos momentos debes tener una muy importante.

¿Qué herramienta necesito para hacer HTML?

Como ya has visto, se trata de un lenguaje. Sin embargo, a diferencia de muchos otros como Java, Actionscript o Swift, donde se requiere que el lenguaje sea compilado para crear un programa, la página web es leída por el browser, por lo que no necesita ser convertido a otra cosa. Esto también nos da como beneficio que podemos ocupar para trabajar casi cualquier software que escriba texto, como el bloc de notas de Windows. Ahora, de que se pueda a que sea una buena idea es diferente. Realizar html con bloc de notas dificultaría mucho el trabajo, ya que escribe todo el código del mismo color y no nos ayuda a autocompletar la información. Vaya, en algunos casos hasta complica guardar al archivo como .html

Algunos programas que recomiendo para hacer páginas web son:

  • Sublime Text
  • Brackets
  • TextMate
  • Dreamweaver

En mi caso llegarás a notar por las impresiones de pantalla y los videos, que lo que voy a usar Dreamweaver. Esto simplemente porque llevo más de 10 años utilizándolo. Y aunque es más conocido por su parte gráfica, con la cual se puede hacer el documento html a partir de arrastrar objetos, su editor de código es bastante bueno. El problema principal para muchos con respecto a esta herramienta puede ser el precio, que sin importar cuánto cueste, va a ser más caro comparado con las herramientas gratuitas. Sin importar cual elijas, lo importante es que te sientas bien ocupándola. En estos ejercicios no nos ocuparemos de mostrar cómo guardar o crear un documento. Nos enfocaremos a hacer código.




Un juego de muñecas rusas, o lo que es lo mismo: todo lo que se abre se tiene que cerrar.

Seguramente para muchos, el html puede ser nuestro el lenguaje de programación, así que vale la pena hacer la siguiente comparación con objetos de la vida cotidiana. Un archivo de html es como las muñecas matrioska, las cuales son características porque dentro de una muñeca está otra, y dentro de esta una más.

Así será lo mismo al programar. Siempre habrá un elemento general que a su vez guardará a otro y este a otro. Lo importante de aquí es recordar que se van a contar con dos elementos: el de apertura y el de cierre. Si de pronto en este juego nos falta la parte de arriba o la de abajo, empiezan los problemas.

Mencionaba que hacer un documento html es para representar un documento en el navegador. Bueno, pues lo primero que tiene que indicarle es que se trata de un archivo de HTML. Para hacer esto, en nuestro documento tenemos que escribir:

<html>

El markup language se va a caracterizar por envolver una palabra entre los signos “<” y “>”. Con esto ya le indicamos al navegador que lo que viene abajo (o más bien, dentro) es html. Ahora, esta es la parte de arriba de la muñeca. Falta la de abajo, la cual es el mismo nombre de la etiqueta que hicimos, pero con el signo “/” inmediatamente después de “<“. Ahora nuestro código es:

<html>
</html>

Pueden escribirse en el mismo renglón, pero como la idea es ir escribiendo más etiquetas dentro, es recomendable escribirlas en diferentes renglones.

Cabeza y cuerpo

Lo malo del ejemplo de las muñecas es que no va a ser “idéntico”. La primera gran diferencia es que las matrioskas van guardando o “anidando” a otra nada más. Cuando nosotros estemos programando, un elemento puede tener como elementos hijos a más de una etiqueta.

En el caso del html, después de nuestra primera etiqueta, debemos señalar dos secciones principales: <head> y <body>.

<html>
<head>
</head>
<body>
</body>
</html>

La razón de estas dos etiquetas es la siguiente. Aunque en nuestro navegador vemos el resultado del documento del html, no todo lo que está en el documento de html es visible. Mientras que habrá elementos que obviamente queramos mostrar, como el texto o las imágenes, hay otros elementos que también deben especificarse dentro del documento pero que no deben verse. Algunos casos serían el definir el tipo de caracteres del documento, vínculos a archivos externos, datos para indicar a los buscadores cómo catalogar a nuestro documento.

Siguiendo esta diferenciación, los elementos que no deben verse en el documento van en <head>, mientras que los elementos visibles en la página van en <body>

Un ejemplo de algo que no se ve en la ventana del navegador pero es muy importante para el documento es el título. Para ello se utiliza la etiqueta <title>. Dentro de esta ya no va otra etiqueta, sino texto.

<head>
<title>Mi primer documento de HTML</title>
</head>

Viendo nuestro documento en el navegador, vamos a notar que la página sigue en blanco. Sin embargo, en el nombre de la pestaña aparecerá nuestro título.

resultado de la etiqueta title

El uso de <title> es muy necesario por diversas razones:

Si tenemos varias pestañas abiertas y no tienen título, sería muy fácil confundirnos entre ellas. En el caso de algunos editores de html que nos crean parte del código (como Dreamweaver), ponen la etiqueta pero le colocan una frase genérica, como “sin título”, con lo cual nos quedaríamos en el mismo estado de confusión si no las cambiamos.

Si un usuario decide guardar como favorita esa página, lo que venga escrito en <title> es lo que quedaría registrado, si es que no decide cambiarlo.

Quizá lo más importante es que la información de title es una de las partes más importantes para cuando los buscadores como Google catalogan nuestra información. Por ejemplo, si mi sitio es sobre galletas y en <title> Solamente dice “Bienvenido a mi sitio”, los buscadores no van a pensar que ese documento en particular sea relevante para cuando la gente busque sobre galletas. Sería más adecuado que dijera por lo menos: “Bienvenido a mi sitio, donde vendemos las mejores galletas”.

Como recomendación, ya que más adelante estaremos ocupados en otras cosas del documento y se nos puede olvidar, recomiendo que lo primero que se escriba sea la etiqueta <title>

Ahora, para que finalmente se vea algo en el documento, dentro de <body> podemos escribir algo.

<body>
¡Bienvenido a mi sitio web!
</body>

Esto en el navegador, sí se mostraría dentro del documento.

texto escrito en la etiqueta body

¡Felicidades! Has escrito tu primer documento de html. Como te darás cuenta, no es nada complicado. En la mayoría de los casos, la propia etiqueta nos va a indicar para qué sirve. Por el momento recuerda que todo lo que se abre también se debe cerrar, y te evitarás de muchos problemas.




Código finalizado.

<html>
<head>
<title>Mi primer documento de HTML</title>
</head>
<body>
¡Bienvenido a mi sitio web!
</body>
</html>

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*