El Lenguaje HTML
HTML corresponde a las siglas HyperText Markup Language es decir, “Lenguaje de Marcas de Hipertexto” Es un lenguaje de marcado que se utiliza para el desarrollo y creación de páginas de Internet. No es un lenguaje de programación, sino un lenguaje descriptivo, con una serie de etiquetas insertadas en el texto de una página WWW, que determina el formato de los párrafos, el tipo de fuente, los enlaces a archivos externos y otras páginas, etc.
¿Cómo funciona el HTML?
El lenguaje html opera en base a marcadores escritos (que aparecen entre comillas angulares:
<html>), a partir de las cuales se cifra la apariencia y orden interno de una página web, así como los scripts o rutinas que operan dentro de ellas.
Las páginas Web son herramientas de divulgación de información con múltiples fines: desde brindar conocimientos, hasta generar oportunidades de negocio.
Características principales
El lenguaje HTML nos ofrece una gran adaptabilidad, una estructuración lógica y es fácil de interpretar tanto por humanos como por máquinas, ya que siguen un esquema de árbol donde existe un elemento raíz y donde el resto de etiquetas se insertan de manera lógica y estructurada. Además, se trata de un fichero de texto, y solo se necesita un editor como el Bloc de notas para generar un documento HTML.
Todo lenguaje de marcado tiene una gramática que nos indica qué etiquetas se pueden utilizar, qué significan, cómo se relacionan entre ellas, etc. Es muy similar a las gramáticas de las lenguas humanas. Por ejemplo, la gramática española nos indica que un párrafo debe comenzar con mayúscula y finalizar con un punto y aparte. En HTML la gramática marca que un párrafo debe comenzar con la etiqueta <p> y finalizar con el cierre de la misma etiqueta (</p>). Las marcas de inicio y fin de párrafo son diferentes en castellano y en HTML, pero el significado es el mismo.
Otro aspecto que debemos cumplir si utilizamos HTML es la división de la información en dos bloques: la cabecera (head) y el cuerpo (body). La división de esta
información es fácil de entender si lo comparamos con un libro, donde la información técnica (título, editorial, etc.) se encuentra en las primeras páginas.
En el caso del HTML reproducimos este mismo esquema, incluyendo el contenido en el cuerpo y los datos técnicos en la cabecera. En este sentido hay que destacar la etiqueta DOCTYPE, que nos indica qué tipo de gramática estamos utilizando: sería el equivalente a indicarle al navegador si hablamos en castellano o inglés.
Por ejemplo, en la cabecera se puede encontrar:
– Información contextual de la página. Estos metadatos nos permiten indicar información que puede no quedar clara en el contenido. Por ejemplo, indicar el idioma permite a un navegador de voz (para no videntes) cambiar la pronunciación para leer correctamente el contenido.
– Referencia a otros ficheros. Todos aquellos recursos que necesite nuestra página deben estar referenciados desde la cabecera. Por ejemplo, archivos de CSS y JavaScript, el icono de la barra de direcciones, etc.
– Scripts y estilos. Si estos no se definen en un fichero independiente, se incluyen en la sección de cabecera para que estén disponibles en todo el documento y no tener que repetirlos.
Por otro lado, en el cuerpo se encuentra todo el contenido de la página, desde el texto a las imágenes, pasando por vídeos, enlaces, etc. Este contenido debe estar
estructurado en diferentes secciones y marcado correctamente.
Por ejemplo, como decíamos antes, un párrafo se marca con una etiqueta <p>. Otro ejemplo podría ser la relación semántica que existe en un conjunto de puntos que forman una lista. En este caso se marcarían con las etiquetas <ul> o <ol> (lista desordenada o lista ordenada) dependiendo de cómo queramos establecer esta relación.
Etiquetas de HTML
Definición: Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML.
En HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma:
<etiqueta> </etiqueta>. Donde <etiqueta> es la etiqueta de apertura y </etiqueta> es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos.
Aunque la mayoría de las etiquetas tienen su etiqueta de apertura y etiqueta de cierre, es importante aclarar que no todas las etiquetas tienen su correspondiente etiqueta de cierre.
Algunos ejemplos de etiquetas son:
La etiqueta de cierre se utiliza para limitar el campo de acción, por ejemplo, a etiqueta <p> nos indica el inicio de un párrafo de texto y una vez que se escribe la etiqueta de apertura el navegador tomará como párrafo todo el texto que se encuentre después de dicha etiqueta hasta toparse con la etiqueta de cierre </p> y así con las demás etiquetas según la función de cada una, la mayoría de las etiquetas de HTML son etiquetas de este tipo.
Este segundo grupo de etiquetas no requieren de una etiqueta de cierre debido a que su campo de acción está limitado al lugar en donde se incluye la etiqueta. Por ejemplo, la segunda etiqueta <img> sirve para insertar una imagen en la página, la misma no necesita etiqueta de cierre, ya que la etiqueta se debe ubicar en el lugar en donde
queramos insertar la imagen, pero… hace falta algo más para completar la etiqueta ya que un simple "img" no nos dice nada acerca de la imagen, para ello existen los atributos.
Atributos de etiquetas
Las etiquetas tienen atributos que nos sirven para especificar ciertos detalles de esa etiqueta, por ejemplo, especificar un color de texto o de fondo, el ancho y alto de algún elemento, su alineación, la ubicación de un documento o imagen, etc.
En el ejemplo anterior vimos que <img> sirve para insertar una imagen, pero para que la etiqueta funcione necesita de sus atributos, por medio de estos le daremos uso a la etiqueta.
Los atributos que se escriben dentro de la etiqueta <img> son necesarios para indicar la dirección y el nombre de la imagen que queremos que se muestre, esto de la siguiente manera:
<img src=”/carpeta/mi_imagen.jpg”>
src (fuente) contiene como valor un url
carpeta (lugar o directorio donde se encuentra guardada la imagen) mi_imagen (nombre de la imagen a insertar)
.jpg (extensión)
Con lo anterior nuestra etiqueta <img> ya podrá mostrar la imagen deseada.
Hay atributos específicos para cada etiqueta, en este ejemplo<img> será algo forzoso agregar el atributo, pero para otras podrá ser algo opcional, sin embargo, las etiquetas y sus atributos son la base del lenguaje HTML, y por medio de estas es como se construye una página web.
¿Cómo diseñar y ejecutar una página web?
Para escribir código HTML y crear páginas web, es fundamental: saber HTML y contar con un editor de texto como el “Bloc de notas” o Notepad++.
Para crear páginas web obviamente necesitas un ordenador y un navegador (Explorer, Firefox, Chrome o similar) instalado. ¿Necesitamos conexión a internet para crear páginas web? La respuesta es que NO: podemos crear nuestras páginas en nuestro propio
ordenador y posteriormente subirlas a un servidor remoto para que estén accesibles en internet desde cualquier parte del mundo.
ACTIVIDADES 1:
¿Nos ponemos manos a la obra?
Primeramente, en tu ordenador, crear una carpeta tipo directorio donde irás guardando los archivos.html y todo el contenido (imagen, sonido, video, etc.) que utilices en el diseño de tu página web.
Abrir el Bloc de notas y en un documento nuevo escribe el siguiente texto:
Una vez tipeado todo, selecciona Archivo > Guardar como. Se mostrará este cuadro de diálogo. En la lista desplegable Guardar en: elige la carpeta donde desees guardar este documento. Introduce el nombre del archivo, no te olvides de colocar la extensión .html y en tipo, todos los archivos.
Pulsa en el botón Guardar y cierra el Bloc de notas.
Ahora vas a situarte en la carpeta donde has guardado tu archivo HTML. En ella visualizarás un archivo con el icono de un documento HTML con el nombre que has elegido. El ícono depende del navegador con el que cuente tu ordenador.
YA ESTAS DISEÑANDO TU PÁGINA WEB.
Estructura básica de una Página Web
Como ya mencioné en la clase anterior, una estructura HTML se empieza con la etiqueta
<html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de
<html></html> se encuentran 2 partes diferenciadas: la cabecera y el cuerpo (<head></head> y <body></body>).
La cabecera es la parte «no visible» de la página web. Esto significa que todo lo que se indique ahí no aparecerá en la página como tal, pero sin embargo es una parte
importantísima: ahí se incluyen las etiquetas meta que se usan para describir la página en busca de optimizar los motores de búsqueda (se trata de mejorar la posición en la que los buscadores presentan nuestra página web cuando un usuario realiza una consulta), el título de la página, el idioma, información relacionada con hojas de estilo, etc.
Dentro de la cabecera, la primer etiqueta que se suele utilizar es <title></title>, elemento que especifica un título para la página HTML (se muestra en la barra de título del
navegador o en la pestaña de la página).
En el body se introducen todas las etiquetas que nos permiten dar formato al documento.
Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b> Esto es negrita. </b> y <B> Esto es negrita. </B>
produce el mismo resultado. Por otro lado, toda etiqueta que se abre debe cerrarse sino,
el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
Meta tags básicos
Los meta tags se insertan en la cabecera de la página, entre las etiquetas <head></head>.
La función de estos tags varía. Pueden ser informativos, para los buscadores y usuarios, indicándoles el tipo de contenido de la web, sus palabras claves, etc. o pueden predefinir una actuación a la página.
El esquema de un meta tag es el siguiente: <meta name=” ” content=” “/>. El “name”
muestra el nombre de la etiqueta y el “content” el contenido de esa etiqueta. Los meta tags pueden cerrarse de dos formas: > o />. La segunda es más correcta, aunque los navegadores no muestran diferencia con una u otra.
Estas etiquetas juegan un papel importante en el posicionamiento web. Algunas de las más destacadas son:
Especificando la codificación de caracteres de su documento:
Este elemento simplemente especifica la codificación de caracteres del documento: el conjunto de caracteres que el documento puede usar. utf-8 es un juego de caracteres universal que incluye prácticamente cualquier caracter de cualquier idioma humano. Esto significa que tu página web podrá manejar la visualización de cualquier idioma.
<meta charset="utf-8">
Meta tag “Description”:
Este meta es también destinado para los buscadores. En la “description” escribiremos la descripción de la página, de sus contenidos. Esto lo haremos a través de frases cortas y separadas entre ellas por puntos. En nuestra página este meta quedaría de la siguiente manera:
<meta name=” Description” content=” Tutorial html. Meta tags” />
Meta tag “language”:
Este meta tag le indica al buscador el idioma en el que está escrita la página. En el caso de español en content se pone “es”, en inglés “en”, en francés “fr” … Nuestra página estará escrita en español así que su meta será el siguiente:
<meta http-equiv=” Content-Language” content=”es” />
Meta tag “Distribution”:
Este meta es importante. Marca la distribución que queremos que se haga de nuestra web en Internet. Si queremos que se distribuya por todo el mundo en “content” indicaremos
“global”. Escribir este meta en global es lo más recomendable. Así pues, nuestra página incluirá…
<meta name=” distribution” content=” global”/>
Meta tag “Author”:
Se utiliza para describir el autor de la página.
<meta name ="author" content =" Yo "/>
Meta tag “Date”:
Hace referencia a la fecha de creación del contenido web.
<meta name ="date" content ="April 30, 2021"/>
EJEMPLO:
Para una mayor comprensión de la estructura de una Página Web, los invito a que desde sus computadoras abran el navegador de Google, presionen el Botón derecho del mouse y seleccionen la opción “Ver código fuente de la página”. Allí podrán apreciar la estructura de Google en lenguaje HTML y reconocer algunas de las etiquetas anteriormente
mencionadas.
ACTIVIDADES:
Basándose en los contenidos teóricos desarrollados en ésta actividad y la actividad 1 , resolver el siguiente cuestionario.
1. ¿Qué significa el acrónimo HTML?
a) Hyper Text Mask Language b) Hard Text Markup Language c) Hyper Text Markup Language d) Hard Text Mask Language
2. ¿Qué etiqueta es correcta para indicar un salto de línea?
a) </br>
b) <br/>
c) <breakLine>
d) <hr>
3. ¿Cuál es la forma correcta de escribir un comentario en HTML?
a) /* */
b) <!–…–>
c) ctrl + Ç d) <¡–…–>
4. ¿Cuál es la forma correcta de escribir un enlace en HTML?
a) <a title=» «>…</>
b) <a href=» «>…</a>
c) <a src=» «>…</a>
d) <link href=» «>…<link>
5. ¿Qué etiqueta se usa para escribir una lista no ordenada?
a) <ol>
b) <ul>
c) <li>
d) <list>
6. Las siguientes instrucciones vienen acompañadas de un atributo.
a) <img src=»foto.jpg» alt=»texto»>
b) <img src=»foto.jpg» value=»texto»>
c) <img src=»foto.jpg» text=»texto»>
d) <img src=»foto.jpg» desc=»texto»>
7. ¿De las etiquetas a continuación cuál tiene un impacto directo sobre la página de resultados de búsqueda que ofrece Google sobre un determinado sitio web?
a) <h1>
b) <a href=»#» rel=»nofollow»>anchor</a>
c) <title>
d) <strong>
8. En relación a HTML elige la opción verdadera
a) Todas las etiquetas se deben escribir en minúscula a excepción de las etiquetas <html>,
<head>, <title> y <body>.
b) Todas las etiquetas tienen instrucción de apertura e instrucción de cierre obligatoriamente.
c) Ninguna es cierta.
