viernes, 17 de agosto de 2012

¿Qué es HTML?

HTML

En la red encontramos varios sitios en los que se define HTML y basicamente todos se refieren a que HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto) y hace referencia al lenguaje que se utiliza para la creación de páginas web.

El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

Sin más preambulo vamos a comenzar a escribir código HTML para lo cual podemos utilizar alguno de los siguientes editores de código:

  • Bloc de notas
  • NotPad++
  • Dreamweaver
  • FrontPage
Existen muchas más, pero realmente no es lo más importante, en mi caso utilizo Adobe Dreamweaver CS5.1.

Para que nuestra página web funcione bien desde el principio vamos a seguir las siguientes recomendaciones:

  • En Dreamweaver crearemos un nuevo sitio: Opción de menú Sitio | Nuevo sitio | luego escriba el nombre del sitio y la ruta de acceso a la carpeta del sitio (lugar donde se guardaran sus archivos), la siguiente imagen muestra como se configura dicho sitio (en mi caso utilizo un servidor de prueba, por eso la ruta incluye C:\AppServ\www\tutoriales, en su caso utilice unicamente C:\tutoriales).
  •  Escriba los nombres de los archivos y carpetas en minúsculas y sin espacios.
  • Las imagenes que incluya en su página guardelas una carpeta especifica dentro de la carpeta de su sitio (en su caso C:\tutoriales\img)
  • Al igual que las imagenes sus scripts o archivos de estilo css guardelos en una carpeta diferente (por ejemplo C:\tutoriales\css ó C:\tutoriales\scripts)
  • Mantenga orden en su estructura (sea limpio al escribir su código) para que cuando tenga que editarlo no se confunda y no le cueste.
Estructura de una página web con HTML4

La estructura básica con HTML4 es esta:

<html>
<head>
      <meta charset="utf-8" />
      <title>Aquí se escribe el título de la página web</title>
</head>
 <body>
      <h1>Título del documento con la etiqueta de encabezado h1</h1>
      <p>Todo lo que escriba en ésta sección estará dentro del cuerpo de la página (uso la
             etiqueta "p" para escribir un párrafo)</p>
</body>
</html>

 Note que cada una de las etiquetas que se utilizaron en ésta estructura tienen una apertura (<html>) y un cierre (</html>), pero tambien puede ver que algunas como no, por ejemplo las etiquetas <meta> y algunas otras como <img> tendrán un cierre inmediato (<meta charset="utf-8" />).

Las etiquetas <html> y </html> le indican al navegador (iexplorer, mozilla firefox, safari, google crhome, opera, entre otros) que todo lo que se encuentre entre ellas debe ser interpretado como código html.

Las etiquetas <head> y </head> permiten configurar la información de cabecera de la página web, entre las configuraciones que podemos incluir en ellas esta:
  • Título de la página web <title> Título </title>
  • Códificación para tíldes y eñes <meta charset="utf-8" />
  • Diferentes escripts <script> estilos {parametros; } </script>
  • Relacionar archivos <link href="archivo.css" rel="stylesheet" type="text/css">
Las etiquetas <body> y </body> encierran todo el cuerpo de la página web, en otras palabras todo lo que se podrá ver en el navegador.

Las etiquetas con <h1>, <p>, <img>, <table>, <div> entre otras se escribiran entre las etiquetas <body> y tendrán funciones específicas que iremos conociendo poco a poco.

En la proxima entrada estudiaremos la estructura de una página web completa y maquetación de esa página con CSS.


No hay comentarios:

Publicar un comentario