Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

HTML vs CSS: ¿Cual es la diferencia?

HTML

HTML es el acrónimo de Hypertext Markup Language. Piensa en HTML como el esqueleto del documento. HTML es lo que le da la estructura a la web. Todo se hace a través de etiquetas, elementos y atributos. Si quieres títulos, listas, imágenes o enlaces, con HTML puedes hacerlo todo.

OUR HISTORY

OUR HISTORY

1975

2016

1998

1966

1982

2010

OUR VALUES

OUR VALUES

OUR NUMBERS

OUR NUMBERS

70,000

310,000

50 years

12,100

100+

41

Diferencia con CSS

Empecemos con un documento HTML básico.

<!DOCTYPE html>

<html>

<head>

<title>Welcome to One Month</title>

</head>

<body>

<h1>Big Willie Style</h1>

<img src=https://i.imgur.com/Vr37Ac3.jpg>

</body>

</html>

El !DOCTYPE en la primera línea le dice al navegador qué tipo de documento está analizando. En este caso, es un documento HTML. La tercera línea es la sección principal, y a continuación puedes ver la etiqueta del título. Ahí es donde pondrías el título de tu web. En este caso, el título del documento es «Welcome to One Month.» Como hemos hecho nosotros, podrías agregar dentro del cuerpo (líneas 6-9) una etiqueta H1 que pone el texto en su interior en estilo H1, la etiqueta de título más grande que hay.

¡Etiquétalo!

¡Aquí tienes otras etiquetas populares!

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Estas etiquetas sirven para los títulos, ¡al igual que las que están en este post! H1 es la etiqueta de título más grande, por lo que tiene el texto más grande. H6 es la etiqueta de título más pequeña así que, ya lo sabes, es la opción de texto del título más pequeño.

<p>

Texto del párrafo

<br>

Salto de línea

<img>

La etiqueta img sirve para insertar imágenes en tu web

<video>

Evidentemente la etiqueta video sirve para añadir vídeos.

<a href>

Esta se usa para añadir enlaces, y la etiqueta significa anchor (ancla)

<strong>

Negrita

<em>

Cursiva

<ul>

Listas no ordenadas

<ol>

Listas ordenadas

Etiquetas hijas

Si estás escribiendo una lista no ordenada <ul> (con viñetas) o una lista ordenada <ol> (numerada), ¡sin duda las listas necesitarán elementos! Para ello, utilizamos la etiqueta lista <li>. La <li> es hija de cualquiera de las dos etiquetas <ul> o <ol>. Así que una lista con viñetas de nuestras comedias favoritas de los ’90 quedaría más o menos así…

<ul>

<li>Seinfeld</li>

<li>Friends</li>

<li>Frasier</li>

<li>Growing Pains</li>

</ul>

OUR OFFICES

London

San Francisco

Brussels

New York

Beijing

Houston

Hong Kong

Diferencia conHTML

Volvamos a nuestro ejemplo de HTML.

Mira la etiqueta <body>. Podemos aumentar el cuerpo HTML con CSS añadiendo detalles. Por ejemplo, digamos que queremos cambiar el color del cuerpo. Quedaría más o menos así…

body {

background: red;

}

O supongamos que queremos cambiar el color y el tamaño de un texto cualquiera que hemos puesto en el cuerpo.

Se veria asi…

body {

font-size: 25px; background: blue; color: orange;

}

O bien, supongamos que queremos cambiar los atributos de la etiqueta H1. Podríamos hacer algo así…

H1 {

color: blue; font-size: 100px

}

Usar los nombres de los colores está bien, pero si queremos elegirlos en una paleta más variada, podríamos usar el sistema hexadecimal (#RRGGBB).

Sin embargo, para aprovechar las impresionantes posibilidades disponibles en CSS, tenemos que vincularle nuestro HTML. Lo hacemos a través del siguiente código:

<link rel=”stylesheet” type=”text/css” href=”main.css”/>

Como ves, indica que hay una relación (rel) entre el HTML y el CSS.

Otra forma en la que podemos implementar CSS es utilizando la propiedad font-family. Es lo mismo que utilizar un editor de texto para cambiar la fuente.

Esto se hace incluyendo en el código lo que sigue:

h1 {

font-family: Arial

}

css

CSS

CSS es un acronimo de Cascading Style Sheet (hoja de estilos en cascada).

Si HTML es el esqueleto de nuestra página, CSS es la piel.

Sin CSS tus webs se verían bastante aburridas, sosas y hasta desnudas. En CSS hay una propiedad y un valor. La propiedad es el atributo que quieres cambiar, mientras que el valor es cuanto quieres cambiarlo.

Learn more about creating dynamic, engaging presentations with Prezi