body - Universidad Nacional de Quilmes
Anuncio
HTML Un lenguaje de marcado Universidad Nacional de Quilmes El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). <...> Este es el inicio de una etiqueta (entre los signos < y >). </...> Este es el cierre de una etiqueta (se agrega el signo /). Todo el documento en HTML debe estar afectado por las etiquetas de apertura y de cierre que indican que todo lo escrito se trata de un documento en HTML: <html>[Todo el documento en html.]</html> Las dos zonas principales de un documento HTML son: <head> [Todo lo contenido aquí es la cabecera. Es información para el navegador.] </head> <body> [Todo lo contenido aquí es el cuerpo. Es lo que se muestra como el contenido de la página.] </body> Principalmente dentro de la cabecera se coloca el título del documento, que será lo que se lea en la pestaña del navegador y el nombre con el que la página aparecerá cuando sea guardada como favorita. El título va entre tags. <title>Este es el nombre de mi página</title> Además, van las marcas de metainformación. La etiqueta <meta> se usa para añadir información sobre la página. Esta información puede ser usada por los buscadores, que consultan la información de la tag <meta>, buscando coincidencias con lo que el usuario quiere encontrar. Un tipo de marca de metainformación se refiere a las keywords, que son los términos que describen el contenido de una página. Por ejemplo: <meta name="keywords" content="Universidad Nacional de Quilmes, UNQ, Unqui, UVQ, virtual, carreras de grado, posgrado, investigación, transferencia, extensión, capacitación, educación superior"> Cuanto menos en cantidad y más descriptivas las keywords, mejor. Otro tipo de marca de metainformación se refiere al autor de la página. <meta name="author" content="Equipo de diseñadores web"> También podemos dar información descriptiva de la página: <meta name="description" content="Carreras de grado y posgrado, presenciales y virtuales, de La Universidad Nacional de Quilmes"> Vemos entonces que a través de la etiqueta <meta> pueden especificarse los atributos name=" " y content=" ". El atributo name indica el tipo de información y el atributo content indica el valor de dicha información. Veamos ahora el atributo http-equiv. Entonces: <html> <head> <title>Este el título de mi página</title> <meta name=”[tipo]” content=”[valor]”> <meta http-equiv=”[acción]” content=”[valor]”> </head> <body> [Aquí estará todo el contenido de mi página.] </body> </html> Tipos de letra: Algunas de las marcas que permiten especificar la tipografía de los caracteres son las siguientes: <B>Negrita (Bold)</B> <I>Cursiva (Italic)</I> <BLINK>Parpadeante (Blink)</BLINK> <EM>énfasis (Emphasis)</EM> <STRONG>Gran énfasis (Strong)</STRONG> <U>Subrayado (Underline)</U> Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar. Tamaño y color de letra Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente: <FONT SIZE="tamaño">Texto</FONT> Para dar color a un texto se utiliza el comando siguiente: <FONT COLOR="color">Texto</FONT> Veamos un poco el contenido del cuerpo de mi página. El texto puede tener títulos o encabezados. Podemos variar el tamaño de estos títulos con: Mayor tamaño <h1>[Encabezado]</h1> <h2>[Encabezado]</h2> <h3>[Encabezado]</h3> <h4>[Encabezado]</h4> <h5>[Encabezado]</h5> <h6>[Encabezado]</h6> Menor tamaño Podemos enfatizar un texto: <em>Esto es un texto enfatizado con &ltem&gt.</em> Esto es un texto enfatizado con <em>. <strong>Esto es un texto enfatizado con &ltstrong&gt.<strong> Esto es un texto enfatizado con <strong>. &lt: hace que se vea escrito el signo < &gt: hace que se vea escrito el signo > Veamos un ejemplo completo. <body><!--Este es solamente el cuerpo del código--> <h1>Este es un título tamaño h1</h1> Voy a comenzar a separar el texto en párrafos. <p>Aquí coloqué &ltp&gt para indicar que comienza un nuevo párrafo con un espacio de separación con respecto al anterior. <p>Este nuevo párrafo tiene ciertas <em>palabras</em> remarcadas de <strong>diferentes maneras</strong>. <h3>Y finalmente coloco otro título, pero en tamaño h3.</h3> </body><!--Aquí termina el cuerpo--> Los enlaces, en general, tienen la siguiente estructura: <a href=”XXXXX”>YYYYY</a> XXXXX es el destino del enlace. YYYYY es el texto indicativo del enlace, que se lee en nuestra página. Por ejemplo: <a href=”http://www.unq.edu.ar/secciones/8-carreras/”>Carreras de la UNQ</a> Puedo pedir que el enlace sea abierto en otra pestaña: <a href=”http://www.unq.edu.ar/secciones/8-carreras/” target=”_blank”>Carreras de la UNQ</a> A veces queremos enlazar con otra sección pero de nuestra misma página (dar un salto dentro de ella misma). Otras veces queremos enlazar con otra página distinta. Enlaces dentro de la misma página <a href=”#marca”>Texto que se lee en la página.</a> marca puede ser cualquier palabra. Es el destino del enlace. En el sitio exacto a donde queremos saltar, colocamos la siguiente etiqueta: <a name=”marca”>Texto que se lee en la página.<a> Enlaces con otra página - del mismo sitio: <a href=”[subdirectorio/pagina2.html]”>Texto que se lee en la página</a> - de otro sitio: <a href=”[URL completa del destino]”>Texto que se lee en la página</a> ¿Podemos enlazar con una dirección de e-mail? ¡Por supuesto! Colocamos: <a href=”mailto:[dirección de e-mail]”>Texto que se lee en la página</a> Por ejemplo <a href=”mailto:[email protected]”>Envíale un mail a Katy Perry</a> ¿Y si quiero insertar hipervínculos mediante una imagen (hago click en una imagen y me dirijo hacia otra sección de mi página o hacia otra página…)? Bien, veamos primero el tema imágenes en una página web. Incluir imágenes en nuestra página es muy sencillo: <img src=”[nombre del archivo].[tipo de archivo]” alt=”[Descripción]”> El [tipo de archivo] puede ser .gif o .jpg En la [descripción] colocamos una breve descripción de la imagen, en caso de que el visitante de nuestra página no pueda verla. Por ejemplo: <img src=”mapaBernal.jpg” alt=”Mapa de la ciudad de Bernal”> Finalmente, ¿qué creen que logro escribiendo estas líneas de código? <a href=”http://www.unq.edu.ar/secciones/8-carreras/”><img src=”libros.jpg”></a> <a href=”mailto:[email protected]”><img src=”KatyPerry.gif”></a> <a href=”#marca1”><img src=”librosabiertos.jpg” alt=”Libros”></a> Las listas Muchas veces vamos a querer presentar texto en forma de listas. Vamos a ver dos tipos de listas: las ordenadas y las desordenadas. Las listas ordenadas sirven para presentar los ítems de una lista con un número, así el lector entiende que hay un orden entre los elementos. Por ejemplo, si quiero que el lector vea lo siguiente: Este es el ranking de carreras en las que estuve interesado: 1. 2. 3. Ciencias Veterinarias Medicina Ingeniería Agrícola Voy a escribir el siguiente código: <ol>Este es el ranking de carreras en las que estuve interesado: <li>Ciencias Veterinarias</li> <li>Medicina</li> <li>Ingenier&iacutea Agr&iacutecola</li> </ol> Las listas desordenadas sirven para presentar elementos entre los que no importa el orden. Por ejemplo, quiero que el lector de mi página vea lo siguiente: Hay muchas cosas que me gusta hacer en mi tiempo libre, como las siguientes: ● Caminar por el parque más cercano a mi casa ● Charlar con mis amigos sobre todos los temas, ¡menos el estudio! ● Jugar partidos de fútbol Voy a escribir el siguiente código: <ul>Hay muchas cosas que me gusta hacer en mi tiempo libre, como las siguientes: <li>Caminar por el parque m&aacutes cercano a mi casa</li> <li>Charlar con mis amigos sobre todos los temas, ¡menos el estudio!</li> <li>Jugar partidos de f&uacutetbol</li> </ul> ¿Qué se modificaría si quisiéramos tener una lista ordenada? <table border="2"> <!--le agregamos un borde a la tabla--> <tr> <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td> <td>Fila 1 Columna 3</td> </tr> <tr> <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td> <td>Fila 2 Columna 3</td> </tr> </table> Con <tr></tr> voy formando las filas de mi tabla. Con <td></td> voy formando las celdas de cada fila de mi tabla. Podemos agregar un encabezado a cada columna: <table border="2"> <tr> <th>Esta <th>Esta <th>Esta </tr> <tr> <td>Fila <td>Fila <td>Fila </tr> es la columna 1</th> es la columna 2</th> es la columna 3</th> 1 Columna 1</td> 1 Columna 2</td> 1 Columna 3</td> <tr> <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td> <td>Fila 2 Columna 3</td> </tr> </table> Podemos agregarle un título a nuestra tabla con: <caption>Esta es una tabla</caption> Y, finalmente, el título también puede estar debajo de la tabla: <caption align="bottom">Esta es una tabla</caption> Guía de ejercicios prácticos Pueden resolver hasta el ejercicio 14 de la guía N° 1 inclusive. Es recomendable ir al día con los trabajos prácticos.
