HTML y CSS

HTML y CSS.
La programación es una disciplina muy amplia que ofrece cientos de posibilidades a la

hora de configurar una web. Uno de sus componentes más conocidos es HTML, pues es
el lenguaje de marcado a partir del cual se define todo el contenido que vemos en las
páginas, y junto a él está el CSS, orientado hacia su diseño y apariencia. De hecho,
aunque muchas personas desconocen qué es HTML y CSS, es muy probable que
disfruten a diario de sus aplicaciones al navegar por la red.
Ejemplo de HTML y CSS
HTML son las siglas de HyperText Markup Language, es decir, lenguaje de marcado de
hipertexto, que constituye un estándar asumido y reconocido a nivel mundial. Sus
normas las establece una entidad sin fines de lucro llamada World Wide Web
Consortium (W3C) que lo define como «un lenguaje reconocido universalmente y que
permite publicar información de forma global».
En cuanto a CSS (del inglés Cascading Style Sheets u “hojas de estilo en cascada”), es
el lenguaje de marcado que determina el aspecto con el que se visualiza el contenido de
un sitio web. Esto pasa por elementos como el color, estilos de letra o imágenes, entre
muchos otros, y su código se conjuga con el de HTML para crear páginas completas.
Cómo funciona HTML
Ejemplo de etiqueta HTML
El lenguaje de marcado de hipertexto se basa en “distintivos” conocidos como etiquetas

o tags con los cuales estructura el texto. Estos se colocan antes y después de cada
elemento al que definen, y su característica principal es que se indican entre corchetes
(<>).
Esto indica a cualquier navegador en el que estés leyendo que debe mostrar ese texto
como el encabezado principal.
Lo que has visto arriba es un tipo de elemento, y se compone de la etiqueta, que en este
caso corresponde a <Title>, y el contenido, que es el texto dentro de ella.
Si ahondamos un poco más llegamos hasta el atributo, es decir, lo que va dentro de los
corchetes. Aunque en el ejemplo son solo letras (Title), también puede incluir símbolos
y números. En la etiqueta de cierre se coloca una barra inclinada para indicar que es el
final (</Title>).
Etiquetas básicas de HTML
Aunque es casi imposible describir todas las etiquetas que ofrece el lenguaje HTML, sí
que podemos hacer un resumen con las más importantes, que son:
 <html>: indica el inicio del documento HTML.

 <head>: contiene información de la página que no es visible para los visitantes,
pero sirve para que los navegadores identifiquen lo que hay en ella.
 <body>: es la parte visible de la web y engloba todo el contenido disponible,
incluidos textos, imágenes, tablas, etc.
 <div>: divide el contenido en bloques separados por espacios. Estos bloques
pueden tener párrafos, imágenes, vídeos, etc. A veces una misma etiqueta <div>
tiene otras dentro de ella.
 <br>:crea un salto de línea, pero sin dejar un espacio de por medio.
 <h1>, <h2>…<h6> : marcan los títulos y subtítulos dentro del documento y
sirven para jerarquizar la información, así como indicar a los buscadores lo que
contiene cada apartado.
 <a>: define los hipervínculos o links dentro y fuera de la web.
 <p>: agrupa el texto en un párrafo.
 <i>: cursiva.
 <b> y <strong>: negrita.
 <u>: subrayado.
Ventajas y desventajas de HTML
HTML representa la parte más elemental de cualquier web. A partir de ella se integran
todos los lenguajes de programación y elementos multimedia que conforman la página.
Por esta razón tiene muchas ventajas, pero también se queda a medio camino cuando se
trata de crear un sitio completo. Te contamos lo mejor y lo no tan bueno de este
lenguaje:
Pros
 Es reconocido por cualquier navegador y tiene un alcance universal.

 Es muy sencillo de aprender y personas sin conocimientos previos en desarrollo
web pueden dominarlo en poco tiempo.
 Los archivos son pequeños.
 Se integra a la perfección con los lenguajes de programación más usados.
 Tiene soporte del W3C.
 Es un código abierto y gratuito.
Contras
 Es estático y por sí mismo no permite añadir elementos dinámicos.
 Su carga es lenta y no todos los navegadores lo interpretan de la misma forma, lo
que puede dar lugar a errores de visualización.
 Se debe escribir cada página de manera individual, aunque se trate de la misma
estructura o formato.
 Las opciones de personalización son limitadas.
Cómo funciona CSS
Ejemplo de CSS
El mecanismo CSS se basa en “reglas predeterminadas” (o simplemente “reglas”) que

permiten dar formato a los distintos elementos del lenguaje HTML. Sus componentes
son:
 Selector: identifica dónde se aplicarán los cambios y tiene el mismo nombre que
en el código HTML. Después de indicarlo, el resto de elementos va dentro de
corchetes.
 Propiedad: se refiere al atributo que se va a modificar. Por ejemplo, si el selector
especifica que se trata de un título, la propiedad puede ser el color o el tipo de
fuente de dicho título.
 Valor: es la característica de la propiedad. Siguiendo con el ejemplo anterior,
podríamos referirnos al verde, en el caso del color, o Arial, para la fuente.
Las propiedades y el valor van separados entre sí por dos puntos ortográficos (:) y
juntos conforman una declaración. A su vez, las declaraciones se separan con punto y
coma (;).
¿Por qué en cascadas?
El nombre de hojas en cascadas proviene de la forma en cómo el CSS jerarquiza la

aplicación del formato a los distintos elementos de una web. Esto es de utilidad cuando
varias reglas entran en conflicto a la hora de definir el aspecto.
Ventajas y desventajas de CSS
Al igual que sucede con el HTML y cualquier otro tipo de lenguaje de marcado, CSS
tiene pros y contras que pueden incidir en mayor o menor medida sobre la programación
y el resultado. Resumimos.
Pros
 Facilita la creación de la web, pues las configuraciones de aspecto se pueden

manejar aparte de las de contenido.
 Ahorra tiempo al permitir juntar el código de diseño en un solo archivo y
aplicarlo a todas las páginas sin tener que hacerlo de forma individual.
 Se pueden manejar distintas hojas de estilo de acuerdo con el dispositivo en que
se va a visualizar la web.
 Los archivos son ligeros y consumen poco ancho de banda, por lo que la carga
de la página es rápida.
Contras
 Es posible que surjan problemas con la visualización de ciertas propiedades y se

aplique la configuración por defecto del navegador, dejando inútil el esfuerzo
puesto en escribir el código.
Roberto, & Roberto. (2021, July 23). Qué es HTML y CSS: los básicos del desarrollo
web. Escuela ESDIMA. https://esdima.com/que-es-html-y-css/

HTML y CSS

Cargado por

Copyright:

Formatos disponibles

HTML y CSS

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML y CSS

Cargado por

Copyright:

Formatos disponibles

HTML y CSS.

La programación es una disciplina muy amplia que ofrece cientos de posibilidades a la

Ejemplo de HTML y CSS

Ejemplo de etiqueta HTML

El lenguaje de marcado de hipertexto se basa en “distintivos” conocidos como etiquetas

Etiquetas básicas de HTML

 <html>: indica el inicio del documento HTML.

Ventajas y desventajas de HTML

 Es reconocido por cualquier navegador y tiene un alcance universal.

Cómo funciona CSS

El mecanismo CSS se basa en “reglas predeterminadas” (o simplemente “reglas”) que

El nombre de hojas en cascadas proviene de la forma en cómo el CSS jerarquiza la

Ventajas y desventajas de CSS

 Facilita la creación de la web, pues las configuraciones de aspecto se pueden

 Es posible que surjan problemas con la visualización de ciertas propiedades y se

web. Escuela ESDIMA. https://esdima.com/que-es-html-y-css/

También podría gustarte