sábado, 23 de julio de 2016

TECNOLOGÍA WEB: HTML, HTML5 Y CSS



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.
  • Insertar una imagen.
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.




  • Insertar un vídeo
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>

El resultado en el navegador se verá:

















  • Inserción de audio.
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: