Página 1 de 15

DESARROLLO WEB

Módulo de Formación: Administración y Gestión de Bases de datos

Unidad de aprendizaje 2: Probar la solución desarrollada de acuerdo con las especificaciones
técnicas y funcionales.

Resultado de Aprendizaje1 Comprobar el sistema de información de acuerdo a las especificaciones

técnicas

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

CONTENIDO

1. INTRODUCCION 2
2. Página web 2
2.1. Tipos de Páginas Web 2
2.1.1 Página Web Estática: 2
2.1.2 Página Web Dinámica: 2

3. HTML (Hyper Text Markup Language) 3

4. Un editor de texto para diseñar nuestra página web 3
5. Estructura básica de una página web 5
6. Etiquetas básicas de HTML 6
5.1. Los encabezados (Headings) 6
5.2. Etiquetas de formato de texto 7
5.3. Etiquetas de Párrafos, fin de línea y comentarios 8

7. Separadores. Etiqueta hr 9
8. Insertar imágenes en una página. 10
9. Los Enlaces (Links) 11
5. Evaluación 13
6. Taller 13
7. Taller de profundización 14

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 2 de 15
DESARROLLO WEB

1. INTRODUCCION

El diseño web es una actividad que consiste en la planificación, diseño e implementación

de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere
tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la
información y la interacción de medios como el audio, texto, imagen, enlaces y vídeos.

La importancia y el alcance mundial que Internet tiene hoy en día en nuestra sociedad
hace imprescindible que se garantice su uso de forma universal, de ahí la importancia
que adquiere la accesibilidad a la hora de diseñar una página o sitio web.

El objetivo de esta guía es exponer las posibilidades que nos ofrece HTML5 a la hora de
crear páginas accesibles para todos los usuarios, independientemente de sus problemas
visuales, auditivos, sensoriales o de cualquier otro tipo.

2. Página web

Una página web es un documento o información electrónica adaptada para la World Wide
Web que generalmente forma parte de un sitio web. Su principal característica son los
hipervínculos de una página, siendo esto el fundamento de la WWW.

2.1. Tipos de Páginas Web

Existen varias formas de clasificar las páginas web. Yo recomiendo estos dos tipos de
clasificación que pienso le pueden servir para tener una idea clara de lo que puede
obtener con el diseño de una página web.

Según la forma en la que la página se sirve para ser enviada a la computadora del
visitante, pueden ser de dos tipos:

2.1.1 Página Web Estática:

Es aquella que está compuesta de una serie de archivos que contienen el código HTML
que constituye la página en sí y que permiten mostrar los textos, imágenes, videos, etc
que conforman el contenido de la página.

2.1.2 Página Web Dinámica:

El término dinámico no se refiere a movimiento como muchos pueden pensar. El

término dinámico hace referencia a que la página web se construye al momento en que
la página es visitada por el usuario. Es decir que el contenido de la página web no es
fijo sino que se construye de acuerdo a la interacción que el usuario hace con la
página. Son páginas que están desarrolladas en algún lenguaje de programación de
servidor como: PHP, ASP, ColdFusion, Ruby, etc.

Ante de adéntranos a la programación con php, es importante que veamos algunas

etiquetas HTML.

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 3 de 15
DESARROLLO WEB

3. HTML (Hyper Text Markup Language)

El HTML (Hyper Text Markup Language) es el lenguaje con el que se diseña una
página web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir
texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio
y el fin de cada elemento del documento. Los documentos HTML deben tener la
extensión html o htm, para que puedan ser visualizados en los navegadores.

4. Editor de Texto para Diseñar Páginas web

Existen diversos editores de texto en el que podemos diseñar una página web, como por
ejemplo, el Bloc de Notas, Notepad ++, EditPadLite, etc. Para nuestro caso, estaremos
utilizando EditPad Lite o Notepad, el cual son editores de texto que presentan una gran
cantidad de funcionalidades que le permiten editar los archivos de texto en una forma
muy conveniente para todos.

