Primero HTML, luego CSS y Javascript

Para crear una página web necesitas aprender tres sencillas tecnologías muy fáciles de aprender; HTML, CSS y Javascript.

Juntas permiten crear aplicaciones sofisticadas, ejemplo de ellas son instagram, twitter y facebook, veamos que son estas tecnologías.

HTML permite crear el contenido de nuestra página o aplicación de manera organizada, sin HTML no podrás ver tus fotos en facebook.

CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el diseño, colores, tamaño de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y demás características de diseño. Sin CSS seria muy dificil de entender tu muro de facebook, todo estaría muy revuelto.

Y finalmente Javascript te permite interactuar dinámicamente con la aplicación, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicación o escribimos un comentario.

Desde mi punto de vista lo ideal es aprender primero HTML, luego CSS y al final JavaScript para cualquier aplicación web y muy importantes cuando queremos crear aplicaciones móviles híbridas

Ejemplo HTML

El siguiente ejemplo muestra como crear tu primera página web, si lo quieres probar en tu computadora, crea un archivo llamado index.html, después copia y pega el código de este ejemplo.

Para ver tu página recién creada solo realiza un doble click sobre index.html desde tu explorador de archivos.

 

Explicación del código

Lo primero que existe en nuestro código es la etiqueta <!DOCTYPE html>, esta etiqueta indica al navegador las sintaxis y reglas que formaran a nuestra página web. Pero ¿Qué es una etiqueta?, una etiqueta es la unidad principal con la que se crea el contenido de una página o aplicación web.

Partes de una etiqueta HTML
Partes de una etiqueta HTML

Luego tenemos la etiqueta <html>, indica el inicio de nuestra página web, todas las demas etiquetas deben estar dentro de esta, el final de la etiqueta se marca con casi el mismo código, pero con una digonal despues del signo <, asi </html>.

Casi todas las etiquetas tiene su etiqueta de cierre </nombre-etiqueta>, digo casi todas porque la etiqueta DOCTYPE no tiene cierre. No te preocupes son pocas las que no se cierran.

Algo que destacar en la etiqueta <html lang="es"> es que tiene este atributolang, el cual quiere decir language(idioma) y su valor es significa español.

El atributo lang ayuda al navegador web a seleccionar texto, revisar la ortografía, traducir tu página, convertir el texto en audio y más.

Ahora bien, <html> tiene solo dos etiquetas hijas, <head> (cabeza) y <body> (cuerpo).

La etiqueta <head> puede contener lo que se le llama metadatos y esta información no es visible para el usuario.

La etiqueta <body>contiene toda la información visible que deseas mostrar al usuario. Todo el contenido que puedas ver en una página web o aplicación esta dentro de la etiqueta <body>.

En nuestro ejemplo, dentro de la etiqueta <head> podemos ver dos etiquetas <meta>, meta viene de meta information. En el meta <meta charset="utf-8"> usa un atributo charset con valor utf-8, esto indica la codificación de caracteres de la página y nos permite tener caracteres raros de otros idiomas que de otra manera no se visualizarían correctamente, ejemplos concretos serian la ñ y vocales con acentos para el idioma español.

Aún teniendo este meta, es importante guardar el archivo en tu editor de código con codificación de caracteres UTF-8, probablemente no tengas que preocuparte de esto en los editores modernos como Sublime text, Atom y Visual Studio Code. Como dato curioso, Atom y Visual Studio Code estan creados con Javascript.

El meta <meta name="viewport" content="width=device-width,initial-scale=1"> es muy útil cuando nuestra página es visualizada en dispositivos móviles, width=device-width permite tomar todo el ancho de nuestra pantalla móvil, initial-scale=1 evita que ciertos dispositivos le apliquen algún tipo de Zoom o aumento inicial a nuestra página. Con este meta obtenemos un diseño congruente entre navegadores web, computadoras y dispositivos móviles por lo que te recomiendo que lo incluyas en todas tus páginas web.

Una nota importante es que las etiquetas <meta> y <!DOCTYPE html> no tienen su correspondiente cierre o final de etiqueta, esto es así porque estas etiquetas realmente no tienen contenido visible del elemento como pasa con la etiqueta <html></html>, <body></body> o el encabezado <h1></h1>.

El único elemento visible dentro de la etiqueta <head>, es la etiqueta <title>, el contenido de title se muestra en la pestaña de tu navegador.

Después tenemos a la etiqueta <body>, la cual contiene todo el demás contenido visible de nuestra página, dentro tenemos 6 etiquetas, <h1> a <h6>, la hsignifica Heading (encabezado), se ocupan para mostrar títulos o encabezados, <h1> es el mayor y <h6> es el menor.

Más abajo tenemos nuestro primer párrafo, para crear un párrafo se utiliza la etiqueta <p>, p significa Paragraph (parrafo). Luego tenemos dos listas de elementos ordenados y desordenados.

Para crear una lista de elementos desordenados utilizamos la etiqueta <ul>, ul (Unorder List). Para crear una lista ordenada utilizamos <ol>, ol (Order List). Estas dos listas contiene tres etiquetas <li>, li significa List Item (Elemento de Lista).

Como vemos, no es difícil crear contenido para nuestra página, lo único que necesitamos saber son los nombres de las etiquetas y para que nos sirven, aquí puedes encontrarlas, no tienes que memorizarlas, pero si comprender como se usan, así cada vez que necesites de alguna siempre puedes consultar en el anterior enlace.

En futuras publicaciones profundizaremos como funciona nuestro contenido HTML con CSS (Cascade Style Sheet, Hojas de Estilo en Cascada), para terminar incluyendo también Javascript.

1 Comment

Deja un comentario