Professional Documents
Culture Documents
HTML
Pagina web
Tabla de colores en html
Fundamentos de html
Funciones básicas de html
Alineación y espaciado
Listas
Elementos y modificación de fuente
HTML
HTML también es usado para referirse al contenido del tipo de MIME text/html o
todavía más ampliamente como un término genérico para el HTML, ya sea en
forma descendida del XML (como XHTML 1.0 y posteriores) o en forma
descendida directamente de SGML (como HTML
Pagina web
Una página web está compuesta principalmente por información (sólo texto o
multimedia) e hiperenlaces; además puede contener o asociar datos de estilo para
especificar cómo debe visualizarse, o aplicaciones embebidas para hacerla
interactiva.
Las páginas web son escritas en un lenguaje de marcado que provea la capacidad
de insertar hiperenlaces, generalmente HTML.
color="#RRGGBB"
RR, GG y BB representan, cada uno, un número hexadecimal entre 00 y FF para
el rojo, el verde y el azul respectivamente.
Con esta sintaxis, se pueden utilizar más de 16 millones de colores en las páginas
Web. Sin embargo como no todos los navegadores reconocen los colores del
mismo modo, W3C recomienda usar los colores a continuación, que han recibido
nombres específicos. Por lo tanto, puede (y se aconseja) representar los colores
de esta forma:
<img>: imagen. Requiere del atributo src, que indica la ruta en la que
se encuentra la imagen. Por ejemplo: <img
src="./imagenes/mifoto.jpg" />. Es conveniente, por accesibilidad,
poner un atributo alt="texto alternativo".
La mayoría de etiquetas deben cerrarse como se abren, pero con una barra ("/")
tal como se muestra en los siguientes ejemplos:
Los atributos son como los verbos en cuando que proporcionan actividad, con
ellos, la etiqueta HTML puede de repente adquirir vida y hacer algo en cierta
manera.
ATRIBUTOS
Los atributos modifican las acciones de las tarjetas. Muchas etiquetas pueden
permanecer solas, mientras que otras neceistan un atributo para darles
funcionalidad. Por ejemplo, <HTML> nunca lleva atributos, mientras que <body>
puede llevarlos o no (por ejemplo, <body BGCOLOR...>).
Ten en cuenta que los atributos siempre van en la etiqueta de apertura. nunca en
la de cierre. Es absurdo poner algo del estilo de </body BGCOLOR...>.
VALORES
Definen el atributo al que se lo hemos aplicado. El valor puede ser una palabra
(por ejemplo <P ALIGN="center">...</P>) o un número de pixels o porcentaje
(como en <TABLE WIDTH="40%" HEIGHT="500">...</TABLE>). A veces un
número no define un número de pixels concreto, por ejemplo, al cambiar el tamaño
de las fuentes (<FONT SIZE="5">...</FONT>) el número es simplemente
orientativo, no tiene ninguna relación con el tamaño final. Y el número a veces
puede ser en formato hexadecimal (16 números, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C,
D, E, F...), como en <FONT COLOR="#FF0000">...</FONT>. Podrás conocer el
funcionamiento de estos números más adelante, cuando expliquemos los atributos
que los requieren.
Párrafos. Las etiquetas de párrafo <P> nos servirán para iniciar un nuevo párrafo
de texto. No necesita la etiqueta </P> al final si no están alineados de ninguna
manera.
<P ALIGN="JUSTIFY"> Para alinear el texto a los dos márgenes. Es ignorado por
muchos navegadores, pero algunos no, como el Explorer 4.0.
Si se quiere hacer un salto de línea o retorno de carro, habrá que usar la eiqueta
<BR>. Por ejemplo:
<P>Esto<BR>es un párrafo
Se vería así:
Esto
es un párrafo
<P>Esto es un párrafo
<P>Esto es otro
<P>Esto es un párrafo<BR><BR>
Esto es otro
Alineación y espaciado
CABECERA
Son para poner títulos en nuestras páginas. Van entre las etiquetas <Hx> y </Hx>,
donde x en un número del 1 al 6. 1 es el número mayor y 6 el número menor. El
que corresponde al tamaño estándar del texto es 3. Estos números no tienen nada
que ver con el número de píxeles ni con los números de la etiqueta <FONT> que
veremos posteriormente.
Prueba
Prueba
Prueba
Prueba
Prueba
LÍNEAS HORIZONTALES
Líneas horizontales. En inglés horizontal rules. Para introducirlos hay que usar la
etiqueta <HR>. Así se creará una línea embutida en el fondo que llegue de lado a
lado de la página.
También se puede modificar. Para variar la anchura hay que usar el atributo
WIDTH=x%, donde x es el porcentaje del ancho de la pantalla. Para que ocupe el
75% habría que poner:
<HR WIDTH="75%">
<HR WIDTH="250">
<HR SIZE="15">
Y por último se puede hacer que la línea no esté sombreada con el atributo
NOSHADE:
<HR NOSHADE>
<BR><P>
<BR><P>
<BR><P>
<BR><P>
quedaría así:
Aumentar o disminuir tamaño del texto. Se puede hacer de una forma muy
sencilla con <BIG>...</BIG> para aumentarlo y con <SMALL>...</SMALL> para
disminutirlo. Por ejemplo:
Se vería como
Se vería como
En vez de usar estas dos etiquetas, puedes usar la etiqueta <FONT> que se
explica más abajo.
Preformateado. La etiqueta es <PRE> con etiqueta de cierre. La característica
es que se verá con letra Courier respetando espacios y cambios de lía, por
ejemplo:
<PRE>
Hola
</PRE>
y quedaría así:
Hola
Hola
</TT>
y quedaría así:
<BLOCKQUOTE>
</BLOCKQUOTE>
y quedaría así:
<BLINK>Hola</BLINK>
Hola
Índices y subíndices. Las etiquetas son <SUP> para el superíndice y <SUB>
para el subíndice (ambas con etiqueta de cierre), por ejemplo:
cm<SUP>3</SUP>
cm3
H<SUB>2</SUB>SO<SUB>4</SUB>
H2SO4
Etiqueta FONT. Tiene etiqueta de cierre, y nos permite variar el tamaño, el
color, y el tipo de letra de un texto determinado. Utiliza para ello los atributos
siguientes:
size="x", siendo "x" el número del tamaño, de 1 a 8, por defecto 3; o +/-, que
indican si se usa un tamaño inferior o superior), bgcolor="xxyyzz" (siendo
"xxyyzz" un número hexadecimal). Para saber qué es esto mira el tema de
fondos) y face="xxx" (siendo "xxx" el nombre de la fuente). Si la fuente tiene
dos palabras o más es necesario poner comillas, y se pueden colocar varios
nombres para usar unas fuentes en caso que otras no existan. Si la fuente no
está instalada en el ordenador se verá Times New Roman). Ejemplo:
Prueba de texto
Observa cómo hay dos nombres de fuentes. En caso de que Arial no esté
instalada se verá con Verdana, y si ésta tampoco lo está se verá entonces con
Times New Roman: la fuente por defecto.
LISTAS
Listas desordenadas. Las etiqueta es <UL> con etiqueta de cierre para la lista
y <LI> para cada línea. Puede contener el atributo type que indica la forma del
"topo" o marca que antecede a cada elemento de la lista. Los valores de type
pueden ser disk, circle o square, con lo que el topo o marca puede ser un
disco, un circulo o un cuadrado.
Un ejemplo:
<UL type=square>
<LI>Elemento 1
<LI>Elemento 2
<LI>Elemento 3
</UL>
Elemento 1
Elemento 2
Elemento 3
Es posible anidar las listas, por ejemplo:
<UL>
<LI>Elemento 1
<UL>
<LI>Elemento 1.1
<LI>Elemento 1.2
<LI>Elemento 1.3
</UL>
<LI>Elemento 2
<LI>Elemento 3
</UL>
Elemento 1
Elemento 1.1
Elemento 1.2
Elemento 1.3
Elemento 2
Elemento 3
En otro tema veremos cómo poner una imagen en vez de el punto, cuadrado o
disco.
<UL>
<LI type=square>Elemento 1
<LI type=circle>Elemento 2
<LI type=disk>Elemento 3
</UL>
Elemento 1
Elemento 2
Elemento 3
Listas ordenadas o numeradas. Las etiqueta es <OL> con etiqueta de cierre
para la lista y <LI> para cada línea. Puede llevar los siguientes atributos:
<OL type=i>
<LI>Elemento 1
<LI>Elemento 2
<LI>Elemento 3
</OL>
i. Elemento 1
ii. Elemento 2
iii. Elemento 3
Estas listas también pueden anidarse, al igual que las listas desordnedadas.
<OL>
<LI value=10>Este elemento vale 10
<LI>Elemento siguiente
<LI>Otro elemento más
</OL>
<DL>
<DT>Elemento 1
<DD>Definición de elemento 1
<DT>Elemento 2
<DD>Definición de elemento 2
<DT>Elemento 3
<DD>Definición de elemento 3
</DL>
Elemento 1
Definición de elemento 1
Elemento 2
Definición de elemento 2
Elemento 3
Definición de elemento 3
Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio
se comportan igual que las listas sin numerar. La lista de Menú utiliza la etiqueta
<MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista
sin numerar más "compacta" es decir, con menos espacio interlineal entre los
elementos. La lista de Directorio utiliza la etiqueta <DIR></DIR> y los elementos
se anteceden de <LI>. Los elementos tienen un límite de 20 caracteres.
Definiciones de atributos
EJEMPLO DESAPROBADO:
El siguiente ejemplo mostrará la diferencia entre los siete tamaños de fuente
disponibles con FONT:
<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>
Definiciones de atributos
noshade [CI]
EJEMPLO DESAPROBADO:
Este ejemplo centra los separadores, dándoles un tamaño igual a la mitad de la
anchura disponible entre márgenes. El separador superior tiene el tamaño por
defecto, mientras que los dos inferiores son de 5 píxeles. El separador inferior
debería representarse con un color sólido sin efecto de relieve: