Sie sind auf Seite 1von 11

Que es HTML Para que varias personas se comuniquen es necesarios que estas hablen un mismo idioma.

El lenguaje que utilizan las computadoras que estn conectadas a internet es HTML Siglas que al Espaol traducen LENGUAJE DE MARCACION DE HIPERTEXTO. Fue creado en 1989 por el fsico nuclear TIM BERNERS-LEE el cual propuso disear un sistema de unificacin del acceso a todos los datos que posea el Centro Europeo para la Investigacin Nuclear. Se comenz as a desarrollar una plataforma de tipo hipertexto y un protocolo de comunicaciones que se denomin HTTP (Hyper Text Transfer Protocol), que permitira a todos los cientficos del CERN, consultar cualquier informacin de cualquier tema, aunque se encontrase diseminada en los diferentes ordenadores, tanto del propio centro, como en los ordenadores de las diferentes instituciones que colaboraban con el CERN. El sistema alcanz un xito enorme, tanto es as que se comenz a definir un lenguaje de creacin de documentos estructurados que vino a llamarse HTML (Hyper Text Markup Language). TIM BERNERS-LEE tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido tambin como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estndar de Marcacin General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programacin como C++, Visual Basic, etc. Sino un sistema de etiquetas, HTML no presenta ningn compilador, por lo tanto algn error de sintaxis que se presente este no lo detectara y se visualizara en la forma como este lo entienda. El lenguaje HTML es un lenguaje interpretado y permite dar indicaciones precisas al programa cliente, en este caso los "browsers", o mas bien los conocidos navegadores, de cmo debe presentarse el documento en pantalla. TAMAO COLOR Y TIPO DE LETRA 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: Ejemplo <H1>Texto de Prueba</H1> <H2>Texto de Prueba</H2> <H3>Texto de Prueba</H3> <H4>Texto de Prueba</H4> <H5>Texto de Prueba</H5> <H6>Texto de Prueba</H6> Se veria como Texto de prueba Texto de Prueba Texto de Prueba Texto de Prueba Texto de Prueba Texto de Prueba

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: <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> Dar como resultado: AAAAAAAAA Se puede cambiar el tamao por defecto (3) de toda la pgina con el elemento <BASEFONT SIZE=valor>. El texto tomar el tamao indicado porvalor y lo mantendr hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro diferente.

El atributo COLOR: Especifica el color de los caracteres. Los colores se identifican mediante el nombre del color en ingls (como red, white o black) o mediante un cdigo hexadecimal con el formato "#rrggbb", donde "rr", "gg" y "bb" son valores hexadecimales comprendidos entre 00 y FF que especifican el grado de saturacin de los colores rojo, verde y azul. Los colores se crean mezclando los tres colores bsicos: rojo, verde y azul. Cada color se especifica con nmeros hexadecimales, es decir: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F (del 0 al 15)

Los colores bsicos se conseguiran del siguiente modo: #FF0000 Este sera el color rojo. HTML #00FF00 Este el color verde. HTML #0000FF Por ltimo el color azul. HTML Ver tabla de colores. Por tanto, una cantidad de rojo (digamos #550000), mezclado con una cantidad de verde (digamos #00AA00) y una cantidad de azul (digamos #000088) nos dara el siguiente color: #55AA88. Para hacer un color ms oscuro reduciramos el nmero que lo indentifica, es decir, si queremos un rojo ms claro en lugar de usar el nmero: #FF0000 podramos usar #550000. Si queremos tonos ms suaves reduciremos los nmeros de los colores que no nos interesan, es decir, si en lugar de un rojo queremos un rosa tendrmos que hacer: #FF7070. EJEMPLO: <font color=#FF0000>E<font color=#ff7070>NO<font color=#0000FF>C El cual se veria asi: Ver cdigo de colores AMAD

