rat
03-06-2008, 20:11
Hola a todos,
No se si tengo mi sitio por aqui ni tampoco si quiero uno :D Solo que llevo un tiempo sin aparecer y que ahora me interesan mas otro tipo de cosas. Eso si, creo que ahora mi ética esta mas clara y tengo claro que es importante y que no lo es tanto.
Pero aunque me haya ausentado un tiempo (de vez en cuando miro el foro), con lo que me gusta este tipo de lenguage (por su sencilleza), no he podido resistirme a escribir este MiniTutorial de HTML.
Empezamos:
HTML es un lenguage que se escribe mediante etiquetas. Una etiqueta se escribe con esas flechitas (<>) y siempre tiene apertura y fin (bueno, miento, hay algunas etiquetas que no se cierran pero ya lo veremos mas adelante). Este es el formato que se usa: <etiqueta> y las cerraduras se ponen con una barra (Shift + 7, normalmente), ejemplo: apertura, <etiqueta> y cerradura, </etiqueta>. Entero se usaria asi:
<etiqueta>
lo que se quiera introducir en ella
</etiqueta>Nota: en HTML los saltos de linea son insignificantes, se puede escribir todo en una linea como cada palabra en una (ya veremos los saltos de linea mas adelante).
Al programar HTML tenemos que tener en cuenta que el texto tiene que tener forma de piramide. Me explico, si pusieramos cinco espacios antes de cada etiqueta y en las etiquetas que estan dentro diez y asi consecutivamente, tendria que parecer una piramide hacia la derecha. Es decir, que si una etiqueta empieza dentro de otra, tambien tiene que acavar alli. Este seria el uso erroneo:
<etiqueta1><etiqueta2>textoooo</etiqueta1></etiqueta2>Tendria que ser asi:
<etiqueta1><etiqueta2>textoooo</etiqueta2></etiqueta1>
Estructura básica de una pagina HTML
Una página HTML tiene unas etiquetas básicas, que son: <html>, <head> y <body>. Sin andarme con chapas, alli va un ejemplo:
<html>
<head>
</head>
<body>
</body>
</html>Como abreis podido fijaros esto es muy complicado (es coña:D) y este codigo es una pagina en blanco, es decir, tiene etiquetas pero le falta el contenido. Expliquemos esas etiquetas:
- <html>:
Tooooooodo el contenido de la pagina ira alli dentro. Hay algunas etiquetas que se escriben fuera, pero no aparecen visiblemente en la pagina. Todo el resto de etiquetas estaran dentro de esta etiqueta madre.
- <head>:
Digamos la cabeza de la página. Alli meteremos el título, metas (preparación para buscadores) etc. El que siempre se pone es el título, que va entre etiquetas <title> (con su respectiva cerradura: </title>). El resto ya los aprenderemos mas adelante.
- <body>:
Si head es la cabeza, este será el cuerpo de la página. Dentro meteremos todo el contenido visible en ella: texto, imagenes etc. Claro que siempre hay exepciones, como por ejemplo JavaScript, que puede escribirse en head y enlazarse desde body.
Pues con eso tenemos lo suficiente como para escribir nuestra propia página con texto, tooooodo el texto que queramos :D Desde un chiste hasta la biblia :D Por ejemplo:
<html>
<head>
<title>Mi biografia (aqui pondreis el titulo que querais)</title>
</head>
<body>
Naci el diez de mayo de...
Este sitio es para poner todo el texto que queramos, escribiendolo o pegandolo directamente (el formato usado en programas para escribir como el tipo de letra, tamaño etc. no se copiara aqui, hay que hacerlo mediante etiquetas).
</body>
</html>
Dentro de <head></head>
Aqui os anunciaré y explicaré brevemente las etiquetas básicas que se usan dentro del head.
- <title>:
Como ya os he esplicado anteriormente, entre dentro de esta etiqueta se pone el titulo que aparecera en la parte superior del navegador.
- <script>:
Aqui se ponen los codigos de otros lenguages de tipo script, por ejemplo javascript, que seria asi:
<script type="javascript [versión]">
el codigo javascript
</script>
Donde pone javascript se pondria el lenguage que vas a usar.
- <meta>:
Esta etiqueta se usa para preparar la web para buscadores usando palabras clabe o descripción. Esta seria la sintaxis con la descripción:
<meta name="el nombre del metado" content="la descripción de la página" lang="el idioma de la pagina en el siguiente formato: ES, FR etc."> Y esta con palabras clave:
<meta name="el nombre de tu metado" content="las palabras clabe separadas por coma">
Nota: cualquiera puede pensar que se puden poner buenas palabras clabe para atraer a toda la gente, pero los buscadores tienen filtros para evitar esto. El mas utilizado es el que comprueva que las palabras clabe aparezcan en la página.
Dentro de <body></body>
Aqui va todo lo que es imágenes, formateo de texto etc.
Tambien podemos ponerle un fondo a la página. Para poner una imágen de fondo usar el formato siguiente:
<body background="la imagen en .jpg o en .gif"></body> Y para poner un color de fondo este otro:
<body bgcolor="#el color en hexadecimal"></body>
- <img>:
Esta etiqueta es para insertar imágenes. Se usa de la siguiente manera:
<img src="direccion de la imagen .jpg o .gif">
- <b>:
Esta etiqueta es para poner un texto en negrita. Se usa de la siguiente manera:
<b>texto que se quiera poner en negrita</b>
- <u>:
Esta etiqueta es para subrayar un texto. Se usa de la siguiente manera:
<u>texto que se quiera subrayar</u>
- <i>:
Esta etiqueta es para poner un texto en cursiva. Se usa de la siguiente manera:
<i>texto que se quiera poner en cursiva</i>
- El alineado:
<p style="text-align:center;">El texto con este atributo aparecerá centrado.</p>
<p style="text-align:left;">El texto con este atributo aparecerá
alineado a la izquierda.</p>
<p style="text-align:right">El texto con este atributo aparecerá
alineado a la derecha.</p>
<p style="text-align:justify">El texto con este atributo aparecerá justificado, es decir, con los márgenes alineados a derecha e izquierda.</p>
- El color del texto:
<p style="color:#el color en hexadecimal">el texto que se desee escribir en ese color</p>
- El tamaño del texto:
Para esto se pueden usar cabeceras. Desde el <h1> (el mas grande) hasta el <h6> (el mas pequeño). Esto iria asi:
<h2>el texto que se quiera introducir en ese tamaño</h2>
- Los enlaces:
Los enlaces se hacen para ir a otra página, la etiqueta usada es <a href>. Por ejemplo:
<a href="la dirección de la otra página">el texto que quieras que aparezca como enlace</a>
Colavoración;)
Este apartado es para deciros que como es normal no habre puesto todo, asi que os pido porfavor que si veis algo que falta o una información suplementaria lo posteeis y actualizaré el post. Asi elte tutorial dejara de ser mini :D y podra conseguir un pequeño puesto fijo en este foro:) Pensad en lo feliz que sera... :D
Ya publicaré aqui los nombres de los colavoradores y gracias por adelanto.
Pues solo me queda saludaros :D y recordaros que podeis copiar este texto y pegarlo en cuantas páginas querais, porque solo es información y no es propiedad de nadie;)
No se si tengo mi sitio por aqui ni tampoco si quiero uno :D Solo que llevo un tiempo sin aparecer y que ahora me interesan mas otro tipo de cosas. Eso si, creo que ahora mi ética esta mas clara y tengo claro que es importante y que no lo es tanto.
Pero aunque me haya ausentado un tiempo (de vez en cuando miro el foro), con lo que me gusta este tipo de lenguage (por su sencilleza), no he podido resistirme a escribir este MiniTutorial de HTML.
Empezamos:
HTML es un lenguage que se escribe mediante etiquetas. Una etiqueta se escribe con esas flechitas (<>) y siempre tiene apertura y fin (bueno, miento, hay algunas etiquetas que no se cierran pero ya lo veremos mas adelante). Este es el formato que se usa: <etiqueta> y las cerraduras se ponen con una barra (Shift + 7, normalmente), ejemplo: apertura, <etiqueta> y cerradura, </etiqueta>. Entero se usaria asi:
<etiqueta>
lo que se quiera introducir en ella
</etiqueta>Nota: en HTML los saltos de linea son insignificantes, se puede escribir todo en una linea como cada palabra en una (ya veremos los saltos de linea mas adelante).
Al programar HTML tenemos que tener en cuenta que el texto tiene que tener forma de piramide. Me explico, si pusieramos cinco espacios antes de cada etiqueta y en las etiquetas que estan dentro diez y asi consecutivamente, tendria que parecer una piramide hacia la derecha. Es decir, que si una etiqueta empieza dentro de otra, tambien tiene que acavar alli. Este seria el uso erroneo:
<etiqueta1><etiqueta2>textoooo</etiqueta1></etiqueta2>Tendria que ser asi:
<etiqueta1><etiqueta2>textoooo</etiqueta2></etiqueta1>
Estructura básica de una pagina HTML
Una página HTML tiene unas etiquetas básicas, que son: <html>, <head> y <body>. Sin andarme con chapas, alli va un ejemplo:
<html>
<head>
</head>
<body>
</body>
</html>Como abreis podido fijaros esto es muy complicado (es coña:D) y este codigo es una pagina en blanco, es decir, tiene etiquetas pero le falta el contenido. Expliquemos esas etiquetas:
- <html>:
Tooooooodo el contenido de la pagina ira alli dentro. Hay algunas etiquetas que se escriben fuera, pero no aparecen visiblemente en la pagina. Todo el resto de etiquetas estaran dentro de esta etiqueta madre.
- <head>:
Digamos la cabeza de la página. Alli meteremos el título, metas (preparación para buscadores) etc. El que siempre se pone es el título, que va entre etiquetas <title> (con su respectiva cerradura: </title>). El resto ya los aprenderemos mas adelante.
- <body>:
Si head es la cabeza, este será el cuerpo de la página. Dentro meteremos todo el contenido visible en ella: texto, imagenes etc. Claro que siempre hay exepciones, como por ejemplo JavaScript, que puede escribirse en head y enlazarse desde body.
Pues con eso tenemos lo suficiente como para escribir nuestra propia página con texto, tooooodo el texto que queramos :D Desde un chiste hasta la biblia :D Por ejemplo:
<html>
<head>
<title>Mi biografia (aqui pondreis el titulo que querais)</title>
</head>
<body>
Naci el diez de mayo de...
Este sitio es para poner todo el texto que queramos, escribiendolo o pegandolo directamente (el formato usado en programas para escribir como el tipo de letra, tamaño etc. no se copiara aqui, hay que hacerlo mediante etiquetas).
</body>
</html>
Dentro de <head></head>
Aqui os anunciaré y explicaré brevemente las etiquetas básicas que se usan dentro del head.
- <title>:
Como ya os he esplicado anteriormente, entre dentro de esta etiqueta se pone el titulo que aparecera en la parte superior del navegador.
- <script>:
Aqui se ponen los codigos de otros lenguages de tipo script, por ejemplo javascript, que seria asi:
<script type="javascript [versión]">
el codigo javascript
</script>
Donde pone javascript se pondria el lenguage que vas a usar.
- <meta>:
Esta etiqueta se usa para preparar la web para buscadores usando palabras clabe o descripción. Esta seria la sintaxis con la descripción:
<meta name="el nombre del metado" content="la descripción de la página" lang="el idioma de la pagina en el siguiente formato: ES, FR etc."> Y esta con palabras clave:
<meta name="el nombre de tu metado" content="las palabras clabe separadas por coma">
Nota: cualquiera puede pensar que se puden poner buenas palabras clabe para atraer a toda la gente, pero los buscadores tienen filtros para evitar esto. El mas utilizado es el que comprueva que las palabras clabe aparezcan en la página.
Dentro de <body></body>
Aqui va todo lo que es imágenes, formateo de texto etc.
Tambien podemos ponerle un fondo a la página. Para poner una imágen de fondo usar el formato siguiente:
<body background="la imagen en .jpg o en .gif"></body> Y para poner un color de fondo este otro:
<body bgcolor="#el color en hexadecimal"></body>
- <img>:
Esta etiqueta es para insertar imágenes. Se usa de la siguiente manera:
<img src="direccion de la imagen .jpg o .gif">
- <b>:
Esta etiqueta es para poner un texto en negrita. Se usa de la siguiente manera:
<b>texto que se quiera poner en negrita</b>
- <u>:
Esta etiqueta es para subrayar un texto. Se usa de la siguiente manera:
<u>texto que se quiera subrayar</u>
- <i>:
Esta etiqueta es para poner un texto en cursiva. Se usa de la siguiente manera:
<i>texto que se quiera poner en cursiva</i>
- El alineado:
<p style="text-align:center;">El texto con este atributo aparecerá centrado.</p>
<p style="text-align:left;">El texto con este atributo aparecerá
alineado a la izquierda.</p>
<p style="text-align:right">El texto con este atributo aparecerá
alineado a la derecha.</p>
<p style="text-align:justify">El texto con este atributo aparecerá justificado, es decir, con los márgenes alineados a derecha e izquierda.</p>
- El color del texto:
<p style="color:#el color en hexadecimal">el texto que se desee escribir en ese color</p>
- El tamaño del texto:
Para esto se pueden usar cabeceras. Desde el <h1> (el mas grande) hasta el <h6> (el mas pequeño). Esto iria asi:
<h2>el texto que se quiera introducir en ese tamaño</h2>
- Los enlaces:
Los enlaces se hacen para ir a otra página, la etiqueta usada es <a href>. Por ejemplo:
<a href="la dirección de la otra página">el texto que quieras que aparezca como enlace</a>
Colavoración;)
Este apartado es para deciros que como es normal no habre puesto todo, asi que os pido porfavor que si veis algo que falta o una información suplementaria lo posteeis y actualizaré el post. Asi elte tutorial dejara de ser mini :D y podra conseguir un pequeño puesto fijo en este foro:) Pensad en lo feliz que sera... :D
Ya publicaré aqui los nombres de los colavoradores y gracias por adelanto.
Pues solo me queda saludaros :D y recordaros que podeis copiar este texto y pegarlo en cuantas páginas querais, porque solo es información y no es propiedad de nadie;)