Sesion 01

Pregrado
SESIÓN 01:
Lenguaje de programación HTML
Palabras de Bienvenida al Curso
Hola, bienvenido al curso de “Ingeniería Web". Mi nombre es José Antonio Ogosi
Auqui, docente – facilitador del curso de esta maravillosa experiencia de
aprendizaje y desarrollo profesional.
Soy Ingeniero de Sistemas, con maestría en Gestión de Tecnologías de
Información, maestría en Docencia Universitaria, candidato a Doctor en
Ingeniería de Sistemas, colegiado habilitado. Me apasionan los aspectos que
están relacionados al desarrollo de habilidades personales, Innovación
tecnológica e Inteligencia Artificial. Por ello te motivaré al cambio actitudinal ante
el proceso de investigación mediante la ingeniería web, el cual efectivizará tu
desempeño laboral.
Ing. José Antonio Ogosi Auqui
http://joseantonioogosiau.wixsite.com/my-site
AGEN
DA
Estructura de un documento HTML
Listas, Tablas
Enlaces, Hiperenlaces
Manejo de imágenes, Sonido y Videos

HTM
L
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.
HTML 5
¿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.
FORMAT DEL
OS 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
EJEMPLO: HTML
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
LIST
AS
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
</ol> </li>
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.
ítem 1
<dl>
<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>.
LISTA DE
EJEMPLO: DEFINICIONES
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>
LISTA DE
DEFINICIONES
TABL
o Definimos las tablas con la AS
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.
…
TABLA
S
…
TABLA
S
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.

TABL
AS
<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>
TABL
AS
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.
TABLA
S
HTML
<TABLE border = 3 cellspacing = 2 <table border="1" cellpadding="5"
cellpadding = 2 width =60%> cellspacing="10">
<TH align = center>Productos <caption>Ventas
<TH align = center>Tipo Mensuales</caption>
<TR> <thead>
<TD align = LEFT>Mesa <tr>
<TD align = LEFT>Mueble <th>Productos</th>
<th>Tipo</th>
<TR> </tr>
<TD align = LEFT>Silla </thead>
<TD align = LEFT>Mueble <tbody>
<TR> <tr>
<TD align = LEFT>Computador <td>Mesa</td>
<TD align = LEFT>Equipo <td>Mueble</td>
</TABLE> </tr>
<tr>
<td>Silla</td>
<td>Mueble</td>
</tr>
<tr>
<td>Computadora</td>
<td>Equipo</td>
</tr>
</tbody>
</table>
TABL
AS
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ÍNCUL
OS
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ÍNCUL
OS
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ÍNCUL
OS
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ÍNCUL
OS
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ÍNCUL
OS
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ÍNCUL
OS
HIPERVÍNCUL
OS
EJEMPL
O
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>
EJEMPL
O
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>
HEADIN
GS
<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ÁRRAF
OS
Los párrafos se definen con la etiqueta <p>.

COMENTARI
OS
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
Imágenes
1. Imágenes 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
Imágenes
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="Tu,computador" />
</p>
Además hemos puesto el valor Tu, 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.
Imágenes
3. Altura y ancho
Podemos además especificar 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 especificar 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="Tu,computador"
height="298" width="249" />
</p>
Imágenes
4. Alineación de las imagenes (con propiedad float)
Para acomodar las imagenes en alguno sitio
preestablecido dentro del parrafo.
1. float: right
<img src="Imagen\pcmultimedia.jpg" alt="Tu,Computador"

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

<img src="Imagen\pcmultimedia.jpg" alt="Tu, Computador"
height="50" style=“float:left” />
Se visualizara:
Imágenes
4.3. float: none

<img src="Imagen\pcmultimedia.jpg" alt="Tu,Computador"
height="50" style=“float:none” />
Se visualizara:
Imágenes
Imágenes como links

También 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.
MULTIMED
IA
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
Tabla
s
EJERCICIOS :
1. Realizar la siguiente tabla :
75
Listado de
Personaje
Preguntas – sugerencias y/o recomendaciones:
Bibliografía
Código de biblioteca LIBROS, REVISTAS, ARTÍCULOS, TESIS, PÁGINAS WEB.
005.13 B73 Boronczyk T(2009).”PHP y MySQL”.Madrid:Anaya
005.133P D75 Doyle, M.(2010).”Fundamentos PHP práctico”.Madrid:Anaya Multimedia
323.01C35 Castillo, M. (2009) Derechos Humanos. Lima: Fecat.
005.133PM H31 Harris, A.(2009).” Programación con PHP 6 y MySQL”. Madrid: Anaya Multimedia .
005.133PM M52 Meloni J(2009).”PHP, MySQL y Apache”.Madrid:Anaya Multimedia
005.133P L46 Myer, T.& Nowicki S. & Thompson, E.(2010).”Profesional PHP 6”.Madrid:Anaya
Multimedia

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

Pregrado

Ing. José Antonio Ogosi Auqui

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.

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

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

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

<lh> título de la lista </lh>

Contenedor Tipo de lista Efecto visual

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

<ul type=disc | circle | square>

<lh> título de la lista </lh>

Contenedor Tipo de lista Efecto visual

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

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 bordercolor=…> color del borde

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

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

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

El valor de la propiedad debe ir entre comillas

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

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

<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

Además de texto, podemos incorporar al contenido de nuestros

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

4.2. float: Left

4.3. float: none

Imágenes 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

Si la imagen se encuentra en una carpeta padre

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

Es decir, le antecedemos .. y la barra / al nombre de

Si queremos subir dos carpetas luego escribimos:

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

Primero le indicamos que subimos al

o Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que

Código de biblioteca LIBROS, REVISTAS, ARTÍCULOS, TESIS, PÁGINAS WEB.

005.13 B73 Boronczyk T(2009).”PHP y MySQL”.Madrid:Anaya