InicioInfoBasico sobre HTML con imagenes

Basico sobre HTML con imagenes

Info1/14/2012

Hola!! aqui les traigo este post para que aprendan algo sobre HTML nadamas lo basico y puedan hacer algun index, ehm pues lo primero es decirles que para programar en HTML solamente necesitan un editor de texto plano, ya sea como el Bloc de notas (Notepad) de windows

Tambien tienen programas como Dreamweaver que les hacen todo por ustedes, pero pues en mi caso me gusta ser masoquista y hacer todo desde el bloc de notas xDDDDDDDD bueno yo uso Geany , bien entonces se abren el bloc de notas y empezamos

lo primero que deben saber es que HTML es un lenguaje de etiquetas , que quiere decir esto? pues simple que para todo van a usar etiquetas , asi por ejemplo en el BBCode para hacer post en Taringa, o en este foro como por ejemplo: [*right][*/right] en HTML usaremos etiquetas solo que esas tienen < en ves de [ y > en ves de ] por ejemplo, todo archivo HTML debe tener minimo esta etiqueta < html > y si cierre de esta etiqueta sera marcado como </ html > exactamente la misma pero con una diagonal / despues del < ok, dentro de esa etiqueta tendra que tener otras 2 etiquetas que son <head> y <body> por decirlo de forma rapida, <head> es todo lo que no se "ve" dentro de la pagina y <body> lo que si se ve, es el cuerpo de la pagina, dentro de la etiqueta head vamos a meter por ejemplo, el titulo de la web (lo que saldra en el titulo de la ventana del navegador al entrar a la pag), incluir archivos como el favicon, las hojas de estilo, algun JavaScript, los metatags etc, en este post no trataremos mas que el titulo, el titulo se pone dentro de la etiqueta <title> entonces nuestro "script" quedaria algo asi:



<html>

  <head>
    <title>Titulo pagina</title>
  </head>

  <body>
    Cuerpo de la pagina
  </body>

</html>



pongan algo como esto en un bloc de notas lo guardan como index. html y lo abren con el navegador, les saldra algo asi



otra cosa seria que HTML no diferencia los "enters" que le damos, por ejemplo si escribimos



<html>

  <head>
    <title>Titulo pagina</title>
  </head>

  <body>
    Cuerpo de


    la pagina
  </body>

</html>



nos saldria exactamente igual al anterior si queremos hacer un "enter" tenemos que usar ya sea la etiqueta <p> que tiene el cierre </p>, esta etiqueta sirve para poner parrafos, o la etiqueta <br> que no tiene cierre, simplemente es para poner un espasio, por ejemplo pongamos



<html>

  <head>
    <title>Titulo pagina</title>
  </head>

  <body>
    <p>Primer parrafo de la pagina</p>
    <p>Segundo parrafo de la pagina</p>
    <p>Tercer parrado de la pagina<br>Ejemplo de para que sirve el BR</p>
  </body>

</html>



y nos saldra algo asi:



si quisieramos cambiar los colores de la letra y el fondo entonces dentro de la etiqueta <body> tendriamos que agregar los atributos bgcolor y text el bgcolor sirve para elegir el color del fondo y text sirve para el color de la letra, los colores se ponen en ingles o lo mas usado en hexadecimal, tienen una lista de los colores en esta pagina:

http:// html -color-codes.info/codigos-de-colores-hexadecimales/

los atributos los ponemos de la siguiente forma en la etiqueta:

<body bgcolor="color_hexadecimal" text="color_hexadecimal">

por ejemplo pongamos asi:

<html>

  <head>
    <title>Titulo pagina</title>
  </head>

  <body bgcolor="#000000" tetx="#FFFFFF">
    <p>Primer parrafo de la pagina</p>
    <p>Segundo parrafo de la pagina</p>
    <p>Tercer parrado de la pagina<br>Ejemplo de para que sirve el BR</p>
  </body>

</html>


eso seria fondo negro con letras blancas como se muestra en la siguiente imagen:



ahora si quisieramos por ejemplo agregar una parte del texto mas grande usariamos la etiqueta <h1> que puede ser tambien <h2> o <h3> ya no recuerdo hasta donde era, creo que era hasta el 6 xD, pero el h1 es el mas grande, por ejemplo pongamos:

<html>

  <head>
    <title>Titulo pagina</title>
  </head>

  <body bgcolor="#000000" text="#FFFFFF">
    <h1>Texto Grande con H1</h1>
    <h2>Texto un poco menos Grande con H2</h2>
  </body>

</html>


y nos saldra algo asi:



ahora si quisieramos ingresar una linea que separe 2 partes entonces la agregariamos con la etiqueta <hr> que no tiene cierre, y si quisieramos agregar una imagen seria la etiqueta <img> que tampoco lleva cierre y usa la siguiente sintaxis:

<img src="LinkDeLaImagen">

y si quisieramos agregar un link es la etiqueta <a> con su cierre </a> que lleva la siguiente sintaxis:

<a href="Link">Texto</a> en la siguiente imagen se muestra un ejemplo de estas ultimas 3 etiquetas :



el codigo fuente de eso es:

<html>

  <head>
    <title>Titulo pagina</title>
  </head>

  <body bgcolor="#000000" text="#FFFFFF">
    Texto 1
    <hr>
    Texto 2 que fue separado con HR
    <hr>
    <img src="http://i1203.photobucket.com/albums/bb397/LordAlucard367/Team%20SWU/Sello.png">
    <hr>
    <a href="http://SocietyUnderground.tk">si das click aqui iras a SocietyUnderground.tk</a>
  </body>

</html>


Tambien hay otras etiquetas que serian por ejemplo:

<marquee></marquee>

para texto en movimiento

<table></table>

para poner tablas

etc, pueden buscarlas en internet, por ultimo yo les aviso que nadie me enseño a mi programar en HTML fui aprendiendo solo, y aunque es un lenguaje bastante sensillo quisas me pueda equivocar en algo, si es asi les agradeceria que me corrigieran

Tambien los quiero invitar a mi pagina entren es la siguiente:

SocietyUnderground.tk
Datos archivados del Taringa! original
0puntos
112visitas
0comentarios
Actividad nueva en Posteamelo
0puntos
1visitas
0comentarios
Dar puntos:

Dejá tu comentario

0/2000

Autor del Post

C
CrozzCyborg🇦🇷
Usuario
Puntos0
Posts10
Ver perfil →
PosteameloArchivo Histórico de Taringa! (2004-2017). Preservando la inteligencia colectiva de la internet hispanohablante.

CONTACTO

18 de Septiembre 455, Casilla 52

Chillán, Región de Ñuble, Chile

Solo correo postal

© 2026 Posteamelo.com. No afiliado con Taringa! ni sus sucesores.

Contenido preservado con fines históricos y culturales.