Hola!!!!! En realidad me tome mi tiempo para retomar el blog, pero mas vale tarde que nunca...
Hoy arranco con las tablas.... lindo tema.... aburrido diría, pero las tablas se usan, así que voy a hablar de ellas.
Vieron que en otras entradas dije: hay veces que es necesario el lapiz y el papel antes de entrar a hacer el html??? Esta es una muy buena oportunidad de hacerlo, porque necesitan de antemano saber cuantas celdas precisan
El contenido de las tablas se guardan entre <table> y </table>
Para los que saben que es una tabla pero no sepan cuales son sus partes, una pequeña definición:
* celda : cuadradito donde va la información.
* columna: celdas que están de forma vertical (como si fueran las columnas del edificio)
* fila: las celdas que están de forma horizontal (como si contaran hileras de ladrillos)
Partes de una tabla
Las tablas tienen 3 partes:
* Head: es el titulo de las columnas.
* Body: es el cuerpo de la tabla, es lo que lleva debajo de los títulos.
* Foot: es el pie de la tabla.
Esto es simple semántica... se acuerdan que les decía que era mejor poner los textos entre <p> y no hacer saltos de linea con <br>? bueno, esto es lo mismo. No les va a hacer diferencia en nada si les ponen head o body en la página, no se los va a poner negrita si los ponen en el head. Les aviso porque seguramente si hacen una tabla van a pensar que es asi cuando no lo es.
Como dije que era aburrido, las tablas se definen celda a celda comenzando desde la celda superior izquierda. Las columnas se calculan automáticamente según las celdas que hay en cada fila.
Cada fila de nuestra tabla se indican por los tags <tr> y </tr>
Dentro de nuestra fila se indican las celdas con <td> y <th>. La diferencia de estas dos es que <th> se usan para los head (casi siempre) porque pone el texto en negrita. Y mi "casi siempre" es porque si nosotros queremos que la primer fila y la primer columna sean en negrita, para mostrar una tabla de distancias, se pone con th. La primer fila va seguro en el <thead> pero la primer columna forma parte del <tbody> y se puede poner <th> para resaltarla. Ya lo van a ver en el ejemplo que pongo mas abajo.
Titulo de la tabla
Hay dos formas de poner el titulo de la tabla. La mas "facil" es poner antes de la tabla un <p> con el titulo, pero otra vez, semántica no debería ponerse así.
La forma correcta es que luego de abrir el tag <table> se ponga un titulo mediante la tag <caption> que se cierrra con </caption> y es el titulo de esa tabla.
Esta tag puede llevar atributos como por ejemplo: "align". Si ponemos <caption align="top"> Titulo de la tabla</caption> lo que va a hacer es que nuestro titulo va encima de la tabla si ponemos entre comillas "bottom" lo que hace es que nuestro titulo vaya abajo de la tabla. No prueben con "center" porque esto es donde va el titulo, si arriba o abajo de la tabla.
Alineación dentro de las celdas
Los datos dentro de las celdas se alinean de dos maneras:
* De forma horizontal: con el atributo "align" de tres maneras: derecha (right), izquierda (left) y centro (center), por ejemplo <td align="center"> texto </td> y ese texto en esa celda me va a quedar centrado horizontalmente en la celda. Recuerden que son atributos de la tag, por eso se cierra la tag, pero el atributo no tiene un cierre.
* De forma vertical: se pone el atributo "valign" y puede ser arriba (top), medio (middle) o abajo (bottom). Un ejemplo puede ser <td valign="top"> texto </td> y ese texto me va a quedar a la derecha horizontalmente pero arriba verticalmente.
Celdas extendidas
Las celdas extendidas es cuando quiero que en una columna, los datos de una de las celdas abarquen dos filas o que los datos de una fila abarquen dos columnas.
Ejemplo: quiero que una celda de la columna sea nombre completo y que contenga dos columnas abajo que sean: nombre y apellido.
En este caso se aplica el atributo "colspan", porque quiero que "nombre completo" abarque 2 columnas. Se pone <th colspan="2">nombre completo</th>. Esto esta en el ejemplo, así que no se preocupen si no lo entienden como lo estoy poniendo en el texto. Basicamente se delimita con un numero dentro de las comillas a la cantidad de columnas que quiero que abarque esa celda, como son dos columnas, van a ser 2.
Se define que nombre completo es una celda que abarca dos columnas, luego tienen que seguir con la tabla como venian haciendolo
Si el ejemplo seria que quiero que una fila contenga dos filas se pone el atributo rowspan, de la misma manera que colspan.
Y como me acuerdo que es fila o que es columna??? Sencillo... col es columna, row es fila, le agregan el span (con n) y tienen el atributo.
Al principio creanme es un rompe cocos como hacer que la tabla haga lo que tenemos en la cabeza, ya van a ver mi ejemplo y estuve un rato en hacerlo para que me respetara esto del colspan y rowspan, pero con practica y tratando de hacer sus propias tablas lo van a lograr.
Aspecto de la tabla
Se puede modificar el ancho de los bordes, espaciado entre celdas y el ancho de las celdas. Si a esto le agregamos lo que vimos mas arriba con respecto a la alineación dentro de las celdas en horizontal y vertical, van a tener un lindo conjunto de posibilidades. Todos los atributos que voy a explicar son dentro del tag <table> y se pueden usar todos juntos (lo van a ver en mi ejemplo mas abajo).
1) Ancho de la tabla:
Se determina con el atributo "width". Se especifica el ancho de la tabla en la pagina que estamos creando ya sea en numero de pixeles o porcentaje respecto del explorador.
Ejemplo: <table width="50%"> quiere decir que estoy diciendo que la tabla va a tener el ancho del 50% de lo que la contiene. En mi ejemplo puse la tabla dentro del body, el body es el 100 % asi que mi tabla es la mitad del body. Si le dijeramos al html que el body es su 50%, entonces mi tabla seria un 25% del html. Es un poco confuso, pero traten de hacerse la idea de una caja dentro de una caja dentro de otra caja..... Tengo una caja grande (html), luego otra adentro que es la mitad de esa caja (body) y otra cajita (mi tabla) que es la mitad de esa caja intermedia.
La otra posibilidad es ponerlo en pixeles mediante px. Ejemplo: <table width="50">.
El pixel es la medida de las resoluciones, no son centímetros ni nada por el estilo. Cuando definimos el ancho por los pixeles quiere decir que no importa la resolucion del monitor o cel donde estas mirando la pagina, la tabla va a tener ese ancho si o si.
Les copio una respuesta de Yahoo answers para que vean como es el tema de equivalencias con centímetros pulgadas y pixeles:
No existe una única relación entre los pixeles y los centímetros. Es más, la relación entre ambas (ó entre los pixeles y las pulgadas comunmente abreviado como "dpi") define lo que se llama "Resolución" de la imagen.
Concretamente, si la resolución de tu imagen es de 72 dpi (72 pixeles por pulgada) y la imagen ocupa 1600 pixeles, por una simple regla de 3 llegas a que:
(1600 px) / (72 dpi) = 22,22 pulgadas = 56,44 cm
(1200 px) / (72 dpi) = 16,67 pulgadas = 42,33 cm
Pero si la resolución de tu imagen es de 108 dpi (108 pixeles por pulgada), entonces:
(1600 px) / (108 dpi) = 14,81 pulgadas = 37,63 cm
(1200 px) / (108 dpi) = 11,11 pulgadas = 28,22 cm
Como verás, las cuatro cuentas anteriores te muestran que el tamaño de la imagen variará en función de la resolución de tu imagen aún cuando tengan la misma cantidad de pixeles.
Por lo dicho, si deseas que los 1600 pixeles ocupen 2,5 cm, la resolución de tu imagen debe ser:
2,5 cm = (2,5 cm) / (2,54 cm/pulg) = 0,984 pulg
Resolución = (1600 pixeles) / (0,984 pulg) = 1626 dpi
Entonces: cual es la diferencia en usar % o px? Simple: con % se autoajusta al porcentaje que tiene la ventana, no importa si es un monitor chico o grande con mas o menos pixeles. Con el tema de los pixeles, le decimos que tenga esa medida, no importando donde se ve...... Dependiendo de la necesidad se usa uno u otro, pero lo mas común que se usa es pixeles (aunque no lo puedan creer).
También se pueden usar en <th> y <td> para especificar el ancho de las columnas.
2) Bordes:
Se usa el atributo "border". Da un valor al ancho del borde en pixeles. Se usa <table border="1">, lo que le da 1 px de borde a la tabla. Si se pone <table border="0"> quiere decir que no va a tener bordes.
3) Separación entre celdas
Se usa el atributo "cellspacing". Indica el numero de pixeles que acompañan cada celda. El valor predeterminado es de 2 px. Se usa: <table cellspacing="4"> que quiere decir que el espacio entre celdas es de 4 px.
4) Separación entre el borde y el contenido de la celda
Se usa el atributo "cellpadding". Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1. Se usa: <table cellspadding="4"> que quiere decir que el espacio entre el borde de las celdas y el contenido de la celda es de 4 px.
Y eso es basicamente tablas. Les dejo un ejemplo para que lo copien en un procesador de textos, lo guarden con la extension html y eso les va a dar una idea de como queda la tabla y como queda el código. Para que se entienda mejor el contenido de cada una, yo les recomiendo que modifiquen las diferentes cosas, para experimentar o que hagan una de cero.
<html>
<head>
<title>ejercicio tablas</title>
</head>
<body>
<table width="550" border="15" cellspacing="2" cellpadding="10">
<caption align="top">Tablas y mas tablas</caption>
<thead>
<tr>
<th rowspan="2">head</th>
<th colspan="2"> nombre completo</td>
<th rowspan="2">direccion</td>
<th rowspan="2">telefono</th>
</tr>
<tr>
<th>nombre</th>
<th>apellido</th>
</tr>
<tbody>
<tr>
<th>body</th>
<td>ejemplo 2</td>
<td>ejemplo 3</td>
<td> ejemplo 4</td>
<td>ejemplo 5</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>foot</th>
<td>dato 2</td>
<td>dato 3</td>
<td>dato 4</td>
<td>dato 5</td>
</tr>
</tfoot>
</table>
</body>
</html>
Espero comentarios, o dudas o lo que quieran decirme =D
En la próxima vamos con las imágenes!!!!!!!!!!
sábado, 9 de febrero de 2013
miércoles, 6 de febrero de 2013
Reconquistando el Blog!
Bueno... quizás alguien lo estaba mirando, no lo sé, nunca recibí un comentario, por eso lo había dejado.... creo que al mirar las estadisticas me di cuenta que habían personas que lo estaban mirando... y yo lo dejé....
Sinceramente, no tenia tiempo para seguirlo, empecé una nueva carrera en la Universidad y también trabajo..... pero saben que? voy a seguir con esta labor, porque seguramente a alguien ahí afuera le debe interesar como escribo o lo que puedan aprender.....
Realmente me encantaría que si quieren suscribirse, lo hagan, me dejen sus comentarios, que parte no entendieron de lo que venia explicando...... estoy tratando de aprender más ahora..... asi que voy a seguirlos molestando desde acá, o quizas sea algo que Blogger tenga que ocupar su espacio!
Yo voy a reconquistar este BLOG! (pero no hoy, el deber me llama....) pero mañana voy a seguir con este blog.....
Así que ya saben... dejen comentarios.... a mi me gustaria saber si alguien lo ve, o si no entienden nada de lo que digo o si se perdieron en algun lado.....
A ver, justamente este blog es para mi, que soy una principiante y voy aprendiendo cosas de muchos lados y quiero intentar explicarlo fácil para gente que realmente ve una computadora y la sabe usar pero no está trabajando tooooodos los días programando..... esto es para arrancar.....
Voy a reconquistar el blog...... lo voy a hacer, por mi y por uds.
Lo que hice fue cambiarle el estilo de la plantilla, de a poco voy recuperando.... saben por qué elegí letras chinas? (creo que son chinas, si no son japonesas... mmmmh....no me maten, no se nada ni de chino ni de japonés)..... porque esto es como tratar de aprender un idioma en el cual ni reconocemos las letras (jeje, no se nada ni de chino ni de japonés.... menos reconozco la escritura)
Bueno! mañana me pongo manos a la obra, aunque sea las nociones de tablas.....
Despues de eso..... TRATAR DE CONQUISTAR AL MUNDO! ejem, perdón, vino a mi mente la serie animada "Pinky y Cerebro"... yo soy Pinky seguro... jejejeeje
Vamos de vuelta.... después de eso.... TRATAR DE CONQUISTAR EL HTML! ya, eso =D
Sinceramente, no tenia tiempo para seguirlo, empecé una nueva carrera en la Universidad y también trabajo..... pero saben que? voy a seguir con esta labor, porque seguramente a alguien ahí afuera le debe interesar como escribo o lo que puedan aprender.....
Realmente me encantaría que si quieren suscribirse, lo hagan, me dejen sus comentarios, que parte no entendieron de lo que venia explicando...... estoy tratando de aprender más ahora..... asi que voy a seguirlos molestando desde acá, o quizas sea algo que Blogger tenga que ocupar su espacio!
Yo voy a reconquistar este BLOG! (pero no hoy, el deber me llama....) pero mañana voy a seguir con este blog.....
Así que ya saben... dejen comentarios.... a mi me gustaria saber si alguien lo ve, o si no entienden nada de lo que digo o si se perdieron en algun lado.....
A ver, justamente este blog es para mi, que soy una principiante y voy aprendiendo cosas de muchos lados y quiero intentar explicarlo fácil para gente que realmente ve una computadora y la sabe usar pero no está trabajando tooooodos los días programando..... esto es para arrancar.....
Voy a reconquistar el blog...... lo voy a hacer, por mi y por uds.
Lo que hice fue cambiarle el estilo de la plantilla, de a poco voy recuperando.... saben por qué elegí letras chinas? (creo que son chinas, si no son japonesas... mmmmh....no me maten, no se nada ni de chino ni de japonés)..... porque esto es como tratar de aprender un idioma en el cual ni reconocemos las letras (jeje, no se nada ni de chino ni de japonés.... menos reconozco la escritura)
Bueno! mañana me pongo manos a la obra, aunque sea las nociones de tablas.....
Despues de eso..... TRATAR DE CONQUISTAR AL MUNDO! ejem, perdón, vino a mi mente la serie animada "Pinky y Cerebro"... yo soy Pinky seguro... jejejeeje
Vamos de vuelta.... después de eso.... TRATAR DE CONQUISTAR EL HTML! ya, eso =D
viernes, 9 de septiembre de 2011
Y volvimos.... con estilo !!!
Y acá volvi con esto... vamos a ver un poco del estilo a este código... pero convengamos que es el primer "estilo" que se le da a las líneas de código.... así que no se piensen que esto es definitivo, es el primer pasito apenitas.... ahi vamos.....
Vamos a hablar un poco de Estilos de Carácter: afectan a palabras o caracteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente al texto que lo rodea. En realidad esto es una aproximación al estilo, así no se le da el estilo definitivo, pero sirve para ademas darle mas fuerza a una parte del código.
1.- TIPOS DE ESTILOS
Hay dos tipos de estilo: estilo lógico y estilo físico. Se acuerdan que yo les decía que era mejor para los buscadores? Bueno, los estilos que preferentemente deben usar son los lógicos y no los físicos. Siempre por lo mismo, para mantener una sintaxis correcta del texto. Acuerdense que lo mejor es tener una escritura adecuada para que las bichas nos entiendan.
A.- ESTILO LOGICO
Indican como se va a emplear el texto que realzamos, no el como se va a aplicar el estilo. A ver, esto es darle más importancia a una parte del código, el explorador lo interpreta de esa manera y por eso le cambia el estilo, pero en realidad le estan dando más importancia y solo eso. Para realmente cambiar el estilo, lo vamos a ver más adelante. Vamos con los tags:
* <EM> ... </EM>: los caracteres estaran enfatizados de alguna manera generalmente en CURSIVA
* <STRONG> ... </STRONG> idem pero en NEGRITA
*<CODE> ... </CODE> muestra una FUENTE MONOESPACIADA como Courier
*<SAMP> ... </SAMP> muy similar a Code
*<KDB> ... </KDB> texto que el usuario debe escribir
*<VAR>... </VAR> Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada (les aviso que en google chrome me lo muestra cursiva)
*<DFN>...</DFN> Resalta la palabra que se va a definir. Estamos haciendo una DEFINICION
*<CITE>...</CITE> Esto define CITAS CORTAS
B.- ESTILOS FISICOS
Otra vez, modifican la presentación real del texto pero no realza la importancia del texto. Es lo mismo que pasaba con los tags <br> y <p>. Recordemos que <br> simplemente pone un salto de página y <p> define un párrafo y dijimos que es mejor definir párrafos que poner saltos de página. La explicación de esto es que es mejor un lenguaje formal del código que uno informal.... recuerden que el código puede ser usado por otra persona y no queremos ser los culpables de la calvicie de alguien porque nuestro código es un desastre sin sintaxis.
Vamos con esos tags pero mi recomendación es que no los usen para sus códigos:
*<B>...</B> pone el texto en NEGRITA
*<I>...</I> pone el texto en CURSIVA
*<TT>...</TT> lo pone en FUENTE MONOESPACIADA
*<U>...</U> pone un SUBRAYADO en el texto.
Seguimos un poco más en el tema.... pero esto no esta dentro de los estilos lógicos y físicos.
2.- TEXTO PREFORMATEADO
Cuando ponemos un texto entre <PRE>...</PRE> se pone el texto en una fuente monocursiva (tipo Courier) y además se respetan los caracteres y espacios. Incluso respeta los enter entre líneas.
3.- SALTOS Y LINEAS
*Líneas divisorias: <HR> no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la línea en la página con un atributo. Esto simplemente pasa una línea de lado a lado.
El ejemplo de esto es poner <hr width="80%">. Simplemente pone una línea que va a ocupar un 80% del ancho de la página.
*Salto de línea: <BR> inserta un salto de línea pero lo mejor es que no se use este tag. Lo mejor es separar en párrafos.
Hasta acá "estilos", pero como ya dije, esto es simplemente darle un valor al texto del código no tanto
un estilo en sí. Pero al menos es una aproximación al tema.
El siguiente tema son las tablas..... Nos vemos!
Vamos a hablar un poco de Estilos de Carácter: afectan a palabras o caracteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente al texto que lo rodea. En realidad esto es una aproximación al estilo, así no se le da el estilo definitivo, pero sirve para ademas darle mas fuerza a una parte del código.
1.- TIPOS DE ESTILOS
Hay dos tipos de estilo: estilo lógico y estilo físico. Se acuerdan que yo les decía que era mejor para los buscadores? Bueno, los estilos que preferentemente deben usar son los lógicos y no los físicos. Siempre por lo mismo, para mantener una sintaxis correcta del texto. Acuerdense que lo mejor es tener una escritura adecuada para que las bichas nos entiendan.
A.- ESTILO LOGICO
Indican como se va a emplear el texto que realzamos, no el como se va a aplicar el estilo. A ver, esto es darle más importancia a una parte del código, el explorador lo interpreta de esa manera y por eso le cambia el estilo, pero en realidad le estan dando más importancia y solo eso. Para realmente cambiar el estilo, lo vamos a ver más adelante. Vamos con los tags:
* <EM> ... </EM>: los caracteres estaran enfatizados de alguna manera generalmente en CURSIVA
* <STRONG> ... </STRONG> idem pero en NEGRITA
*<CODE> ... </CODE> muestra una FUENTE MONOESPACIADA como Courier
*<SAMP> ... </SAMP> muy similar a Code
*<KDB> ... </KDB> texto que el usuario debe escribir
*<VAR>... </VAR> Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada (les aviso que en google chrome me lo muestra cursiva)
*<DFN>...</DFN> Resalta la palabra que se va a definir. Estamos haciendo una DEFINICION
*<CITE>...</CITE> Esto define CITAS CORTAS
B.- ESTILOS FISICOS
Otra vez, modifican la presentación real del texto pero no realza la importancia del texto. Es lo mismo que pasaba con los tags <br> y <p>. Recordemos que <br> simplemente pone un salto de página y <p> define un párrafo y dijimos que es mejor definir párrafos que poner saltos de página. La explicación de esto es que es mejor un lenguaje formal del código que uno informal.... recuerden que el código puede ser usado por otra persona y no queremos ser los culpables de la calvicie de alguien porque nuestro código es un desastre sin sintaxis.
Vamos con esos tags pero mi recomendación es que no los usen para sus códigos:
*<B>...</B> pone el texto en NEGRITA
*<I>...</I> pone el texto en CURSIVA
*<TT>...</TT> lo pone en FUENTE MONOESPACIADA
*<U>...</U> pone un SUBRAYADO en el texto.
Seguimos un poco más en el tema.... pero esto no esta dentro de los estilos lógicos y físicos.
2.- TEXTO PREFORMATEADO
Cuando ponemos un texto entre <PRE>...</PRE> se pone el texto en una fuente monocursiva (tipo Courier) y además se respetan los caracteres y espacios. Incluso respeta los enter entre líneas.
3.- SALTOS Y LINEAS
*Líneas divisorias: <HR> no tiene tag de cierre ni lleva texto asociado. Se puede especificar el ancho de la línea en la página con un atributo. Esto simplemente pasa una línea de lado a lado.
El ejemplo de esto es poner <hr width="80%">. Simplemente pone una línea que va a ocupar un 80% del ancho de la página.
*Salto de línea: <BR> inserta un salto de línea pero lo mejor es que no se use este tag. Lo mejor es separar en párrafos.
Hasta acá "estilos", pero como ya dije, esto es simplemente darle un valor al texto del código no tanto
un estilo en sí. Pero al menos es una aproximación al tema.
El siguiente tema son las tablas..... Nos vemos!
lunes, 8 de agosto de 2011
Puesta a punto... Ejercicio 1
Se pide crear el código HTML de la siguiente situación:
Una persona les pide una página de recetas de cocina. El contenido que les proporciona es este:
-------------------------------------------------------------------------
www.recetasdeliciosas.com
Una persona les pide una página de recetas de cocina. El contenido que les proporciona es este:
-------------------------------------------------------------------------
www.recetasdeliciosas.com
Brownies Receta Comun
Ingredientes para 24 brownies de 24 x 24 cm.:
150 g. de mantequilla o margarina,
90 g. de chocolate negro,
300 g. de azúcar,
150 g. de harina,
1 1/2 cucharadita de levadura en polvo,
1 1/2 cucharadita de extracto de vainilla,
150 g. de nueces picadas,
3 huevos.
Preparacion:
1) Precalentar el horno a 180º C.
2) Untar con mantequilla un molde rectangular bajo de 33 x 27 cm. aproximadamente y cubrirlo con papel antigrasa. Untar también el papel y espolvorearlo con harina.
3) En un cazo amplio, derretir la mantequilla y el chocolate a fuego muy lento (o en el microondas a media potencia). Retirar del fuego.
4) Añadir el azúcar, la harina mezclada con la levadura, la vainilla y las nueces. Mezclar e incorporar los huevos. Remover con un batidor de varillas.
5) Poner la mezcla en el molde y meter al horno durante 30 minutos, o hasta que esté subido y ligeramente crujiente al tacto y algo agrietado, pero esponjoso por dentro. Los americanos e ingleses dicen "chewy".
6) Dejar enfriar sobre una rejilla o en el mismo molde y cortar en cuadrados.
Nota: El extracto de vainilla se puede suprimir, aunque le da un toque delicioso.
Ingredientes para 24 brownies de 24 x 24 cm.:
150 g. de mantequilla o margarina,
90 g. de chocolate negro,
300 g. de azúcar,
150 g. de harina,
1 1/2 cucharadita de levadura en polvo,
1 1/2 cucharadita de extracto de vainilla,
150 g. de nueces picadas,
3 huevos.
Preparacion:
1) Precalentar el horno a 180º C.
2) Untar con mantequilla un molde rectangular bajo de 33 x 27 cm. aproximadamente y cubrirlo con papel antigrasa. Untar también el papel y espolvorearlo con harina.
3) En un cazo amplio, derretir la mantequilla y el chocolate a fuego muy lento (o en el microondas a media potencia). Retirar del fuego.
4) Añadir el azúcar, la harina mezclada con la levadura, la vainilla y las nueces. Mezclar e incorporar los huevos. Remover con un batidor de varillas.
5) Poner la mezcla en el molde y meter al horno durante 30 minutos, o hasta que esté subido y ligeramente crujiente al tacto y algo agrietado, pero esponjoso por dentro. Los americanos e ingleses dicen "chewy".
6) Dejar enfriar sobre una rejilla o en el mismo molde y cortar en cuadrados.
Nota: El extracto de vainilla se puede suprimir, aunque le da un toque delicioso.
------------------------------------------------------------------------------
Quiere que los ingredientes tengan una viñeta en cada uno, un link a la pagina principal (que le llamaremos principal), un link a Google y un link para ir a ingredientes. Uds., como programadores, incluyen un comentario antes de los ingredientes recordando que deben incluir una imagen de brownies para la próxima revisión.
Recuerden guardar este html, porque el próximo ejercicio va sobre este!!!!
P.D. Esta es una receta real, así que si después quieren desestresarse en la cocina y comer unos deliciosos brownies, pueden hacerlo =D
P.D. Esta es una receta real, así que si después quieren desestresarse en la cocina y comer unos deliciosos brownies, pueden hacerlo =D
Enlistemos..... a las listas !!!
En HTML tenemos 5 tipos de listas, a saber:
1- LISTAS NUMERADAS
Las tag de apertura y de cierre son <ol> y </ol>.
Dentro de esta tag, cada elemento de la lista va encabezado por la tag <li> de apertura y </li> de cierre. Es conveniente (para que cuando otra persona lo vea y no se arranque los pelos tratando de saber que hicieron) poner cada elemento en una línea nueva.
Con esta tag <ol> el explorador sangra y numera cada elemento de forma secuencial (1, 2, 3...) y si modifican o introducen un elemento nuevo dentro de la lista, se van a modificar automáticamente los números. Ejemplo de código:
<ol>
<li>un cerdito</li>
<li>dos vacas</li>
<li>tres gallinas</li>
</ol>
2-LISTA CON VIÑETAS
Van con las tags <ul> de apertura y </ul> de cierre.
Igual que el anterior, los elementos deben ir entre las tags <li> y </li>.
El explorador va a sangrar el contenido y ponerle una viñeta a cada elemento. Como en el anterior, si introducen una modificación, se van a correr automáticamente y agregará una viñeta al nuevo elemento. Ejemplo:
<ul>
<li>harina</li>
<li>huevos</li>
<li>azucar</li>
</ul>
3-LISTAS DE MENU Y DE DIRECTORIO
Esta en desuso porque el resultado es como la lista de viñetas.
Menu: la tag es <menu> de apertura y </menu> de cierre.
Directorio: la tag de apertura es <dir> y de cierre </dir>.
Ambos, como en las anteriores listas, los elementos van precedidos por la tag <li> de apertura y </li> de cierre.
4-LISTAS DE GLOSARIO
Cada elemento de esta lista está compuesto por un término y una definición y cada parte tiene su propio tag. Se engloban en la tag <dl> de apertura y </dl> de cierre.
Para el término se usa la tag <dt> para la apertura y </dt> para el cierre. Para la definición de ese término usaremos la tag <dl> de apertura y </dl> de cierre.
Generalmente el navegador colocará <dd> y <dl> en dos líneas diferentes, con un sangrado en la definición del término.
Una lista de glosario sería:
<dl>
<dt>Término 1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
</dl>
5-LISTAS ANIDADAS
Consiste en poner una lista dentro de otra y la segunda lista va a estar sangrada con respecto a la primera. Las tags de la principal engloban todo el conjunto. Basicamente es poner una lista dentro de otra.
Un ejemplo de esto sería así:
<ul>
<li>Uno
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Hasta acá lo que vendría a ser listas... en la próxima.... PUESTA A PUNTO Y APLICACIÓN DE LO APRENDIDO!!!!
1- LISTAS NUMERADAS
Las tag de apertura y de cierre son <ol> y </ol>.
Dentro de esta tag, cada elemento de la lista va encabezado por la tag <li> de apertura y </li> de cierre. Es conveniente (para que cuando otra persona lo vea y no se arranque los pelos tratando de saber que hicieron) poner cada elemento en una línea nueva.
Con esta tag <ol> el explorador sangra y numera cada elemento de forma secuencial (1, 2, 3...) y si modifican o introducen un elemento nuevo dentro de la lista, se van a modificar automáticamente los números. Ejemplo de código:
<ol>
<li>un cerdito</li>
<li>dos vacas</li>
<li>tres gallinas</li>
</ol>
2-LISTA CON VIÑETAS
Van con las tags <ul> de apertura y </ul> de cierre.
Igual que el anterior, los elementos deben ir entre las tags <li> y </li>.
El explorador va a sangrar el contenido y ponerle una viñeta a cada elemento. Como en el anterior, si introducen una modificación, se van a correr automáticamente y agregará una viñeta al nuevo elemento. Ejemplo:
<ul>
<li>harina</li>
<li>huevos</li>
<li>azucar</li>
</ul>
3-LISTAS DE MENU Y DE DIRECTORIO
Esta en desuso porque el resultado es como la lista de viñetas.
Menu: la tag es <menu> de apertura y </menu> de cierre.
Directorio: la tag de apertura es <dir> y de cierre </dir>.
Ambos, como en las anteriores listas, los elementos van precedidos por la tag <li> de apertura y </li> de cierre.
4-LISTAS DE GLOSARIO
Cada elemento de esta lista está compuesto por un término y una definición y cada parte tiene su propio tag. Se engloban en la tag <dl> de apertura y </dl> de cierre.
Para el término se usa la tag <dt> para la apertura y </dt> para el cierre. Para la definición de ese término usaremos la tag <dl> de apertura y </dl> de cierre.
Generalmente el navegador colocará <dd> y <dl> en dos líneas diferentes, con un sangrado en la definición del término.
Una lista de glosario sería:
<dl>
<dt>Término 1</dt>
<dd>Definición 1</dd>
<dt>Término 2</dt>
<dd>Definición 2</dd>
</dl>
5-LISTAS ANIDADAS
Consiste en poner una lista dentro de otra y la segunda lista va a estar sangrada con respecto a la primera. Las tags de la principal engloban todo el conjunto. Basicamente es poner una lista dentro de otra.
Un ejemplo de esto sería así:
<ul>
<li>Uno
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Hasta acá lo que vendría a ser listas... en la próxima.... PUESTA A PUNTO Y APLICACIÓN DE LO APRENDIDO!!!!
Enlaces !!!
Para generar un enlace a otro documento necesitamos el nombre de un archivo (o dirección URL) y el texto que sirve como punto de activacion del otro documento. Son lo que le decimos link, ya sea para pasar a la pagina siguiente o dirigirnos a otra página web diferente.
Viene del inglés Anchor o ancla, por tanto los enlaces se generan mediante la tag <a> y la tag de cierre va a ser </a> y llevará SIEMPRE un atributo. Los dos atributos mas conocidos son href y name.
1- HREF
La tag se redacta así: <a href="URL> ..... </a>
Es la más habitual y sirve para saltar entre diferentes URLs. Los dos ejemplos más comunes son saltar a la siguiente página de nuestra web o saltar a una página web totalmente diferente.
* Saltar del archivo 1 al archivo 2
En el archivo 1 incluiremos la tag: <a href="archivo 2.html">Siguiente página</a>
En nuestra página web se va a ver solamente lo que esta en el medio de las tags de apertura y cierre. En este ejemplo es "Siguiente página".
* Saltar a otra página web diferente
Supongamos que queremos poner una referencia a Google en nuestra página.
Debemos tipear en el html: <a href="http://www.google.com">Visita esta página</a>
Lo que va a mostrar el explorador es "Visita esta página" y cuando le demos click encima del link, nos llevará a Google. SIEMPRE pongan la URL completa, sino les va a tirar que no encuentra la página!!!
2- NAME
Esto me pareció mas complicado de entender que el href, pero nada es imposible.
Un ejemplo de este tag y su aplicación puede ser las páginas de preguntas frecuentes: arriba tienen enumeradas las preguntas y abajo esta la pregunta con la respuesta. La mayoria de las veces cuando vamos a la lista de preguntas que está arriba y hacemos click en el link, nos muestra en que parte de la página está esa pregunta y nos muestra directamente esa parte de la página. Esto se logra con un "a name" y un "a href" a esa parte.... les explico como:
Imaginense que tienen una página muy larga en contenido, por ejemplo una página de preguntas frecuentes de su empresa y quieren ir rápidamente al inicio.
En el inicio se pone <a name="inicio"> puede no tener nada en el medio y como siempre, el tag de cierre </a>. Que es lo que estoy haciendo? Diciendole a la compu que esta parte de la página se llama inicio y nada mas que eso. Esta referencia no se va a mostrar en el explorador cuando abran nuestra página.
Luego, al final de la página tipeamos una referencia (y esta sí se muestra en el explorador). Vamos a tipear: <a href="#inicio">Ir al inicio</a>.
Se pone la referencia con un # para que se de cuenta que es a lo que denominamos dentro del <a name>.
Les doy un ejemplo muy "chancho" de codigo que pueden copiar para ver como funciona esto. En mi ejemplo, puse una tag dentro de otra (se puedeeeeeee!!!) en la tag de name quise poner que la referencia sea un título, pero puedo no poner nada, como hice en la referencia de ir abajo.
<html>
<head>
<title>Ejemplo del tag A</title>
</head>
<body>
<a name="inicio"><h1>Quiero que mi tag de referencia venga aca!</h1></a>
<p>Les pongo un link para ir abajo en la página:</p>
<a href="#abajo">ir abajo</a>
<p> hola hola que tal, todo bien? Voy a poner muchos saltos de página de los que no me gusta usar para que noten en su explorador mi ejemplo</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p> Acá voy a hacer una referencia para que vayan a Google, si dan click, les va a abrir la ventana de Google, recuerden poner toda la URL para que vaya a la página externa!</p>
<a href="http://www.google.com">Ir a Google</a>
<p> Y acá abajo esta mi referencia del inicio</p>
<a href="#inicio">Ir a inicio</a>
<a name="abajo"></a>
<!--Vieron que no puse nada para decir que esto era abajo?-->
</body>
</html>
Por favor! si no entienden algo, manden sus comentarios!
Viene del inglés Anchor o ancla, por tanto los enlaces se generan mediante la tag <a> y la tag de cierre va a ser </a> y llevará SIEMPRE un atributo. Los dos atributos mas conocidos son href y name.
1- HREF
La tag se redacta así: <a href="URL> ..... </a>
Es la más habitual y sirve para saltar entre diferentes URLs. Los dos ejemplos más comunes son saltar a la siguiente página de nuestra web o saltar a una página web totalmente diferente.
* Saltar del archivo 1 al archivo 2
En el archivo 1 incluiremos la tag: <a href="archivo 2.html">Siguiente página</a>
En nuestra página web se va a ver solamente lo que esta en el medio de las tags de apertura y cierre. En este ejemplo es "Siguiente página".
* Saltar a otra página web diferente
Supongamos que queremos poner una referencia a Google en nuestra página.
Debemos tipear en el html: <a href="http://www.google.com">Visita esta página</a>
Lo que va a mostrar el explorador es "Visita esta página" y cuando le demos click encima del link, nos llevará a Google. SIEMPRE pongan la URL completa, sino les va a tirar que no encuentra la página!!!
2- NAME
Esto me pareció mas complicado de entender que el href, pero nada es imposible.
Un ejemplo de este tag y su aplicación puede ser las páginas de preguntas frecuentes: arriba tienen enumeradas las preguntas y abajo esta la pregunta con la respuesta. La mayoria de las veces cuando vamos a la lista de preguntas que está arriba y hacemos click en el link, nos muestra en que parte de la página está esa pregunta y nos muestra directamente esa parte de la página. Esto se logra con un "a name" y un "a href" a esa parte.... les explico como:
Imaginense que tienen una página muy larga en contenido, por ejemplo una página de preguntas frecuentes de su empresa y quieren ir rápidamente al inicio.
En el inicio se pone <a name="inicio"> puede no tener nada en el medio y como siempre, el tag de cierre </a>. Que es lo que estoy haciendo? Diciendole a la compu que esta parte de la página se llama inicio y nada mas que eso. Esta referencia no se va a mostrar en el explorador cuando abran nuestra página.
Luego, al final de la página tipeamos una referencia (y esta sí se muestra en el explorador). Vamos a tipear: <a href="#inicio">Ir al inicio</a>.
Se pone la referencia con un # para que se de cuenta que es a lo que denominamos dentro del <a name>.
Les doy un ejemplo muy "chancho" de codigo que pueden copiar para ver como funciona esto. En mi ejemplo, puse una tag dentro de otra (se puedeeeeeee!!!) en la tag de name quise poner que la referencia sea un título, pero puedo no poner nada, como hice en la referencia de ir abajo.
<html>
<head>
<title>Ejemplo del tag A</title>
</head>
<body>
<a name="inicio"><h1>Quiero que mi tag de referencia venga aca!</h1></a>
<p>Les pongo un link para ir abajo en la página:</p>
<a href="#abajo">ir abajo</a>
<p> hola hola que tal, todo bien? Voy a poner muchos saltos de página de los que no me gusta usar para que noten en su explorador mi ejemplo</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p> Acá voy a hacer una referencia para que vayan a Google, si dan click, les va a abrir la ventana de Google, recuerden poner toda la URL para que vaya a la página externa!</p>
<a href="http://www.google.com">Ir a Google</a>
<p> Y acá abajo esta mi referencia del inicio</p>
<a href="#inicio">Ir a inicio</a>
<a name="abajo"></a>
<!--Vieron que no puse nada para decir que esto era abajo?-->
</body>
</html>
Por favor! si no entienden algo, manden sus comentarios!
jueves, 4 de agosto de 2011
URLs
URL traducido del inglés es Localizador Universal de Recursos. Son las direcciones de las informaciones que buscamos en internet.
Constan de tres partes:
* Protocolo: es el programa que utilizará el navegador para tener el archivo elegido (ej: HTTP, FTP, etc.)
* Nombre del Host: se trata del sistema donde se encuentra almacenada la información que buscamos
* Ruta del fichero: es la ubicación del archivo dentro del host.
Como ejemplo de las tres partes, una URL quedaría así:
http://www.blogger.com/post.html
TIPOS DE URL
HTTP: En inglés es Hypertext Transfer Protocol. Es utilizado por los servidores www para mandar documentos a través de internet. Cuando es HTTPS quiere decir que es un protocolo seguro de internet, se utiliza para transacciones de e-commerce.
FTP: En inglés es File Transfer Protocol. Utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de Internet. Se almacenan los archivos que forman parte de nuestra presentación web.
FILE: Apunta a archivos contenidos en el mismo disco donde se encuentra el navegador. Son nuestros archivos en nuestro disco y solo se podrán ver en nuestra computadora. No son convenientes porque si desde otro sistema se apunta a ese URL, seguramente fallará.
MAILTO: Se usa para mandar mail. Se abrirá la aplicación de e-mail predeterminada para enviar un mail a donde apunta la URL.
NEWS: Son URL de grupo de noticias. Son las denominadas RSS: RDF Site Summary o Really Simple Syndication. En estos servidores se almacenan mensajes en los que se discuten sobre diferentes temas.
En la próxima vemos creación de enlaces
Constan de tres partes:
* Protocolo: es el programa que utilizará el navegador para tener el archivo elegido (ej: HTTP, FTP, etc.)
* Nombre del Host: se trata del sistema donde se encuentra almacenada la información que buscamos
* Ruta del fichero: es la ubicación del archivo dentro del host.
Como ejemplo de las tres partes, una URL quedaría así:
http://www.blogger.com/post.html
TIPOS DE URL
HTTP: En inglés es Hypertext Transfer Protocol. Es utilizado por los servidores www para mandar documentos a través de internet. Cuando es HTTPS quiere decir que es un protocolo seguro de internet, se utiliza para transacciones de e-commerce.
FTP: En inglés es File Transfer Protocol. Utilizado para enviar y recibir ficheros. Es el protocolo que se usa para enviar nuestras páginas al servidor de Internet. Se almacenan los archivos que forman parte de nuestra presentación web.
FILE: Apunta a archivos contenidos en el mismo disco donde se encuentra el navegador. Son nuestros archivos en nuestro disco y solo se podrán ver en nuestra computadora. No son convenientes porque si desde otro sistema se apunta a ese URL, seguramente fallará.
MAILTO: Se usa para mandar mail. Se abrirá la aplicación de e-mail predeterminada para enviar un mail a donde apunta la URL.
NEWS: Son URL de grupo de noticias. Son las denominadas RSS: RDF Site Summary o Really Simple Syndication. En estos servidores se almacenan mensajes en los que se discuten sobre diferentes temas.
En la próxima vemos creación de enlaces
miércoles, 3 de agosto de 2011
"Shake" the "Body" !!!
Dejemos el Head de lado.... ya dijimos que es un tema de muy pocos tags y el importante es el Title.
Ahora.... SHAKE THE BODY, BABY!
Básicamente el Body es donde va el contenido... es la gran hoja donde creamos toda la página web.
Les voy a explicar todos los tags, los que se usan y los que no deberían usarse. A ver, no es que "no deberían" como diciendo "que chanchada! desprolijo! asqueroso!".
Simplemente el tema es que tenemos que pensar en función de los buscadores y éstos se fijan en el código de HTML para ordenar la importancia de ciertas cosas en el documento. Dada la importancia que le da el programador en el código a cierto contenido es que Google arma su lista de búsquedas encontradas.
También lo explico porque se van a encontrar en la web muchos códigos hechos con estos tags. Básicamente está bueno el "saber por saber" en esto para no estar perdido en la vida y tener una visión lo más amplia posible....
En esta entrada vamos a ver tags que describen la estructura general de un documento y dan una información sencilla sobre él. Sirve para filtrar los archivos HTML en los buscadores. Vamos a ver 4:
* Titulares
Estos son los títulos que hay en cualquier página. Es diferente del <title> del head porque no es lo que se muestra en la barra del explorador, sino que es lo que se va a mostrar en el documento. Se representa con la tag <h1> (por las dudas que no quede claro, H uno). Hay hasta 6 niveles de titulares... desde h1 a h6. Tiene tag de apertura: <h1> y tag de cierre: </h1>
El explorador diferencia en tamaño un h1 de un h2 por ejemplo, sin perjuicio que después uno le aplique el estilo que uno quiera.
* Párrafo
Sirve para hacer una diferenciación de párrafos. Tiene tag de apertura <p> y de cierre </p>. Básicamente encierra texto. No le da formato.
* Salto de línea
Esto es como dar un enter en el documento. Esta es de esas tags no apropiadas. Por qué? Si uno encierra el documento entre <p>, para qué uno quiere dar un enter? Quizás para espaciar entre una cosa y otra, pero esto es de estilo y no de código. Lo van a ver muy seguido porque es una tag corta: no tiene un tag de apertura, se pone el tag <br> al final de la oración donde se quiere dar un enter y ya está.
* Comentarios
Son directivas que nunca se van a mostrar en el explorador de quien mire la página web de ese código pero sirven como recordatorios de las futuras revisiones para los programadores. La tag es <!--Aqui va el comentario-->. No tiene tag de cierre.
Ejemplo de código con estas tags nuevas:
<html>
<head>
<title>Ejemplo 1</title>
</head>
<body>
<h1>Mi primera pagina web</h1>
<h2>Este titulo es mas chico que el h1</h2>
<!--Pero seguramente no va a ser la última página que haga, jaja-->
<p>Párrafo y varios saltos de página</p>
<p>Van a ver que igual se hace un salto de página aunque este todo pegado</p>
Uno<br>
Dos<br>
</body>
</html>
Como siempre, armense un archivo html para ver como queda este código y abranlo en el explorador. El head les aparece arriba, en la barra del explorador, el comentario no aparece como contenido de la página, el <p> y <br> tienen la misma función y el h1 respecto al h2 es mas grande, pero como ya dije, es como consecuencia de la interpretación del explorador del código que escribimos. Se puede dar después cualquier formato que queramos. Lo que sí para el buscador a la hora de mostrar las búsquedas encontradas, el h1 va a tener mas peso que el h2.
En la próxima vemos las URL....
Ahora.... SHAKE THE BODY, BABY!
Básicamente el Body es donde va el contenido... es la gran hoja donde creamos toda la página web.
Les voy a explicar todos los tags, los que se usan y los que no deberían usarse. A ver, no es que "no deberían" como diciendo "que chanchada! desprolijo! asqueroso!".
Simplemente el tema es que tenemos que pensar en función de los buscadores y éstos se fijan en el código de HTML para ordenar la importancia de ciertas cosas en el documento. Dada la importancia que le da el programador en el código a cierto contenido es que Google arma su lista de búsquedas encontradas.
También lo explico porque se van a encontrar en la web muchos códigos hechos con estos tags. Básicamente está bueno el "saber por saber" en esto para no estar perdido en la vida y tener una visión lo más amplia posible....
En esta entrada vamos a ver tags que describen la estructura general de un documento y dan una información sencilla sobre él. Sirve para filtrar los archivos HTML en los buscadores. Vamos a ver 4:
* Titulares
Estos son los títulos que hay en cualquier página. Es diferente del <title> del head porque no es lo que se muestra en la barra del explorador, sino que es lo que se va a mostrar en el documento. Se representa con la tag <h1> (por las dudas que no quede claro, H uno). Hay hasta 6 niveles de titulares... desde h1 a h6. Tiene tag de apertura: <h1> y tag de cierre: </h1>
El explorador diferencia en tamaño un h1 de un h2 por ejemplo, sin perjuicio que después uno le aplique el estilo que uno quiera.
* Párrafo
Sirve para hacer una diferenciación de párrafos. Tiene tag de apertura <p> y de cierre </p>. Básicamente encierra texto. No le da formato.
* Salto de línea
Esto es como dar un enter en el documento. Esta es de esas tags no apropiadas. Por qué? Si uno encierra el documento entre <p>, para qué uno quiere dar un enter? Quizás para espaciar entre una cosa y otra, pero esto es de estilo y no de código. Lo van a ver muy seguido porque es una tag corta: no tiene un tag de apertura, se pone el tag <br> al final de la oración donde se quiere dar un enter y ya está.
* Comentarios
Son directivas que nunca se van a mostrar en el explorador de quien mire la página web de ese código pero sirven como recordatorios de las futuras revisiones para los programadores. La tag es <!--Aqui va el comentario-->. No tiene tag de cierre.
Ejemplo de código con estas tags nuevas:
<html>
<head>
<title>Ejemplo 1</title>
</head>
<body>
<h1>Mi primera pagina web</h1>
<h2>Este titulo es mas chico que el h1</h2>
<!--Pero seguramente no va a ser la última página que haga, jaja-->
<p>Párrafo y varios saltos de página</p>
<p>Van a ver que igual se hace un salto de página aunque este todo pegado</p>
Uno<br>
Dos<br>
</body>
</html>
Como siempre, armense un archivo html para ver como queda este código y abranlo en el explorador. El head les aparece arriba, en la barra del explorador, el comentario no aparece como contenido de la página, el <p> y <br> tienen la misma función y el h1 respecto al h2 es mas grande, pero como ya dije, es como consecuencia de la interpretación del explorador del código que escribimos. Se puede dar después cualquier formato que queramos. Lo que sí para el buscador a la hora de mostrar las búsquedas encontradas, el h1 va a tener mas peso que el h2.
En la próxima vemos las URL....
martes, 2 de agosto de 2011
Estructura del HTML
El hombre arrancó pintando en las cavernas, después los egipcios tenían papiros...y muuuuchos pero muuuuuchos años después nosotros empezamos a expresarnos con un papel y un lápiz (aunque a veces era con una pared y un lápiz…. ¿quizás algo que viene en los genes desde las épocas cavernícolas?). Luego vinieron las computadoras y bueno, acá estamos tratando de entenderlas.... pero lo bueno es: lo que se hace en la computadora en realidad puede empezarse en un papel y con un lápiz. Y créanme.... van a agarrar un block de anotaciones más de una vez....
Para hacer una página web tienen que visualizar lo que quieren hacer. Cuales son los titulos, el contenido, las imagenes, donde van a ir, etc.
Imaginense que un HTML es como cuando hacíamos una redacción en la primaria:
Teníamos un titulo y luego desarrollábamos un contenido con párrafos, figuritas pegadas, titulos intermedios subrayados, etc.
Acá es lo mismo, la estructura es partiendo de lo general a lo particular.
Lo general es: 1) título y 2) cuerpo.
1) Título:
Es como si fuera el titulo de nuestra hoja. En HTML es lo que aparece en la primera barra del explorador. Es el nombre de la página, que aparece al lado del nombre del explorador.
En HTML esto se llama "Head". Dentro del Head son pocos los tags que se pueden poner. Este Head es lo que contiene el "Title" (o título).
El Title es lo que usa el marcador del navegador e identifica el contenido de la página. Sólo puede haber un título por documento. Lo preferible es que sea corto pero significativo!
Aqui no se coloca nada del contenido de la página en sí. Por ahora es todo lo que vamos a decir del Head, a partir de ahora lo que vamos a desarrollar es todo lo que se puede hacer en el Cuerpo.
2) Cuerpo
Esto es en sí lo que escribimos, donde ponemos los títulos, los parrafos, las imágenes, etc. En HTML se le llama Body ("Cuerpo" en inglés) y obviamente que lleva muchas tags, todas las que queramos.
Ejemplo: Arranquemos a hacer un poco de código. Empezamos siempre diciendo el lenguaje que estamos escribiendo, luego el head y luego el body. Acuerdense de que siempre una tag que se abre se debe cerrar. Si uno hace tabulaciones de 4 espacios (bueno, de cuantos quieran, el 4 es heredado de Python y no es mio, pero me parece a mi una medida justa) no es necesario poner enter entre cada línea de código, pero es a gusto del consumidor, si les parece que está apretado, pongan enter entre líneas. La <p> que se van a encontrar en el body es simplemente la tag de párrafo, pero no se preocupen, se explica en la próxima entrada..... Dicho esto quedaria así:
<html>
<head>
<title>mi pagina web</title>
</head>
<body>
<p>hola que tal</p>
</body>
</html>
Para ver como queda, hagan un archivo html y copien este código.
Y veamos ahora muuuchas cosas mas del Body......
Archivo de HTML
Empecemos por tener un archivo donde crear el código.... yo esto no lo supe hasta que me lo enseñaron, así que mejor se los explico....
Hablo de Windows y Linux porque son las dos que sé como hacerlo (amigos de Mac, nunca toque una, así que no se como ayudarlos, pero debe ser algo similar quizás?)
Para crear nuestro archivo donde contenga el código HTML vamos a hacer lo siguiente, dependiendo del sistema operativo que tenga nuestra PC:
* WINDOWS
- Vamos a la carpeta donde queremos guardarlo, con el escritorio alcanza.
- Hacemos click derecho con el mouse, vamos hasta Nuevo y seleccionamos Nuevo Documento de Texto (no de Word, de texto! acuerdense que esto se hace en el block de notas).
- Nos va a pedir un nombre para el archivo, le ponemos uno que queramos.
- Cambiamos la extensión del archivo de .txt a .html. Nos va a decir que si cambiamos la extensión, el archivo puede quedar inutilizable.... no se preocupen y digan que si.
- Al ser un archivo HTML siempre va a querer abrirlo con un explorador (Internet Explorer, Mozilla Firefox, Opera, Google Chrome o el que tengan predeterminado).
- Para crear o modificar el código, van a tener que hacer click derecho arriba del archivo y seleccionar "Abrir con". Allí eligen abrirlo con el Block de Notas y voila! cada vez que guarden se esta guardando el código.
- Si queremos ver como esta quedando nuestra página web simplemente guarden primero el código y hagan doble click sobre el archivo. Van a tener abiertas simultáneamente dos ventanas: un archivo del Block de Notas y uno del Explorador predeterminado con la interpretación de lo que hay en el Block de Notas. Siempre guarden lo que hacen en el Block de Notas y luego en el Explorador aprietan F5 (que es actualizar) para actualizar en su Explorador los cambios que le hacen al código.
* LINUX
Todo el que se tipifique como He-Man siempre terminan teniendo este sistema operativo. Yo no soy, simplemente tengo este sistema operativo porque es open source, no necesito licencias, no expira y en formato es casi que igual a Windows. Como dije en las reglas: pierda el miedo... pruebe cosas nuevas!
- En donde queramos tener el archivo hacemos click derecho, vamos a Nuevo y seleccionamos Objeto.
- Ponemos el nombre del archivo y la extensión html.
- En el comportamiento es igual a Windows. Lo va a abrir por defecto con el explorador, hacemos click derecho, seleccionamos Abrir con y allí seleccionamos Editor de texto.
- Si queremos ver como esta quedando nuestra página web simplemente guarden primero el código y hagan doble click sobre el archivo. Van a tener abiertas simultáneamente dos ventanas: un archivo del Editor de texto y uno del Explorador predeterminado con la interpretación de lo que hay en el Editor de texto. Siempre guarden lo que hacen en el Editor de texto y luego en el Explorador aprietan F5 (que es actualizar) para actualizar en su Explorador los cambios que le hacen al código.
Ahora vamos a ver la Estructura del HTML
Hablo de Windows y Linux porque son las dos que sé como hacerlo (amigos de Mac, nunca toque una, así que no se como ayudarlos, pero debe ser algo similar quizás?)
Para crear nuestro archivo donde contenga el código HTML vamos a hacer lo siguiente, dependiendo del sistema operativo que tenga nuestra PC:
* WINDOWS
- Vamos a la carpeta donde queremos guardarlo, con el escritorio alcanza.
- Hacemos click derecho con el mouse, vamos hasta Nuevo y seleccionamos Nuevo Documento de Texto (no de Word, de texto! acuerdense que esto se hace en el block de notas).
- Nos va a pedir un nombre para el archivo, le ponemos uno que queramos.
- Cambiamos la extensión del archivo de .txt a .html. Nos va a decir que si cambiamos la extensión, el archivo puede quedar inutilizable.... no se preocupen y digan que si.
- Al ser un archivo HTML siempre va a querer abrirlo con un explorador (Internet Explorer, Mozilla Firefox, Opera, Google Chrome o el que tengan predeterminado).
- Para crear o modificar el código, van a tener que hacer click derecho arriba del archivo y seleccionar "Abrir con". Allí eligen abrirlo con el Block de Notas y voila! cada vez que guarden se esta guardando el código.
- Si queremos ver como esta quedando nuestra página web simplemente guarden primero el código y hagan doble click sobre el archivo. Van a tener abiertas simultáneamente dos ventanas: un archivo del Block de Notas y uno del Explorador predeterminado con la interpretación de lo que hay en el Block de Notas. Siempre guarden lo que hacen en el Block de Notas y luego en el Explorador aprietan F5 (que es actualizar) para actualizar en su Explorador los cambios que le hacen al código.
* LINUX
Todo el que se tipifique como He-Man siempre terminan teniendo este sistema operativo. Yo no soy, simplemente tengo este sistema operativo porque es open source, no necesito licencias, no expira y en formato es casi que igual a Windows. Como dije en las reglas: pierda el miedo... pruebe cosas nuevas!
- En donde queramos tener el archivo hacemos click derecho, vamos a Nuevo y seleccionamos Objeto.
- Ponemos el nombre del archivo y la extensión html.
- En el comportamiento es igual a Windows. Lo va a abrir por defecto con el explorador, hacemos click derecho, seleccionamos Abrir con y allí seleccionamos Editor de texto.
- Si queremos ver como esta quedando nuestra página web simplemente guarden primero el código y hagan doble click sobre el archivo. Van a tener abiertas simultáneamente dos ventanas: un archivo del Editor de texto y uno del Explorador predeterminado con la interpretación de lo que hay en el Editor de texto. Siempre guarden lo que hacen en el Editor de texto y luego en el Explorador aprietan F5 (que es actualizar) para actualizar en su Explorador los cambios que le hacen al código.
Ahora vamos a ver la Estructura del HTML
Arranquemos de CERO
Arranquemos por lo basico y esencial.... QUE ES HTML??
Allá fui a la "oh mighty" Wikipedia: HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas» (para nosotros "tags" que es la denominación del inglés), rodeadas por corchetes angulares ( < > ).
Estos corchetes angulares casi siempre es la tecla que esta al lado de la Z. En algunos notebooks y netbooks no esta como tecla en sí, pero busquenla.
Una tag es lo que va entre esos paréntesis, vendría a ser la orden que quiero que la compu ejecute. Tiene una tag de apertura (por ejemplo, <title>) y un tag de cierre, que es el mismo tag de apertura con una barra adelante (en nuestro ejemplo es </title> ).
Las tags es lo primero que vamos a aprender. Darle el estilo a la página lo vamos a hacer después. Como diría Juampi (mi novio) primero aprendé los números, después vas a aprender como sumar, restar y el resto. Y si ya sos una master en esto, vas a sacar derivadas igual. Pero como todo en la vida: primero lo primero, aprendamos tags, después, que podemos hacer con ellas.
Arranquemos con algunas reglas básicas...
REGLA 1: PIERDA EL MIEDO:
Primero que nada, sigue siendo escritura, ni más ni menos, entre signos de < y >. Hasta escribir este blog es un html, que claro, Google hace que sea simple y que no necesitemos poner ninguna tag.
REGLA 2: TENGA PACIENCIA
Así como uno tiene que hacer un esfuerzo para tratar de entender a un extranjero que habla mal español, la computadora hace ese esfuerzo para entendernos a nosotros. Sí, nosotros somos los que hablamos muy mal! A veces las cosas no salen como queremos, tenemos que tener paciencia, pensar un poco más, tener una hoja y un lapiz cerca y diseñar lo que queremos decir a la vieja manera, para después tratar de hablar con la compu y que haga exactamente lo que estamos pensando.
REGLA 3: SEA PROLIJO Y DETALLISTA
* Cuide que el lenguaje sea el semánticamente correcto. Esto es importante porque si queremos que Google encuentre nuestra página más rapida o más fácil que la del resto del mundo, nuestro html debe ser semánticamente correcto. Como si fuera un informe o un escrito o una carta: no se puede usar un lenguaje formal, luego uno informal y luego volver al formal. Tratemos siempre de tener una coherencia lingüistica.
Un ejemplo es cuando queremos agregar negrita a una frase: se puede poner de dos formas, vendrían a ser como la formal y la informal: <strong> y <b>. La diferencia de ambos es que <strong> tiene más peso dentro del código html que la tag rápida <b> aunque básicamente las dos hagan lo mismo. Para Google sí hay una diferencia: el buscador toma en consideración la intención del programador. Se supone que si un programador pone <strong> en un documento, es que le quiso dar importancia a la información que está contenida en esa tag. Por tanto, en la lista de prioridades, el <strong> va a estar unos cuantos lugares arriba que <b>.
* Cuando se abre una tag, hay que cerrarla. Salvo contadas ocasiones en las que las tag no tienen una de cierre, pero será visto cuando sea así. Siempre que haga una apertura de tag, haga inmediatamente la de cierre, agregue enter (en la jerga de los He-Man es "dar aire") y siga trabajando. Por que hacer esto? Seguramente para cuando haya hecho todo lo que quería poner en el medio se olvide de cerrarla y no salgan las cosas como espera y tenga errores. Encontrar errores es peor despues de que ya esta todo hecho. Es mejor hacer la apertura, hacer el cierre y luego trabajar en lo que quiere poner adentro de esa tag.
* No deje espacios entre la tag y el texto que la contiene, aunque la información si puede contener espacios.Una tag sería "<title>hola mundo</title>" y no "<title> hola mundo </title>" (por si no se dieron cuenta, agregue un espacio entre la apertura y el contenido y luego entre el contenido y el cierre).
* Diferencie cuando hay una tag dentro de otra con un espacio de 4 caracteres. Suponga que quiere escribir una lista de compras para hacer una torta y nos faltan los ingredientes. Cuando tenemos el papel ponemos básicamente algo así:
Lista de compras para el supermercado
* 1 litro de leche
* 1 kg de harina
* 1 paquete de manteca
Para que un HTML nos ponga los "*" y nos sangre el texto debemos hacer así, mis comentarios van entre paréntesis:
<h1>Lista de compras para el supermercado </h1> (esto es el título)
<ul> (esto es decirle que voy a hacer una lista) (esta tag nos sangra el contenido y le pone viñeta)
<li>1 litro de leche </li> (elemento de la lista)
<li>1 kg de harina </li>
<li>1 paquete de manteca</li>
</ul >(cierre de la lista)
Igual por la lista, no se hagan problema... las vamos a ver en detalle cada una y que hacen.
Hasta acá creo que son las reglas básicas, si se me ocurre alguna otra, seguramente las ponga en las siguientes entradas....
QUE PROGRAMA NECESITO PARA HACER UN HTML!?
Un bloc de notas de Windows o Notepad en Linux.... como veran.... no les digo que se puede casi que programar con una calculadora, pero es mas o menos así.
Creo que dicho todo esto... vamos a hablar del archivo de HTML....
Allá fui a la "oh mighty" Wikipedia: HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas» (para nosotros "tags" que es la denominación del inglés), rodeadas por corchetes angulares ( < > ).
Estos corchetes angulares casi siempre es la tecla que esta al lado de la Z. En algunos notebooks y netbooks no esta como tecla en sí, pero busquenla.
Una tag es lo que va entre esos paréntesis, vendría a ser la orden que quiero que la compu ejecute. Tiene una tag de apertura (por ejemplo, <title>) y un tag de cierre, que es el mismo tag de apertura con una barra adelante (en nuestro ejemplo es </title> ).
Las tags es lo primero que vamos a aprender. Darle el estilo a la página lo vamos a hacer después. Como diría Juampi (mi novio) primero aprendé los números, después vas a aprender como sumar, restar y el resto. Y si ya sos una master en esto, vas a sacar derivadas igual. Pero como todo en la vida: primero lo primero, aprendamos tags, después, que podemos hacer con ellas.
Arranquemos con algunas reglas básicas...
REGLA 1: PIERDA EL MIEDO:
Primero que nada, sigue siendo escritura, ni más ni menos, entre signos de < y >. Hasta escribir este blog es un html, que claro, Google hace que sea simple y que no necesitemos poner ninguna tag.
REGLA 2: TENGA PACIENCIA
Así como uno tiene que hacer un esfuerzo para tratar de entender a un extranjero que habla mal español, la computadora hace ese esfuerzo para entendernos a nosotros. Sí, nosotros somos los que hablamos muy mal! A veces las cosas no salen como queremos, tenemos que tener paciencia, pensar un poco más, tener una hoja y un lapiz cerca y diseñar lo que queremos decir a la vieja manera, para después tratar de hablar con la compu y que haga exactamente lo que estamos pensando.
REGLA 3: SEA PROLIJO Y DETALLISTA
* Cuide que el lenguaje sea el semánticamente correcto. Esto es importante porque si queremos que Google encuentre nuestra página más rapida o más fácil que la del resto del mundo, nuestro html debe ser semánticamente correcto. Como si fuera un informe o un escrito o una carta: no se puede usar un lenguaje formal, luego uno informal y luego volver al formal. Tratemos siempre de tener una coherencia lingüistica.
Un ejemplo es cuando queremos agregar negrita a una frase: se puede poner de dos formas, vendrían a ser como la formal y la informal: <strong> y <b>. La diferencia de ambos es que <strong> tiene más peso dentro del código html que la tag rápida <b> aunque básicamente las dos hagan lo mismo. Para Google sí hay una diferencia: el buscador toma en consideración la intención del programador. Se supone que si un programador pone <strong> en un documento, es que le quiso dar importancia a la información que está contenida en esa tag. Por tanto, en la lista de prioridades, el <strong> va a estar unos cuantos lugares arriba que <b>.
* Cuando se abre una tag, hay que cerrarla. Salvo contadas ocasiones en las que las tag no tienen una de cierre, pero será visto cuando sea así. Siempre que haga una apertura de tag, haga inmediatamente la de cierre, agregue enter (en la jerga de los He-Man es "dar aire") y siga trabajando. Por que hacer esto? Seguramente para cuando haya hecho todo lo que quería poner en el medio se olvide de cerrarla y no salgan las cosas como espera y tenga errores. Encontrar errores es peor despues de que ya esta todo hecho. Es mejor hacer la apertura, hacer el cierre y luego trabajar en lo que quiere poner adentro de esa tag.
* No deje espacios entre la tag y el texto que la contiene, aunque la información si puede contener espacios.Una tag sería "<title>hola mundo</title>" y no "<title> hola mundo </title>" (por si no se dieron cuenta, agregue un espacio entre la apertura y el contenido y luego entre el contenido y el cierre).
* Diferencie cuando hay una tag dentro de otra con un espacio de 4 caracteres. Suponga que quiere escribir una lista de compras para hacer una torta y nos faltan los ingredientes. Cuando tenemos el papel ponemos básicamente algo así:
Lista de compras para el supermercado
* 1 litro de leche
* 1 kg de harina
* 1 paquete de manteca
Para que un HTML nos ponga los "*" y nos sangre el texto debemos hacer así, mis comentarios van entre paréntesis:
<h1>Lista de compras para el supermercado </h1> (esto es el título)
<ul> (esto es decirle que voy a hacer una lista) (esta tag nos sangra el contenido y le pone viñeta)
<li>1 litro de leche </li> (elemento de la lista)
<li>1 kg de harina </li>
<li>1 paquete de manteca</li>
</ul >(cierre de la lista)
Igual por la lista, no se hagan problema... las vamos a ver en detalle cada una y que hacen.
Hasta acá creo que son las reglas básicas, si se me ocurre alguna otra, seguramente las ponga en las siguientes entradas....
QUE PROGRAMA NECESITO PARA HACER UN HTML!?
Un bloc de notas de Windows o Notepad en Linux.... como veran.... no les digo que se puede casi que programar con una calculadora, pero es mas o menos así.
Creo que dicho todo esto... vamos a hablar del archivo de HTML....
lunes, 1 de agosto de 2011
Hola, me considero una dummie
Un día pensé: "Que diablos!? Yo, la Licenciada en Relaciones Internacionales, una carrera de neto perfil humanistico, cansada de ver como todos los informáticos tienen desocupación cero en Uruguay.... dije, Why not? Será que los que se dedican a la informática están tocados por alguna varita mágica?" Supuse que no y ahi decidí aprender algo de informática que no sea usar Word y Excel... je. En esto me considero una dummie y a mucha honra.... pero vamos a dejar de serlo!
Siempre dije que cualquiera puede hacer cualquier cosa que se proponga, por ejemplo... cualquiera puede ser cirujano! pero no a todos nos gusta la sangre... por eso la humanidad se divide en tareas diferenciadas.
Pero algo que siempre me molestó de los que se dedican a la informática es que van por la vida como si fueran He-Man (en mi caso She-ra) con la espadita levantada diciendo "Por el poder de Greyskull! Yo tengo el poder!". Y si, hablar con una computadora es una cosa complicada y hacer que la computadora haga lo que tengas en la cabeza, es muuucho mas complicado. Y lo digo como una simple usuaria de computadoras. Pero me cansé! Yo también quiero ser She-ra y decir "Yo tengo el poder!"
Pero claro, con mis limitaciones, arranquemos por algo "facil" y productivo ... y que se me ocurrio? HTML.... en síntesis, hagámos páginas web.
Siempre dije que cualquiera puede hacer cualquier cosa que se proponga, por ejemplo... cualquiera puede ser cirujano! pero no a todos nos gusta la sangre... por eso la humanidad se divide en tareas diferenciadas.
Pero algo que siempre me molestó de los que se dedican a la informática es que van por la vida como si fueran He-Man (en mi caso She-ra) con la espadita levantada diciendo "Por el poder de Greyskull! Yo tengo el poder!". Y si, hablar con una computadora es una cosa complicada y hacer que la computadora haga lo que tengas en la cabeza, es muuucho mas complicado. Y lo digo como una simple usuaria de computadoras. Pero me cansé! Yo también quiero ser She-ra y decir "Yo tengo el poder!"
Pero claro, con mis limitaciones, arranquemos por algo "facil" y productivo ... y que se me ocurrio? HTML.... en síntesis, hagámos páginas web.
En realidad culpa de esto tiene mi novio (al cual adoro) y que "oh casualidad" se dedica a programar (si, y anda gritando por ahi "yo tengo el poder" solo porque cuando veo hojas y hojas de código no entiendo ni medio y a él le parece demasiado fácil... ojo, con esto yo voy a seguir siendo una dummie, ni pretendo "hablar" 7 lenguajes de computación, o mas? como él lo hace).... pero siempre tuve la inquietud de hacer esto... y dado que él se ofrece a ayudarme cuando realmente no entiendo... esto va a quedar divino! Al menos espero que entendible!!!!
Al menos es algo que lo hago para mi.... y si puedo ayudar a alguien más que como yo, no sepa como hablar con una computadora y que ella conteste..... seamos una manga de dummies tratando de hablar con estas Bichas.
Arranquemos!
Al menos es algo que lo hago para mi.... y si puedo ayudar a alguien más que como yo, no sepa como hablar con una computadora y que ella conteste..... seamos una manga de dummies tratando de hablar con estas Bichas.
Arranquemos!
Suscribirse a:
Entradas (Atom)