Una web o página web es en realidad un sitio web (website) formado por varias páginas web enlazadas entre sí. Los documentos que componen el sitio web son archivos y carpetas que contienen texto, imágenes, botones, animaciones, tablas, gráficos, videos, etc.. Para acceder a las páginas web usamos un navegador (Google Chrome, Internet Explorer, Mozilla Firefox, etc.), que se encarga de comunicar nuestro ordenador con el servidor que alberga la página web.
2. Lenguajes y protocolos
Lenguaje HTML
HTML (HyperText Markup Language o Lenguaje de Marcado de Hipertexto) es el lenguaje que se utiliza para crear los documentos que componen el sitio web... Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web. Nos permite enlazar y navegar por Internet.
El lenguaje HTML contiene dos partes:
- el contenido, que es el texto que se verá en la pantalla de un ordenador,
- y las etiquetas y atributos que estructuran el texto de la página web en encabezados, párrafos, listas, enlaces, etc. y normalmente no se muestra en pantalla.
Los archivos HTML deben tener una extensión htm o html (ej. miweb.htm o miweb.html). Una página web se puede crear directamente escribiendo en HTML (en el editor de texto y guardándolo con la extensión .htmlo .html) o mediante programas editores de páginas web (Adobe Dreamweaver, MicrosoftExpression Web, Kompozer, etc.)
HTML
- El código queda más limpio
- Es más fácil reutilizar código
- Se necesita aprender el lenguaje HTML
- El aprendizaje es más difícil
- Crear una página lleva más tiempo
Programa editor de páginas web
- El código no es tan limpio
- El aprendizaje es sencillo
- Crear una página es más rápido
Primer documento HTML
En este apartado del tutorial se explica cuál es la estructura básica de un documento HTML a través de un ejemplo sencillo ("dos-parrafos.html") donde se visualizan dos párrafos. Por ejemplo, en Google Chrome, el resultado que se espera ver en pantalla será algo parecido a:
Elemento "html"
Un documento HTML contiene marcas (etiquetas), las cuales se escriben empleando los caracteres menor que "<", mayor que ">" y barra inclinada "/".
Por ejemplo, las etiquetas de inicio (<html>) y fin (</html>) representan al elemento raíz ("html") que en todo documento HTML hay que escribir.
Elemento "head"
Dentro del elemento "html", es decir, entre <html> y </html>, se debe escribir el elemento "head" que, como iremos viendo a lo largo del tutorial, puede contener diversa información sobre el documento:
Elemento "title"
Entre <head> y </head> se pueden escribir otros elementos. Por ejemplo, el elemento "title", el cual sirve para indicar el título del documento.
Véase en el ejemplo "dos-parrafos.html" que, el texto escrito entre <title> y </title>, es decir "Ejemplo de 2 párrafos", se visualiza en la parte superior de la pestaña donde se muestra la página web en el navegador.
Elemento "body"
En un documento HTML, después del "head", hay que escribir el elemento "body":
El elemento "body" alberga todo el contenido (párrafos, imágenes, vídeos...) del documento, los cuales se mostrarán en el navegador.
Elemento "p"
En este caso, entre <body> y </body> se incluyen dos elementos "p" delimitados por la etiqueta de inicio <p> y la de cierre </p>:
Estructura básica de un documento HTML
Finalmente, completaremos el código de este primer ejemplo añadiendo:
- <!DOCTYPE html> en la primera línea. Esta es la forma de indicar al navegador donde se visualice el documento que este está escrito en la versión HTML5.
- lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el idioma del contenido del elemento "html". En este caso español (España). Otros posibles valores del atributo lang son: "es-AR"para español (Argentina), "es-CO" para español (Colombia), "es-MX" para español (México), etc.
- <meta charset="utf-8"> dentro del elemento "head". Así, se indica la codificación de caracteres del documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación Unicode de 8 bits). Obsérvese que, el elemento "meta" está vacío (no tiene contenido) y, en consecuencia, no necesita ser cerrado escribiendo </meta>.
De esta forma, hemos escrito la estructura básica de un documento HTML que muestra por pantalla dos párrafos. Gráficamente, los elementos utilizados se pueden representar del siguiente modo:
Nota: los documentos HTML están formados por elementos cuya gran mayoría deben escribirse delimitados por una etiqueta de inicio <etiqueta> y otra de fin </etiqueta>, tales como: "html", "head", "body", "title" o "p". No obstante, existen otros elementos que no necesitan ser cerrados con la etiqueta de fin, como por ejemplo: "meta".
Cómo crear un documento HTML
Por ejemplo, con el Bloc de notas de Microsoft Windows, podemos crear el siguiente archivo "dos-parrafos.html" (la extensión del archivo puede ser ".html" o ".htm"):
A la hora de guardar el archivo, pinchando en "Archivo" > "Guardar como...", es importante hacerlo codificado en UTF-8, como se muestra en la siguiente imagen:
El resultado sería el esperado. Ahora bien, si se guardase codificado en ANSI en vez de UTF-8, en pantalla se visualizaría algo parecido a:
| Ejercicio |
|---|
Cómo ver el código fuente de un documento HTML en un navegador web
En un navegador es posible ver el código fuente de un documento HTML. Por ejemplo, en Google Chrome se puede ver pulsando el botón derecho del ratón sobre la pantalla y seleccionando "Ver código fuente de la página":
En este caso se verá:
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.