Cómo se escribe una página web

Las paginas web son documentos escritos con un lenguaje de marcado o etiquetado llamado
HTML. A continuación, podemos ver un ejemplo de una estructura básica de una pagina web en
lenguaje HTML

Figura 1.- Esqueleto de una página web.

Una página web se puede escribir con cualquier editor de textos (por ejemplo, el bloc de notas de
Windows) ya que no hace falta un programa sofisticado para poder realizar una por otro lado el
hipertexto es una característica principal que define a la página web.

Figura 2.- Diferencia de desarrollo y diseño.

El diseño web tiene que ver con los elementos gráficos de la página como la tipografía, los
colores, los tamaños y las proporciones. El diseño se suele realizar con una herramienta grafica
como Adobe Photoshop o GIMP y proporciona el marco la presentación o el comportamiento de la
página. El diseño de la pagina no suele contener código, el producto final del diseño web suele ser
un archivo png (una imagen).

El desarrollo web se refiere a la programación necesaria para crear una aplicación o sitio web, se
suele dividir en dos partes:
 Parte cliente
 Parte servidor
Que suelen funcionar de manera independiente y emplean tecnologías distintas.
Parte cliente

Para poder desarrollar esta parte se necesitan:

 HTML y CSS para la creación de las páginas web.

 JavaScript y DOM para la programación de la parte cliente.

Parte Servidor

Para poder desarrollar esta parte se necesitan:

 Lenguajes de Script (PHP, ASP, ASP.NET, JSP, PEARL y COLDFUSION) para acceder
a la base de datos
 Diseño y desarrollo de bases de datos
 Seguridad

Arquitecto de información

 Identifica los objetivos del proyecto

 Identifica las necesidades de los usuarios
 Especifica las funcionalidades y requerimientos de la aplicación web
 Define y diseña los sistemas de navegación, organización y búsqueda
 Prototipa la aplicación web

Planos
Los planos son diagramas de organización y funcionamiento y se suelen denominar Blueprint, que
significa diagramas de contenido o flujo o mapa web.

Maquetas
Son diagramas de presentación cuyo objetivo es crear referencia visual de la estructura,
organización e interacción a nivel de pagina donde hay prototipos de alta fidelidad o baja fidelidad.

Los prototipos de baja fidelidad que son dibujos estáticos como podemos ver en la siguiente figura.

Figura 3.- Prototipo de baja fidelidad.

Otro ejemplo de prototipo de baja fidelidad se visualiza en la figura 4.

Figura 4.- Prototipo de baja fidelidad.

Los prototipos de alta fidelidad podrían decirse que son borradores de la pagina en el lenguaje
HTML, ejemplo de esto se observa en la figura 5.

Figura 4.- Prototipo de alta fidelidad.

En la siguiente imagen podemos las áreas principales en las que debemos concentrarnos al hacer
un prototipo de alta fidelidad.

Figura 5.- Áreas de un prototipo de alta fidelidad.

En la siguiente figura podemos ver un prototipo de alta fidelidad y después la pagina web que se
desarrolló a partir del prototipo.

Figura 6.- Prototipo de alta fidelidad.

La importancia de prototipar una aplicación web antes de comenzar el diseño gráfico y su
implementación es vital ya que:

1. El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño

visual.
2. El cliente ve y comprende cómo será la aplicación, mucho mejor que si se ofrece descrita
en un documento.
3. Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del
equipo.
4. Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad.
5. Es un complemento de gran valor en el análisis.
6. El prototipo se modifica con facilidad y rapidez.
7. Se evitan modificaciones posteriores mucho mas costosas cuando la aplicación ya se está
implementado.
8. Se reducen costes y tiempos.
9. Permite realiza pruebas de usabilidad, como test con usuarios, en etapas tempranas del
proyecto.
10. Se detectan y solucionan los problemas antes de comenzar su implementación.
11. El resultado son aplicación web más fáciles de entender, de usar y que se ajustan mejor a
las necesidades de los usuarios.

Consejos para realizar un buen prototipado

 Sencillez y calidad.
 Hazlo en blanco y negro.
 Representa los tamaños y proporciones de los bloques de contenido.
 Ten en cuenta las pautas de accesibilidad y usabilidad.
 Sobre todo, diseña para los usuarios.

Conceptos de HTML
La programación de HTML esta conformado por elementos los cuales a su vez están conformados
por etiquetas los cuales tienen la siguiente estructura:

Figura 5.- Estructura de un elemento.

Etiquetas

La programación HTML esta conformado de etiquetas las cuales nos ayudan a desarrollar la
página web por ejemplo introducir texto, resaltar palabras en un texto, para poner títulos, las cuales
se presentan a continuación.

Etiqueta Función Descripción

Solo puede existir una y toda
<html> la pagina web debe escribirse
Etiqueta principal(raíz)
entre la etiqueta inicial y final
de html.
Normalmente lo que aparece
representado en la cabecera
no aparece cuando se
visualiza e el navegador web,
<head> Cabecera, metadatos sino que se emplea para
definir los metadatos,
información sobre la pagina o
instrucciones sobre como
procesar la página web.
Dentro de la cabecera se
puede utilizar esta etiqueta
que es obligatoria y solo
<title> Título de pagina
puede existir una y se emplea
para definir el titulo de la
pagina
Lo que se escribe en el
cuerpo aparece representado
<body> Cuerpo, contenido visible en la pagina web cuando se
visualiza en un navegador
web
Puede haber etiquetas desde
h1, h2, h3, etc. Las cuales se
usan para definir los títulos de
la pagina y estas etiquetas se
<h1>, …, <h6> Encabezados o títulos
dividen por niveles de
importancia siendo h1 el nivel
mas importante y h6 el menos
importante.
<p> Párrafos de texto Para definir los textos.
Para remarcar palabras o
<strong> Texto destacado
textos.
Para utilizar letra cursiva en
<em> Texto enfatizado
palabras o textos.

Podemos consultar mas etiquetas en:

https://www.w3schools.com/tags/default.asp
Creación de página web
Para la creación de la primer página web, será realizada por medio del bloc de notas que está en
Windows 10.

Figura 5.- Bloc de notas en Windows 10.

Una vez abierto el bloc de notas debemos ingresa la primera etiqueta principal en la cual estará el
contenido de nuestra página web.

Figura 6.- Principal etiqueta de página web.

La siguiente etiqueta que se va a usar ser la cabecera la cual es la que define como se va a
procesar la pagina web, como se va a visualizar, pero normalmente en el <head> no se escribe
nada que aparezca visualmente en la página web.
 Figura 7.- Uso de la etiqueta <head>.
Después de la cabecera se utiliza la etiqueta <title> para indicar el título de la página y recordemos
que se debe cerrar la etiqueta una vez que se utiliza en este caso será </title>.

Figura 8.- Uso de la etiqueta <title>.

La etiqueta que vamos a usar a continuación será la etiqueta <body>, con lo cual todo lo que escribamos
dentro de esta etiqueta, es lo que aparecerá visualmente en la página web. En el <body> podemos emplear
las etiquetas <h1>, <p1>, <em>, <strong>.

Figura 9.- Uso de la etiqueta <body>.

A continuación, se presenta un ejemplo de una pagina web utilizando las etiquetas anteriores tanto
en código en HTML y la representación grafica del navegador. Cabe aclarar que una vez que
terminemos de escribir el código de la pagina tendremos que guardar el archivo en “ Guardar
como” y nombramos el archivo como “nombrexxx.html”

Figura 9.- Código simple de una página web.

Nota: Para saltar de línea cuando se escribe un párrafo simplemente tenemos que poner otra etiqueta
<p>texto</p>, teniendo cuidado de no enumerar las etiquetas ya que si no hará el salto de línea.
A continuación, se presenta como guardar una pagina web y en que formato.

Figura 9.- Como guardar una página web.

Una vez guardado el archivo, simplemente tenemos que abrirlo para lo cual probamente nos pedirá
con que programa queremos abrirlo para lo cual seleccionaremos nuestro navegador y podremos
visualizar nuestra pagina web, como se muestra en la imagen.

Figura 10.-Visualizacion de página web.

Edito de texto(recomendado)
Un editor de texto recomendado para poder editar nuestras páginas web en Windows, seria
Notepad++, el cual podemos descargar gratuitamente.

Figura 11.-Editor de texto para Windows.

Existe una forma de cerrar las etiquetas automáticamente una vez que las escribimos con este
editor de texto, lo cual podemos hacer por medio de un plugin “TextFX”.

Gramática
Las reglas que tenemos que tener en HTML son:

 Las etiquetas siempre tienen que estar cerradas.

 Los documentos tienen que estar bien formados.
 Escribir las etiquetas siempre en minúsculas.
 Los valores de los atributos tienen que llevar siempre comillas dobles o simples.
Ejemplo: <p class=” importante”>.
 La extensión de las páginas web es: .htm, .html
Tipos de listas
HTML posee tres tipos de listas las cuales se muestran en la siguiente tabla con sus respectivas
etiquetas.

Lista no Ordenada Lista Ordenada Lista de Descripción

<ul> <ol> <dl>

 ul=unordered list  ol=ordered list.  dl= description list
 El orden de  El orden de  Se emplea para definir una
aparacion no es aparación es lista de terminos con cero
importante. importante o mas descripciones por
 Cada elemento de  Cada elemento de cada termino.
la lista se define con la lista se define  Cada termino de la lista se
<li>. con <li> define con <dt>.
 li= list item.  Los elementos se  Cada descripcion de un
 Los elementos se indican con termino se define con
indican con números o letras. <dd>.
simbolos(circulos,  Los elementos no se
cuadrados, etc.) indican con simbolos,
numeros o letras, sino con
un aumento del margen
izquierdo.

Ejemplos de código
Lista no ordenada

Figura 12.-Ejemplo de código de lista no ordenada.

Lista Ordenada

Figura 13.-Ejemplo de código de lista ordenada.

Figura 14.-Cambiar orden de numeración.

Figura 15.-Invertir lista ordenada.

 Figura 16.-Invertir lista ordenada con función type.

Lista de descripción

La lista de descripción se usa normalmente para describir un glosario o un diccionario.

Figura 17.-Listado de descripción.

Otros tipos de listas

Dentro de HTML existen otros tipos de listas llamadas “listas anidadas”, que simplemente significa
una lista dentro de otra y se pueden combinar de cualquier forma, la lista que esta dentro de otra
se llama “sublista”. En el siguiente ejemplo podemos una lista no ordenada y una ordenada con
sublistas.
Figura 18.-Lista no ordenada anidada.

Figura 19.-Lista ordenada anidada.

 Figura 19.-Lista ordenada anidada dentro de una lista no ordenada.

Enlaces

Los enlaces son el elemento principal que confieren a la web su carácter de hipertexto, este se
puede definir como un documento digital que se puede leer de forma no secuencial y que este
compuesto de nodos o secciones, de enlaces o hipervínculos y de anclajes.
Nodos: Los nodos son las partes del hipertexto que contienen información accesible para el
usuario.

Enlaces: Son las uniones o vínculos que establecen entre nodos y facilitan la lectura secuencial o
no secuencial por los nodos del documento.

Anclajes: Son los puntos de activación de los enlaces.

Tipos de enlaces

 Enlace intradocumental.
 Enlace extradocumental.

Un hiperenlace puede hacer referencia a un punto determinado de la pagina que lo contiene, a otra
pagina HTML o a otro punto determinado de otra pagina HTML. En los últimos dos casos la pagina
de destino puede residir en el mismo servidor que la pagina que contiene el hiperenlace o en un
servidor distinto.

La forma de definir un hiperenlace se puede usar por medio de etiquetas como se representa en la
siguiente figura. Este hiperenlace aparecerá de manera visual en la pagina web y al pulsar sobre
este, saltaremos al destino de este enlace.
 Figura 20.-Etiqueta de hiperenlace.

Enlace intradocumental: Es un enlace a un punto en el mismo documento un ejemplo visual se

representa en la siguiente figura.

Figura 21.-Ejemplo de enlace intradocumental.

Para indicar el enlace por medio de código seria:

 <a href=””#nombre”>…</a>

Por otro lado, para indicar el destino puede ser como alguno de estos ejemplos:

 <h1 id=”nombre”> </h1>

 <p1 id=”nombre”></p1>

En una pagina web se pueden definir varios enlaces a un mismo destino, pero no se pueden crear
varios destinos con el mismo nombre, este debe ser único. Cabe recordar que en el nombre del
enlace se debe poner # antes del nombre, mientras en el destino no se pone.

Enlace extradocumental: Es un enlace a otro documento, normalmente a otra página web.

 Figura 22.-Ejemplo de enlace extradocumental.

Figura 23.- Referenciar enlace extradocumental.

Nota: Al nombrar un fichero, no debes dejar espacios ni símbolos, solo alfabeto inglés, -, _.

Nota 2: Al nombrar los enlaces cuida no tener rutas físicas a un ordenador ya que al publicar
la pagina web no podrás acceder a ellas o tendrás dificultades para lograrlo.

Nota 3: Un salto de línea en el texto del editor puede hacerse con </ br>.

En la siguiente página podemos ver que un espacio en blanco en el código va a ser solo uno
independientemente del número de espacios.

Figura 24.- Todos son el mismo espacio en blanco.

Referencias de Caracteres
Referencias con nombre

Existen referencias de caracteres que no podemos expresar en HMTL, con lo cual tenemos que
usar la siguiente nomenclatura para representar caracteres especiales:

&nombre;

En la siguiente pagina podemos ver esos caracteres especiales junto con su nombre:
 https://www.htmlquick.com/es/reference/character-entity-reference.html

Referencias con numero decimal

Existen referencias de caracteres que no podemos expresar en HMTL, con lo cual tenemos que
usar la siguiente nomenclatura para representar caracteres especiales:

&#numero;

En la siguiente página podemos ver esos caracteres especiales junto con su nombre:

https://www.htmlquick.com/es/reference/character-entity-reference.html

Referencias con numero hexadecimal

Existen referencias de caracteres que no podemos expresar en HMTL, con lo cual tenemos que
usar la siguiente nomenclatura para representar caracteres especiales:

&#xnumero; o &#XNUMERO;

En la siguiente página podemos ver esos caracteres especiales junto con su nombre:

https://www.htmlquick.com/es/reference/character-entity-reference.html

Otras formas de referencia

Existen otras formas de referenciar palabras acentuadas que las que vimos anteriormente las
cuales son de la siguiente forma:

Figura 24.- Palabras acentuadas en HTML.