MÉTODOS Y TÉCNICAS WEB: ELEMENTOS BÁSICOS DE HTML.
A
manera introductoria quisiéramos puntualizar sobre algunos aspectos de
esta entrada, relacionados con conceptos
básicos del lenguaje HTML. Algunos los llamarían "tips" por la forma en que vamos a dosificar estos conceptos
a lo largo de nuestro escrito, sin embargo el
propósito es cubrir la información más relevante y que nos ayude a
iniciarnos en el mundo de la tecnología
web.
¿QUÉ ES
HTML?
Tomemos
una definición en la WEB "HTML es el lenguaje que se emplea para el
desarrollo de páginas de Internet. Está
compuesto por una serie de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de
etiquetas para imágenes, hipervínculos que nos permiten dirigimos a otras
páginas, saltos de línea, listas, tablas, etc. (aprenderaprogramar.com).
ETIQUETAS Y SENTENCIAS.
Es
importante aclarar en primera instancia que HTML no es un lenguaje de
programación sino más bien una metodología de etiquetado o un sistema de
etiquetas, siendo este proceso una técnica para lograr que el ordenador haga lo
que pretendemos como una ordenanza no como una proposición algorítmica, algo así
como hacer un programa para la fabricación de un producto; en una secuencia
algorítmica se sigue un proceso secuencial que responde a una lógica de
sentencias en cambio en HTML simplemente hay que poner una etiqueta para cada
acción del proceso, algo así como el kanban japonés.
¿CÓMO INICIAMOS EL PROCESO DE ELABORACIÓN DE UN DOCUMENTO HTML?
Iniciamos
un documento HTML con la etiqueta DOCTYPE (del inglés document type declaration)
esta etiqueta determina o declara el tipo de documento. Es una instrucción para
el navegador web de manera que pueda identificar la versión de HTML utilizada
en el documento.
La
expresión de esta declaración sería <!DOCTYPE html> Para HTML5 esta
declaración no es susceptible a mayúsculas y simplemente se muestra tal cual
es, no necesita de más etiquetas para que el navegador las interprete.
ESTRUCTURA BÁSICA DEL DOCUMENTO HTML Y HTML5.
La
estructura básica de HTML se define por los siguientes elementos: head para la
cabecera del documento, body que corresponde al contenido del documento o
el cuerpo del mismo y de esta manera finaliza el proceso de etiquetado.
Esto está representado en el editor web de la siguiente manera:
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>
Para HTML5 la estructura básica la podemos ver en la siguiente figura:
PÁRRAFOS Y SALTOS DE LINEA EN HTML.
Una vez que hemos podido apreciar
la estructura del documento podemos ubicarnos en la sección en donde queremos
trabajar; luego de que ya hallamos iniciado por la declaración del documento y
hallamos seleccionado el título del mismo, esto es en la sección <head> o
cabecera, nos colocamos ahora en el cuerpo o contenido, en esta ocasión utilizaremos
la sección denominada simplemente <body>
Existen dos formas básicas para
separar los bloques de texto en el body: los saltos de línea y los párrafos.
Para etiquetar la redacción de un
párrafo usamos la etiqueta <p> con
su etiqueta de cierre </p> el párrafo
y su redacción deben seguir las reglas ortográficas que corresponden a los
idiomas de cada país, estas reglas imponen un acomodo en cuanto a espacio,
además de la estética ordenada que debe llevar el documento para hacerlo comprensible,
para insertar saltos de línea en HTML se usa la etiqueta <br> con su
etiqueta de cierre </br> utilizada a discreción.
De esta manera podemos observar
como el documento en este caso el párrafo guarda cierto orden estético y
ortográfico como veremos en el siguiente ejemplo, si escribimos:
"Hoy he tenido suerte, he despertado,
estoy vivo" no es igual que
escribir, en cuanto al orden
"Hoy he tenido suerte,
he despertado,
estoy vivo "
Para lograr este ordenamiento
utilizamos los saltos de línea, de tal forma que las etiquetas en el documento
tendrán la siguiente disposición:
<p>"Hoy he tenido
suerte, he despertado, estoy vivo"</p>
<p>“Hoy he tenido suerte,<br>
he despertado, <br>
estoy vivo " </br>>/p>
La vista en el navegador sería:
ALINEACIÓN, COLOR DEL TEXTO Y OTROS ATRIBUTOS
Los párrafos en HTML se alinean de
acuerdo a la etiqueta <p align=left> para alinear el párrafo a la izquierda, esto si es necesaria la especificación ya que se alinea por defecto
o en forma predeterminada.
<p align=center> para colocar
el párrafo al centro y <p align=right> para alinear el párrafo a la derecha,
por otra parte podemos definir el color del texto a través del atributo color
con la etiqueta <font color>; utilizando el ejemplo anterior podemos
codificar el párrafo de la siguiente manera:
<h1><p align=center><font color=”green”>”He
tenido suerte, he despertado, estoy vivo” </p> que se verá así en el
navegador:
Podemos también darle otros
atributos al texto como mostrarlo en cursiva o subrayado a través de la
etiqueta <em> con su respectiva etiqueta de cierre</em> y la
etiqueta <u> y su cierre </u> respectivamente para lo cual
observando el mismo ejemplo, alineación predeterminada, tendríamos la
codificación:
<p><font
color="red"><em><u>"Hoy he tenido suerte, he
despertado, estoy vivo"</u></em></p>
Visto en el navegador seria:
INSERCIÓN DE IMÁGENES, AUDIO Y VÍDEO
En muchos editores HTML estas acciones ya están programadas de manera que con hacer un clic sólo tenemos que pegar el url de la imagen. el audio o el vídeo que nos interesa insertar en el documento, sin embargo cuando queremos ejercer esta acción a partir del bloc de notas es necesario que codifiquemos el proceso con las correspondientes etiquetas al igual que se deben agregar los atributos de lo que se vaya a insertar.
Para insertar una imagen en un documento HTML se utiliza la etiqueta:
En el siguiente ejemplo se quiere insertar la siguiente imagen:
Se utiliza para ello la siguiente codificación:
<img src="C:/Users/PROF YOUNG/Desktop/Archivos compartidos/CANAL.jpg" width="275" height="184" border="0" alt="">
El resultado en el navegador se visualiza:
Es importante anotar que si se quieren insertar imágenes de la web se debe copiar el URL de la imagen haciendo clic derecho en la misma para obtener su enlace o su ubicación.
Para imágenes ya descargadas en el equipo se da clic derecho en la imagen, se escoge la opción propiedades y allí aparece la ubicación de la imagen en el equipo. Estas imágenes deben ser colocadas en una carpeta que se cargará al hosting y una vez la página esté alojada se podrán visualizar en el navegador. Los detalles del alojamiento de la página y demás serán tema de otra entrada.
El procedimiento para la inserción del vídeo es el mismo que para las imágenes sólo que obviamente cambia la etiqueta.
Para insertar videos en la web es posible utilizar etiquetas como
- <video src=”video.ogg”>
- <iframe width="854" height="480" src="url del video" frameborder="0" allowfullscreen>
- <embed src="url del video" width="300" heigth= "200" autoplay controls>
estas etiquetas funcionan para algunos navegadores para otros no, es decir habrá navegadores que identifiquen una etiqueta y otras no.
Veamos este ejemplo del código de inserción de youtube, que utiliza iframe.
<iframe width="554" height="280" src="https://www.youtube.com/embed/8V4h51Brc-w" frameborder="0" allowfullscreen></iframe>
La etiqueta de audio funciona en forma muy parecida a la de vídeo se pueden utilizar etiquetas de acuerdo al navegador por ejemplo la etiqueta embed en firefox no funciona igual que en explorer, en esta última hay que desbloquear elementos bloqueados que pertenecen al frame del archivo junto con los indicados en el código como controls las dimensiones del frame pueden ser modificadas en el mismo mediante los atributos width y height o dejar que se descarguen en forma predeterminada, dejando estos atributos en cero. También podemos agregar atributos como autoplay para que una vez se descargue la página inicie el sonido. Funcionan las etiquetas:
- <audio src="archivo.mp3">
- <embed src="archivo.mp3" width="200" height="200" controls autoplay>
Con este ejemplo ilustramos el uso de la etiqueta embed en explorer este audio inicia en cuanto descarga la página una vez desbloqueados los elementos del frame.
<embed src="C:\Users\PROF YOUNG\Desktop\Archivos compartidos/reggaeton.mp3" width="200" height="200" controls autoplay>
El resultado en el navegador se verá de la siguiente forma:
