Frontend  con HTML y CSS

Frontend con HTML y CSS

Desarrollo de Software

¿Qué es Front End, HTML y CSS?

Aprendamos que son estos tres términos que veremos a lo largo del curso y porque son tan importantes para el diseño web.

Fri, Apr 17, 2020 3:49 PM

Para empezar vamos a definir dos conceptos que estaremos trabajando a lo largo de todo el curso, HTML y CSS son los lenguajes con los que funciona el front end del mundo de la web pero tambien podriamos empezar por saber que significa este término.

¿Que es Front End?

En el mundo de la web hay dos campos de desarrollo importante, esto debido a cómo funciona un sitio web, debemos decir que los sitios web son básicamente programas pero funcionan en dos lugares diferentes, una parte del sitio web funciona en el servidor y otra parte funciona en el navegador, el navegador que tienes instalado en tu equipo como Google chrome, Firefox o Microsoft Edge. 

Estas dos facetas son las conocidas como Back End (Del lado del servidor) y Front End (del lado del cliente), como ya te imaginaras en este curso nos centraremos en el Front End, es decir en lo que pasa en el navegador de tu computador, y este mundo del Front está dominado por 3 lenguajes que son HTML, CSS y Javascript.

En este curso nos centraremos solamente en HTML y CSS, Javascript no estará incluido ya que tendrá su propio curso en el que se ahondara más en lo que refiere a lenguajes de programación, y de una vez te adelanto lo siguiente: HTML y CSS no son lenguajes de programación, pero son la piedra angular sobre la que se soporta la web, desde ahí tienes que partir para empezar a construir sitios web.

¿Qué es HTML?

HTML si es un lenguaje de computadora pero no es un lenguaje de programación, es solo un lenguaje para crear documentos, sus siglas HTML (Hypertext Markup Language) traducen Lenguaje de marcas de hipertextos, pero hasta aquí creo que no te he dicho mucho, para dejarlo mas claro solo imagina que html es el lenguaje en el que se escribe el contenido de una página web y tiene cierta estructura para que el browser (navegador) entienda que es lo que quieres mostrar.

De la misma manera que con Microsoft Word puedes abrir archivos .doc que son documentos, con el navegador puedes abrir otros archivos que son .html o simplemente hipertextos, y así como Microsoft Word tiene una forma de escribir sus archivos para que el programa lo entienda, también la web tiene este lenguaje que da la estructura a los documentos para que el programa (Browser) la entienda, estos archivos usualmente tendrán la extensión .html o .html y por lo general los computadores abren estos archivos por defecto con el navegador.

Ejemplo de archivo HTML

Primer archivo HTML

Es ejemplo de documento daría como resultado la siguiente página en el navegador:

Resultado final del documento HTML

Aunque puede que aún no entiendas el codigo que estas viendo por ahora solo es importante que te quedes con el concepto de HTML como lenguaje con el que se estructura el contenido de un sitio web, con este lenguaje podemos poner los títulos, párrafos, imágenes, enlaces y muchas más cosas pero eso lo veremos paso a paso.

¿Qué es CSS?

Este es otro lenguaje pero no es de marcas sino de estilos, es decir en este lenguaje definimos el estilo de los elementos de HTML, estilos como el tamaño, el color, la posición, el tipo de letra (fuente), y muchas cosas más.
CSS traduce (cascade style sheet) Hojas de estilo en cascada, y lo podemos considerar simplemente como un archivo que guardará propiedades de nuestro elementos html para que se vean cool en el navegador. Al igual que los archivos de HTML tienen una extensión (.html) estos también la tienen (.css) con lo que tus archivos podrían ser por ejemplo archivo.css, pero es importante que sepas que los archivos CSS son propiedades de un archivo HTML, así que aunque puedas ver un html sin CSS, no es posible ver un archivo de CSS sin su respectivo HTML.

En el siguiente ejemplo puedes ver un documento HTML con un título principal <h1> y un párrafo <p>, y también ver el documento css que lo acompaña en el que se dan propiedades de color y alineación de texto.

Eso es todo por ahora, en la siguiente clase veremos como construir nuestro primer documento de HTML y empezaremos un proyecto personal que te podra resultar muy util.

Actividad

En la siguiente url https://codepen.io/kalvinmanson/pen/QWjNeOm puedes editar el código asi que reemplaza el texto que dice “Este es mi primer archivo HTML” por tu nombre, y el texto que dice “Este es un párrafo dentro de mi pagina html”, por alguna información personal tuya, luego en la parte de css cambia el color rojo “color: red” por un color verde.

Una vez que termines saca un pantallazo y publicalo como respuesta a esta actividad.