Instituto tecnologico de Tapachula

Ingeniería en sistemas computacionales

Programación web

Investigación de Desarrollo Web

Catedrático:

L.I Nicolas cabrera Hidalgo

Presenta:

Juan Carlos González Gutiérrez

1
Contenido
Introducción. ............................................................................................................ 4
Estructura global de un documento Web. ............................................................... 5
DOCTYPE ........................................................................................................... 5
html ...................................................................................................................... 5
Head .................................................................................................................... 5
Body .................................................................................................................... 7
meta ..................................................................................................................... 7
title ....................................................................................................................... 8
link ....................................................................................................................... 8
Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y
aplicaciones............................................................................................................. 9
Texto .................................................................................................................... 9
Párrafo ................................................................................................................. 9
Salto de línea ....................................................................................................... 9
Otros significados: Span .................................................................................... 10
Énfasis ............................................................................................................... 10
Importante.......................................................................................................... 10
Comentario ........................................................................................................ 10
Vínculos ................................................................................................................ 11
Elemento a......................................................................................................... 11
Elemento Link .................................................................................................... 11
Listas ..................................................................................................................... 12
Listas ordenadas y no ordenadas ...................................................................... 12
Listas de descripciones ..................................................................................... 13
Listas anidadas .................................................................................................. 15
Tablas ................................................................................................................... 16
Imágenes. .......................................................................................................... 18
Dimensiones de la imagen: width y height ......................................................... 18
Texto alternativo de la imagen: el atributo alt . .................................................. 18
Tipos de formatos de imágenes ......................................................................... 19
Formularios ........................................................................................................ 20
Campos de texto de una sola línea ................................................................... 21

2
 Campo de texto multilínea ................................................................................ 22
Controles de opción ........................................................................................... 23
Casillas de verificación ...................................................................................... 23
Botones de opción ............................................................................................. 24
Listas ................................................................................................................. 25
Lenguajes de presentación de documentos web .................................................. 27
Funcionamiento ................................................................................................. 28
Sintaxis .............................................................................................................. 29
Selectores. ............................................................................................................ 30
El selector universal ........................................................................................... 30
Selectores de tipo .............................................................................................. 31
Selectores de id ................................................................................................. 31
Selectores de clase ........................................................................................... 32
Selectores avanzados ....................................................................................... 32
Modelo de caja. ..................................................................................................... 33
Referencias: .......................................................................................................... 33

3
Introducción.
Un documento HTML, aun cuando está escrito de una manera estructurada que lo
hace encajar en el estándar del lenguage, no es otra cosa más que una simple
secuencia de caracteres que pueden ser encontrados en cualquier teclado normal.
En favor de la portabilidad, estos caracteres son normalmente almacenados en
archivos, tal como sucede con muchos otros tipos de información

4
Estructura global de un documento Web.
DOCTYPE

En primer lugar, se necesita indicar el tipo de documento que está creando. Esto en

Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la
precedan. De esta forma, el modo estándar del navegador es activado y las
incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas
en caso contrario.

html

<HTML>

Luego de declarar el tipo de documento, debemos comenzar a construir la

estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su
raíz en el elemento <HTML>. Este elemento contiene al resto del código

El atributo lang en la etiqueta de apertura <html> es el único atributo que

necesitamos especificar en HTML5. Este atributo define el idioma humano del
contenido del documento que estamos creando, en este caso “es” por español.

Head

El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre
dos secciones principales. Al igual que en versiones previas de HTML, la primera
sección es la cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será
crear estas dos secciones en el código usando los elementos <head> y <body> ya

5
conocidos. El elemento <head> va primero y al igual que el resto de los elementos
estructurales tiene una etiqueta de apertura y una de cierre:

Dentro de las etiquetas <head> se define el título de nuestra página web,

declararemos el set de caracteres correspondiente, proveeremos información
general acerca del documento e incorporaremos los archivos externos con estilos,
códigos Javascript o incluso imágenes necesarias para generar la página en la
pantalla. Excepto por el título y algunos íconos, el resto de la información
incorporada en el documento entre estas etiquetas es invisible para el usuario.

6
Body

<body>La siguiente gran sección que es parte principal de la organización de un

documento HTML es el cuerpo. El cuerpo representa la parte visible de todo
documento y es especificado entre etiquetas <body>

meta

<meta>

Es momento de construir la cabecera del documento. Algunos cambios e

innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la
etiqueta que define el juego de caracteres a utilizar para mostrar el documento. Ésta
es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla.

Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar
información general sobre el documento, pero esta información no es mostrada en
la ventana del navegador, es solo importante para motores de búsqueda y

7
dispositivos que necesitan hacer una vista previa del documento u obtener un
sumario de la información que contiene.

title

<title>

El texto entre las etiquetas <title> es el título del documento que estamos creando.
Normalmente este texto es mostrado en la barra superior de la ventana del
navegador.

link

<link>

Otro importante elemento que va dentro de la cabecera del documento es <link>.

Este elemento es usado para incorporar estilos, códigos Javascript, imágenes o
iconos desde archivos externos. Uno de los usos más comunes para <link> es la
incorporación de archivos con estilos CSS.

8
Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y
aplicaciones.
Texto

h1

El elemento h1 representa un encabezado de nivel 1. Los encabezados

(desde h1 a h6) son títulos que definen secciones implícitas en el documento y
organizan el contenido en una estructura jerárquica.

<h1></h1>…. <h6></h6>

Párrafo

El elemento p representa un párrafo. Se considera párrafo a un bloque de texto

compuesto de una o más oraciones que se refieren a un tema en particular y que
normalmente se separa de otros por un espacio en blanco.

<p> </p>

Salto de línea

<br>

La etiqueta vacía <br> está pensada para insertar saltos de línea en un bloque (por
ejemplo, para mostrar varios versos de un poema). La separación entre líneas es la

9
misma que dentro de un bloque (normalmente, inferior a la separación entre
bloques).

Otros significados: Span

La etiqueta <span> no tiene un significado definido y es la que se debe utilizar

cuando las otras etiquetas no son adecuadas. Se suele incluir el atributo class para
especificar el significado que se le quiere dar a la etiqueta.

Los navegadores no muestran la etiqueta <span> de ninguna forma especial.

Sintaxis:

<span></span>

Énfasis

em

La etiqueta <em> está pensada para dar énfasis a su contenido, es decir, para
llamar la atención sobre ese contenido.

Los navegadores suelen mostrar la etiqueta <em> en cursiva.

Sintaxis:

<em></em>

Importante

Strong

La etiqueta <strong> está pensada para indicar la importancia, seriedad o urgencia

de su contenido. Los navegadores suelen mostrar la etiqueta <strong> en negrita:

<strong></strong>

Comentario

small

La etiqueta <small> está pensada para indicar que se trata de información

secundaria, es decir lo que se suele llamar letra pequeña.
10
Los navegadores suelen mostrar la etiqueta <small> con un tamaño de letra más
pequeño

Vínculos
Los vínculos son una parte vital de HTML y consituyen la razón misma por la cual
la WWW existe. Internet es considerada una "red" debido a cómo los vínculos
conectan todas estas partes singulares (o documentos) unas con otras.

La función básica de un vínculo es la de hacer una referencia, de un

documento HTML a un recurso, que puede ser a su vez otro documento. En otras
palabras, un enlace define una relación entre dos recursos en la web.

Elemento a

El elemento a puede ser utilizado para insertar vínculos dentro del contenido del
documento. En general estos vínculos, en conjunto con las funcionalidades de los
navegadores, permiten a los usuarios trasladarse de un documento a otro de una
manera muy directa.

De entre las muchas formas que los autores tienen para construir un vínculo, la más
básica consiste en el elemento a con su contenido (el texto entre las etiquetas de
apertura y cierre) y una referencia al recurso apuntado (una URI especificada en el
atributo href). El contenido y la etiqueta de cierre. URI es una "ruta" para ir desde
un recurso a otro

