¬ŅSabes qu√© es CSS y c√≥mo se relaciona con HTML?

Última actualización 16 de Febrero del 2021

user

Antony Pinedo

¬ŅSabes qu√© es CSS y c√≥mo se relaciona con HTML? ¬ŅSabes qu√© es CSS y c√≥mo se relaciona con HTML?

A partir de la creaci√≥n de internet y el desarrollo de p√°ginas web¬†fueron surgiendo nuevos lenguajes. Estos nuevos idiomas rompen las barreras geogr√°ficas y culturales, consiguiendo una universalidad √ļnica. Por lo que cada vez es muy importante que todo profesional conozca qu√© son los lenguajes CSS y HTML.¬†Dos de los m√°s importantes para la creaci√≥n de p√°ginas web.¬†

Sabemos que puede ser difícil a primera vista, saber qué es exactamente HTML o CSS, o etender qué hacen y cómo funcionan. Por eso hoy decidimos darnos a la tarea de contártelo. Una vez hayas terminado de leer este artículo entenderás muchas cosas de las que pasan en el front-end de todo sitio web. 

 

√ćndice:

  1. ¬ŅQu√© significa el lenguaje HTML?
  2. ¬ŅQu√© es el HTML en inform√°tica?
  3. ¬ŅQu√© significa CSS?
  4. ¬ŅQu√© es el lenguaje CSS?¬†
  5. ¬ŅQu√© es el DOM?¬†
  6. ¬ŅQu√© son las etiquetas HTML?
  7. ¬ŅCu√°l es la estructura y sintaxis de CSS?
  8. ¬ŅC√≥mo aplicar los selectores de CSS?
  9. Diferencias entre HTML y CSS.
  10. Ventajas y Desventajas del Lenguaje HTML.
  11. Ventajas y Desventajas del Lenguaje CSS.
  12. Editores HTML 2021

¬ŅQu√© significa el lenguaje HTML?

El lenguaje¬†HTML fue creado en 1989 por Tim Berners-Lee y es el acr√≥nimo de Hypertext Markup Language que traducido de manera directa al espa√Īol ser√≠a Lenguaje de Marcado de Hipertexto.¬†

El hipertexto es el método que permite la navegación a través de la red y las páginas web, ya que permite que al hacer clic en un texto especial llamado hipervínculos puedas ir a una siguiente página. El prefijo "hiper" hace referencia a que el movimiento no es lineal ya que puede ir a cualquier lugar de internet con solo un clic. Por otro lado el marcado es la acción de colocar etiquetas HTML al texto que se usa en una web. Este marcado le asigna un tipo de elemento, por ejemplo, un botón.
 

¬ŅQu√© es el HTML en inform√°tica? ¬†¬†

Entonces, el HTML es un lenguaje que permite definir la estructura del contenido de una página web a través del uso de elementos envueltos en etiquetas compatibles universalmente. Lo que permite que cualquier persona en el mundo con acceso a internet pueda visualizarlo.

Se le denomina como lenguaje ya que tiene palabras en¬†c√≥digo y sintaxis como cualquier otro lenguaje. Los buscadores como Mozilla Firefox, Google Chrome, Safari o Microsoft Edge procesan toda la informaci√≥n en c√≥digo HTML y nos la muestra con las estructura con la que fue creada. Pero para darle m√°s ‚Äúvida‚ÄĚ al¬†los elementos de¬†HTML aparecieron los estilos del lenguaje CSS.


interfaz-css-html
Fuente: Pexels

¬ŅQu√© significa CSS?

CSS es el acr√≥nimo para Cascading Style Sheets, que traducido al espa√Īol es Hojas de Estilo en Cascada. Haciendo referencia al lenguaje que le da un estilo determinado y complementa el lenguaje HTML.

Usando nuestro ejemplo anterior: ‚Äúnuestro bot√≥n no solo ser√° cuadrado, sino que ahora tendr√° las puntas redondeadas, ser√° de color azul y tendr√° una sombra detr√°s de √©l. El t√©rmino cascada es porque se aplican de arriba hacia¬†abajo siguiendo un patr√≥n al que se le denomina "herencias". En caso de que exista ambig√ľedad se utilizan una serie de reglas como las que mencionamos arriba.

crehana-premium

¬ŅQu√© es el lenguaje CSS?¬†

En t√©rminos simples,¬†el lenguaje CSS es el que describe c√≥mo nuestros elementos en HTML ser√°n mostrados en una pantalla de computadora, celular u otro dispositivo multimedia. Las hojas de estilos CSS son de gran ayuda y ahorran mucho trabajo al momento de programar un sitio web. Ya que pueden controlar el aspecto de m√ļltiples p√°ginas dentro del sitio a la vez con una sola hoja de estilos o documento de CSS. Entonces, a trav√©s del CSS tendr√°s la capacidad de determinar el dise√Īo, color, fuente,¬†entre otras caracter√≠sticas de tus elementos.

persona-redactando-en-ordenador
Fuente: Pexels

El CSS y el HTML suelen renderizarse en los navegadores con una separación del contenido y la presentación o estilos de ese contenido, y este proceso se lleva a cabo en el siguiente orden:

  1. El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo) este DOM funciona como un documento para la memoria del ordenador, de forma que puede combinar el contenido del documento en texto con su hoja de estilo.
  2. El navegador muestra el contenido del DOM al usuario.
     

¬ŅQuieres aprender a usar CSS y HTML como todo un experto? Inicia desde cero con estos cursos de Front-end

¬ŅQu√© es el DOM?¬†

El DOM (Document Object Model) que en espa√Īol significa textualmente Modelo de Objetos del Documento. En la programaci√≥n, todas las p√°ginas web HTML se denominan documentos.

El modelo de objetos de este documento representa cada una de estas páginas web en una estructura en forma de árbol para facilitar el acceso y la gestión de los elementos. De manera general el DOM es esencialmente un intento de convertir la estructura y el contenido del documento HTML en un modelo de objetos que puede ser utilizado por varios programas o navegadores.

La estructura de objetos del DOM está representada por lo que se llama un "árbol de nodos"y se llama así porque se puede pensar en un árbol con un solo tallo padre que se ramifica en varias ramas secundarias, cada una de las cuales puede tener hojas. En este caso, el "tallo" principal es el elemento raíz <html>, las "ramas" secundarias son los elementos anidados y las "hojas" son el contenido dentro de los elementos.
Nodos-DOM
Fuente: Slideshare

¬ŅQu√© son las etiquetas HTML?

Las etiquetas dentro del lenguaje de programación HTML son fragmentos de código que nos facilitan la creación de elementos HTML para crear una página web. Estos luego son procesados por los navegadores como ya te hemos explicado. 

La sintaxis o formato en el que se escriben estas etiquetas es a través del uso de corchetes angulares < >. La gran mayoría de elementos HTML tienen una etiqueta de inicio o apertura, por ejemplo <button>, y luego se finaliza con una etiqueta de cierre que lleva una diagonal al inicio, por ejemplo </button>.

Estos elementos HTML tienen también dos propiedades básicas. Unos son los atributos, que se encuentran en la etiqueta de apertura y sirve para asignarle información relevante para tu sitio como un identificador, y luego se ingresa el contenido, que comprende el texto que se mostrará a los usuarios, y se ingresa dentro de las dos etiquetas (la de apertura y la de cierre).  En nuestro ejemplo del botón, este se vería así:

¬†<button id=‚ÄĚboton-de-compra‚ÄĚ>Comprar curso</button>

Ejemplo etiquetas HTML m√°s comunes:

    <html>
       <
head>
        <
title>T√ćTULO DE TU P√ĀGINA</title>
       </
head>
       <
body>
            <
h1 id="encabezado-1">Encabezado que se muestra al usuario</h1>
            <
p class="texto-resaltado">La etiqueta p se usa para crear un p√°rrafo.</p>
            <
p>Se vuelve a escribir para separar un p√°rrafo de otro.</p>
       </
body>
    </
html>


Esta es una estructura muy básica que muestra el orden y algunos elementos muy comunes dentro de un archivo HTML. 

Observa c√≥mo se relacionan entre ellos, en qu√© punto abren y cierran estos elementos, por ejemplo, dentro de la etiqueta de body (<body>) ‚Äėviven‚Äô muchos elementos como headings (<h1>) y p√°rrafos de texto (<p>), y esta etiqueta que alberga a la mayor√≠a del contenido, abre despu√©s de que cierra la etiqueta del head (</head>), y cierra casi al final, justo antes de que la etiqueta principal del archivo (<html>).

Tambi√©n nota c√≥mo el primer p√°rrafo de texto tiene asignado un atributo llamado clase que busca diferenciarlo del otro p√°rrafo con el nombre ‚Äútexto-resaltado‚ÄĚ.¬† Esto permitir√° asignarle estilos y otras funcionalidades exclusivamente a ese p√°rrafo, llam√°ndolo a trav√©s de selectores de CSS como veremos a continuaci√≥n.

¬ŅCu√°l es la estructura y sintaxis de CSS?

Estructura-y-sintaxis-CSS

  • Selector: se utiliza para llamar al elemento HTML al cual queremos modificar. Este es el primer par√°metro que necesitamos para asignar estilos a nuestro contenido.
     
  • Propiedad: especifica qu√© caracter√≠stica queremos alterar de nuestro elemento HTML como el color, tipo de letra, opacidad, entre otros.
     
  • Valor de propiedad: define c√≥mo o en qu√© cantidad vamos a aplicar el cambio de la propiedad.
     
  • Declaraci√≥n: especifica cu√°l de las propiedades del elemento queremos darle un estilo.

Para hacer la declaración de estilo correctamente es necesario que respetemos los signos utilizados y su orden. Entonces, para asignarle color rojo al texto de nuestro botón, la declaración de CSS se vería así:

button {
    
color: red
;
}

 

Descarga gratis estas listas de etiquetas HTML y de las propiedades m√°s usadas en CSS

etiqutas-html-propiedades-css


¬ŅC√≥mo aplicar los selectores de CSS?

Existen tres formas en las que se pueden incluir los selectores de CSS en una hoja de estilos en una página web: 

1. Inline Styles o¬† Estilo de L√≠nea: Los cuales se aplican directamente en un elemento HTML, en la que se adiciona el atributo style=‚ÄĚpropiedad:valor;?‚ÄĚ en la etiqueta de apertura de ese elemento. Por ejemplo:

<p style="color:green;">Texto en verde</p>


2. Etiqueta <style>: Dentro del documento HTML se pueden aplicar los estilos generales haciendo uso de la etiqueta de estilo (<style>). Esta se agrega en el encabezado de la p√°gina (<head></head>) y aplica para todo el contenido dentro de esta o los elementos especificados. Por ejemplo, si queremos definir el estilo de los textos h1 haremos algo como esto:

<head>
    <
style
type="text/css">
        h1 {
        color: red;
        }

    </style
>
</head>


3. Hoja de estilo externa: Este m√©todo es el m√°s recomendado para sitios web complejos o con muchas secciones y elementos ya que de esta forma podr√°s manipular tus estilos de CSS sin volverte [email protected]

Esto se logra creando por separado un documento con extensi√≥n de archivo CSS (.css), es un c√≥digo escrito en lenguaje CSS que luego se vincula con el c√≥digo HTML. Puedes nombrar este archivo como quieras, pero muchos desarrolladores suelen llamarlo ‚Äústyle.css‚ÄĚ.

La forma de de vincularlo con el archivo HTML es haciendo uso de la etiqueta <link> y un par de atributos importantes que lucen así:

 <link rel="stylesheet" href="nombre-de-tu-archivo.css">


Para un correcto enlace del documento CSS, es necesario hacer uso de los atributos rel=‚ÄĚstylesheet‚ÄĚ que se encarga de decirle a HTML el tipo de documento que se est√° vinculando, el href=‚ÄĚ‚ÄĚ que hace referencia al documento enlazado.

¬ŅNotaste que la etiqueta <link> no tiene una etiqueta de cierre? Bueno, esto es porque no todas las etiquetas de HTML se deben de cerrar, simplemente porque es necesario que cuenten con contenido extra como texto entre ambas etiquetas como sucede con la de >button>Comprar curso</button>.
 

crehana-premium

Diferencias entre HTML y CSS

La gran diferencia entre el lenguaje de programación HTML y CSS son sus funciones. De hecho, ambos lenguajes no compiten entre ellos pero sí se complementan. Por un lado el HTML nos permite armar la estructura de la web a través de el etiquetado de hipertextos. Mientras que el lenguaje CSS nos permite asignar estilos y alterar las propiedades de nuestros elementos HTML.

Ventajas y Desventajas del Lenguaje HTML

HTML ha tenido una serie de mejoras y actualizaciones desde que fue creado, llegando a la √ļltima versi√≥n de HTML5. Ning√ļn lenguaje es perfecto, y si profundizas en el desarrollo web, te podr√°s percatar de esto dependiendo del escenario en el que lo apliques. En el caso del lenguaje HTML, estas son las ventajas y desventajas:
 

Ventajas:

  • F√°cil de usar.
  • Sintaxis suelta (aunque ser demasiado flexible no cumplir√° con los est√°ndares).
  • Bastante f√°cil de escribir.
  • Permite el uso de plantillas, lo que facilita el dise√Īo de una p√°gina web.
  • F√°cil de aprender y codificar incluso para programadores novatos.
  • Compatible con casi todos los navegadores, si no con todos los navegadores.
  • Ampliamente utilizado; establecido en casi todos los sitios web, si no en todos los sitios web.
  • Muy similar a la sintaxis XML, que se utiliza cada vez m√°s para el almacenamiento de datos.
  • Gratis: no necesitas comprar ning√ļn software.
     

Desventajas

  • No puede producir una salida din√°mica por s√≠ solo.
  • A veces, la estructuraci√≥n de documentos HTML es dif√≠cil de comprender.
  • Los errores pueden resultar costosos.
  • El tiempo que lleva para crear algunos elementos como: listas y tablas.
  • Debe mantenerse al d√≠a con las etiquetas obsoletas y asegurarse de no utilizarlas. Las etiquetas obsoletas aparecen porque otro lenguaje que funciona con HTML ha reemplazado el trabajo original de la etiqueta; por lo tanto, es necesario aprender el otro idioma (la mayor√≠a de las veces, es CSS)
  • Las funciones de seguridad que ofrece HTML son limitadas.
     

Ventajas y Desventajas del Lenguaje CSS

CSS al igual que HTML, tiene una función muy específica, y aunque hay herramientas que te ayudan a aplicarlo de manera más productiva, el CSS en bruto tiene algunas áreas de oportunidad y sin duda grandes bondades. Por ejemplo:

Ventajas

  • Unificar todo lo referente al dise√Īo visual en un solo documento
  • Se pueden hacer modificaciones en un solo lugar sin tener que recurrir a los archivos HTL por separado
  • Es menor la probabilidad de que exista duplicaci√≥n de estilos en diferentes lugares, debido a esto es m√°s f√°cil de organizar y hacer cambios. A esto debemos a√Īadir que la informaci√≥n a transmitir es considerablemente menor y por tanto las p√°ginas tambi√©n se descargan m√°s r√°pido
  • La creaci√≥n de versiones para otros dispositivos: tablets o smartphones es muy simple.

Desventajas

  • Compatibilidad con algunos buscadores.

 

Editores HTML 2021

Si est√°s envuelto por el lenguaje HTML los editores ser√°n de mucha ayuda para ti. Al igual que necesitamos un corrector de textos para evitar errores involuntarios o alg√ļn descuido, los editores de lenguaje HTML te ayudan a escribir el c√≥digo sin errores y te hacen algunas sugerencias sencillas pero oportunas.¬†

Aquí te presentamos dos editores HTML para que acabes tu programación pronto. 

Atom

Atom es uno de los más populares editores de lenguaje HTML por ser un software de código abierto. Este editor es gratuito y soporta el Teletype, para que puedas trabajar con otros programadores en línea y en simultáneo. 

Ofrece un interfaz personalizable y la función de autocompletado, para que puedas avanzar más rápido tus acciones. No importa si tienes que programar en lenguaje HTML en un ordenador Windows o Mac, Atom funciona en ambos sistemas operativos.

Sublime Text

Sublime Text es otro editor HTML con muchas ventajas. Cuenta con una versi√≥n libre y otra pagada. Permite agregar plugins de otros o puedes crear algunos t√ļ. Tambi√©n, puedes programar en simult√°neo junto con otros compa√Īeros del trabajo.

Adem√°s de utilizar lenguaje HTML, este editor permite programar por separado, es decir, usando distintos monitores y otras personas al mismo tiempo.

¡Ahora ya conoces un poco más sobre cómo funcionan estos dos importantes lenguajes! Tanto el HTML como el CSS, son herramientas indispensables al momento de desarrollar una página web o incluso aplicación móvil. 

Es posible que ahora te est√©s preguntando c√≥mo darle interacci√≥n a este HTML y CSS, aplicar todos esos efectos que has visto en muchos grandes sitios y para eso tenemos que hablar de JavaScript, pero esa ser√° otra historia. ūüĒú

Si reci√©n est√°s comenzando y quieres aprender mucho m√°s sobre estos temas te invitamos a revisar nuestros cursos de creaci√≥n de sitios web y seguir puliendo tus conocimientos.¬†No olvides suscribirte a nuestro newsletter para recibir todo lo que necesitas saber sobre web si est√°s iniciando en el mundo de la tecnolog√≠a. ¬°Sigamos aprendiendo! ūüĎ©‚ÄćūüíĽūüĎ®‚ÄćūüíĽ

Recomendados para ti