Anda di halaman 1dari 42

FACULTAD DE INGENIERA

ESCUELA ACADEMICA PROFESIONAL


DE INGENIERA DE SISTEMAS
CLASE N 2

INTRODUCCIN A
HTML

Mg. Orleans Moiss Glvez Tapia

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.

EAP de INGENIERA de SISTEMAS

ESQUEMA DE UN DOCUMENTO HTML

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 DE 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:
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prcticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>

PRIMER DOCUMENTO HTML

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

<li> tem 1 </li>


<li> tem 2 </li>

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:
<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 imgenes, prrafos, otras listas, etc.

LISTA ORDENADA

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

Contenedor

Tipo de lista

Efecto visual

<ul>
tem 1

<li> tem 1 </li>


<li> tem 2 </li>

No ordenada

tem 2

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 cdigo 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>Artculos</li>
<li>Contacto</li>
</ul>
</body>
</html>

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

LISTA NO ORDENADA

LISTA DE DEFINICIONES
Se utilizan para definir trminos.

Contenedor

Tipo de lista

Efecto visual
tem 1

<dl>

definicin 1

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

tem 2

</dl>

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

HIPERVNCULOS

Un hipervnculo es un
enlace, normalmente entre
dos pginas web de un
mismo sitio.

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


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

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
<h1> nos d el tipo de letra ms grande.

<h6> nos d el tipo de letra ms


pequeo.

<h1> al ser usado como ttulo de una


pgina Web, es de suma importancia ya
que es uno de los parmetros que
Google tiene en cuenta, a la hora de
indexar su sitio.

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

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:

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

Es decir, antecedemos al nombre de la imagen el


nombre de la carpeta y la barra /

WWW

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

WWW

EJERCICIO
A

Pagina01.html

Crear la estructura de directorios (de la figura),


pginas html e imgenes.

Imagen01.jpg
Imagen02.jpg

Se pide:
B

Imagen03.jpg

B1

Pagina03.html
Imagen04.jpg

C1

Pagina02.html

Imagen05.jpg

Pagina04.html

D1

Imagen06.jpg

Implementar el cdigo html de la pgina1.html


aadiendo referencias (HIPERVNCULOS) a las
imgenes y pginas de tal manera que se
observe en el navegador web un listado de
todas las imgenes:
Imagen01.jpg
Imagen02.jpg
Imagen03.jpg
Imagen04.jpg
Imagen05.jpg
Imagen06.jpg;
Y debajo un enlace a cada una de las pginas
html.

Anda mungkin juga menyukai