Hola a Todos, y Bienvenidos a este Nuevo Post, Donde Les Vengo a "Enseñar" Algunas Cosas Basicas de HTML para que A Los que les Gusta Puedan Hacer su Propia Pagina Web.
Yo Les Digo los Comandos Basicos Como y Cuando hay que usarlos, pero como los usen y para que, depende de ustedes, yo no les voy a decir como se tienen que crear la web exactamente, sino que sabiendo estas cosas, usan su imaginacion para acomodarlas de cierta forma para que quede prolijo y lindo.
Antes de Empezar, Les voy a Recomendar un Programin para esto, se llama Gedit, es para Linux, pero esta la version para Windows, es muy simple de Usar, y Trae un Monton de Lenguajes de Programacion, asique al seleccionar uno y poner los codigos te los marca de un color si estan Bien y sino de otro, y los colores son Personalizables.
Personalmente Yo lo Usaba, pero me tardaba un poquitin en abrir y me parecia incomodo, asique uso el Notepad, Bien Basico.
¿Que es HTML?
Este lenguaje esta constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.
Estructura Interna
Muchos elementos HTML requieren una marca de comienzo y otra de finalizacion. Todo aquello que esta fuera de las marcas del lenguaje sale en la Pagina como un texto.
Asi como en Este Ejemplo se Puede Ver... Todo Aquello que no este entre < y > se ve como si fuera un simple texto.
<html>
<head>
</head>
<body>
Esto se veria como un Simple Texto.
</body>
</html>
Las Lineas que si esten entre < y > Simplemente serian Invisibles, como si no estubieran alli.
Tambien a lo Largo que vallamos Explicando lo que hace cada comando, vamos a ver Argumentos. Estos Argumentos lo que hacen es darle propiedades a lo que sea que este dentro de el Comando con los Argumentos.
Por Ejemplo <body> Tiene Estos Argumentos:
background Para Poner una Imagen de Fondo en la Web (Se Repite)
bgcolor Para poner un color de fondo en la web, reconoce Hex a Decimal y palabras como Black, Green y algunas otras [Colores en Ingles]
text Color del texto por defecto de la web, reconoce Hex a Decimal, y funciona para todo tipo de texto en la web.
link Color para Los Links, asi como en Taringa son azules, se pueden poner por ejemplo #00FF00 (Verde en Hex a Decimal)
alink Define el Color del Link activo, reconoce Hex a Decimal
vlinks Define el Color de Los Links, reconoce Hex a Decimal
Se Aplican Usando La Siguiente Sintaxis:
atributo="datos"
por si no Entendieron Atributo es el atributo que quieren poner, y los datos, serian, colores, imagenes mediante links, etc.
<body bgcolor="#333333">
<body background="http://www.pagina.com/imagen.png">
Ahora Empecemos con Algunas Cosas Basicas sobre la Programacion en HTML
Titulo
Toda Pagina debe Tener un Titulo, pero si estoy creando la Mia, ¿como le pongo uno? es Muy Simple, con el Commando <tittle>, con el Podras ponerle un titulo a Tu Web. El Titulo No Puede Ir Ubicado en Cualquier Parte, sino que debe ir dentro de <head> y </head> no solo por comodidad, o porque quede prolijo, sino porque hay una estructura que debe cumplirse. Dejo un Ejemplo de como se haria.
<html>
<head>
<title>Mi Primera Pagina Web</title>
</head>
<body>
contenido de la pagina
</body>
</html>
Salto De Linea
Si Tenemos un Texto Hecho en un documento, y queremos pasar de linea, como normalmente decimos "punto y aparte" ya tenga punto o no, usamos el comando <br> al Final del Texto, todo lo que este despues de este comando queda en la linea de abajo.
Aca Tengo Mi Texto y yo quiero... <br>
Pasar a otra Linea.
Se Veria Asi:
Aca Tengo Mi Texto y yo quiero...
Pasar a otra Linea
o En el Caso de que lo hicieras de este Modo:
Este es Mi Texto en Linea 1 <br> y Este es Mi Texto en la Linea 2
Tambien Funcionaria.
Parrafos
Si Estan Haciendo un Texto Largo y Organizado como se debe, (En Parrafos), Se Deberia usar el Comando <p>, Este Comando, P Viene de Paragraph (Parrafo), Esto lo que haria al encerrar un texto entre <p> y </p> es que Nos Dejaria el Espacio que deberia Ir, separando el Texto de arriba, y tambien con el de abajo. Otra Caracteristica de Este Comando, es que Deja una Sangria Pero NO al inicio de cada Enunciado, sino en cada linea del Parrafo.
Aca Tengo un Simple Texto Cualquiera.
<p>
Aca Empezaria yo a armar mi Primer Parrafo, el cual servira de ejemplo para un post en Taringa.
</p>
<p>
Aca Iria el Segundo Parrafo, el del Medio, para Mostrar como quedarian las Separaciones.
</p>
<p>
Este es el Tercer Parrafo y es para mostrar el espacio entre el parrafo de arirba y este, y el texto de abajo
</p>
Otro Texto Cualquiera.
Asi Se Veria:
Encabezados
Un Encabezado Seria como el Titulo de un Texto, este va con letra mas grande y/o resaltado de alguna forma, para hacer simples encabezados con HTML vamos a usar el comando <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Dudas Comunes:
¿Solo hay para hacer 6 Encabezados?
//R: No, podes poner todos los que quieras.
¿Para que Son Los Numeros en estos Comandos y porque solo hay hasta 6?
//R: Bueno, esto pasa, porque hay variso Tipos de Encabezados, como ya Notaron, son 6. Lo que tiene de Diferencia el 1 con el 3 Por ejemplo, es que, el 1, seria como un encabezado mas "Importante", y por lo tanto deberia resaltar mas que los otros, por lo cual, si ponemos un encabezado con <h1> lo que deberia pasar es que el Encabeado Salga con una Fuente Mas Grande, y Mas Gruesa que un Texto Normal. y con el <h3> Pasaria lo Mismo, pero con letra Mas Chica, pero Igual es Notable la Diferencia.
<h1>Titulo</h1>
<h2>Titulo</h2>
<h3>Titulo</h3>
<h4>Titulo</h4>
<h5>Titulo</h5>
<h6>Titulo</h6>
Esto se Veria Asi:
(La Img Tiene Zoom, no son Tan Grandes )
Enfasis
Enfasis seria Resaltar una Palabra Importante por Ejemplo de un Texto, por su Importancia.
Para Esto podemos Usar <em> y/o <strong>.
Aca voy a nombrar una Palabra <em>Importante</em> y sigo con el texto.<br>
Aca voy a nombrar otra cosa <strong>Importante</strong> y Seguimos con el texto.
Esto se Veria Asi:
Hypervinculos o Links
Como Seguramente ya se Imaginan, un Hypervinculo / Link es un Texto, que al Hacerle Click, te lleva Hacia, otras paginas, o secciones de la misma. El Comando para esto es <a>, Tiene Sus Atributos Para que funcione, sino solo quedaria como decoracion, porque no haria nada.
href es el Atributo que indica a donde te debe llevar al Darle Click
id asigna una tag al elemento para distintos usos, lo explicare mas adelante.
title asigna un titulo, que aparece al poner la flecha sobre el.
accesskey asigna una letra que al ser pulsada activa este comando.
Estos son Los Mas Basicos y Primitivos, los que mas van a usar, almenos son los que yo mas uso. Ahora voy a Pasar a Dejar unos Ejemplos de <a> con cada uno de sus atributos.
<a href="http://www.taringa.net/elnicaso">Ir a el Perfil de elnicaso</a>
<a href="pagina2.html">Ir a la Segunda Pagina</a>
Este es Identico, pero solo funciona si el archivo pagina2.html esta en la misma carpeta que el html donde pusistes ese hypervinculo.
<a href="http://www.taringa.net/elnicaso" title="Ir a el Perfil de elnicaso - Taringa!">Ir a el Perfil de elnicaso</a>
Asi Funcionaria si el archivo Existe y lo encuentra.
El <a href="_______"> Tambien se puede usar para hacer Links con Imagenes / Botonces Etc. ¿Como Lo Hago? Simple, donde va el Texto que yo puse Ir a el Perfil de elnicaso - Taringa! ahi ponemos el objeto que va a ser el link. Un Ejemplo Muy comun:
<a href="http://www.taringa.net/elnicaso" title="Ir a el Perfil de elnicaso - Taringa!">
<img src="http://a12.t26.net/avatares/3/5/1/2/120_3512276.jpg?923805">
elnicaso :D</a>
Lamentablemente no Puedo poner un Ejemplo del Access Key con Imagenes, y el ID lo voy a explicar en otro post porque sirve para cosas un poquito mas avanzadas.
Imagenes
Toda Pagina Web Tiene Imagenes, sino seria muy aburrido, textos y mas textos, pero ¿Como Pones una Imagen? Muy Simple, con el Comando <img> con su mas importante atributo src que es el que indica la ubicacion de la imagen. A Diferencia e Otros Comandos no hay que cerrarlo, es decir no hace falta </img>
Puede Ser src="http://www.pagina.com/imagen.png" por ejemplo, la variedad de formatos es amplia.
o Tambien src="imagen.jpeg" si la imagen esta en la misma carpeta que el archivo .html donde la cargan.
<img src="http://a12.t26.net/avatares/3/5/1/2/120_3512276.jpg?923805">
Asi quedaria.
Bueno espero que les haya Gustado este Post de la Basico de lo Mas Basico de HTML, el cual continuare Muy Probablemente Mañana 22/03/2013 en la Parte 2 Explicando mas Cosicas, Y Avanzando poco a poco. Bueno, Es Todo por Hoy asique Me Despido!! Vamos un Abruzo Hasta Luegoo!