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.