Hola a todos!!
Hoy he decidido comenzar a realizar un manual sencillo para programar en html y asi poder hacer paginas web.
El tutorial empieza desde cero!
Primera leccion
Elementos que vamos a utilizar para trabajar: bloc de notas.
Lo primero que hay que tener en cuenta es que el codigo en html se compone basicamente de "tags" o "etiquetas". Las mismas son palabras claves que cumplen una funcion determinada, y tales palabras van encerradas entre < > (Ej; <html>, <body>, <head>, etc.). De aqui en mas las llamaremos solamente etiquetas.
Veamos el primer ejemplo de codigo:
Ahora analizemos los elementos que hay en el ejemplo de arriba:
1) el texto entre <html> y </html> describe el contenido de la pagina.
2) el texto entre <body> y </body> describe el contenido visible de la pagina.
3) el texto entre <h1> y </h1> es el titulo o encabezado de la pagina (mas adelante veremos el uso de <h1> en profundidad)
4) el texto entre <p> y </p> es el contenido de un parrafo.
**A tener en cuenta: todas las etiquetas deben abrir con <> y cerrar con </> con solo algunas excepciones.
Ahora escriban el codigo del primer ejemplo en el bloc de notas. Hagan clic en "archivo", "guardar como" y coloquenle el nombre "index.html" (sin las comillas) y en "tipo" seleccionen "todos los archivos". Guarden el archivo.
Al abrirlo, veran en el navegador el resultado que hemos obtenido hasta el momento.
Segunda leccion
Primer ejemplo de codigo:
Si escriben este codigo en el bloc de notas veran que el resultado es que tenemos seis titulos en orden de tamaño, desde el mas grande (<h1>
hasta el mas pequeño (<h6>. Sin embargo, la funcion de esta etiquetas no es la de agrandar o achicar el tamaño de la letra, sino el de darle mayor o menor importancia a un trozo de texto. Esto en gran medida contribuye a que Google luego encuentre nuestro sitio web, ya que podemos darle mas importancia a ciertas frases claves y menos importancia a lo demas. Estas etiquetas solo van del h1 al h6.
Segundo ejemplo de codigo:
Este ejemplo no necesita tanta explicacion. Cada porcion de texto que escribamos entre las etiquetas <p> y </p> sera un parrafo, y por ende, al abrir otra etiqueta <p>, el texto comenzara en la linea de abajo como un nuevo parrafo.
**A tener en cuenta: Si al codigo de ejemplo le quitamos las etiquetas de cierre </p>, el resultado visual es el mismo. Es porque hasta html 4 esta y algunas otras etiquetas podian quedar abiertas. Aun asi xhtml y html 5, exigen el cierre de TODAS las etiquetas, por lo que es bueno que se acostumbren desde el principio a hacerlo asi.
Tercer ejemplo de codigo:
Aca vemos un ejemplo de la insercion de un link. La etiqueta es <a>. Dentro de la etiqueta de apertura, se escribe el atributo "href" seguido del signo "=", tras lo cual añadimos la url que deseemos, siempre entre comillas y con "http://" delante si se trata de un sitio web. (Esta url tambien puede ser un archivo local, por ej: pagina1.html, siempre y cuando, el archivo "pagina1.html" este en la misma carpeta o directorio donde se encuentra el archivo .html que estamos editando.) Entre ambas etiquetas <a> y </a> va el texto que contendra el link. En la segunda linea, ven que solo queda resaltada la palabra aqui y es la que contiene el link a Taringa!
Cuarto ejemplo de codigo:
Aqui tenemos la insercion de nuestra primera imagen. La etiqueta "img" es una sola, y al final se cierra ella misma con "/>".
Dentro de la etiqueta tenemos el atributo "src" (que viene de la palabra "source" o fuente), en el cual colocamos el nombre de la imagen con su extenxion (en este caso ".jpg", pero pueden ser otras, como .bmp, .png, etc.) siempre teniendo en cuenta que debe estar dentro de la misma carpeta donde se encuentra nuestro archivo .html. En el caso de que ademas esta en una subcarpeta, colocamos el nombre de la misma, como se muestra en la segunda linea.
Tenemos tambien los atributos "width" y "height". Ambos significan "ancho" y "alto", en ese orden. Por lo tanto, lo que estamos indicando con estos atributos son el ancho y el alto de nuestra imagen, y lo hacemos en pixeles (px).
**A tener en cuenta: Nunca olviden las comillas los valores de cada atributo. En todos los atributos, los valores deben ir encerrados entre comillas (ver los ejemplos).
Ahora bien, ya tenemos un archivo llamado index.html. Creen una nueva carpeta que diga "Mi Pagina Web" y coloquen alli el archivo "index.html" y una foto. Luego editen el archivo "index.html" con el bloc de notas para que se visualize la foto que tienen en la carpeta. Vamos a hacer uso de esta carpeta para nuestro sitio, asi que ¡no la borren!
Tercera leccion
Veamos algunos problemas que podemos encontrar con el formato de nuestro texto y como solucionarlos.
Primer ejemplo de codigo:
En este ejemplo vemos un poema de Gustavo Adolfo Becquer. Para que el poema se lea de forma correcta es necesario que cada verso este en una linea diferente. Ahora bien, si copiamos este codigo en nuestro bloc de notas, lo guardamos y vemos el resultado en nuestro navegador, ¿cual es el resultado? Que en el navegador no se van a respetar los saltos de linea que hemos escrito. Nuestro texto no quedara con el formato de un poema, sino con el formato de un parrafo comun y corriente. Veamos 2 formas de solucionar este problema.
El primer metodo seran los saltos de linea.
Segundo ejemplo de codigo:
Lo que vemos en este ejemplo es el uso de la etiqueta <br />. Esta es la etiqueta de salto de linea. Con ella ordenamos al texto para que continue en la linea de abajo desde el punto donde colocamos la etiqueta. Si copiamos el codigo y lo vemos en el navegador veremos que nuestro poema ahora si conserva el formato deseado.
El segundo metodo es el preformateado.
Tercer ejemplo de codigo:
La etiqueta <pre> significa preformateado. El texto que se encuentre dentro de estas etiquetas tendra exactamente el mismo formato que el que tiene cuando lo escribimos en el bloc de notas.
Para que lo entendamos mejor: en html, si en el editor de texto dejo 20 espacios, sera interpretado como 1 espacio. Esa es la razon por la que no conserva el formato del poema. Pero la etiqueta <pre> cambia ese comportamiento. Mientras el texto sea preformateado, si yo dejo 15, 23 o 78 espacios, van a ser 15, 23 y 78 espacios tal cual. De esta forma con este metodo tambien logramos obtener el formato deseado para nuestro poema.
Estos han sido los metodos para solucionar el problema del formato del texto. Cada uno vera en su momento cual de los 2 metodos le conviene mas utilizar en determinada circunstancia.
Cuarto ejemplo de codigo:
La etiqueta <hr /> que ven en este ejemplo inserta una linea horizontal en nuestra pagina. Puede servir para dividir diferentes partes de la misma como se ve en el ejemplo.
Quinto ejemplo de codigo:
El texto que ven encerrado entre !-- y --> es un comentario. No tiene ningun efecto visual en lo que programemos. Los comentarios nos sirven para hacer mas legible el codigo. Podemos escribir para que sirve cierta linea que hayamos escrito y de esa forma hacer mas facil la lectura del codigo de nuestra pagina.
Cuarta leccion
Hoy vamos a analizar como podemos darle diferentes formatos al texto en html. No vamos a profundizar mucho en esto, ya que solamente son una lista de etiquetas que produciran diferentes resultados visuales en nuestro texto. Veremos en ejemplos cuales son estas etiquetas y luego dejare un lista de ellas con sus respectivas funciones, en caso de que las quisieran memorizar (aunque no es imprescindible que las memorizen todas ahora).
Primer ejemplo de codigo:
Este ejemplo se veria asi en el navegador:
Como pueden ver, el texto tomara el formato que le asignemos mediante estas etiquetas. Asi la etiqueta <i> (de italica) pondra el texto en cursiva, y la etiqueta <big> (de "grande" en español) pondra el texto grande. Asi de sencillo. En realidad, es poco probable que hagan uso de todas estas etiquetas, ya que para hacer el texto grande lo hacen con el atributo "font-size" (que veremos mas adelante) y le asignan el tamaño que quieran. Pero es bueno conocer estas etiquetas si aprenderan a programar en html. Algo interesante es que la etiqueta <i> produce el mismo resultado que la etiqueta <em>. Eso es porque el navegador interpreta que para enfatizar el texto hay que ponerlo en cursiva. Lo mismo sucede con las etiquetas <b> y <strong>. Pero tambien se puede dar el caso en algun navegador, que al poner <em> el texto este en negrita, igual que <b>. Todo depende de como lo interprete el navegador.
A continuacion les voy a dejar una lista de algunas etiquetas que dan formato al texto.
<b> / Texto en negrita
<i> / Texto en cursiva
<big> / Texto grande
<small> / Texto pequeño
<em> / Texto enfatizado
<strong> / Texto resaltado
<del> / Texto tachado
<ins> / Texto subrayado
<code> / Texto de codigo (esta etiqueta la utilizo yo para poner los ejemplos de codigo)
<sub> / Texto en subindice
<sup> / Texto en superindice
<tt> / Texto tipo maquina de escribir
<kbd> / Texto de teclado (produce el mismo efecto que <code>
<samp> / Texto de muestra (produce el mismo efecto que <code>
<var> / Texto de variable (al igual que <code> se suele utilizar para representar codigo)
<dfn> / Representa definiciones
<cite> / Representa citas
<q> / Texto entre comillas (mas correcto es decir que es una cita corta)
<blockquote> / Y esta seria una cita larga
**A tener en cuenta: ¡Recuerden que siempre tienen que encerrar el texto a dar formato entre la etiqueta de apertura <etiqueta> y la de cierre </etiqueta>!
Segundo ejemplo de codigo:
Este es un ejemplo de abreviaciones. La abreviacion, en este caso dr., va entre las etiquetas <abbr> y </abbr>. El atributo "title" lleva la palabra completa. El efecto que esto tendra es que cuando coloquemos el cursor sobre la abreviacion, veremos en un pequeño mensaje emergente, lo que hayamos escrito en el atributo "title". Recordar que los valores de los atributos van entre comillas.
La etiqueta <acronym> tiene el mismo efecto y se utiliza exactamente de la misma forma.
La diferencia entre abreviacion y acronimo, es que la abreviacion no siempre sera pronunciable vocalmente, como sucede con la abreviacion "dr."; en cambio el acronimo son siglas que forman otra palabra que si podemos pronunciar, como sucede con el acronimo "laser". En la practica no encontraremos diferencia entre usar una <abbr> o <acronym>, pero semanticamente lo correcto seria respetar esta sintaxis.
Tercer ejemplo de codigo:
La etiqueta <address> vista en este ejemplo nos servira para introducir nuestros datos. Se podria decir que es como un sello que introducimos en nuestra pagina. Esto se suele utilizar o bien en el encabezado de la pagina, o bien al pie de la misma.
**A tener en cuenta: Si prueban este codigo en el bloc de notas y lo ven en el navegador, veran que lo que hace la etiqueta <address> es poner el texto en cursiva. Sin embargo, no es correcto utilizar la etiqueta <i> en reemplzao de <address>. Obtendremos el mismo resultado visual, pero la sintaxis no es correcta. Es bueno acostumbrarse a desarrollar una "buena ortografia", por decirlo asi, en el lenguaje html.
Quinta leccion
Veamos un poco las fuentes tipograficas.
Primer ejemplo de codigo:
En el ejemplo de arriba vemos tres ejemplos de fuentes tipograficas. Aca vemos algo nuevo: los estilos. Para poder asignar estilos, necesitamos una etiqueta previa al texto que escribimos (en este caso <p>, pero pueden ser otras como <h1>, <b>, <i> y asi por el estilo). Como se puede notar, el estilo se asigna dentro de la etiqueta de apertura, y la misma se cierra al final de los atributos. Recordamos que los atributos siempre van en comillas. Aqui el atributo es "font-family". Luego de los dos puntos ( : ) colocamos la fuente tipografica q tendra el texto.
Seria conveniente mencionar 2 puntos: 1) que podemos colocar cualquier fuente que tengamos instalada en nuestra computadora, pero 2) que solamente sera visible en nuestro sitio web para las personas que tambien la tenga instalada. Por ej: si yo uso la fuente "colonial" pero la persona que abre la pagina no la tiene instalada, quiza vea el texto en arial, verdana o similar. Por lo tanto, lo ideal en principio es utilizar fuentes comunes para obtener el resultado deseado.
Si tienen dudas sobre como se llaman las diferentes fuentes tipograficas, abran el word y vean en la lista de fuentes. Tienen que escribirlas tal como aparecen alli.
**A tener en cuenta: Cabe aclarar que esta no es la unica ni la mejor forma de asignar estilos; lo mejor es hacerlo con hojas de estilo (CSS). Pero eso es algo que veremos mas adelante. Por ahora nos concentramos en hacerlo asi. De hecho vamos a encontrar situaciones esporadicas en las que tendremos que hacer uso del sistema que estmos viendo ahora.
Segundo ejemplo de codigo:
En este ejemplo vemos como cambiar el tamaño de las fuentes. Muy parecido al anterior, el atributo ahora se llama "font-size". El formato es exactamente el mismo.
Veran que muestro tres formas de asignar las medidas. Las tres funcionan bien y pueden usar cualquiera. Aun asi, la que mejores resultados suele dar es "em". Esta medida puede asignarse en decimales para ser mas precisa. Por ejemplo, podemos asignar 2em, 1.2em, o 3.154em. Ademas no van a notar diferencias de resultados entre navegadores diferentes (Explorer, Mozilla, Opera, etc.), como si pudiera suceder usando % o px.
Tercer ejemplo de codigo:
Este ejemplo muestra que cambiar el color del texto es muy sencillo. El atributo es "color", y luego colocamos el nombre del color en ingles, o bien el codigo en notacion hexadecimal. Ese es el caso de #FF0000.
Aqui les dejo un link de una pagina donde pueden seleccionar el color, y les da el codigo hexadecimal.
http://html-color-codes.info/codigos-de-colores-hexadecimales/
**A tener en cuenta: Siempre el codigo hexadecimal va antecedido de un #.
Cuarto ejemplo de codigo:
Por ultimo, veamos como asignar todos los atributos juntos. Colocamos uno al lado del otro dentro de la misma linea, separados por punto y coma. Y de esta forma le hemos dado forma al texto de nuestra web.
Lo prometido es deuda... Por fin actualize mi post! Paso que estuve enfermo unas semanas y de ahi me olvide de mi trabajo. Pero ya estoy de vuelta para terminar lo que empece!
PD: Si tienen alguna duda de lo visto, dejen un comentario y lo contestare en la siguiente leccion!
Hoy he decidido comenzar a realizar un manual sencillo para programar en html y asi poder hacer paginas web.
El tutorial empieza desde cero!
Primera leccion
Elementos que vamos a utilizar para trabajar: bloc de notas.
Lo primero que hay que tener en cuenta es que el codigo en html se compone basicamente de "tags" o "etiquetas". Las mismas son palabras claves que cumplen una funcion determinada, y tales palabras van encerradas entre < > (Ej; <html>, <body>, <head>, etc.). De aqui en mas las llamaremos solamente etiquetas.
Veamos el primer ejemplo de codigo:
<html>
<body>
<h1>Titulo de la pagina</h1>
<p>Primer parrafo de la pagina</p>
</body>
</html>Ahora analizemos los elementos que hay en el ejemplo de arriba:
1) el texto entre <html> y </html> describe el contenido de la pagina.
2) el texto entre <body> y </body> describe el contenido visible de la pagina.
3) el texto entre <h1> y </h1> es el titulo o encabezado de la pagina (mas adelante veremos el uso de <h1> en profundidad)
4) el texto entre <p> y </p> es el contenido de un parrafo.
Ahora escriban el codigo del primer ejemplo en el bloc de notas. Hagan clic en "archivo", "guardar como" y coloquenle el nombre "index.html" (sin las comillas) y en "tipo" seleccionen "todos los archivos". Guarden el archivo.
Al abrirlo, veran en el navegador el resultado que hemos obtenido hasta el momento.
Segunda leccion
Primer ejemplo de codigo:
<html>
<body>
<h1>Primer encabezado</h1>
<h2>Segundo encabezado</h2>
<h3>Tecer encabezado</h3>
<h4>Cuarto encabezado</h4>
<h5>Quinto encabezado</h5>
<h6>Sexto encabezado</h6>
</body>
</html>Si escriben este codigo en el bloc de notas veran que el resultado es que tenemos seis titulos en orden de tamaño, desde el mas grande (<h1>
hasta el mas pequeño (<h6>
. Sin embargo, la funcion de esta etiquetas no es la de agrandar o achicar el tamaño de la letra, sino el de darle mayor o menor importancia a un trozo de texto. Esto en gran medida contribuye a que Google luego encuentre nuestro sitio web, ya que podemos darle mas importancia a ciertas frases claves y menos importancia a lo demas. Estas etiquetas solo van del h1 al h6. Segundo ejemplo de codigo:
<html>
<body>
<p>Este es el primer parrafo.</p>
<p>Este es el segundo parrafo.</p>
</body>
</html>Este ejemplo no necesita tanta explicacion. Cada porcion de texto que escribamos entre las etiquetas <p> y </p> sera un parrafo, y por ende, al abrir otra etiqueta <p>, el texto comenzara en la linea de abajo como un nuevo parrafo.
**A tener en cuenta: Si al codigo de ejemplo le quitamos las etiquetas de cierre </p>, el resultado visual es el mismo. Es porque hasta html 4 esta y algunas otras etiquetas podian quedar abiertas. Aun asi xhtml y html 5, exigen el cierre de TODAS las etiquetas, por lo que es bueno que se acostumbren desde el principio a hacerlo asi.
Tercer ejemplo de codigo:
<html>
<body>
<a href="http://www.taringa.net">Este es un link a Taringa!</a>
<p>Para entrar a Taringa! haz clic <a href="http://www.taringa.net">aqui.</a></p>
</body>
</html>Aca vemos un ejemplo de la insercion de un link. La etiqueta es <a>. Dentro de la etiqueta de apertura, se escribe el atributo "href" seguido del signo "=", tras lo cual añadimos la url que deseemos, siempre entre comillas y con "http://" delante si se trata de un sitio web. (Esta url tambien puede ser un archivo local, por ej: pagina1.html, siempre y cuando, el archivo "pagina1.html" este en la misma carpeta o directorio donde se encuentra el archivo .html que estamos editando.) Entre ambas etiquetas <a> y </a> va el texto que contendra el link. En la segunda linea, ven que solo queda resaltada la palabra aqui y es la que contiene el link a Taringa!
Cuarto ejemplo de codigo:
<html>
<body>
<img src="foto.jpg" width="100px" height="150px" />
<img src="imagenes/foto.jpg" width="100px" height="150px" />
</body>
</html>Aqui tenemos la insercion de nuestra primera imagen. La etiqueta "img" es una sola, y al final se cierra ella misma con "/>".
Dentro de la etiqueta tenemos el atributo "src" (que viene de la palabra "source" o fuente), en el cual colocamos el nombre de la imagen con su extenxion (en este caso ".jpg", pero pueden ser otras, como .bmp, .png, etc.) siempre teniendo en cuenta que debe estar dentro de la misma carpeta donde se encuentra nuestro archivo .html. En el caso de que ademas esta en una subcarpeta, colocamos el nombre de la misma, como se muestra en la segunda linea.
Tenemos tambien los atributos "width" y "height". Ambos significan "ancho" y "alto", en ese orden. Por lo tanto, lo que estamos indicando con estos atributos son el ancho y el alto de nuestra imagen, y lo hacemos en pixeles (px).
**A tener en cuenta: Nunca olviden las comillas los valores de cada atributo. En todos los atributos, los valores deben ir encerrados entre comillas (ver los ejemplos).
Ahora bien, ya tenemos un archivo llamado index.html. Creen una nueva carpeta que diga "Mi Pagina Web" y coloquen alli el archivo "index.html" y una foto. Luego editen el archivo "index.html" con el bloc de notas para que se visualize la foto que tienen en la carpeta. Vamos a hacer uso de esta carpeta para nuestro sitio, asi que ¡no la borren!
Tercera leccion
Veamos algunos problemas que podemos encontrar con el formato de nuestro texto y como solucionarlos.
Primer ejemplo de codigo:
<html>
<body>
<p>Los invisibles átomos del aire
en derredor palpitan y se inflaman;
el cielo se deshace en rayos de oro;
la tierra se estremece alborozada;
Oigo flotando en olas de armonía
rumor de besos y batir de alas;
mis párpados se cierran... ¿Qué sucede?
- ¡Es el amor que pasa!</p>
</body>
</html>En este ejemplo vemos un poema de Gustavo Adolfo Becquer. Para que el poema se lea de forma correcta es necesario que cada verso este en una linea diferente. Ahora bien, si copiamos este codigo en nuestro bloc de notas, lo guardamos y vemos el resultado en nuestro navegador, ¿cual es el resultado? Que en el navegador no se van a respetar los saltos de linea que hemos escrito. Nuestro texto no quedara con el formato de un poema, sino con el formato de un parrafo comun y corriente. Veamos 2 formas de solucionar este problema.
El primer metodo seran los saltos de linea.
Segundo ejemplo de codigo:
<html>
<body>
<p>Los invisibles átomos del aire<br />
en derredor palpitan y se inflaman;<br />
el cielo se deshace en rayos de oro;<br />
la tierra se estremece alborozada;<br />
Oigo flotando en olas de armonía<br />
rumor de besos y batir de alas;<br />
mis párpados se cierran... ¿Qué sucede?<br />
- ¡Es el amor que pasa!</p>
</body>
</html>Lo que vemos en este ejemplo es el uso de la etiqueta <br />. Esta es la etiqueta de salto de linea. Con ella ordenamos al texto para que continue en la linea de abajo desde el punto donde colocamos la etiqueta. Si copiamos el codigo y lo vemos en el navegador veremos que nuestro poema ahora si conserva el formato deseado.
El segundo metodo es el preformateado.
Tercer ejemplo de codigo:
<html>
<body>
<pre>
Los invisibles átomos del aire
en derredor palpitan y se inflaman;
el cielo se deshace en rayos de oro;
la tierra se estremece alborozada;
Oigo flotando en olas de armonía
rumor de besos y batir de alas;
mis párpados se cierran... ¿Qué sucede?
- ¡Es el amor que pasa!
</pre>
</body>
</html>La etiqueta <pre> significa preformateado. El texto que se encuentre dentro de estas etiquetas tendra exactamente el mismo formato que el que tiene cuando lo escribimos en el bloc de notas.
Para que lo entendamos mejor: en html, si en el editor de texto dejo 20 espacios, sera interpretado como 1 espacio. Esa es la razon por la que no conserva el formato del poema. Pero la etiqueta <pre> cambia ese comportamiento. Mientras el texto sea preformateado, si yo dejo 15, 23 o 78 espacios, van a ser 15, 23 y 78 espacios tal cual. De esta forma con este metodo tambien logramos obtener el formato deseado para nuestro poema.
Estos han sido los metodos para solucionar el problema del formato del texto. Cada uno vera en su momento cual de los 2 metodos le conviene mas utilizar en determinada circunstancia.
Cuarto ejemplo de codigo:
<html>
<body>
<p>Este es el primer parrafo</p>
<hr />
<p>Este es el segundo parrafo</p>
<hr/>
<p>Este es el tercer parrafo</p>
</body>
</html>La etiqueta <hr /> que ven en este ejemplo inserta una linea horizontal en nuestra pagina. Puede servir para dividir diferentes partes de la misma como se ve en el ejemplo.
Quinto ejemplo de codigo:
<html>
<body>
<p>Este es el primer parrafo</p><!-- Esto es un parrafo -->
<hr /><!-- Esto es una linea horizontal -->
</body>
</html>El texto que ven encerrado entre !-- y --> es un comentario. No tiene ningun efecto visual en lo que programemos. Los comentarios nos sirven para hacer mas legible el codigo. Podemos escribir para que sirve cierta linea que hayamos escrito y de esa forma hacer mas facil la lectura del codigo de nuestra pagina.
Cuarta leccion
Hoy vamos a analizar como podemos darle diferentes formatos al texto en html. No vamos a profundizar mucho en esto, ya que solamente son una lista de etiquetas que produciran diferentes resultados visuales en nuestro texto. Veremos en ejemplos cuales son estas etiquetas y luego dejare un lista de ellas con sus respectivas funciones, en caso de que las quisieran memorizar (aunque no es imprescindible que las memorizen todas ahora).
Primer ejemplo de codigo:
<html>
<body>
<p><i>Texto en cursiva</i></p>
<p><em>Texto enfatizado</em></p>
<p><b>Texto en negrita</b></p>
<p><strong>Texto remarcado</strong></p>
<p><small>Texto pequeño</small></p>
<p><big>Texto grande</big></p>
<p>Esto es texto en <sub>subindice</sub> y esto es texto en <sup>superindice</sup></p>
<p><ins>Texto subrayada</ins></p>
<p><del>Texto tachado</del></p>
</body>
</html>Este ejemplo se veria asi en el navegador:
Como pueden ver, el texto tomara el formato que le asignemos mediante estas etiquetas. Asi la etiqueta <i> (de italica) pondra el texto en cursiva, y la etiqueta <big> (de "grande" en español) pondra el texto grande. Asi de sencillo. En realidad, es poco probable que hagan uso de todas estas etiquetas, ya que para hacer el texto grande lo hacen con el atributo "font-size" (que veremos mas adelante) y le asignan el tamaño que quieran. Pero es bueno conocer estas etiquetas si aprenderan a programar en html. Algo interesante es que la etiqueta <i> produce el mismo resultado que la etiqueta <em>. Eso es porque el navegador interpreta que para enfatizar el texto hay que ponerlo en cursiva. Lo mismo sucede con las etiquetas <b> y <strong>. Pero tambien se puede dar el caso en algun navegador, que al poner <em> el texto este en negrita, igual que <b>. Todo depende de como lo interprete el navegador.
A continuacion les voy a dejar una lista de algunas etiquetas que dan formato al texto.
<b> / Texto en negrita
<i> / Texto en cursiva
<big> / Texto grande
<small> / Texto pequeño
<em> / Texto enfatizado
<strong> / Texto resaltado
<del> / Texto tachado
<ins> / Texto subrayado
<code> / Texto de codigo (esta etiqueta la utilizo yo para poner los ejemplos de codigo)
<sub> / Texto en subindice
<sup> / Texto en superindice
<tt> / Texto tipo maquina de escribir
<kbd> / Texto de teclado (produce el mismo efecto que <code>
<samp> / Texto de muestra (produce el mismo efecto que <code>
<var> / Texto de variable (al igual que <code> se suele utilizar para representar codigo)
<dfn> / Representa definiciones
<cite> / Representa citas
<q> / Texto entre comillas (mas correcto es decir que es una cita corta)
<blockquote> / Y esta seria una cita larga
**A tener en cuenta: ¡Recuerden que siempre tienen que encerrar el texto a dar formato entre la etiqueta de apertura <etiqueta> y la de cierre </etiqueta>!
Segundo ejemplo de codigo:
<html>
<body>
Mejor visitare al <abbr title="doctor">dr.</abbr> mañana.
Ayer me compre mi nuevo <acronym title="Light Amplification by Stimulated Emission of Radiation">laser</acronym>
</body>
</html>Este es un ejemplo de abreviaciones. La abreviacion, en este caso dr., va entre las etiquetas <abbr> y </abbr>. El atributo "title" lleva la palabra completa. El efecto que esto tendra es que cuando coloquemos el cursor sobre la abreviacion, veremos en un pequeño mensaje emergente, lo que hayamos escrito en el atributo "title". Recordar que los valores de los atributos van entre comillas.
La etiqueta <acronym> tiene el mismo efecto y se utiliza exactamente de la misma forma.
La diferencia entre abreviacion y acronimo, es que la abreviacion no siempre sera pronunciable vocalmente, como sucede con la abreviacion "dr."; en cambio el acronimo son siglas que forman otra palabra que si podemos pronunciar, como sucede con el acronimo "laser". En la practica no encontraremos diferencia entre usar una <abbr> o <acronym>, pero semanticamente lo correcto seria respetar esta sintaxis.
Tercer ejemplo de codigo:
<html>
<body>
<address>
Escrito por Gabriel Moreyra<br />
Direccion: Inteligencia Colectiva 75, Taringa<br />
Telefono: 34 987 156 789<br />
</address>
</body>
</html>La etiqueta <address> vista en este ejemplo nos servira para introducir nuestros datos. Se podria decir que es como un sello que introducimos en nuestra pagina. Esto se suele utilizar o bien en el encabezado de la pagina, o bien al pie de la misma.
**A tener en cuenta: Si prueban este codigo en el bloc de notas y lo ven en el navegador, veran que lo que hace la etiqueta <address> es poner el texto en cursiva. Sin embargo, no es correcto utilizar la etiqueta <i> en reemplzao de <address>. Obtendremos el mismo resultado visual, pero la sintaxis no es correcta. Es bueno acostumbrarse a desarrollar una "buena ortografia", por decirlo asi, en el lenguaje html.
Quinta leccion
Veamos un poco las fuentes tipograficas.
Primer ejemplo de codigo:
<html>
<body>
<p style=font-family:verdana>Texto en Verdana</p>
<p style=font-family:courier>Texto en Courier</p>
<p style=font-family:comic sans MS>Texto en Comic Sans</p>
</body>
</html>En el ejemplo de arriba vemos tres ejemplos de fuentes tipograficas. Aca vemos algo nuevo: los estilos. Para poder asignar estilos, necesitamos una etiqueta previa al texto que escribimos (en este caso <p>, pero pueden ser otras como <h1>, <b>, <i> y asi por el estilo). Como se puede notar, el estilo se asigna dentro de la etiqueta de apertura, y la misma se cierra al final de los atributos. Recordamos que los atributos siempre van en comillas. Aqui el atributo es "font-family". Luego de los dos puntos ( : ) colocamos la fuente tipografica q tendra el texto.
Seria conveniente mencionar 2 puntos: 1) que podemos colocar cualquier fuente que tengamos instalada en nuestra computadora, pero 2) que solamente sera visible en nuestro sitio web para las personas que tambien la tenga instalada. Por ej: si yo uso la fuente "colonial" pero la persona que abre la pagina no la tiene instalada, quiza vea el texto en arial, verdana o similar. Por lo tanto, lo ideal en principio es utilizar fuentes comunes para obtener el resultado deseado.
Si tienen dudas sobre como se llaman las diferentes fuentes tipograficas, abran el word y vean en la lista de fuentes. Tienen que escribirlas tal como aparecen alli.
**A tener en cuenta: Cabe aclarar que esta no es la unica ni la mejor forma de asignar estilos; lo mejor es hacerlo con hojas de estilo (CSS). Pero eso es algo que veremos mas adelante. Por ahora nos concentramos en hacerlo asi. De hecho vamos a encontrar situaciones esporadicas en las que tendremos que hacer uso del sistema que estmos viendo ahora.
Segundo ejemplo de codigo:
<html>
<body>
<p style=font-size:200%>Texto de ejemplo</p>
<p style=font-size:45px>Texto de ejemplo</p>
<p style=font-size:1.6em>Texto de ejemplo</p>
</body>
</html>En este ejemplo vemos como cambiar el tamaño de las fuentes. Muy parecido al anterior, el atributo ahora se llama "font-size". El formato es exactamente el mismo.
Veran que muestro tres formas de asignar las medidas. Las tres funcionan bien y pueden usar cualquiera. Aun asi, la que mejores resultados suele dar es "em". Esta medida puede asignarse en decimales para ser mas precisa. Por ejemplo, podemos asignar 2em, 1.2em, o 3.154em. Ademas no van a notar diferencias de resultados entre navegadores diferentes (Explorer, Mozilla, Opera, etc.), como si pudiera suceder usando % o px.
Tercer ejemplo de codigo:
<html>
<body>
<p style=color:red>Texto en color rojo</p>
<p style=color:blue>Texto en color azul</p>
<p style=color:#FF0000>Texto en color rojo</p>
</body>
</html>Este ejemplo muestra que cambiar el color del texto es muy sencillo. El atributo es "color", y luego colocamos el nombre del color en ingles, o bien el codigo en notacion hexadecimal. Ese es el caso de #FF0000.
Aqui les dejo un link de una pagina donde pueden seleccionar el color, y les da el codigo hexadecimal.
http://html-color-codes.info/codigos-de-colores-hexadecimales/
**A tener en cuenta: Siempre el codigo hexadecimal va antecedido de un #.
Cuarto ejemplo de codigo:
<html>
<body>
<p style=color:green;font-family:arial;font-size:0.75em>Texto de ejemplo</p>
</body>
</html>Por ultimo, veamos como asignar todos los atributos juntos. Colocamos uno al lado del otro dentro de la misma linea, separados por punto y coma. Y de esta forma le hemos dado forma al texto de nuestra web.
Lo prometido es deuda... Por fin actualize mi post! Paso que estuve enfermo unas semanas y de ahi me olvide de mi trabajo. Pero ya estoy de vuelta para terminar lo que empece!
Sigo trabajando.... dejen puntos asi dan ganas de completarlo!!!
Y gracias a todos por sus comentarios!!
Y gracias a todos por sus comentarios!!
PD: Si tienen alguna duda de lo visto, dejen un comentario y lo contestare en la siguiente leccion!
No hay comentarios:
Publicar un comentario