Introducción a la web y lenguaje HTML
1.1 Datos de Historia de la web
- El origen de HTML se remonta a 1980, cuando el físico Tim
Berners-Lee, investigador del CERN (Organización Europea para la Investigación
Nuclear) propuso un nuevo sistema de “hipertexto” para compartir documentos. Los
sistemas de hipertexto habían sido desarrollados años antes.
1.1.2 Definción de conceptos básicos de la web
- http: Hipertext Transfer Protocol, es el protocolo encargado de la transferencias de
páginas web, basados en una arquitectura cliente – servidor, y por medio de él se
puede obtener todo tipo de información multimedia (imágenes,videos, gráficos, etc.).
- html: Hipertext Markup Language, es un lenguaje que define etiquetas o marcas que
definen la estructura de un documento para uso web (normalmente), el lenguaje es
muy sencillo y permite la inclusión de imágenes y texto. La web como una red de
servidores dentro de internet que ofrecen páginas hipertextuales con formato html.
- URL: Uniform Resource Locator, Es un mecanismo en donde se asigna una dirección
a recursos informáticos localizados en cualquier lugar de internet. Esta dirección
contiene una identificación del servicio, podría incluso agregarse el número de puerto
y el directorio en donde se encuentra el recurso, con la estructura:
protocolo://dirección:puerto/directorio/archivo
- Cliente web o Navegador web: son todos los programas que
se utilizan para acceder a los recursos informáticos
registrados en los servidores web en internet. Por ejemplo:
Google Chrome, Mozilla Firefox, Opera, etc.
1.1.3 Detalle de los navegadores Web
- Google Chrome, fue creado el 2008 por Google y compilado bajo componentes de
código abierto. Se sostiene una sólida seguridad, velocidad y estabilidad. Se ha
demostrado bajo test que es uno de los más rápidos y seguros basados en una
arquitectura multiprocesos lo cual lo hace eficiente.
-
- Mozilla Firefox, es un navegador de código abierto aceptado fuertemente por la
comunidad de desarrolladores web, posee extensiones, utilidades o herramientas de
personalización, fue uno de los primeros navegadores en implementar el uso de
pestañas.
-
- Internet Explorer, es el navegador por defecto dado por Microsoft en los sistemas
operativos Windows, ha sido muy utilizado, pero en la actualidad se ha desfasado su
uso, aparte de la falta de soporte que tiene el navegador.
-
- Microsoft Edge, es el navegador que sustituye a Internet Explorer por parte de
Microsoft, pero solo disponible para los nuevos sistemas operativos de la compañía,
Windows 10. Como sucesor, ha demostrado ser más ligero y versátil, además de
algunas herramientas que permiten mejorar la navegabilidad.
1.1.4 Elementos de arquitectura de un navegador web
Figura 1. Arquitectura de referencia de un navegador web
Fuente: Vara Mesa, López y Granada, (2014)
En donde:
Subsistema de interfaz de usuario: Es la capa encargada de interactuar entre el
usuario y el motor del buscador, la cual puede presentar el progreso de carga de
la página, herramientas de visualización, configuraciones del usuario, etc.
Motor del Buscador: Es el componente encargado de tomar la URL y realizar los
procesos de búsqueda respectivos, aparte de soportar los mecanismos de
navegación tales como página anterior, siguiente o recarga de la misma. Además,
es el componente encargado del manejo de alertas de JavaScript y se comunica
con el motor de renderizado para validar las preferencias de búsqueda.
Subsistema de Renderizado: Es la parte que se encarga de la interpretación del
código obtenido en una página web, para la producción visual de la información,
es capaz de representar contenido HTML, CSS, XML e incluso imágenes y
videos.
Alguno de los motores de renderizado, más conocidos son:
Gecko: usado por Mozilla Firefox
Webkit: usado por Google Chrome y Safari.
Presto, el motor de Opera.
Subsistema de comunicaciones: componente encargado de
verificar los protocolos de transferencia, tales como : http, ftp, etc. Y
es a su vez, encargado de la identificación del tipo de contenido
recibido, si es audio, video, imagen etc.
Intérprete de JavaScript: Es el encargado de identificar, analizar y
ejecutar el código JavaScript, el cuál es quien permite la interacción
entre el usuario y la página web. Es común que las páginas HTML
contengan código JavaScript embebido y este intérprete puede ser
deshabilitado dentro de las configuraciones de los navegadores,
puesto que podría permitir eficiencia en la carga, por múltiples
ventanas emergentes etc.
2.1.1 Definción de estructura de un documento HTML
Figura 2. Estructura básica de un documento HTML. Fuente: Elaboración propia.
Etiqueta <html></html>: permiten definir el inicio y final de un
documento html.
Etiqueta <header></header>: establece el espacio del encabezado
de la página web, y contiene en su mayoría etiquetas de metadata
(<meta >) que son etiquetas especiales para establecer
características de la página web como formato de la información,
tipo de información, etc. Dentro de la página.
Además es en esta etiqueta donde se incluyen, normalmente, los
archivos Javascript y archivos css externos.
Etiqueta <title></title>: esta etiqueta se usa dentro de la etiqueta
<header></header> y es utilizada para la definición del título de la
página web.
Etiqueta <body></body>: dentro de ella definimos todo el cuerpo
del archivo HTML, en la cual se escribe la mayoría del código
HTML y es la parte visible del mismo. Además se suele encontrar
muchas más etiquetas que tienen diversas funciones.
2.1.2 Etiquetas básicas de HTML.
A continuación, listaremos algunas de las etiquetas básicas que se
puede encontrar en muchas páginas web.
Etiqueta <img></img>, es muy utilizada para poder colocar
imágenes en las páginas web, requiere de un atributo ‘src’ para
definir la url o dirección del recurso imagen.
Etiqueta <div></div>, es sin duda de mucha utilidad, ya que permite
la creación de bloques o secciones de un documento HTML, estos
son muy utilizados para el diseño y la composición de la página
web.
Etiqueta <span></span>, es utilizada para la agrupación de
etiquetas o elementos en línea, se comporta como un contenedor;
es decir, no produce un cambo visual.
Etiqueta <a></a>, es la etiqueta que permite la hiper vinculación,
gracias a esta etiqueta y con su atributo “href”.
2.2.1 Detalles importantes de los sistemas de colores
RGB está basado en tres colores: rojo, verde y azul, se le conoce
como aditivo porque a medida se suman los colores se tendrá como
terminación el blanco.
Figura 4. Esquema del modelo RGB. Fuente: Guerrero Pérez (2014)
CMY está basado en tres colores: cian, magenta y amarillo, y se le
conoce como sustractivo debido a que a medida los colores se van
agregando se va obteniendo tonos más oscuros y se tiene como fin
el color negro.
Figura 5. Esquema del modelo CMY. Fuente: Guerrero Pérez (2014)
HTML utiliza el sistema de codificación RGB, teniendo en cuenta que
es posible la combinación de 256 para cada color básico lo que nos
permite tener disponible 16,777,216 colores. Para la declaración de
colores se usa del sistema de numeración hexadecimal, en el cuál,
00
es la ausencia de color y FF la cantidad máxima del mismo(Guerrero
Pérez, 2014,p.80)
Usando la siguiente sintaxis:
#RRGGBB
En donde:
#: indica que el formato del color es RGB.
RR: cantidad de color rojo.
GG: cantidad de color verde.
BB: cantidad de color azul.
Por lo tanto, haciendo uso de la etiqueta de párrafo y el atributo “style”, se
podría dar color al texto dentro del párrafo de la siguiente forma:
Figura 6. Ejemplo de propiedad Color en CSS. Fuente: Guerrero Pérez (2014)
2.2.2 Atributos y ejemplo del uso de la etiqueta font
La etiqueta <font> tiene en cuenta los siguientes atributos:
- Face: define el tipo de fuente que se utilizará para la
presentación del texto.
- Color: permite modificar el color con el que se mostrará un
texto, usando el sistema RGB o los colores por nombre como:
red, green, blue, etc.
- Size: este atributo permite definir el tamaño de la fuente de
texto declarada en el atributo face, comprendido entre valores
del 1 al 7, donde 1 es lo más pequeño y 7 el más grande.
Figura 7. Ejemplo de propiedad Font en CSS. Fuente: Guerrero Pérez (2014)
Obtenemos como resultado:
Figura 8. Resultado e uso de propiedad Font en CSS. Fuente: Guerrero Pérez
(2014)
2.2.3 Uso de href y atributos de la etiqueta <a>
El valor contenido dentro del atributo href debe cumplir con la siguiente
sintaxis.
Figura 10. Ejemplo de URL. Fuente: Guerrero Pérez (2014)
Donde:
Servicio: el protocolo de internet que se usará (http, https, ftp).
[Link]: nombre del servidor que proporciona el recurso.
Puerto: normalmente no se usa, es opcional.
Camino: es el path o la ruta de los directorios que indican en donde
se encuentra el recurso al que se desea acceder.
Fichero: es el nombre del archivo con su respectiva extensión
([Link], [Link], [Link])
Otros atributos de la etiqueta <a>, que caben resaltar son:
title: es el texto que se muestra cuando el cursor se posiciona sobre
el enlace, comúnmente llamado tooltip.
Target: define la forma en que se abrirá el enlace dentro del
navegador, puede tomar los siguientes valores:
o _blank: Se abrirá una nueva pestaña/ventana del navegador
para redireccionar al usuario.
o _parent: Se generará un frame dentro del frame padre,
actualmente no es muy usado.
o _self: el documento se mostrará en la ventana en donde se
ubica el enlace.
o _top: Se mostrará en todo el espacio de la ventana del
navegador.
2.2.4 Tipos de formato de imágenes
Las imágenes tienen diversos formatos, básicamente se basan en el
tipo de compresión de la información de la imagen. Los formatos más
utilizados dentro de la web son: PNG,JPEG y GIF.
GIF
El formato GIF es normalmente utilizado para ciertas animaciones, es
la característica principal de este formato, además de permitir zonas
transparentes dentro de la misma.
PNG
El formato PNG tiene como característica el uso de transparencia y
es posible la visualización de la imagen, incluso mientras no se ha
descargado totalmente la imagen dentro del navegador web.
Además, no sufre de pérdida de colores en ninguna plataforma.
JPEG
El formato JPEG es el formato recomendado para el uso de
documentos HTML, debido a la excelente calidad y tamaño que
presenta al momento de renderizar la imagen.
2.2.4 Atributos de la etiqueta <img>
En donde podemos utilizar los siguientes atributos:
Src: se especifica la ruta en donde se encuentra el recurso imagen,
tomando en cuenta el nombre del archivo y la extensión.
Tittle: es el texto que se muestra cuando el cursor se posiciona
sobre la imagen, comúnmente llamado tooltip.
Alt: es el atributo que se utiliza cuando la imagen por algún motivo
no es capaz de ser cargada y mostrada, el navegador utiliza el
texto dentro de este atributo para mostrarlo en su defecto.
Width: define el tamaño del ancho de la imagen en píxeles
Height: define el tamaño del alto de la imagen en píxeles.
2.2.5 Uso de atributo Type en etiqueta <ul> y <ol>
Además, es posible cambiar el símbolo que precede a cada ítem
dentro de la lista, a través del atributo “type”, el cuál puede tomar los
siguientes valores:
- disc: representa un círculo de color negro.
- circle: representa un circulo con fondo blanco.
- square: representa un cuadrado de color negro.
Por ejemplo con el siguiente código:
Figura 15. Ejemplo de listas no ordenadas con atributo type. Fuente: Guerrero
Pérez (2014)
Obtenemos:
Figura 16. Ejecución de listas no ordenadas con atributo type. Fuente: Elaboración
propia
Al igual que las listas no ordenadas, se puede modificar el tipo de
símbolo que lo precede, utilizando el atributo “type”, el cuál puede
obtener los siguientes valores:
- 1: numeración estándar (1,2,3 …).
- a: numeración alfabética (a,b,c …).
- A: numeración alfabética en mayúsculas (A,B,C …).
- i: numeración en números romanos minúscula (i,ii,iii …).
- I: numeración en números romanos mayúsculas (I,II,III…).
2.2.5 Definición de una tabla
A continuación, se presentan las etiquetas que permiten la creación de
una tabla en HTML:
- <table>: Con esta etiqueta se define el contenedor de la tabla a la
cual se insertan otros elementos HTML.
- <tr>: Define cada una de las fila de una tabla
- <td>: Se utiliza para la declaración de cada celda y dentro de la
misma se escribe la información que se desea presentar.
Ejemplo de uso de etiqueta <table>
Por lo tanto, se puede construir una tabla en HTML con la siguiente
estructura:
Figura 20. Código de estructura de una tabla en HTML. Fuente: Guerrero Pérez
(2014)
Y obtenemos el siguiente resultado:
Figura 21. Resultado de estructura de una tabla en HTML. Fuente: Elaboración
propia.
Si se observa con detalle, la directiva “<table>” tiene un atributo
llamado “border”, esto con el fin de presentar la estructura con borde,
dado que sin ella solo se mostraría cada uno de los elementos
apilados.
2.2.6 Atributos de la etiqueta <form>
Además, requiere de los siguientes atributos:
- action: Se coloca la ruta del documento que procesará la
información enviada desde el formulario, normalmente es un
archivo del lado del servidor como PHP o ASPX.
- method: Define la forma en que se enviará la data con las
siguientes opciones GET, que envía la información sobre la
URL y POST, que envía la información como parámetros
dentro del cuerpo de la petición http.
Atributos de etiqueta <input> y ejemplos de uso
En donde:
Name: es el atributo que sirve para identificar el nombre del parámetro
que será enviado por el método declarado en el formulario.
Value: Es la entrada de información que el cliente ha escrito, marcado o
seleccionado.
Type: Es el atributo que permite definir qué tipo de control se
presentará al cliente para la entrada de datos, entre ellos están:
- text: es el valor más común para representar una caja de texto.
- Checkbox: crea una casilla de selección la cual puede o no ser
seleccionada. El valor en el atributo “value” será enviado solo sí se
encuentra marcado.
- Radio: Posee el mismo comportamiento que de checkbox, el cual
crea opciones de respuesta y solo se puede seleccionar un valor de
todas las opciones.
- Submit: Es el botón de envío del formulario, en donde el texto
contenido en el atributo value es el texto que se muestra al usuario
para aceptar el envío de la información dentro del formulario.
A continuación, se presenta un ejemplo de cada uno de los
elementos antes mencionado:
Figura 23. Ejemplo de tipos de input. Fuente: Elaboración propia
Atributos de etiqueta <select> y ejemplo de uso
En donde:
Name indica el nombre del parámetro que será enviado según el
método seleccionado en la etiqueta “<form>”, y Value dentro de cada
optión será el valor que se enviará en el mismo. Dentro de cada
etiqueta “<option>” podemos escribir el texto que se presentará al
usuario.
A continuación, se presenta un ejemplo de cómo se presenta la
etiqueta select dentro de un formulario:
Figura 25. Ejemplo de etiqueta select. Fuente: Elaboración propia.
Anexo Clase 2: Hojas de estilo en cascada CSS
3.1.2 Algunas propiedades de CSS
Algunas de las propiedades más utilizadas son:
Color: permite el cambio de color del texto.
Background-color: permite que el color de fondo de cualquier
elemento cambie.
Margin: se utiliza para crear un espacio alrededor de los elementos,
fuera de los bordes definidos.
Padding: se utiliza para generar espacio alrededor del contenido de
un elemento, dentro de los bordes definidos.
Font: define la familia de fuentes, la negrita, el tamaño y el estilo de
un texto.
A medida se siga en el curso, se adquirirá nuevas propiedades.
3.1.3 Ejemplo de etiqueta style con propiedades
Por ejemplo, si se desea seleccionar aquellos elementos de tipo
párrafo (<p>) para aplicarles una regla CSS en específico se
realizaría de esta forma:
Figura 29. Ejemplo de etiqueta style con propiedades. Fuente: Guerrero Pérez
(2014)
Obtendríamos el siguiente resultado:
Figura 30. Ejecución de etiqueta style con propiedades. Fuente: Elaboración
propia.
Como se puede observar, se aplicó la regla definida dentro de
“<style>” a todos los selectores de tipo “<p>”.
3.2.1 Ejemplo de uso de selectores de etiqueta
Por ejemplo, en el siguiente código se muestra que todas aquellas
directivas o etiquetas que sean de tipo párrafo “<p>” se le aplicará las
correspondientes propiedades (margin-top:5px; text-
decoration:undeline;)
Figura 36. Aplicación de propiedades. Fuente: Guerrero Pérez (2014)
Y si se desea que esta misma configuración de propiedades se aplique
también a las etiquetas header 1 (<h1>), se podría escribir de la
siguiente manera:
Figura 37. Selectores de etiqueta múltiples. Fuente: Guerrero Pérez (2014)
En donde se observa que en los selectores múltiples se pueden
separar por coma (,) de forma de que tanto el selector 1 (p) y el
selector 2 (h1) se les aplique las mismas propiedades planteadas.
3.2.2 Ejemplo de selectores descendentes
Por ejemplo, si se desea que los enlaces (<a>) que están contenidos
en los párrafos (<p>) se le modifique el color del texto a rojo y que no
posea decoración, el código debería lucir así:
Figura 39. Selectores descendentes múltiples. Fuente: Guerrero Pérez (2014)
3.2.3 Ejemplo de selectores por clase
Por ejemplo en el siguiente código:
Figura 41. Ejemplo de clases con propiedades. Fuente: Guerrero Pérez (2014)
Se obtiene el siguiente resultado:
Figura 42. Ejecución de clases con propiedades. Fuente: Elaboración propia.
Como se puede observar, solo fue aplicado en aquellos elementos que
contuvieran la clase definida al igual que el selector en este caso
“.enlace_con_estilo”.
Además, es posible con CSS combinar las técnicas de los selectores,
por ejemplo, si se busca seleccionar a todos aquellos elementos HTML
que tengan por clase “parrafo_negrita” pero que estén contenidos
dentro de una etiqueta párrafo “<p>”, se podría escribir de la siguiente
manera:
Figura 43. Ejemplo de combinación de selectores. Fuente: Guerrero Pérez (2014)
3.3.1 Otras propiedades para el formateo de texto
font-style: Establece el estilo con que se presentará el texto. Los
valores pueden ser: normal, italic u oblique.
text-decoration: Constituye que el texto sea decorado por las
siguientes opciones:
o underline: subraya el texto
o Overline: subraya superiormente
o Line-throught: tacha el texto
o Blink: parpadea el texto
o None: no produce ningún efecto
Vertical-align: Alinea el texto verticalmente con respecto al
contenedor del mismo. Algunas opciones son:
o Top: alinea el texto con la parte interna y superior del
contenedor.
o Middle: alinea el texto a la mitad del contenedor.
o Bottom: alinea el texto con la parte interna e inferior del
contenedor.
3.3.3 Acceder a herramientas del desarrollador
La forma común en la que se puede hacer es, ir a las opciones del
navegador, más herramientas, herramientas del desarrollador.
Figura 46. Ejemplo de opciones de desarrollador web. Fuente: Elaboración propia.
Al acceder a la opción, se podrá observar los elementos HTML de las
páginas web, así también las propiedades CSS aplicadas.
Figura 47. Ejemplo de vista de herramienta de desarrollador. Fuente: Elaboración
propia.
Es de mucha utilidad al momento en que se busca realizar un
mantenimiento o verificar que propiedades están siendo aplicadas a un
elemento HTML en específico.