You are on page 1of 122

UNIDAD 2.

LENGUAJE DE
MARCADO

Examen Jueves 28 de Septiembre de 2017


COMPETENCIA A
DESARROLLAR

Publicacin de una pgina web bsica


con lenguaje de marcado.
BIBLIOGRAFA
1. Gutirrez Abraham y Bravo, Gires. PHP 4.0 a travs de
ejemplos. Alfa Omega, ISBN 970-15-0955-2.

2. Lpez Jos. Domine HTML y DHTML. Alfa Omega, ISBN 970-


15-0876-9.

3. Soria Ramn. Diseo y Creacin de Paginas Web HTML 4.0.


Alfa Omega.

4. Weinman Lynda. Diseo Creativo HTML. Pearson ISBN 970-


260-2734
EVALUACIN
Evaluacin Diagnstica 0%

Evaluacin Formativa:
Participacin en clase 20 %
Tarea 10 %
Ejercicios en clase 20 %

Evaluacin Sumativa
Examen prctico 50 %

Total 100%
Tarea

Instalar Sublime y Balsamiq Mockups


EVALUACIN DIAGNSTICA
1.- Define qu HTML
2.- Qu diseadores has utilizado para
realizar pginas web?
3.- Qu es la Usabilidad?
4.- Qu es un Hosting?
5.- Qu diferencia existe entre una
direccin relativa y una absoluta?
HTML (Hiper Text Markup
Language)
El principio esencial del HTML es utilizar
etiquetas (tags).
Y funcionan de la siguiente manera:
<XXX> Este es el inicio de una
etiqueta.
</XXX> Este es el cierre de una
etiqueta.
HTML (Hiper Text Markup
Language)
Cada pgina debe comenzar y terminar con la
etiqueta. Una etiqueta se cierra agregando /.
La mayora de las etiquetas tienen una
etiqueta de terminacin. Con las etiquetas se
dan instrucciones a los navegadores. Lo que
se acaba de decir al navegador es "este es el
inicio de un documento HTML" (<html>) y
"este es el final del documento HTML"
(</html>). Y toda la informacin va dentro
de estas etiquetas, ejemplo:
SINTAXIS HTML
<HTML>
[Todo el documento]
</HTML>
El documento en s est dividido en dos zonas
principales:
El encabezamiento, comprendido entre las
etiquetas <HEAD> y </HEAD>
El cuerpo, comprendido entre las etiquetas
<BODY> y </BODY>
SINTAXIS HTML
Dentro del encabezamiento <HEAD> hay
informacin del documento, que no se ve en
la pantalla principal, principalmente el ttulo
del documento, comprendido entre las
etiquetas <TITLE> y </TITLE>.
El ttulo <TITLE> debe ser breve y
descriptivo de su contenido, pues ser lo que
vean los dems cuando aadan nuestra
pgina a su bookmark (o agenda de
direcciones).
SINTAXIS HTML

Dentro del cuerpo <BODY> est todo lo


que queremos que aparezca en la
pantalla principal (texto, imgenes,
tablas, etc.)
SINTAXIS HTML
Por tanto, la estructura queda de esta manera:
<HTML>
<HEAD>
<TITLE> Ttulo de la pgina </TITLE>
</HEAD>
<BODY>
[Aqu van las etiquetas que visualizan la pgina]
</BODY>
</HTML>
SINTAXIS HTML
Existen varios atributos que incluye el cuerpo
de nuestro programa <BODY> que son los
siguientes:
BGCOLOR: Color de fondo de la pgina.
BACKGROUND: Imagen de fondo.
TEXT: Color del texto.
LINK: Color de los enlaces.
VLINK: Color de los enlaces visitados.
ALINK: Color de los enlaces activos (select)
SECCIN DE EJERCICIOS
DE HTML

Para hacer ms prctico y sencillo el


uso del HTML, iremos haciendo varios
ejercicios, los cuales incluirn ciertas
instrucciones que veremos poco a poco.
EJERCICIO 1

1. Instalar Sublime
2. Realizar el siguiente ejercicio:
EJERCICIO 1
<html>
<head>
<title> Mi Primera Pgina</title>
</head>
<body> Texto de mi pgina web =)
</body>
</html>
EJERCICIO 2 (TAMAOS Y TIPOS
DE LETRA PARA EL TEXTO)
Para definir distintos tamaos de letra, en HTML se
utiliza el elemento lleno <Hx> </Hx> donde x es un
nmero que puede variar entre 1 y 6, siendo 1 el
tamao mayor. Se escribirn as dentro del <BODY>:
<H1> Texto de prueba (H1)</H1>

<H2> Texto de prueba (H2)</H2>

<H3> Texto de prueba (H3)</H3>

<H4> Texto de prueba (H4)</H4>

