Diseño y Programacion Web – Clase 2 – Conociendo HTML

programacion lenguajesprogramacion lenguajes

HTML es nuestro lenguaje de programacion web por defecto. Mucha gente les va a decir que HTML no es un lenguaje. Hasta HTML 4 no existio el concepto de lógica. No podiamos sumar numeros, restar, procesar datos como lo hariamos con PHP. El problema es que HTML no es para eso. Se trata de un lenguaje de markup o marcado en el que declaramos los elementos que se mostraran en la pagina. Sin HTML, no hay sitio visible. Es el responsable de la creacion de formularios, parrafos y demas elementos que vemos en un sitio web.

Estructura de HTML

Vamos a agarrar nuestro editor de textos favorito, y escribiremos estas lineas de codigo:

Todo sitio html que armemos va a empezar y terminar con los tags <html></html>. Tenemos una especie de cabecera llamada <!DOCTYPE> que sirve para indicarle al navegador que el documento que esta abriendo es un HTML; Mas info al respecto aqui. Luego en el tag <head> (la cabecera) pondremos el titulo del sitio(<title>), la codificacion para evitar caracteres raros cuando usamos acentos o eñes, y el viewport para que nuestro sitio se adapte a mobile. Con respecto a este ultimo tema, encontre un blog que lo explica detalladamente aqui. En el head tambien se incluyen los archivos css y javascript.

Luego tenemos el <body>. Ahi va el sitio entero, lo que se va a mostrar. Por ejemplo un tipico hola mundo:

Pero vamos a hacerlo como se debe. Ese texto deberia ser un parrafo. Lo vamos a incluir con la etiqueta <p>.

Deben ser lo mas semanticos posibles. Esto significa que el navegador tiene que entender exactamente de que elemento estamos hablando. La utilidad de esto, ademas de ser una buena practica, es por temas de SEO, posicionamiento, y un poco tambien de mobile y css. Parecen elementos mezclados, pero tienen una relacion muy puntual: Todos pueden tomar uno o mas tags de nuestra web e interpretarlo a su manera.

Olvide mencionar que para probarlo deben guardar su archivo con extension .html.

Formas de mostrar texto.

Anteriormente vimos una, el parrafo. Pero tenemos muchas maneras de insertarlo, y las detallo en este Snippet:

Los tag <h*> son titulos en HTML. Los titulos de este blog son <h1> por ejemplo, que es el mas grande. Cuanto mas sea el numero del tag H, mas chico va a ser el titulo. Algo nuevo que agregamos fue <br/>. No es nada mas que un salto de linea. Cuando empecemos con css no lo vamos a necesitar, pero ahora que tenemos solo html es muy conveniente. Igualmente los titulos (<h*>) tienen un salto de linea natural, por lo que agregarle el <br> simplemente le da mas espacio. Podemos agregar cuantos <br> queramos.

Esto seria lo basico para mostrar los primeros textos html. En las proximas clases veremos como trabajar con links, imagenes, videos, tablas y otros elementos.

Be the first to comment on "Diseño y Programacion Web – Clase 2 – Conociendo HTML"

Leave a comment

Your email address will not be published.


*