Sei sulla pagina 1di 10

HTML

COMPONENTES DEL HTML


El propsito de este captulo es introducir a los tres componentes fundamentales del HTML y un apartado independiente sobre "caracteres especiales". Por ahora, vamos a centrarnos en los pilares de los componentes del HTML y extraeremos una slida nocin de ellos. El pilar central de todo HTML es la etiqueta (tcnicamente se refiere como un elemento). Una etiqueta (tag en ingls) es el identificador del HTML; dice "haz esto". Pero las etiquetas se hacen ms potentes con modificaciones, y esa modificacin empieza con un atributo (tambin conocido como un argumento). 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.

CONSTRUCCIN
Lo primero que hay que saber es el funcionamiento de los documentos HTML, que significa Hyper Text Markup Language. Son lneas de texto modificadas con unas marcas. Estas marcas se llaman etiquetas o tags, y es lo que se aprende en HTML. Las etiquetas que encierran el texto son la de apertura <xxx> y la de cierre </xxx>. Fjate cmo no hay espacios entre los signos de mayor y menor, y el lugar y la orientacin de la barra diagonal en la etiqueta de cierre. Hay etiquetas que requieren la de cierre (como <A> y </A>, otras que pueden tener etiqueta de cierre o no (como <P>, que no siempre requiere </P>) y otras que no llevan nunca etiqueta de cierre (como <IMG>, la cual jams lleva </IMG>). Para saber cundo se quiere etiqueta de cierre, necesitars conocer todas y cada una de ellas, lo irs aprendiendo con la experiencia.

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 nmero de pixels o porcentaje (como en <TABLE WIDTH="40%" HEIGHT="500">...</TABLE>). A veces un nmero no define un nmero de pixels concreto, por ejemplo, al cambiar el tamao de las fuentes (<FONT SIZE="5">...</FONT>) el nmero es simplemente orientativo, no

tiene ninguna relacin con el tamao final. Y el nmero a veces puede ser en formato hexadecimal (16 nmeros, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F...), como en <FONT COLOR="#FF0000">...</FONT>. Podrs conocer el funcionamiento de estos nmeros ms adelante, cuando expliquemos los atributos que los requieren. Caracteres especiales. Hay caracteres que no se pueden escribir tal cual en cdigo HTML, unos por coincidir con las etiquetas (como <, > y &), otros por no ser compatibles con los navegadores (las letras con tilde, las ees), etc... En general se pueden obtener todos los caracteres con la etiqueta &#xxx;, poniendo en xxx el nmero de carcter correspondiente. Estos y otros cdigos son: Cracter En nmeros En letras Carcter En nmeros En letras ! # % ' ) + / ; = ? [ ] _ { } &#33; &#35; &#37; &#39; &#41; &#43; &#45; &#47; &#59; &#61; &#63; &#91; &#93; &#95; &#123; &#125; &#160; &#162; &#164; &#166; &#168; &#170; ----------------nbsp cent curren brvbar uml ordf " $ & ( * , . : < > @ \ ^ ` | ~ &#34; &#36; &#38; &#40; &#42; &#44; &#46; &#58; &#60; &#62; &#64; &#92; &#94; &#96; &#124; &#126; &#161; &#163; &#165; &#167; &#169; &#171; ----------------iexcl pound yen sect copy laquo

&#172; &#174; &#176; &#178; &#180; &#182; &#184; &#186; &#188; &#190; &#192; &#194; &#196; &#198; &#200; &#202; &#204; &#206; &#208; &#210; &#212; &#214; &#216; &#218; &#220; &#222; &#224; &#226; &#228; &#230; &#232; &#234;

not reg deg sup2 acute para cedil ordm frac14 frac34 Agrave Acirc Auml AElig Egrave Ecirc Igrave Icirc ETH Ograve Ocirc Ouml Oslash Uacute Uuml THORN agrave acirc auml aelig egrave ecirc

&#173; &#175; &#177; &#179; &#181; &#183; &#185; &#187; &#189; &#191; &#193; &#195; &#197; &#199; &#201; &#203; &#205; &#207; &#209; &#211; &#213; &#215; &#217; &#219; &#221; &#223; &#225; &#227; &#229; &#231; &#233; &#235;

shy macr plusmn sup3 micro middot sup1 raquo frac12 iquest Aacute Atilde Aring Ccedil Eacute Euml Iacute Iuml Ntilde Oacute Otilde times Ugrave Ucirc Yacute szlig aacute atilde aring ccedil eacute euml

&#236; &#238; &#240; &#242; &#244; &#246; &#248; &#250; &#252; &#254;

igrave icirc eth ograve ocirc ouml oslash uacute uuml thorn

&#237; &#239; &#241; &#243; &#245; &#247; &#249; &#251; &#253; &#255;

iacute iuml ntilde oacute otilde divide ugrave ucirc yacute yuml

MAYSCULAS, ESPACIOS Y COMILLAS La forma correcta de poner una etiqueta es la siguiente: <IMG SRC="hola.gif"> La utilizacin de maysculas y minsculas es indiferente en la etiqueta y el atributo (no as en el valor, no siempre puede cambiarse indistintamente). Recomendamos ponerlo como en el ejemplo, etiqueta y atributo en maysculas, y el valor en minscula. Fjate en las comillas. Se recomienda ponerlas siempre, aunque si el valor contiene slo un simple nmero o una simple palabra no suele ser necesario. Por ejemplo, width=200 y width="200" dara el mismo resultado, pero se recomienda poner siempre las comillas (ALT=Aqu pone hola est mal, hay que poner ALT="Aqu pone hola"). Terminaremos por los espacios. < IMG SRC = " hola.gif " > o <IMGSRC="hola.gif"> es totalmente incorrecto. El nico espacio debe estar situado entre etiqueta/atributo y atributo_con_valor/atributo_con_valor. Por ejemplo: <IMG SRC="hola.gif" ALT="hola"> Si queremos poner espacios en el texto normal y corriente, deberemos usar el carcter especial &nbsp;. Por ejemplo: Esta es mi pgina WEB y Esta es mi pgina WEB,

se veran de la siguiente forma: sta es mi pgina WEB Si queremos poner lo segundo, con cuatro espacios en blanco entre medio habr que poner: sta&nbsp;&nbsp;&nbsp; es mi pgina WEB Y, para finalizar, este es un texto <B>en negrita</B>, y este es un texto<B> en negrita</B> dara un resultado idntico, aunque se recomienda usar lo primero. PARTES DE UN DOCUMENTO HTML Los documentos HTML tienen dos partes:

1. La parte contenida entre las etiquetas <HEAD> y </HEAD> o cabecera, que


es donde se introduce el ttulo de la pgina (dentro de <TITLE> y </TITLE>, lo que se mostrar en la barra de ttulo de la ventana del explorador), las etiquetas <META> (que nos servirn principalmente para dar de alta nuestra pgina en los buscadores de una forma eficiente), los Scripts (para dar un funcionamiento dinmico a la pgina) y las Hojas de estilo (un mtodo avanzado de formateado). La parte contenida entre las etiquetas <body> y </body> o cuerpo, que es donde se introducen los dems elementos que se ven en pantalla, como texto, imgenes, tablas, enlaces, formularios..., as como el color del fondo o de los diferentes tipos de texto.

2.

En resumen, la estructura es la siguiente: <HTML> <HEAD> <TITLE>Ttulo de la pgina</TITLE> Aqu van otras etiquetas como las META, scripts y estilos </HEAD> <body> Aqu va lo que se mostrar en pantalla del documento HTML </body> </HTML> PARRAFOS Prrafos. Las etiquetas de prrafo <P> nos servirn para iniciar un nuevo prrafo de texto. No necesita la etiqueta </P> al final si no estn alineados de ninguna manera. Los prrafos pueden alinearse. En este caso s que necesitan su correspondiente etiqueta de cierre </P>. Son las siguientes:

<P ALIGN="LEFT"> Para alinear el texto con el margen izquierdo: Este prrafo est alineado a la izquierda

<P ALIGN="CENTER"> Para centrar el texto: Este prrafo est centrado.

<P ALIGN="RIGHT"> Para alinear el texto con el margen derecho: Este prrafo est alineado a la derecha

<P ALIGN="JUSTIFY"> Para alinear el texto a los dos mrgenes. Es ignorado por muchos navegadores, pero algunos no, como el Explorer 4.0. Eso es un ejemplo el alineamiento justificado. Si se observa este breve prrafo con exploradores como el Microsoft Internet Explorer 4.0 podrs observar que los dos extremos, izquierdo y derecho, estn alineados. Recuerda que para poder apreciar este efecto en los prrafos de texto, necesitas escribir ms de 2 lneas. Si se quiere hacer un salto de lnea o retorno de carro, habr que usar la eiqueta <BR>. Por ejemplo: <P>Esto<BR>es un prrafo Se vera as: Esto es un prrafo

Dos <BR> equivalen a un <P>. Estos dos ejemplos se veran igual: <P>Esto es un prrafo <P>Esto es otro <P>Esto es un prrafo<BR><BR> Esto es otro

CABECERAS

Son para poner ttulos en nuestras pginas. Van entre las etiquetas <Hx> y </Hx>, donde x en un nmero del 1 al 6. 1 es el nmero mayor y 6 el nmero menor. El que corresponde al tamao estndar del texto es 3. Estos nmeros no tienen nada que ver con el nmero de pxeles ni con los nmeros de la etiqueta <FONT> que veremos posteriormente. Usaremos la cabecera H1 o la H2 para el ttulo principal de la pgina, y los otros tamaos menores para los ttulos inferiores de segunda categora. <H1>Prueba</H1> se ver como:

Prueba
<H2>Prueba</H2> se ver como:

Prueba
<H3>Prueba</H3> se ver como:

Prueba
<H4>Prueba</H4> se ver como:

Prueba
<H5>Prueba</H5> se ver como:

Prueba
<H6>Prueba</H6> se ver como:

Prueba LNEAS HORIZONTALES


Lneas horizontales. En ingls horizontal rules. Para introducirlos hay que usar la etiqueta <HR>. As se crear una lnea embutida en el fondo que llegue de lado a lado de la pgina. Tambin 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% habra que poner: <HR WIDTH="75%">

Si se quiere variar la anchura en pxels hay que introducir el valor de ellos en WIDTH=x, pero sin el smbolo %: <HR WIDTH="250">

Se puede variar la alineacin con el atributo ALIGN=x, donde x es LEFT o RIGHT. <HR WIDTH="50%" ALIGN="LEFT"> para alinear a la izquierda:

<HR WIDTH="50%" ALIGN="RIGHT"> para alinear a la derecha:

Se puede variar el espesor con SIZE=x, donde x es el nmero de pxels: <HR SIZE="15">

Y por ltimo se puede hacer que la lnea no est sombreada con el atributo NOSHADE: <HR NOSHADE>

FORMATEO DEL TEXTO


Formateo del texto. Veremos una serie de etiquetas para el texto: Lneas en blanco, con <BR><P>. <BR><P> <BR><P> <BR><P> <BR><P> quedara as:

Espacios. Nos pueden servir para separar imgenes de textos. La etiqueta es &nbsp; Negrita, cursiva, subrayado y tachado. Necesitan etiqueta de cierre. Son <B>negrita</B> para negrita, <I>cursiva</I> para cursiva,

<U>subrayado</U> para subrayado y <S>tachado</S> para tachado. Es posible usarlos a la vez, <B><I><U><S>texto</S></U></I></B> para texto. Hay otras etiquetas que equivalen a estas, como <STRONG> = <B>; <CITE> y <EM> = <I>; y <STRIKE> = <S>. Aumentar o disminuir tamao del texto. Se puede hacer de una forma muy sencilla con <BIG>...</BIG> para aumentarlo y con <SMALL>...</SMALL> para disminutirlo. Por ejemplo: Este es un texto <BIG>ms grande</BIG> Se vera como Este es un texto

ms grande

Este es un texto <SMALL>ms pequeo</SMALL> Se vera como Este es un texto


ms pequeo

En vez de usar estas dos etiquetas, puedes usar la etiqueta <FONT> que se explica ms abajo. Texto parpadeante. La etiqueta es <BLINK> y <BLINK>, y quedara as: <BLINK>Hola</BLINK> Hola ndices y subndices. Las etiquetas son <SUP> para el superndice y <SUB> para el subndice (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 tamao, el color, y el tipo de letra de un texto determinado. Utiliza para ello los atributos siguientes: size="x", siendo "x" el nmero del tamao, de 1 a 8, por defecto 3; o +/-, que indican si se usa un tamao inferior o superior), bgcolor="xxyyzz" (siendo "xxyyzz" un nmero 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 ms 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:

<FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana">Prueba de texto</FONT>. ...que quedara as:

Prueba de texto
Observa cmo 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.