Scribd
Cargar
23 vistas10 páginas

Unidad 2 Programación Web I

Cargado por

Gerallthy Merfolk
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
23 vistas10 páginas

Unidad 2 Programación Web I

Cargado por

Gerallthy Merfolk
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

Ingeniería en Sistemas

Computacionales
L

PROGRAMACIÓN WEB I

Unidad 2. Lenguaje de marcado


Unidad 2. Lenguaje de marcado

Lenguaje de marcado

Los lenguajes de marcado, también conocidos como lenguajes de marcas o


de descripción de documentos, se refieren a un tipo de lenguajes que combina
texto con información relacionada con éste. En concepto de marcado proviene
de la época en la que los correctores de estilo marcaban los documentos para la
imprenta y les indicaban qué tipo de letra, tamaño o estilo debían utilizar para la
impresión. Por lo tanto, los lenguajes de marcado contienen comandos que indi-
can el formato que debe seguir un documento en la web.

Estos elementos de marcado permiten que cualquier navegador pueda interpre-


tar el estilo de la página web y reformatearlo. Existen tres tipos de lenguajes de
marcado (Ferrer, 2015):

1. Marcas de presentación. Indican el formato marco del texto. Se indica


al inicio, pero es poco utilizado porque es poco flexible cuando se trata de
proyectos grandes.

2. Marcas de procedimientos. Se utilizan para la presentación del texto y


se interpretan en el orden en el que aparecen, por esta razón se llaman
marcas de procedimiento. Por ejemplo, una marca que convierte el texto
en negrita debe finalizar con una marca donde se termine dicho formato.
El HTML es el mejor ejemplo de este tipo de lenguaje.

3. Marcas descriptivas. Se utilizan para describir fragmentos del texto


y decir cómo se representarán, no se preocupan del formato como las
fuentes o los estilos del párrafo. El lenguaje está separado del contenido
permitiendo la flexibilidad cuando se realizan modificaciones. El SGML es
un ejemplo de estos tipos de lenguajes.

SGML

El SGML (standard generalized markup language o lenguaje de marcado genera-


lizado estándar) es un lenguaje de marcado que define las normas gramaticales
de otros lenguajes más específicos, pero que no define un conjunto de etique-
tas especiales. Establece un método formal para diseñar documentos adecuados
a cualquier necesidad o situación específica. En otras palabras, puede decirse
que el SGML es un metalenguaje de marcado porque permite definir múltiples
lenguajes de marcado descriptivo.

Las reglas que define SGML se establecen a partir de un documento llamado


DTD (document type definition), que dispone las etiquetas que pueden usarse
2
Unidad 2. Lenguaje de marcado

para la creación de un documento, como son atributos, sintaxis, orden, etc. El


lenguaje SGML no almacena el diseño de los documentos, más bien almace-
na la estructura lógica a través de etiquetas que incluyen los signos “<” “>”.
Estas etiquetas indican el inicio y fin de los elementos, como párrafos, listas,
tablas, etc.

El lenguaje SGML es el principal precedente del lenguaje HTML, que a la fecha


es el lenguaje predominante para la construcción de sitios web.

HTML

El HTML (hypertext markup language), o lenguaje de marcas de hipertexto,


fue propuesto por Tim Berners-Lee tomando como base el SGML y tiene como
objetivo la navegación dentro de un documento a través del establecimiento de
enlaces. Entre sus principales características destacan su sencillez, no existen
variables, es un lenguaje interpretado y no se compila. HTML es un lenguaje
pasivo que no interactúa de manera directa con el usuario, ya que su función
consiste en mostrar los contenidos.

La característica más importante es que puede manejar hipertexto, esto es, que
cada página no es un elemento aislado, sino que se entrelaza con otras páginas
mediante enlaces, gracias a los cuales es posible una navegación fluida y sencilla
entre la información contenida en los sitios web.

Los editores para HTML van desde editores de texto como WordPad hasta sofis-
ticados editores que marcan errores y dan sugerencias sobre sintaxis.

Estructura de un documento HTML

Los documentos HTML se estructuran de acuerdo a la siguiente tabla (Romero,


1998):

<!DOCTYPE html>
<html>
<head>
<title> colocar título de la página en este apartado</title>
</head>
<body>
Colocar el contenido de la página en este apartado
</body>
</html>

Estructurara general de un HTML.


3
Unidad 2. Lenguaje de marcado

Como se puede observar, la primera línea indica el tipo de documento que se está
utilizando, es decir, html. Toda la información que se refiere a HTML es marcada
con las etiquetas <html> y </html>. Dentro de estas etiquetas se pueden distin-
guir dos partes importantes:

1. El encabezado, delimitado por las etiquetas <head> y </head> que inclu-


ye información sobre las características de los documentos. En la tabla se
muestra el título de la página delimitado por las etiquetas <title> y </
title>, que es una etiqueta obligatoria en este apartado y que se muestra
en la parte superior de la ventana del documento.

2. El cuerpo, delimitado por las etiquetas </body> y </body> que incluye


todo el contenido del documento y lo que se presentará en la pantalla.
En esta parte es donde se pueden controlar atributos que modifican la
apariencia y el estilo del documento.

Elementos y atributos

Los elementos en HTML son aquellos que se delimitan a partir de dos etiquetas,
una de apertura encerrada entre corchetes angulares <> y una de cierre
que es precedida por una diagonal </>, dentro de los corchetes se escribe el
nombre de la instrucción que representan. Por ejemplo, <b>Texto importante</
b>, como se puede observar contiene dos etiquetas y entre ellas se encuentra el
contenido del elemento, es decir, “Texto importante”. Es conveniente aclarar que
no todos los elementos tienen contenido, algunos se conocen como elementos
vacíos y su propósito es proporcionar un formato específico. A continuación, se
presenta una lista de los elementos más importantes en HTML:

Elemento Descripción

<!doctype html> Define que el documento está bajo el estándar de HTML.

Representa la raíz de un documento HTML. Todos los demás elemen-


<html>
tos deben ser descendientes de este elemento.

Representa el contenido principal de un documento HTML. Sólo hay


<body>
un elemento <body> en un documento.

<section> Define una sección en un documento.

<nav> Define una sección que solamente contiene enlaces de navegación.

Define contenido autónomo que podría existir independientemente


<article>
del resto del contenido.

4
Unidad 2. Lenguaje de marcado

Los elemento de cabecera implementan seis niveles de cabeceras de


<h1>,<h2>,<h3>, documentos: <h1> es la de mayor y <h6> es la de menor impor-
< h4>,<h5>,<h6> tancia. Un elemento de cabecera describe brevemente el tema de la
sección que introduce.

Define la cabecera de una página o sección. Usualmente contiene


<header> un logotipo, el título del sitio web y una tabla de navegación de
contenidos.

Define el pie de una página o sección. Usualmente contiene un


<footer> mensaje de derechos de autoría, algunos enlaces a información legal
o direcciones para dar información de retroalimentación.

<address> Define una sección que contiene información de contacto.

Define el contenido principal o importante en el documento.


<main>
Solamente existe un elemento <main> en el documento.

<p> Define una parte que debe mostrarse como un párrafo.

Representa un quiebre temático entre párrafos de una sección o


<hr>
artículo o cualquier contenido.

Indica que su contenido esta preformateado y que este formato


<pre>
debe ser preservado.

<blockquote> Representa un contenido citado desde otra fuente.

<ol> Define una lista ordenada de artículos.

<ul> Define una lista de artículos sin orden.

<li> Define un artículo de una lista ennumerada.

Define una lista de definiciones, es decir, una lista de términos y sus


<dl>
definiciones asociadas.

<dt> Representa un término definido por el siguiente <dd>.

<dd> Representa la definición de los términos listados antes que él.

<figure> Representa una figura ilustrada como parte del documento.

<figcaption> Representa la leyenda de una figura.

5
Unidad 2. Lenguaje de marcado

<div> Representa un contenedor genérico sin ningún significado especial.

<img> Representa una imagen.

Representa un contexto anidado de navegación, es decir, un docu-


<iframe>
mento HTML embebido.

Representa un punto de integración para una aplicación o contenido


<embed>
interactivo externo que por lo general no es HTML.

Representa un recurso externo, que será tratado como una imagen,


<object> un sub-documento HTML o un recurso externo a ser procesado por
un plugin.

Define parámetros para el uso por los plugins invocados por los
<param>
elementos <object>.

Representa un video, y sus archivos de audio y capciones asociadas,


<video>
con la interfaz necesaria para reproducirlos.

<audio> Representa un sonido o stream de audio.

Permite a los autores especificar recursos multimedia alternativos


<source>
para los elementos multimedia como <video> o <audio>.

Principales elementos de HTML versión 5.

Los atributos son elementos de las etiquetas que proporcionan característi-


cas a un texto, imagen, video, etc., por ejemplo altura, anchura, color, tipo de
letra, formato, entre otras. Se colocan dentro de la etiqueta de inicio y tienen la
siguiente estructura “nombre_atributo= valor”. Por ejemplo: <font color=re-
d>Hola cómo estás</font>, en donde la etiqueta es font y el atributo es
color que toma el valor red. Algunos ejemplos de atributos se muestran en la
siguiente tabla:

Etiqueta Atributo Resultado

align=”right” Alinear el párrafo a la derecha

align=”center” Centra el texto de casa renglón


<p>
align=”left” Alinear el párrafo a la izquierda

align=”justify” Redistribuye el texto para justificarlo

dir=”rtl” Direcciona el texto de derecha a izquierda

6
Unidad 2. Lenguaje de marcado

dir=”ltr” Direcciona el texto de izquierda a derecha

El texto se desliza de derecha a izquierda y al


behavior=”slide”
final de la ventana se detiene

El texto se desliza de derecha a izquierda y


behavior=”scroll”
reaparece otra vez por la derecha

El texto se desliza alternando la dirección de


behavior=”alternate”
derecha a izquierda y de izquierda a derecha
<marquee>
direction=”left” El texto se desliza de derecha a izquierda

direction=”up” El texto se desliza de abajo a arriba

direction=”down” El texto se desliza de arriba a abajo

El valor number sería un número del 1


scrollamount=”num-
al 20 para determinar la velocidad del
ber”
desplazamiento

Ejemplo de atributos de las etiquetas <p> y <marquee>. Equipo Vértice (2009, p. 35).

Maquetación

La maquetación es el proceso en el que un prototipo gráfico se convierte en


una página HTML, es decir, consiste en acomodar los elementos para que sean
visualmente agradables a la vista del usuario. En HTML la maquetación se reali-
zaba a través de tablas en las que el contenido se acomodaba en filas y columnas
hasta lograr la apariencia deseada y se colocaban tantas etiquetas hasta que se
lograba el acomodo de los elementos a gusto del diseñador.

En la actualidad la maquetación en HTML se lleva a cabo a través de una maque-


tación semántica en la que cada etiqueta tiene un significado relevante y es
colocada únicamente cuando se justifica su uso. Es común dividir el contenido del
estilo a través de hojas de estilo o CSS, las cuales serán tratadas en las siguien-
tes unidades de este curso. En la siguiente imagen se muestra una maquetación
tradicional a través de hojas de estilo.
7
Unidad 2. Lenguaje de marcado

Ejemplo de maquetación usando CSS. Imagen tomada con propósitos educativos del sitio
El While Infinito (2014).

Formularios

Los formularios en una página web sirven para recopilar datos del usuario
que son enviados al servidor. Los formularios HTML se delimitan a través de
las etiquetas <form> y </form> entre las cuales se colocan los controles o
elementos del formulario. A continuación se muestran los principales elementos
de un formulario HTML:

Elemento Descripción Atributos

<input> Es un campo de entrada de • NAME: da nombre al campo.


