Prof.: Juan Perales Espinoza P á g i n a | 1 E-Mail: juanperales@live.

com

CREACION DE PAGINAS WEB EN HTML
(Hiper Text Markup Language – Lenguaje De Marcas De Hipertexto)

HTML: Es un Lenguaje De Programación De Páginas Web Muy Fácil De Aprender Por El Usuario Ya Que
“HTML” Trabaja Con Una Serie De Etiquetas Básicas Que Se Especifican Por Corchetes Angulares Para El
Desarrollo De Una Web.

 Entre Los Programas De Creación De Páginas Web Más Conocidas Tenemos:

 Bloc De Notas
 Microsoft Office Word
 Microsoft Office Front Page
 Adobe DreamWeaver
 Adobe Flash
 Web Designer Extreme
 NetBeans
 Microsoft Visual Studio (ASP.Net)

 Estructura Básica De Una Página Web

















 Etiquetas Principales Del Lenguaje De Programación HTML:

ETIQUETAS PRINCIPALES DESCRIPCION
<Html> … </Html>
Se Usa Para Iniciar La Creación De Una Página Web. Se Digita Al Inicio y Final De
Una Página Web.
<Head> … </Head>
Se Utiliza Para Establecer El Encabezado De Una Página Web. Especifica La
Barra De Titulo De Una Web.
<Title> … </Title>
Se Utiliza Para Establecer El Titulo De Una Página Web Dentro De La Barra De
Titulo. Se Utilizan Entre Las Etiquetas De HEAD Abierto y Cerrado.
<Body> … </Body>
Se Utiliza Para Especificar El Contenido o Tema De Una Página Web. Entre Estas
Etiquetas Se Utilizan Otras Etiquetas Para Una Mejor Presentación.

 Propiedades De La Etiqueta <BODY>:

BgColor = “Orange” Establece El Color De Fondo De La Página Web.
BackGround=”Paisaje.Jpg” Establece Una Imagen De Fondo De La Página.
Text=”DarkBlue” Establece El Color De Texto De La Página Web.

 Ejemplo:

<Body BgColor= “Black” Text=”White”>ó<Body BackGround=”Fondo1.Jpg”>
<HTML>…</HMTL>:
Inicia y Finaliza La
Creación de Una
Página Web.
Establece El Encabezado
De Pagina y El Titulo Que
Se Mostrara.
Establece El Contenido
De Texto o Imagen De
Una Página Web.

Prof.: Juan Perales Espinoza P á g i n a | 2 E-Mail: juanperales@live.com

 Solución De Ejemplos Con Algunas Etiquetas De HTML:

1) Crear En El Escritorio De Windows Una Carpeta Con El Nombre De: Ejemplos-HTML, Luego Ingresar A La
Aplicación De Bloc De Notas: (Teclas Windows + R)









2) Una Vez Ingresado A La Aplicación De Bloc De Notas, Configurar Su Editor: Fuente: Calibri, Estilo:
Negrita, Tamaño: 12, Luego Activar Su Ajuste De Línea.





3) Ahora Procederemos A Ingresar El Siguiente Script:
















4) Resultado Final Después De Abrir La Página Creada:
















Una Vez Terminado de Ingresar El
Script, Se Procederá A Guardarlo:

 Crtl + G ó Menú Archivo – Guardar
Como…

 Luego Ubicar La Carpeta Creada y
Guardarlo Ahí Dentro.

 Con El Siguiente Nombre:
Ejemplo1.Html

 Luego Cerrar El Bloc De Notas y
Abrir La Página Creada.

Prof.: Juan Perales Espinoza P á g i n a | 3 E-Mail: juanperales@live.com

 Pasos Para Modificar Una Página Web:

1) Realizar Un Clic Secundario Sobre La Página Creada y Luego Elegir La Opción: Abrir Con… - Bloc De
Notas.











2) Luego Realizar Las Siguientes Modificaciones Agregando El Siguiente Párrafo Que Se Encuentra Aquí:


















3) Luego Guardar Los Cambios Realizados: Teclas Crtl + G; y Luego Cerrar La Aplicación De Bloc De Notas Y
Abrir La Página Web y Se Mostrara El Siguiente Resultado:



















Prof.: Juan Perales Espinoza P á g i n a | 4 E-Mail: juanperales@live.com

 Ejemplo N° 2: “Creando Una Página Web Con Un Color De Fondo Azul Oscuro y Texto Blanco”

 Ingresar Nuevamente A La Aplicación De Bloc De Notas Y Realizar El Siguiente Script:














 Una Vez Terminado Guardarlo Dentro De Nuestra Carpeta Creada Con El Nombre: Ejemplo2.Html

 Ejemplo N° 3: “Creando Una Página Web Con Una Imagen De Fondo y Texto Amarillo”

 Ingresar Nuevamente A La Aplicación De Bloc De Notas Y Realizar El Siguiente Script:














 Una Vez Terminado Guardarlo Dentro De Nuestra Carpeta Creada Con El Nombre: Ejemplo3.Html

 Ejemplo N° 4: “Creando Una Página Web Con Una Imagen De Fondo”

 Ingresar Nuevamente A La Aplicación De Bloc De Notas Y Realizar El Siguiente Script:













 Una Vez Terminado Guardarlo Dentro De Nuestra Carpeta Creada Con El Nombre: Ejemplo4.Html

Prof.: Juan Perales Espinoza P á g i n a | 5 E-Mail: juanperales@live.com

 Etiquetas Básicas Del Lenguaje De Programación HTML:

ETIQUETAS BÁSICAS DESCRIPCION
<Br>
Esta Etiqueta Permite Realizar Un Salto De Línea Simple, Similar A La Acción De Presionar La
Tecla ENTER.
Ejemplo:














<P>

Se Utiliza Para Especificar La Alineación Del Contenido o Tema De Una Página Web.

 Propiedades De La Etiqueta <P>:

Align = “Left” Establece Una Alineación Hacia La Izquierda.
Align = “Right” Establece Una Alineación Hacia La Derecha.
Align = “Center” Establece Una Alineación Hacia El Centro.
Align = “Justify” Establece Una Alineación Justificada.

 Ejemplo:

<PAlign= “Justify”>ó<PAlign= “Center”>ó<PAlign= “Right”>


Ejemplo:




















Guardarlo Con El Nombre
De: Ejemplo5.Html
Guardarlo Con El Nombre
De: Ejemplo6.Html

Prof.: Juan Perales Espinoza P á g i n a | 6 E-Mail: juanperales@live.com

<Sup> … </Sup>

Se Utiliza Para Aplicar Un Superíndice A Un Texto Especifico.

 Ejemplo:

2M<Sup>2</Sup>->Resultado: 2M
2



Ejemplo:




















<Sub> … </Sub>

Se Utiliza Para Aplicar Un Superíndice A Un Texto Especifico.

 Ejemplo:

H <Sub> 2 </Sub> O ->Resultado: H
2
O


Ejemplo:


















Guardarlo Con El Nombre
De: Ejemplo7.Html
Guardarlo Con El
Nombre De:
Ejemplo8.Html

Prof.: Juan Perales Espinoza P á g i n a | 7 E-Mail: juanperales@live.com

<Hx> … </Hx>

Se Utiliza Para Establecer Títulos En El Contenido De Una Página Web, Tiene Un Alcance De
Tamaño De Texto Desde 1 Hasta El 6.

 Ejemplo:
<H1> Curso HTML </H1> ->Curso HTML

Ejemplo:



















<Hr>

Se Utiliza Para La Creación De Una Línea Horizontal Dentro De Una Página Web.

 Propiedades De La Etiqueta <Hr>:

Align = “Center” Establece La Alineación De Línea En La Web. Alineaciones: (Left, Right, Center)
Width=”50%” Establece El Ancho De Línea Dentro De La Página Web.
Size=”3” Establece El Grosor De Línea Dentro De La Página Web.
Color=”Red” Establece El Color De Línea Dentro De la Pagina Web.

 Ejemplo:

<Hr Color= “Red” Size=”3” Width=”50%” Align=”Center”>


Ejemplo:














Guardarlo Con El Nombre
De: Ejemplo9.Html
Guardarlo Con
El Nombre De:
Ejemplo10.Html

Prof.: Juan Perales Espinoza P á g i n a | 8 E-Mail: juanperales@live.com

