Este post contiene varias imágenes que pueden tardar en cargar dependiendo de la PC en la que se este viendo el post. Recomiendo que esperen un rato hasta que termine de cargar.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Hola a todos, soy neojuanma y hoy les traigo la 3º parte del curso de HTML que habíamos comenzado hace un tiempo atrás.
La última vez nos quedamos con un tutorial de como insertar enlaces e imágenes.
Entonces nos había quedado la página de esta manera
Ahora vamos a hacer uso de los archivos .CSS.
¿Que es un archivo CSS?
Es un archivo que añade más características a una página. Características tales como el color de fondo, el color del texto, la fuente del texto, la opacidad de los cuadros, el tamaño de cada parte de la página, etc.
Además sirve para que cuando se abra la página en otra computadora con otra resolución, el sitio Web se siga viendo bien.
Si nosotros no utilizamos un archivo CSS, cuando alguien con una resolución mayor a la nuestra entra a la pagina, esta se vera desordenada y mezclada, porque nosotros la hicimos en una resolución menor.
¿Como funciona?
Simple, por medio de códigos tales como background-color, text-align, etc.
Bien, lo primero que hacemos es crear un archivo llamado estilo.css o cualquier nombre que ustedes quieran, pero recuerden que yo lo hago con ese nombre.
Para hacer un nuevo archivo vamos a hacer click derecho sobre nuestra carpeta en el workspace, luego a New y finalmente a: Create File:
Entonces nos va a aparecer esto:
Hacemos doble click allí y elegimos un nombre para nuestro archivo CSS, el cual va a ser estilo.css
Una vez hecho esto, damos click en OK y se nos creara nuestro archivo.
Hacemos doble click y se abrirá una nueva ventana que Será visualmente igual a la de index.html pero en esta habrá otro tipo de código.
Lo primero que haremos Serra crear un color de fondo, entonces vamos a elegir un color verde claro.
Para hacer que aparezca el color que nosotros queramos tenemos que escribir la siguiente línea:
body {background-color: color elegido};
Ahora a explicar:
Primero empezamos con la etiqueta: body, eso indica que estamos tomando toda la pagina.
Luego abrimos corchetes y escribimos background-color, lo cual indica que estamos seleccionando un color de fondo para nuestra página Web, entonces elegimos el color y cerramos toda la línea con un punto y coma.
Para nombrar el color, nosotros podemos hacerlo de dos maneras:
Si elegimos un color básico, como rojo, negro, verde, amarillo, etc Nosotros tenemos que poner el color en ingles, por lo cual quedaría:
body {background-color:green};
Pero entonces quedaría un color muy chillón:
Entonces nosotros optamos por la segunda manera, que es introduciendo la ID del color. Seguro alguna vez en photoshop o en algún programa de edición de imágenes habrán visto que un color tiene un número #159753 por ejemplo. Ese numero, es la ID. Entonces, ¿Como hacemos para encontrar el numero correspondiente?
Yo por ejemplo uso photoshop para ver que numero es, pero también hay paginas de Internet en la cual tenemos esa información. Por desgracia no conozco ninguna página de esas. Así que voy a usar photoshop para los códigos.
Ahí tenemos el código del color que utilizaremos, el cual será DDFAE1
Entonces el código nos quedaría:
body {background-color: DDFAE1};
No se olviden de agregar un punto y coma luego de cada línea de código en CSS.
Entonces guardamos el archivo y nos vamos al index.html y damos click a preview para ver como queda nuestra pagina luego de cambiar el fondo, pero... ¡el color de fondo no se ve!
No se preocupen, lo que pasa es que hay que relacionar el archivo .HTML al archivo .CSS.
¿Como hacemos eso?
En nuestro archivo HTML ponemos este código entre <head> y </head>:
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
Entonces ahora guardamos y damos click a preview.
Bien, ahora tenemos un color de fondo, pero para ser sincero, le falta algo a la página, un poco de organización y un lugar en donde se ubique el texto.
Entonces ahora vamos a hacer que el banner se centre, ¿entonces que hacemos?
Vamos a usar divs. ¿Que es esto? Son divisiones que se hacen en el código HTML. Para usarlas usamos el siguiente código:
<div ID="nombre_div" >Contenido de la división </div>
Gracias a esto podemos ir acomodando la página a nuestro gusto.
Entonces vamos a centrar el banner. Para hacerlo buscamos la línea en la cual añadimos la imagen.
Entonces escribimos el código que acabo de explicar, de esta forma quedaría así:
<div ID="banner"><a href="http://tallergamer.foroargentina.net/"><img alt="Imagen para tutorial" src= "imágenes/bannertallergamer.jpg" height="160px" width="700px"/></a></div>
¿Para que nos sirve tener la división?
Para editarla mas fácilmente desde el archivo CSS.
también puede hacerse desde el código HTML, es mas complicado pero a veces solo se puede hacer de esa forma.
Con esto del banner lo que tenemos que hacer es, abrir el archivo HTML y buscar la línea de la división del banner, entonces agregamos lo siguiente:
<div align="center">
de forma que nos quedara así:
si no se puede ver la imagen acá se los dejo escrito :
<div id="banner">
<div align="center"><a href="http://tallergamer.foroargentina.net/"><img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/></a></div>
Bien ahora que tenemos la imagen centrada queda un poco mejor, pero aun se puede ver un recuadro azul alrededor de la imagen, entonces lo que hacemos para sacarlo es lo siguiente:
Abrimos el archivo CSS y escribimos una nueva línea de código:
img {border-style:none; }
por medio de esta sentencia se declara que todas las imágenes de la página, no van a tener borde.
Bien, y ahora que mas podemos hacer?
Vamos a seguir con las divisiones, vamos a hacer que el texto aparezca en una caja de texto y vamos a añadir varios detalles extra.
Entonces para crear la caja de texto creamos una div en la parte del párrafo.
Nos quedaría:
<div ID="texto"><p> Acá estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p></div>
Bien, ahora nos vamos al archivo CSS y escribimos una nueva sentencia:
#texto {height:500px; width: 1000px; background-color:white;}
Con esto lo que hacemos es establecer una división que tenga 1000 px de ancho y 500 de alto. Y además le agregamos un fondo de color blanco para que se distinga del resto.
también podemos alinear el texto dentro de esta caja, para eso tenemos que agregar una cosita mas en el código CSS
#texto {height: 500px; width: 1000px; background-color: white; text-align: center; }
entonces ahora tenemos el texto alineado.
Pero que es una página sin titulo, lo que hacemos es escribir un encabezado antes del párrafo que ya teníamos. Escribimos dentro del HTML lo siguiente luego de que establecemos la división "texto":
<h1> Bienvenidos </h1>
Entonces quedaría:
<div ID="texto">
<h1> Bienvenidos </h1>
<p> acá estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p>
</div>
Si damos click en previsualizar quedaría así:
Bien, ahora que tenemos la base de la página creada podemos dejar este tutorial. Voy a traerles el próximo tuto lo más rápido que pueda.
El próximo va a ser:
Tutorial HTML 4: Navegación y secciones.
Si les gusto este post dejen puntos, comenten, agreguen a favoritos, síganme o lo que se les de la gana.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Hola a todos, soy neojuanma y hoy les traigo la 3º parte del curso de HTML que habíamos comenzado hace un tiempo atrás.
La última vez nos quedamos con un tutorial de como insertar enlaces e imágenes.
Entonces nos había quedado la página de esta manera
Ahora vamos a hacer uso de los archivos .CSS.
¿Que es un archivo CSS?
Es un archivo que añade más características a una página. Características tales como el color de fondo, el color del texto, la fuente del texto, la opacidad de los cuadros, el tamaño de cada parte de la página, etc.
Además sirve para que cuando se abra la página en otra computadora con otra resolución, el sitio Web se siga viendo bien.
Si nosotros no utilizamos un archivo CSS, cuando alguien con una resolución mayor a la nuestra entra a la pagina, esta se vera desordenada y mezclada, porque nosotros la hicimos en una resolución menor.
¿Como funciona?
Simple, por medio de códigos tales como background-color, text-align, etc.
Bien, lo primero que hacemos es crear un archivo llamado estilo.css o cualquier nombre que ustedes quieran, pero recuerden que yo lo hago con ese nombre.
Para hacer un nuevo archivo vamos a hacer click derecho sobre nuestra carpeta en el workspace, luego a New y finalmente a: Create File:
Entonces nos va a aparecer esto:
Hacemos doble click allí y elegimos un nombre para nuestro archivo CSS, el cual va a ser estilo.css
Una vez hecho esto, damos click en OK y se nos creara nuestro archivo.
Hacemos doble click y se abrirá una nueva ventana que Será visualmente igual a la de index.html pero en esta habrá otro tipo de código.
Lo primero que haremos Serra crear un color de fondo, entonces vamos a elegir un color verde claro.
Para hacer que aparezca el color que nosotros queramos tenemos que escribir la siguiente línea:
body {background-color: color elegido};
Ahora a explicar:
Primero empezamos con la etiqueta: body, eso indica que estamos tomando toda la pagina.
Luego abrimos corchetes y escribimos background-color, lo cual indica que estamos seleccionando un color de fondo para nuestra página Web, entonces elegimos el color y cerramos toda la línea con un punto y coma.
Para nombrar el color, nosotros podemos hacerlo de dos maneras:
Si elegimos un color básico, como rojo, negro, verde, amarillo, etc Nosotros tenemos que poner el color en ingles, por lo cual quedaría:
body {background-color:green};
Pero entonces quedaría un color muy chillón:
Entonces nosotros optamos por la segunda manera, que es introduciendo la ID del color. Seguro alguna vez en photoshop o en algún programa de edición de imágenes habrán visto que un color tiene un número #159753 por ejemplo. Ese numero, es la ID. Entonces, ¿Como hacemos para encontrar el numero correspondiente?
Yo por ejemplo uso photoshop para ver que numero es, pero también hay paginas de Internet en la cual tenemos esa información. Por desgracia no conozco ninguna página de esas. Así que voy a usar photoshop para los códigos.
Ahí tenemos el código del color que utilizaremos, el cual será DDFAE1
Entonces el código nos quedaría:
body {background-color: DDFAE1};
No se olviden de agregar un punto y coma luego de cada línea de código en CSS.
Entonces guardamos el archivo y nos vamos al index.html y damos click a preview para ver como queda nuestra pagina luego de cambiar el fondo, pero... ¡el color de fondo no se ve!
No se preocupen, lo que pasa es que hay que relacionar el archivo .HTML al archivo .CSS.
¿Como hacemos eso?
En nuestro archivo HTML ponemos este código entre <head> y </head>:
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
Entonces ahora guardamos y damos click a preview.
Bien, ahora tenemos un color de fondo, pero para ser sincero, le falta algo a la página, un poco de organización y un lugar en donde se ubique el texto.
Entonces ahora vamos a hacer que el banner se centre, ¿entonces que hacemos?
Vamos a usar divs. ¿Que es esto? Son divisiones que se hacen en el código HTML. Para usarlas usamos el siguiente código:
<div ID="nombre_div" >Contenido de la división </div>
Gracias a esto podemos ir acomodando la página a nuestro gusto.
Entonces vamos a centrar el banner. Para hacerlo buscamos la línea en la cual añadimos la imagen.
Entonces escribimos el código que acabo de explicar, de esta forma quedaría así:
<div ID="banner"><a href="http://tallergamer.foroargentina.net/"><img alt="Imagen para tutorial" src= "imágenes/bannertallergamer.jpg" height="160px" width="700px"/></a></div>
¿Para que nos sirve tener la división?
Para editarla mas fácilmente desde el archivo CSS.
también puede hacerse desde el código HTML, es mas complicado pero a veces solo se puede hacer de esa forma.
Con esto del banner lo que tenemos que hacer es, abrir el archivo HTML y buscar la línea de la división del banner, entonces agregamos lo siguiente:
<div align="center">
de forma que nos quedara así:
si no se puede ver la imagen acá se los dejo escrito :
<div id="banner">
<div align="center"><a href="http://tallergamer.foroargentina.net/"><img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/></a></div>
Bien ahora que tenemos la imagen centrada queda un poco mejor, pero aun se puede ver un recuadro azul alrededor de la imagen, entonces lo que hacemos para sacarlo es lo siguiente:
Abrimos el archivo CSS y escribimos una nueva línea de código:
img {border-style:none; }
por medio de esta sentencia se declara que todas las imágenes de la página, no van a tener borde.
Bien, y ahora que mas podemos hacer?
Vamos a seguir con las divisiones, vamos a hacer que el texto aparezca en una caja de texto y vamos a añadir varios detalles extra.
Entonces para crear la caja de texto creamos una div en la parte del párrafo.
Nos quedaría:
<div ID="texto"><p> Acá estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p></div>
Bien, ahora nos vamos al archivo CSS y escribimos una nueva sentencia:
#texto {height:500px; width: 1000px; background-color:white;}
Con esto lo que hacemos es establecer una división que tenga 1000 px de ancho y 500 de alto. Y además le agregamos un fondo de color blanco para que se distinga del resto.
también podemos alinear el texto dentro de esta caja, para eso tenemos que agregar una cosita mas en el código CSS
#texto {height: 500px; width: 1000px; background-color: white; text-align: center; }
entonces ahora tenemos el texto alineado.
Pero que es una página sin titulo, lo que hacemos es escribir un encabezado antes del párrafo que ya teníamos. Escribimos dentro del HTML lo siguiente luego de que establecemos la división "texto":
<h1> Bienvenidos </h1>
Entonces quedaría:
<div ID="texto">
<h1> Bienvenidos </h1>
<p> acá estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p>
</div>
Si damos click en previsualizar quedaría así:
Bien, ahora que tenemos la base de la página creada podemos dejar este tutorial. Voy a traerles el próximo tuto lo más rápido que pueda.
El próximo va a ser:
Tutorial HTML 4: Navegación y secciones.
Si les gusto este post dejen puntos, comenten, agreguen a favoritos, síganme o lo que se les de la gana.