<H5> Texto de prueba (H5)</H5>

<H6> Texto de prueba (H6)</H6>


EJERCICIO 3
Otra forma de cambiar los tamaos de letra
es utilizar el elemento <FONT > con el
atributo VALOR, que es un nmero entre 1 y
7.
El valor por defecto del texto es 3, por lo que
valor puede ser positivo (+) o negativo (-)
respecto a 3. Una gran ventaja de esta
notacin respecto a la anterior es que no se
produce un salto de prrafo despus de cada
cambio, por lo que pueden hacerse cosas
como esta:
EJERCICIO 3
<FONT SIZE=3>A</font>
<FONT SIZE=4>A</font>
<FONT SIZE=5>A</font>
<FONT SIZE=6>A</font>
<FONT SIZE=7>A</font>
<FONT SIZE=6>A</font>
<FONT SIZE=5>A</font>
<FONT SIZE=4>A</font>
<FONT SIZE=3>A</font>
EJERCICIO 4

Tambin pueden establecer un tipo de


letra independientemente de la letra
que pone el navegador segn las
configuraciones de las personas
utilizando la palabra FONT FACE.
EJERCICIO 4
<FONT FACE="arial">Texto de prueba 12345 con tipo
ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con
tipo TIMES NEW ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo
COURIER NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo
COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo
ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo
SMALL FONTS</FONT>
EJERCICIO 5
TEXTO EN COLOR

Se puede controlar el color del texto


utilizando el elemento <FONT> con el
atributo COLOR=xxx, donde xxx es el
nombre en ingls del color el cdigo
del color que se desea.
EJERCICIO 5
TEXTO EN COLOR
<FONT COLOR="lime">Texto LIMA </FONT>
<FONT COLOR="magenta">Texto MAGENTA </FONT>
<FONT COLOR="purple">Texto PURPURA </FONT>
<FONT COLOR="cyan">Texto CYAN </FONT> <br>
<FONT COLOR="brown">Texto MARRON </FONT>
<FONT COLOR="black">Texto NEGRO </FONT>
<FONT COLOR="gray">Texto GRIS </FONT>
<FONT COLOR="teal">Texto TEAL </FONT>
<FONT COLOR="white">Texto BLANCO </FONT>
EJERCICIO 6
TEXTO EN COLOR
He aqu una combinacin de colores y
tamaos, si escribes:
<FONT SIZE=6 COLOR="red">E</FONT>
<FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT>
<FONT SIZE=4>rueba </FONT>
<FONT COLOR="#FF0000">codigo</FONT>
EJERCICIO 7
Tambin al igual que el texto, puedes
cambiar los diferentes atributos que
contiene la etiqueta <BODY>:
<body bgcolor="#FFFF00#>
Texto, texto, texto, texto
</body
CDIGOS DE COLORES
White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Bakers Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
CDIGOS DE COLORES
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
CDIGOS DE COLORES
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
CDIGOS DE COLORES
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
CDIGOS DE COLORES
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB
Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
CDIGOS DE COLORES
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32
Cambios de prrafo y de lnea. Lnea
horizontal. Divisiones de texto. Enmarcado

Para definir los saltos de prrafo se


utiliza el elemento lleno <P> </P>
(por Paragraph).
No suele utilizarse el cierre </P>, ya
que el texto continuar normalmente
hasta que encuentre otro salto <P> Se
escribir as:
EJERCICIO 8
<body>
Texto 1 Texto 1 Texto 1 Texto 1 Texto
1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 <P>
Texto 2 Texto 2 Texto 2 Texto 2 Texto
2 Texto 2 Texto 2 Texto 2
</body>
EJERCICIO 9
Como puede verse, hay un lnea en blanco
entre los dos bloques. El efecto del elemento
<BR> (por Break) es el mismo, pero sin esa
lnea vaca.
Se escribir as:
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 <BR>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2 Texto 2 Texto 2
EJERCICIO 10
El elemento <P> admite cuatro atributos:
ALIGN=LEFT (por defecto) alineacin a la
izquierda
ALIGN=RIGHT alineacin a la derecha
ALIGN=CENTER alineacin al centro
ALIGN=JUSTIFY alineacin justificada
En el caso de utilizar alguno de estos
atributos, es recomendable usar el cierre
</P>
EJERCICIO 10
<P ALIGN=LEFT> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto
1 Texto 1 Texto 1 Texto 1
<P ALIGN=RIGHT> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto
2 Texto 2 Texto 2 Texto 2
<P ALIGN=CENTER> Texto 3 Texto 3 Texto 3 Texto 3 Texto
3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3
<P ALIGN=JUSTIFY> Texto 4 tex Texto 4 Texto 4 tex Texto
4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4
Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto
4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4
EJERCICIO 11
Un elemento que se comporta de forma
parecida a <BR> es <DIV> pero que
admite los mismos atributos que <P>:
ALIGN=LEFT
ALIGN=RIGHT y
ALIGN=CENTER
Aqu es necesario utilizar el cierre
</DIV>
EJERCICIO 11
<DIV ALIGN=LEFT> texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1
</DIV>

<DIV ALIGN=RIGHT> texto2 texto2 texto2 texto2 texto2 texto2 texto2


texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2< /DIV>

<DIV ALIGN=CENTER> texto3 texto3 texto3 texto3 texto3 texto3 texto3


texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 </DIV>
EJERCICIO 12
Otro interesante efecto es el elemento lleno
<BLOCKQUOTE> que sirve para presentar prrafos
adentrados (como si estuviesen tabulados). Se
escribir as:
<BLOCKQUOTE> texto texto texto texto texto
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto
<BLOCKQUOTE> texto2 texto2 texto2 texto2 texto
texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto 2 </BLOCKQUOTE>
</BLOCKQUOTE>
EJERCICIO 13
Otro separador de bloques de texto es el
elemento vaco <HR> (por Horizontal Rule).
El elemento <HR> admite dos parmetros:
WIDTH y SIZE. El primero define la longitud
de la lnea y el segundo su anchura. No es
obligado usar los dos a la vez, Por ejemplo, si
escribes:
<HR WIDTH=400 SIZE=5>
EJERCICIO 14
El valor del atributo WIDTH se puede
expresar, como en el ejemplo anterior,
en nmero de puntos (pxels), o en
tantos por ciento referidos al ancho
total de la ventana.
As:
<HR WIDTH=80% SIZE=5>
EJERCICIO 15
Adems se puede indicar su posicin respecto
a los mrgenes de la ventana con los
atributos ALIGN=CENTER (por defecto)
ALIGN=LEFT y ALIGN=RIGHT.
Por ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
<HR WIDTH=80% SIZE=7 ALIGN=CENTER>
<HR WIDTH=80% SIZE=4 ALIGN=RIGHT>
EJERCICIO 16
Hay otro elemento, que permite rodear
un texto con un marco, y
opcionalmente ponerle una etiqueta. Se
trata del elemento: <FIELDSET>
Si se escribe:
<FIELDSET>
Esto es una prueba de enmarcado
</FIELDSET>
EJERCICIO 17
El elemento <FIELDSET> tiene un
parmetro que permite etiquetar el
recuadro: <LEGEND>
Ejemplo:
<FIELDSET>
<LEGEND>
Esto es una etiqueta
</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>
EJERCICIO 18
El parmetro <LEGEND> tiene tres atributos
que indican la posicin de la etiqueta: LEFT
(por defecto), RIGHT y CENTER. Por
ejemplo:
<FIELDSET>
<LEGEND ALIGN=CENTER>
Esto es una etiqueta
</LEGEND>
Esto es una prueba de enmarcado
</FIELDSET>
TEXTOS PREFORMATEADOS
Posiblemente ya se habrn dado cuenta de
que, cuando escriben un texto con el bloc de
notas, a la hora de ver la pgina, algunas
cosas no estn como creen que las pusieron.
Como por ejemplo poner dos o tres espacios
en blanco entre palabras, o intentar
encolumnar los datos de una pequea tabla:
y acaba todo junto y en la misma lnea
TEXTOS PREFORMATEADOS
Este efecto se puede eliminar con el elemento
lleno <PRE>.
Al texto que va dentro del elemento PRE se
le pueden aplicar todos los elementos que se
quiera, siempre que sean elementos que no
alteren la posicin del texto.
Por defecto, los textos preformateados se ven
con tipo de letra "curier", es decir de paso fijo
y los no preformateados en "Times New
Roman". Estos tipos son configurables en el
visualizador.
EJERCICIO 19
<PRE>
12345678
9 10 11 12 13
14 15 16 17 18
19 20 21
texto preformateado
</PRE>
EJERCICIO 20
El explorer, por defecto, elimina varios espacios en
blanco y los convierte en uno solo.
Si lo que desean es separar una palabra de otra ms
de un espacio, se puede recurrir a una instruccin
especial que le indica esto al navegador, pero hay
que darla codificada; funciona como un avance de
carro, y aunque en pantalla cumple su objetivo,
cuando se imprime la pgina.
Se escribe: &#160;
y como alias se utiliza: &nbsp;
EJERCICIO 20
Por ejemplo, si escribes:

texto texto&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;texto texto

Se ve as:
texto texto texto texto
EJERCICIO 21
Tambin se ha implementado un nuevo elemento que permite definir
espacios en blanco sin utilizar el elemento <PRE>

Se trata del elemento <SPACER>. Este elemento puede ir


