Unidad 2

UNIDAD 2
Diseño web HTML5 + CSS

Diseño web HTML
Síntesis
En esta unidad introducimos el uso de las hojas de estilo, aprenderemos a vincular una hoja de
estilos, la sintaxis, el funcionamiento básico y los estilos tipográficos.
Introducción
CSS (Hojas de Estilo en Cascada) es el código que usamos para dar estilo a la página web. CSS
Básico nos guía a través de lo que necesitamos para empezar. Contestará a preguntas del tipo:
¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la
pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?
Entonces ¿qué es CSS?

Como HTML, CSS (<em>Cascading Style Sheets</em>) u Hojas de estilo en cascada en español, no es
realmente un lenguaje de programación. Es un lenguaje de hojas de estilo, es decir, nos permite
aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para
seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de
color rojo, tenemos que escribir este CSS:
p{
color: red;
}
Diseño web HTML5 + CSS O1

1 Guardar archivo Index
Para probarlo: pegamos estas tres líneas de CSS en un nuevo archivo en el editor de texto y guardamos
este archivo como style.css en el directorio styles (estilos).
Pero aún debemos aplicar el CSS a nuestro documento HTML, de otra manera el estilo CSS no cambiará
cómo el navegador muestra el documento HTML.
Abrimos el archivo index.html y pegamos la siguiente línea en algún lugar dentro

del <head>, es decir, entre las etiquetas <head> y </head>:
<link href="styles/style.css" rel="stylesheet" type="text/css">

https://developer.mozilla.org/es/docs/Web/HTML/Element/head
1. Guardamos el archivo index.html y cargamos en el navegador. Se debería ver
algo como esto:
O2 Diseño web HTML5 + CSS

Si el texto del párrafo ahora es rojo, ya escribimos nuestro primer CSS de forma exitosa.
Anatomía de una regla CSS
Observemos el código CSS de arriba, un poco más a detalle:
La estructura completa es llamada regla predeterminada (pero a menudo «regla» para

abreviar). Veamos también los nombres de las partes individuales:
Selector
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en
https://developer.mozilla.org/es/docs/Web/HTML/Element/p
este caso, los elementos <p> ). Para dar estilo a un elemento diferente, solo cambiamos el
selector.

Declaración
Una sola regla como color: red; específica a cuál de las propiedades del elemento
queremos dar estilo.
Propiedades
Maneras en las cuales podemos dar estilo a un elemento HTML. (En este caso, color es una
https://developer.mozilla.org/es/docs/Web/HTML/Element/p
propiedad del elemento <p> ). En CSS, seleccionamos qué propiedad queremos afectar en la
regla.
Valor de la propiedad
A la derecha de la propiedad, después de los dos puntos (:), tenemos el valor de la propiedad,
para elegir una de las muchas posibles apariencias para una propiedad determinada (hay
muchos valores para color además de red).
Otras partes importantes de la sintaxis:
Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ({}).
Dentro de cada declaración, debemos usar los dos puntos (:) para separar la propiedad de
su valor.
Dentro de cada regla, debemos usar el punto y coma (;) para separar una declaración de la
siguiente.
A la derecha de la propiedad, después de los dos puntos (:), tenemos el valor de la propiedad,
para elegir una de las muchas posibles apariencias para una propiedad determinada (hay
muchos valores para color además de red).

De este modo para modificar varios valores de propiedad a la vez, solo necesitamos
escribirlos separados por punto y coma (;), así:
p{
https://developer.mozilla.org/es/docs/Web/HTML/Element/strong
color: red;
width: 500px;
border: 1px solid black;
}
Valor de la propiedad https://developer.mozilla.org/es/docs/Web/HTML/Element/strong

También podemos seleccionar varios elementos y aplicar una sola regla a todos ellos. Para eso,
Incluiremos varios selectores separados por comas (,). Por ejemplo:
p,li,h1 {
color: red;
}
Diferentes tipos de selectores
Existen muchos tipos diferentes de selectores. Antes, solo vimos los selectores de elementos, los
cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo,
podemos hacer selecciones más específicas que esas. A continuación dejamos algunos de los tipos de
selectores más comunes:

Existen muchos más selectores para explorar, para mas detalle podemos recurrir a la siguiente
guía de Selectores.
2 Fuentes y Textos
https:/ developer.mozil a.org/es/docs/Learn/CSS/Building_blocks/Selectors
Fuentes y texto
Ahora que hemos explorado lo básico de CSS, comenzaremos por añadir información y algunas
reglas más a nuestro archivo style.css para que el ejemplo se vea más profesional. Primero,
modificaremos las fuentes y el texto. Pero para poder realizar estas modificaciones, primero
veamos como elegir un tipo de letra

Tipos de letra
Para elegir un tipo de letra:
1. Vamos a Google Fonts y nos desplazamos hacia abajo en la lista hasta que
https://fonts.google.com/
encontremos una que nos guste.
2. Hacemos clic en el icono "más" (Agregar a) junto al tipo de letra deseada.
3. Hacemos clic en el botón "*Familia seleccionada" en el panel en la parte inferior de la página

("*" depende de cuántos tipos de letra hayamos seleccionado).
4. En el cuadro emergente, podemos ver y copiar las líneas de código que Google nos brinda en
nuestro editor de texto para guardarlas para más adelante.
En el cuadro emergente, podemos ver y copiar las líneas de código que Google nos
https://developer.mozilla.org/es/docs/Web/HTML/Element/meta
brinda en nuestro editor de texto para guardarlas para más adelante.

Ahora que ya sabemos cómo elegir una fuente, vamos a agregarla a nuestro archivo
https://developer.mozilla.org/es/docs/Web/HTML/Element/link
de estilos. Para ello agregamos el elemento <link>... en algún lugar del head del

archivo index.html (de nuevo, en cualquier lugar entre las etiquetas <head> y
</head>). Deberá quedar algo así:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet"

type="text/css">
<img src="images/mugcake" alt="Mi imagen de prueba">
Este nos permite incrustar una imagen en la página, en la posición en que aparece. Lo logra a través del
atributo src (source), el cual contiene el path (ruta o ubicación) de tu archivo de imagen.
También se incluye un atributo alt (alternative) el cual contiene un texto que debería describir la imagen, y
que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque:
Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales
usualmente utilizan herramientas llamadas Lectores de pantalla, los cuales les leen el
texto contenido en el atributo alt.
Se produjo algún error en el código que impide que la imagen sea cargada.

3 Marcado de texto
Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el marcado de
texto.
Encabezados
Los elementos de encabezado permiten especificar que ciertas partes del contenido son
encabezados, o subencabezados del contenido. De la misma forma que un libro tiene un título
principal, y que a su vez puede tener títulos por cada capítulo individual, y subtítulos dentro de
ellos, un documento HTML puede tenerlos también. HTML posee seis niveles de encabezados,
https:/ developer.mozil a.org/es/docs/Web/HTML/El emento/h1 https:/ developer.maunque
<h1>–<h6>, ozil a.org/es/docs/Web/HTML/El ement/Heading_Elements
probablemente solo lleguemos a usar 3-4 como mucho:
<h1>Mi título principal</h1>

<h2>Mi título de nivel superior</h2>
<h3>Mi subtítulo</h3>
<h4>Mi sub-subtítulo</h4>
10 Diseño web HTML5 + CSS

Párrafos
Como se explicó más arriba, los elementos <p> se utilizan para encerrar párrafos de texto; los
usaremos frecuentemente para el marcado de contenido de texto regular:
<p>Este es un simple parrafo</p>
Listas
Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para
ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas
más comunes son las listas ordenadas y las desordenadas:
1. Las listas desordenadas son aquellas en las que el orden de los items no es relevante,
https:/ developer.mozilla.org/es/docs/Web/HTML/Element/ul
como en una lista de compras. Estas son encerradas en unelemento <ul> (unordered list).
2. Las listas ordenadas son aquellas en las que el orden sí es relevante, como en una
https://developer.mozilla.org/es/docs/Web/HTML/Element/ol
receta. Estas son encerradas en un elemento <ol> (ordered list).
dentro de un elemento <li> (list item).
https://developer.mozilla.org/es/docs/Web/HTML/Element/li
3. Cada elemento de la lista se coloca
Diseño web HTML5 + CSS 11

Por ejemplo:
<ul><li>harina de almendras</li>
<li>1 huevo</li>
<li>2 cucharada de cacao</li>
<li>1/2 cucharada de polvo de hornear </li>
<li>1 sobrecito de stevia </li>
</ul>
<h2> preparación</h2>
<ol><li>derretir la manteca</li>
<li>mezclar los ingredientes secos</li>
<li>llevar al microondas 1 minuto</li>
Vínculos
Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—. Para imple-
un vínculo simple — <a> — la a es la abreviatura de la pa-
mentar un vínculo, necesitamos usarhttps://developer.mozilla.org/es/docs/Web/HTML/Element/a
labra inglesa «anchor» («ancla»). Para convertir algún texto dentro de un párrafo en un vínculo,
seguiremos estos pasos:

Por ejemplo:
1. Elegir algún texto. Nosotros elegimos «receta».
2. Encerrar el texto en un elemento <a>, así:
<a>receta</a>
Le proporcionaremos al elemento <a> un atributo href, así:

<a href="">receta</a>
Completamos el valor de este atributo con la dirección web con la que queremos conectar al
vínculo:
<a
href="https://www.dietfarma.com/receta/mug-cake-de-vainilla-y-almendras-keto<
/a>
Podríamos obtener resultados inesperados si al comienzo de la dirección web omitimos la parte

https:// o http:// llamada protocolo. Así que luego del marcado del vínculo, haremos clic en él
para asegurarnos que nos dirige a la dirección deseada.

4 ¿Qué herramientas necesitamos?
Una computadora. Tal vez esto suena obvio para algunas personas, pero habrá quien esté
leyendo esto desde un dispositivo móvil.
Un editor de texto, para escribir código.En este curso usaremos Sublime

https://www.sublimetext.com/
Navegadores web, para probar el código. Actualmente los navegadores más
usados son;
https://www.mozilla.org/en-US/firefox/new/
Firefox, https://vivaldi.com/es/
Vivaldi,
https://www.google.com/chrome/
Chrome, ht ps:/ sup ort.microsoft.comInternet
/es-es/windows/descargas-de-inExplorer
ternet-explorer-d49e1f0d-571c-9a7by-d97e-be248 06ca70
https://www.opera.com/es-419
Opera, https:/ www.microsoft. com/en-us/edge?form=MA13FJ&exp=e00
Microsoft Edge
https://www.apple.com/safari/
Safari,
En el siguiente video veremos cómo instalar Sublime y prepararnos para empezar a trabajar
https://youtu.be/icZR-CFDhuE
https://www.youtube.com/watch?v=icZR-CFDhuE

Lo que aprendimos en este módulo
En este módulo vimos cómo funcionan las etiquetas HTML, su anatomía, las etiquetas de texto,
de bloque, como cargar imágenes y también cómo agregar enlaces a otros sitios.

Unidad 2 - Plataforma

Cargado por

Copyright:

Formatos disponibles

Unidad 2 - Plataforma

Cargado por

Información del documento

Descripción original:

Título 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

Unidad 2 - Plataforma

Cargado por

Copyright:

Formatos disponibles

Diseño web HTML5 + CSS

Entonces ¿qué es CSS?

Diseño web HTML5 + CSS O1

Abrimos el archivo index.html y pegamos la siguiente línea en algún lugar dentro

<link href="styles/style.css" rel="stylesheet" type="text/css">

O2 Diseño web HTML5 + CSS

La estructura completa es llamada regla predeterminada (pero a menudo «regla» para

Diseño web HTML5 + CSS O3

Otras partes importantes de la sintaxis:

O4 Diseño web HTML5 + CSS

Valor de la propiedad https://developer.mozilla.org/es/docs/Web/HTML/Element/strong

Diseño web HTML5 + CSS O5

O6 Diseño web HTML5 + CSS

3. Hacemos clic en el botón "*Familia seleccionada" en el panel en la parte inferior de la página

Diseño web HTML5 + CSS O7

O8 Diseño web HTML5 + CSS

<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet"

<img src="images/mugcake" alt="Mi imagen de prueba">

Diseño web HTML5 + CSS O9

<h1>Mi título principal</h1>

10 Diseño web HTML5 + CSS

<p>Este es un simple parrafo</p>

Diseño web HTML5 + CSS 11

12 Diseño web HTML5 + CSS

1. Elegir algún texto. Nosotros elegimos «receta».

2. Encerrar el texto en un elemento <a>, así:

Le proporcionaremos al elemento <a> un atributo href, así:

Podríamos obtener resultados inesperados si al comienzo de la dirección web omitimos la parte

Diseño web HTML5 + CSS 13

Un editor de texto, para escribir código.En este curso usaremos Sublime

14 Diseño web HTML5 + CSS

Diseño web HTML5 + CSS 15

También podría gustarte