INTRODUCCIN A
HTML
HTML
<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.
LISTAS
LISTA ORDENADA
Contenedor
Tipo de lista
Efecto visual
<ol>
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:
<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
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
LISTA DE DEFINICIONES
Se utilizan para definir trminos.
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.
HIPERVNCULOS
La marca de hipervnculo a otra pgina del mismo sitio tiene la
siguiente sintaxis:
<a href="pagina2.html">Noticias</a>
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>
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.
Ejemplo de headings
PRRAFOS
COMENTARIOS
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.
ETIQUETAS BSICAS
WWW
WWW
WWW
EJERCICIO
A
Pagina01.html
Imagen01.jpg
Imagen02.jpg
Se pide:
B
Imagen03.jpg
B1
Pagina03.html
Imagen04.jpg
C1
Pagina02.html
Imagen05.jpg
Pagina04.html
D1
Imagen06.jpg