Aprendiendo HTML

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.
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>.
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>.
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>
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.

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.

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>

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 /

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">

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

Aprendiendo HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aprendiendo HTML

Uploaded by

Copyright:

Available Formats

INGENIERA

Mg. Ing Ivan Martin Perez Farfan

El HTML (Hyper Text Markup

ESQUEMA DE UN DOCUMENTO HTML

ESQUEMA DE UN DOCUMENTO HTML

ESQUEMA DE UN DOCUMENTO HTML

ETIQUETAS PRINCIPALES QUE CONTIENE UN

El proceso de indicar las diferentes partes que componen la informacin se

QU SON LOS ATRIBUTOS DE LAS ETIQUETAS?

PARTES QUE COMPONEN UN ELEMENTO HTML

Aunque en ocasiones se habla de forma indistinta de "elementos" y

PRIMER DOCUMENTO HTML

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

Una lista es un prrafo

< h1> Instrucciones< /h1>

< h1> M en< /h1>

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

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

Espaciado entre celdas

Tablas con XHTLM

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

un enlace tambin puede apuntar a una pgina de otro sitio

Al hacer clic sobre diferentes partes de un grfico vinculado,

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

La propiedad href del elemento "a" hace referencia a la pgina

Nos definen el tamao

Los prrafos se definen con la etiqueta <p>.

La etiqueta  se utiliza para insertar un comentario

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

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

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

4. Alineacin de las imagenes (con propiedad float)

4.2. float: Left

4.3. float: none

Imagenes como links

CMO INSERTAMOS IMGENES EN UN

CMO INSERTAMOS IMGENES EN UN

CMO INSERTAMOS IMGENES EN UN

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

Es decir, antecedemos al nombre de la imagen el

CMO INSERTAMOS IMGENES EN UN

Si la imagen se encuentra en una carpeta padre

Si queremos subir dos carpetas luego escribimos:

CMO INSERTAMOS IMGENES EN UN

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

Primero le indicamos que subimos al

You might also like