Agregar a favoritos      Ayuda      Português      Ingles     

Diseñar páginas web en lenguaje HTML

Enviado por karla



Partes: 1, 2

  1. Utilizas los elementos fundamentales del diseño de una página Web
  2. Diseño de una página web
  3. Manejar los elementos básicos del lenguaje HTML en la creación de páginas web
  4. Texto en HTML
  5. Tablas
  6. Listas
  7. Marquesinas
  8. Otras etiquetas útiles

Submódulo

Monografias.comMonografias.com

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:

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.

Monografias.com

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

Monografias.com

  • 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

Monografias.com

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.

TEMAS DE EJEMPLOS

AANOTA TUS POSIBLES TEMAS

Lenguaje HTML

Capacitación de Informática

Mi artista favorito

Portafolio de evidencias de mis materias

Negocio familiar

Mi ciudad

Mi escuela

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.

EJEMPLOS:

CCLASIFICACIÓN

Lenguaje HTML

Sitio Web profesional

Capacitación de Informática

Sitio Web profesional

Mi artista favorito

Sitio Web de ocio

Portafolio de evidencias de mis materias

Sitio web de información

Negocio familiar

Sitio Web comercial

Mi ciudad

Sitio web de información

Mi escuela

Sitio web de información

ANOTA TUS TEMAS Y CLASIFICALOS SEGÚN SU TIPO.

(Como se muestra en el ejemplo)

MIS TEMAS

A CLASIFICACIÓN

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)

EJEMPLOS: TEMAS ORDENADOS

M MIS TEMAS ORDENADOS

Mi escuela

Mi ciudad

Mi artista favorito

Capacitación de Informática

Negocio familiar

Portafolio de evidencias de mis materias

Lenguaje HTML

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?:

Monografias.com

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

EJEMPLO: MI ESCUELA

MI TEMA:

Historia de mi escuela

Materias que imparten

Otros Planteles

Actividades que realiza

Envió de correos

Enlaces a otras páginas de interés

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

TEMA: Mi escuela

www.cobachbc.edu.mx

http://www.e-local.gob.mx/work/templates/enciclo/bajacalifornia/municipios/02002a.htm

Internet para buscar páginas de interés relacionados con el tema

Enlaces a direcciones de cursos como: www.aulaclic.com, www.aulafacil.com, etc.

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

(Como se muestra en el ejemplo)

FUENTES DE INFORMACIÓN DE MI TEMA:

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:

EJEMPLO DE LA ESCALABILIDAD EN MI PÁGINA: MI ESCUELA

La página se revisara constantemente y se modificara cuando ya hayan vencido los enlaces, este muy lenta debido a la cantidad de visitas que tenga, cuando sea necesario ampliarla, agregar más información o enlaces. Lo que suceda primero.

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

(Como se muestra en el ejemplo)

ESCABILIDAD EN MI PÁGINA:

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:

Monografias.com

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

Monografias.com

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

Monografias.com

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

(Apóyate en el ejemplo)

Monografias.com

¿Cómo empiezo a escribir HTML?

Monografias.com

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.

Monografias.com

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.

Monografias.com

  •  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:

Monografias.com

Monografias.com

Etiqueta:

Monografias.com

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.

Monografias.com

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:

Monografias.com

Etiqueta

Monografias.com

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

Monografias.com

Puede llevar los siguientes atributos:

Bgcolor

Define el color de fondo de la página

Text

Define el color del texto de la página

Link

Define el color de los vínculos en la página

Alink

Define el color del vínculo actual o activado en la página

Vlink

Define el color del vínculo ya visitado

Background

Bgsound

Bgproperties

Define el archivo gráfico que será desplegado como fondo

Define el archivo de audio que se tocará en la página.

Define el movimiento vertical del fondo.

¿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:

Monografias.com

     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:

#RRVVAA

COLOR

#RRVVAA

COLOR

#FFFFFF

Blanco

#000000

Negro

#FF0000

Rojo

#00FF00

Verde

#0000FF

Azul

#FF00FF

Magente

#00FFFF

Cyan

#FFFF00

Amarillo

#70DB93

Agua Marino

#000080

Azul Marino

#FF7F00

Coral

#A62A2A

Café

#C0C0C0

Plomo

#4F2F4F

Violeta

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:

Monografias.com

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:

Monografias.com

Ejemplo 4:

Monografias.com

Monografias.com

Align

Establece que la regla se alinee a la izquierda, centro o derecha

NOSHADE

LEFT,CENTER o RIGHT

Quita el sombreado predeterminado de la regla

WIDTH

SIZE

Permite especificar el ancho de la regla (en pixeles o porcentaje)

Permite especificar el alto de la regla (en pixeles)

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

Monografias.com

Encabezados

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

Monografias.com

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:

Monografias.com

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:

Monografias.com

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á:

Partes: 1, 2

Página siguiente 

Comentarios


Trabajos relacionados

Ver mas trabajos de Computacion

 

Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.


Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

Iniciar sesión

Ingrese el e-mail y contraseña con el que está registrado en Monografias.com

   
 

Regístrese gratis

¿Olvidó su contraseña?

Ayuda