<Center> … </Center> Se utiliza Para Centrar Un Texto Especifico Dentro De Una Página Web.

Ejemplo:






















 Colores Más Utilizados Por El Lenguaje De Programación HTML:




Castellano Inglés Castellano Inglés
Rojo Red Celeste Skyblue
Azul Blue Gris Grey
Amarillo Yellow Marrón Brown
Verde Green Blanco White
Naranja Orange Negro Black
Violeta Violet Dorado Golden
Rosa Pink Plateado Silver
Verde Claro Light Green Lima Lime
Agua Aqua Morado Purple
Azul Oscuro DarkBlue Azul Claro SteelBlue
Verde Oscuro DarkGreen Mostaza Wheat
Rojo Oscuro DarkRed Oliva Olive
Guardarlo Con
El Nombre De:
Ejemplo11.Html
Sigue así y serás el
mejor de tu clase…!


Prof.: Juan Perales Espinoza P á g i n a | 9 E-Mail: juanperales@live.com

 Desarrollar El Siguiente Ejemplo Utilizando Todas Las Etiquetas Básicas:

 Ingresar Nuevamente A La Aplicación De Bloc De Notas Y Realizar El Siguiente Script:











































 Una Vez Terminado Guardarlo Dentro De Nuestra Carpeta Creada Con El Nombre: Practica1.Html







Sigue así y serás el
mejor de tu clase…!


Prof.: Juan Perales Espinoza P á g i n a | 10 E-Mail: juanperales@live.com

 Desarrollar El Siguiente Ejemplo Utilizando Todas Las Etiquetas Básicas:

 Ingresar Nuevamente A La Aplicación De Bloc De Notas Y Realizar El Siguiente Script:

<html>
<head> <title> TechNet Peru </title> </head>
<body background="Fondo8.Gif">

<center>
<hr color="DarkRed" size="2">
<img src="imagen12.png" width="130px" height="100px" border="0">
<img src="contabilidad.jpg" width="130px" height="100px" border="0">
<img src="contabilidad2.jpg" width="130px" height="100px" border="0">
<img src="technet.gif" width="130px" height="100px" border="0">
<img src="secretaria.jpg" width="130px" height="100px" border="0">
<img src="fondox.gif" width="130px" height="100px" border="0">
<img src="imagen18.png" width="130px" height="100px" border="0">
<hr color="DarkRed" size="2">
</center>

<p align="justify">

<font face="Verdana" size="2" color="#363535">

<font color="DarkRed"> <b> ¿Quiénes Somos? </b> </font>
<hr color="#363535" size="1">

<b>TechNet Peru</b> es una empresa Limeña en el sector de las tecnologías de la
información, dedicada exclusivamente a la ingeniería de software y al desarrollo de
soluciones tecnológicas para pequeñas y medianas empresas.

<br><br>

Para nosotros el desarrollo de sus sistemas es nuestro compromiso y satisfacción.
Le ofrecemos nuestro servicio de diseño de software a la medida, a través del cual nuestro
personal especializado desarrollará para usted aplicaciones en software ajustadas a las
necesidades específicas de su negocio, brindándole una satisfacción garantizada.

<br><br>

Además Somos un equipo de profesionales que quiere contribuir a dar solución a tus
requerimientos sobre informática. Nuestra razón de ser, eres tú, pues estamos para
ayudarte con libros, separatas y diversas publicaciones que te mantendrán actualizado en
todo lo que necesites para tu buen desempeño laboral, estudios e investigaciones.

<br>

Prof.: Juan Perales Espinoza P á g i n a | 11 E-Mail: juanperales@live.com


<hr color="#363535" size="1">
<font color="DarkRed"> <b> Nuestras Especialidades: </b> </font>
<hr color="#363535" size="1">

<ul type="A">
<Li> Administración </Li>
<Li> Computación e Informática </Li>
<Li> Contabilidad </Li>
<Li> Electrónica </Li>
<Li> Secretariado </Li>
</ul>

<marquee behavior="alternate">
<img src="administracion2.jpg" width="140px" height="130px" border="0">
<img src="contabilidad2.jpg" width="170px" height="130px" border="0">
<img src="imagen3.png" width="170px" height="130px" border="0">
<img src="secretaria2.jpg" width="140px" height="130px" border="0">
<img src="imagen10.png" width="170px" height="130px" border="0">
</marquee>

<br>

<hr color="#363535" size="1">
<font color="DarkRed"> <b> Nuestros Laboratorios: </b> </font>
<hr color="#363535" size="1">

<center>
<img src="LaboratorioDeComputo.jpg" width="400px" height="300px" border="1">
<img src="LaboratorioDeElectronica.jpg" width="400px" height="300px" border="1">
</center>

<br> <br>

<center> <b> Pagina De Diseñada Por: Rolex </b> </center>

</font>

</p>

</body>
</html>

 Una Vez Terminado Guardarlo Dentro De Nuestra Carpeta Creada Con El Nombre: Practica2.Html



Prof.: Juan Perales Espinoza P á g i n a | 12 E-Mail: juanperales@live.com

Crear Las Siguientes Páginas Web:






















































Prof.: Juan Perales Espinoza P á g i n a | 13 E-Mail: juanperales@live.com

FORMATOS DE TEXTO - HMTL

El Formateo Del Texto, O Sea, El Formato Del Texto, Son Una Serie De Etiquetas Que Escribimos En HTML
Rodeando La Palabra O El Texto Y Que Transforman Ese Texto En El Formato Que Nosotros Le Hemos
Querido Dar.

Las Etiquetas Deben Rodear Al Texto. Es Decir, La Etiqueta Debe Abrirse Y Cerrarse, Conteniendo El Texto O
La Palabra Que Queramos Transformar, Entre Medias. En El Ejemplo De La Negrita Se Abriría <B> Y Se
Cerraría </B>.

 Ejemplos Con Las Etiquetas Básicas De Formatos De Texto Con HTML:

1) Crear En El Escritorio De Windows Una Carpeta Con El Nombre De: “Formatos De Texto – HTML”, Luego
Ingresar A La Aplicación De Bloc De Notas: (Teclas Windows + R)

2) Una Vez Ingresado A La Aplicación De Bloc De Notas, Configurar Su Editor: Fuente: Calibri, Estilo:
Negrita, Tamaño: 12, Luego Activar Su Ajuste De Línea.





3) Ahora Procederemos A Realizar Los Siguientes Ejemplos Con Las Etiquetas A Describir:

ETIQUETAS
BÁSICAS
DESCRIPCION
<B> … </B> Esta Etiqueta Nos Permite Resaltar Un Texto ó Párrafo Cualquiera, Con El Estilo De NEGRITA.
<I> … </I> Esta Etiqueta Nos Permite Resaltar Un Texto ó Párrafo Cualquiera, Con El Estilo De CURSIVA.
<U> … </U>
Esta Etiqueta Nos Permite Resaltar Un Texto ó Párrafo Cualquiera, Con El Estilo De SUBRAYADO.


Ejemplo:














































Guardarlo Con El Nombre
De: Ejemplo1.Html

Prof.: Juan Perales Espinoza P á g i n a | 14 E-Mail: juanperales@live.com

<S> … </S> Esta Etiqueta Nos Permite Resaltar Un Texto ó Párrafo Cualquiera, Con El Estilo De TACHADO.
Ejemplo:
















<Font> …
</Font>
Se Utiliza Para Aplicar Estilos De Fuente A Un Texto ó Párrafo Dentro De La Pagina Web.

 Propiedades De La Etiqueta <Font>:

Color = “Blue” Establece El Color De Fuente De Un Texto ó Párrafo Dentro De La Página Web.
Size=”2” Establece El Tamaño De Fuente De Un Texto ó Párrafo Dentro De La Página Web.
Face=”Arial” Establece El Tipo De Fuente De Un Texto ó Párrafo Dentro De La Página Web.

 Ejemplo: “Texto Color Azul Tamaño De Letra 5 y Tipo De Fuente Arial”

<Font Color=”Blue” Size=”5” Face=”Arial”> Ejemplo 1 </Font>

Ejemplo:



























Guardarlo Con El Nombre
De: Ejemplo2.Html
Guardarlo Con El Nombre
De: Ejemplo3.Html

Prof.: Juan Perales Espinoza P á g i n a | 15 E-Mail: juanperales@live.com

<Marquee>

</Marquee>
Se Utiliza Para Aplicar Efectos De Movimiento De Texto ó Imagen Dentro De La Pagina Web

 Propiedades De La Etiqueta <Marquee>:

Behavior = “Alternate” Establece El Efecto De Rebote Del Movimiento De Texto ó Imagen.
Width=”50%” Establece El Ancho Del Efecto De Rebote, De Extremo A Extremo En Porcentajes.
Height=”40px” Establece El Alto Del Efecto De Movimiento En Números Entre 0 y 100 Pixeles.
ScrollDelay = “100” Establece La Velocidad Del Efecto De Movimiento.
Direction=” - ”
Establece La Dirección Del Efecto De Movimiento.

Direcciones:

 Left - Hacia La Izquierda
 Right - Hacia La Derecha
 Down - Hacia Abajo
 Up - Hacia Arriba

BgColor=”DarkBlue” Establece El Color De Fondo Del Efecto Marquesina.

 Ejemplo: “Movimiento De Texto Con Rebote De Ancho Del 50% y Alto De 15 Pixeles y Una Velocidad De
100”

<Marquee Behavior=”Alternate” Width=”50%” Height=”15px”> Texto En Movimiento </Marquee>

Ejemplo:



































Guardarlo Con El Nombre
De: Ejemplo4.Html

Prof.: Juan Perales Espinoza P á g i n a | 16 E-Mail: juanperales@live.com


Practica De Formatos De Texto

 Diseñar La Siguiente Página Web Con Las Etiquetas Básicas y De Formatos:



















































Prof.: Juan Perales Espinoza P á g i n a | 17 E-Mail: juanperales@live.com

INSERCION DE VIÑETAS, NUMERACION E IMAGENES - HMTL

1) Crear En El Escritorio De Windows Una Carpeta Con El Nombre De: “IMÁGENES Y VIÑETAS - HTML”,
Luego Ingresar A La Aplicación De Bloc De Notas: (Teclas Windows + R)

2) Una Vez Ingresado A La Aplicación De Bloc De Notas, Configurar Su Editor: Fuente: Calibri, Estilo:
Negrita, Tamaño: 12, Luego Activar Su Ajuste De Línea.





3) Ahora Procederemos A Realizar Los Siguientes Ejemplos Con Las Etiquetas A Describir:

ETIQUETAS
BÁSICAS
DESCRIPCION
<UL> … </UL>
Esta Etiqueta Nos Permite Crear Listas Con Viñetas Que Pueden Tener Un Estilo Circular, Cuadrado Y Circular Sin
Fondo, Que Dependerá Del Atributo o Propiedad TYPE.

Propiedad De La Etiqueta <UL>:

Type = “Estilo”
Establece El Estilo De Viñeta A Mostrar En Una Lista Dentro De Pa Web.

Estilos: “Circle”, “Square” o “Disc”.


Ejemplo:

































Guardarlo Con El Nombre
De: Ejemplo1.Html

Prof.: Juan Perales Espinoza P á g i n a | 18 E-Mail: juanperales@live.com

<OL> … </OL>
Esta Etiqueta Nos Permite Crear Listas Con Numeración u Orden Alfabético, Que Dependerá Del Atributo o
Propiedad TYPE.

Propiedad De La Etiqueta <OL>:

Type = “Estilo”
Establece El Estilo De Numeración u Orden Alfabético A Mostrar En Una Lista
Dentro De Pa Web.

Estilos: “1”, “A”, “a”.



Ejemplo:

























































































Guardarlo Con El Nombre
De: Ejemplo2.Html

Prof.: Juan Perales Espinoza P á g i n a | 19 E-Mail: juanperales@live.com

<IMG>
Esta Etiqueta Nos Permite Insertar Una Imagen Dentro De La Pagina Web.

Propiedad De La Etiqueta <IMG>:

Src=”Foto.Jpg” Permite Establecer La Ruta De La Imagen A Mostrar y Su Nombre.
Border=”2” Permite Establecer Un Estilo De Borde Alrededor De La Imagen.
Width=”50%” Permite Establecer El Ancho De La Imagen Dentro De La Página Web.
Height=”50%” Permite Establecer El Alto De La Imagen Dentro De La Página Web.

