Documente Academic
Documente Profesional
Documente Cultură
LENGUAJE DE
MARCADO
Evaluacin Formativa:
Participacin en clase 20 %
Tarea 10 %
Ejercicios en clase 20 %
Evaluacin Sumativa
Examen prctico 50 %
Total 100%
Tarea
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>
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 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
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?&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).