Clase 5: ¿Qué es HTML?¿Para qué sirve?¿Como se usa? Etiquetas mas usadas.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
Voy a empezar esta clase, explicandote qué corcho es el HTML, segun sus siglas en ingles es algo como HyperText Markup Language... pero ya que eso realmente nos importa un carajo y no nos explica nada, voy a explicarlo en criollo:
Es un lenguaje que enriquece el texto plano, a traves de las llamadas ETIQUETAS.
Para mostrarlo con un ejemplo:
<strong>Hola gordo</strong>
En HTML, da como resultado:
Hola gordo
Estas etiquetas, se usan solo en el codigo fuente de la pagina, pero cuando el navegador web las descarga, lee e interpreta, elimina esas etiquetas y ejecuta lo que estas etiquetas demandan.
La etiqueta <strong>, del ejemplo, sirve para resaltar palabras o conceptos importantes. Aunque bien podrias escribir la biblia entre esas etiquetas, y no habria ningun problema.
Casi todas las etiquetas tienen una version de apertura, y una de cierre. <strong> Indica que a partir de la etiqueta, todos los caracteres siguientes deben estar en negrita, hasta que se encuentre la etiqueta de cierre: </strong>
Taringa usa BBCodes, que son etiquetas, pero que usan corchetes ([]) en lugar de signos de mayor y menor (<>) y usa otros nombres.
En html para resaltar un texto lo encerras con la etiqueta <strong></strong>, mientras que en taringa usas [b ][ /b]
Lo que no significa que taringa use algun lenguaje extraterrestre, sino que busca simplificar el tipeo para el usuario. Y al enviar esos bbcodes, una pagina procesadora los recodifica y reemplaza los corchetes y codigos especielas por sus correspondientes equivalentes en HTML.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
Aca te voy a dar un machete que me imagino que te va a servir bastante en tus primeros pasos:
<!DOCTYPE> Se pone antes de la etiqueta <html>. Le indica al navegador que version de HTML esta usando la pagina. Generalmente no te va a causar ninguna molestia, ya que en los IDEs suele ponerse automaticamente al crear una pagina nueva.
<html></html>
Son las etiquetas principales de TODAS las paginas web. Dentro de ellas se encuentran las etiquetas de head, y body (En la cual se encuentra el contenido presentado al usuario). Son de uso obligatorio.
--------------------------------
<head></head>
Son las etiquetas dentro de las que vas a colocar toda la informacion que necesita el navegador para presentar correctamente tu pagina.
Dentro de esta se usan las etiquetas:
<title></title> Entre las que se indica el titulo de la pagina, y que va a ser mostrado en la barra de titulo del navegador.
<meta> Este es una de las etiquetas que no tienen cierre. Esta etiqueta confiere atributos a la pagina. Por ahora no las vamos a estudiar, pero van a ser muy utiles en el futuro, para pocicionamiento en buscadores y demas.
Dentro de las etiquetas <header> se suele incluir el fichero que contiene los estilos .css (Si es que es externo)
<link href="TuArchivoDeEstilos.css" rel="stylesheet" type="text/css">
(Es mas larga que los demas solo porque tiene declarados sus atributos: "href"(Direccion del fichero), "rel"(Le dice al navegador la funcion que tiene el fichero enlazado en relacion con el actual. En este caso es dar estilos.) y "type"(tipo, determina la forma en que lo va a interpretar el navegador))
--------------------------------
<body></body> Una de las etiquetas mas importantes de HTML. Entre ellas va a encontrarse todo el contenido visible del sitio. Dentro de estas etiquetas vamos a construir nuestra pagina, usando muchas otras etiquetas como:
<div></div> Son capas en HTML. Aunque no entiendo por que se las llama asi, porque a mi siempre me parecieron simplemente cuadrilateros que podes manejar a tu voluntad. Son la base de mis diseños, uso estas etiquetas a full.
<a></a> Simbolizan los links. Solo con encerrar un texto entre estas etiquetas no causa nada, es necesario declarar el atributo "href". Ejemplo de link que dirije hacia Facebook.
<a href="http://www.facebook.com/profile.php?=743264506">Facebook del usuario mas sexy de facebook.</a>
Que es el equivalente taringuero a Facebook del usuario mas sexy de facebook (Fijate, yo le re doy)
<ul></ul> Es la etiqueta de lista que voy a usar yo. Esta representa el comienzo y el fin de una lista desordenada de elementos. Existen otras para una lista numerada, o una lista de definiciones, pero no son demasiado utiles, y no me parecio muy necesario explicarlas por ahora.
<li></li> Se usan dentro de las etiquetas <ul>. Representan el comienzo y el final de un elemento de la lista.
<iframe></iframe> Suele ser util, pero en contadas ocaciones. Nos permite crear un espacio reservado para la carga de un sitio ajeno al nuestro. Para dar un ejemplo, si al iframe le decis que cargue un post de taringa, lo va a hacer, y se va a ver en el lugar de tu pagina que vos quieras. Tambien se usa para publicidades. Sus atributos principales son "src" (La pagina a cargar), "width" (El espacio horizontal que va a ocupar el iframe) y "height" (el espacio vertical que va a ocupar).
<hr> (Sin etiqueta de cierre). Genera una linea horizontal a modo de separadora de temas.
<table></table> Entre estas etiquetas se usan <tr></td>(Fila) y <td></td>(Columna), es medio embolante entenderlo con teoria, pero si despues lo uso en la practica vas a ver que es una gilada.
--------------------------------
<form></form> Una de las etiquetas mas utiles de la galaxia. Entre estas etiquetas vamos a poner distintos inputs, como areas para introducir texto, listas de seleccion, y todas las pelotudeces que tienen los formularios. Sus atributos principales son "method" (POST o GET), y "action" (url del archivo php que va a procesar los datos que recogio la form)
Vamos a ver un ejemplo:
<input type="" name="ElNombreQueSeTeCante" />
Type es el tipo de input que va a crearse:
- text: Es una entrada de texto comun, como la qe se usa para pedir usuarios y contraseñas al logear.
- password: Tiene la misma utilidad que el text, solo que los caracteres que se ingresen van a mostrarse como circulos, con intencion de confidencialidad. Logicamente se usa para pedir contraseñas.
- submit: Sirve para enviar el formulario en el que se encuentra. Genera un boton pulsable por el usuario, para darle un texto personalizado al boton, se debe añadir el atributo "value" a la etiqueta <input>
Esto es menos de la mitad de los inputs que se puede poner, son los MAAAAS basicos, por eso los puse, si los pongo todos el post no va a terminar nunca y seria demasiada teoria densa que posiblemente ni la mitad de la gente lea, pero en la practica, que es la manera mas efectiva de aprender, si que voy a usar mas inputs.
<------------------ Y de pronto una barra separadora salvaje aparece ----------------->
Son las etiquetas mas basicas y fundamentales que se me ocurrieron, en el transcurrso de las clases seguramente voy a usar alguna que no este aca, pero igual voy a explicar todas las que use.
La clase que viene va a ser una muestra de como se construye un sitio web en html. Si tengo tiempo hago un video, sino voy armado el post de a poco. Nos vemos!