Elemento Link

Este tipo de vínculo es muy particular. Es utilizado para proveer información

relacional acerca del documento entero, razón por la cual sólo es declarado en el
encabezado del documento (head).

11
Los vínculos declarados con el elemento link permanecen habitualmente ocultos del
usuario. Aun así, su información podría ser mostrada, por ejemplo, en una barra de
herramientas o en una ventana con información resumida.

Las muchas relaciones que este elemento puede establecer, dependen

principalmente del valor del atributo “rel”. En los casos más usuales define la
estructura del sitio web (documento próximo o anterior), provee versiones
alternativas del documento (para impresora, en otro lenguaje, etc.) y apunta a
recursos externos con información de estilo para el documento.

Listas
HTML provee mecanismos para incluir tres tipos diferentes de lista en un
documento. Éstos son: listas ordenadas (ol), listas no ordenadas (ul) y listas de
descripciones (dl).

Listas ordenadas y no ordenadas

La estructura de las listas ordenadas y no ordenadas es básicamente la misma, y

consiste de un contenedor con ítems. La única cosa que cambia en estos dos tipos
de lista es el elemento contenedor, que es ol para listas ordenadas y ul para listas
no ordenadas. Los ítems, a propósito, son insertados con el elemento li.

Pero estos dos tipos de lista no solo difieren en los elementos que utilizan.
Semánticamente hablando, las listas ordenadas le dan importancia al orden en que
los ítems son declarados, mientras que para las listas no ordenadas el orden es
irrelevante. En el siguiente ejemplo crearemos dos listas, una ordenada y la otra no
ordenada.

12
Listas de descripciones

Una lista de descripciones, previamente conocida como lista de definiciones, es una

estructura que consiste de nombres y valores, que normalmente guardan algún tipo
de relación. La asociación de nombres y valores en las listas de descripciones es
arbitraria y puede consistir de un nombre estando asociado a uno o más valores y
viceversa. Dicha asociación depende exclusivamente del orden y la posición de los
ítems, estando los valores siempre asociados al último nombre que los precede.

13
Nota:

En versiones previas del estándar, este tipo de lista era conocida como lista de
definiciones. HTML5, debido al extendido uso que los autores hacían de ésta para
asociar pares nombre/valor de todo tipo, ha cambiado su nombre y propósito al más
general lista de descripciones.

En el ejemplo siguiente tenemos un pequeño glosario de arte donde cada término

tiene una definición que le corresponde. En esta estructura, el término "miniatura"
recibe dos definiciones, mientras que los términos "mito" y "leyenda" comparten
ambos la misma definición

14
Listas anidadas

Las listas de HTML pueden ser anidadas en múltiples configuraciones. La idea de

las listas anidadas puede ser resumida en dos reglas: cualquier ítem de listas
ordenadas o no ordenadas (li) puede contener una lista; y cualquier valor de una
lista de descripciones (dd) puede contener una lista. Con este esquema puedes
hacer casi cualquier tipo de combinación.

En el siguiente ejemplo crearemos una lista ordenada con dos ítems, donde el
primero de estos ítems contendrá una lista no ordenada. Presta mucha atención a
las etiquetas de apertura y cierre del ítem que contiene a la lista.

15
Tablas
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas.
Este concepto ha estado presente en nuestra sociedad por un largo período de
tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de
transmitir información que, de otro modo, no sería comprendida tan fácilmente.

En documentos HTML una tabla puede ser considerada, resumidamente, como un

grupo de filas donde cada una contiene a un grupo de celdas. Esto es
conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas,
y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.

Como muchas otras estructuras de HTML, las tablas son construidas utilizando
elementos. En particular, una tabla básica puede ser declarada usando tres
elementos, a saber, “table” (el contenedor principal), “tr” (representando a las filas
contenedoras de las celdas) y “td” (representando a las celdas)

16
El atributo scope provee un mecanismo para indicar explícitamente a qué celdas
afecta una celda de encabezado. Este atributo solo puede ser declarado en una
celda de encabezado y tomar los valores "col", "row", "colgroup" y "rowgroup".
Los valores "col" y "row" indican que la celda de encabezado provee información
para el resto de las celdas en la columna o fila (respectivamente) en que está
presente. Los otros dos valores tendrán sentido más adelante en este tutorial. En el
siguiente ejemplo, la tabla presentada anteriormente ha sido mejorada con más
celdas de encabezado, con el fin de aumentar la legibilidad. Aquí, la celda en la
esquina superior izquierda de la tabla, proveería información ambigua si el
atributo scope no estuviera presente. En otras palabras, afectaría a las celdas en
su columna, así como a las celdas en su fila. La presencia del atributo scope ha
dejado en claro que las celdas afectadas por este encabezado son aquellas en la
misma fila.

17
Objetos

Imágenes.

Si solo insertamos texto en nuestras páginas webs, estas quedarán muy sencillas y
poco lucidas. Es por ello que en HTML tenemos la capacidad de insertar imágenes.

Las imágenes podrán ser elementos representativos de página web o elementos

decorativos. Si bien, en el caso de ser elementos decorativos deberíamos de
utilizar CSS para insertarlos en nuestra página web.

El uso de imágenes dentro de una página web tiene que hacerse con cautela, ya
que cada imagen que pongamos en nuestra web incrementará el tamaño (peso) de
la página. Por lo cual se verá afectado el tiempo de descarga de la página.

sintaxis básica es:

<img src="nombreimagen.jpg" alt=" " />

Dimensiones de la imagen: width y height

Si no se indica más sobre el elemento img, la imagen que le hayamos pasado en

su campo src se cargará con su tamaño original.

Los atributos width para el ancho de la imagen y height para el alto de la imagen.
De esta forma, si queremos que nuestra imagen se vea en 100x100 pixeles,
podemos insertar el siguiente código:

<img src="”foto.jpg”" alt="" width="”100”" height="”100”" />

Texto alternativo de la imagen: el atributo alt .

Sobre una imagen podemos indicar un texto alternativo o descriptivo de la misma.

Para ello tenemos el atributo alt.

<img src="foto.jpg" alt="texto" />

Pero, ¿por qué quiero poner un texto, cuando realmente es una imagen gráfica?

Ejemplo de casos de uso:

18
si por algún problema técnico no se puede cargar la imagen, el navegador mostrará
en su espacio el texto alternativo, lo cual dará al usuario una idea de lo que iba en
ese sitio.

Otra cosa útil es para cuando nuestra página sea utilizada por personas
discapacitadas con problemas de visibilidad. En este caso estas personas disponen
de herramientas que le van leyendo la página y cuando llegan a una imagen leen el
contenido que encuentran en el atributo alt.

<img src="foto.jpg" alt="Fotografía" />

Tipos de formatos de imágenes

Hemos aprendido mucho de cómo podemos insertar nuestras imágenes en el

documento HTML. Pero a la hora de insertar imágenes, qué tipo de imágenes puedo
insertar en el documento HTML.

En este punto tenemos un pequeño problema y es que los estándares de HTML no

definen los tipos de formato de imagen que se pueden ver en un navegador web.

Los formatos de imágenes más comúnmente aceptados son:

 JPEG, son imágenes digitales comprimidas con pérdida de información. Pero

que nos permiten tener imágenes digitales que ocupen poco espacio.

 GIF, es un formato para imágenes de mapas de bits las cuales soportan 8

bits por pixel. El formato GIF soporta imágenes animadas.

 PNG, es un formato de imagen en mapa de bits que emplea compresión de

datos sin pérdida de información. No requieren de licencia de patente. Es un
formato creado para utilizar imágenes en Internet con un tamaño adecuado.

Otros formatos que también son aceptados:

 APNG, son imágenes PNG animadas. Intenta evolucionar los gráficos

animados en GIF.

19
  SVG, gráficos vectoriales escalables. Son gráficos especificados mediante
texto, lo cual hace que sean interpretables por los dispositivos y puedan
escalar a través de diferentes resoluciones.

 BMP, son imágenes de mapas de bits. Se pueden encontrar con extensión

.bmp y .dib

 BMP ICO y PNG ICO, formato para representar iconos en el sistema

operativo Windows. Los iconos suelen contener diferentes tamaños y
densidad de pixels. De esta forma pueden ser escalados

Formularios

Los formularios en HTML sirven al propósito de recolectar información

proporcionada por los visitantes del sitio, la cual es luego enviada nuevamente al
servidor. Para su correcto funcionamiento es importante que el formulario provisto
en HTML sea acompañado de un código del lado servidor, al que denominaremos
"agente procesador", que se encargará de recibir y procesar la información como el
autor vea conveniente. Este procesamiento puede consistir en, por ejemplo, el
almacenamiento de la información o su envío mediante correo electrónico.

Un formulario (form) es básicamente un contenedor para controles. Cada control en

un formulario está pensado para recolectar información ingresada por los usuarios,
en formas que pueden ir desde líneas de texto a subida de archivos, pasando por
opciones, fechas, contraseñas y mucho más. Una vez que los usuarios han
rellenado el formulario con los datos, pueden enviarlo de regreso al servidor para
que el agente procesador administre la información recolectada.

Lenguajes de

20
Pero este modelo no dice nada acerca de cómo y dónde será procesado el
formulario. Tal información puede ser especificada con atributos tales como: action,
que indica la ubicación del agente procesador; method que determina el método
utilizado para empaquetar el formulario antes de ser enviado al agente procesador;
y target, que indica dónde serán mostrados los resultados del proceso. Aquí
hablaremos únicamente del atributo action, dejando los otros dos para ser
analizados en la referencia del elemento form.

El siguiente formulario ha sido declarado con el URI de un agente procesador que

he preparado para propósitos de aprendizaje, en el atributo action. Puedes ver al
agente procesador tomando el control del proceso en una nueva ventana cuando
envías el formulario.

Campos de texto de una sola línea

Un campo de texto de una sola línea, que permite el ingreso de una única línea de
texto, es uno de los tantos controles que se declaran con el elemento input. En este
caso, el elemento input debe tener el valor "text" en su atributo type.

NOTA: Cuando la tecla ENTER es presionada en este tipo de campos, los

navegadores habitualmente envían el formulario que los contiene, en lugar de pasar
a una nueva línea del control. Esto se debe a la naturaleza del control que solo
acepta una línea de texto.

Con sólo esto, el control ya es visible, pero se necesita de un nombre (en el

atributo name) si existe la intención de recolectar la información ingresada por el
21
usuario en este control. El valor del atributo name identificará, en el lado servidor, a
los datos ingresados por el usuario en el control. El siguiente ejemplo muestra una
implementación básica de un control de texto de una sola línea. Adicionalmente,
estaremos encerrando al control y su etiqueta en un párrafo, ya que puede
considerarse a estos dos como una unidad con una idea que los separa del resto.

Campo de texto multilínea

Este tipo de control es muy similar al anterior, pero tiene la particularidad de permitir
el ingreso de múltiples líneas de texto. Un campo de texto multilínea es
habitualmente representado como una caja, lo suficientemente alta como para
contener más de una línea de texto a la vez. Esta representación, usualmente
provee un mecanismo de desplazamiento para permitir a los usuarios ver todo el
texto ingresado, especialmente cuando es lo suficientemente largo como para
exceder los límites de la caja.

Un campo de texto multilínea se inserta con el elemento “textarea”. Como

anteriormente, el atributo name provee un nombre para el control que ayudará al
agente procesador a identificar la información enviada por el usuario.

22
En el siguiente ejemplo mejoraremos el formulario anterior para permitir al usuario
ingresar ambos tipos de
cadenas de texto (de
una sola línea y
multilínea). En el
ejemplo propuesto,
cada control se adapta
mejor al tipo de
información que debe
recolectar.

Controles de opción

Estos controles permiten a los usuarios seleccionar una o más opciones de una lista
de valores predefinidos. Los controles de opción pueden ser presentados con
diferentes estilos y mecanismos de interacción con el usuario, dependiendo
principalmente del elemento utilizado. Una lista de opciones puede declararse de
tres formas: con casillas de verificación, con botones de opción y con listas.

Casillas de verificación

Una casilla de verificación es un tipo particular de opción que puede ser

seleccionada o deseleccionada mediante la interacción del usuario. Esto permite a
los autores recolectar información como preferencias, aceptación de términos y
condiciones, categorías, o cualquier otra cosa que pueda ser respondida mediante
"sí" y "no". Una cosa que este control tiene de particular es que, aun cuando puede
ser declarado como parte de un grupo temático, cada casilla es independiente de
todas las demás en el formulario.

23
Las casillas de verificación son representadas por el elemento input, cuando tiene
el valor "checkbox" en el atributo type. Aquí el valor del atributo name también juega
un rol, identificando a la opción del lado servidor. En el siguiente ejemplo, unas
cuantas casillas de verificación han sido declaradas como parte de un grupo
temático de opciones. Recuerda que esta agrupación está hecha únicamente por
temática y posición; la
selección de las casillas
continúa siendo
independiente.

Botones de opción

Mientras que las casillas de verificación son independientes y pueden ser

declaradas por sí mismas, los botones de opción necesitan ser agrupados a fin de
tener sentido. Los grupos de botones de opción tienen una particularidad que juega
un rol importante en su conducta: sólo una opción puede ser seleccionada por vez
en todo el grupo. Esto significa, entre otras cosas, que cuando seleccionas una
opción, la opción que estaba anteriormente seleccionada se deselecciona.

Un botón de opción también se declara con el elemento input, pero con el valor
"radio" en su atributo type. Aquí las cosas se vuelven un poco diferentes a cómo
eran con las casillas de verificación, debido a que el valor del atributo name necesita
ser compartido por todas las opciones en un mismo grupo. En otras palabras, este
es el mecanismo que se requiere utilizar para crear un grupo de botones de opción.

Pero entonces, ¿dónde está el valor que le dice al agente procesador qué opción
ha sido seleccionada? La respuesta a esta pregunta está en el atributo value. Ya

24
que el propósito de este atributo es identificar a las opciones de un grupo, su valor
debe ser diferente para cada opción.

En el siguiente ejemplo un grupo de botones de opción ha sido declarado para

conformar un grupo donde sólo una opción puede ser elegida, algo que tiene mucho
sentido en este contexto.
Para este propósito,
todos los botones
comparten el mismo
nombre (name) y tienen,
cada uno, un valor
diferente (value).

Listas

Una lista de opciones es un control que puede asemejarse, en cuanto a su

mecánica, a cada uno de los controles analizados previamente, dependiendo de la
presencia del atributo booleano multiple. Este atributo cambia radicalmente la
conducta de una lista, haciendo posible la selección de una sola opción a la vez o
de muchas.

La estructura de una lista está compuesta, principalmente, por dos

elementos: select, que actúa como contenedor para las opciones; y option, que
representa una de las muchas opciones que el control puede presentar.

Cuando el atributo multiple se encuentra ausente, un control de lista se comporta

como un grupo de botones de opción, donde sólo una opción puede ser
seleccionada por vez. El próximo ejemplo refleja esta conducta, lo que encaja
perfectamente con el propósito del campo.

25
NOTA: Si el atributo size tiene un valor de "1" y el atributo multiple se encuentra
ausente, los navegadores habitualmente muestran a este control como una lista
desplegable. En cualquier otro caso, el control toma la forma de una caja
desplazable.

Cuando el atributo “multiple” está presente, la lista se comporta como un conjunto

de casillas de verificación, donde no solamente una sino muchas opciones pueden
ser seleccionadas al mismo tiempo. Esta configuración requiere que un par de
corchetes sea anexado al valor que el autor elija para el atributo “name”. Si este
requerimiento no se cumplimenta, los agentes procesadores sólo recibirán la
primera opción seleccionada.