Ejemplo:














































Guardarlo Con El Nombre
De: Ejemplo3.Html
Sigue así y serás el mejor de tu
clase…!


Prof.: Juan Perales Espinoza P á g i n a | 20 E-Mail: juanperales@live.com

3) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:

































 Guardar La Página con el nombre de: Listas.Html


4) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas, Utilizar las Imágenes De La Semana
Pasada:

















Prof.: Juan Perales Espinoza P á g i n a | 21 E-Mail: juanperales@live.com

REALIZAR LOS SIGUIENTES EJEMPLOS DE PÁGINAS WEB EN HTML

1) Antes De Realizar La Creación De las Siguientes Páginas Web, Se Creara En El Escritorio De Windows Una
Carpeta Con El Nombre De: Ejemplos-HTML, En Donde Guardaremos Todas Nuestras Páginas A Crear De
Ahora En Adelante ok, Bueno Comencemos Ingresando al BLOC DE NOTAS y Realizar La Siguiente
Estructura:
Modelo De Un Titulo Para Tu Página Web


















 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Ejemplos-HTML y ahí dentro Guardar La Pagina con el nombre de: Titulo.Html


2) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:

Modelo Opciones Para Tu Página Web

















 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Ejemplos-HTML y ahí dentro Guardar La Pagina con el nombre de: Opciones.Html


Prof.: Juan Perales Espinoza P á g i n a | 22 E-Mail: juanperales@live.com

4) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:

Modelo Listas Para Tu Página Web

































 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Ejemplos-HTML y ahí dentro Guardar La Pagina con el nombre de: Listas.Html


5) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas, Utilizar las Imágenes De La Semana
Pasada:
Modelo Insertar Imágenes Para Tu Página Web











Prof.: Juan Perales Espinoza P á g i n a | 23 E-Mail: juanperales@live.com


















 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Ejemplos-HTML y ahí dentro Guardar La Pagina con el nombre de: Imagenes.Html


5) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas, Utilizar las Imágenes De La Semana
Pasada:
Modelo De Enlaces A Otras Páginas Web De Internet Para Tu Página Web


























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Ejemplos-HTML y ahí dentro Guardar La Pagina con el nombre de: Enlaces.Html


Prof.: Juan Perales Espinoza P á g i n a | 24 E-Mail: juanperales@live.com

6) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:

Modelo De Enlaces A Mis Páginas Web Creadas Anteriormente































 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Ejemplos-HTML y ahí dentro Guardar La Página con el nombre de: Vinculos.Html


Resultado Final:














Luego Probar Cada Uno De Los Enlaces A Nuestras Páginas Web

Prof.: Juan Perales Espinoza P á g i n a | 25 E-Mail: juanperales@live.com

CREACION DE TABLAS EN HTML
Básicamente necesitamos una pareja de etiquetas que muestren donde comienza y donde acaba la tabla;
una pareja de etiquetas que indiquen el comienzo y fin de cada fila de datos, y una pareja de etiquetas que
identifiquen cada celda de datos en esa fila. En HTML las tablas se construyen indicando el número de filas, y
las celdas dentro de cada fila. Siendo innecesario especificar las columnas:
<TABLE>……</TABLE> Indica el comienzo y fin de la tabla
<TR>……. </TR> Indica el comienzo y fin de una fila
<TD>…….</TD> Indica el comienzo y fin de una celda En una fila


PROPIEDADES DE LAS ETIQUETAS ------------- <TABLE> y <TD>

 Border=”X” (Entre 0 y 10)

 BgColor=”XXX” (Colores En Ingles o Código)

 Width=”X%” (Ancho De La Celda, Entre 0% y 100%)

 Height=”X%” (Alto De Filas o Celdas, Entre 0% y 100%)

 ColsPan=”X” (Nº De Columnas A Combinar)

 Align=”XXX” (Alinea Contenido De Tabla o Celda –“Right”, “Left” y “Center”)

 CellSpacing =”X” (Permite Mostrar Un Doble Borde En la Líneas De La Tabla)


1) Crear En El Escritorio De Windows Una Carpeta Con El Nombre De: Tablas-HTML, En Donde
Guardaremos Todas Nuestras Páginas A Crear De Ahora En Adelante.





























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Tablas-HTML y ahí dentro Guardar La Página con el nombre de: Tablas1.Html

Prof.: Juan Perales Espinoza P á g i n a | 26 E-Mail: juanperales@live.com



Resultado Final:






















2) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:






































 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Tablas-HTML y ahí dentro Guardar La Pagina con el nombre de: Tablas2.Html


 Resultado Final:






Prof.: Juan Perales Espinoza P á g i n a | 27 E-Mail: juanperales@live.com

3) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:





































 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Tablas-HTML y ahí dentro Guardar La Página con el nombre de: Tablas3.Html
 Resultado Final:















Prof.: Juan Perales Espinoza P á g i n a | 28 E-Mail: juanperales@live.com

4) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:








































 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
Tablas-HTML y ahí dentro Guardar La Página con el nombre de: Tablas4.Html
 Resultado Final:













Prof.: Juan Perales Espinoza P á g i n a | 29 E-Mail: juanperales@live.com

PRACTICA DE CREACION DE TABLAS EN HTML

Diseñar La Siguiente Página Web, Se Tomara En Cuenta La Buena Presentación y Debe Tener Imagen De
Fondo.

Utilizar la Imágenes De La Carpeta De Imágenes Descargada A Su Escritorio De Windows.

Diseño A Obtener:






























Prof.: Juan Perales Espinoza P á g i n a | 30 E-Mail: juanperales@live.com

PRACTICA DE TALLER HTML

1) Solicitar El Archivo De Imágenes A Utlizar en Nuestras Siguientes páginas Web, Crear Una Carperta En El
Escritorio De Windows Con El Nombre De: “Mi Web Site”, Luego Ingresar Al Bloc De Notas Y Comenzar A
Diseñar Las Siguientes Páginas Web:






















 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada: Mi
Web Site y ahí dentro Guardar La Página con el nombre de: Presentacion.Html

 Resultado Final:























Prof.: Juan Perales Espinoza P á g i n a | 31 E-Mail: juanperales@live.com

2) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:










































>>><<<<<<>>>>>








 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Autor.Html


Prof.: Juan Perales Espinoza P á g i n a | 32 E-Mail: juanperales@live.com

Resultado Final:
















3) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:



























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Windows.Html


Prof.: Juan Perales Espinoza P á g i n a | 33 E-Mail: juanperales@live.com

Resultado Final:

























4) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:


























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Word2007.Html

Prof.: Juan Perales Espinoza P á g i n a | 34 E-Mail: juanperales@live.com


Resultado Final:
























5) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Excel2007.Html

Prof.: Juan Perales Espinoza P á g i n a | 35 E-Mail: juanperales@live.com


Resultado Final:
























6) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:

























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Pagina con el nombre de: Access2007.Html

Prof.: Juan Perales Espinoza P á g i n a | 36 E-Mail: juanperales@live.com


Resultado Final:

























7) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:

























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Pagina con el nombre de: PowerPoint2007.Html

Prof.: Juan Perales Espinoza P á g i n a | 37 E-Mail: juanperales@live.com


Resultado Final:



















8) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:































 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Partes.Html

Prof.: Juan Perales Espinoza P á g i n a | 38 E-Mail: juanperales@live.com


Resultado Final:






















9) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:



























 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Html.Html


Prof.: Juan Perales Espinoza P á g i n a | 39 E-Mail: juanperales@live.com

Resultado Final:



10) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:














 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Titulo.Html

Resultado Final:














Prof.: Juan Perales Espinoza P á g i n a | 40 E-Mail: juanperales@live.com

11) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:






















































Prof.: Juan Perales Espinoza P á g i n a | 41 E-Mail: juanperales@live.com




















 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Opciones.Html

Resultado Final:





















5) Ahora Realizar La Siguiente Estructura En Otro Bloc De Notas:











Prof.: Juan Perales Espinoza P á g i n a | 42 E-Mail: juanperales@live.com



















 Luego Realizaremos Control + G y Lo Guardaremos En El Escritorio Dentro de La Carpeta Llamada:
“Mi Web Site” y ahí dentro Guardar La Página con el nombre de: Principal.Html

Resultado Final: