Un saludo gente de la comunidad
Para esta oportunidad, les traigo un tutorial muy simple, rapido y sin dificultad alguna de como usar el lenguaje HTML para crear paginas web no dinamicas, es decir, que solo la usamos para mostrar un contenido definido...
Antes que todo unas pautas que nos sirven, de preparacion e informacion importante
- Sabias que una pagina web, la podemos hacer hasta con el bloc de notas?. Pues si, parece muy absurdo, ya que el bloc de notas no es mas que un editor/procesador de texto sin formato, pero para informarnos, si que podemos guardando en formato .html luego nuestro explorador leera este formato lo reconocera como un archivo HTML de pagina web y lo interpreta, de hay surge el uso del bloc de notas, por ejemplo:
Codigo HTML dijo:
<html>
<head>
<title> Prueba </title>
</head>
<body bgcolor="lightyellow">
<table width="100%" border="1" bordercolor="yellow" bgcolor="lightyellow"> <tr>
<td>
<p align="center"><b>Como puedes ver, esto se interpreta en HTML </b></p>
</td>
</tr>
</table>
</body>
</html>
[/quote]
Te dejo la tarea de que copies, y pegues ese contenido citado en un bloc de notas, luego le das a guardar como y le pones inicialmente el nombre que quieras pero poniendo de formato al final .html Por ejemplo: pagina.html
OJO: Esto es un modo, este no es nuestro caso, los profesionales o gente que prefiere lo mas comodo usamos editores HTML adaptados para este tipo de trabajo
Comencemos
- Html se basa de un lenguaje muy sencillo que funciona con etiquetas y meta-etiquetas, cada una de estas cumple cierta funcion determinada que se interpreta atravez de los navegadores web que usamos dia a dia.
A continuacion una tabla con las etiquetas basicas en HTML
Cuando quieres comenzar un sitio deberas usar estas etiquetas
<html> - </html> = Esta es la etiqueta que determina que el codigo escrito esta y debe ser interpretado en formato HTML
<head> - </head> = Se ubica en el tope de nuestra pagina, aqui, normalmente ponemos lo que es la etiqueta titulo, los meta para buscadores y configuramos el estilo de nuestra pagina.
<meta name=""> = Esto seria la famosa meta-etiqueta, para un caso ejemplar, se puede decir: los motores de busqueda realizan la lectura de estas etiquetas y anexan informacion de acuerdo a lo escrito en ella, tiene muchos tipos de uso. Para mas informacion puedes acceder Aqui (Esta Informacion Proviene del Indice de Ayuda de Google)
<title> - </title> = Entre estas dos etiquetas escribimos lo que es el titulo de la pagina, la cual es parte fundamental para la identificacion de nuestra pagina.
<body> - </body> = Esta etiqueta vamos a hablar un poco mas, debido a que esta tambien es parte de lo que es la configuracion del estilo de la pagina y como su referencia de etiqueta lo dice, es el cuerpo de la pagina, aqui va el 90% del contenido que tengamos.
Esta etiqueta contiene elementos configurables como son:
bgcolor="" - Esta propiedad determina el color de fondo de nuestra pagina.
text= "" - Esta determina el color del texto.
link= "" - Esta determina el color de los hipervinculos.
Ejemplar de uso con sus propiedades: <body bgcolor="white" text="green" link="blue">
Puedes usarlo tambien con una paleta de Colores HTML
Etiquetas para El Contenido
Vamos ahora a lo que seria el llenado de nuestra WEB con contenido grafico (textual e imagenes)
Textual
Para mostrar texto se usa una o varias etiquetas, que define en cada una de ellas caracteristicas de estilo en el texto que deseemos.
<p> Texto </p> (Etiqueta Comun) = Esta es la mas usada, pues se basa simplemente en mostrar un texto de la manera mas natural posible...
<b> Texto </b> = Esta etiqueta se usa para mostrar el texto resaltado en negrita.
<i> Texto </i> = Esta etiqueta la usamos para mostrar el texto de forma cursiva
<u> Texto </u> = Esta etiqueta se basa en SubRayar que deseemos.
Todas estas propiedades podemos aplicarlas en conjunto sin ningun inconveniente, el resultado seria cada uno de los graficos correspondientes en un texto, por ejemplo:
Si escribimos <p><b><i><u>Hola</p></b></i></u> el resultado seria: Hola
Aplicando propiedades a estos textos
Textos como esto, si quieres cambiar su estilo en totalidad o en la parte basica deberas usar la etiqueta <font> - </font> dentro de la etiqueta del texto que desees (<p><font color="green"> Hola </font></p>
Propiedades Validas en <font>:
-size
-color
Visual (Imagenes)
La propiedad de imagen es una etiqueta sumamente sencilla, se usa apenas con <img source="">. El Source Proviene o hace referencia a la imagen que queremos mostrar, lo que insertamos hay seria un simple o una simple direccion de una imagen. Ejemplo: <img source="http://direccion.web/nombredeimagen.png">. Este seria el modelo de uso.
Por Ahora este seria el Tutorial Basico
Espero que haya sido de su agrado, y sobre todo, que entienda lo explicado, cualquier cosa puede dejar un comentario que con gusto le respondere .
Estoy trabajando en una aplicacion que sea muy explicita con todo lo relacionado a lo web, para que de esta manera podamos aprender con mayor facilidad.
Hasta pronto y muchas gracias por visitar el POST, espero sus comentarios
Actualizado 19/12/11 -- Ajustes Varios realizados...