NotePad: Descargar: http://notepad-plus-plus.org/download/v6.5.3.html

EditPadLite: Descargar: http://download.jgsoft.com/editpad/es/SetupEditPadLiteES.exe

Ambos editores son muy bueno.

Para empezar a trabajar con nuestro servidor local debemos iniciar a WampServer, para
ello debemos realizar los siguientes pasos:

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 4 de 15
DESARROLLO WEB

Activamos el menú Inicio / Todos los programas / Carpeta WampServer / Clic en la

opción start WampServer / Clic en el icono de WampServer / Elegimos la opción
localhost.

Si observamos la siguiente página, significa que nuestro servidor está funcionando

correctamente.

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 5 de 15
DESARROLLO WEB
Es importante que sepan que la ruta donde se guardaran los archivos que realicemos en
php o html es la siguiente: C:\wamp\www\.

En esta ruta, crearemos una sub carpeta con el nombre de Actividades (Lugar para el sitio
web) donde guardaremos los archivos html o php (C:\wamp\www\Actividades).

5. Estructura básica de una página web

Las páginas web mantienen una estructura muy sencilla que debemos respetar para que
los navegadores sean capaces de presentarlas.

De este modo cualquier página web incluirá al menos las siguientes etiquetas:

 <html> y </html> se colocan al principio y fin del documento, indican donde

comienza y finaliza la página.
 <head> y </head> define un espacio en el que incluiremos contenidos que no
se van a mostrar directamente en el navegador, sino que sirven para describir
determinados aspectos del documento, como su título, autor, los estilos que
emplearemos, pequeñas funciones que se deben realizar, etc.
 <body></body> en su interior se incluirá la información que se muestra en el
navegador, es el contenido real de la página, estructurado mediante las diferentes
etiquetas.
 DOCTYPE: Define el tipo de documento. <DOCTYPE!>, no es una etiqueta, esto
es una instrucción para el navegador que declara la versión de html que se está
usando.
 html lang="es": define el lenguaje
 meta charset : define el país

Con todo lo anterior, la estructura de esta página con breve contenido, quedaría de la
siguiente manera:

<!DOCTYPE html >

<html lang="es">
<head >
<meta charset="utf-8"/>
<title>mi página web</title>
</head >
<body>
Este es el cuerpo de la página web.
</body>
</html>

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 6 de 15
DESARROLLO WEB
6. Etiquetas básicas de HTML

El lenguaje HTML posee una serie de etiquetas que permiten disponer de la estructura de
nuestro sitio web, con el fin de hacerlo más atractivo e interesante para el cibernauta.

5.1. Los encabezados (Headings)

Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio
del nombre de estas etiquetas proviene de la abreviatura de la palabra inglesa heading
que significa encabezado. Hay un número del uno al seis que indica la importancia del
titular siendo el más importante el uno y el menos importante el seis. Veamos un
Ejemplo: Activemos a nuestro Editor de texto, y escribir el siguiente scripts:

<!DOCTYPE html >

<html lang="es">
<head >
<meta charset="utf-8"/>
<title>Los Encabezados</title>
</head >
<body>
<h1>Sistema Solar</h1>
<h2>Planetas</h2>
<h3>Mercurio</h3>
<h3>Venus</h3>
<h3>Tierra</h3>
<h2>Estrellas</h2>
</body>
</html>
 Guardemos el archivo con el nombre de encabezados.html en nuestra ruta de
trabajo (C:\wamp\www\Actividades).
 Clic en el icono de WampServer / Elegimos la opción localhost.

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 7 de 15
DESARROLLO WEB
 Ahora damos un clic en la carpeta Actividades, aparecerán los nombres de los
archivos que hayamos creados. Como se muestra en la siguiente imagen:

 Ahora damos clic sobre el nombre del archivo que se desea ejecutar
(encabezados.html), veremos el resultado que arroja el script que escrito.

5.2. Etiquetas de formato de texto

Son una serie de etiquetas que escribimos en html rodeando la palabra o el texto y que
transforman ese texto en el formato que nosotros le hemos querido dar.
 <b> y </b>: Texto en negrita.
 <i> y </i>: Texto en itálica o cursiva.
 <Font> y </font>: Tipo, tamaño, color de fuente.
 <u> y </u>: Permite subrayado del texto.

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 8 de 15
DESARROLLO WEB
Activaremos nuestro Editor de texto, y escribamos el siguiente scripts:

<!DOCTYPE html >

<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Formtos</title>
</head>
<body>
<b>El sistema solar</b>: es un conjunto formado por el <i>Sol</i> y los
<u>cuerpos celestes</u> que <Font face=”verdana”>orbitan</font> a su
<Font size=+3>alrededor</font>.
</body>
</html>
Ejecutémoslo a través de nuestro navegador, como anteriormente se explicó:

5.3. Etiquetas de Párrafos, fin de línea y comentarios

 <p> y </p>: Para indicarle al navegador que queremos poner ese texto en un
párrafo.
 <br>: Fuerza al navegador a insertar una nueva línea.
 <!-comentarios->: para comentario al script de html, donde el navegador no lo
incluiría al visualizar el contenido de la página web.

Escribamos el siguiente scripts en nuestro editor de texto:

<!DOCTYPE html >

<html lang="es">
<head>
<meta charset="utf-8"/>
<title> Párrafos, línea y Comentarios </title>
</head>
<!-Estas son etiquetas básicas en html ->
El sistema solar:<br> <p align=”left”>Es un conjunto formado por el Sol y los
cuerpos celestes que orbitan a su alrededor. </p>
<p align=”justify”> El Sistema Solar es un conjunto de planetas que giran
alrededor de una estrella (el Sol) que a su vez gira alrededor del centro de la galaxia.
Aproximadamente estamos a unos 33 años luz del centro de esta galaxia. </p>
</body>
</html>

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 9 de 15
DESARROLLO WEB
Ejecutémoslo a través de nuestro navegador, y veremos el siguiente resultado:

7. Separadores. Etiqueta <hr>.

Se utiliza Para separar un texto de otro o un párrafo de otro podemos utilizar una línea
horizontal de un tamaño o un grosor determinado por nosotros.
Escribamos el siguiente scripts en nuestro editor de texto:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Separadores</title>
</head>
<body>
<hr>
<p align=”justify”><h2>El sistema solar. </h2> Es un conjunto formado por el Sol y los cuerpos
celestes que orbitan a su alrededor.</p>
<hr>
<p align=”justify”>
El Sistema Solar es un conjunto de planetas que giran alrededor de una estrella (el Sol) que a su
vez gira alrededor del centro de la galaxia.</p>
Aproximadamente estamos a unos 33 años luz del centro de esta galaxia.
<hr>
</body>
</html>

Ejecutémoslo a través de nuestro navegador, y veremos el siguiente resultado:

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 10 de 15
DESARROLLO WEB

8. Insertar imágenes en una página.

<img>: Servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues
no tiene etiqueta de cierre.
El formato para las imágenes en el World Wide Web son los siguientes:
 Formato GIF
 Formato JPG
 Formato PNG

A la etiqueta <IMG> se le pueden añadir varios atributos para controlar la manera en

que un navegador administra una imagen. Estos atributos son los siguientes:

 width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu

imagen.
 height="x" Junto con el atributo width, el navegador puede preparar el espacio
necesario para tu imagen antes de que se muestre.
 border="x" Para añadir o eliminar un borde, donde la x será un valor numérico.
 align="xxx" Puedes alinear una imagen horizontal y/o verticalmente en una
página usando este atributo.
 alt="descripción de la imagen" El atributo alt te permite describir la imagen para
los navegadores de sólo texto, así como etiquetar la imagen antes de que se
cargue en una página.
 vspace="x" vertical space, controla el espacio de la imagen en las coordenadas
verticales.

Activaremos nuestro Editor de texto, y escriban el siguiente scripts: suponemos que

tenemos el archivo de imagen: sistemasolar.jpg.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title> Imágenes </title>
</head>
<body>
<hr size="5" color=”yellow”>
<h1>El sistema solar:</h1>
<img src="sistemasolar.jpg" align="left" width="200" height="100">
<p align="justify">Es un conjunto formado por el Sol y los cuerpos celestes que orbitan a
su alrededor. </p>
<hr color="red">
<p align="justify"> El Sistema Solar es un conjunto de planetas que giran alrededor de
una estrella (el Sol) que a su vez gira alrededor del centro de la galaxia.
Aproximadamente estamos a unos 33 años luz del centro de esta galaxia. </p>
<hr size="10" color="blue">
</body>
</html>

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 11 de 15
DESARROLLO WEB
Ejecutémoslo a través de nuestro navegador, y veremos el siguiente resultado:

9. Los Enlaces (Links)

Los enlaces o links (en inglés) nos permiten conectarnos con otros documentos:
 una imagen
 un video
 un archivo de sonido
 sitios en la web (otra página web)
 mandar un email
Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra
anchor (ancla).

La estructura de un link es:

<a href="dirección_URL">Texto que será sensible (hipertexto) </a>

La etiqueta <a> se le pueden distinguir algunos de los siguientes atributos:

 Href: Este atributo especifica la localización de un recurso de la Web, definiendo

así un vínculo entre el elemento actual (el origen del vínculo) y el destino del
vínculo definido por este atributo.
 target: Se utiliza para definir donde queremos que se abra el documento al
presionar sobre el enlace.
 name: Este atributo se usa para definir una determinada ubicación dentro de la
página.

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 12 de 15
DESARROLLO WEB
Por Ejemplo, Vamos a abrir el documento en una nueva página del navegador.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title> Hipervinculos o Enlaces </title>
</head>
<body>
<a name="arriba"> </a>
<hr size="5" color="yellow">
<h1>El sistema solar:</h1>
<img src="sistemasolar.jpg" width ="400" height ="200">
<br>
<p align="justify">Es un conjunto formado por el Sol y los cuerpos celestes que orbitan a
su alrededor. </p>
<hr size="10" color="red">
<p align="right"> El Sistema Solar es un conjunto de planetas que giran alrededor de
una estrella (el Sol) que a su vez gira alrededor del centro de la galaxia.
Aproximadamente estamos a unos 33 años luz del centro de esta galaxia. </p>
<hr size="15" color="blue">
<center><a href="#arriba"> Ir al Arriba</a></center>
<hr size="10" color="red">
</body>
</html>

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 13 de 15
DESARROLLO WEB
5. Evaluación
EVIDENCIAS DE TECNICAS E INSTRUMENTOS
CRITERIOS DE EVALUACION
APRENDIZAJE DE EVALUACION
Evidencias de conocimientos
 Utilizar una metodología para
 Evaluar en forma verbal o  Conversaciones y diálogos.
crear el plan de pruebas
escrita sobre tipos de casos de  Preguntas de exploración.
 Utiliza una metodología para los
pruebas y su utilización.  Talleres.
casos de prueba.
 Prácticas.
 Conoce las herramientas para la
 Evaluaciones.
automatización.
Evidencias de Desempeño
 Observar el proceso de  Utilizar una metodología para
 Conversaciones y diálogos.
pruebas un programa de crear el plan de pruebas
 Preguntas de exploración.
acuerdo a los casos de prueba  Utiliza una metodología para los
 Talleres.
establecidos. casos de prueba.
 Prácticas.
 Conoce las herramientas para la
 Evaluaciones.
automatización.
PRODUCTO
 Verificar los casos de  Utilizar una metodología para
 Conversaciones y diálogos.
pruebas elaborados y el crear el plan de pruebas
 Preguntas de exploración.
informe final de  Utiliza una metodología para los
 Talleres.
estadísticas. casos de prueba.
 Prácticas.
 Conoce las herramientas para la
 Evaluaciones.
automatización.

6. Taller

Diseñemos la siguiente página web:

 Descargue todos los archivos que se encuentran en el siguiente enlace, en una

nueva carpeta en su USB, con el nombre de Taller Guia1:
https://drive.google.com/folderview?id=0B6uTH0JudX2JZFpvNnZ5Z0FIUDA&usp=
sharing
 Aplique las etiquetas y atributos que tratamos en esta guía.
 Los dos archivos de texto que descargaste (formación del sistema solar.txt y
sistema solar.txt) renómbrelos con los nombres de: formación.html y
sistemasolar.html respectivamente.
 Cada página podría tener el siguiente diseño: cuando digo podría, me refiero a
que usted tiene la libertad de producir su propio diseño, es decir, quiero que
aplique su propia creatividad en esta página web.

sistemasolar.html

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 14 de 15
DESARROLLO WEB
formación.html

7. Taller de profundización

Con el siguiente texto, Elabore mínimo tres archivos de página web:

 Enlace donde puede descargar el texto que utilizará en el taller:
https://drive.google.com/file/d/0B6uTH0JudX2JbmJmal82SU04dnM/edit?usp=shar
ing

 Elabore un sitio web con este texto, generando mínimos tres archivos.

 Desarrolle su propio diseño, descargue de google las imágenes que considere

necesitar.

 Aplicar las etiquetas vistas en esta guía, con los atributos que sean necesarios
o que requiera su diseño.
 <font> y </font>
 <center> y </center>
 <b> y </b>
 <u> y </u>
 <i> y </i>
 <p> y </p>
 <br>
 <h1> y <h1>, <h2> y <h2>, <h3> y <h3>, etc.
 <hr>
 <a> y </a>
 <img>

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas

 Página 15 de 15
DESARROLLO WEB
Glosario

UTF-8 (8-bit Unicode Transformation Format) es un formato de codificación de

caracteres Unicode e ISO 10646 utilizando símbolos de longitud variable.

W3d (World Wide Wide Consortium): Es un consorcio internacional que produce

recomendaciones para la World Wide Web.

Hipertexto: hipervínculos o referencias cruzadas automáticas que van a otros

documentos.

Hipervínculos: Un hipervínculo (también llamado enlace, vínculo, o hiperenlace) es un

elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo,
otro documento o un punto específico del mismo o de otro documento.

hipermedios: es el término con el que se designa al conjunto de métodos o

procedimientos para escribir, diseñar o componer contenidos que integren soportes tales
como: texto, imagen, video, audio, mapas y otros soportes de información emergentes,
de tal modo que el resultado obtenido, además tenga la posibilidad de interactuar con los
usuarios

HTML: siglas de HyperText Markup Language, hace referencia al lenguaje de marcado

para la elaboración de páginas web.

Etiquetas o marcas: Una etiqueta o marca es un código que se incluye en los archivos
creados con el lenguaje HTML para estructurar, añadir significado o formato al contenido
a una página web.

Bibliografía / Web grafio

http://capacinet.gob.mx/Cursos/Tecnologia%20amiga/htmlycreacionpagweb/tema1
/t1_02.html
http://creatuweb.espaciolatino.com/tutorhtml/tema4.html
http://www.ite.educacion.es/formacion/materiales/182/cd/dos/etiquetas_html.html
http://html.hazunaweb.com/103.php
http://platea.pntic.mec.es/~abercian/guiahtml/enlaces.htm
http://www.esvial.org/wp-content/files/Atica2012_pp120-129.pdf

Página web–Tipos de página-HTML - Estructura de una página – Etiquetas básicas