acompaado de los atributos TYPE y SIZE y se puede utilizar en
cualquier zona de una pgina, pero donde ms se aprecia su efecto es
en las columnas.

Se escibir asi:
<MULTICOL COLS=2> <SPACER TYPE=HORIZONTAL SIZE=35> texto texto texto
texto texto texto texto texto texto texto texto texto
<P>
<SPACER TYPE=HORIZONTAL SIZE=35> texto texto texto texto texto texto texto
texto texto texto texto texto
<SPACER TYPE=VERTICAL SIZE=35> texto texto texto texto texto texto texto texto
texto texto texto texto
</MULTICOL>
COLUMNAS DE TEXTO
Con el elemento <MULTICOL> es posible
hacer columnas en forma vertical, por
ejemplo, un peridico o una revista. Hay que
aclarar que este elemento no tiene nada que
ver con las tablas, aunque su apariencia
pueda ser similar a una tabla sin bordes.
Este elemento tiene tres atributos: COLS,
GUTTER y WIDTH. Veamos su uso:
COLUMNAS DE TEXTO
COLS Es obligatorio, y determina cuantas
columnas debern aparecer en pantalla.
GUTTER Establece el espacio que habr
entre columnas, medido en pxeles (puntos de
pantalla). El valor por defecto es 10.
WIDTH Sirve para controlar el ancho de
todas las columnas definidas respecto al
ancho de la pantalla. Todas las columnas son
siempre del mismo ancho. El parmetro se
puede dar en tantos por ciento o en pixels. Si
se omite, por defecto se entiende 100%.
EJERCICIO 22
<MULTICOL COLS=2 GUTTER=10
WIDTH=100%> texto texto texto texto texto
texto texto texto texto texto texto texto
<MULTICOL COLS=2 GUTTER=10
WIDTH=100%> texto texto texto texto
texto texto texto texto texto texto texto
texto </MULTICOL>
</MULTICOL>
ESTRUCTURAS HTML
El elemento <HTML> </HTML> no es
obligatorio. Solo sirve como identificacin del
tipo de contenido del fichero para ciertos
programas que hacen cambios masivos en
muchas pginas a la vez. Para escribir
comentarios en la pgina (que slo se ven en
el texto fuente, pero no en el visualizador) se
utilizar el elemento <!-- --> , ejemplo:
EJERCICIO 23
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>
<!-- Esto es un comentario-->
<BODY>
<H1> Esto es una "demo" de documento HTML
</H1>
Esto es el ms sencillo de los documentos HTML.
</BODY>
</HTML>
OTROS EFECTOS EN EL
TEXTO
Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itlica:
<I>Texto en itlica</I>
Texto con nfasis:
<EM>Texto con nfasis</EM>
OTROS EFECTOS EN EL
TEXTO
Texto ejemplo de cdigo:
<CODE>Texto ejemplo de cdigo</CODE>
Texto teletipo:
<TT>Texto teletipo</TT>
Texto subrayado:
<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
OTROS EFECTOS EN EL
TEXTO
Texto de direccin:
<ADDRESS>Texto de direccin</ADDRESS>
Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superndice Texto normal
<SUP>Texto Superndice</SUP>
Texto subndice Texto nomal
<SUB>Texto Subndice</SUB>
OTROS EFECTOS EN EL
TEXTO

Texto grande
<BIG>Texto grande</BIG>

Texto pequeo
<SMALL>Texto pequeo</SMALL>
LISTAS Y MENS
Hay elementos que permiten crear
texto con varios formatos de listado:
Estos pueden ser ordenados <OL> (se
refiere a numerados, no ordenados por
algn criterio), desordenados <UL>
(no numerados), directorios <DIR>,
menu <MENU> y listados de
definicin <DL>.
LISTAS Y MENS
Veamos cmo es la sintaxis bsica y
apariencia de estos elementos, a partir
de los cuales, pueden hacerse
combinaciones muy complejas mediante
anidamientos de unos con otros, hasta
conseguir prcticamente cualquier
presentacin deseada:
LISTAS Y MENS
Esto es una lista ordenada (numerada):
1. Primera lnea
2. Segunda lnea
Se escribiria de la siguiente forma en HTML:
<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>
Fjate en que los elementos <LI> no tienen cierre.
Terminan cuando aparece otro igual o se cierra la
lista.
LISTAS Y MENS
Esto es una lista desordenada (no
numerada):
Primera lnea
Segunda lnea
Se escribe:
<UL>
<LI>Primera lnea
<LI>Segunda lnea
</UL>
LISTAS Y MENS
En el caso anterior observamos que los
nmeros han sido sustituidos por unos
circulos gruesos. Esa es la apariencia
por defecto; se puede cambiar usando
el atributo TYPE con tres valores DISC,
CIRCLE, y SQUARE (el valor por defecto
es DISC).
LISTAS Y MENS

EJEMPLO 25:
<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>
LISTAS Y MENS

EJEMPLO 26:
<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>
LISTAS Y MENS
Las listas ordenadas no slo se pueden
ordenar con nmeros. Tambin se pueden
utilizar letras y numeracin romana tanto en
maysculas como minsculas. Para esto se
utiliza el atributo TYPE del elemento <OL>
con los siguientes valores: TYPE=1 (por
defecto) para nmeros, TYPE=A para letras
maysculas, TYPE=a para letras
minsculas, TYPE=I para numeracin
romana en maysculas y TYPE=i para
numeracin romana en minsculas.
LISTAS Y MENS
EJERCICIO 27:
<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
LISTAS Y MENS
EJERCICIO 28:
<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
LISTAS Y MENS
En algunos casos puede interesarnos
que la lista no comience por el nmero
1 (por ejemplo si es una lista que
continua en otra pgina). Se puede
conseguir con el atributo START
combinado con TYPE. Esto es una lista
ordenada con letras maysculas y
que comienza por la E:
LISTAS Y MENS
EJERCICIO 29:
<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea <LI>
Tercera linea
<LI>Cuarta linea
</OL>
LISTAS Y MENS
EJERCICIO 30:
REALIZAR UNA LISTA QUE TENGA 3
LINEAS Y QUE EMPIEZE CON a.
EJERCICIO 31:
REALIZAR UNA LISTA QUE TENGA 3
LINEAS Y QUE EMPIEZE CON i.
LISTAS Y MENS
El manejo de listas y mens son muy
similares, la diferencia entre un men y una
lista desordenada, es que las lneas en la
lista desordenada comienzan en el margen
izquierdo y las del men unas posiciones
ms a la derecha (aunque eso depende del
visualizador, con Netscape se ven igual).
<MENU>
<LI>Primera linea
<LI>Segunda linea
</MENU>
LISTAS Y MENS
Con el uso de Directorios ocurre lo
mismo que con el men, si se usa
Netscape no se aprecia la diferencia.
<DIR>
<LI>Primera linea
<LI>Segunda linea
</DIR>
LISTAS Y MENS
Las listas de definicin escalonadas utilizan
otro tipo de declaracin:
<DL>
<DT>Primera lnea
<DD>Segunda lnea
</DL>
Donde: DT. Determinante (Definition Left)
DD. Dependiente del Determinante
EJEMPLOS DE LISTAS
1. Desordenada simple con marcas
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
EJEMPLOS DE LISTAS
2. Desordenada simple sin marcas.
Comienzo en margen izquierdo
<DL>
<DT>Lnea de texto 1
<DT>Lnea de texto 2
<DT>Lnea de texto 3
</DL>
EJEMPLOS DE LISTAS
3. Desordenada simple sin marcas.
Comienzo una posicin a la
derecha
<UL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
</UL>
EJEMPLOS DE LISTAS
4. Desordenada simple con marcas.
Comienzo una posicin a la
derecha
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
</UL>
EJEMPLOS DE LISTAS
5. Desordenada simple sin marcas.
Comienzo dos posiciones a la
derecha
<UL>
<DD>Linea de texto 1
<DD>Linea de texto 2
<DD>Linea de texto 3
</UL>
EJEMPLOS DE LISTAS
6. Desordenada simple sin marcas.
Comienzo tres posiciones a la derecha
<UL>
<UL>
<DD>Lnea de texto 1
<DD>Lnea de texto 2
<DD>Lnea de texto 3
</UL>
</UL>
EJEMPLOS DE LISTAS
7. Desordenada simple con marcas.
Comienzo dos posiciones a la derecha
<UL>
<UL TYPE=DISC>
<LI>Lnea de texto 1
<LI>Lnea de texto 2
<LI>Lnea de texto 3
</UL>
</UL>
EJEMPLOS DE LISTAS
8. Desordenada con 4 niveles sin marcas
<DL>
<DT>Linea de texto 1
<DT>Linea de texto 2
<DT>Linea de texto 3
<DL>
<DT>Linea de texto 3.1
<DT>Linea de texto 3.2
<DL>
<DT>Linea de texto 3.2.1
<DT>Linea de texto 3.2.2
<DL>
<DT>Linea de texto 3.2.2.1
<DT>Linea de texto 3.2.2.2
</DL>
</DL>
</DL>
<DT>Linea 4 de texto
</DL>
EJEMPLOS DE LISTAS
9. Desordenada con 4 niveles con marcas
<UL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<UL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<UL>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</UL>
<LI>Linea 4 de texto
</UL>
EJEMPLOS DE LISTAS
10. Ordenada con 4 niveles, todos ordenados. Numeracin romana en maysculas y
minsculas
<OL TYPE=I>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL TYPE=i>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<OL TYPE=i>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<OL TYPE=i>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</OL>
</OL>
</OL>
<LI>Linea de texto 4
</OL>
EJEMPLOS DE LISTAS
11. Ordenada con 4 niveles, 2 desordenados con marcas
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<UL TYPE=SQUARE>
<LI>Linea de texto 3.2.1
<LI>Linea de texto 3.2.2
<UL TYPE=CIRCLE>
<LI>Linea de texto 3.2.2.1
<LI>Linea de texto 3.2.2.2
</UL>
</UL>
</OL>
<LI>Linea de texto 4

</OL>
EJEMPLOS DE LISTAS
12. Ordenada con 4 niveles, 2 desordenados sin marcas
<OL>
<LI>Linea de texto 1
<LI>Linea de texto 2
<LI>Linea de texto 3
<OL>
<LI>Linea de texto 3.1
<LI>Linea de texto 3.2
<DL>
<DD>Linea de texto 3.2.1
<DD>Linea de texto 3.2.2
<DL>
<DD>Linea de texto 3.2.2.1
<DD>Linea de texto 3.2.2.2
</DL>
</DL>
</OL>
<LI>Linea de texto 4
</OL>
TABLAS EN HTML
El elemento bsico de definicin de tabla es
<TABLE> </TABLE> y en su interior se
disponen los sub elementos <TR> para
definir una fila (Row) <TH> para definir una
cabecera (Header) <TD> para definir una
celda de datos (Data). Estos sub elementos
tambin han de llevar sus correspondientes
cierres: </TR> </TH> <TD>.
TABLAS EN HTML
Una cabecera <TH> es los mismo que
una celda de datos <TD> pero de
forma automtica el texto de su
contenido recibe los atributos de negrita
y centrado. Slo es posible definirlas al
principio de las filas, de las columnas o
de ambas a la vez.
EJEMPLOS DE TABLAS EN
HTML
1. Tabla bsica de 3x2
<TABLE BORDER>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
EJEMPLOS DE TABLAS EN
HTML
2. Dos ejemplos de lnea expandida <ROWSPAN>
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>
EJEMPLOS DE TABLAS EN
HTML
3. Ejemplo de columna expandida <COLSPAN>
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>
EJEMPLOS DE TABLAS EN
HTML
4. Tabla con cabeceras <TH>
<TABLE BORDER>
<TR>
<TH>Head1</TH>
<TH>Head2</TH>
<TH>Head3</TH>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
<TD>F</TD>
</TR>
</TABLE>
EJEMPLOS DE TABLAS EN
HTML
5. Una tabla de cuatro celdas. Cada una de un color
<TABLE BORDER>
<TR>
<TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR>
<TR>
<TD BGCOLOR="blue">Texto AZUL</TD>
<TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>
TABLAS EN HTML

Existen actualmente muchos tipos de tablas,


con espacio entre las celdas (CELLPADING y
CELLSPADING), con bordes, sin bordes, con
color, tamaos, etc., no abundaremos mucho
en ellas pues en Dreamweaver existe una
manera ms sencilla de crearlas, y en el
lenguaje puro de HTML sera mucho cdigo
para crearlas.
PORQU HAY QUE UTILIZAR
CDIGOS?
Dado que el HTML pretende ser un lenguaje
universal, y que una pgina debe verse como su
creador desea, sin importar si estamos ante un
ordenador que "habla" en ingls o en espaol, o que
tiene tal o cual sistema operativo, se ha creado una
tabla de caracteres "conflictivos" (en realidad estn
todos, pero generalmente slo se usa para caracteres
especiales) que se escriben con un cdigo en lugar
de pulsar la tecla que lo contiene directamente.
Por ejemplo, nuestra denostada en medio mundo
"" se escribir: &Ntilde; o bien &#209;
PORQU HAY QUE UTILIZAR
CDIGOS?

TABLA DE CDIGOS
CREACIN DE ENLANCES
(LINKS)
En un documento se pueden crear ciertos saltos
dentro de la pgina bien enlaces a otras.
Todo esto lo consigue el elemento <A> (por Anchor,
en ingls = ancla o punto de anclaje). En lo sucesivo
le llamaremos enlace o simplemente link (en ingls
link=eslabn o enlace).
Link. Es un rea de la pantalla, que puede contener
una o varias palabras o una imagen, que es
"sensible" al puntero del ratn, y al ponerlo sobre ella
y pulsar el botn izquierdo el visualizador llamar a la
pgina que tiene asignada el link.
CREACIN DE ENLACES
(LINKS)

Se escribir:
<A HREF="http://www.google.coml">
Link de prueba
</A>

Y se vera as:
Link de prueba
CREACIN DE ENLACES
(LINKS)
Si lo que se desea es que aparezca sin
subrayado o de otro color, o ambas cosas, se
puede recurrir a una instruccin de estilo, as:
<A HREF="http://www.icmultimedia.com/a.html"
style="color:red; text-decoration:none";>
Link de prueba
</A>.
Y se vera as:
Link de prueba
(*** Esto puede que no funcione en algunos navegadores
antiguos)
CREACIN DE ENLACES
(LINKS)
El ejemplo anterior muestra la forma de
escribir una ruta del link de forma completa,
se utiliza cuando hay que saltar de una
mquina a otra, si el enlace es para otra
pgina de nuestro propio servidor
computadora, es suficiente escribir la ruta
virtual corta: /mipagina.html o bien:
/misdocumentos/mipagina.html segn
sea el caso.
CREACIN DE ENLACES
(LINKS)
Tambin pueden crearce hacerse links con una imagen, que
pudiera ir en lugar del texto, incluso puedes poner el texto junto
con una imagen. Por ejemplo para hacer un link que nos lleve al
ndice desde una bola roja, se escribe:
Ir al ndice <A HREF="indice.htm">
<img src="bolaroja.gif">
</A>
Y este sera el resultado:
Ir al ndice
CREACIN DE ENLACES
(LINKS)
Al igual que el texto aparece subrayado en azul cuando forma
parte de un enlace, los grficos reciben un borde azul alrededor
de toda la imagen, lo que a veces puede resultar poco esttico.
Esto tambin tiene solucin, pero aqu se hace en la instruccin
de la imagen:
Ir al ndice <A HREF="indice.htm">
<img src="bolaroja.gif" border=0>
</A>.
Y este sera el resultado:
Ir al ndice
CREACIN DE ENLACES
(LINKS)
Dentro de los parmetros pasados a HREF, podrs ver que al
principio pone http://, esto es, el tipo de servicio al que el
visualizador va a llamar, y hay varios :
CREACIN DE ENLACES
(LINKS)
Adems de HREF, el elemento <A> puede tener otro
atributo: TARGET. Se utiliza para ordenar la
apertura de otra ventana del visualizador con la
pgina que se desee. Se escribir:
<A HREF="indice.htm" TARGET="Ventana-2">
</A>
Esta instruccin mostrar la pgina indice.htm pero
con otra ventada del visualizador, es decir tendremos
lanzado el visualizador 2 veces. Esto slo funciona si
el sistema operativo de tu mquina es multi tarea
(p.ej.: Windows-95).
CREACIN DE ENLACES
(LINKS)
Como se acaba de ver, el atributo HREF sirve para
enlazar con otro documento, que puede estar en un
servidor o ser un fichero local, pero que siempre se
nos presentar desde la primera lnea del mismo.
El atributo NAME se utiliza para definir algo as como
"un punto de aterrizaje" en cualquier lnea del
documento de destino, de forma que nos aparecer
en pantalla desde la lnea deseada y no desde el
principio. Esto es muy til cuando se trata de
documentos largos divididos en secciones.
CREACIN DE ENLACES
(LINKS)

Se escribir as:
En el documento activo:
<A HREF="http://www.icmultimedia.com/doc.html#punto1">
Ir al punto 1
</A>
En el documento destino:

<A NAME="punto1"></A>
CREACIN DE ENLACES
(LINKS)
NAME tambin puede utilizarse para
saltar de una lnea a otra dentro de un
mismo documento. Se escribir as:
Dentro del documento activo En la
lnea de partida:
<A HREF="#punto1">
Ir al punto 1
</A>
En la lnea de destino
<A NAME="punto1"></A> (En el inicio)
CREACIN DE ENLACES
(LINKS)
Como habrs visto en el cuadro de arriba, es posible enviar un e-mail
desde un link con la instruccin:

<A HREF="mailto:ivonneti@hotmail.com">Enviar e-mail</A>.

Con esta sintaxis se invoca al cliente de correo predeterminado para


que abra una ventana con la direccin deseada ya escrita.
Si adems quieres que dicha ventana se abra con el asunto (subject) y
el texto (body) ya escritos se puede conseguir as:

<A HREF=mailto:ivonneti@hotmail.com?&subject=Asunto de
prueba&body=Curso de creacin de pginas web">
Enviar e-mail
</A>
TIPS QUE DEBEN SABER
El texto que pongan despus del smbolo # puede
ser cualquiera, siempre que no tenga espacios en
blanco, caracteres especiales ni caracteres
codificados, y por supuesto, que no est repetido en
el mismo documento de destino.
Si en el documento de destino no existe el punto
definido en el documento de origen, el visualizador
nos presentar en pantalla la ltima lnea del mismo.
Cuando hagas un link, es preferible utilizar
direcciones relativas. Si utilizas direcciones absolutas
y despus tienes que mover los ficheros por cualquier
razn, tendrs que modificar todas las direcciones.
TIPS QUE DEBEN SABER
Si al hacer un link, despus del nombre de la mquina no pones
el nombre del archivo html, por defecto el servidor entiende que
se le pide la "home page" (pgina inicial).

Si un servidor no tiene definida pgina inicial, simplemente nos


mostrar una lista de todos los archivos y directorios que tenga
en el directorio definido como raz si el servidor tiene activada la
opcin de listar directorios, en caso contrario, dar un error.

Si despus de la direccin de la mquina a la que le hacen el


link en lugar de un nombre de fichero pones el de un directorio,
generalmente el servidor nos mostrar un simple listado de los
ficheros y directorios que ste contenga si el servidor tiene
activada la opcin de listar directorios, en caso contrario, dar
un error.
TIPS QUE DEBEN SABER
No slo puedes montar el link sobre un texto, tambin puedes hacerlo
sobre una imagen cualquiera. Es decir, despus del link y antes de
</A> puedes poner lo que quieras.
El arte de escribir buen HTML reside en dar una buena estructura a la
informacin. Siempre que puedas huye de crear pginas muy largas.
Crea cuantas necesites, con buena estructura y enlzalas con cuantos
links sean precisos.
Recuerda: si tu trabajo HTML no va a residir en un servidor en red, y
has utilizado direcciones absolutas, al hacer un link, no empieces con
aquello de: "http://....". No funcionar.
Si continuas deseando poner direcciones absolutas con ficheros locales,
tendr que ser as file:///C|/MIDIRECTORIO/tupagina.html
Despus de C (que puede ser A, B, D o la unidad de disco que quieras)
fjate que va una barra vertical (pipe), y que las barras que separan los
directorios y ficheros son barras a la derecha.
INSERTAR IMAGENES

Para insertar una imagen en un


documento HTML se utiliza el elemento
<IMG>. Este elemento puede ir
acompaado de los atributos SRC,
ALT, ISMAP, ALIGN, WIDTH,
HEIGTH, BORDER, VSPACE,
HSPACE.
INSERTAR IMGENES
Imagen alineada a la izquierda
(por defecto)
<IMG SRC="sugeren.gif">texto texto
texto texto texto texto texto
Se vera as:
texto texto texto texto texto
texto texto
INSERTAR IMGENES
Ejercicios:
Imagen alineada a la izquierda, texto alineado abajo
<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto
texto texto exto texto texto texto texto texto
Imagen alineada a la izquierda, texto alineado al centro
<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto
texto texto exto texto texto texto texto texto
Imagen alineada a la izquierda,texto alineado a la derecha de
la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto
texto texto texto texto texto texto texto
INSERTAR IMGENES
Imagen alineada a la izquierda, texto envolviendo la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR
CLEAR> texto texto texto texto texto texto texto
Imagen alineada a la derecha, texto alineado a la izquierda de la
imagen
<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto texto
texto texto texto texto texto texto
Imagen redimensionada a ms, texto alineado a la derecha de
la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92
> texto texto texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda con marco, texto alineado a la
derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto
texto texto texto texto texto texto texto texto texto
INSERTAR IMGENES
Imagen alineada a la izquierda, texto alineado a la
derecha de la imagen, espacios verticales y horizontales
vacos forzados.
texto texto texto texto texto texto texzto texto texto texto texto
texto
<IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100
VSPACE=30> texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto

Usar una imagen como punto de montaje de un link


texto texto <A HREF="indice.htm">
<IMG SRC="sugeren.gif" >
</A>
texto texto.
INSERTAR IMGENES
Imgenes de fondo
El fondo (background) de este
documento es una imagen en formato
GIF. Es un atributo del elemento
<BODY>
Se escribe as:
<BODY BACKGROUND="yellow_r.gif">
Y es compatible con todos los dems
atributos de este elemento
INSERTAR IMGENES
Algunos ejemplos de imgenes en listas
Se escriben todas igual, slo hay que cambiar el nombre de los
grficos:
<DL>
<DT>
<IMG SRC="bolaroja.gif">
Lnea de texto
<DT>
<IMG SRC="bolaroja.gif">
Lnea de texto
<DT>
<IMG SRC="bolaroja.gif">
Lnea de texto
</DL>
HTML NATIVO

Ahora que ya conocemos las


instrucciones HTML ser muy sencillo
seguir con nuestro siguiente programa
Dreamweaver, ya que es grfico y muy
fcil de utilizar, algunas cosas son
parecidas y similares.
DUDAS
Y/O
PREGUNTAS

You might also like