HTML

<html> </html> Cada pgina debe comenzar y terminar con la etiqueta (tag) HTML.
Una etiqueta se cierra agregando /. La mayora de las etiquetas tienen una etiqueta de terminacin. Con las etiquetas se dan instrucciones a los navegadores. Lo que se acaba de decir al navegador es "este es el inicio de un documento HTML" (<html>) y "este es el final del documento HTML" (</html>). Ahora necesitamos colocar informacin entre estas etiquetas. Todo documento HTML requiere un par de "etiquetas de encabezado" <html> <head> </head> </html> Por el momento contemplaremos la etiqueta "Ttulo" (title) dentro de las "etiquetas de encabezado" (head) <html> <head> <title></title> </head> </html> El resto del documento aparecer dentro de las etiquetas "BODY" <html> <head> <title></title> </head> <body> </body> </html> UPPPSSS! Casi lo olvido, coloca un ttulo para tu pgina <html> <head> <title>Mi primera pgina</title> </head> <body> </body> </html> Para evitar escribir varias veces lo mismo, me enfocar a la etiqueta "BODY" para incluir el contenido de la pgina. <body> </body> Anota: "Lo que ms se te antoje" <body> Lo que ms se te antoje </body> Cada vez que agregues algo nuevo, salva tu documento, despus, d clic en el botn "Reload" (Actualizar) del navegador (supongo que tienes abierto tu documento en la pestaa (ventana) adicional de la leccin anterior). Si no se muestran tus cambios actuales, al momento de dar clic en el botn Reload mantn presionada la tecla "Shift" Coloquemos algo en Negritas <body bgcolor="#ffffff"> Lo que ms se te antoje 1
</body> Lo que se dice al navegador es: en comenzar con negritas, y en detener las negritas. Lo mismo aplica para las itlicas <body bgcolor="#ffffff"> Lo que mas se te antoje </body> ... y tambin para el subrayado <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Regresemos nuevamente a pantalla blanca sin formato en palabras... <body bgcolor="#ffffff"> (bgcolor puedes colocarlo en maysculas ) Lo que mas se te antoje </body> Se puede usar una combinacin de etiquetas si se desea. <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Este es un ejemplo de etiquetas combinadas. Si vas a usar etiquetas combinadas (lo que hars dentro de poco), entonces debes evitar confundir al navegador, las etiquetas deben ser combinadas no sobre puestas. Djame explicarte lo que trato de decir... <esto><aquello> </esto></aquello> Etiquetas sobre puestas... mal <esto><aquello></aquello> </esto> Etiquetas combinadas... bien Puedes cambiar el tamao de las letras... es mu Primero agrega las etiquetas de fuente <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Despus aplica el tamao <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Existen 7 tamaos de fuente
y sencillo
7
2
Dos aspectos importantes que deben tenerse en cuenta... Una <ETIQUETA> le dice al navegador que haga algo. Un "ATRIBUTO" va dentro de la <ETIQUETA> y le indica al navegador "cmo" hacerlo.
El "VALOR POR DEFECTO" empleado por los navegadores se aplica cuando no se indica nada al respecto. Por ejemplo, el tamao por defecto de las fuentes en los navegadores es 3. A menos que se establezca uno distinto seguir siendo 3. El valor por defecto en los navegadores (no todos) es Times New Roman 12 pt (lo cual representa el nmero 3 con el cgido de html) en color negro. Intenta colocar la fuente como Arial o Comic Sans... <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Sin embargo, no se recomienda emplear la etiqueta FACE debido a que se requiere tener la fuente en la pc para poder visualizarla. Me explico, si t tienes la fuente "XYZ" en tu pc y la colocas en tu pgina web, la podrs ver sin problemas, pero cuando un visitante llega y no tiene la fuente, no podr ver ese tipo de letra que colocaste y ser suplantada por la fuente por defecto de su sistema. Se puede usar una combinacin de fuentes que pueden resolver este problema, tal como en Quiero aprender HTML. Para aquellos que no entienden qu ocurre aqu, tal como me pas a m, sto es lo que sucede ===> El navegador busca por la fuente Arial, si la encuentra la usa, si no la encuentra buscar por Helvetica... si no la encuentra entonces buscar por Lucida Sans... y si no la encuentra entonces usar la fuente por defecto. Un tip sobre la sintaxis... habrs notado que uso maysculas y minsculas en las etiquetas. Hasta este punto puedes usar lo que desees, ya sea , o , pues representan lo mismo. Lo que no debes olvidar es colocar bien las comillas y los signos de mayor qu ">" y menor qu "<". Personalmente te sugiero utilizar siempre los nombres de las etiquetas en minsculas, pues los estndares establecidos por la W3C as lo exigen para validar HTML. Se puede cambiar el color de la fuente... <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Se puede usar ms de un ATRIBUTO en una <ETIQUETA>... <body bgcolor="#ffffff#> Lo que ms se te antoje </body> Y ms de una <ETIQUETA> a la misma seccin... <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Recuerda, nuevamente, que las etiquetas deben ser combinadas y no sobre puestas... <ETIQUETA1><ETIQUETA2> <ETIQUETA3>@ i-Meil</ETIQUETA3> </ETIQUETA2></ETIQUETA1>... correcto <ETIQUETA3><ETIQUETA1> <ETIQUETA2>@ i-Meil</ETIQUETA2> </ETIQUETA1></ETIQUETA3>... correcto
<ETIQUETA3><ETIQUETA2> <ETIQUETA1>@ i-Meil</ETIQUETA3> </ETIQUETA1></ETIQUETA2>... mal Los navegadores presentan una forma predeterminada para el color de la fuente, del link (vnculo), del link visitado y del link actual. Estos atributos predeterminados son... Texto Negro Link color Azul Link visitado Prpura Link activo Rojo Puedes modificar estos atributos predeterminados en la etiqueta <BODY>... <body bgcolor="#000000" text="#ffff00" link="#ff0000" vlink="#800000" alink="#008000"> Lo que ms se te antoje </body> donde vlink es Visited Link (link visitado) y alink es Active Link (Link activo o actual). Ahora vas a conocer la forma en que trabaja o responde el navegador al cdigo html que anotas. Vamos con ejemplos... <body bgcolor="#ffffff"> Lo que ms se te antoje cualquier cosa! </body> <body bgcolor="#ffffff"> Ahora... qu es lo que ocurre con sto? </body> El navegador no reconoce el formato. A menos que se lo indiques, presentar las letras y las palabras en forma normal. Si deseas comenzar con una nueva lnea, debes usar la etiqueta respectiva. <body bgcolor="#ffffff"> Ahora... qu es lo que ocurre con sto? </body> indica "comenzar una nueva lnea". es similar a , pero da un salto de lnea y ah comienza el texto. <body bgcolor="#ffffff"> Ahora... qu es lo que ocurre con sto? </body> 4
 es una de las pocas etiquetas que no requiren la de cierre, pero para cumplir con los estndares de HTML, siempre debes cerrar una etiqueta con su par respectivo. no puede emplearse para obtener varias lneas en blanco, si anotas no obtendrs 3 lneas en blanco, slo proporcionar 1. Cmo obtenerlas entonces? vamos a explicarlo. Observa lo siguiente... <body bgcolor="#ffffff"> Lo que ms se te antoje </body> El navegador slo reconoce 1 espacio, aunque parezca tonto, pero de esta forma permite tener mayor control en la apariencia del documento. Para dar un espacio como el de la barra espaciadora del teclado, se debe utilizar ==> <body bgcolor="#FFFFFF"> Lo que ms se te antoje </body> El signo "&" indica que se inicia un caracter especial, mientras que el signo ";" indica que ah termina, las letras en medio son una abreviacin de lo que representa. Existen seis caracteres especiales que son muy usados (siempre deben escribirse en minsculas). < > & " (espacio en blanco) (smbolo menor qu "<") (smbolo mayor qu ">") (signo "&") (comilla ") (guin ) Intntalo....
No se deben utilizar todos al mismo tiempo, pero con un poco de prctica se sabr cundo deben ser utilizados. La mayora de los programas para hacer pginas web del tipo "WYSIWYG" ("Lo que ves es lo que obtienes", que proviene del ingls "What You See Is What You Get") no requieren que les indiques cdigo html. Si no consigues colocarlos bien, no te preocupes, ya que "echando a perder se aprende" pregntenlo a "Fatty" (mi pc) que ha recibido alrededor de 9 formateadas de disco duro. --eso
Regresemos a nuestro asunto... si se presiona la tecla "ENTER" (RETURN) del teclado al tiempo que se est escribiendo, el navegador lo interpretar como un espacio. Veamos un ejemplo ms... <body bgcolor="#ffffff"> Lo que ms se te antoje cualquier cosa! </body> Ahora anota lo siguiente... <body bgcolor="#ffffff"> <center>Lo que ms se te antoje</center> </body> 5
Todo lo que se encuentre dentro de las etiquetas <CENTER> estar centrado en la pantalla. Esta etiqueta ha sido "descontinuada", cuando llegues al nivel de CSS (Cascading Style Sheets) sabrs de qu te hablo... por el momento sigamos adelante. Hey! casi olvido algo... para obtener varias lneas en blanco se debe crear un espacio en blanco " " y despus colocar el corte de lnea " "... <body bgcolor="#ffffff"> Lo que ms se te antoje </body> Esta leccin tratar sobre los links (vnculos). Es muy sencillo. Hagmosle un link a "Open Directory Project". Inicia con... <body bgcolor="#ffffff"> Open Directory Project </body> Coloca un par de etiquetas ancla. <body bgcolor="#ffffff"> Visita <a>Open Directory Project</a> </body> Agrega el URL y es todo! "URL" significa Universal Resource Locator (en espaol varia la traduccin). Para que no te confundas con el nombre tcnico dado a URL, slo recuerda que es una direccin. <body bgcolor="#ffffff"> Visita <a href="http://dmoz.org/">Open Directory Project</a> </body> Un link ms. <body bgcolor="#ffffff"> Visita Netscape! </body> <body bgcolor="#ffffff"> Visita <a href="http://home.netscape.com/">Netscape!</a> </body> Un link a un e-mail es similar, cambiando la URL por una direccin de correo. <body bgcolor="#ffffff"> 6
Envame un <a href="mailto:yo@imeil.com.mx">mensaje!</a> </body> Otra utilidad son las que representan las "LISTAS ", que pueden ser " ORDENADAS" y "DESORDENADAS". Primero haremos una lista DESORDENADA. Inicia con... <body bgcolor="#ffffff"> Lo que quiero para el da de mi graduacin </body> Agrega un par de etiquetas de lista desordenada... <body bgcolor="#ffffff"> Lo que quiero para el da de mi graduacin <ul> </ul> </body> Una lista de cosas... <body bgcolor="#ffffff"> Lo que quiero para el da de mi graduacin <ul> <li>una Cherokee 4x4 negra</li> </ul> </body> Agrega ms... <body bgcolor="#ffffff"> Lo que quiero para el da de mi graduacin <ul> <li>una Cherokee 4x4 negra</li> <li>una notebook a 9.6 Ghz.</li> <li>una batera/guitarra</li> <li>un jetski</li> <li>a Mara Sharapova</li> </ul> </body> Para hacer la lista ordenada cambia la etiqueta <ul> por <ol>... <body bgcolor="#ffffff"> Lo que quiero para el da de mi graduacin <ol> <li>una Cherokee 4x4 negra</li> <li>una notebook a 9.6 Ghz</li> <li>una batera/guitarra</li> <li>un jetski</li> <li>a Mara Sharapova</li> </ol> </body> 7
Otro tipo de lista es la de definicin... Web Marketing El Web Marketing, no es otra cosa ms que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayora de las herramientas que ofrece internet para realizar la promocin de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia. Inicia con... <body bgcolor="#ffffff"> <dl> </dl> </body> Agrega el ttulo de la definicin... <body bgcolor="#ffffff"> <dl> <dt>Web Marketing </dl> </body> La definicin... <body bgcolor="#ffffff"> <dl> <dt>Web Marketing <dd>El Web Marketing, no es otra cosa ms que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayora de las herramientas que ofrece internet para realizar la promocin de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia. </dl> </body> Por ltimo, pon en negrita el ttulo de la definicin... <body bgcolor="#ffffff"> <dl> <dt>Web Marketing <dd>El Web Marketing, no es otra cosa ms que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayora de las herramientas que ofrece internet para realizar la promocin de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia. </dl> </body> Una etiqueta que se utiliza demasiado es la de la "Lnea Horizontal" (Horizontal Rule) "<HR>". <body bgcolor="#ffffff"> <hr /> </body> 8
Algunas opciones para la lnea horizontal... <body bgcolor="#ffffff"> <hr width="20%" /> <hr width="50%" /> <hr width="100%" /> <hr width="20" /> <hr width="50" /> <hr width="100" /> </body> Y de esta forma se alinea dentro de la pgina... <body bgcolor="#ffffff"> <hr width="60%" align="left" /> <hr width="60%" align="right" /> <hr width="60%" align="center" /> </body> Se puede controlar su grosor... <body bgcolor="#ffffff"> <hr width="60%" size="1" /> <hr width="60%" size="3" /> <hr width="60%" size="8" /> <hr width="60%" size="15" /> </body> ...y presentarla con un color slido... <body bgcolor="#ffffff"> <hr width="60%" size="1" NOSHADE /><hr width="60%" size="3" NOSHADE /> <hr width="60%" size="8" NOSHADE /> <hr width="60%" size="15" NOSHADE /> </body> La ltima etiqueta a tratar es la de comentarios... <body bgcolor="#ffffff">  Este no lo es Un comentario puede colocarse donde sea dentro de la pgina y es ignorado por el navegador todo lo que se encuentre dentro de su etiqueta. Se pueden colocar mensajes ocultos, como personales  o mensajes de ayuda a quienes observan el cdigo empleado  </body> 9

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

<html> </html> Cada pgina debe comenzar y terminar con la etiqueta (tag) HTML.

You might also like