Acordeon HTML

GUA BSICA (acorden) de html
1. Objetivo El objetivo de este documento es que te familiarices con el cdigo que se utiliza para crear pginas en el Internet. Aunque no seas un profesional en el desarrollo de pginas html, creo que puede ser de utilidad para ti el conocer y ensuciarte un poco las manos aprendiendo un poco de este lenguaje. 2. Creacin de la pgina El ejercicio est estructurado alrededor del siguiente texto. Vas a experimentar con l para visualizar los resultados de agregar cdigo html. 1. Abre un archivo de Notepad (Programs/Accessories/Notepad) 2. Copia el texto siguiente 3. Inserta tus datos donde el texto te lo pide 4. Gurdalo como un archivo html. La extensin del archivo debe ser html, no uses ni espacios ni vocales acentuadas en el nombre. Pgina personal de <<Escribe ac tu nombre>> Bienvenidos a mi Pgina <<Escribe ac tu nombre>> Esta es mi pgina personal, en ella voy a compartir con ustedes algunas de mis actividades importantes en la maestra y desarrollo profesional. Curriculum Vitae Clases Proyectos Mi peridico favorito Limitacin de responsabilidad de la Universidad: "La Universidad de las Amricas no monitorea, revisa o aprueba las pginas personales o los identificadores de vnculos de las pginas personales que residen en el dominio de la Universidad. La Universidad no es responsable por los contenidos de las pginas o comunicaciones de correo electrnico de carcter personal. Los puntos de vista y opiniones expresados a travs de correo electrnico o pginas personales son estrictamente aqullos del autor. Si quieres, puedes enviarme un correo a <<escribe aqu tu correo electrnico>> 3. Estructura bsica de un documento html Abre el archivo que acabas de crear en Internet Explorer, vers en la pantalla algo muy similar a la figura 1. El texto no tiene formato de ningn tipo. Para dar este formato se necesita utilizar algunos cdigos de html. A estos cdigos se les conoce como tags.
Figura 1 Todos los tags de html estn delimitados con los smbolos <>, y la mayora de ellos slo sirven para dar formato al texto, indicando al navegador cmo desplegarlo. Ms an, la mayor parte de ellos vienen en parejas, indicando el inicio y fin del formato. Apliquemos la estructura bsica de un documento de html al texto que tenemos en Notepad como se muestra en la figura 2. La estructura bsica es: <html> <head> </head> <body> </body> </html> Informacin sobre el documento (no aparece en el navegador) Cuerpo del documento (s aparece en el navegador)
Todo el documento, las tags de html marcan el inicio y el fin del documento
Figura 2 Graba el documento en NotePad, regresa al navegador y haz clic en el botn de refresh. Vers lo que aparece en la figura 3. Qu cambi? NOTA: Para poder ver el efecto de todas las modificaciones, asegrate de guardar los cambios en NotePad cada vez que los hagas y hacer click en refresh en el navegador.
Figura 3
4. Encabezados Las tags de encabezados dan formato a las partes de texto que encierran ponindolos en negritas y aumentando el tamao. <h1> es para el encabezado ms grande y <h6> para el ms pequeo. <h1>Encabezado 1</h1> <h2> Encabezado 2</h2> <h3> Encabezado 3</h3> <h4> Encabezado 4</h4> <h5> Encabezado 5</h5> <h6> Encabezado 6</h6> Agrega al archivo en Notepad las in strucciones de encabezado como se muestra en la figura 4. Ve al navegador para observar los cambios (figura 5).
Figura 4
Figura 5 4
Si deseas centrar los encabezados, necesitas agregar el cdigo align=center en cada una de las tags de encabezado como se muestra en la figura 6. Observa el cambio en tu navegador.
Figura 6 5. Listas Vamos a agregar el formato de lista dentro de la pgina. El cdigo html que se utiliza es el siguiente: <ol> <li>Item 1</li> <li>Item 2</li> </ol> Para agregarlo al documento en NotePad, sigue el modelo de la figura 7. Observa en el navegador los cambios (figura 8). Cambia las tags <ol> y </ol> por <ul> y </ul> (figura 9), qu sucede?
Figura 7
Figura 8
Figura 9 6. Tablas Incluye una tabla con tu horario en tu pgina. El cdigo es: <table> <tr> <td>1</td> <td>2</td> </tr> <tr> .. </tr> </table> Inicio de la tabla Inicio del primer rengln de la tabla Primera celda del primer rengln Segunda celda del primer rengln fin del promer rengln Otro rengln Fin de la tabla
Sigue el modelo de la figura 10 y ve los resultados (figura 11). Nota que insertamos un espacio entre la tabla y el prrafo siguiente. El comando <br></br> agrega una lnea en blanco, y es de los pocos comandos que puede escribirse sin su pareja, ya sea <br> </br>.
Figura 10
Figura 11
7. Vnculos Quieres ver las noticias de hoy? Puedes crear un vnculo a mi peridico favorito (o a el tuyo) y tambin puedes agregar un vnculo que facilite enviarte un correo, con las instrucciones siguientes, como se muestra en la figura 12. Ve los resultados en el navegador. <a href="http://"></a> <a href="mailto:"></a>
Figura 12 8. Comentario Si quieres insertar comentarios importante y que no aparecen en tu pgina de html, lo puedes hacer con el comando  como se ve en la figura 13.
Figura 13 9. Formatos Puedes personalizar tu pgina cambiando formatos en algunos prrafos, subrayando, poniendo negritas, etc. Experimenta con diferentes tags como se muestra en la figura 14 en el prrafo de limitacin de responsabilidad de la Universidad. Observa los cambios en el navegador (Figura 15).
Figura 14
10
Figura 15 Un formato muy importante que se me ha estado escapando porque en el ejemplo no ha sido tan importante es el de inicio y fin de prrafo <p> y </p>. Estos se deben colocar para separar prrafos como se muestra en la figura 16. Aunque en nuestro ejemplo no han sido tan importantes, en otras aplicaciones quiz sean los primeros comandos que se necesita aadir (recort slo las partes del documento donde estn estas instrucciones). Observa los resultados en el navegador.
Figura 16 10. Imgenes Para insertar una imagen en un documento html se utiliza el comando <img src="" alt="" width="" height="" border="0" /> Src contiene el nombre y ubicacin del archivo grfico que deseas incluir, alt contiene un texto alternativo a mostrarse en navegadores sin capacidades grficas, o es el texto utilizado por los lectores de sitios web que ayudan a los invidentes a navegar. Width y
11
height son el tamao del grfico, y border indica si quieres incluir un borde en la imagen o no. Para explorar este comando necesitamos una imagen. Abre la pgina principal de la Universidad, coloca el apuntador encima del imagotipo de la UDLA y haz clic con el botn derecho del Mouse (Figura 17). Selecciona la opcin Save Picture as.. y graba la imagen en el mismo lugar donde est guardado tu archivo de NotePad con el nombre logo.gif
Figura 17 Inserta en tu documento de NotePad el siguiente cdigo inmediatamente despus de body <img src="logo.gif" alt="Universidad de las Amricas" border="0" /> (Figura 18). Graba el archivo y observa los cambios en el navegador.
Figura 18 11. Metadatos Todos los documentos en cualquier sistema pueden ser descritos en trminos de quin fue el autor o palabras clave que describan sus contenidos. El Internet no es una excepcin, y existen algunos comandos que describen el contenido de los documentos. stos son especialmente importantes para los buscadores como Google o AskJeeves. Los principales comandos de metadatos son los siguientes (se agregan en la seccin <head> del documento html) <meta name="description" content="una descripcin del la pgina" lang="Spanish"> <meta name="keywords" content="palabras que describan la pgina"> 12
<meta name="author" content="Luis F. Luna Reyes"> <meta name="generator" content="NotePad"> Agrega algunos de estos commandos a tu pgina, y con eso terminars tu primer documento html. No se desplegarn en tu navegador, pero son importantes para que los buscadores encuentren tu pgina. 12. Resumen de comandos (sta es la parte del acorden) Estructura bsica de un documento html <html> <head> <title>Ttulo del documento</title> </head> <body> </body> </html> Comentarios  Meta datos de un documento html (importantes para motores de bsqueda) <meta name="description" content="una descripcin del la pgina" lang="Spanish"> <meta name="keywords" content="palabras que describan la pgina"> <meta name="author" content="Luis F. Luna Reyes"> <meta name="generator" content="NotePad"> <meta name="robots" content="NOINDEX"> Encabezados <h1>Ttulo 1</h1> <h2>Ttulo 2</h2> <h3>Ttulo 3</h3> <h4>Ttulo 4</h4> <h5>Ttulo 5</h5> <h6>Ttulo 6</h6> Listas No ordenadas <ul> <li>Item 1</li> <li>Item 2</li> </ul> Listas ordenadas <ol>
13
<li>Item 1</li> <li>Item 2</li> </ol> Formato <p>Prrafo</p> <b>Bold</b> <i>Itlicas</i> <big>Grande</big> <small>Pequeo</small> <u>Subrayado</u> <sub>Subscript</sub> <sup>Superscript</sup> <font face="" size="" color="">Texto</font> <hr />  Imgenes <img src="" alt="" width="" height="" border="0" /> Vnculos <a href="http://"></a> <a href="mailto:"></a> <a href="ftp://"></a> <a href="#"></a> Bookmarks <a name=""></a> Tablas <table border="1"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>
14

Acordeon HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Acordeon HTML

Încărcat de

Drepturi de autor:

Formate disponibile

GUA BSICA (acorden) de html

S-ar putea să vă placă și