Crear enlaces con HTML
En esta lección aprenderemos a crear enlaces con código HTML para tu pagina web.
Para crear un enlace necesitamos la ubicación, o mejor dicho, la dirección hacia donde nos llevará ese enlace al hacer clic en el, podemos poner una ruta absoluta (por ejemplo http://www.comocrearunsitioweb.com/ubicacion-enlace.html) o bien, una ruta relativa ("/enlace.html" si es que el archivo desde donde enlazamos se encuentra en el mismo directorio del archivo en el que estamos en ese momento, o sea el "index.html" que creamos al principio).
La etiqueta para crear enlaces es <a> y </a>, pero claro, aun falta algo ¿no?, falta poner la dirección hacia donde nos llevará ese enlace, para eso esta el atributo href, se utiliza de esta forma:
<a href="http://www.comocrearunsitioweb.com">Crear Web</a>
El texto del enlace va encerrado entre <a> y </a>, esto daría como resultado:
Crear Web
Nota: cada vez que nos toque crear un enlace hacia otra pagina web (es decir, que no sea una sección de nuestra pagina) utilizaremos la dirección absoluta con el prefijo "http://".
Ahora vamos a insertar un enlace a nuestra pagina web de ejemplo, el texto del enlace será CCUSW (ComoCrearUnSitioWeb):
<html>
<head><title>Mi primer pagina Web</title></head>
<body>
<p>Este es mi primer párrafo</p>
<br />
<p>Creado gracias a <a href="http://www.comocrearunsitioweb.com">CCUSW</a></p>
</body>
</html>
El enlace ya esta creado, ahora cambiaremos de pestaña para ver como queda:
Crear enlace de email
Podemos crear enlaces que al hacer clic nos abra un programa para enviar email directamente, para crear estos enlaces solo tenemos que escribir "mailto:" antes de la dirección de email, de esta forma:
<a href="mailto:[email protected]">Texto del enlace</a>
Insertar imagen con HTML
En esta lección aprenderemos a insertar o colocar imágenes con código HTML, y también veremos como hacer que esa imagen tenga un enlace.
Llego el momento de insertar nuestra primera imágen con HTML, la etiqueta que sirve para agregar imagenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imágen.
Para insertar una imágen lo haremos así:
<img src="ubicación" alt="descripción" />
"alt" sirve para agregar una descripción a la imágen, que aparecerá cuando pasemos el mouse por encima de ella.
Si cambiamos a la pestaña "Vista preliminar" veremos el resultado final:
Ahí vemos como queda en nuestra pagina de ejemplo que venimos creando a lo largo de todas las lecciones anteriores. Pero ¿que pasa si queremos crear un enlace en la imagen para que cuando hagamos clic en ella nos abra otra dirección? eso es lo que voy a explicar ahora
Crear enlace en imágen
Para crear un enlace en la imágen para que al hacer clic en ella nos abra otra pagina, solo debemos poner la etiqueta <img> dentro de <a> y </a>, de esta forma:
<a href="direccion" title="descripcion"><img src="ubicacion-de-la-imagen" alt="descripcion" /></a>
Bastante simple ¿no? ahora comenzaremos a ver estilos CSS, una tecnología que te ahorrara mucho trabajo, ya verás
Hoja de estilos CSS
Introducción a los aspectos técnicos de los estilos CSS, como crear una hoja de estilos y relacionarla con nuestra pagina web.
Muchas veces nos vemos un poco limitados al trabajar solo con HTML, aplicar colores, tamaño de fuentes y demás puede ser casi imposible si nuestra pagina web tiene mucho contenido.
Para eso usaremos los estilos CSS, con ellos podemos aplicar cambios de colores, fuentes, margenes, espacios, etc. a la web mucho mas fácil.
Crear la hoja de estilos CSS
La hoja de estilos CSS no contiene código HTML, por lo tanto no deberemos escribir etiquetas HTML en el, para crear la hoja de estilos vamos a:
Abrir el bloc de notas (NOTA: con NVU no funciona)
Clic en Archivo -> Guardar Como... se nos abrirá una ventana donde tendremos que decirle en que ubicación queremos guardar la hoja de estilos, nosotros los haremos en la carpeta ejemplo-ccusw donde estan los demas archivos de este curso.
Guardamos el archivo con el nombre: "estilos.css", recuerda, debe terminar en ".css" sin más.
Muy bien, una vez que tengamos el archivo estilos.css vacio tenemos que lograr, de alguna forma, que los estilos que escribamos en ese archivo sean tomados en cuenta por el archivo HTML.
Nota: recuerda que NO hay que escribir código HTML en la hoja de estilos.
Relacionar la hoja de estilos CSS con nuestra pagina web
Para relacionar la hoja de estilos CSS utilizaremos la etiqueta <link>, en ella deberemos especificar la ubicación, tipo de archivo y la relación entre la hoja de estilos y la pagina web, debes acordarte SIEMPRE, que la etiqueta <link> va dentro de la etiqueta <head>, de esta forma:
<link href="estilos.css" rel="stylesheet" type="text/css" />
Ahí vemos que se especifican varios atributos, cada uno sirve para:
href: busca la hoja de estilos
rel: le dice la relación
type: le dice que tipo de archivo es, o mejor dicho, que contenido llevará dentro.
Para probar si lo hicimos bien, abriremos la hoja de estilos (estilos.css) y escribimos esto:
body{background-color:black;}
Guardamos y abrimos el archivo index.html con nuestro navegador (Internet Explorer, Firefox, Opera, etc), si todo fue bien tendriamos que ver el fondo de nuestra página de color negro.
Conceptos básicos de estilos CSS
En esta lección aprenderemos los conceptos básicos de los estilos CSS, totalmente desde cero.
Conceptos básicos
CSS sirve para aplicar estilos a las etiquetas HTML.
Estructura básica del código CSS
Para aplicar estilos CSS a una etiqueta HTML tenemos que hacerlo así:
etiqueta{atributo:valor;}
por ejemplo:
body{font-size:12px;}
Esa instrucción CSS hará que el tamaño de fuente del texto en todo el contenido dentro de "body" (o sea, todo el contenido del sitio) sea de 12px (pixeles).
Nota: asegurate de escribir todo bien, si te falta un signo ":" o "{" "}" no te funcionaran los estilos.
Si lo que queremos modificar es un bloque, entonces al nombre del bloque o div le anteponemos un numeral (#), por ejemplo:
#mibloque{ font-size:12px; }
y para que ese estilo funcione, deberemos aplicarlo a un bloque o div dentro del código HTML de nuestra pagina web, de esta forma:
<div id="mibloque">Este es mi primer bloque creado gracias a CCUSW</div>
Ese código hara que todo el texto dentro de ESE bloque tenga un tamaño de fuente de 12px, lo que este fuera de ese bloque no tendra ningun estilo.
Y por ultimo si queremos crear una clase, en lugar de anteponer un numeral o almohadilla (#) pondremos un punto (.), así:
.miclase{font-family: arial}
y desde el código HTML la llamaremos así:
<span class="miclase">Esta es mi primer clase creada gracias a CCUSW</span>
o también así:
<div class="miclase">Mi primer clase otra vez</div>
Entonces todo lo que este dentro de esas etiquetas la veremos con la fuente "Arial".
Nota: La diferencia entre una clase (.) y un bloque (#) es que el bloque es único e irrepetible en la pagina, es decir, si creamos un estilo de bloque "#busqueda" para mostrar el cuadro de búsqueda no podremos usarlo otra vez en la misma pagina, en cambio si a "#busqueda" lo convertimos en una clase ".busqueda" podremos usarlo cuantas veces queramos.
Poner fondo con estilos CSS
En esta lección a poner un color o una imagen de fondo con CSS a nuestra pagina web.
Poner un color de fondo con CSS
Para poner un color de fondo con CSS utilizaremos background-color, esta propiedad acepta los siguiente atributos:
Código hexadecimal: así #000000 este sería el color negro.
Nombre: podemos elegir el nombre, aunque no funciona con todos los colores y siempre tendremos que especificarlo en inglés, alguno de ellos son; gray, green, red, etc.
Para este ejemplo usaremos el nombre del color, pero antes tenemos que abrir el archivo estilos.css (que creamos en la lección de hojas de estilos CSS) y escribir esto:
body{background-color:gray}
luego lo guardamos y abrimos el archivo index.html (que venimos haciendo a lo largo del curso), se tendría que ver así (primero asegurate de haber relacionado la hoja de estilos con el archivo HTML):
Vemos que aplicandole el estilo a la etiqueta <body> funciono perfectamente, se puede ver en la imagen.
Poner imagen de fondo con CSS
Ahora si queremos poner una imagen de fondo que se repita (un patrón), lo haremos con el atributo background así:
body{ background: url(ruta/imagen.jpg); }
En este sitio he utilizado esta imagen:
Es una imagen muy chica, pero se repetirá de arriba a abajo y quedará así:
Si nuestra intención es que no se repita, el código sería así:
body{background: url(imagen.jpg) no-repeat;}
Si queremos que repita horizontalmente, sería así:
body{background: url(imagen.jpg) repeat-x;}
Y si queremos que se repita verticalmente, lo hacemos así:
body{background: url(imagen.jpg) repeat-y;}
Bien, ya hemos aprendido a colocar fondos con CSS y nuestra pagina web empieza a tomar forma, vamos a la siguiente lección.
Centrar contenido con CSS
En esta lección aprenderemos a centrar contenido con CSS, primero crearemos una clase y luego la llamaremos desde el código HTML de nuestra pagina web.
Vamos a suponer que vienes siguiendo el curso desde el principio, o por lo menos, desde la lección de estilos CSS donde vemos que es una clase y como crearlas.
La clase que crearemos para centrar texto se llamará "centrar-texto" y contendrá el atributo "text-align" con el valor "center" de esta forma:
.centrar-texto{ text-align:center; }
y la usaremos desde el código HTML así:
<span class="centrar-texto">Este es el texto que irá centrado</span>
este código se verá así:
uestro archivo estilos.css va quedando así:
En rojo vemos la clase que creamos.
Margen y padding con estilos CSS
¿Que es el margen? ¿Y el padding? ¿Para que sirven? En esta lección responderemos todas estas preguntas y veremos ejemplos prácticos.
Margin o margen CSS
¿Para que sirve? margin sirve para establecer la separacion entre dos elementos, aunque parezca complicado de entender, no lo es . Supongamos que tenemos una imagen y pegado un bloque con texto dentro, bien, usando la propiedad margin podremos separar esos dos elementos, ¿asi esta mejor eh?.
Se utiliza así:
.clase{ margin: 10px ;}
Haciendo eso separaremos 10px la imagen del texto, ojo que estamos separando 10px de arriba, derecha, abajo e izquierda, si queremos separar 10px solo de la izquierda, hacemos esto:
.clase{ margin: 10px 0px 0px 0px}
Como vemos, podemos aplicar margenes por orientación, los valores se aplican siguiendo el sentido de las agujas del reloj, es decir:
.clase{margin: arriba derecha abajo izquierda;}
o también podemos hacerlo así:
.clase{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
Claro que no hace falta especificar todas las orientaciones, solo basta con poner la que queremos especificar.
Nota: siempre debes poner la unidad luego del valor, es decir, si quieres un margen de 10 píxeles debes asegurarte de poner "px" luego del 10, de esta forma: margin:10px;
Padding CSS
El padding a primera vista es igual al margin, incluso en determinadas ocaciones podremos usar las dos y conseguiremos el mismo resultado visual, la diferencia esta en que padding no separa dos elementos, mas bien crea un espacio dentro uno de ellos, por ejemplo, si tenemos un bloque con texto dentro y una imagen al lado bien pegada, al aplicarle padding al bloque con texto, los elementos siguen pegados, pero vemos un espacio al igual que si usaramos la propiedad margin, solo que esta vez se creo un espacio dentro del bloque (con margin se hubiera creado el espacio fuera del bloque) con texto dentro.
La forma de aplicarlo es igual que margin, solo que esta vez el nombre será padding:
.clase{ padding: 10px; }
.clase{ padding: 10px 0px 0px 0px; }
.clase{ padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
}
Como vemos, su uso es idéntico a margin.
Ahora vamos a aplicar lo que aprendimos en nuestra pagina web, la que venimos creando en el curso, lo que haremos es aplicar un padding a la imagen para que quede centrada igual que el texto, vamos a aplicar un estilo a la etiqueta img desde el archivo estilos.css de esta forma:
img{ padding-left:320px }
esto modificará solo a la etiqueta img:
y la pagina se verá así: