Beruflich Dokumente
Kultur Dokumente
WEB
GUIA No. 4
TEMA:
HACER UNA PGINA WEB EN HTML(I PARTE)
COMPETENCIA
Disea e innova habilidades por medio de las TICS, en la creacin pginas web y
entornos dinmicos en la imagen de una empresa, en el aula de clase.
ACTIVIDAD
1. Analice y lea comprensivamente la siguiente informacin, realice un resumen en el
cuaderno sobre esta.
2. Investigue la tabla de colores en hexadecimal para paginas en HTML y escrbala en el
cuaderno.
3. Luego siga las instrucciones para disear una pgina web sobre su empresa, recuerde
que debe seguir los pasos de la gua.
QUE ES HTML
HTML es un lenguaje universal, que funciona en cualquier plataforma (Windows,
Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape,
Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es
su poca sofisticacin, puesto que no es otra cosa que el viejo formato ASCII (y
con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros
caracteres especiales).
Por tanto, para que un documento HTML sea algo ms que simples caracteres
bsicos, debe contener, adems de dicho texto, una serie de instrucciones para el
browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags
y se distinguen del texto porque van entre guiones (< >). Estas etiquetas
contienen todo el resto de la informacin de la pgina web.
Por tanto, si un documento HTML no es ms que texto ASCII (parte sin guiones y
parte entre guiones: las etiquetas), cualquier documento web, hasta el ms
sofisticado, puede escribirse directamente desde un sencillo programa bsico de
texto, como el Cuaderno de Notas (Notepad) de Windows, por ejemplo.
Sin embargo, escribir un documento complejo de esta manera exige un
conocimiento exhaustivo de las numerossimas etiquetas existentes y sus normas
de utilizacin; para evitar esta dificultad, hay una serie de programas
denominados comnmente editores de HTML (desde el Composer al
Dreamweaver, pasando por tantos otros), que permiten al usuario componer una
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ
Tal vez la mejor manera de aprender a disear pginas web es observar las
pginas de los dems, cuyos cdigos fuente estn siempre disponibles para
ser imitados (o incluso copiados, tcnicamente, al menos). Pero, para ello,
es necesario entenderlos.
Los mismos editores HTML manejan trminos propios del lenguaje HTML
(heading, cellspacing, etc.), que es preciso comprender. Es necesario un
buen conocimiento de HTML para insertar otros cdigos ms potentes,
como los de JavaScript, por ejemplo. Adems de aprender a componer
una sencilla pgina web desde el ms bsico de los programas de texto
disponibles en Windows: el bloc de Notas.
EMPEZAR A TRABAJAR CON HTML:
Un documento HTML comienza siempre con la etiqueta <HTML>5, que indica que el documento
en cuestin est construido con dicho lenguaje.
La mayora de las etiquetas son pareadas, es decir, <...> corresponde al principio de la accin
y </...> indica el fin de dicha accin.
Por tanto, una pgina web estar siempre contenida entre las etiquetas <HTML> y </HTML>.
Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del
documento (body).
LA CABECERA contiene bsicamente informacin destinada al browser (o navegador), que
queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
EL CUERPO es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ
Lo primero que debe hacer es crear una carpeta con el nombre PGINA WEB o EL
NOMBRE DE SU EMPRESA en la unidad D:, luego de esto vamos a buscar Botn
Inicio, todos los programas, accesorios, bloc de notas y guardamos, entramos a
archivo, luego guardar como y all escribimos el nombre de nuestro agrado y a este
le ponemos con la extensin*.HTML o *.HTM, para que funcione con el explorador:
EJEMPLO 3
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo
visualizar segn su configuracin por defecto.
<FONT SIZE="1">Este texto es tamao
1.</FONT>
<FONT SIZE="2">Este texto es tamao
2.</FONT>
<FONT SIZE="4">Este texto es tamao
4.</FONT>
<FONT SIZE="+1">Este texto es tamao +1 (que
es lo mismo que tamao 4).</FONT>
<FONT FACE="Arial" SIZE="5"
COLOR="FFFF00">Este texto posee varias
especificaciones de formato.</FONT>
</BODY>
</HTML>
Existe otra etiqueta similar a <B>, menos utilizada porque depende de las
opciones de configuracin del navegador: <STRONG>...</STRONG>.
Otra etiqueta similar a <I>, menos utilizada porque depende de las opciones
de configuracin del navegador: <EM>...</EM>.
lugares adecuados.
(Por cierto: las fuentes que
he utilizado son Arial y
Comic Sans MS.)
Funcin
Prrafo alineado a la izquierda
Prrafo centrado
Prrafo alienado a la derecha
Prrafo justificado
Las etiquetas anteriores permiten alinear los prrafos enteros, pero siempre dejando
una lnea vaca delante de cada uno de ellas. Hay alguna manera de alinear
independientemente lneas o grupos de lneas? S, con las siguientes etiquetas:
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ
Cdigo
Funcin
<DIV align="left">...</DIV>
Lnea(s) alineada(s) a la izquierda
<DIV align="center">...</DIV>
Lnea(s) centrada(s)
<DIV align="right">...</DIV>
Lnea(s) alineada(s) a la derecha
<DIV align="justify">...</DIV>
Lnea(s) alineada(s) justificadas
En definitiva, disponemos de varias etiquetas similares para la creacin y la
alineacin de los prrafos, que sern ms o menos apropiadas dependiendo de las
ocasiones. Veamos cmo funcionan en una pgina web:
EJEMPLO 5
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
<P align="left">Este prrafo est alineado a la
izquierda. En la prctica, equivale sencillamente a
la misma etiqueta sin indicacin de
alineacin.</P>
<P align="center">Este prrafo est centrado.
Hay una lnea en blanco entre este prrafo y el
anterior.</P>
<P>Ahora vamos a alinear tres lneas seguidas de
tres maneras diferentes, pero sin dejar lneas
vacas entre ellas, por medio de otras
etiquetas:</P>
<DIV align="left">alineado izquierdo alineado
izquierdo alineado izquierdo alineado
izquierdo</DIV>
<DIV align="center">alineado centrado alineado
centrado alineado centrado alineado
centrado</DIV>
<DIV align="right">alineado derecho alineado
derecho alineado derecho alineado derecho
</DIV>
</BODY>
</HTML>
Otra
etiqueta
que
afecta
a
la
alineacin
de
los
prrafos
es <BLOCKQUOTE>...<BLOCKQUOTE>, que introduce una doble sangra, derecha e
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ
izquierda. Pueden colocarse varias etiquetas seguidas para acentuar la sangra, como
se observa en el siguiente ejemplo:
EJEMPLO 6
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<P>Prrafo normal Prrafo normal Prrafo normal Prrafo
normal Prrafo normal Prrafo normal Prrafo normal Prrafo
normal.</P>
<P><BLOCKQUOTE>Prrafo con una sangra izquierdaderecha Prrafo con una sangra izquierda-derecha Prrafo
con una sangra izquierda-derecha Prrafo con una sangra
izquierda-derecha.</BLOCKQUOTE></P>
<P><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Prraf
o con tres sangras izquierda-derecha Prrafo con tres
sangras izquierda-derecha Prrafo con tres sangras
izquierda-derecha Prrafo con tres sangras izquierdaderecha.</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE
></P>
</BODY>
</HTML>
Los ttulos
Pueden utilizarse hasta seis tipos de ttulos en un documento HTML, ordenados
jerrquicamente por medio de la etiqueta <Hn>...</Hn>, donde n = 1 a 6.
Las etiquetas de los ttulos introducen una lnea superior en blanco. Como lo habitual
despus de un ttulo es un nuevo prrafo (<P>), que tambin introduce su propia
lnea, el resultado final suele ser que una lnea de ttulo tiene una lnea en blanco
antes y otra despus.
Las etiquetas de los ttulos admiten indicaciones de alineacin, de la misma manera
que la etiqueta de prrafo.
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ
Las listas
Las listas son elementos que, como los ttulos, permiten presentar niveles
jerarquizados de texto.
Los documentos HTML permiten dos tipos de listas:
1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>.
2. Listas ordenadas o numeradas (numbered list): su etiqueta principal
es <OL>...</OL>.
3. Listas de definiciones (definition list): su etiqueta principal
es <DL>...</DL>
.
Una vez definido el tipo de lista deseada, los elementos que la componen se marcan
de distinta manera segn el tipo:
Las listas se pueden encajar unas dentro de otras, adems de con el resto de las
etiquetas disponibles. Vemos algn ejemplo:
EJEMPLO 8
<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>
<H3>Los meses de
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ
primavera</H3>
<UL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</UL>
<BR>
<H3>Los meses de
verano</H3>
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
<BR>
<H3>Los meses del ao</H3>
<UL>
<LI>Los meses de primavera
<OL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</OL>
</LI>
<LI>Los meses de verano
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
</LI>
</UL>
<BR>
<H3>Refranes de los
meses</H3>
<DL>
<DT>Marzo</DT>
<DD>El sol de marzo da con el
mazo.</DD>
<DT>Abril</DT>
<DD>El abril, aguas mil.</DD>
<DT>Mayo</DT>
<DD>Hasta el 40 de mayo no te
Lic. JINETH RETAMOZO VEGA
Lic. Esp. NALIDA RODRIGUEZ HERNANDEZ
quites el sayo.</DD>
</DL>
</BODY>
</HTML>
Las listas admiten varios parmetros, que varan segn el tipo de lista:
1.
No queda sino practicar con las distintas posibilidades de rayas. Por ejemplo:
EJEMPLO 9
<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>
sta es una lnea normal:
<HR>
sta es una lnea normal, sin sombreado:
<HR noshade>
sta es una lnea que ocupa la mitad de la pantalla
(si no se establece la alineacin, se coloca
centrada por defecto):
<HR width="50%">
sta es ms estrecha y mucho ms gorda:
<HR width="10%" size="20">
sta es igual pero de color rojo:
<HR width="10%" size="20" color="#FF0000">
</BODY>
</HTML>