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:katyperry@gmail.com”>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:katyperry@gmail.com”><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.
Descargar