Sie sind auf Seite 1von 29

DISEÑO DE PÁGINAS WEB

DISEÑO DE PÁGINAS WEB Manual de prácticas Computación Básica II COMPETENCIA GENERAL: Maneja herramientas informáticas vigentes

Manual de prácticas

Computación Básica II

COMPETENCIA GENERAL: Maneja herramientas informáticas vigentes que le permitan administrar y difundir información diversa en un contexto social, académico y laboral.

COMPETENCIA PARTICULAR: Elabora páginas WEB a través del código HTML y el Editor institucional

RESULTADOS DE APRENDIZAJE PROPUESTOS

1) Identifica los elementos que componen la estructura de una página Web de acuerdo a su uso y función.

2) Crea páginas Web a través del código HTML.

OBJETIVO: Que el alumno demuestre las competencias que adquirió sobre el Lenguaje HTML durante el curso de la unidad de aprendizaje.

¡Hola! Bienvenidos al mundo del lenguaje HTML.

Lee con atención y asimila las instrucciones para adquirir y lograr las competencias requeridas en está “Práctica integradora”, en está tu sección de “Diseño de páginas WEB”.

PRÁCTICA INTEGRADORA: Proyecto HTML

PRÁCTICA INTEGRADORA: Proyecto HTML Manual de prácticas Computación Básica II Breve Descripción Teórica Es un lenguajeutiliza para el desarrollo de páginas de Internet . Se trata de la sigla que corresponde a HyperText Markup Language , es decir, Lenguaje de Marcas de Hipertexto , que Hipertexto . podría ser traducido como Lenguaje de Formato de Documentos para Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el formato de los documentos. El texto en él se crea a partir de etiquetas , también llamadas tags, que permiten interconectar diversos conceptos y formatos. Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de corchetes o paréntesis angulares: < y > . Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus atributos ). DISEÑO DE PÁGINAS WEB CON HTML Las páginas Web son documentos que se relacionan con otros en forma de hipervínculos, es decir, que podemos movernos por las páginas con sólo hacer clic en los enlaces, ligas o links, estos se aplican a textos o imágenes. Planificación: Es conveniente tomar en cuenta las siguientes sugerencias con el fin de desarrollar un bosquejo de lo que se quiere llevar a cabo: a) Hay que pensar cuál será el Objetivo de nuestra página, es decir, si será comercial para vender o promocionar algún negocio, o bien si únicamente será una página personal. b) El diseño de nuestra página Web debe ser directo y funcional. Debemos ir al grano y organizar el contenido de nuestra página pensando siempre en beneficio de nuestros visitantes. c) Debemos proyectar el contenido y funcionamiento de la página a través de la elaboración de un borrador. d) No debemos cargar nuestra página Web de mucha información, imágenes y otros elementos. Lo más recomendable es incluir entre 15 y 20 Kb de gráficos por página. e) Elegir cuidadosamente el lugar donde se colocará un vínculo. Es necesario crear una carpeta donde se incluirán todos los archivos que formarán parte de la página Web, podemos crear dentro de esta carpeta otras para almacenar imágenes, sonidos, videos, etcétera. Nuestra primer página deberá guardarse con el nombre de Index.html , de esta manera el navegador la reconocerá como la página principal . 2 " id="pdf-obj-1-4" src="pdf-obj-1-4.jpg">

Manual de prácticas

Computación Básica II

Breve Descripción Teórica

Es un

lenguaje de programación

que se

para el desarrollo de páginas de

Internet

. Se trata de

la sigla que corresponde a HyperText Markup Language, es decir,

Lenguaje de Marcas de

Hipertexto, que Hipertexto.

podría

ser

traducido

como

Lenguaje de Formato de Documentos para

Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con

el formato de los documentos.

El texto en él se crea a partir de

etiquetas, también llamadas tags, que

permiten interconectar diversos conceptos y formatos.

 

Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de

corchetes o paréntesis angulares: < y >.

Entre sus componentes, los

elementos

dan

forma

a

la

estructura esencial del lenguaje, ya que tienen dos propiedades (el contenido en sí mismo y sus

atributos

).

DISEÑO DE PÁGINAS WEB CON HTML

Las páginas Web son documentos que se relacionan con otros en forma de hipervínculos, es decir, que podemos movernos por las páginas con sólo hacer clic en los enlaces, ligas o links, estos se

aplican a textos o imágenes.

 

Planificación:

Es conveniente tomar en cuenta las siguientes sugerencias con el fin de desarrollar un bosquejo de lo que se quiere llevar a cabo:

  • a) Hay que pensar cuál será el Objetivo de nuestra página, es decir, si será comercial para vender o promocionar algún negocio, o bien si únicamente será una página personal.

  • b) El diseño de nuestra página Web debe ser directo y funcional. Debemos ir al grano y organizar el contenido de nuestra página pensando siempre en beneficio de nuestros visitantes.

  • c) Debemos proyectar el contenido y funcionamiento de la página a través de la elaboración de un borrador.

  • d) No debemos cargar nuestra página Web de mucha información, imágenes y otros elementos. Lo más recomendable es incluir entre 15 y 20 Kb de gráficos por página.

  • e) Elegir cuidadosamente el lugar donde se colocará un vínculo.

Es necesario crear una carpeta donde se incluirán todos los archivos que formarán parte de la página Web, podemos crear dentro de esta carpeta otras para almacenar imágenes, sonidos, videos, etcétera.

Nuestra primer página deberá guardarse con el nombre de Index.html, de esta manera el navegador

la reconocerá como la página principal

.

Manual de prácticas Computación Básica II 3

Manual de prácticas

Computación Básica II

Manual de prácticas Computación Básica II HTML Html significa H ipeter T ext M arkup L

Manual de prácticas

Computación Básica II

HTML

Html significa HipeterText Markup Language, Lenguaje de Marcación de Hipertexto e indica al

navegador

de

Internet la forma de representar el texto y

los gráficos que la página Web puede

contener.

ETIQUETAS O TAGS

Un documento html consta de texto que define el contenido de la página Web y de una serie de

etiquetas que

son las instrucciones del lenguaje que definen la forma en que debe presentarse el

contenido de la página Web.

 

Las etiquetas siempre comienzan con el símbolo menor que “<” y terminan con el símbolo mayor que

>”.

 

La palabra que se encierra entre esos dos símbolos indica que acción debe realizar el navegador de

Internet o qué tipo de información aparece a continuación.

 

Para indicarle al navegador de Internet hasta dónde ha de aplicarse la acción de una etiqueta, se

utiliza la misma etiqueta pero con el símbolo “

/” justo delante de la palabra.

 

Estructura de un documento HTML

Primera: El encabezamiento o cabecera.

Comprendido entre las etiquetas <HEAD> y </HEAD> dentro de ellas hay información que no se ve en la pantalla principal, en la cabecera se localiza principalmente el título del documento comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, El título se verá en la barra del título de la ventana principal, otras etiquetas que podemos

encontrar en la cabecera son: <link>, <style>, <script>, <meta>.

 

Segunda: El cuerpo.

Comprendido entre las etiquetas <BODY> y </BODY> dentro de estas etiquetas está toda la información contenida en la Web que aparece en la pantalla principal, por ejemplo (texto, imágenes,

audio, video, enlaces, etc.)

 

La estructura básica de un documento html es la siguiente:

<HTML>

<HEAD> <TITLE>Aquí va el título de nuestra página</TITLE> </HEAD>

<BODY>

Contenido de la página

</BODY>

</HTML>

En donde:

<HTML> Indica el comienzo de todo documento html.

<HEAD> Indica el inicio de la cabecera de la página.

En donde: <HTML> Indica el comienzo de todo documento html. <HEAD> Indica el inicio de la

Manual de prácticas

Computación Básica II

<TITLE>Título</TITLE> Entre las dos etiquetas queda el título de la página, este título es el que aparece en la barra de título del navegador.

</HEAD> Indica el fin de la cabecera de la página.

<BODY> Marca el inicio del cuerpo de la página Web. En el espacio entre <BODY> y </BODY> se colocarán las etiquetas que conformaran las páginas.

</BODY> Indica el fin del cuerpo de la página.

</HTML> Marca el fin de toda la página Web.

La mayoría de las etiquetas aparecen en la estructura básica por parejas. Todo documento html está formado por dos bloques que pueden incorporar otros comandos: <HEAD>…</HEAD> y <BODY>… </BODY>

Para crear páginas Web, muchos diseñadores generan está estructura básica y la guardan en un archivo, así cada vez que van a diseñar una nueva página Web la abren para utilizarla como una plantilla.

Bloc de notas (Editando nuestras páginas Web)

Las páginas Web son archivos de texto, y para crearlos, basta utilizar cualquier editor de texto capaz de guardar los archivos con formato de texto.

  • 1. Abrimos el Bloc de notas.

  • 2. Escribimos el código del programa.

  • 3. Guardamos el documento con el nombre deseado y la extensión .html, e indicamos la carpeta donde se almacenarán todos los códigos que la completarán.

Internet Explorer (Visualizando nuestras páginas Web)

  • 1. Abrimos el navegador Internet Explorer o Netscape Communicator.

  • 2. Elegimos el menú Archivo.

  • 3. Elegimos Abrir…

  • 4. Damos clic al botón Examinar…

  • 5. Buscamos la carpeta donde tenemos almacenados nuestros archivos.

  • 6. Elegimos el archivo a ejecutar.

  • 7. Damos clic al botón Abrir.

  • 8. Finalmente damos clic al botón Aceptar.

LISTA DE ETIQUETAS

LISTA DE ETIQUETAS Manual de prácticas Computación Básica II ETIQUETAS DESCRIPCIÓN ATRIBUTOS <HTML>y</HTML> Indican el inicio

Manual de prácticas

Computación Básica II

ETIQUETAS

DESCRIPCIÓN

ATRIBUTOS

 

<HTML>y</HTML>

Indican el inicio y fin del código HTML.

Sin atributos

 

<HEAD>y</HEAD>

Indican la “Cabecera” etiqueta de inicio y fin, su contenido aparecerá en la barra de título de la

 

Sin atributos

 

ventana.

 

<BODY>y</BODY>

Indican el “Cuerpo” etiqueta de inicio y fin, son

 

leftmargin="0a35pixeles", margen

donde se contiene la información que aparece en la página web.

izquierdo. topmargin="0a35 pixeles" margen superior.

Fondo de página

 

Hay dos formas de modificar el fondo de

una página Web:

 

Cambiando el color de

fondo de la página. Insertando

una imagen

como fondo de la página.

Color de fondo BGCOLOR=”color”

 

Atributo de <BODY>, permite cambiar el color de fondo. Donde “color” es el nombre del color que deseamos aplicar al fondo de la página pero en inglés.

Imagen de fondo BACKGROUND=URL Atributo de <BODY>, permite crear un

fondo

a

partir de

una imagen. Donde

URL es la dirección y el nombre del

archivo que contiene

la

imagen

que

deseamos colocar como fondo de nuestra página.

bgcolor="Color" Color de fondo text="#FF0000" Color de fuente. background="fondo1.gif" insertar

imágen de fondo.

 

<META>

La etiqueta <meta> se utiliza para añadir información sobre la página. Está información puede ser utilizada por los buscadores.

 

A través de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de información, y el atributo content indica el valor de dicha información. Los tipos de información más utilizados son los siguientes:

author Autor de la página classification Palabras para clasificar la página en los buscadores description Descripción del contenido de la página generator Programa utilizado para crear la página keywords

Palabras clave

 

<BR>

Salto de línea (punto y aparte), no requiere una

Sin atributos

 

etiqueta de fin.

<P>y</P>

Cambio de párrafo, cada vez que comience un

Atributo

de

la

etiqueta

<P>,

permite

Manual de prácticas Computación Básica II nuevo párrafo se insertará una línea en blanco para separar
Manual de prácticas
Computación Básica II
nuevo párrafo se insertará una línea en blanco
para separar un párrafo de otro.
alinear párrafos al centro, a la izquierda o
a la derecha.
<P ALIGN=”alineación”>
CENTERCentro
LEFT
Izquierda
RIGHT
Derecha
JUSTYFY
Justificado
<CENTER> y </CENTER>
Para centrar texto, similar a <P
ALIGN=CENTER>Texto a centrar</P>
Sin atributos
ETIQUETAS DESCRIPCIÓN
ATRIBUTOS
<B> y </B>
<I> y </I>
<U> y </U>
<SUP> y </SUP>
<SUB> y </SUB>
<FONT SIZE=”x”> y </FONT>
Permiten resaltar un texto en formato negrita.
Permiten resaltar un texto en formato cursiva.
Permiten resaltar un texto subrayándolo.
Permiten aplicar el formato de superíndices.
Permiten aplicar el formato de subíndices.
Tamaño de letra, “x” indica el tamaño.
Sin atributos
Sin atributos
Sin atributos
Sin atributos
Sin atributos
Comprendido entre 1 y 7, donde 1 es el
<FONT
COLOR=”color”>
y
</FONT>
Color de letra, “color” es el nombre del color
que deseamos aplicar pero en inglés.
menor tamaño y 7 el mayor. El tamaño de
letra por defecto es 3.
Blanco nieve Snow
Blanco White
Negro Black
Gris oscuro DarkGray
Gris Gray
Gris claro LightGray
Azul marino NavyBlue
Azul Blue
Turquesa Turquoise
Cyan Cyan
Verde claro LightGreen
Verde Green
Amarillo Yellow
Oro Gold
Beige Beige
Naranja Orange
Rojo Red
Rosa Pink
<FONT
FACE=”nombre”>
y
Algunos TIPOS DE LETRAS
</FONT>
Tipo de letra, “nombre” es el nombre del tipo
de letra que deseamos presentar, se
recomienda utilizar las fuentes más comunes.
En caso de que la computadora no contenga el
tipo de letra especificado el texto no podrá ser
visualizado.
<H#>Título</H#>
Para resaltar títulos, donde
# puede
ser
un
número cualquiera entre 1 y 6, siendo el 1 el
<UL
TYPE=disc
o
circle
o
título de mayor tamaño y 6 el de menor,
aunque lo más común es utilizar encabezados
entre 1 y 3.
Listas no ordenadas.
Arial
Times New Roman
Tahoma
Century
Courier New
Siendo el 1 el título de mayor tamaño y 6
el de menor, aunque lo más común es
utilizar encabezados entre 1 y 3.
En este tipo
de
listas, se utiliza
como
square>
<LI>Elemento 1 de la lista
<LI>Elemento 2 de la lista
<LI>Elemento 3 de la lista
<LI>Elemento n de la lista
</UL>
marcador un símbolo que puede ser un
círculo (circle), un disco (disc) o un
cuadrado (square) para indicar sus
elementos. Los nombres de los símbolos
deben escribirse en minúsculas.
<OL TYPE=”tipo”>
<LI>Elemento 1 de la lista
<LI>Elemento 2 de la lista
<LI>Elemento 3 de la lista
Listas ordenadas.
En
este
tipo
de
listas,
se
utiliza
un
número
o
un elemento
de
orden que
pueden
ser
letras
minúsculas o
mayúsculas o bien números latinos para
Manual de prácticas Computación Básica II <LI> Elemento n de la lista </OL> etiquetar los diferentes

Manual de prácticas

Computación Básica II

<LI>Elemento n de la lista </OL>

 

etiquetar los diferentes elementos de la misma. Donde “tipo” es el símbolo de numeración de nuestra lista ordenada y puede tomar alguno de los siguientes valores permitidos:

Valor 1

Destacado:

La numeración se presenta con números

arábigos, en

caso

de

que

faltase el

atributo TYPE, se presenta así por

omisión.

ETIQUETAS

DESCRIPCIÓN

ATRIBUTOS

<HR>

Líneas de separación, es una línea recta que va de extremo a extremo de la pantalla del navegador de Internet y al ajustar el ancho de ésta, también se ajustará de forma automática. Es una etiqueta Abierta, es decir, no necesita de la etiqueta </HR>.

<HR WIDTH=#> Atributo, ancho de línea, donde # indica la anchura, en píxeles o en tanto por ciento del ancho de la página del navegador, en este caso, será necesario agregar el símbolo %. Ejemplo:

<HR WIDTH=40%>Muestra una línea que ocupa el 40% de la pantalla del navegador de Internet. <HR WIDTH=110>Muestra una línea que tiene 110 píxeles de ancho.

<HR SIZE=#>

Atributo, grosor de línea, donde # indica

el grosor de la línea en píxeles.

 

<HR COLOR=”color”> Atributo, color de línea, donde “color” es el nombre del color que deseamos aplicar a la línea pero en inglés.

Ver colores en la etiqueta Font color. <HR ALIGN=CENTER, LEFT o RIGHT>

Atributo, de forma predeterminada las líneas horizontales se presentan centradas en la pantalla del navegador de Internet, pero se pueden alinear al centro (CENTER), a la izquierda (LEFT) o a la derecha (RIGHT). Este atributo es válido cuando se define un ancho de línea, ya que si se deja la línea con el ancho por omisión, la alineación de la

misma no tendrá ningún efecto.

 

<IMG SRC=URL>

Inserción de imágenes, donde URL es la

Distancia entre el Texto y la Imagen

Tamaño WIDTH y HEIGHT

 

dirección completa o bien la trayectoria y el nombre del archivo que contiene la imagen que

Atributos, WIDTH determina el ancho de la imagen y su valor por defecto es 100

deseamos insertar, los tipo de imágenes idóneos para ser integrados son aquellas que tienen el formato GIF y JPEG.

ejemplo:

puntos de imagen. HEIGHT determina la altura de la imagen. Es posible definir el tamaño de una imagen mediante porcentajes, por ejemplo 30% hará que la imagen sea mostrada con un 30% de su tamaño original, no todos los

izquierda. “posición” puede tomar

<IMG SRC=Nombre.jpg ALT="Paisaje nevado" ALIGN=LEFT VSPACE=30 HSPACE=30>

navegadores reconocen el símbolo %. Posición ALIGN=”posición”

Atributo, permite alinear la imagen. De forma predeterminada, los navegadores de Internet alinean las imágenes a la

Manual de prácticas Computación Básica II cualquiera de las siguientes opciones: MULTIMEDIOS: MIDDLE, permite colocar la
Manual de prácticas
Computación Básica II
cualquiera de las siguientes opciones:
MULTIMEDIOS:
MIDDLE, permite colocar la imagen y el
texto de tal forma que el centro de ambos
permanece a la misma altura dentro de la
línea. BOTTOM, permite colocar la base
de la imagen y el texto al mismo nivel.
TOP, permite colocar la imagen y el texto
en el tope superior. LEFT, coloca la
imagen a la izquierda de la página,
desplazando el texto a la derecha.
RIGHT, permite colocar la imagen a la
derecha del texto.
Sin atributos
Animaciones
Permite visualizar dibujos animados, archivos
con la extensión .GIF.
<IMG
SRC=”nombre
del
archivo.
GIF”
ALT=”Taza
de
café”>
ETIQUETAS
DESCRIPCIÓN
HIPERVÍNCULOS
* Internos
ATRIBUTOS
Primero debemos crear un “Marcador de
<A>Y</A>
A través de ellos podemos crear hipervínculos
a una parte u otra de nuestra página Web.
acceso” dentro de nuestra página Web,
utilizando las etiquetas:
* En una imagen
A través de ellos podemos colocar
hipervínculos a las imágenes. Esto se
logra anidando entre las etiquetas
<A> y </A>
La referencia del “Marcador de acceso” y
el URL de la imagen.
*A una URL
Permite crear accesos a una zona
concreta de otra página Web y para ellos
debemos combinar las dos técnicas
vistas hasta ahora en una sola. Antes de
comenzar debemos considerar lo
siguiente:
En primer lugar, será necesario que la
página destino u objetivo, tenga
“Marcadores de acceso” creados con la
etiqueta <A> y el atributo NAME, es
decir:
<A NAME=”nombre o referencia”>
En segundo lugar, la página origen debe
contener la etiqueta <A> con el atributo
HREF indicando el nombre de la página
destino y el “Marcador de acceso”, o sea:
<A HREF=URL#nombre o
referencia>”descripción del
documento”
TABLAS:
Las
tablas
en
una
página
Web están
*Crear <TABLE> y </TABLE>
conformadas
por
filas
y
columnas,
y
a
la
Delimitan el principio y el fin de
intersección de éstas, se le llama celda. Dentro
la tabla, y todo lo que
escribamos dentro de esta área,
pertenecerá a la tabla.
de una tabla podemos colocar texto, imágenes
o hipervínculos,
por
lo
que
en
una
tabla
podemos
presentar
información
en
varias
*Filas <TR> y </TR>
columnas.
Permiten delimitar el número de
filas.
*Celda <TD> y </TD>
Atributo, permite trazar líneas de contorno
alrededor de las celdas.
Tipos de Bordes BORDER=”n”
<TABLE BORDER=”n”>
Atributo, permite indicar el grosor que va a
tener el contorno de la tabla, sin modificar el
contorno de las celdas. Donde “n” es el grosor
del borde de la tabla en píxeles. Si “n” es
igual a 0, no se mostrarán bordes y si “n” es
igual a 1 se visualizará el grosor predefinido.
Manual de prácticas Computación Básica II Permiten definir el número de Títulos <CAPTION> y </CAPTION> <TD

Manual de prácticas

Computación Básica II

Permiten definir el número de

 

Títulos <CAPTION> y </CAPTION>

<TD COLSPAN=”m”>

celdas

por

filas,

y

lo

que

Atributo, permite colocar títulos a las tablas.

escribamos entre estas

<CAPTION>”título de la tabla”</CAPTION>

etiquetas

es

lo

que

se

va

a

Donde “título de la tabla”, es un texto

mostrar dentro de la celda.

 

descriptivo de la tabla. El título de la tabla se

*Bordes BORDER

 

adapta al ancho de la tabla, o sea que el título

<TABLE BORDER>

comienza a la altura del borde izquierdo de la

Atributo, permite trazar líneas de

tabla y termina a la altura del borde derecho.

contorno

alrededor de

 

las

Alineación de tablas ALIGN=”alineación”

celdas.

Atributo, permite colocar la tabla con respecto

a la ventana del navegador. <TABLE ALIGN=”alineación”> Donde “alineación” puede tomar alguno de los siguientes valores: CENTER, donde la tabla aparece centrada dentro de la ventana del navegador de Internet. LEFT, donde la tabla aparece a la izquierda dentro de la ventana del navegador de Internet. RIGHT, donde la tabla aparece a la derecha dentro de la ventana del navegador de Internet. Combinar celdas Atributos, permiten combinar celdas en sentido vertical y en sentido horizontal. En sentido Horizontal:

Donde “m” es el número de celdas inferiores que va a ocupar. Color de Borde <TABLE BORDERCOLOR=”color”> Atributo, permite definir el color de las líneas de las tablas. Donde “color” es el color de los bordes de la tabla en inglés. Existen otros dos atributos que nos ayudan a colorear las tablas de diferentes colores:

BORDERCOLORLIGHT, colorea solamente el borde superior y el borde izquierdo de la tabla. BORDERCOLORDARK, colorea solamente el borde inferior y el borde derecho de la tabla. Este atributo nos ayuda a darle un efecto de tercera dimensión. Color de Fondo de tabla <TABLE BGCOLOR=”color”> Atributo, permite aplicar un color de fondo a la tabla, donde “color” es el color de fondo de

la tabla en inglés.

<BLOCKQUOTE>

 

Sangría de párrafo

Sin atributos

PUBLICACIÓN EN INTERNET

Hay que tomar en cuenta las siguientes consideraciones:

  • 1. Construir una carpeta en la que almacenaremos todos y cada uno de los elementos que formaran nuestro sitio Web.

  • 2. Hacer pruebas de funcionamiento de nuestro sitio Web en nuestra máquina hasta estar bien seguros de que todo funciona bien.

  • 3. Publicarlo en Internet.

Pasos a seguir:

Pasos a seguir: Manual de prácticas Computación Básica II 1. Hacemos doble clic en el icono

Manual de prácticas

Computación Básica II

  • 1. Hacemos doble clic en el icono de Mi PC.

  • 2. En la ventana Mi PC, hacemos clic en Documentos de… (es el nombre del usuario

del equipo).

  • 3. En la ventana Mis Documentos, hacemos clic sobre la carpeta que deseamos publicar en la Web.

  • 4. En la sección Tareas de archivo y carpeta, hacemos clic en la opción Publicar está

carpeta en Web.

  • 5. En la ventana del Asistente para la publicación en Web, hacemos clic en el botón

Siguiente>.

  • 6. El asistente nos muestra los archivos seleccionados para ser publicados en la Web, si estamos de acuerdo hacemos clic en el botón Siguiente>.

  • 7. El asistente pide que nos conectemos a Internet, damos clic al botón Conectar.

Después de publicar la carpeta en un sitio Web se coloca un acceso directo a dicho sitio en la lista de favoritos del navegador de Internet.

Al publicar una carpeta en la Web, ésta se copia en un servidor Web o una ubicación de red como una carpeta comprimida o un sitio FTP.

CARACTERES ESPECIALES

CARACTERES ESPECIALES Manual de prácticas Computación Básica II Algunos de los navegadores de Internet no reconocen

Manual de prácticas

Computación Básica II

Algunos de los navegadores de Internet no reconocen caracteres como la

ñ

o las vocales

acentuadas y por lo tanto si nuestra página Web es leída por un anglosajón, su navegador de

Internet interpretaría dichos caracteres con símbolos raros.

La tabla siguiente contiene una relación de los nombres, también llamadas “entidades de carácter”, de los caracteres especiales más importantes:

Carácter

Código

Carácter

Código

Á

&Aacute;

á

&aacute;

É

&EAacute;

é

&eacute;

Í

&IAacute;

í

&iacute;

Ó

&OAacute;

ó

&oacute;

Ú

&UAacute;

ú

&uacute;

Ñ

&Ntilde;

ñ

&ntilde;

Ejemplos:

La palabra Canción se escribiría:

Canci&oacute;

La palabra Página se escribiría:

P&aacute;gina

La palabra Próximamente se escribiría:

Pr&oacute;ximamente

Nota: Te deseamos el mejor de los ¡Éxitos!

Manual de prácticas Computación Básica II INSTRUCCIONES: Lee con atención y asimila las instrucciones para adquirir

Manual de prácticas

Computación Básica II

INSTRUCCIONES: Lee con atención y asimila las instrucciones para adquirir y lograr las competencias requeridas en estas evidencias. Es tu responsabilidad proponer y tener los archivos que complementan las evidencias como son las imágenes, sonidos, animaciones (.gif), videos, sonidos, pistas musicales, fondos y archivos para el buen funcionamiento de las Páginas Web, respetando siempre el tema del “PROYECTO” a tratar. Los resultados que se muestran en este manual son ejemplos.

EVIDENCIA 1

Crear la carpeta principal con el nombre de tú grupo: “2IM_” y guárdala en tu memoria “FLASH”.

Nota: No olvides hacer siempre un respaldo de tus trabajos… “Evita problemas”.

EVIDENCIA 2

Diseña la página principal WEB creada con la estructura básica del código HTML, contendrá:

Una imagen de fondo, Márgenes, un título creado como marquesina que diga “¡Bienvenidos al

"Fantástico Ambiente" de la WEB!”, aplicar el efecto de “va y ven”.

(Características de la fuente serán: Tipo “Verdana”, size=“24”, resaltándola con una línea de división anterior y posterior a la marquesina, aplica color al texto con código

hexadecimal (RGB), a la marquesina y a las líneas de división. Aplica por lo menos dos atributos a cada elemento (a criterio del diseñador).

-Insertar la imagen del escudo del Instituto Politécnico Nacional (Centrada)

-Ahora Un párrafo:

“El PROYECTO WEB es el uso correcto y aprovechamiento de Internet en toda la extensión

de la palabra, se ha convertido en nuestros días en uno de los vehículos de comunicación más importantes de nuestra historia. No es necesario pensar en el futuro, hoy en día, las empresas de cualquier industria requieren implementar las diversas herramientas y las ventajas que les ofrece la red mundial”.

El párrafo tendrá (Alineación “Justificada”, Características de la fuente: size=“32”, tipo

“Verdana”, color de fuente a criterio del diseñador, Interlineado del “200%”. -Crea un hipertexto que diga “PROYECTO WEB” que ligue a la segunda página WEB que

nombraras “PROYWEB”

(Alineación “CENTRADA”, Características de la fuente: tipo “Verdana”, size=“30”,

color: alink=”VERDE” link=”AMARILLO” vlink=”NARANJA”). -Un listado con tu nombre completo, empezando por apellido paterno, apellido materno y

nombres. (Lista con viñetas en forma de cuadro, alineación derecha, fuente: Tipo “Verdana”,

size=“24” y color de fuente a criterio del diseñador). -Ahora Insertar una pista de sonido

Para finalizar está página nómbrala como “INDEX.HTM” y guárdala en la carpeta principal que creaste en un principio “2IM_”. Los archivos que se requieren para el funcionamiento adecuado de la Página principal WEB “INDEX” se guardarán en la carpeta principal “2IM_”.

Nota: La extensión de los archivos Web puede ser “HTM o HTML”. Elige una y que sea la extensión que siempre asignaras a tus archivos.

Código:

<html>

<head>

<title>INDEX</title>

</head>

Código: <html> <head> <title>INDEX</title> </head> Manual de prácticas Computación Básica II <body background="F1.jpg" leftmargin="30" topmargin="30" alink="green"

Manual de prácticas

Computación Básica II

<body background="F1.jpg" leftmargin="30" topmargin="30" alink="green" link="yellow" vlink="orange" >

(Ojo, nombre y extensión de la Imagen de fondo)

<hr align="center" width="300%" size="10" color="orangered"> <marquee bgcolor="black" scrollamount="15" behavior="alternate"><font size="24" color="#FFFF00" fase="verdana"> "Bienvenidos al Fantástico Ambiente de la WEB"</font></marquee> <hr align="center" width="300%" size="10" color="orangered"> <br>

<h1><p

align="right"><img

src="BALL.gif"><a

href="PROYECTO/MARCO.HTM" target="_top">Proyecto Web:</a></p></h1> <br>

<center><img src=IPN2.jpg></center>

(Ojo, nombre y extensión de la Imagen a insertar)

<br> <p align=justify style="line-height="200%"><font size="32" color="#ffff00" fase="verdana"> “El PROYECTO WEB es el uso correcto y aprovechamiento de Internet, en nuestros días se ha convertido en la herramienta de comunicación más importante de nuestra historia. No es necesario pensar en el futuro, hoy en día las empresas de cualquier industria requieren implementar las diversas herramientas y las ventajas que les ofrece la red mundial”.</font></p> <br> <hr align="center" width="300%" size="10" color="orangered"> <br>

<bgsound src="M1.MP3"> </body>

</htm>

Quedaría así:

Quedaría así: Manual de prácticas Computación Básica II EVIDENCIA 3  En la carpeta principal “2IM_”

Manual de prácticas

Computación Básica II

Quedaría así: Manual de prácticas Computación Básica II EVIDENCIA 3  En la carpeta principal “2IM_”

EVIDENCIA 3

En la carpeta principal “2IM_”

Crear una subcarpeta con el nombre de “PROYECTO”. En la subcarpeta “PROYECTO”, Crear un número de carpetas con diferentes nombres donde

se organizarán los archivos requeridos para el funcionamiento adecuado de las páginas WEB que se diseñarán más adelante, los nombres de las carpetas estarán en función del tipo de archivo, por ejemplo: Los archivos de video se organizarán en una carpeta llamada “VIDEO”; Los archivos de sonido se organizarán en una carpeta llamada “SONIDO” Los archivos de imagen se organizarán en una carpeta llamada “IMAGEN” y así sucesivamente. Las páginas Web: “MARCO”, “TÍTULO”, “MENÚ”, “Inicio”, “Alfa”, “Beta” y “Gama” que se crearan en la carpeta “PROYECTO”.

Nota: Recuerda tus conocimientos previos del curso de Computación Básica I en la Unidad de Sistema Operativo Gráfico.

EVIDENCIA 4

EVIDENCIA 4 Manual de prácticas Computación Básica II  Diseña la página WEB que nombraras “MARCO”

Manual de prácticas

Computación Básica II

Diseña la página WEB que nombraras “MARCO” la cual contendrá TRES Frames diseñado de la siguiente forma: Una fila superior al 20% y dos columnas: Una izquierda al 25% y otra derecha al 75%, los Frames no deben tener la posibilidad de modificar sus tamaños cuando sean mostrados en el navegador.

Nota: No requiere de la etiqueta <BODY>

Código:

<html>

<head>

<title>MARCO</title>

</head>

<frameset rows=20%,*> <frame name="top" src=TÍTULO.HTM> <frameset cols=25%,* > <frame name="izquierda" src="MENU.HTM" noresize> <frame name="derecha" src="inicio.htm" > </frameset>

</html>

Nota: Ten cuidado de escribir los nombres y las extensiones de las páginas “TÍTULO.HTM”, “MENÚ.HTM” e “Inicio.htm” con mayúsculas o minúsculas y también sus extensiones según el caso.

Se verá así:

EVIDENCIA 4 Manual de prácticas Computación Básica II  Diseña la página WEB que nombraras “MARCO”

EVIDENCIA 5

EVIDENCIA 5 Manual de prácticas Computación Básica II Crear la página que nombraras “TÍTULO” la página

Manual de prácticas

Computación Básica II

Crear la página que nombraras “TÍTULO” la página tendrá color de fondo “MARRON”.

Crea una tabla de 1 x 3 alineación centrada, con un ancho del 80% y un alto del 20%,

 

En

la

celda

central contendrá un encabezado con dos

párrafos

el primero

que

diga

*COMPUTACIÓN BÁSICA II* y el segundo,*PROYECTO WEB 2013-2014_B* las características son: Fuente: alineación=centrada, color blanco, size=5, se insertaran dos imágenes, en la celda izquierda el logotipo del IPN y en la celda derecha el logotipo del C.E.C. y T. 7, ambas imágenes tendrán un ancho de 100 y un alto de 120. Está página bebe mostrarse en el Frame superior (“top”).

Código

<html>

<head>TÍTULO</head>

<body bgcolor=”maroon”> <table width=”80%” height=”20%” align=center> <tr> <td align=right><img src=EIPN.Jpg width=”100” height=”120”></td> <td><center><font color=white size=5><p>*Computación Básica II*</p><p>*Proyecto Web 2014-B*</p></font></center></td> <td><img src= Cecyt7.png width=100 height=120></td> </tr> </table> </body>

</html>

Se verá así:

EVIDENCIA 5 Manual de prácticas Computación Básica II Crear la página que nombraras “TÍTULO” la página

EVIDENCIA 6

EVIDENCIA 6 Manual de prácticas Computación Básica II  Diseña la página WEB que nombraras “MENU”,

Manual de prácticas

Computación Básica II

Diseña la página WEB que nombraras “MENU”, se aplicara color de fondo por el método

nombre (a criterio del diseñador), contendrá un título que diga “CONTENIDO” con el tamaño más grande permitido en los encabezados del código HTML, alineación: “Centrada”, características de la fuente: mayúsculas, aplicar un color diferente por letra. Crea un hipervínculo de texto que diga: “PRINCIPAL” que vinculará a la página principal

“INDEX”, anteponer una imagen “gif” que hará la función de viñeta, la fuente será de color rojo y size=”4”, un separador de color azul, ancho=”75%” y size=”8”. Inmediatamente después enlistaras los nombres de las páginas WEB (“Alfa”, “Beta” y “Gama”) en este orden, haz uso de la etiqueta <menú>, anteponer una imagen “gif” en el enlistado de las palabras “Alfa”, “Beta” y “Gama”, que hará la función de viñeta, color=maroon, estilo=negritas, un separador de color azul, ancho=”75%” y size=”8”. La página WEB “MENU” debe mostrarse en el Frame Izquierdo.

Código:

<html>

<head> <title> MENU </title> </head> <body bgcolor="”el color”">

<center><h1><font color=”proponer”>=C=</font><font color=” proponer”>=O=</font><font color=”proponer”>=N=</font><font color=” proponer”>=T=</font><font color=” proponer”>=E=</font><font color=” proponer”>=N=</font><font color=” proponer”>=I=</font><font color=” proponer”>=D=</font><fontcolor=” proponer”>=O=</font></h1></center> <br><br>

<img src="proponer.gif"><a href="

..

/INDEX.HTM"

size=4>PRINCIPAL</a>

target="_top"><font

color=red

<hr size="8" color=blue width=75%> <br> <menu> <img src="proponer.gif"><b><a href="Alfa.html" target="derecha"><font color=”maroon”>ALFA</font></a></b> <br> <img src="proponer.gif"><b><a href="Beta.htm" target=derecha><font color=”maroon”>BETA</font></a></b> <br> <img src="proponer.gif"><b><a href="Gama.htm" target=derecha><font color=”maroon”>GAMA</font></a></b> <br> <br> </menu> <hr size="8" color=blue width=75%> </body> </html>

Se verá así:

Se verá así: Manual de prácticas Computación Básica II A CONTINUACIÓN  Crea cuatro páginas y

Manual de prácticas

Computación Básica II

Se verá así: Manual de prácticas Computación Básica II A CONTINUACIÓN  Crea cuatro páginas y

A CONTINUACIÓN

Crea cuatro páginas y nómbralas como a continuación se indica: “Inicio”, “Alfa”, “Beta”, “Gama”.

Las páginas se mostrarán en el Frame derecho.

Dos de las cuatro páginas debe tener color de fondo aplicando código hexadecimal (RGB).

Dos de las páginas deben tener imagen de fondo.

EVIDENCIA 7

EVIDENCIA 7 Manual de prácticas Computación Básica II La página “Inicio” será la página de presentación,

Manual de prácticas

Computación Básica II

La página “Inicio” será la página de presentación, que dará la bienvenida al proyecto está página

permanecerá en pantalla al inicio de la exposición conservándose después de que se muestre cada una de las otras tres páginas (“Alfa”, “Beta”, “Gama”).

Creas una marquesina, pista de audio, texto, líneas de división (separadores) y una imagen propuestos por el diseñador.

Código:

<html>

<head>

<title>Inicio</title>

</head>

<body bgcolor="proponer"> <marquee><center><h1><font color="proponer">=HOLA QUE TAL BIENVENIDO=

</h1></font></center></marquee>

<bgsound src="proponer.mp3"> <br><br> <hr size="8" color=”proponer” width=”100%”> <center><img src=”proponer”.gif width=”400” height=”400”></center> <hr size="8" color=”proponer” width=”100%”> </body>

</html>

Se verá así:

EVIDENCIA 7 Manual de prácticas Computación Básica II La página “Inicio” será la página de presentación,

EVIDENCIA 8

EVIDENCIA 8 Manual de prácticas Computación Básica II En la página “Alfa” crea dos hipervínculo de

Manual de prácticas

Computación Básica II

En la página “Alfa” crea dos hipervínculo de texto que digan: “SALIR” ubícalos al inicio y fin de la página, el de inicio alineado a la derecha y el de fin alineado a la izquierda, vincúlalos a la Página “MARCO”.

A continuación crea una tabla con las siguientes características:

Una tabla de 3x2 que contenga tres celdas sencillas y dos celdas que se combinen.

Aplica tres atributos propios del diseño de la Tabla.

En la celda superior izquierda Inserta la imagen del logo del Poli, aplica tres atributos propios

de la imagen. En la celda central superior crea un hipertexto con la palabra EXCEL, aplica al texto, una

apariencia en diagonal y centrada de forma escalonada, que vincule a un archivo generado en Excel, aplica dos atributos propios de hipertexto, escribe un encabezado (Tamaño de la fuente el más grande permitido en el código HTML) debajo del hipertexto que diga “Hipervínculo”, alineación centrada, aplica dos atributos propios al texto. En la celda superior derecha inserta un video con controlador y aplica dos atributos propios

de video. En la celda crea inferior izquierda crea un hipertexto con la palabra “POLITÉCNICO” que

vinculará a la página ipn.mx, y aplica una imagen de fondo a la celda. A la celda inferior derecha aplica una imagen de fondo.

Código:

<html>

<head>

<title>tres</title>

</head>

<body background="proponer.jpg">

<br><br><br><br> <a href="MARCO.HTM" target="_top"><p align="right"><font color="darkgreen"

size="5">Salir</p></a><br>

<table border=5 align=”center” width=”50%”> <tr>

<td><center><img

src="IPN.gif"

height="200"></center></td>

<td><a

alt="Poli"

whidt="100"

href="excel.xlsx"><font

color=green&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb

sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

;&nbsp;&nbsp;&nbsp;E<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n

bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs

p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X<br>&nbsp;&nbsp;&

nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb

Manual de prácticas Computación Básica II sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;L <br><br></font></a><center><font fase=”Arial”

Manual de prácticas

Computación Básica II

sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n

bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs

p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n

bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs

p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;L

<br><br></font></a><center><font

fase=”Arial”

color=green>Hipervínculo</font></center></td> <td><center><embed src="video/proponer.wmv" whidt="100"

height="200"></center></td></tr>

<tr> <td bgcolor=cyan><a href="http://www.ipn.mx/"><center><font color=hotpink>POLITÉCNICO</font></center></a></td> <td colspan=2 body background="proponer.jpg"></td></tr> </table> <a href=MARCO.HTM target="_top"><font color=yellow size=5>Salir</a><br>

</body>

</html>

Se verá así

Manual de prácticas Computación Básica II sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;L <br><br></font></a><center><font fase=”Arial”

EVIDENCIA 9

EVIDENCIA 9 Manual de prácticas Computación Básica II La página “Beta” crea dos hipervínculo de texto

Manual de prácticas

Computación Básica II

La página “Beta” crea dos hipervínculo de texto que digan: “SALIR” ubícalos al inicio y fin de la página, el de inicio alineado a la derecha y el de fin alineado a la izquierda, vincúlalos a la Página “MARCO”.

Crear título, subtítulos y texto, distribuidos en tres párrafos, con las siguientes características.

Los títulos de los párrafos deben ser encabezados con el segundo tamaño permitido en escala de mayor a menor para HTML, alineación “centrada” y con mayúsculas. A cada párrafo aplica un interlineado diferente. Aplicar a cada uno de los párrafos una alineación diferente, también aplica: size, tipo, color y estilo de fuente diferentes. Crea una línea de división entre cada párrafo, por lo menos aplica tres atributos a las líneas

de división. Por lo menos aplica sangría a uno de los párrafos.

Ahora crea una lista de tipo ordenada.

Código:

<html>

<head>

<title>Beta</title>

</head>

<body bgcolor="black">

<a href="MARCO.HTM" target="_top"><p align="right"><font color="yellow"

size="5">Salir</p></a><br>

<center><h1>*FRASES*</h1></center>

<font size="6" color="purple" face="papyrus"><b>

<center><h2>CUANDO</h2></center></b>

<p align="center"><b>

"Cuando te das de golpes contra la pared a lo largo de tu vida, te das cuenta de que algo no está bien y lo racionalizas. Cuando envejeces, enfrentas las cosas porque el tiempo se te está yendo. Mi filosofía a estas alturas es que no hay respuestas para nada. Nada tiene sentido. Para qué preocuparte si no hay respuestas en este mundo. Lo más interesante de la vida es cuando vas manejando y de repente ves un cementerio y dices 'gracias a Dios que no estoy ahí, ¿pero que estoy haciendo con mi vida mientras me llega el tiempo?', creo que de eso se trata todo".

</b></font></p> <br> <hr color="green" size="4"> <hr color="orangered" size="5" width="40%"> <br>

<center><h2>HISTORIA</h2></center>

<p align="justify" style="line-height=200%"> <font size=5 color=red face=algerian><i>

Era la década de los 60’s cuando el Director General del Instituto Politécnico Nacional, Ing. Eugenio Méndez Docurro, manifestó en Junta de Consejo la Creación de una

Manual de prácticas Computación Básica II Escuela Preparatoria Técnica y Planes de Estudio de ciclo Vocacional,

Manual de prácticas

Computación Básica II

Escuela Preparatoria Técnica y Planes de Estudio de ciclo Vocacional, que trabajaría a nivel experimental con planes de estudio piloto a cuatro años. Formando diversas comisiones integradas por personas de gran capacidad en Educación Técnica en general y un profundo conocimiento del I.P.N., realizaron el Plan de Estudios del primero y segundo año en sus tres Áreas: Ciencias Físico Matemáticas, Ciencias Biológicas y Ciencias Sociales. Inicia labores (Nacimiento) en Febrero de 1963 en el Edificio de la Vocacional 5 ubicada en la esquina de Emilio Dondé No. 1 y Enrico Martínez Col. Centro Delegación Cuauhtémoc. En ese mismo año son entregadas las instalaciones de lo que sería la Preparatoria Técnica Piloto ubicada a un costado de la Plaza de las Tres Culturas, dentro de la Unidad Habitacional de Tlatelolco, calle de San Juan de Letrán No. 445 (hoy Eje Central Lázaro Cárdenas). Funcionó este proyecto hasta el año de 1968. Razón al “Movimiento Estudiantil”, la Preparatoria pierde el Edificio de Tlatelolco e inicia su transitar, primero al Edificio No. 8 de la Unidad Profesional de Zacatenco (actualmente “Lic. Adolfo López Mateos”), sede de lo que sería la Escuela Superior de Ingeniería Química e Industrias Extractivas (ESIQUIE). El paso siguiente fue provisionalmente la sede de la Vocacional 2, ubicada en la Av. Nueva Casa de Moneda No. 33, Col. Lomas de Sotelo, Delegación Miguel Hidalgo, mientras se construía el edificio propio que actualmente conocemos, con domicilio en Calzada Ermita Iztapalapa No. 3241, Col. Sta. María Aztahuacán, Delegación Iztapalapa, el cual fue entregado en Agosto de 1969. La inauguración oficial del nuevo plantel de la Vocacional No. 7 se llevó a cabo el 10 de Marzo de 1970. En el año de 1972 cambia el nombre de Vocacional a C. E. C. y T., y es así como nuestra escuela recibe el nombre de Centro de Estudios Científicos y Tecnológicos “Cuauhtémoc” en homenaje al último emperador azteca.

</i></font></p> <br> <hr color="green" size="4"> <hr color="orangered" size="5" width="40%"> <br> <center><h2> ESCUDO CECyT #7 "CUAUHTEMOC"</h2></center>

<p align="right" style="line-height=150%"> <font size="6" color="hotpink" face="Arial"><u>

Antes llamado "preparatoria piloto", proyecto creado en el año de 1963, por el Instituto Politécnico Nacional. En el año de 1972, después de diversos acontecimientos nacionales, se trasforma en C.E.C. y T. durante la gestión del director general Manuel Zorrilla Carcaño. El autor del escudo que representa a este plantel fue el alumno Héctor Cid Cristóbal, en algunas representaciones se aprecia la palabra "CUAUHTÉMOC" bajo el rayo, en otras sobre el mismo. Descripción de sus elementos:

</u></font></p><br> <BLOCKQUOTE> <ol type="1"> <li> Dos engranes, uno de frente, simbolizando la Técnica, objetivo fundamental de la enseñanza

Manual de prácticas Computación Básica II <li> Dos escuadras ubicadas al lado izquierdo del emblema, simbolizan

Manual de prácticas

Computación Básica II

<li> Dos escuadras ubicadas al lado izquierdo del emblema, simbolizan la Construcción. <li> Una careta, que se encuentra en la parte inferior del engrane alude a la especialidad. <li> Soldadura. <li> Un rayo, en parte posterior del engrane como representante de la Electricidad. <li> Las letras IPN, siglas del Instituto Politécnico Nacional, enmarcadas por todos los elementos. <li> En la parte superior de la composición, las siglas de Centro de Estudios Científicos y Tecnológicos y el número siete. <li> En la base del escudo, se ubica el nombre del plantel CUAUHTÉMOC.

</ol> </BLOCKQUOTE> <br> <hr color="green" size="4"> <hr color="blue" size="5" width="40%"> <a href=MARCO.HTM target="_top"><font color=yellow size=5>Salir</a><br>

</body>

</html>

Se vería así

Manual de prácticas Computación Básica II <li> Dos escuadras ubicadas al lado izquierdo del emblema, simbolizan

EVIDENCIA 10

EVIDENCIA 10 Manual de prácticas Computación Básica II Crea la última página “Gama” crea dos hipervínculo

Manual de prácticas

Computación Básica II

Crea la última página “Gama” crea dos hipervínculo de texto que digan: “SALIR” ubícalos al inicio y

fin de la página, el de inicio alineado a la derecha y el de fin alineado a la izquierda, Página “MARCO”.

vincúlalos a la

Crea un título como Marquesina que diga: “TIPOS DE LISTAS” escrito con mayúsculas.

Aplica tres atributos propios a la Marquesina.

Aplica un atributo diferente a cada tipo listas.

Crea índices y subíndices.

Escribir con caracteres especiales, esto con el fin de que entiendas que en las primeras

versiones del lenguaje HTML no se reconocían los acentos. Inserta una pista musical que se encuentre activa hasta que la página deje de estar activa.

Código:

<html>

<head>

<title>Gama</title>

</head>

<body background="FONDOS/F(15).JPG">

<bgsound src="SONIDO/Angel.mid" loop="infinite"> <hr> <marquee <behavior="alternate" scrollamount="8" bgcolor="cyan"> <font size="6"><i><b><center>TIPOS DE LISTAS</center></b></i></font></marquee> <hr>

<center><h2>FORMULAS:</h2><br>

<font size="5"><font color="blue">C<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup> <br>

H<sub>2</sub>O</center></font></font><br>

<hr width="90%" size="16" color="red"> <h3>Listas no ordenadas muestran un símbolo para identificar el elemento<br> UL Type=Círculo(circle) o Disco (disc) o Cuadro (square).</H3><br> Para la creación de listas se clasifican en cuatro tipos:<br> <ul type="circle"> <li>listas no ordenadas <li>listas ordenadas <li>listas de definici&oacute;n <li>listas anidadas

</ul> <br> Para la creación de listas se clasifican en cuatro tipos:<br> <ul type="disc"> <li>listas no ordenadas <li>listas ordenadas <li>listas de definici&oacute;n

<li>listas anidadas </ul>

<li>listas anidadas </ul> Manual de prácticas Computación Básica II <br> Para la creación de listas se

Manual de prácticas

Computación Básica II

<br> Para la creación de listas se clasifican en cuatro tipos:<br> <ul type="square"> <li>listas no ordenadas <li>listas ordenadas <li>listas de definici&oacute;n <li>listas anidadas

</ul>

<br>

<hr width="90%" size="16" color="red"> <h3>Listas ordenadas muestran números o letras para identificar el elemento<br>

OL Type=Tipo(1

o abc

...

o ABC

...

o números romanos en min&uacute;scula i ii ii

iv ...

<br>o

... números romanos en mayúscula.</H3><br>

<ol type="1"> <li>listas no ordenadas <li>listas ordenadas <li>listas de definición <li>listas anidadas </ol><br> <ol type="a"> <li>listas no ordenadas <li>listas ordenadas <li>listas de definición <li>listas anidadas </ol><br> <ol type="i"> <li>listas no ordenadas <li>listas ordenadas <li>listas de definición <li>listas anidadas </ol><br> <hr width="90%" size="16" color="red"> <h3>Listas de Definición compuestas por Términos o Expresiones están formadas por dos elementos:

<br> La definición que aparece en el borde izquierdo y,<br> El término que aparece tabulado a la derecha; dl, dt y dd.

</h3><br>

<Dl>

<DT>Concepto de la materia y la energía. <DD>La materia y la energía no se crean ni se destruye solo se transforman.

</Dl> <hr width="90%" size="16" color="red"> <h3>Listas Anidadas construir listas dentro de otras listas</h3><br> <ul type="disc"> <li>Automóviles SEAT <ul type="square"> <li>IBISA <li>CORDOBA

<li>LEON

</ul> <li>Colores para automóviles SEAT <ul type="circle"> <li><font color="red">rojo</font> <li><font color="yellow">amarillo</font> <li><font color="blue">azul</font>

</ul>

<br> <hr width="90%" size="16" color="red"> <h3>etiqueta menú</h3> <menu> <li>Física <li>Matemáticas <li>Química <li>Inglés <li>Computación </menu>

</body>

</html>

Se vería así:

<li>LEON </ul> <li>Colores para automóviles SEAT <ul type="circle"> <li><font color="red">rojo</font> <li><font color="yellow">amarillo</font> <li><font color="blue">azul</font> </ul> <br>

Manual de prácticas

Computación Básica II

<li>LEON </ul> <li>Colores para automóviles SEAT <ul type="circle"> <li><font color="red">rojo</font> <li><font color="yellow">amarillo</font> <li><font color="blue">azul</font> </ul> <br>
Manual de prácticas Computación Básica II Y para terminar se mostrara como se vería la página

Manual de prácticas

Computación Básica II

Y para terminar se mostrara como se vería la página Web “MARCO.HTM”

Manual de prácticas Computación Básica II Y para terminar se mostrara como se vería la página

¡¡FELICIDADES¡¡ HEMOS TERMINADO CON LA “PRÁCTICA INTEGRADORA”