Sesion 01

INGENIERÍA
WEB
FACULTAD DE
INGENIERÍA
ESCUELA ACADEMICA
PROFESIONAL DE
CLASE N° 01
INGENIERÍA DE
SISTEMAS
LENGUAJE DE
PROGRAMACIÓN HTML
Mg. Dany Montoya Negrillo.

AGENDA
Estructura de un documento HTML
Listas, Tablas
Enlaces, Hiperenlaces
Manejo de imágenes, Sonido y Videos

HTML
El HTML (Hyper Text Markup

Language) es el lenguaje con el que
se escriben las páginas web. Está
compuesto por etiquetas, que
marcan el inicio y el fin de cada
elemento del documento.
ESQUEMA DE UN DOCUMENTO HTML
Una página HTML tiene dos secciones muy bien definidas que
son la cabecera:
<head>
</head>
Y el cuerpo de la página:
<body>
Cuerpo de la página.
</body>
Todo el texto que dispongamos dentro del <body> aparece dentro del
navegador tal cual lo hayamos escrito.
…ESQUEMA DE UN DOCUMENTO HTML
…ESQUEMA DE UN DOCUMENTO HTML
ETIQUETAS PRINCIPALES QUE CONTIENE UN
DOCUMENTO HTML
El proceso de indicar las diferentes partes que componen la información se denomina marcar
(markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de
una sección se denominan etiquetas.
¿QUÉ SON LOS ATRIBUTOS DE LAS ETIQUETAS?
Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los
elementos HTML.
Los atributos siempre van con la estructura: nombre="valor".
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.
Un ejemplo de los atributos sería:

PARTES QUE COMPONEN UN ELEMENTO HTML
Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad

un elemento HTML es mucho más que una etiqueta, ya que está formado por:
■Una etiqueta de apertura.

■Cero o más atributos.
■Texto encerrado por la etiqueta.
■Una etiqueta de cierre.
Parámetros de la etiqueta <BODY>
• Bgcolor=“Red” o “#FF0000” Define el color de

fondo de la Pág. Web.
• Background=“ima01.jpg” Define una imagen de
fondo para la Pág. Web.
• Text=“White” Define el color del Texto.
• Link=“Blue” Define el color del enlace no visitado.
• Vlink=“Red” Define el color del enlace visitado.
FORMATOS DEL TEXTO
• <B></B> Negrita.
• <I> </I> Cursiva.
• <U></U> Subrayado.
• <TT></TT> Tamaño fijo (tipo maquina de escribir)
• <EM></EM> Texto enfatizado
• <STRONG> </STRONG> gran énfasis
• <SUP></SUP> Superíndice
• <SUB></SUB> Subíndice
• <CENTER></CENTER> sirve para centrar los
objetos y textos
ENCABEZADOS Y PARRAFOS
• <h1>El más grande</h1>

• <h2>Encabezado H2</h2>
• <h6>El más peque;o</h6>
• <P></P> Define un párrafo, deja una línea en

• <HR> Define una línea horizontal.
• <BR> Define un salto de línea.
PRIMER DOCUMENTO HTML
EJEMPLO:
A continuación se muestra el código HTML de una página web muy sencilla:
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
ETIQUETAS ANIDADAS
EJEMPLO:
A continuación tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:
<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial,

MS Sans Serif">Bienvenidos a www.ucvlima.edu.pe</font></p>
Este código daría como resultado el siguiente texto:
Bienvenidos a www.ucvlima.edu.pe
Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro
ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos
puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la
etiqueta <font..>.
También es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de
comienzo y de cierre
LISTAS
Una lista es un párrafo

estructurado que contiene una
serie de elementos.
HTML define tres tipos de listas:

Listas ordenadas
Listas no ordenadas
Listas de definiciones
LISTA ORDENADA
Contenedor Tipo de lista Efecto visual
<ol>
1. ítem 1
<li> ítem 1 </li>
Lista ordenada 2. ítem 2
<li> ítem 2 </li>
3. ítem 3
</ol>
Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma,
utilizamos la etiqueta <li>.
LISTA ORDENADA
EJEMPLO:
El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>

<h1>Instrucciones</h1>

<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>

</body>
</html>
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
LISTA ORDENADA
<ol></ol>
<ol type=A | a | I | i | 1 start=n° >

<lh> título de la lista </lh>
<li> elemento uno </li>
<li> elemento dos </li>
<li> elemento n </li>
</ol>
LISTA DESORDENADA
Exponen la lista anteponiendo un punto, cuadrado o triángulo

negro.
<ul>
 ítem 1
<li> ítem 1 </li>
No ordenada  ítem 2
<li> ítem 2 </li>
 ítem 3
</ul>
Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la
misma utilizamos la etiqueta <li>.
LISTA NO ORDENADA
EJEMPLO:
El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:
<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>

<h1>Menú</h1>

<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>

</body>
</html>
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
LISTA NO ORDENADA
<ul></ul>
<ul type=disc | circle | square>

<lh> título de la lista </lh>
<li> elemento uno </li>
<li> elemento dos </li>
<li> elemento n </li>
</ul>
LISTA DE DEFINICIONES
Se utilizan para definir términos.
<dl> ítem 1
<dt>Término</dt> definición 1
Definición
<dd>Definición</dd> ítem 2
</dl> definición 2
Las listas de definición se representan con la etiqueta <dl>.

Los términos de las mismas con <dt>.
La definición de esos términos comienza con <dd>.
…LISTA DE DEFINICIONES
Se utilizan para definir términos.
Las listas de definición se representan con la etiqueta <dl>.

Los términos de las mismas con <dt>.
La definición de esos términos comienza con <dd>.
EJEMPLO:
El siguiente código HTML muestra un ejemplo sencillo de lista de definición:
<html>
<head><title>Ejemplo de etiqueta DL</title></head>
<body>
<h1>Metalenguajes</h1>

<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>

<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>

<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>

</body>
</html>
TABLAS
o Definimos las tablas con la etiqueta <table>.
o La tabla está dividida en filas definidas con la etiqueta <tr>.
o Y a su vez cada fila dividida en celdas definidas con la etiqueta
<td>.
o Las celdas pueden contener texto, imágenes, formularios, listas,
otras tablas, etc.
…TABLAS
…TABLAS
MÁRGENES DE LA CELDA
Espaciado entre celdas
PARÁMETROS EN TABLAS
<tr align=left|center|rigth> alineación horizontal
<tr valign=top|middle|bottom> alineación vertical
<tr bgcolor=…> color de toda la fila
<tr bordercolor=…> color del borde
Colspan=“n°” Define las columnas que va a ocupar.
Rowspan=“n°” Define las filas que va a ocupar.

TABLAS
<TABLE BORDER=“1”>
<TR>
<TH></TH><TH COLSPAN=3>Números</TH>
</TR>
<TR>
<TH ROWSPAN=2>Num</TH><TH>1</TH>
<TH>2</TH><TH>3</TH> Números
</TR>
<TR>
1 2 3
<TH>4</TH><TH>5</TH><TH>6</TH>
Num
</TR>
4 5 6
</TABLE>
TABLAS
Las tablas son una interesante herramienta para el marcado de

información tabular.
El elemento table da comienzo a la tabla. Dentro tenemos a
caption que encierra el título que llevará la tabla.
A partir de aquí definimos dos partes principales: thead dónde se
ubica el encabezado, y tbody que encierra a las celdas del
cuerpo.
tr es el encargado de contener filas, el encabezado tiene una sola
fila, cuyas celdas de encabezado se contienen mediante tres
etiquetas del elemento th.
Luego dentro del cuerpo (tbody) tenemos 3 filas más (tr) cuyas
celdas se contienen mediante el uso del elemento td.
TABLAS
HTML
<TABLE border = 3 cellspacing = 2
<table border="1" cellpadding="5"
cellpadding = 2 width =60%> cellspacing="10">
<TH align = center>Productos <caption>Ventas Mensuales</caption>
<TH align = center>Tipo <thead>
<TR> <tr>
<TD align = LEFT>Mesa <th>Productos</th>
<TD align = LEFT>Mueble <th>Tipo</th>
<TR> </tr>
<TD align = LEFT>Silla </thead>
<TD align = LEFT>Mueble <tbody>
<TR>
<tr>
<td>Mesa</td>
<TD align = LEFT>Computador <td>Mueble</td>
<TD align = LEFT>Equipo </tr>
</TABLE> <tr>
<td>Silla</td>
<td>Mueble</td>
</tr>
<tr>
<td>Computadora</td>
<td>Equipo</td>
</tr>
</tbody>
</table>
TABLAS
El pie de la tabla (footer)

Vimos en el ejemplo anterior como dividir la tabla en dos secciones,
mediante los elementos thead y tbody.
Ahora incluyamos una tercera sección con el elemento tfoot, el cual
determinará la sección del pie (al final de la tabla).
Ejemplo:
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td></td>
<td>65</td>
</tr>
</tfoot>
HIPERVÍNCULOS
Un hipervínculo es un
enlace, normalmente entre
dos páginas web de un
mismo sitio.
La parte activa del enlace puede
ser también una imagen en lugar
de texto y el esquema sería el
siguiente
<a href="url del

documento"><IMG SRC="fichero
imagen"></a>
El elemento más importante que tiene una página de internet es el hipervínculo,
estos nos permiten cargar otra página en el navegador.
HIPERVÍNCULOS
se conocen como
hiperenlaces, enlaces o
links.
un enlace también puede apuntar a una página de otro sitio web, a un fichero, a
una imagen, etc. Para navegar al destino al que apunta el enlace, hemos de hacer
clic sobre él.
HIPERVÍNCULOS
Un hipervínculo de texto o
gráfico oculta una URL
Al hacer clic en un
hipervínculo la URL es pasada
al explorador
Al hacer clic sobre diferentes partes de un gráfico vinculado, llamado un mapa de

imagen, se desplazará a diferentes páginas web o a diferentes puntos dentro de la
misma página.
HIPERVÍNCULOS
La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>
Lo que se encuentra entre el comienzo de marca y el fin

de la marca es el texto que aparece en la página
(normalmente subrayado).
HIPERVÍNCULOS
Una propiedad se incorpora en el comienzo de

una marca y tiene un nombre y un valor.
El valor de la propiedad debe ir entre comillas

dobles.
<a href="pagina2.html">Noticias</a>
La propiedad href del elemento "a" hace referencia a la página

que debe mostrar el navegador si el visitante hace clic sobre el
hipervínculo.
HIPERVÍNCULOS
HIPERVÍNCULOS
EJEMPLO
La sintaxis para disponer un hipervínculo a otro sitio de

internet es:
<a href="http://www.google.com">Buscador Google</a>
<html>
<head>
</head>
<body>
<a href="http://www.google.com">Buscador Google</a>
</body>
</html>
EJEMPLO
El elemento "a" tiene una propiedad target que nos permite indicar
que la referencia del recurso sea abierto en otra página.
Esta propiedad se llama target y debemos asignarle el valor "_blank"
para indicar que el recurso sea abierto en otra ventana.
<html>
<head>
</head>
<body>
<h1>Apertura de enlaces en el mismo navegador y en otra instancia del navegador</h1>
<p>
<a href="http://www.ucvlima.edu.pe">Universidad Cesar Vallejo</a>
<br>
<a href="http://www.rpp.com.pe" target="_blank">Radio Programas</a>
</p>
</body>
</html>
HEADINGS
<h1> nos dá el tipo de letra más grande.
<h6> nos dá el tipo de letra más pequeño.
<h1> al ser usado como título de una página

Web, es de suma importancia ya que es uno de
los parámetros que Google tiene en cuenta, a la Nos definen el tamaño
hora de indexar su sitio. de un título o cabecera.
Ejemplo de headings
PÁRRAFOS
Los párrafos se definen con la etiqueta <p>.

COMENTARIOS
La etiqueta  se utiliza para insertar un comentario

dentro del código que estamos escribiendo.

Es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar
mejor el código y son de gran ayuda en el momento que necesitemos editarlo.
SALTO DE LÍNEA
El salto de línea está definido con la etiqueta <br>. Es

utilizado cuando queremos terminar una línea sin
necesidad de terminar con el párrafo.
La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos

ETIQUETAS BÁSICAS
Imagenes
1. Imagenes formatos
Además de texto, podemos incorporar al contenido de nuestros
documentos XHTML archivos de imagenes que pueden contener
fotografías, dibujos, diagramas, etc.
Hay una seria discusión acerca de que formato de imagenes es
conveniente utilizar para el empleo en la web, que incluye temas
variados y complejos cómo: algoritmos de compresión de
imagenes, patentes, calidad, y compatibilidad..
Tipos de Formatos
• Formato PNG
• Formato JPEG
• Formato GIF
Imagenes
2. El elemento img
El elemento para insertar imagenes es img. Su principal atributo es
src (de source). Este atributo lleva como valor la dirección (relativa o
absoluta) de la ubicación de la imagen.
Ejemplo de uso de img:
<p>
<img src="Imagen\computer.jpg" alt="Tux,computador" />
</p>
Además hemos puesto el valor Tux, al atributo alt, este
debe explicar en palabras el contenido de la fotografía.
Los agentes de usuario basados en texto mostrarán el
valor del atributo en vez de la imagen,
Es muy recomendable su uso, ya que además si la
imagen por cualquier motivo no puede ser mostrada, se
presentará el valor de alt en lugar de la imagen.
Imagenes
3. Altura y ancho
Podemos además específicar la altura y el ancho de la imagen,
mediante el uso de los atributos height y width respectivamente.
En el ejemplo anterior mostramos cómo incorporar una imagen a
nuestro documento sin específicar estos atributos, el problema de
hacerlo de ese modo, es que el agente de usuario no podrá
calcular el espacio que ocupará la imagen hasta que no termine
de obtenerla. Esto podría resultar en una carga más lenta del
renderizado final de la página. Es muy conveniente averiguar el
tamaño de nuestras imagenes en píxeles y especificarlo en los
atributos height y width.
Ejemplo
<p>
<img src="Imagen\computer.jpg" alt="Tux,computador"
height="298" width="249" />
</p>
Imagenes
4. Alineación de las imagenes (con propiedad float)

Para acomodar las imagenes en alguno sitio preestablecido dentro
del parrafo.
4.1. float: right
<img src="Imagen\pcmultimedia.jpg" alt="Tux,Computador"

height="50" style=“float:right” />
Se visualizara:
Imagenes
4.2. float: Left

height="50" style=“float:left” />
Se visualizara:
Imagenes
4.3. float: none

height="50" style=“float:none” />
Se visualizara:
Imagenes
Imagenes como links

Tambien podemos hacer que una imagen sea a su vez un enlace a
una pagina. Los navegadores suelen mostrarla con un reborde para
indicarnos que se trata de un link.
Para poner una imagen como un link, la introducimos dentro de la
etiqueta
<a>
Ejemplo:
<a href="http://www.hotmail.com" title=“Hotmail">
<img src=“hotmail.gif" width="200" height="40"
alt=“Pagina Hotmail" />
</a>
Para mostrar una imagen y agrandarla al hacer clic sobre ella
<a href="matrix.jpg" title="Wallpaper de Trinity">
<img src="matrix.jpg" width="100" height="50" alt="Trinity" />
</a>
¿CÓMO INSERTAMOS IMÁGENES EN UN ARCHIVO
HTML?
Para insertar imágenes en un sitio usaremos la etiqueta
<img>.
Esta etiqueta es vacía, es decir que debemos utilizarla con

el atributo src para que muestre la imagen.
La etiqueta <img> no tiene cierre.

HTML?
WWW
La siguiente página muestra una imagen llamada
foto1.jpg (La imagen se encuentra almacenada en
el servidor en la misma carpeta donde se localiza
esta página)
<html>
<head>
</head>
<body>
<img src="foto1.jpg" alt="Pintura geométrica">
</body>
</html>
HTML?
Si la imagen se encuentra en una WWW

subcarpeta llamada imagenes, luego la
sintaxis para recuperarla será:
<img src="imagenes/foto1.jpg" alt="Pintura geométrica">
Es decir, antecedemos al nombre de la imagen el

nombre de la carpeta y la barra /
HTML?
WWW
Si la imagen se encuentra en una carpeta padre

de donde se encuentra la página HTML luego la
sintaxis será:
<img src="../foto1.jpg" alt="Pintura geométrica">
Es decir, le antecedemos .. y la barra / al nombre de

la imagen
Si queremos subir dos carpetas luego escribimos:

<img src="../../foto1.jpg" alt="Pintura geométrica">
HTML?
WWW
si queremos acceder a una imagen que
se encuentra en una carpeta llamada
imagenes pero que está al mismo nivel:
<img src="../imagenes/foto1.jpg" alt="Pintura geométrica">
Primero le indicamos que subimos al

directorio padre mediante los dos
puntos .. y seguidamente indicamos
el nombre de la carpeta y la imagen
a mostrar.
MULTIMEDIA
o La etiqueta <embed> es la que se utiliza para insertar archivos de
vídeo.
o Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria,
ya que entre las etiquetas <embed> y </embed> no hay que insertar
nada.
o A través del atributo src hay que especificar la ruta y el nombre del
archivo de vídeo.
<BODY>
<EMBED SRC=“kakimba.mp3">
</BODY>
Sin atributos se reproduce una vez y aparece una consola con botones
que nos permite parar, volver a empezar, pausar, etc
TABLAS
EJERCICIOS :
1. Realizar la siguiente tabla :
74
Listado de Personaje

Sesion 01

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Sesion 01

Cargado por

Copyright:

Formatos disponibles

INGENIERÍA

Mg. Dany Montoya Negrillo.

Estructura de un documento HTML

Manejo de imágenes, Sonido y Videos

El HTML (Hyper Text Markup

Un ejemplo de los atributos sería:

Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad

■Una etiqueta de apertura.

• Bgcolor=“Red” o “#FF0000” Define el color de

• <h1>El más grande</h1>

• <P></P> Define un párrafo, deja una línea en

A continuación se muestra el código HTML de una página web muy sencilla:

A continuación tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial,

Este código daría como resultado el siguiente texto:

Una lista es un párrafo

HTML define tres tipos de listas:

Contenedor Tipo de lista Efecto visual

El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:

<ol type=A | a | I | i | 1 start=n° >

Exponen la lista anteponiendo un punto, cuadrado o triángulo

Contenedor Tipo de lista Efecto visual

El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:

<ul type=disc | circle | square>

Se utilizan para definir términos.

Contenedor Tipo de lista Efecto visual

Las listas de definición se representan con la etiqueta <dl>.

Se utilizan para definir términos.

Las listas de definición se representan con la etiqueta <dl>.

<tr align=left|center|rigth> alineación horizontal

<tr valign=top|middle|bottom> alineación vertical

<tr bgcolor=…> color de toda la fila

<tr bordercolor=…> color del borde

Colspan=“n°” Define las columnas que va a ocupar.

Rowspan=“n°” Define las filas que va a ocupar.

Las tablas son una interesante herramienta para el marcado de

El pie de la tabla (footer)

<a href="url del

Al hacer clic sobre diferentes partes de un gráfico vinculado, llamado un mapa de

Lo que se encuentra entre el comienzo de marca y el fin

Una propiedad se incorpora en el comienzo de

El valor de la propiedad debe ir entre comillas

La propiedad href del elemento "a" hace referencia a la página

La sintaxis para disponer un hipervínculo a otro sitio de

<a href="http://www.google.com">Buscador Google</a>

<h1> nos dá el tipo de letra más grande.

<h6> nos dá el tipo de letra más pequeño.

<h1> al ser usado como título de una página

Los párrafos se definen con la etiqueta <p>.

La etiqueta  se utiliza para insertar un comentario

El salto de línea está definido con la etiqueta <br>. Es

La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos

4. Alineación de las imagenes (con propiedad float)

<img src="Imagen\pcmultimedia.jpg" alt="Tux,Computador"

4.2. float: Left

4.3. float: none

Imagenes como links

Esta etiqueta es vacía, es decir que debemos utilizarla con

La etiqueta <img> no tiene cierre.

Si la imagen se encuentra en una WWW

<img src="imagenes/foto1.jpg" alt="Pintura geométrica">

Es decir, antecedemos al nombre de la imagen el