Para colocar un tipo de letra se utiliza la etiqueta FACE=nombre de letra . Este atributo lo que hace es definir el estilo o nombre de letra con el que queremos que aparezca nuestro texto. Por defecto el valor de este valor en todos los navegadores , es el del tipo Times New Roman, pero que nosotros podemos modificar indicando un nombre distinto de letra. Por ejemplo, si quisieramos que la letra apareciera con formato de letra estilo Arial, lo nico que tendramos que definir es el nombre de letra segn: <FONT FACE=arial>...</FONT> lo que hara que el bloque te texto entre las directivas tuviera el formato de texto Arial y no Times new Roman que aparecera por defecto. Se pueden definir varios tipos en el mismo atributo de la forma: <FONT FACE=arial, courier>...</FONT> Siendo preferente la primera que coloquemos y la segunda en el supuesto de que nuestro usuario no tuviera la primera instalada en su equipo local. Esto por lo tanto, limita el tipo de letras a las que nuestro usuario visitante, tenga instaladas en su equipo, siendo limitada la lista de letras que se instalan por defecto (por ejemplo), en el sistema operativo que emplee (Windows, MacOS, OS/2, UNIX, Linux....) por lo que por ello se suelen definir 2 letras, y en el supueto de que no tuviera ninguna de las especificadas, se tomara la de defecto del navegador que no es otra que la ya nombrada Times New Roman. Arial suele ser un valor vlido para los IMGENES Antes de empezar a decirte como se inserta una imgenen en tu pagina WEb primero te enseare como esta la puedes guardar en tu dsco duro. 1.Hacer click con el botn derecho sobre la imagen. 2.Elija "guardar como..." (save as...) del men archivo 3.Darle la direccin de el directorio donde lo quiere guardar y salve. Las imgenes son un elemento muy importante para nuestra pagina WEB, ya que la adornan y la enbellcen, pero hay dos aspectos que debemos tener en cuenta: La primera es que el tiempo de descarga de una imagen es lento, lo cual quiere decir que si llenamos nuestra pagina de imgenes va a demorar mucho en descargarse completamente lo cual puede hacer que la persona si salga sin llegar a ver el contenido de esta. Es por esto que se dice que las imgenes en la Web son un arma de doble filo. Una buena imagen puede llamar la atencin y ser de gran utilidad para ilustrar o para atraer visitantes, pero una imagen mala o muy pesada (es decir, un archivo de muchos kilobytes de tamao) puede espantar hasta al ms voluntarioso de los navegantes. La segunda es que el visitante haya deshabilitado la carga automtica de imgenes lo cual podra ser muy perjudicial si hemos escogido imagenes para explicacion de algo, o como link,etc. En cuanto a las imagenes existen dos formatos fundamentales que nos proporcionan el mejor uso: GIF (llamado as por sus siglas en ingls, Graphic Interchange Format) y JPEG (iniciales del grupo que lo desarroll, el Joint Photograph Expert Group). El formato GIF fue creado por la empresa CompuServe, para que sus usuarios pudieran intercambiar imgenes entre s a travs de la Red. Para almacenar la informacin, el GIF utiliza 8 bits (unidades de informacin) por cada pixel . Como cada bit tiene dos estados posibles (uno o cero), la imagen puede desplegar hasta 256 colores. Como la mayora de los monitores tienen capacidad para representar por lo menos 256 colores en pantalla , el formato GIF funciona de manera razonable.

Por otro lado, el formato JPG fue creado especialmente para almacenar imgenes con calidad fotogrfica. Cumple con su tarea sacrificando calidad de imagen a cambio de una paleta de colores ms extensa. Utiliza 24 bits por pixel, lo que le permite albergar hasta 16.777.216 colores en cada imagen. A diferencia de lo que se puede llegar a pensar, el jpg no necesariamente es ms pesados, ya que posee un mecanismo de compresin que reduce el tamao del archivo mediante cierta prdida en la informacin. Como regla general, conviene utilizar archivos con extensin JPG cuando la imagen a insertar sea una foto. Si, en cambio, nuestra imagen contiene un logo o un dibujo de pocos colores o con grandes superficies cubiertas por colores parejos, es conveniente utilizar un GIF. Insertar una imgen La etiqueta utilizada para agregar imgenes a una pgina Web es <IMG> y va acompaada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar. Es decir: <IMG SRC="lugar donde guardo la imagen"> Supongamos que tengo la imagen stopfasc.gif, que est presente en el mismo directorio donde est la pgina y que la quiero insertar. La etiqueta apropiada sera: <IMG SRC="stopfasc.gif"> Y el usuario ver en el browser:

EL ATRIBUTO ALT Otro atributo importante de la etiqueta <IMG> es "ALT". Este atributo permite complementar la imagen con un texto alternativo, utilizado principalmente para aquellos browsers que no permiten mostrar imgenes, ya sea porque son navegadores que slo soportan texto (como Lynx), porque el usuario tiene desactivada esta opcin o porque se produjo un accidente que impidi la llegada del grfico a la PC del usuario. El texto aparecer en el espacio correspondiente a la imagen, y tambin cuando el usuario pase el mouse por arriba de la imagen, incluso si sta baj normalmente a la computadora del navegante. Ejemplo: <IMG SRC="stopfasc.gif" ALT= "contra la intolerancia"> El usuario ver (pasar el mouse arriba del texto):

Imgenes como enlaces Otra caracterstica interesante de las imgenes insertadas es que permiten ser utilizadas como hipervnculos. Para esto, es necesario crear un enlace y en vez de encerrar el texto dentro la etiqueta <A> hay que encerrar una imagen. Ejemplo: <A HREF="http://www.mazosoft.net/mazolandia/abandoware.htm"> <img src="anop.gif" alt="Click aqui para descargarte un videojuego gratis en esta web"> </A> Resultado:

Tambien podemos enlacer una imagen con nuestra direccion de correo electronico. Ejemplo:

<A HREF=mailto:canomazo@hotmail.com;img alt="Click aqui para mandarme un mail" > El usuario ver

src="buzon12.gif"

BORDES: El atributo utilizado para establecer un borde en una imagen es BORDER= #, dnde # es un nmero de 0 a 99. Ejemplo de una imagen sin especificar borde <img scr="dancer.gif">

Ejemplo de imgenes con el atributo BORDER <border=5 img scr="dancer.gif">

O sino <border=15 img scr="dancer.gif">

Cada vez que utilizamos una imagen para establecer un hipervnculo, de manera automtica el browser agrega un borde a la imagen. Si queremos eliminarlo, deberemos indicarlo con el atributo BORDER=0. Alineando la imagen El atributo utilizado para alinear una imagen es ALIGN Si quiere insertar una imagen a la izquierda de la pantalla <img align=left src="dancer.gif">

Si prefiero insertarla a la derecha:

<img align=right src="dancer.gif">

Como todava hay browsers que no soportan la etiqueta <img align=center>, para centrar una imagen hay que recurrir a un pequeo truco: primero centramos un prrafo (tengamos o no texto) y luego insertar la imagen Para centrar una imagen, entonces:

<P ALIGN=CENTER> <img src="dancer.gif"> </P>

Alinear el texto despus de la imagen Para esto se utiliza el atributo ALIGN.Este es un parmetro opcional usado para alinear la imagen respecto al texto que la acompa en la misma lnea convirtindola en lo que se llama una imagen flotante. Hay dos tipos basicos de alineacion: Vertical: TOP(ARRIBA), MIDDLE(MEDIO) y BOTTOM(ABAJO).El valor que utiliza este atributo por defecto es BOTTOM. Este atributo tambien es utilizado cuando queremos insertar dos imgenes en una misma linea. Horizontal: LEFT(IZQUIERDO), RIGHT(DERECHO), TEXTTOP, ABSMIDDLE, BASELINE y ABSBOTTOM EJEMPLO: Atributos HEIGHT(altura) y WIDTH (ancho) Permiten cambiar el tamao de una imagen. Un ejemplo sin estos atributos <IMG SRC="dancer.gif"> El usuario ver:

Debido a que este atributo falsea la imagen es logico que esta se distorcione

<IMG SRC="dancer.gif" ALIGN=LEFT WIDTH=75 HEIGTH=40>

FFFFFF CCFF99 99FF66 00FFFF FFCC66 00FF66 CCCC33 99CC33 33CCCC 00CC99 CC9966 FF6699 FF6633 FF33CC FF3399 FF00CC FF3300 FF0033 3366FF 3366CC CC0066 993366 993333 3333CC 663300 333333 003300

FFFFCC CCFF66 99FF33 66FF99 FFCC33 00FF33 99CCCC 00CCFF CC99FF CC99CC 00CC33 999999 FF6600 3399CC 0099CC FF3366 FF0099 FF0000 CC3366 CC0099 336699 9900CC 993300 663366 660099 003366 000099

FFFF99 CCFF33 66FFCC FFCC99 CCCCFF 00FF00 FF99FF 33CCFF 00CCCC 33CC66 9999FF 6699FF FF33FF CC6699 9966FF 009966 339900 CC00FF CC00CC 9933CC 993399 336633 6600FF 6600CC 0000FF 0000CC 330066

FFFF66 CCFF00 FFCCFF 66FF66 33FF66 CCCCCC 99CC99 99CC00 FF9933 00CC66 00CC00 FF6666 3399FF 669966 CC6666 CC33FF 009900 CC3399 9933FF 666666 CC0033 006666 990099 990033 333399 660033 330033

FFFF33 99FFFF 99FF00 66FF33 33FF33 CCCC99 66CCFF FF9999 FF9900 CC9999 CC9933 CC66FF 999900 FF00FF 009999 FF3333 6666FF 996666 0066FF 666633 6633FF 336600 006600 0033CC 3300CC 333300 000066

FFFF00 99FFCC 33FFFF 00FFCC 00FF99 99CCFF FF99CC 66CC99 66CC33 FF66FF CC9900 999966 669999 339999 CC6633 339933 CC33CC 6666CC 666699 0066CC 336666 6633CC 0033FF 990000 003399 660000 330000

CCFFFF 99FF99 FFCCCC 66FF00 FFCC00 CCCC66 99CC66 FF9966 66CC00 33CC33 FF66CC 6699CC CC66CC 669933 CC6600 009933 FF0066 996633 CC3333 9900FF 006699 3333FF 663399 3300FF 333300 330099 000033

CCFFCC 66FFFF 33FFCC 33FF99 33FF00 CCCC00 66CCCC 66CC66 33CC99 33CC00 9999CC 999933 0099FF 669900 339966 9966CC 996699 996600 CC3300 666600 CC0000 006633 990066 663333 660066 003333 000000

Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de prctica a los debutantes. Podemos ya con estos conocimientos, y alguno que otro ms, crear nuestra primera pgina. Para ello, abre tu editor de textos y copia y pega el siguiente texto en un nuevo documento. <html> <head> <title>Cocina Para Todos</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Ests en la pgina <b>Comida para Todos</b>.</p> <p>Aqu aprenders recetas fciles y deliciosas.</p> </body> </html> Ahora guarda ese archivo con extensin .html o .htm en tu disco duro. Para ello accedemos al men Archivo y seleccionamos la opcin Guardar como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte disgustos y lios. Nuestro consejo es que no utilices acentos ni espacios ni otros caracteres raros. Tambin te ayudar escribir siempre las letras en minsculas. Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algn caracter como el guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapi en el hecho de que no todos los navegadores son idnticos. Desgraciadamente, los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Generalmente se usan Internet Explorer y Firefox como referencias ya que son los ms extendidos. A decir verdad, en el momento que estas lneas son escritas, Internet Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y Firefox esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Nota: En la disputa por ser el navegador ms usado, en la actualidad otros productos vienen tomando fuerza como Chrome, el navegador de Google. Para el que le interese este tema y conocer datos reales sobre los porcentajes de uso de cada navegador, se puede leer uno de los informes que publicamos peridicamente, como el ranking de uso de los navegadores en noviembre de 2010. Pues bien, volviendo al tema, una vez creado el archivo .html o .htm, podemos visualizar el resultado de nuestra labor abriendo dicha pgina con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador: Si estamos empleando el Explorer, hemos de ir al barra de men, elegir Archivo y seleccionar Abrir. Una ventana se abrir. Pulsamos sobre el botn Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir.

