Diseñar páginas web en lenguaje HTML

Submódulo

PROPÓSITO: Al término del
submódulo, serás competente para diseñar y
crear una página web en lenguaje html.

El presente submódulo tiene como objetivo
prepararte para que aprendas a diseñar y estructurar una
página web. Por lo que como proyecto elaborarás el
diseño de una página web personal en código
HTML en el editor de texto bloc de notas con las
características siguientes: Una página principal
que incluya:

? Encabezado

? Imágenes

? Hipervínculos a otras páginas
web

? Hipervínculos a tus páginas.

? Opción para enviar un correo

Una segunda página, en la que apliques las
tablas

Y por último una página, en la que
apliques listas.

Las tres páginas deben de estar enlazadas entre
sí y a una página en internet.

COMPETENCIAS:

• Utiliza procedimientos y herramientas
  para el desarrollo de documentos electrónicos de
  acuerdo a los requerimientos.

• Programa y administra páginas
  web para la difusión y captación de la
  información.

• Elabora páginas web con
  animaciones interactivas de aplicación general y
  específica, en un ambiente multimedia.

CONTENIDOS:

1.1 Utilizar los elementos fundamentales del
diseño de una página web.

1.2 Manejar los elementos básicos del lenguaje
HTML en la creación de páginas web.

ACTIVIDAD 1

En binas realiza la lectura de las competencias que
se pretende alcanzarás al término del
submódulo. Posteriormente responde las preguntas y termina
comentando tus respuestas a través de una discusión
guiada por el docente a la vez que atiendes las explicaciones y
ejemplos del mismo.

1.- ¿Qué competencias voy a
desarrollar?

______________________________________________

______________________________________________

______________________________________________

2.- ¿Para qué me van a servir?

________________________________________________

______________________________________________

3- ¿En qué momento las puedo
aplicar?

_______________________________________

_________________________________________

__________________________________________

ACTIVIDAD 2

En binas comenta los lugares por los que has navegado
en internet y trata de recordar lo que has observado en cuanto a
la estructura, información, enlaces etc. de cada uno de
los sitios que has visitado y responde las siguientes preguntas,
posteriormente en una lluvia de ideas guiada por el docente
comenta el tipo de página que te gustaría
diseñar y menciona él ¿por
qué?

1.- ¿Que entiendes por una
página web?

_________________________________________

2. ¿Qué tipo de
información tiene las páginas web que has
visitado?

_________________________________________

3. ¿Qué diferencia encuentras
entre una página web y un sitio web?

___________________________________________________

4. ¿Qué tienen en
común los sitios web que has visitado?

___________________________________________

5. ¿Para qué crees que sirve
una página web?

____________________________________________________

6.- ¿Qué te gustaría que tuviera la
página web que diseñarás?

__________________________________________________

_______________________________________________

______________________________________________

Utilizas los elementos
fundamentales del diseño de una página Web

ACTIVIDAD 3

Para iniciar una página web, primero debes de
conocer sus características y las reglas básicas
que debes de seguir para diseñarla, por lo tanto realiza
la lectura "¿Qué es HTML?" y
elabora un resumen. Pregunta a tu profesor las dudas que te vayan
surgiendo.

¿Qué es HTML?

Para abreviar una larga historia, podemos decir que un
científico llamado Tim Berners-Lee inventó HTML
allá por 1990. El objetivo era facilitar a
científicos de diferentes universidades el acceso a los
documentos de investigación de cada uno de ellos. El
proyecto obtuvo un éxito mucho mayor del que Tim
Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML,
este científico sentó las bases de la web tal y
como la conocemos en la actualidad.

HTML es un lenguaje que hace posible presentar
información (por ejemplo, investigaciones
científicas) en Internet. Lo que ves al visualizar una
página en Internet es la interpretación que hace el
navegador del código HTML. Para ver el código HTML
de una página sólo tienes que dar clic en la
opción "Ver" de la barra de menús y elegir
"Código fuente" (en Internet Explorer).

Si quieres crear sitios web, no hay otra solución
que aprender HTML. Incluso si usas un programa como Dreamweaver,
por ejemplo, para la creación de sitios web, poseer unos
conocimientos básicos de HTML hace la vida mucho
más fácil y tus sitios web mucho
mejores.

HTML es la abreviatura de "HyperText Mark-up Language",
es decir, "Lenguaje de marcado hipertextual", y esto ya es
más de lo que necesitas saber a estas alturas. En todo
caso, para mantener un buen orden, necesitas conocer su
significado con mayor detalle.

• Hiper (Hyper): Es lo contrario de lineal. Los
  programas de la computadora se ejecutaban de forma lineal:
  cuando el programa había ejecutado una acción
  seguía hasta la siguiente línea, y
  después de ésta a la siguiente, y a la
  siguiente, HTML, sin embargo, ahora es diferente: se puede ir
  a donde uno quiera cuando uno quiera. .

• Texto (Text): Se refiere al texto de la
  página web.

• Marcado (Mark-up): Es lo que haces con el
  texto. Se marca el texto del mismo modo que en un programa de
  edición de textos con encabezados, viñetas,
  negrita, etc.

• Lenguaje (lenguaje): Es lo que es HTML. Este
  lenguaje hace uso de muchos términos en
  inglés.

¿Cuáles son las características
del lenguaje HTML?

Este lenguaje será el encargado de convertir un
inocente archivo de texto inicial en una página web con
diferentes tipos y tamaños de letra, con imágenes
impactantes, animaciones sorprendentes, formularios interactivos,
etc.

Estas características son las que marcaron el
diseño de todos los elementos del WWW incluida la
programación de páginas Web.

• L a página Web tiene que ser distribuida: La
  información repartida en páginas no muy grandes
  enlazadas entre sí.

• Debe ser fácil navegar por la
  página.

• Tiene que ser compatible con todo tipo de
  ordenadores (PCs, Macintosh, estaciones de trabajo, etc.) y
  con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX,
  MAC-OS, etc.)

• Debe ser dinámico: el proceso de cambiar y
  actualizar la información debe ser ágil y
  rápido.

Reglas básicas en el
diseño

• Tener algo interesante que decir en tu PÁGINA
  web:

• Todo el mundo ya conoce las herramientas de
  búsqueda. Haz que tus enlaces sean pertinentes al tema
  que estas tratando.

• Recuerda que no en todos los Buscadores aparecen
  igual: No hagas que tu página dependa demasiado de
  ciertos comandos HTML que pueden no aparecer en todos los
  buscadores. Algunos buscadores pueden no aceptar tus
  gráficas, así que proporciona textos
  alternativos.

• Mantén tu página con un máximo
  de 15K en imágenes o fracciónala si ésta
  es muy grande.

• No usar gráficas de otros autores si no
  está autorizado: Hay muchas fuentes de gráficas
  gratis. También existen graficadores sencillos con los
  que puedes crear Tus propias gráficas.

• Reconocer el trabajo de los demás: Si
  algún "Sitio" te ayudó de alguna manera a
  construir tu página, entonces bríndale un
  enlace

• Colocar fecha de la última revisión:
  Indica cuándo se realizó la última
  revisión. Esto hará que las personas se motiven
  a leer tu página.

• Verifica sus enlaces periódicamente: No dejes
  que expiren sus enlaces durante largos períodos de
  tiempo. Revisa su validez.

• Se abierto a comentarios o
  sugerencias:Especifica vínculos de correo
  electrónico o, si es posible, formularios de
  realimentación.

• Practica el HTML: Usa los editores solo
  cuando conozcas los principios básicos del
  HTML.

ACTIVIDAD 4

Después de haber realizado la lectura, redacta
tu resumen

________________________________________________________________________________

ACTIVIDAD INTEGRADORA

PARTE 1

Diseño de una
página web

Antes de entrar de lleno en lo que será la
construcción de la página web, desarrollaremos la
metodología para el diseño de las mismas. Es
importante ser originales para estructurar sus contenidos,
redactar sus textos, agregar imágenes, enlazar las
páginas, etc,

• 1. Elegir posibles temas a tratar en la
  página web

Empieza haciéndote esta pregunta ¿De qué
puedo hablar en mi página web? ¿Cuál es la
temática que voy a trabajar? Para contestar estas
preguntas haremos un listado de posibles temáticas que te
puedan interesar para realizar la página web. Más
adelante iremos eliminando y añadiendo otras según
los factores que vamos a tener en cuenta y según
cuál sea tu objetivo: ganar muchas visitas, ganar mucho
dinero, o cualquiera que sea el fin de tu página web.

Clasifica los temas

Es importante saber el tipo de Web que queremos crear,
es el punto de partida que afecta a todas las etapas posteriores
de creación, realizaremos un diseño, aplicaciones,
navegabilidad adecuadas al tipo de Web seleccionada,
Ejemplos:

• Sitio Web comercial. – Sitio Web
  profesional.

• Sitio Web de información. –
  Sitio Web de ocio.

ANOTA TUS TEMAS Y CLASIFICALOS SEGÚN
SU TIPO.

(Como se muestra en el
ejemplo)

3.- Escoge un tema para tu página
web

El factor más importante, es, que el tema nos
apasione. De modo que de la lista de temas que tengo, voy a
ordenarlos Según me gusten. (El tema que quede primero es
sobre el que desarrollarás tu página
web)

4.- Definición de la
Información a publicar.

Después de que hayas seleccionado el tema de la
página web es necesario definir la información que
se va a publicar en el sitio Web, si vas a hacer una
página sobre tu escuela, como en este caso,
¿qué vas a poner?:

ANOTA TU TEMA Y LA INFORMACIÓN QUE TE
GUSTARÍA MOSTRAR EN TU PÁGINA (Como se muestra en
el ejemplo)

5.- ¿Qué fuentes de
información tengo?

Una fuente de información es el lugar del que
manan los conceptos, las ideas y los pensamientos que sirven para
la creación de nuevo conocimiento en este caso una
página web. Por lo tanto, en este apartado necesitamos
recolectar las fuentes de información de donde vamos a
extraer información del tema de nuestra página
web

ANOTA TU TEMA Y LAS FUENTES DE CONSULTA PARA CREAR TU
PÁGINA WEB.

(Como se muestra en el ejemplo)

6.- Escalabilidad

La escalabilidad se define como las visiones a corto y
largo plazo acerca de nuestro sitio Web, si a largo tiempo
queremos ampliar nuestro sitio Web con nuevas aplicaciones,
nuevas páginas, actualizaciones constantes de que va a
depender que realicemos esto:

MENCIONA CADA CUANDO VAS A REALIZAR
ESCALABILIDAD EN TU PÁGINA.

(Como se muestra en el
ejemplo)

7.- Planificación

En todo proceso de creación y
diseño de páginas Web el primer paso a llevar a
cabo será la planificación, que incluye la
definición de:

OBJETIVOS: Presentar información
de la preparatoria que sea atractiva para los jóvenes de
nuevo ingreso.

• a) PÚBLICO: identificar el tipo
  de personas a la que va dirigida la información, en
  este caso todo tipo de personas podrán acceder a la
  página pero el público seleccionado será
  los estudiantes de secundaria y todos aquellos jóvenes
  que estén buscando educación del nivel medio
  superior.

• b) CONTENIDO: habrá
  información sobre el plantel y la preparación
  que otorga a los jóvenes.

• c) ESTRUCTURA: Estará formada por
  una página principal que brindara información y
  ofrecerá enlaces para ir las secciones del sitio web:
  materias, capacitaciones, Paraescolares, etc. Tendrá
  otras 3 páginas web más que estarán
  ligadas a la primera como se muestra en la estructura
  siguientes:

REALIZA LA PLANIFICACIÓN DE TU
PÁGINA WEB SEGÚN EL TEMA QUE HAYAS
ESCOGIDO:

8.- Definición del
diseño

Dependiendo del tipo de Web, el tema seleccionado,
definida la información y la escalabilidad, estamos
preparados para plasmar en papel el diseño de la
página Web, incluyendo las páginas, los fondos,
tipos de letras, botones, formularios, links, plantillas,
aplicaciones…. de tal forma que obtengamos "storyboard" (es
un conjunto de ilustraciones mostradas con el objetivo de servir
de guía para entender una historia, previsualizar una
animación o seguir la estructura de una página web
antes de realizarse) de los elementos y diseño que
queremos implementar en nuestro sitio Web.

Ejemplo de la página web de mi
escuela

REALIZA EL DISEÑO DE TU PÁGINA
WEB.

(Apóyate en el ejemplo)

¿Cómo empiezo a escribir
HTML?

Para comenzar tan sólo necesitas un editor de
texto para escribir las páginas y un navegador para
visualizarlas.

El editor no debe formatear el texto. Usa el Bloc de
notas ( Notepad ), las etiquetas y sus atributos se pueden
escribir en mayúsculas o minúsculas. El lenguaje
ignora, también, los espacios en blanco seguidos, donde
sólo cuenta uno de ellos.

Una vez que hayas escrito una página,
guárdala en un archivo con extensión .htm o
.html.

Si el documento ha sido modificado y no ha
sido guardado antes de cerrar, se te pedirá
confirmación para guardarlo antes de cerrar el
programa.

• Escribir en el Bloc de notas
   

Siempre que se abre el bloc de notas aparece un
documento en blanco. A la hora de escribir en él, funciona
como cualquier otro editor de texto, basta con situar el cursor
en el documento y escribir. Es recomendable insertar una nueva
línea para cada nueva etiqueta HTML, ya que resulta
más fácil trabajar de este modo. Si
escribiéramos todo el código seguido nos
resultaría difícil interpretarlo, por ello es
preferible programar insertando las etiquetas por separado, en
diferentes líneas.

A través del menú
Formato, opción Fuente, puedes cambiar la
fuente de todo el documento. Si lo deseas, puedes hacer la letra
algo más grande o pequeña.

•  Abrir un documento

• 1. Pulsar la combinación de
  teclas Ctrl+A.

• 2. Hacer clic sobre el menú
  Archivo y elegir la opción
  Abrir.

 Para guardar un documento, puedes
utilizar cualquiera de las siguientes operaciones.

• 1. Pulsar la combinación de
  teclas Ctrl+G.

• 2. Hacer clic sobre el menú
  Archivo y elegir la opción
  Guardar.

 A la hora de guardar un documento no
debes olvidar guardarlo con la extensión htm o
html. Por ejemplo, puedes guardar un documento con el
nombre mipágina.htm.

Manejar los elementos
básicos del lenguaje HTML en la creación de
páginas web

ACTIVIDAD 5

Antes de empezar a crear la página web es
necesario que conozcas los términos básicos que
estarás utilizando en el transcurso de este bloque, por lo
que es necesario que realices una búsqueda en Internet y
definas lo siguiente:

Bloc de Notas:

__________________________________________

Buscador:

___________________________________________________________

____________________________________________________

Compatible:
___________________________________________

Estructura de página web:

__________________________________________

Etiqueta:

____________________________________

Hipertexto:

__________________________________________

Lenguaje html:

__________________________________________

Marcas (tag)

__________________________________________

Navegador:

_________________________________________

Página web:

__________________________________________

Plataforma:

___________________________________________

Servidor web:

___________________________________________

Vínculos

___________________________________________

Ahora sí, es tiempo de empezar con la
programación de la página web. Es importante que
realices con tu equipo de trabajo todas las actividades que se te
indican, para posteriormente capturarlas en el bloc de notas.
Pronto veras los resultados de tu página. Ánimo y
adelante!!

Realiza la lectura "estructura
básica" a la par que van desarrollando las
actividades referentes al diseño de su página.
Pregunta al profesor todas las dudas que te vayan
surgiendo.

Estructura básica

• Cada página comienza con:
  < HTML > .

• A continuación viene la
  cabecera, delimitada por < HEAD > < /HEAD
  >

• Después, el comando <
  BODY >, que indica el comienzo del cuerpo de la
  página.

• Las instrucciones HTML se
  escribirán a continuación, y finalizarán
  con < /BODY >

• La página acabará con
  < /HTML >

Es decir:

Etiqueta:

Esta etiqueta va en la parte del encabezamiento de la
página web, es decir en el HEAD, y define en su contenido
el título de la página web, misma que
aparecerá en la parte superior izquierda de la pantalla de
tu navegador.

ACTIVIDAD 6

Trascribe el código siguiente en el bloc de
notas, graba el archivo con el nombre index.html. Una vez
realizado esto, y sin cerrar el editor de texto, vamos al
navegador, da clic en el menú archivo, selecciona la
opción abrir, busca el archivo, selecciónalo y
ejecútalo dando doble clic en abrir. Tu nueva
página estará visible. Nota que el título
aparecerá en la parte superior (pestaña de la
página).

Ejemplo 2:

Etiqueta

Todo el texto, las imágenes y el
formato visibles al usuario deben encontrarse entre las
etiquetas

Puede llevar los siguientes
atributos:

¿Cómo se utilizan los
colores en HTML?

Se pueden llegar a tener 16 millones de
colores en una página web. Existen dos formas para aplicar
colores:

1. Se especifica el color deseado
directamente con el nombre del color en ingles: Ejemplo: blue,
green, yellow

2. Se especifica el color deseado mediante
números hexadecimales ejemplo:

     Donde se indica en formato
hexadecimal la proporción de rojo, verde y azul que
forma el color deseado. El símbolo # es opcional.
Un número hexadecimal es un número en base 16, la
base normal utilizada es base 10 o decimal del 0 al 9. En este
caso los número validos serán del 0 al 9
añadiendo desde la a ó A a la f ó F. Por
tanto el número 0F será el 15, 0E será
14.

     En la
especificación del color utilizaremos para definir la
proporción de cada color un número del 0 al FF
(255), 0 indica nada de ese color y FF la mayor proporción
del color.

Ejemplos de colores:

ACTIVIDAD 7

Ingresa al bloc de notas y realiza lo
siguiente:

1 Abre el archivo "index.html".

3 Continúa trascribiendo el ejercicio
3

4 Graba con el mismo nombre.

5 Ejecuta y si muestra algún error
corrígelo.

5 Ingresa a la página
http://www.usuarios.sion.com/pauluk/coloreshtml.htm

Checa los códigos de los
colores.

6 Cambia el código del color de la
página que transcribiste, graba, ejecuta

y observa la diferencia.

Ejemplo 3:

Texto en HTML

Una página Web se visualiza en países
distintos, que usan conjuntos de caracteres distintos. El
lenguaje HTML nos ofrece un mecanismo por el que podemos estar
seguros que una serie de caracteres raros se van a ver bien en
todos los ordenadores independientemente de su juego de
caracteres. Cuando queremos poner uno de estos caracteres
especiales en una página, debemos sustituirlo por su
código. Por ejemplo, la "á" (a
minúscula acentuada) se escribe "&aacute;" de
modo que la palabra página se escribiría en una
página HTML de este modo: página.

A continuación se muestra una lista con algunos
caracteres y el nombre con el que han de ser
representados:

Ejemplo 4:

ACTIVIDAD 8

Ingresa al bloc de notas y realiza lo
siguiente:

1 Abre el archivo "index.html".

3 Continúa trascribiendo el ejercicio
5

4 Graba con el mismo nombre.

5 Ejecuta y si muestra algún error
corrígelo y vuelve a ejecutar.

5 Practica los diferentes atributos de la
etiqueta

Ejemplo 5

Encabezados

Los títulos o encabezados se emplean
al comienzo de una sección. Las etiquetas que se usan
son:

ACTIVIDAD 9

Ingresa al bloc de notas y realiza lo
siguiente:

1 Abre el archivo "index.html".

3 Continúa trascribiendo el ejercicio
6

4 Graba con el mismo nombre.

5 Ejecuta y si muestra algún error
corrígelo y vuelve a ejecutar.

5 Practica los diferentes tamaños de
encabezados

Ejemplo 6:

Etiquetas para el texto

     El lenguaje HTML es un
lenguaje de marcas, estas marcas serán fragmentos de texto
destacado de una forma especial que permiten la definición
de las distintas instrucciones de HTML, tanto los efectos a
aplicar sobre el texto como las distintas estructuras del
lenguaje. A estas marcas las denominaremos etiquetas y
serán la base principal del lenguaje HTML. En documento
HTML será un archivo texto con etiquetas que
variarán la forma de su presentación.

     Una etiqueta será
un texto incluido entre los símbolos menor que
< y mayor que >. El texto incluido dentro de los
símbolos será explicativo de la utilidad de la
etiqueta.

Por ejemplo:

Atributos de las Etiquetas

     Las etiquetas pueden
presentar modificadores que llamaremos atributos que
permitirán definir diferentes posibilidades de la
instrucción HTML. Estos atributos se definirán en
la etiqueta de inicio y consistirán normalmente en el
nombre del atributo y el valor que toma separados por un signo de
igual. El orden en que se incluyan los atributos es indiferente,
no afectando al resultado. Si se incluyen varias veces el mismo
atributo con distintos valores el resultado obtenido será
imprevisible dependiendo de cómo lo interprete el
navegador. Cuando el valor que toma el atributo tiene más
de una palabra deberá expresarse entre comillas, en otro
caso no será necesario.

     Un ejemplo de atributo
será: