2.

1 introducción

¿Qué es HTML?

es un lenguaje de programación que se utiliza para el desarrollo de páginas de

Internet. Se trata de la siglas que corresponden a Hipertexto Markup Language, es
decir, Lenguaje de Marcas de Hipertexto
¿Qué es XML?

Se trata de un metalenguaje (un lenguaje que se utiliza para decir algo acerca de otro)
extensible de etiquetas que fue desarrollado por el Word Wide Web Consortium (W3C), una
sociedad mercantil internacional que elabora recomendaciones para la World Wide Web.
¿Qué es CSS?

es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado

(por ejemplo, HTML). Así, a los elementos de la página web creados con HTML se les dará la
apariencia que se desee utilizando CSS: colores, espacios entre elementos, tipos de letra, ...
separando de esta forma la estructura de la presentación.
 2.2 Estructura global de un documento web.

La estructura de un documento nos permitirá conocer el inicio y el final del mismo,

sin dejar a un lado los contenidos, los tamaños de la hoja y el margen con el que
contará y se divide en zonas principales que son;

 Cabeza
 Titulo
 Cuerpo
Cabecera

Es la primera parte que ves de un sitio web, El header (en español, encabezado
o Cabecera) está generalmente en la parte superior del página web. Generalmente
está conformado por varios elementos como el logo de la empresa, el nombre, datos
de contacto como teléfono e email, e iconos de redes sociales.
 Titulo

Actualmente, el título de la página web es uno de los factores más importantes para el
posicionamiento en Internet. cuando un usuario de Internet utiliza un buscador como Google,
introduce una o varias palabras de búsqueda, por ejemplo “viajes a Grecia”. El buscador
realiza una búsqueda en su base de datos para presentar en primer lugar las páginas que
considera que presentan un mayor número de coincidencias con el criterio de búsqueda.
 Cuerpo

El cuerpo es la parte de la página web donde se presenta al usuario toda la

información referente a los contenidos de la página. El cuerpo de la página es
la parte de la interfaz web que presenta a los usuarios información específica
sobre un tema concreto.
2.3 Elementos Básicos

Los elementos básicos en todo diseño web son los siguientes.

 Texto
 Vínculos
 Listas
 Tablas
 Objetos
 Imágenes
 Aplicaciones
Texto

La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a
ser más del 90% del código de la página, Una de las etiquetas más utilizadas de HTML es la
etiqueta <p>, que permite definir los párrafos que forman el texto de una página. Para delimitar
el texto de un párrafo, se encierra ese texto con la etiqueta <p></p>.
 Vínculos

La vinculación de una página web con otras que le son complementarias es uno de los
aspectos importantes que los motores de búsqueda ponderan.
Lo que representa una página dentro de la comunidad de Internet es más relevante de lo
que representa por si sola. Una característica que no se suele tener en cuenta en los
enlaces es que están formados por dos
extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta
hacia otro
recurso.
Listas

El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan
simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas,
de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras)
formando árboles más o menos complejos. Todos los tipos siguen el mismo formato:

<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
Tablas

Las tablas sirven para organizar datos e imágenes en un archivo HTML. Consisten de tres elementos
básicos: filas, columnas y celdas, las tablas más sencillas de HTML se definen con tres etiquetas: <table>
para crear la tabla, <tr> para crear cada fila y <td> para crear cada columna.

A continuación se muestra el código HTML de una tabla sencilla:

<table>
<tr>
<td><strong>Curso</strong></td>
<td><strong>Horas</strong></td>
<td><strong>Horario</strong></td>
</tr>
 Objetos

Este elemento se usa para insertar y posicionar objetos Web en las páginas. Este término
describe combinaciones de código y secuencias de comandos que ofrecen diversas
funcionalidades. Así, la herramienta puede usarse para insertar un botón de PayPal para
poder vender artículos a través del sitio. El procedimiento requiere que se obtenga el código
del proveedor y se lo pegue dentro del elemento Objeto Web.
 Imágenes

Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo
texto o, por que no, por cuestiones estéticas, es prácticamente imposible (y poco
aconsejable) evitar colocar alguna que otra imagen en nuestras páginas. Al emplear las
imágenes debemos guiarnos por unas cuantas reglas básicas:

 Imágenes sirvan para algo

 El usuario tenga un buena experiencia
 Aplicaciones

Las aplicaciones web son un tipo de software que se codifica en un lenguaje

soportado por los navegadores web y cuya ejecución es llevada a cabo por
el navegador en Internet o de una intranet (de ahí que reciban el nombre de
App web).
2.4 Formularios.

Un formulario web es un objeto o utilidad HTML que se utiliza para que los usuarios
puedan completar cuestionarios o enviar datos a través de una página web. Los
formularios web posibilitan la interacción entre los usuarios y los administradores o
propietarios de los sitios web. La información de los formularios llega al servidor y puede
ser procesada por alguna aplicación o enviada directamente por e-mail a una dirección
específica.
Ejemplos

 Formulario de registro de incidencias laborales

Si en tu empresa han habido incidencias de personal o en la nómina, así como accidentes laborales, este
formulario es la mejor forma de ayudar a los empleados. Recopilar datos sobre los acontecimientos que
hayan podido suceder y establecer un modo organizado de operar frente a futuros incidentes. La mejor
forma de conseguirlo radica en asignar acciones específicas a cada grupo. Esto ayudará a los distintos
equipos de trabajo para que puedan tomar decisiones más acertadas.
 Formulario de evaluación del desempeño

La evaluación del desempeño ayuda a comprobar si se han cumplido los objetivos

propuestos por la empresa en un intervalo de tiempo. Esta herramienta permite medir
ciertos parámetros como el rendimiento de un empleado, la integración en su grupo de
trabajo, así como las conductas que ha adoptado en este periodo. El formulario permitirá
elaborar pruebas de desempeño para mejorar la actitud de los empleados y su forma de
trabajar.
 Formulario online de solicitud de vacaciones

Las vacaciones son una buena forma de dar descanso y motivar al personal. No todo va a
ser trabajo. En ocasiones se garantiza un buen rendimiento de los empleados si se
encuentran en plena forma. Con este formulario se anima a los trabajadores a tomar
tiempo libre, conocer sus preocupaciones y considerar sus peticiones.
2.5 Lenguajes de presentación en documentos web.

Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos y que

ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un
número de reglas sintácticas para poder crear documentos. Uno de los lenguajes más
comunes para presentar información web es HTML.
¿El lenguaje de presentación es aquel?

 que indica el formato del texto. Este tipo de marcado es útil para maquetar la

presentación de un documento para su lectura, pero resulta insuficiente para el

procesamiento automático de la información.

 El que provoca que el marcado de presentación resulta más fácil de elaborar, sobre
todo para cantidades pequeñas de información.
2.6 Selectores

Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus
propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas
usadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que

permiten un juego muy amplio de selecciones dentro de la página.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos más
complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo
provecho de las CSS.

Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de
Estilo, pero los selectores que se pueden definir con estos programas son sólo los más
elementales. La complejidad que pueden alcanzar los selectores contextuales escapan a las
posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus
propios recursos.
 Tipos de selectores

 Selector universal

El selector universal sirve para seleccionar, con ayuda de un joker (el carácter *) cada elemento
del árbol del documento y vincularlo con una instrucciones determinada. Una instrucción muy
típica es la siguiente:
*{
margin: 0;
padding: 0;
}
 Selector de elemento o de tipo

los selectores del tipo más sencillo, referidos siempre a un determinado elemento HTML.
La referencia se indica mediante la etiqueta, por ejemplo:

h1 {
color: #000033;
}
 Selectores de clase

nos encontramos en una situación en que algunos de los títulos <h2> no tienen que ir en
azul sino en rojo y negrita –como excepción. Para situarse así, CSS nos ofrece el selector
de clase.
En primer lugar, asigne en el código HTML del título un atributo de clase propio (class=”..”).
<h2 class=”rojo-negrita”>Título rojo negrita</h2>
 Selectores avanzados

En los grandes proyectos Web, con el tiempo se acaban acumulando una gran
cantidad de formatos específicos para los diversos documentos. El resultado, a
menudo, es un código fuente plagado de clases de todo tipo para cada página, por lo
que al hacer modificaciones, o ajustes, es fácil pasar por alto algún detalle. Para
situaciones así lo más práctico es utilizar los selectores contextuales en las
anotaciones de estilo.
 2.7 Modelo de caja

El modelo de cajas es la base del diseño web cada elemento se representa como una caja
rectangular, con su contenido, padding (espacio interior), borde y margen construidos uno
sobre otro como las capas de una cebolla. El navegador, para interpretar el diseño de una
página, procesa los estilos que se aplicarán a cada caja, el tamaño de las capas de la
cebolla y la ubicación de unas cajas con respecto a otras.
Propiedades de la caja

Cualquier elemento contenido en un documento tiene la estructura de una caja rectangular

dentro del formato del documento, el tamaño y las capas que serán retocadas usando las
propiedades CSS. Las propiedades importantes son:
Las partes que componen cada caja y su orden de visualización desde el punto de
vista del usuario son las siguientes:
 Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una
imagen, el texto de una lista de elementos, etc.)

 Relleno (padding): espacio libre opcional existente entre el contenido y el borde.

 Borde (border): línea que encierra completamente el contenido y su relleno.

 Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio
de relleno.

 Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de
relleno.

 Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.