El siguiente ejemplo muestra una lista de opciones que pueden ser seleccionadas
sin restricciones. También hace uso del atributo “value” en las opciones, para evitar
el uso de valores innecesariamente largos durante el procesamiento de datos en el
lado servidor.

26
Lenguajes de presentación de documentos web
Este lenguaje se encarga de definir un conjunto de etiquetas y características de
atributos de cada uno de los elementos de los lenguajes, de igual forma establece
reglas para crear documentos, comúnmente en lenguaje HTML.

Éstos son importantes porque de esta forma sabremos la forma de dar a conocer
los medios que deseamos, sea página web, aplicación, software o cualquier otro
elemento. La correcta aplicación de esto se da conociendo la sintaxis y las palabras
reservadas de la misma que pueden ser diferentes para una misma acción, pero
saber diferenciarlas darán los mejores resultados pues algunas acciones, aunque
iguales pueden presentar mejor resultados que otras. Los lenguajes de
presentación es el eslabón final de los sistemas en capas. Son fundamentales
porque es en este nivel donde la aplicación tendrá éxito en capturar al usuario.
Existen casos de sistemas perfectamente programados en su lógica de negocios,
pero al carecer de una capa de presentación adecuada, éstos no son usados por

27
los usuarios. Con los lenguajes de presentación podemos desarrollar interfaces
útiles y sencillas capaces con nivel de usabilidad que hagan que el usuario del
sistema vuelva una y otra vez.

Actualmente los lenguajes de presentación y su sintaxis son utilizados para

desarrollar contenidos interactivos para la web, dependiendo del medio y del
contenido que se desea desarrollar, la sintaxis puede cambiar en pequeñas
instrucciones, pues los medios de renderizado y/o compilación cambian. Los
lenguajes de presentación tienen un conjunto de etiquetas, con atributos
configurables, que permiten cambiar la forma en que se presentan los elementos de
texto y visuales dentro del documento. Además de esto nos dan un grupo de reglas
sintácticas para la construcción de un documento HTML.

Funcionamiento

Funciona por medio de reglas específicas las cuales presentan un soporte

adecuado para la correcta interpretación y estructuración de un documento en el
que se exprese la información necesaria solicitada.

En este lenguaje se expresan los atributos de los elementos de tal forma que se
definen los diseños y contenidos, por ejemplo;

 Márgenes
 Tipo de títulos
 Color de fondo
 Tipo de letra

Cada etiqueta y sus atributos tienen un significado visual dentro el documento

HTML. Esto es que modifican la presentación de texto, imágenes y demás
elementos comprendidos dentro del documento.

Actualmente en el mundo de la web debido a la evolución del mundo electrónico y

de comunicación hacen falta lenguajes de presentación con la finalidad de señalar

28
elementos, éstos funcionan en estructuras de programación como los navegadores
web, la importancia de los lenguajes es para que los elementos web se muestren
correctamente, los lenguajes más utilizados son;

 XHTML para el marcado

 CSS para la presentación

Es importante conocer lo básico de los diferentes tipos de sintaxis, pues eso

marcará la diferencia en el contenido y se podrá utilizar con los distintos
complementos que se ofrecen gratuitamente por parte de los distribuidores de
servicios técnicos, los navegadores web o los desarrolladores de sistemas, por
ejemplo, con librerías de Java script, como son jQuery o Bootstrap.

Sintaxis

Cuando se habla de la sintaxis de un lenguaje se trata de un elemento que se le

conoce como etiqueta, la cual alberga instrucciones específicas del lenguaje de
programación, estas señalizaciones se determinan encapsulando las palabras
reservadas entre un símbolo de mayor y uno de menor que se ubican al principio y
al final de la palabra respectivamente.

Las etiquetas funcionan para instrucciones como;

 Letras cursivas, negritas, subrayadas

 Alineación del texto
 Salto de línea
 Salto de párrafo
 Inserción de nombre de página (titulo)

29
  Inicio y final del cuerpo del documento

Selectores.
Existe una estructura con la que debes cumplir para usar un selector y está
compuesta por el selector seguido del conjunto de declaraciones encerradas por
llaves ("{}"). El siguiente ejemplo, en el cual espacios y quiebres de línea han
sido agregados para mejorar la legibilidad, refleja esta estructura.

Existe un amplio conjunto de selectores disponibles, lo que se traduce en una

flexibilidad excepcional para la manipulación de propiedades. En las secciones
siguientes, veremos algunos de los selectores más básicos, ya que éstos
presentarán las ideas sobre las cuales otros selectores se constituirá

El selector universal

El selector universal se corresponde con todos los elementos en el documento. Éste

es como una especie de comodín que tiene más sentido al ser usado en
combinaciones. El siguiente código establece un par de propiedades para todos los
elementos en el documento:

30
Selectores de tipo

El selector de tipo se corresponde con todos los elementos en el documento que

tienen el tipo especificado. Con este selector puedes aplicar declaraciones a, por
ejemplo, todos los párrafos (elementos p), todos los ítems de listas (elemento li) o
todos los vínculos (elementos a) de un documento. El siguiente ejemplo provee
declaraciones para todas las listas ordenadas (elementos ol) del documento.

Selectores de id

El selector de ID se corresponde con todos los elementos que tienen el valor

especificado en su atributo id. Como, por definición, los valores de id deben ser
únicos, este selector puede afectar sólo a un elemento en el documento. En su
declaración, el ID especificado debe estar precedido por el signo numeral ("#").

El siguiente ejemplo muestra un conjunto de declaraciones que están siendo

aplicadas a un elemento que tiene el valor "titulo1" en el atributo id.

31
Las declaraciones anteriores afectarían a un elemento como el siguiente.

Selectores de clase

Una clase es un concepto introducido por CSS con el propósito de agrupar

declaraciones y aplicarlas a un conjunto personalizado de elementos,
independientemente de su tipo o naturaleza. Desde otro punto de vista, una clase
es una o más declaraciones CSS, agrupadas bajo un nombre que los elementos
pueden utilizar para acceder a sus definiciones y ser afectados por ellas.

Dicho esto, un selector de clase aplica un conjunto de declaraciones a todos los

elementos que tienen el nombre de clase especificado en su atributo “class”. En su
construcción, un punto (".") debe preceder al nombre de la clase. El siguiente
ejemplo muestra un conjunto de declaraciones para la clase llamada "importante".

Y estas declaraciones afectarían a elementos como los siguientes.

Selectores avanzados

CSS permite realizar combinaciones con los cuatro selectores básicos descriptos
arriba, haciendo referencia a las relaciones entre padres, hijos, hermanos,
descendientes y más. Con algunas de estas herramientas podrías, por ejemplo,
aplicar declaraciones a todos los párrafos que son hijos directos del cuerpo (body).
Además, provee otros selectores basados en la composición de los atributos o los

32
estados que un elemento presenta, permitiendo a los autores aplicar declaraciones
a, por ejemplo, todos los elementos input que son de tipo "radio" (atributo type).

A pesar de que algunos de los más nuevos son pobremente soportados, estos
selectores avanzados son extremadamente útiles en el desarrollo de sitios web
complejos. Sin embargo, no serán tratados en este tutorial debido a su alcance.
Esta sección es meramente informativa.

Modelo de caja.
El modelo de cajas o “box model” es la característica más importante del lenguaje
de hojas de estilos CSS, condiciona el diseño de todas las páginas web. Hace que
todos los elementos de las páginas se representen mediante cajas rectangulares,
se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea
una nueva caja rectangular que encierra los contenidos de ese elemento.

Referencias:
https://programacionweb1.wordpress.com/modelo-de-caja/

https://www.htmlquick.com/es/tutorials.html

https://www.htmlquick.com/es/tutorials/links-in-html/2.html#the-link-element

33
Conclusión

34