datos en un formulario y trabaja • VALUE: otorga un valor inicial al
en función del valor del atributo campo.
type y de acuerdo a los siguientes • SIZE: define tamaño en el caso de
valores: los campos TEXT y PASSWORD.
• MAXLENGTH: longitud máxima
• TYPE=RADIO: permite escoger aceptada de la entrada del usuario
entre múltiples opciones, pero en el caso de los campos TEXT y
sólo una de las del mismo PASSWORD.
nombre.

8
Unidad 2. Lenguaje de marcado

• TYPE=RESET: pone en blanco • CHECKED: en caso de RADIO o


todo el formulario. CHECKBOX si ésta se encuentra
• TYPE=TEXT: permite la entra- marcada o no por defecto.
da de una línea de texto.
• TYPE=PASSWORD: permite la
entrada de una línea de texto
mostrando en lugar de éste
caracteres como “*”, usado
generalmente para entrada de
contraseñas.
• TYPE=CHECKBOX: permite
escoger una o varias opciones
múltiples.
• TYPE=SUBMIT: acepta los
datos entrados en el formula-
rio y ejecuta la acción espe-
cificada. Se visualiza como un
botón.
• TYPE=HIDDEN: campo de
texto no visible para el usuario.
Usado para conservar valores.

<select> Permite seleccionar una o varias SIZE: el tamaño en pantalla del


de las opciones presentadas. elemento SELECT. Si es uno, sólo nos
mostrará una opción y el elemento
SELECT actuará como una lista desple-
gable. Si es mayor que uno, es una
lista de selección.
MULTIPLE: si lo indicamos, podremos
elegir más de una opción.

<textarea> Permite obtener del usuario ROWS: filas que ocupará la caja de
elementos de texto en múltiples texto.
líneas. COLS: columnas que ocupará la caja
de texto.

Elementos más importantes de un formulario HTML. Mateu (2004).

Los formularios son enviados al servidor a través de las instrucciones GET y POST
cuando se produce un evento de tipo SUBMIT, el cual indica que los datos de los
campos del formulario deben ser enviados para procesar en el servidor.

9
Unidad 2. Lenguaje de marcado

Referencias

®® Adell, J., y Bellver, C. (1995). La internet como telaraña: el world-wide web.


En Métodos de Información (MEI). 2(3). 25-32. Recuperado de http://eprints.
rclis.org/4456/1/Internet.htm

®® Berenguel, J. (2015). Desarrollo de aplicaciones web en el entorno servidor.


España: Paraninfo.

®® Berners-Lee, T., Masinter, L., y McCahill, M. (1998). Uniform Resource Locators.


RF2396 [documento electrónico de Network Working Group]. Recuperado de
http://www.ietf.org/rfc/rfc1738.txt

®® Berzal, F., Cortijo, F., y Cubero, J. (2002). Desarrollo profesional de aplicaciones


web con ASP.NET. Colombia: Universidad del Cauca.

®® El While Infinito [sitio web] (2014). Maquetación usando CSS (en línea).
Recuperado de https://elwhileinfinito.files.wordpress.com/2014/04/seman-
tica-html.gif

®® Equipo Vértice (2009). Diseño básico de páginas web en HTML. España:


Autor.

®® Ferrer, J. (2015). Creación de páginas web con el lenguaje de marcas. España:


Paraninfo.

®® Groussard, T. (2010). Java Enterprise Edition: Desarrollo de aplicaciones web


con JEE 6. España: Ediciones ENI.

®® Luján, S. (2002). Programación de aplicaciones web: historia, principios


básicos y clientes web. España: Club Universitario Gamma.

®® Mateu, C. (2004). Desarrollo de aplicaciones web. España: UOC.

®® Ordax, J. M., y Ocaña, P. A. (2012). Programación web en Java. España:


Ministerio de Educación.

®® Romero, L. F. (1998). Publicar en internet: guía práctica para la creación de


documentos HTML. España: Universidad de Cantabria.

®® Sivianes, F., Sánchez, G., Ropero, J., Benjumer, J., Barbancho, J., y Romero,
M. (2010). Servicios en Red. España: Paraninfo.

10

También podría gustarte