Anda di halaman 1dari 58

INGENIERA

WEB
FACULTAD DE
INGENIERA
ESCUELA ACADEMICA
PROFESIONAL DE
INGENIERA DE
SISTEMAS

CLASE N 02

LENGUAJE DE
PROGRAMACIN
HTML

Mg. Ing Ivan Martin Perez Farfan

AGENDA

HTML

El HTML (Hyper Text Markup


Language) es el lenguaje con el que
se escriben las pginas web. Est
compuesto
por
etiquetas,
que
marcan el inicio y el fin de cada
elemento del documento.

ESQUEMA DE UN DOCUMENTO HTML


Una pgina HTML tiene dos secciones muy bien definidas que
son la cabecera:
<head>
</head>
Y el cuerpo de la pgina:
<body>
Cuerpo de la pgina.
</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 informacin se


denomina marcar (markup en ingls). Cada una de las palabras que se
emplean para marcar el inicio y el final de una seccin se denominan
etiquetas.

QU SON LOS ATRIBUTOS DE LAS ETIQUETAS?


Muchas etiquetas llevan atributos. Los mismos proveen de mayor
informacin 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 sera:

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 ms que una
etiqueta, ya que est formado por:
Una etiqueta de apertura.
Cero o ms atributos.
Texto encerrado por la etiqueta.
Una etiqueta de cierre.

PRIMER DOCUMENTO HTML


EJEMPLO:
A continuacin se muestra el cdigo HTML de una pgina web muy sencilla:
< htm l>
< head>
< title> Elprim er docum ento H TM L< /title>
< /head>
< body>
< p> Ellenguaje H TM L es < strong> tan sencillo< /strong> que
prcticam ente se entiende sin estudiar elsignifi
cado
de sus etiquetas principales.< /p>
< /body>
< /htm l>

ETIQUETAS ANIDADAS

Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre


otras etiquetas de comienzo y de cierre

LISTAS

Una lista es un prrafo


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>
<li> tem 1
</li>
<li> tem 2
</li>

1. tem 1
Lista
ordenada

2. tem 2
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 cdigo HTML muestra un ejemplo sencillo de lista ordenada:
< htm l>
< head> < title> Ejem plo de etiqueta O L< /title> < /head>
< body>

< h1> Instrucciones< /h1>

< ol>
< li> Enchufar correctam ente< /li>
< li> Com probar conexiones< /li>
< li> Encender elaparato< /li>
< /ol>

< /body>
< /htm l>

Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.

LISTA DESORDENADA
Exponen la lista anteponiendo un punto, cuadrado o tringulo
negro.

Contenedor

Tipo de
lista

Efecto
visual

<ul>
<li> tem 1
</li>
<li> tem 2
</li>

tem 1
No ordenada

tem 2
tem 3

Las listas</ul>
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 cdigo HTML muestra un ejemplo sencillo de lista no ordenada:
< htm l>
< head> < title> Ejem plo de etiqueta U L< /title> < /head>
< body>

< h1> M en< /h1>

< ul>
< li> Inicio< /li>
< li> N oticias< /li>
< li> Artculos< /li>
< li> Contacto< /li>
< /ul>

< /body>
< /htm l>

Dentro de cada Item se pueden agregar imgenes, prrafos, otras listas, etc.

LISTA DE DEFINICIONES
Se utilizan para definir trminos.

Contenedor

Tipo de lista

<dl>
<dt>Trmino</
dt>
<dd>Definicin
</dd>
</dl>

Efecto visual

tem 1
Definicin

definicin 1
tem 2
definicin 2

Las listas de definicin se representan con la etiqueta <dl>.


Los trminos de las mismas con <dt>.
La definicin de esos trminos comienza con <dd>.

LISTA DE DEFINICIONES
Se utilizan para definir trminos.

Las listas de definicin se representan con la etiqueta <dl>.


Los trminos de las mismas con <dt>.
La definicin de esos trminos comienza con <dd>.

LISTA DE DEFINICIONES
EJEMPLO:
El siguiente cdigo HTML muestra un ejemplo sencillo de lista de definicin:
<html>
<head><title>Ejemplo de etiqueta DL</title></head>
<body>
<h1>Metalenguajes</h1>

<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definicin 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>

LISTA DE DEFINICIONES

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, imgenes, formularios, listas,
otras tablas, etc.

TABLAS

TABLAS

MRGENES DE LA CELDA

Espaciado entre celdas

Tablas con XHTLM


Las tablas son una interesante herramienta para el marcado de
informacin tabular.
El elemento table da comienzo a la tabla. Dentro tenemos a
caption que encierra el ttulo que llevar la tabla.
A partir de aqu definimos dos partes principales: thead dnde 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 ms (tr) cuyas
celdas se contienen mediante el uso del elemento td.

HTML
<TABLE border = 3 cellspacing = 2
cellpadding = 2 width =60%>
<TH align = center>Productos
<TH align = center>Tipo
<TR>
<TD align = LEFT>Mesa
<TD align = LEFT>Mueble
<TR>
<TD align = LEFT>Silla
<TD align = LEFT>Mueble
<TR>
<TD align = LEFT>Computador
<TD align = LEFT>Equipo
</TABLE>

XHTML
<table border="1" cellpadding="5"
cellspacing="10">
<caption>Ventas Mensuales</caption>
<thead>
<tr>
<th>Productos</th>
<th>Tipo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mesa</td>
<td>Mueble</td>
</tr>
<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 seccin con el elemento tfoot, el cual
determinar la seccin del pie (al final de la tabla).
Ejemplo:
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td></td>
<td>65</td>
</tr>
</tfoot>

HIPERVNCULOS

Un hipervnculo es un
enlace, normalmente entre
dos pginas web de un
mismo sitio.
La parte activa del enlace puede
ser tambin una imagen en lugar
de texto y el esquema sera el
siguiente
<a href="url del
documento"><IMG SRC="fichero
imagen"></a>

El elemento ms importante que tiene una pgina de internet es el


hipervnculo, estos nos permiten cargar otra pgina en el
navegador.

HIPERVNCULOS

se conocen como
hiperenlaces, enlaces o
links.

un enlace tambin puede apuntar a una pgina 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.

HIPERVNCULOS
Un hipervnculo de texto o
grfico oculta una URL
Al hacer clic en un
hipervnculo la URL es pasada
al explorador

Al hacer clic sobre diferentes partes de un grfico vinculado,


llamado un mapa de imagen, se desplazar a diferentes pginas
web o a diferentes puntos dentro de la misma pgina.

HIPERVNCULOS
La marca de hipervnculo a otra pgina 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 pgina
(normalmente subrayado).

HIPERVNCULOS
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 pgina


que debe mostrar el navegador si el visitante hace clic sobre el
hipervnculo.

HIPERVNCULOS

HIPERVNCULOS

EJEMPLO
La sintaxis para disponer un hipervnculo 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 pgina.
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

Nos definen el tamao


de un ttulo o cabecera.

Ejemplo de headings

PRRAFOS

Los prrafos se definen con la etiqueta <p>.

COMENTARIOS

La etiqueta <!-- ... --> se utiliza para insertar un comentario


dentro del cdigo que estamos escribiendo.
<!-- Esto es un comentario. -->

Es ignorado por el navegador al momento de leerlo. Los comentarios nos


sirven para explicar mejor el cdigo y son de gran ayuda en el momento
que necesitemos editarlo.

SALTO DE LNEA
El salto de lnea est definido con la etiqueta <br>. Es
utilizado cuando queremos terminar una lnea sin
necesidad de terminar con el prrafo.

La etiqueta <br> obliga a saltar de lnea dondequiera que la ubiquemos

ETIQUETAS BSICAS

Imagenes

1. Imagenes formatos
Adems de texto, podemos incorporar al contenido de nuestros
documentos XHTML archivos de imagenes que pueden contener
fotografas, dibujos, diagramas, etc.
Hay una seria discusin acerca de que formato de imagenes es
conveniente utilizar para el empleo en la web, que incluye temas
variados y complejos cmo: algoritmos de compresin 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 direccin (relativa o
absoluta) de la ubicacin de la imagen.
Ejemplo de uso de img:
<p>
<img src="Imagen\computer.jpg" alt="Tux,computador" />
</p>

Adems hemos puesto el valor Tux, al atributo alt, este


debe explicar en palabras el contenido de la fotografa.
Los agentes de usuario basados en texto mostrarn el
valor del atributo en vez de la imagen,
Es muy recomendable su uso, ya que adems 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 adems especficar la altura y el ancho de la imagen,
mediante el uso de los atributos height y width respectivamente.
En el ejemplo anterior mostramos cmo incorporar una imagen a
nuestro documento sin especficar 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 podra resultar en una carga ms lenta del
renderizado final de la pgina. Es muy conveniente averiguar el
tamao de nuestras imagenes en pxeles 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. Alineacin 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


<img
src="Imagen\pcmultimedia.jpg"
height="50" style=float:left />
Se visualizara:

alt="Tux,Computador"

Imagenes

4.3. float: none


<img
src="Imagen\pcmultimedia.jpg"
height="50" style=float:none />
Se visualizara:

alt="Tux,Computador"

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>

CMO INSERTAMOS IMGENES EN UN


ARCHIVO HTML?
Para insertar imgenes en un sitio usaremos la etiqueta
<img>.
Esta etiqueta es vaca, es decir que debemos utilizarla con
el atributo src para que muestre la imagen.
La etiqueta <img> no tiene cierre.

CMO INSERTAMOS IMGENES EN UN


ARCHIVO HTML?
WWW
La siguiente pgina muestra una imagen llamada
foto1.jpg (La imagen se encuentra almacenada en
el servidor en la misma carpeta donde se localiza
esta pgina)
<html>
<head>
</head>
<body>
<img src="foto1.jpg" alt="Pintura geomtrica">
</body>
</html>

CMO INSERTAMOS IMGENES EN UN


ARCHIVO HTML?
Si la imagen se encuentra en una
subcarpeta llamada imagenes, luego la
sintaxis para recuperarla ser:

WWW

<img src="imagenes/foto1.jpg" alt="Pintura geomtrica">

Es decir, antecedemos al nombre de la imagen el


nombre de la carpeta y la barra /

CMO INSERTAMOS IMGENES EN UN


ARCHIVO HTML?
WWW

Si la imagen se encuentra en una carpeta padre


de donde se encuentra la pgina HTML luego la
sintaxis ser:
<img src="../foto1.jpg" alt="Pintura geomtrica">
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 geomtrica">

CMO INSERTAMOS IMGENES EN UN


ARCHIVO HTML?
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


geomtrica">

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.

WWW

MULTIMEDIA
o La etiqueta <embed> es la que se utiliza para insertar archivos de
vdeo.
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 travs del atributo src hay que especificar la ruta y el nombre del
archivo de vdeo.
<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
57

EJERCICIOS :
1. Realizar la siguiente tabla :

Listado de Personaje