¿Cómo Aprender Html Y Css Desde

Aprender html y css hoy en día es algo elemental si estás en el mundo del diseño web, aun si utilizas CMS como WordPress o Joomla que ya nos facilitan increíblemente el trabajo de creación de páginas web.

Saber estos lenguajes son necesarios para dejar nuestro sitio cien por cien a nuestro gusto. Con las márgenes, espacios, tipografías, efectos, colores y demás estilos que hacen que nuestras webs se vean profesionales y generen confianza en nuestros clientes y usuarios.

Al terminar de leer este artículo entenderás los conceptos básicos para poder crear o editar el código html y css de tu página web, aún si desconoces completamente estos términos.

Índice de contenidos

Diseño de páginas web en HTML y CSS

Es importante comenzar explicando que existen lenguajes de programación como el php y el javascript, que no se deben confundir con los lenguajes de maquetación como el código html y css, en los que profundizaremos a continuación.

Html significa lenguaje de etiquetas de hipertexto. Es la parte más esencial de una página web. Es el contenido y la estructura de nuestra web.
Css significa hojas de estilo en cascada (Cascading Style Sheets). El css es otro lenguaje de maquetación el cual nos permite darle la apariencia, presentación, funcionalidades o comportamiento que se aplicará a nuestro código html de la página web. Es decir, el css son aquellos efectos o detalles estéticos de lo que estamos viendo en nuestro sitio.

¿Cómo ver el código html de una página web?

Para ver el código html de cualquier sitio web basta con presionar F12 o hacer clic izquierdo y presionar en ver código fuente de la página (Ctrl +U).

Estructura html básica de todo sitio web

Todo sitio web tiene una estructura elemental con ciertas etiquetas como las que veremos a continuación. Puedes abrir un bloc de notas, escribir lo que quieras y luego guardarlo con el nombre de index.html. Así al abrirlo en tu navegador podrás ver los cambios que hayas guardado. De esta manera podrás ir experimentando con las siguientes etiquetas. También puedes usar un editor de código gratuito como visual studio code.

Etiquetas en HTML

Actualmente existen 142 etiquetas de HTML con las cuales se pueden crear párrafos, cajas, secciones, listas, imágenes, tablas, etc. Las etiquetas se conforman por 3 partes:

La etiqueta de apertura <header>,
El contenido (que es lo que verá el usuario).
La etiqueta de cierre </header>.

Veamos las etiquetas más comunes:

<!DOCTYPE html> Esta etiqueta sirve para indicar a la página web cuál será la versión de HTML que se va a ejecutar. Si utilizamos esta etiqueta tendremos la versión html5, que es la más actual hasta el momento.
<head> </head> En esta etiqueta se muestra información para que lea el navegador y no el usuario, como scripts de Google analytics o search console. Además podemos agregar metadatos como por ejemplo <meta charset=»utf-8″ /> . Lo que hará esta etiqueta es que identificará correctamente las tildes y las ñ de todos los textos en español que coloquemos.
<title> </title> Será el título del sitio web.
<body> </body> Aquí colocaremos la información y contenido que queremos que vea el usuario. Como párrafos, imágenes, tablas, etc.
<header> </header> Dentro del body agregaremos esta etiquetas de header. Como su nombre lo indica, es la cabecera del sitio web. Es lo que se repetirá en todas las páginas de la web. En la cabecera podemos encontrar el logo, el menú de navegación, botones, etc.
<content> </content> Es el contenido que habrá en la página web.
<div> </div> Será una sección o bloque de nuestra página web. Es una de las etiquetas más utilizadas.
<h1> </h1>, <h2> </h2> , <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6> Son las etiquetas de encabezados de manera jerárquica.
<hr> Nos agrega una línea divisoria en toda la página
<p> </p> Es un párrafo de contenido.

<ul> </ul> Creará listados. Y si dentro de esta etiqueta agregamos los elementos <li></li>, el listado será desordenado. Si quieres un listado ordenado coloca lo siguiente <ol></ol>.

<a> </a> Agregando estas etiquetas podrás ponerle enlaces a tu propia página web o a cualquier otro sitio web.

Atributos

Las etiquetas de HTML tienen atributos que aportan mayor información sobre un elemento en particular. Por ejemplo en la etiqueta <img podemos agregar el atributo width=”80px”. Le estamos diciendo a nuestro código que la imagen debe medir 80 pixeles. Así que básicamente los atributos son esas “características extra” de lo que indicamos en la etiqueta.

Algunos de los atributos en HTML más utilizados son href, class, src, id, style y lang.

Con estos ejemplos ya has aprendido a crear encabezados, listas, párrafos, imágenes y enlaces. Ahora conoceremos en profundidad otro lenguaje de maquetación con el cual definiremos la apariencia, efectos y funciones de nuestra página web, es decir, el código CSS.

Conceptos básicos de CSS

El código CSS está compuesto por reglas, y cada una de ellas está formada por el selector del elemento, el bloque declarativo, la propiedad y el valor. Con el selector podemos elegir a qué parte del documento se aplica la regla. Mientras que en el bloque declarativo podemos colocar las propiedades, como el color, tipografía, tamaño, etc. Y con el valor cambiamos la característica, por ejemplo si hablamos de color: verde a rojo.

El CSS de nuestro sitio web lo podemos ver en los archivos de nuestro theme de wordpress, en la hoja de estilos que podrás reconocer con la terminación style.css. Cualquier cambio que desees realizar a nivel de CSS podrás hacerlo en este archivo. Si deseas hacerlo directamente en WordPress puedes hacerlo desde el apartado de apariencia ⇨ personalizar ⇨ CSS personalizado.

El código CSS se caracteriza por heredar jerárquicamente sus propiedades a las etiquetas html. Esto nos ayuda a ahorrar mucho trabajo, ya que con unas líneas de código podemos indicar el diseño para varias páginas de nuestra web.

Hoy existen CMS como WordPress en lo que tienes la opción de elegir entre miles de plantillas gratuitas que ya incluyen todo el código html y css, para que de esta forma te ahorres mucho tiempo. Sin embargo, es recomendable conocer los aspectos básicos de CSS para dejar las páginas web justo como las quieren nuestros clientes.

¿Cómo funciona el CSS?

Para incorporar el código CSS al documento existen tres maneras:

En línea

Consiste en escribir el código CSS como valor del atributo style de un elemento html pero el estilo definido sólo se aplicará en ese elemento. Es decir, el código CSS solo “tendrá efecto” en el código HTML de ese elemento. Por ejemplo, si queremos que una imagen en particular tenga un borde y un efecto, utilizamos esta forma de insertar el código.

Embebido

Consiste en incrustar un elemento style en alguna parte del documento html. Y entre sus etiquetas de apertura y cierre, irá el código CSS pero el estilo definido sólo se aplicará a los elementos de ese documento. Esto no es una buena práctica porque es recomendable tener el HTML y el CSS separados para evitar errores y confusión.

Externo

Es incorporar nuestro código CSS en un archivo independiente al HTML, que luego puede ser enlazado a todos los documentos HTML que se requieran. Por ejemplo, si tenemos nuestra página de contacto y nuestra página de inicio y queremos que se ejecute la misma apariencia en ambas páginas, esta es la forma adecuada de conseguir el resultado deseado.

¿Qué puedes lograr con el CSS?

Con el código CSS se pueden lograr diseños infinitos, ya que podemos modificar colores, bordes, márgenes, fondos, layouts, fuentes, tamaños, alineación de texto, degradados, sombras, transparencias, bordes redondeados, transformaciones y animaciones. Así que con el CSS puedes trabajar la apariencia de tu web hasta dejarla a tu gusto.

No es un secreto que insertar código CSS es algo muy laborioso, es por eso que actualmente se recomiendan otras opciones (como ya te hemos mencionado), tales como WordPress o Joomla.

Si deseas aprender html y css desde 0 en profundidad este tipo de lenguaje, te recomendamos ver videos en YouTube o tomar cursos especializados para que puedas personalizar al 100% tu página web.

¿Cómo aprender html y css desde 0?