PORTAFOLIO DIGITAL

2016

INFORMATICA III CYNTHIA LAURA GUERRERO ESCOBAR

INSTITUTO DE INVESTIGACION Y ENSEÑANZA IBEROAMERICANO A.C. | 3-C

1

INSTITUTO DE INVESTIGACION Y

ENSEÑANZA IBEROAMERICANO A.C.

CYNTHIA LAURA GUERRERO ESCOBAR

INFORMATICA III

PORTAFOLIO DIGITAL

“MI PAGINA WEB”

LILIA RIVERO GONZALEZ

GRADO: 3 GRUPO: C

CICLO ESCOLAR:

2015-2016

2

INDICE 1-INTROCUCCION……………………………………………………………………….4

2-ESQUELETO / COLOR DE FONDO…………………………………………………......5

3-TITULO DE PAGINA…………………………………………………………………....6

4-VIDEO COMERCIAL Y VALORES……………………………………………………....7

5-HIPERVINCULOS E IMÁGENES………………………………………………………..8

6-SONIDO DE FONDO Y NOTA CURIOSA DE LA EMPRESA (¿SABIAS QUE…?)……....9

7-TERMINACION DE LA PAGINA………………………………………………………10

8-ENSAYO……………………………………………………………………………….11

3

BLOQUE III EXPRESION GRAFICA

PARCIAL III PÁGINA WEB EN HTML

4

INTRODUCCION. La página web en HTML por sus siglas en ingles de HyperText Markup

Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de

marcado para la elaboración de páginas web.

Para mi este trabajo no es tan fácil de hacer ya que lleva tiempo para hacerlo

muy bien, solo por unos pequeños detalles no sale toda la página deseada.

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.

Está compuesto por una serie de etiquetas que el navegador interpreta y da

forma en la pantalla. HTML dispone de etiquetas para imágenes,

hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea,

listas, tablas, etc.

La importancia de la página web es que sirva como fuente de información

para avisarle a las personas sobre ventas, noticias y para tener comunicación

con otras personas como por ejemplo: Facebook, Twitter, Messenger y otras

páginas para mandar mensajes. También para buscar trabajo, buscar

direcciones, contratar personas para algo, etc.

De hecho el sitio web salió por primera vez en 1991 por Tim Berners-Lee .En

esta publicación se describen 22 etiquetas que mostraban un diseño inicial y

relativamente simple de HTML (como el trabajo que se verá a continuación

más adelante).

En este caso en la escuela nos tomamos pocos meses para elaborar este gran

trabajo ya que será nuestro examen de ultimo parcial.

Como se mostrara después primero para crear cada característica de la

página debe hacerse en bloc de notas y después convertirlo en HTML

5

MI PAGINA WEB EN HTML

OBJETIVO: Crear la página web utilizando las siguientes herramientas.

PARTE 1-ESQUELETO

HERRAMIENTAS:

BLOC DE NOTAS: para ir estructurando como queremos que salga la página.

FRAMESET ROWS: nombre de las filas.

FRAMESET COLS: nombre de las columnas

FRAME NAME: para darle nombre a la fila.

IMAGEN:

PARTE 2: COLOR DE FONDO

HERRAMIENTAS:

BODY BACKGROUND: Para poner en que fila queremos que se coloree la página.

BODY BGCOLOR: Para color de fondo

IMAGEN:

Como se ve en la imagen izquierda está el bloc de notas de la estructura del esqueleto de nuestra página

colocando cuantas filas y columnas queremos que salga.

Como puede verse en la imagen izquierda la estructura en el bloc de notas no es muy largo ya que solo se

utilizan 2 herramientas para el color de fondo de mi página.

6

PARTE 3- TITULO DE LA PÁGINA

HERRAMIENTAS:

FRAME NAME: nombre de la fila

BODY BGCOLOR:

MARQUEE

MARQUEE BGCOLOR:

FONT COLOR: color de la letra

FONT SIZE: tamaño de la letra

FONT FACE: para la letra

IMAGEN:

Como podemos ver en la izquierda está el bloc de notas como estructure el título de mi

sitio web, esta larga la estructura porque debajo de mi título que está en amarillo y rojo,

puse unas letritas que dice: “Me encanta, I love it” para decorar mi página, en total son 20

letras pequeñas que puse en color blanco. Una está en negro para darle como que la

bienvenida.

7

PARTE 4: VIDEO COMERCIAL Y VALORES

HERRAMIENTAS:

BODY BACKGROUND:

BODY BGCOLOR: color de fondo

DV ALIGN:

EMBED SRC: para poner la ubicación del video.

HEIGHT: para número de alto de video.

WIDTH: número de ancho del video

<HR>: para bajar el texto

<CENTER> para centrar el texto

<H1>: encabezado

<P>

IMAGEN:

En la imagen izquierda que se encuentra el bloc de notas primero puse la estructura del

video, ahí mismo puse también la estructura del texto donde son los valores porque

quería que debajo del video apareciera que valores tiene la empresa Mc Donald’s ya que

está en la página principal y porque si lo ponía en otro bloc de notas no iba a jalar la

página ya que cuando lo intente no se podía porque tenía que sustituir el bloc de notas si

tenía el mismo nombre y si lo sustituía perdería el bloc de notas que hice primero en el

cual era el video. En la derecha se ve como salió el video y los valores que se encuentran

debajo.

8

PARTE 5: HIPERVINCULOS E IMÁGENES

HERRAMIENTAS:

BODY BG COLOR: Para que la imagen e hipervínculos tengan un color de fondo

A HREF: para darle nombre al hipervínculo

IMG SRC: Para poner la ubicación de la imagen y pueda aparecer en la página.

BR: Para bajar la imagen.

FONT FACE: Para el titulo de los hipervínculos.

IMAGEN:

En la izquierda como está el bloc de notas esta la estructura de los hipervínculos y las

imágenes que puse, puse 2 estructuras diferentes en el mismo bloc para que los

hipervínculos aparecieran arriba de la imagen ya que desde un principio quería que

apareciera así, son 5 hipervínculos, los puse para que mi página no sea de poca

información y se vea entretenida y no sea tan aburrida para que el usuario pueda navegar

y conocer mi sitio.

9

SONIDO DE FONDO Y NOTA CURIOSA DE LA

EMPRESA (¿SABIAS QUE…?)

HERRAMIENTAS:

HTML: Para iniciar la etiqueta

BODY BGCOLOR: Color de fondo

HR: Para bajar texto

CENTER: para centrar el texto

H1

<P><FONT COLOR>

EMBED SRC: Para poner donde se ubica el video

HIDDEN.

TRUE.

IMAGEN:

1ra Estructura de la información de nota curiosa.

2da estructura de sonido de fondo.

Como se ve en la izquierda la estructura de la información y sonido está en el mismo, desde un

principio lo tenía pensado así ponerlo en la misma columna e igual que las estructuras lo puse en el

mismo bloc de notas ya que como dije anteriormente si el sonido y la información lo ponía en

diferente no se iba a poder jalar en el esqueleto porque tendría que sustituir y perdería el que había

hecho primero.

10

TERMINACION DE LA PÁGINA. Después de hacer varios bloc de notas e ir viendo como quedaba la información e

imágenes en la página así quedo al final cuando el esqueleto jalo los bloc de notas.

En una carpeta aparte tenía que guardar todas las herramientas que ocuparía para mi página web

como imágenes, música, video y mis bloc de notas. Tenía que hacer esto porque la maestra dijo

que para que todos los bloc de notas se uniera con el esqueleto y se pueda formar el sitio.

11

ENSAYO Después de todo este proceso de crear una página web me costó demasiado

trabajo, al irlo haciendo paso a paso lloraba de desesperación de que no lo

podía hacer y me había dado la idea de que reprobaría la materia en este

mes y no entregaría nada pero al principio lo único que me salía era el título y

después el video y sonido, cuando practique con las imágenes me había

salido bien pero después al tratarlo de unir con el esqueleto se me hizo raro

de que ahora ya no me salía. Pero después veía una práctica anterior que la

miss nos había enseñado sobre títulos, color de fondo, imágenes, de ahí me

apoye para hacer mi trabajo. Pero con la imagen no me salía por muchas

veces que lo intentara, pero después me ayudo una compañera

explicándome como debía hacerlo y así, ya después medio entendía pero

había otras cosas que no me salían y seguía viendo tutoriales y no me servía,

pero después otra vez me volvieron a explicar y a orientar como y ya hasta

que por fin me di cuenta que pude hacerlo y aprendí que hay que fijarse muy

bien en los detalles como flechas, comas, puntos, comillas, etc.

No sabía que una página web sencilla con imágenes e información para

hacerlo tiene que hacerse todo este proceso que de hecho al final de cuentas

me doy cuenta que no es tan difícil pero si cuesta hacerlo y es tardado.

De hecho si me gusto hacer este proyecto pero me estresaba y desesperaba

mucho de que no me salían varias cosas, pero a pesar de esto me asombra de

que es mi primera vez que hago una página web. También me guie en mis

apuntes y otros ejemplos.

Yo pienso y creo que esto me puede servir después para algo y de hecho más

adelante dentro de unos años pienso poner un negocio y quizá pueda

retomar estos temas y prácticas para crear el sitio web de mi negocio , hice

mi esfuerzo para que mi página quedara bien y ojala me vaya bien con mi

calificación.

De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y

12

especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML y entender cómo funciona. Esto fue todo sobre mi página en HTML y gracias por leer mi portafolio.