La cosa no resulta ms difcil para Netscape. En este caso, nos dirigimos tambin a la barra de men principal y elegimos File y a continuacin Open File. La misma ventana de bsqueda nos permitir escudriar el contenido de nuestro PC hasta dar con el archivo buscado. Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo guardaste. En l podrs encontrar tu archivo HTML y vers que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble click sobre l. Una vez abierto el archivo podris ver vuestra primera pgina web. Algo sencillita pero por algo se empieza. Ya veris como en poco tiempo seremos capaces de mejorar sensiblemente. Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta, cuyo principal cometido es el de servir de referencia en los motores de bsqueda como Altavista o Yahoo.

Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver en el espacio reservado para el cuerpo de la pgina. Se puede ver la pgina del ejemplo en funcionamiento aqu. Si ahora hacis click con el botn derecho sobre la pgina y elegs Ver cdigo fuente (o View page source) veris como en una ventana accesoria aparece el cdigo de nuestra pgina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de sus pginas. Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en la descripcin de algunas de las etiquetas ms empleadas del HTML. Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una pgina web. Lo que est pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensin .txt y en realidad lo que est guardando en el disco duro es mi_pagina.html.txt Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el men de Ver seleccionis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de seleccin que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". (As se hace en Win98, puede variar un poco en otras versiones de Windows.) Con ello conseguiremos que se vea siempre la extensin del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensin que no sea .txt

Cmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los encabezados como prrafos que sirven de titulo. Copyright. En los captulos anteriores hemos presentado a titulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos con ms detalle las ms ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente. Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica... Hemos visto que para definir los prrafos nos servimos de la etiqueta <p> que introduce un salto y deja una lnea en blanco antes de continuar con el resto del documento. Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que solo cambiamos de lnea. Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual. Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En realidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente. Los prrafos delimitados por etiquetas <p> pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos a lo largo de este manual cantidad de atributos muy tiles para todo tipo de etiquetas. As, si desesemos introducir un texto alineado a la izquierda escribiramos: <p align="left">Texto alineado a la izquierda</p> El resultado seria: Texto alineado a la izquierda

Para una justificacin al centro: <p align="center">Texto alineado al centro</p> que dara: Texto alineado al centro

Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto seria: Texto alineado a la derecha

Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left. Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms quisquillosos. El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo de una forma habitual. Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros deseemos. As, el cdigo: <p align="left">Parrafo1</p> <p align="left"> Parrafo3</p> <p align="left"> Parrafo2</p> es equivalente a: <div align="left"> <p>Parrafo1</p> <p>Parrafo2</p> <p>Parrafo3</p> </div> Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado. Ejemplo prctico: Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis resolver en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por este orden: 2 Prrafos centrados 3 Prrafos alineados a la derecha Un salto de lnea triple 1 prrafo alineado a la izquierda No vamos a escribir en esta ocasin el cdigo fuente del ejercicio. Podemos verlo en funcionamiento en nuestro navegador y en la ventana podemos obtener el cdigo fuente seleccionando en el men Ver la opcin Cdigo fuente. Ver el ejercicio en marcha. Encabezados

Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los encabezados o Header en ingls. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita. Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados ms grandes, <h2> para los de segundo nivel y as hasta <h6> que es el encabezado ms pequeo. Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocar en un prrafo independiente. Podemos ver cmo se presentan algunos encabezados a continuacin. <h1>Encabezado de nivel 1</h1> Se ver de esta manera en la pgina: Encabezado de nivel 1 Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro. <h2 align="center">Encabezado de nivel 2</h2> Se ver de esta manera en la pgina: Encabezado de nivel 2 Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados posibles. Se puede ver a continuacin. <html> <head> <title>Todos los encabezados</title> </head> <body> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body> </html>

Das könnte Ihnen auch gefallen