En el capitulo anterior, habiamos visto como utilizar etiquetas para darle forma a nuestro contenido ( parrafos, negrita, listas, etc ).
Les dejo un link con una lista de etiquetas para que las lean!
http://www.htmlquick.com/es/reference/tags.html
De todas maneras, vamos a seguir con algunas mas, y ya nos vamos a introducir con el tema de CSS ( Estilos ).
COMO INSERTAR UN LINK
Tenemos 2 formas de definir un enlace a otra página. El enlace puede ser externo ( Quiere decir que colocamos un link a una pagina que no esta en nuestro dominio, por ejemplo, un link a Google ) o puede ser un link interno ( Se refiere a una pagina que esta en nuestro dominio )
Ejemplo link externo :
- Código: Seleccionar todo
<a href='http://www.google.com'>Texto del link</a>
La estructura es asi
- Código: Seleccionar todo
<a href='direcciondelapagina'>texto que va a mostrar el link</a>.
Tengan en cuenta que siempre las direcciones deben empezar con http://
Ejemplo de link interno:
Este tipo de enlace, es para paginas relativas al nivel de carpeta donde esta situada la pagina actual, por ejemplo, tenemos la pagina taringa.html, y en la misma carpeta, tenemos la pagina taringa2.html, si queremos colocar un link desde taringa.html a taringa2.html, el codigo es el siguiente:
- Código: Seleccionar todo
<a href='taringa2.html'>Este es un link a taringa2.html</a>
Fijense que ya no hace falta hacer referencia a todo el dominio completo, ya que la pagina se encuentra en la misma carpeta de origen.
Puede suceder que la pagina taringa2.html, se encuentre en un nivel mas bajo, en una carpeta, llamada "otros". En este caso, el link sera asi:
<a href='otros/taringa2.html'>Este es un link a taringa2.html que esta dentro de la carpeta "otros"</a>
COMO INSERTAR IMAGENES
Para insertar imagenes, se utiliza la etiqueta IMG. Se escribe de la siguiente manera:
- Código: Seleccionar todo
<img src='imagen.jpg'>
En este caso, lo que hacemos, es colocar una imagen que se encuentra en la misma carpeta donde esta nuestra pagina html. Si queremos insertar una imagen que esta en cualquier lado de internet, lo que hacemos es:
- Código: Seleccionar todo
<img src='http://www.google.com.ar/images/firefox/sprite.png'>
Fijense que cuando es una imagen externa, hacemos referencia a la URL completa, comenzando por http://
Al igual que los links, si tenemos las imagenes bajo la carpeta "imagenes", relativa a nuestra pagina, entonces el codigo se escribe asi:
- Código: Seleccionar todo
<img src='imagenes/imagen.jpg'>
COMO CENTRAR CONTENIDO
Para centrar contenido, por ejemplo, texto, imagenes, etc, podemos hacer uso de la etiqueta "center". se utiliza de la siguiente manera:
- Código: Seleccionar todo
<center><img src='imagenes/imagen.jpg'></center>
En este ejemplo, lo que hacemos, es centrar la imagen "imagen.jpg".
Tambien podemos centrar texto:
- Código: Seleccionar todo
<center><p>Hola, este es un texto centrado</p></center>
COMO ARMAR TABLAS
Cuando lo que queremos mostrar en nuestra pagina son DATOS, lo mejor es utilizar tablas ( como por ejemplo visualizamos la informacion en excel )
La estructura para armar tablas es la siguiente:
- Código: Seleccionar todo
Inicio de tabla: <table>
Mostramos una fila: <tr></tr>
Definimos encabezados del contenido: <th></th>
Mostramos los datos para cada celda: <td</td>
Fin de la tabla: </table>
Ahora, pongamos un ejemplo de una tablita facil:
- Código: Seleccionar todo
<table>
<tr><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th></tr>
<tr><td>Dato 1</td><td>Dato 2</td><td>Dato 3</td></tr>
<td><td>Dato 11</td><td>Dato 22</td><td>Dato 33</td></tr>
</table>
Y Ahi tenemos una tablita ya armada!!!!
INTRODUCCION A LOS ESTILOS CSS
CSS quiere decir Cascading Style Sheets, que significa en castellano Hojas de Estilo en Cascada.
Hojas de estilo, basicamente, es porque es un archivito que le da estilo a nuestras paginas ( Estilo me refiero a color, tamaño de texto, ubicacion del contenido, etc ).
En Cascada, se refiere a que los estilos se aplican por niveles. Por ejemplo, miremoslo de esta manera, utilicemos como ejemplo las tablas. TABLE seria un elemento padre, un elemento hijo seria TR ( ya que se define dentro de table), y un elemento hijo de TR seria TD ( ya que se define dentro de TR), Entonces, podriamos aplicar un estilo de tamaño de texto a TABLE, y el mismo, tambien se aplicaria a TR, TD.
Los estilos se pueden escribir tanto dentro de la pagina html ( en el encabezado head), se pueden aplicar directamente a etiquetas, o se pueden escribir en archivitos separados.
Generalmente, es muy habitual, cuando se trata de una pagina muy grande con muchos estilos, manejar por separado los estilos del codigo HTML, o sea, manejarlo como archivitos externos.
ESCRIBIENDO CSS DESDE EL HTML
En este caso, vamos a escribir estilos directamente desde el HTML. Les paso la estructura de como seria:
- Código: Seleccionar todo
<html>
<head>
<style type='text/css'>
</style>
</head>
<body>
<p>Texto bla bla</p>
</body>
</html>
Fijense que incluimos en head la etiqueta STYLE, donde alli adentro escribiremos el codigo CSS.
EJEMPLOS DE CSS
Bueno, comencemos a escribir codigo CSS!!!
Lo que hacemos con CSS, es darle estilos a cada elemento de nuestra pagina ( elemento se refiere a etiquetas, por ejemplo, links, parrafos, tablas, etc ).
Cada elemento tiene varias propiedades, como son tipo de letra, tamaño de letra, color de letra, color de fondo, etc.
Ahora, pensemos esto, a un parrafo de texto, queremos ponerle un tamaño de letra grande y con color rojo, como hacemos???
CODIGO DE EJEMPLO
- Código: Seleccionar todo
p {
font-family: verdana;
font-size: 18px;
font-color: red;
}
P es el elemento al que va a aplicar el estilo, despues, ese elemento tiene varias propiedades como dijimos, y lo que hacemos, es asignarles determinado valor a cada una de las propiedades.
Propiedades, piensenlo como caracteristicas, imaginense, P es una persona, Pablo, pablo tiene las propiedades de altura, peso, color de pelo, etc. Y lo que hacemos, es asignarle las propiedades a Pablo, queremos que sea 1.80 de alto, pesa 70kilos, etc.
Explicacion de las propiedades:
font-family: Es el tipo de letra
font-size: El tamaño de la letra en pixeles. 10px, 12px, lo que quieran.
font-color: el color de la letra.
Vamos ahora al ejemplo completo. Guarden este codigo como ejemplo.html
- Código: Seleccionar todo
<html>
<head>
<style type='text/css'>
p {
font-family: verdana;
font-size: 18px;
font-color: red;
}
</style>
</head>
<body>
<p>Parrafo que va a cambiar de propiedad, va a tener tamaño 18, color rojo, y la fuente va a ser verdana.</p>
</body>
</html>
Y Listo!!!!
Fuente
