Primer documento HTML

Hola a todos, hoy os explicaré como hacer nuestro primer documento HTML, veremos como se crean y como se estructuran.

Primero, elegiremos que aplicación usaremos, desde lo más básico hasta los más complejos. Podemos usar el bloc de notas de Windows o un editor WYSIWG (como dreamweaver de adobe). Nosotros lo haremos en un bloc de notas para hacerlo nosotros mismos la estructura básica, ya que lo normal de los editores WYSIWG es que nos la creen automáticamente.

Un documento HTML esta formado de etiquetas, en general se indican por una etiqueta de apertura y otra de cierre.

El formato de la etiqueta de apertura es <nombre etiqueta>.

El formato de la etiqueta de cierre es </nombre etiqueta>.

Los documentos HTML, se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye información sobre la página y el cuerpo incluye todos los contenidos (párrafos, imágenes,etc.).

Vamos a empezar a hacer nuestro documento HTML con un bloc de notas. Haremos lo siguiente:

  • Abrimos un bloc de notas.
  • Escribimos la etiqueta mas importante <html> que es necesario en todo documento HTML, al final del documento la cerramos, nosotros la escribiremos y todas las demás etiquetas estarán dentro de esta.
  • Dentro de esta escribiremos la etiqueta de cabecera que es <head> dentro de esta etiqueta meteremos otras etiquetas relacionada con la pagina como el idioma, el titulo, etc. recordar que debemos cerrar esta etiqueta cuando no añadamos más.
  • Después, escribiremos la etiqueta del cuerpo que es <body> aquí escribiremos la mayoría de las etiquetas con la que dar forma a nuestro HTML como párrafos, imágenes, listas, etc.  recordar que debemos cerrar esta etiqueta cuando no añadamos más.

Así es como se queda de momento:

html estructura

Vamos a añadir una linea dentro de body, para ver que algún contenido ya que en si no veríamos nada. Añadiremos <p>”lo que queramos”</p>.  Así nos quedará:

html ejemplo

Si os fijáis, separo las etiquetas con una tabulacion, esto es para ver mejor que hay dentro de cada etiqueta, recomiendo a que nos acostumbremos a esta sencilla técnica.

Cuando tengamos el documento, lo guardamos, le ponemos un nombre simple y le escribimos una extensión .html, por ejemplo, documento.html.

Veremos que cambia el icono, lo abrimos con el navegador que queramos y esto es lo que nos aparecerá:

prueba html

Si queremos modificar el documento HTML, simplemente debemos modificar este socumento con el bloc de notas y guardarlo.

Espero que os sea de ayuda.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *