Programadores 4.0 PDF

HTML: Clase 1 - Introducción
Bianchi - Ciarallo - Juarez

Febrero 2023
Contenido:
• Origen del HTML, de la web y su funcionamiento

• Terminología (Navegador, Cliente, Servidor, Arq. Cliente Servidor)
• Desarrollo Frontend y desarrollo Backend
• Uso de los lenguajes HTML, CSS y Javascript
• Editores de Código
HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

Web: Orígenes
En 1969 se establece la primer conexión entre computadores (ARPANET)
➔ El Desarrollo fue por encargo del Departamento de Defensa de los Estados Unidos
Internet
WORLD WIDE WEB
➔ Primera conexión entre las Universidades UCLA y Stanford

➔ NCP (Network Control Protocol – Protocolo de control de red)
➔ TCP (Transmision Control Protocol – Protocolo de control de transmisión)
Navegador y HTML
En los 90, Tim Berners Lee desarrolla:

➔ HTTP (protocolo de transmisión de hipertexto)
WWW
➔ HTML (lenguaje de marcado)

➔ Nexus (navegador)
➔ Servidor HTTP

Web: Navegadores
Un navegador web (web browser) es un software que permite el acceso a la Web, interpretando
la información de distintos tipos de archivos, y mostrándola al internauta en forma adecuada.
➔ Chrome
➔ Mozilla Firefox
➔ Internet Explorer
➔ Microsoft Edge
➔ Safari
➔ Ópera

Web: Funcionamiento
El navegador envía un mensaje de petición
HTTP al servidor, solicitándole que envíe una
copia de la página web para el cliente.
Este mensaje y todos los datos enviados

entre el cliente y el servidor, se envían a
través de tu conexión a Internet usando
TCP/IP.

Web: Arquitectura cliente servidor
➢ Hay dos partes claramente

diferenciadas
➢ Los clientes solicitan varios
servicios al servidor
➢ El servidor atiende los pedidos de

los clientes, actuando como un
depósito y gestor de datos

Web: Desarrollo Frontend vs Desarrollo Backend
El desarrollo de El desarrollo de lo
lo que ve el que que debe procesar y
navega alimentar el frontend

Web: Frontend y Backend
Frontend Backend
Es la parte del desarrollo Se complementan y Procesa la información que

web que se dedica a la necesitan alimentará el frontend de
parte frontal de un sitio mutuamente para datos.
web, del diseño de un sitio funcionar, porque los Es la capa de acceso a los
web, desde la estructura sitios web deben ser datos, es la lógica
hasta los estilos como amigables y poder tecnológica que hace que
colores, fondos, tamaños, realizar una página web funcione.
animaciones y efectos. operaciones.

Web: Frontend
Es esa parte Es todo el código

que se ejecuta en
de la página
el navegador de
con la que
un usuario, al que
interactúan
se le denomina
los usuarios aplicación cliente
Es todo lo que el visitante ve y experimenta de forma directa

Frontend: Desarrollo
Se trabaja del lado del cliente con lenguajes como:
➔ HTML: Lenguaje de marcado de hipertexto, se utilizan etiquetas que estructuran y
organizan el contenido de la página.
➔ CSS: Lenguaje de estilo, que se encarga del formato y diseño visual de las páginas
web escritas en html para darle estructura y estilo al sitio.
➔ Javascript: Es un lenguaje de programación, rápido y seguro, utilizado por la mayoría

de los sitios web, ya que sumado al HTML y al CSS, permite darle dinamismo a los
sitios web.

Editores
Para facilitar la escritura de código HTML, CSS, JavaScript, y organizarlo adecuadamente,
utilizaremos editores de texto de código fuente
• Visual Studio: https://vscode.dev
• Editores online:
➢ https://codepen.io/pen
➢ https://jsbin.com/

Resumen
➔ Un navegador nos permite el acceso a la web y es el encargado de interpretar las
páginas y mostrar el contenido
➔ El desarrollo Frontend es la generación de todo el código que interpreta el navegador y
con la cual interactúa directamente el internauta.
➔ El desarrollo Backend procesa, resuelve y alimenta las peticiones hechas por el
frontend.
➔ Para el Desarrollo del Frontend usaremos:
◆ HTML (Lenguaje de marcado de hipertexto)
◆ CSS (Lenguaje de estilo)
◆ JavaScript (Lenguaje de programación)

HTML: Clase 1 - Estructura y
Etiquetas Básicas

Febrero 2023
Contenido:
• Características y estructura del código HTML

• Elementos HTML
• Sintaxis y uso de las etiquetas básicas
• Ejemplos
• Ejercicio propuesto
HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

HTML
➔ HT: Hipertexto/ ML: Lenguaje de Marcado (HyperText Markup Language)
➔ Es un estándar a cargo del World Wide Web Consortium (W3C), organización

dedicada a la estandarización de casi todas las tecnologías ligadas a la web.
➔ Define una estructura básica y un código (denominado código HTML) para la

definición de contenido de una página web, como texto, imágenes, videos, juegos,
entre otros.

HTML: Estructura básica de una página
<html>
<head>
Sección con información
Código HTML
técnica para el navegador y
los motores de búsqueda
</head>
<body >
Sección con el contenido que
aparecerá en la página
</body>
</html>

HTML: Composición de un Elemento
Elemento
<p> Este es un ejemplo de texto </p>
Contenido
Etiqueta de
Etiqueta de
Apertura
Cierre
HTML: Etiquetas Básicas
<html> <html> Encierra a todo el Código html </html>
<head> <head> Encierra la sección de metadatos </head>
<title> <title> Título Solapa - Va dentro de <head> </title>
<body> <body> Encierra al Cuerpo principal </body>
<h1> Título principal </h1>

<h1> a <h6>
<h2> Subtítulo </h2>
<p> <p> Párrafo </p>

HTML: Ejemplo de uso de las etiquetas
Ejemplo: Visualización:
—----------------------
-----------
.html www
<html>
<head>
<title>Este es el TITULO de la solapa
de la pagina</title>
</head>
<body>
<h1>Este es un TITULO dentro del cuerpo
de la pagina</h1>
<p>Este es un parrafo de texto que esta
en el cuerpo de la pagina, y que se
visualiza en la ventana principal del
navegador.</p>
</body>
</html>

HTML: Ejemplo de uso de las etiquetas
Ejemplo: Visualización:
—----------------------
-----------
.html
<html> www
<body>
<h1>Este es el TITULO PRINCIPAL</h1>
<p>Esto es un párrafo de texto inicial, por
ejemplo, una introducción al resto de la
página. </p>
<h2>Esto es un SUBTITULO</h2>
<p>Pueden usarse hasta 6 niveles de
subtítulos.</p>
<h2>Otro SUBTITULO de igual tamaño al
anterior</h2>
<p>Podemos combinar subtítulos y párrafos para
darle al documento, la estructura que
queramos.</p>
</body>
</html>

Etiqueta: <h>
La etiqueta <h> permite construir títulos y subtítulos, hay seis tamaños diferentes.
Los tamaños absolutos pueden variar de un navegador a otro.
—----------------------
-----------
.html www
<h1> Texto muy grande usando h1.</h1>

<h2> Texto grande usando h2 .</h2>
<h3> Texto algo más grande de lo normal usando h3.</h3>
<h4> Texto normal usando h4.</h4>
<h5> Texto pequeño usando h5.</h5>
<h6> Texto muy pequeño usando h6.</h6>

Etiqueta: <p>
La etiqueta <p> permite definir un nuevo párrafo.
Cada párrafo comienza en una nueva línea.
—----------------------
-----------
www
.html
<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>
<p>Y este es otro párrafo con mucho más
texto y que puede ocupar más de una línea,
pero se ajustará automáticamente al tamaño
de la ventana donde se abre la página.</p>

Declaración: <!DOCTYPE>
<!DOCTYPE> no es una etiqueta, es una declaración y le indica al navegador el tipo de
documento que está por procesar y a que versión de html corresponde.
Va en la primera línea del archivo y en HTML 5 se la utiliza acompañada de la palabra html.
—----------------------
-----------
.html
<!DOCTYPE html>
www
<html>
<head>
<title>Uso de DOCTYPE</title>
</head>
<body>
<h1>Declaración !DOCTYPE></h1>
<p>Informa al navegador el tipo de documento y la
versión de html</p>
</body>
</html>

Resumen
✓ Las páginas HTML son documentos de texto enriquecido.
✓ HTML usa etiquetas (tags).
✓ Usualmente, hay etiquetas de apertura y de cierre.
✓ Las etiquetas no pueden estar solapadas.
✓ Para aprender HTML necesitás saber qué etiquetas existen, cuál es su uso y cómo aplicarlas.
✓ Etiquetas: • <html> Raíz del documento. Encierra al resto
• <head> Contenedor de metadatos
• <title> Dentro de <head>, título de la solapa
• <body> Contenedor principal y único
• <h1> a <h6> Encabezados
• <p> Definición de párrafo
✓ Declaración <!DOCTYPE html> para indicar el tipo de documento y versión de html

Ejercicio 1
Generar una página web con un título: “Primera clase” y una explicación resumida de
al menos 3 de los conceptos vistos en la introducción, por ejemplo:
➢ Navegador
➢ Frontend
➢ HTML
Para cada uno usar subtítulos y párrafos.

HTML: Clase 1 - Más Etiquetas

Febrero 2023
Contenido:
• Etiquetas: <hr>, <br>, <strong>, <em>, <sup>, <sub>, <del>, <ins>, <abbr>
• Entidad:
• Uso de Atributos en las etiquetas
• Ejercicio propuesto
HTML Clase 1: Más Etiquetas BIANCHI - CIARALLO - JUAREZ

Etiqueta: <hr>
La etiqueta <hr> , dibuja una línea y luego produce un salto de línea, pudiendo separar un
párrafo de texto, de otro, intercalando una etiqueta <hr> entre ambos.
—----------------------
-----------
.html www
<p>
Este es el primer párrafo de texto.
</p>
<hr>
<p>Este segundo párrafo de texto, está justo
después de una etiqueta hr.
</p>

Etiqueta: <br>
La etiqueta <br> produce un salto de línea en el texto (retorno de carro).

No tiene etiqueta de cierre, lo que está a continuación de la etiqueta <br>, se mostrará en
la siguiente línea.
—----------------------
-----------
.html www
<p>
Facultad de Ingeniería<br>
Universidad de Buenos Aires<br>
Paseo Colón 850<br>
Ciudad de Buenos Aires
</p>

Etiquetas: <strong> <em>
• La etiqueta <strong> define texto con fuerte importancia. Usualmente se verá en negrita.
• La etiqueta <em> enfatiza el texto, mostrándolo en cursiva.
—----------------------
-----------
.html www
<p>Verás: <strong>HTML</strong> generalmente en negrita.</p>

<p>Verás: <em>Css</em> generalmente en itálica.</p>
<p>Verás:
<strong><em>Javascript</em></strong>
en negrita y en itáilica.
</p>

Etiquetas: <sup> <sub>
➔ La etiqueta <sup> indica que el texto se debe mostrar más alto, y generalmente más
pequeño, que el tramo principal del texto, a modo de superíndice.
➔ En cambio, <sub> es su opuesto, del tipo subíndice.
—----------------------
-----------
www
.html
<p>La ecuación más famosa es E=mc<sup>2</sup> . </p>

<p>La composición quimica del agua es H<sub>2</sub>O.</p>

Etiquetas: <del> <ins>
➔ El texto entre las etiquetas <del> </del>, usualmente se mostrará tachado.
➔ El texto entre las etiquetas <ins> </ins>, normalmente se mostrará subrayado, indicando
que el texto ha sido añadido al documento.
—----------------------
-----------
.html www
<p>
<b>Oferta: </b>
Notebook 15,6 8/256 HP i5,
<del>antes $170.000</del> ahora a
<ins>$155.000 </ins>
</p>
Nota: con ambas etiquetas se pueden utilizar los siguientes atributos:

● cite: para indicar una url a un documento que explique el motivo de la eliminación/inserción del texto
● datetime: para indicar el día y la hora en la que el texto fue eliminado, insertado o modificado

Entidad: (Non Breaking Space que significa espacio sin ruptura)
La entidad representa un espacio en blanco y se utiliza normalmente en dos casos:

● Si queremos que dos palabras no se separen al ajustar el texto al tamaño de la ventana,
por ejemplo las dos palabras que forman una marca. En este caso, si ponemos Coca Cola el
navegador podría separar las palabras, pero si ponemos Coca Cola el navegador no
las separará, aunque modifiquemos el tamaño de la ventana.
● Si queremos evitar que el navegador agrupe todos los espacios como si fuesen uno sólo
podemos utilizar la entidad tantas veces como espacios en blanco queramos incluir.
—----------------------
-----------
.html www
<p>La empresa multinacional estadounidense,

productora de la gaseosa Coca Cola, ha
lanzado al mercado una nueva bebida.</p>

Etiquetas: Atributos
Algunos de los elementos en HTML, admiten atributos que al ser aplicados, le suman características al
comportamiento del elemento.
Por ejemplo: ➔ indicar el lenguaje de un párrafo, ó

➔ que información se debe mostrar al pasar con el mouse sobre una imagen, ó
➔ si debemos abrir un enlace en una nueva ventana.
Sintaxis <etiqueta nombre_atributo = "valor">
Ejemplo <p lang = "es"> Párrafo </p>

Nombre
atributo
Valor
Etiqueta: <abbr>
La etiqueta <abbr> se utiliza para indicar que el texto que se encuentra entre <abbr> y
</abbr>, es una abreviatura o acrónimo.
Se puede utilizar el atributo title para describir el significado de la abreviatura o acrónimo.
www
—----------------------
-----------
.html
<p>
En este curso veremos
<abbr title = “HiperText Markup Language”>HTML</abbr> y
<abbr title = “Cascading Style Sheets”>CSS</abbr> www
</p>

Metaetiqueta: UTF-8
➔ Las metaetiquetas van dentro del elemento <head>
➔ Proveen información al navegador (autor, fecha, palabras clave, descripción, etc.)
➔ Son invisibles para el internauta
➔ Se introducen utilizando el elemento <meta>
➔ En particular, el atributo charset, con el valor "UTF-8", indica el conjunto de caracteres
utilizado por el documento (UTF-8 incluye casi todos los caracteres de cualquier idioma).
Incorporarlo nos asegura que nuestra página se mostrará de forma correcta en cualquier
navegador.
<head>
—-------------------
--------------
.html
<meta charset = "utf-8">
</head>

HTML: Visualizar el código
Para ver el código fuente de una página, hacer click con botón derecho, y seleccionar
opción “Ver código fuente”:

Resumen: Etiquetas vistas
• <html> Raíz del documento. Encierra al resto • <br> o </br> Salto de línea
• <head> Contenedor de metadatos • <em> Enfatizar texto
• <title> Dentro de <head>, título de la solapa • <strong> Resaltar texto importante
• <body> Contenedor principal y único • <sup> Superíndice y <sub> subíndice
• <h1> a <h6> Encabezados • <abbr title = “aclaración de la abreviatura”>
• <p> Definición de párrafo • <del> texto eliminado tachado
• <hr> o </hr> Salto de línea y separación de contenido • <ins> texto insertado subrayado
También vimos:
➤ la entidad para representar un espacio en blanco
➤ la declaración <!DOCTYPE html> para indicar el tipo de documento y versión de html
➤ el uso de atributos específicos en los elementos, mediante el nombre = valor, para agregar
características al comportamiento del elemento
➤ el metadato <meta charset = “utf-8” para indicar el conjunto de caracteres a utilizar

Ejercicio 2
Aplicale a la página realizada en el ejercicio 1, al menos 4 de las etiquetas vistas, para

por ejemplo, lograr:
➢ separación de secciones,
➢ destacar el texto importante,
➢ enfatizar,
➢ insertar separaciones de líneas.
➢ Describir un término que aparezca abreviado.

HTML: Clase 2 - Listas
Lic. Gustavo Bianchi

Febrero 2023
Listas
Las listas dan la posibilidad de agrupar un conjunto de items que estén relacionados.
1. No ordenadas (con viñetas)

En HTML
hay 3 clases 2. Ordenadas (numeradas y de otro tipo)
de Listas 3. De definición (estilo diccionario)
HTML Clase 2: Listas Lic. GUSTAVO BIANCHI

Listas No ordenadas
➔ Se crea con <ul> y cierra con </ul>
➔ Cada ítem de la lista va entre <li> y </li>
Ejemplo: Debemos mostrar la lista de ingredientes para hacer una tortilla de papas. El orden no importa.
—---------------------
------------
.html
www
<ul>
<li>1kg de papas</li>
<li>8 huevos</li>
<li>1 cebolla grande</li>
<li>Sal a gusto</li>
</ul>

Listas Ordenadas
➔ Se crea con la etiqueta <ol> y cierra con </ol>
➔ Cada ítem de la lista va entre <li> y </li>
Ejemplo: Debemos mostrar la receta con la descripción de pasos para cocinar un plato. Aquí sí importa el orden.
www
<ol>
<li>Freímos las papas cortadas en rodajas finas
durante 20 minutos.</li>
<li>En otra sartén freímos la cebolla.</li>
—---------------------
<li>Batimos los huevos en un bowl y le mezclamos
------------
.html las papas y la cebolla sin el aceite.</li>

<li>Colocamos todo en una sartén durante 5
minutos a fuego suave.</li>
<li>Damos vuelta la tortilla y la dejamos otros 3
Nota: Podemos usar atributos en la etiqueta <ol> para indicar el
minutos a fuego suave.</li> tipo de numeración (type); el valor de inicio (start); y dar orden
</ol > descendente (reversed).

Listas de Definición
➔ La lista se crea con <dl> y cierra con </dl>
➔ Cada término a definir va entre <dt> y cierra con </dt>
➔ Cada descripción o definición va entre <dd> y </dd>
<dl> www
<dt>HTML: </dt>
<dd>Lenguaje de marcado para la elaboración
de páginas web.</dd>
<dt>CSS: </dt>
—---------------------
------------ <dd>Lenguaje que se usa con HTML para darle
.html estilo a las páginas web. </dd>
<dt>JavaScript: </dt>
<dd>Lenguaje de programación que se usa
principalmente del lado del cliente,
para dar dinamismo a las páginas web. </dd>
</dl>

Listas Anidadas
Podemos combinar los tipos de listas vistos para obtener una salida acorde a lo que nos requieran
<ol>
<li>Pastelería
<ul> www
<li>Medialunas</li>
—---------------------
------------
.html
<li>Palmeritas</li>
<li>Masitas</li>
</ul>
</li>
<li>Tartas
<ul>
<li>Verdura</li>
<li>Jamón y Queso</li>
</ul>
</li>
</ol>

Resumen
Listas
➔ <ul> crea una lista desordenada
◆ <li> crea cada ítem dentro de la lista
➔ <ol> crea una lista ordenada
◆ <li> crea cada ítem dentrio de la lista
◆ Atributo type define el tipo de enumerador (1, A, a, I, i)
◆ Atributo start indica el valor inicial de la lista
◆ Atributo reverse indica orden descendente
➔ <dl> crea una lista de definiciones
◆ <dt> indica el término a definir
◆ <dd> indica la definición del término

Ejercicios
En todos estos ejercicios utiliza títulos para la solapa y para la página
1. Usando listas ordenadas, muestra un ranking de tus 5 canciones favoritas
2. Hace una lista no ordenada de 3 objetivos que te gustaría cumplir
3. Usando una lista de definiciones, componé una página, eligiendo 5 de las

etiquetas vistas en la clase 1 de HTML, y colocando para cada una el nombre y la
descripción de lo que produce. En al menos uno de los casos, usa listas no
ordenadas, para mostrar los nombres de los atributos aplicables a la etiqueta.

HTML: Clase 2 - Enlaces

Febrero 2023
Enlaces (Hyperlinks)
Los enlaces permiten que el usuario pueda navegar fácilmente por distintas partes de la
página, o dirigirse a otra página del mismo sitio; ó directamente acceder a otro sitio distinto.
Sitio
ro
o
Ot M
iti
ism
os
aP
ism
ág
m
in
a
el
ad
in
g
Pá
ra
Ot
HTML Clase 2: Enlaces Lic. GUSTAVO BIANCHI
Enlaces: Etiqueta <a>
La etiqueta <a> nos permitirá definir el enlace y sus usos más frecuentes son:
➔ Ir de un lugar de una página web a otro lugar de la misma
➔ Ir de una página web a otra dentro del mismo sitio
➔ Ir a otro sitio web
➔ Abrir una nueva ventana del navegador
➔ Iniciar un programa de correo electrónico para enviar un correo a una dirección determinada

Enlaces: Etiqueta <a> - Sintaxis
sitio web
que abrirá
Sintaxis <a href="url">Texto a mostrar</a>
atributo texto que se

href verá resaltado
en la página
Ejemplo <a href="https://fi.uba.ar">Facultad de Ingeniería - UBA</a>

Enlaces: Alternativas de Uso
1. Para abrir una página que está ubicada localmente en la misma carpeta que la página
actual:
<a href = "ejemplo.html“ >Enlace a una página local</a>
2. Para abrir una página que está ubicada localmente en la misma carpeta que la página
actual, pero en una nueva ventana:
<a href = "ejemplo.html“ target = “_blank”>Ejemplo página local en una ventan nueva</a>
3. Para abrir el programa de correo que usa el usuario y que pueda enviar un mail a una
dirección indicada:
<a href = “mailto:info@gmail.com">Para más información, envíanos un mail</a>

Enlaces dentro de la página
Para incluir un enlace a una parte de la misma página debe usarse el id del elemento destino
y anteponer #:
—---------------------
------------
.html
<h1 id="secciones">Secciones</h1>
<a href = "#seccion_1">Sección 1</a><br/>
<a href = "#seccion_2">Sección 2</a><br/>
Probar el código
reemplazando el texto de
los párrafos por textos <h2 id = "seccion_1">Sección 1</h2>
largos, que obliguen el
<p>Aquí va la narrativa correspondiente a la sección 1.</p>
desplazamiento (scroll) de
la página. <a href = "#secciones">Volver a Secciones</a><br/>
<h2 id = "seccion_2">Sección 2</h2>

<p>Aquí va la narrativa correspondiente a la sección 2.</p>
<a href = "#secciones">Volver a Secciones</a><br/>

Resumen
Enlaces
➔ <a> con atributo href, que puede ir
● Con dirección absoluta
● Dirección relativa
● # y un id de un elemento en la misma página (o de otra con absoluta)
● mailto: abre para enviar un correo
➔ Atributo id en los títulos para relacionar el enlace
➔ Atributo target = “_blank” abre la página en otro lugar

Ejercicios
1. Hacer una página que contenga la siguiente oración:
“En este curso aprenderemos a desarrollar páginas web, utilizando los lenguajes
HTML, Css y Javascript”
Crear enlaces absolutos a wikipedia, que relacionen cada una de las palabras HTML,
Css y Javascript, abriendo las páginas en ventanas independientes.
2. Ahora hace una página que contenga la misma oración que el ejercicio anterior, y
debajo un título y un párrafo, por cada una de las palabras HTML, Css y Javascript.
Copia de las páginas que accediste de wikipedia, pedazos de texto para utilizar en los
párrafos. Por último, implementa enlaces dentro de la página entre las 3 palabras de la
oración inicial, y los títulos de cada una de las palabras.

HTML: Clase 2 - Imágenes

Febrero 2023
Imágenes: Etiqueta <img>
➔ La etiqueta <img> permite incorporar una imagen en una página HTML.
➔ La imágen es linkeada, no es insertada en la página web, sino que se crea un espacio
y una referencia a donde se encuentra la imagen.
➔ La etiqueta <img> no tiene etiqueta de cierre.
Tiene 2 atributos obligatorios:

1. src = URL, “ruta absoluta o relativa a la imagen”
2. alt = “Descripción de la imagen”.
Si la imagen por algún motivo no es mostrada, se mostrará la descripción.
HTML Clase 2: Imágenes Lic. GUSTAVO BIANCHI

Enlaces: Etiqueta <img> - Sintaxis
ubicación de
la imagen
Sintaxis <img src="url" alt="texto alternativo">
texto que se verá,

en el caso que no
se encuentre la
imagen

Imágenes: Etiqueta <img> - Ejemplo
Ejemplo: En este caso mostramos una imagen de la Facultad de Ingeniería del edificio ubicado en la Av. Las Heras y
Av. Pueyrredón. La imagen se encuentra ubicada en la misma carpeta que el código html.
—---------------------
------------
.html
www
<img src = "fiuba_las_heras.jpg"

alt = "FIUBA - Las Heras">
Nota: Si la imagen estuviera en otra ubicación distinta a

donde se encuentra nuestra página html, debemos indicar
la ruta a la misma.

Imágenes: Atributos height y width
Con los atributos height y width podemos indicar el tamaño con el que queremos que
nuestra imagen sea mostrada.
<img src = "fiuba_las_heras.jpg" alt = "FIUBA - Las Heras"

Alto en píxeles
height = "200">
<img src = "fiuba_las_heras.jpg" alt = "FIUBA - Las Heras"

Ancho en píxeles
width = "350">
Notas:
1. Si bien podemos indicar ambos atributos para una misma imagen, es recomendable sólo indicar uno de ellos para que la
imagen no se deforme y mantenga una relación de aspecto entre su alto y su ancho original.
2. Más adelante veremos como modificar el tamaño de la imagen utilizando CSS, que es lo recomendable.
3. No es recomendable indicar con estos atributos un tamaño mayor al que realmente tiene la imagen.

Imágenes: Resolución
➔ La resolución de una imagen está asociada a la cantidad de píxeles por pulgada que contiene
(1 pulgada equivale a 2,54 centímetros).
➔ El píxel es una unidad de medida digital (no física).

Cada píxel es el elemento más pequeño y homogéneo que
compone a la imagen y está definido por su brillo y su color.
➔ A más píxeles por pulgada más información contiene la

imagen y más precisa será.
➔ La dimensión de una imagen en píxeles, está dada por la cantidad de píxeles que tiene de
alto y de ancho. El total de píxeles de la imagen, resulta de multiplicar ambas cantidades.

Imágenes: Formatos JPG, GIF, PNG
JPEG: Joint Photographic Experts GIF: Graphics Interchange Format
Group ➔ Imágenes de pocos colores (256)
➔ Imágenes con muchos colores ➔ Soporta transparencias
➔ La más común ➔ Logos
➔ Animaciones
➔ Imágenes muy grandes
PNG: Portable Network Graphics

➔ Imágenes de pocos colores (256)
➔ Soporta transparencias
➔ Logos

Imágenes: Formato SVG
Los gráficos vectoriales escalables (SVG) es un formato de gráficos bidimensionales, basados en
vectores, construidos mediante XML (Extensible Markup Language).
➔ No se basan en píxeles como los anteriores, están compuestos por vectores, que son instrucciones
matemáticas que son pasadas al navegador para escalarlos de manera infinita y sin perder calidad en
el gráfico.
➔ Pueden ser estáticos o animados.
<svg version="1.1"
width="100%"
viewbox="0 0 600 200"
xmlns="http://www.w3.org/2000/svg">
Ejemplo de Código
xml <circle cx="70" cy="80" r="50"
fill="red" stroke="#b2c1f7" No pierden
stroke-width="15"/> calidad al
redimensionar
</svg> la solapa

Imágenes: Etiquetas <figure> y <figcaption>
➔ La etiqueta <figure> genera un contenedor para la imagen
➔ La etiqueta <figcaption> es opcional y permite agregar un texto explicativo al elemento figure
<figure>
<img src = "fiuba_las_heras.jpg"
—---------------------
alt = "FIUBA - Las Heras">
------------
.html <figcaption> www

Facultad de Ingeniería - Sede Las Heras
</figcaption>
<figure>

Resumen
Imágenes
➔ <img> incorpora una imagen
◆ Atributo src indica la ruta a la imagen
◆ Atributo alt descripción de la imagen
◆ Atributos height y width indican alto y ancho en píxeles
➔ Formatos JPG, GIF, PNG y SVG
➔ <figure> genera un contenedor para la imagen
◆ <figcaption> permite agregar detalle descriptivo del elemento figure

Ejercicios
En todos los ejercicios podés hacer uso de las etiquetas ya vistas y que consideres que
pueden ayudarte a lograr lo solicitado
1. Armar un menú de un restaurante con imágenes de platos.

Como mínimo debe tener 2 opciones de entradas, 3 de platos principales, y 2 de
postres. Cada una de las opciones debe tener una descripción.
2. Elegí entre 10 y 20 fotos tomadas por vos, por ejemplo de viajes, cumpleaños,
reuniones, etc; y componelas a modo de álbum, agregando una breve descripción
a cada una de ellas.

HTML: Clase 3 - Tablas

Febrero 2023
Tablas
En HTML se usan
tablas para
mostrar datos
organizados en
filas y columnas.
HTML Clase 3: Tablas Lic. GUSTAVO BIANCHI

Tablas: Etiquetas <table> <tr> <td>
➔ Una tabla se inserta mediante la etiqueta <table>.
➔ Está compuesta por filas, que se agregan mediante la etiqueta <tr> (table rows).
➔ Cada fila se compone de celdas <td> (table división).
Ejemplo: Tabular la superficie y población de Argentina y Uruguay
<table>
<tr>
<td>Argentina</td>
<td>3.761.274 Km2</td>
<td>45.808.747 Personas</td>
—---------------------
------------
</tr>
.html
<tr> www
<td>Uruguay</td>
<td>176.215 Km2</td>
<td>3.485.152 Personas</td>
</tr>
</table>

Tablas: Encabezado - Etiqueta <th>
➔Generalmente, las columnas y/o las filas de las tablas tienen un encabezado; para definirlo
debemos usar la etiqueta <th> (table header).
➔ Es similar a la etiqueta <td> ya que también define una celada, pero <th> suma información
semántica indicando que la celda corresponde al encabezado de la tabla.
Ejemplo: Al ejemplo anterior le agregamos los encabezados: País, Extensión Km2 y Población
<table>
<tr>
—---------------------
------------
<th>País</th> www
.html <th>Extensión Km2</th>
<th>Población</th>
</tr>
<tr>
<td>Argentina</td>
<td>3.761.274</td>
<td>45.808.747</td>
</tr>
. . . . . . . . . . Resto del código

Tablas: Título - Etiqueta <caption>
➔ Si queremos tener un título asociado a la tabla, debemos usar la etiqueta <caption>.
➔ Debe ser el primer elemento de la etiqueta <table>.
Ejemplo: Al ejemplo anterior le agregamos el título “Tabla Informativa”
—---------------------
------------
.html www
<table>
<caption>
Tabla Informativa
</caption>
<tr>
<th>País</th>
<th>Extensión Km2</th>
<th>Población</th>
</tr>
. . . . . . . . . .
</table>

Tablas: Expansión de celdas - Atributo colspan
➔ Si necesitamos que una celda ocupe o se expanda hasta dos o más columnas debemos indicar
a través del atributo colspan la cantidad de celdas/columnas que debe ocupar.
Ejemplo: Al ejemplo anterior le vamos a agregar una celda que ocupe 2, por encima de los títulos “Extensión
Km2” y “Población”, y que muestre la palabra “Datos”
<table>
. . . . . . . . . .
www
<tr>
<th></th>
Ocupa 2 celdas horizontalmente
<th colspan = 2>Datos</th>
—---------------------
------------
</tr>
.html
<tr>
<th>País</th>
<th>Población</th>
</tr>
. . . . . . . . . . Nota: Observe que al expandir a 2 columnas, la cantidad de etiquetas
</table> <th> en esa fila son 2 en lugar de 3, ya que una ocupará 2 celdas.

Tablas: Expansión de celdas - Atributo rowspan
➔ De igual modo, si necesitamos que una celda ocupe o se expanda hasta dos o más filas,
debemos indicar a través del atributo rowspan la cantidad de celdas/filas que debe ocupar.
Ejemplo: Vamos a modificar el ejemplo anterior para que la celda que muestra la palabra “País”, ocupe 2 filas.
<table>
. . . . . . . . . .
www
<tr>
<th rowspan = 2>País</th>
<th colspan = 2>Datos</th> Ocupa 2 celdas
verticalmente
—---------------------
------------
</tr>
.html
<tr>
<th>Población</th>
</tr>
. . . . . . . . . .
</table> Observe que al expandir a 2 filas, la cantidad de etiquetas <th> en la fila
siguiente, se ve reducida en 1, ya que “País” ocupará 2 celdas hacia abajo.
Nota: Los atributos colspan y rowspan, aplican de igual modo para etiquetas <td>.

Tablas: Secciones - Etiquetas <thead>, <tfoot> y <tbody>
Podemos dividir la tablas en 3 secciones:
1. La de los encabezados, indicada por la etiquetas <thead></thead>
2. La de los datos, indicada por las etiquetas <tbody></tbody>
3. La del pie, indicada por las etiquetas <tfoot></tfoot>
El uso de estas etiquetas, aporta significado semántico y permitirá cuando usemos CSS aplicar
un estilo diferencial a cada una de las secciones.
Tener en cuenta que:

➔ Cada uno de estos pares de etiquetas, deben encerrar etiquetas <th> o <td> según
corresponda.
➔ La etiqueta <caption> debe quedar por fuera de estas etiquetas y como primer elemento.

Tablas: Secciones - Etiquetas <thead>, <tfoot> y <tbody>
Ejemplo: Si aplicáramos a nuestro ejemplo estas etiquetas, no veríamos en esta instancia del curso, ningún
reflejo en la parte visual. Por ello, sólo a modo ilustrativo, se muestra como podrían estar utilizadas.
<table> <table>
. . . . . . . . . . . . . . . . . . . .
<thead> <tbody>
<tr> <tr>
<th></th> <th>País</th>
<th colspan = 2>Datos</th> <th>Extensión Km2</th>
</tr> <th>Población</th>
—---------------------
------------ <tr> —---------------------
------------ </tr>
.html <th>País</th> .html <tr>
<th>Extensión Km2</th> <td>Argentina</td>
<th>Población</th> <td>3.761.274</td>
</tr> <td>45.808.747</td>
</thead> </tr>
. . . . . . . . . . </tbody>
</table> . . . . . . . . . .
</table>

Resumen
Tablas
➔<table> inserta la tabla
➔<tr> crea una fila en la tabla
➔<td> crea una celda
➔<th> crea una celda para encabezado dentro de un <tr>
➔<caption> para dar un título a la tabla, primer elemento dentro de <table>
➔Atributos colspan y rowspan para expandir celdas <td> y <th>
➔<thead> para encerrar los elementos que conforman el encabezado de la tabla
➔<tbody> para encerrar los elementos que contienen los datos de la tabla
➔<tfoot> para encerrar los elementos que conforman el pie de la tabla

Ejercicio
Hacer una página que reproduzca la tabla que se muestra a continuación.
Identifique el título y las secciones, utilizando las etiquetas correspondientes.
No tenga en cuenta las líneas, ni el resaltado de las palabras.

HTML: Clase 3 - Formularios

Febrero 2023
Formularios
Los formularios web permiten la

interacción con el usuario,
ofreciéndole la posibilidad de:
➔ Completar información
➔ Enviar la información
➔ Obtener una respuesta
HTML Clase 3: Formularios Lic. GUSTAVO BIANCHI

Formularios: Tipos de Ingresos
Radio Buttons
Permite elegir una entre varias opciones
Ingreso de Texto
Tipo Correo Electrónico
Ingreso de Texto
Tipo Contraseña
(No refleja los caracteres)
Selector de
fecha
Ingreso de
Texto
Botones de
Envio
Lista Desplegable

Formularios: Tipos de Ingresos
Checkboxes
Permite elegir más
de una opción
Cajas para ingresar

texto de varias
líneas

Formularios: Etiqueta <form> y sus atributos
Para crear un formulario debemos usar las etiquetas <form></form> y encerrar entre estas,
todos los controles o campos a ingresar por el usuario y que serán enviados al mismo destino.
Entre los atributos posibles, los que inicialmente necesitamos usar son:
1. action (obligatorio): indica la ubicación y nombre del archivo (URL), al cual se deben enviar los datos
ingresados.
2. method: indica en que forma será enviada la información
➔ get: añade los datos ingresados al final de la URL, por lo cual son visibles. La URL en total, puede
contener 2048 caracteres como máximo.
➔ post: los datos viajan ocultos, dentro del cuerpo de la solicitud HTTP. No hay una cantidad máxima
de datos a enviar.
Nota: Usar POST si la información a enviar es confidencial o sensible.

Formularios: Etiqueta <input> y el atributo type
La etiqueta <input /> Es sólo de apertura, es la más usada y se aplica a distintos tipos de ingresos.
El atributo type indica el tipo de ingreso y algunos de los más usados son:
<input type = “text”> Muestra un campo de ingreso de texto de una línea
<input type = “radio”> Muestra un radio button
<input type = “checkbox”> Muestra un checkbox
<input type = “email”> Muestra un campo para el ingreso de un correo electrónico y al momento del envío valida si el
formato es el correcto, de lo contrario, muestra un mensaje acorde.
<input type = “password”> Muestra un campo para el ingreso de una contraseña y no refleja los caracteres que se tipean
<input type = “submit”> Muestra un botón para el envío del formulario

Formularios: Ejemplo
✓ Un formulario se crea usando las etiquetas <form></form> y debemos indicar el valor de los
Recordemos atributos action y method.
✓ Dentro van las etiquetas <input> con el atributo type correspondiente.
Ejemplo: Crear un formulario que solicite el ingreso de un nombre y un apellido.
<form action="http://www.example.com/datos.php" www

method = "get" >
<p>Nombre:
<input type = "text">
</p>
—---------------------
------------
.html
<p>Apellido:
<input type = "text">
</p>
<input type = "submit" value = "Enviar">
</form>
Nota: Luego del envío del formulario, veremos como respuesta, una página que nos da un mensaje
diciendo que el dominio de la URL indicada en el action puede ser utilizada con fines ilustrativos.

Formularios: El atributo name de la etiqueta <input>
El atributo name identifica al elemento input mediante la asignación de un nombre.
Su uso es necesario para poder referenciar los datos ingresados por el usuario, una vez que el formulario es
enviado; sino no serán pasados.
Ejemplo: Al ejemplo anterior le agregamos el uso del atributo name para los dos elementos input
—---------------------
------------
www
.html
Debido al uso del método GET se
puede ver que forman parte de la
<form action="http://www.example.com/datos.php" URL los valores de los atributos name
method = "get" > y los datos ingresados
<p>Nombre:
<input type = "text" name = "nombre">
</p>
<p>Apellido:
<input type = "text" name = "apellido">
</p>
<input type = "submit" value = "Enviar">
</form>

Formularios: Otros atributos de la etiqueta <input>
➔ maxlength: indica la cantidad máxima de caracteres que se pueden ingresar.
Por ejemplo, si piden el ingreso de un año, el maxlength sería 4.
Sintaxis: <input maxlength="number">
➔ minlength: indica la cantidad mínima de caracteres que deben ingresarse.

Por ejemplo, si es el ingreso de una contraseña, el minlength sería igual a la cantidad mínima
de caracteres que se establecieron para que la contraseña sea válida. Se podría usar en
combinación con el maxlength.
Sintaxis: <input minlength="number">
➔ required: controla que el campo se haya completado al momento de enviar el formulario,

de lo contrario, le indica al usuario que debe completarlo.
Sintaxis: <input required>

Resumen
Formularios - Parte 1
• <form> inserta el formulario
■ Atributo action: URL archivo destino
■ Atributo method: get (datos visibles y pocos) o post (datos ocultos y muchos)
• <input> crea un campo de ingreso dentro del formulario
■ Atributo type: define las características del campo de ingreso.
text (una única línea), email (valida el ingreso), password (enmascara los caracteres), submit (crea el
botón de envío)
■ Atributo name: permite identificar el elemento mediante un nombre. Necesario para poder enviar los
datos ingresados por el usuario.
■ Atributos minlength y maxlength: limitan el ingreso de caracteres a las cantidades establecidas
■ Atributo required: hace obligatorio el ingreso del dato

Formularios: Ejercicios
1. Crear una página que le permita a un usuario el ingreso a una aplicación. La página debe
solicitar el ingreso de su dirección de correo electrónico y una contraseña. El título de esta
página será “Inicio de Sesión”.
Como URL del atributo action use http://www.example.com/login.php.
2. Agregue a la página del ejercicio 1 un enlace a una nueva página en la cual, el usuario pueda
registrarse como nuevo usuario.
Se le debe solicitar: nombre, apellido, dni, correo electrónico, y contraseña a utilizar.
✓ Menos el DNI, el resto de los datos es obligatorio que sean completados.
✓ Elija tipos de inputs adecuados a las características de los datos a solicitar.
✓ La contraseña como mínimo debe tener 4 carácteres y como máximo 8.
✓ El título de esta página será “Registración de Nuevo Usuario”.
3. Agregue a la página del ejercicio 1 un enlace a una nueva página que permita recuperar una
contraseña olvidada. Esta nueva página debe solicitar el ingreso del correo electrónico. Este
dato es obligatorio. El título de la página será “Recuperación de contraseña”.

Formularios: Etiqueta <textarea>
La etiqueta <textarea> crea un control de ingreso de texto multilínea.
Generalmente, es utilizado para permitir el ingreso de comentarios.
➔ name: atributo necesario para identificar el dato ingresado y que es pasado al servidor.
➔ cols y rows: atributos que especifican el tamaño del área de ingreso.
Luego veremos como establecerlos a través de CSS.
—---------------------
www
------------
.html
<form action=“http://www.example.com/comments.php”>
<p>¿Qué te pareció la atención brindada?</p>
<textarea name = "comentarios" cols = "40" rows = "10">
Ingresa aquí tus comentarios…
</textarea>
</form>

Formularios: Radio Buttons
La etiqueta <input type="radio"> crea un radio button.
Los radio buttons le permiten al usuario, elegir sólo una de las opciones que les presenta.
<form action="http://www.example.com/perfil.php"> www

<p>Indicá tu género:<br>
<input type="radio" name="genero" value="M"> Mujer <br>
—---------------------
------------
<input type="radio" name="genero" value="V"> Varón <br>
.html
<input type="radio" name="genero" value="NB"> No binario <br>
</p>
<input type= "submit" value="Enviar">
</form>
Todos los inputs del mismo

grupo de Radio Buttons,
deben tener el mismo valor
en el atributo name.
El valor del atributo value,
del radio que fue
seleccionado por el
Si el atributo checked, es utilizado, el botón del input usuario, es enviado al
correspondiente, aparecerá preseleccionado en el formulario. servidor, al momento de
_<input type="radio" name="genero" value="M" checked> Mujer_ enviar el formulario

Formularios: Checkbox
La etiqueta <input type="checkbox"> crea un checkbox.
Las casillas de verificación (checkboxes) le permiten al usuario, elegir una o más opciones entre las
posibles expuestas.
<form action=”http://www.example.com/medios.php”> www

<p>Elija los medios de transportes de su preferencia:<br>
<input type= “checkbox” name=“medio” value=“B“>Bicicleta<br>
<input type= “checkbox” name=“medio” value=“M“>Moto<br>
—---------------------
------------
<input type= “checkbox” name=“medio” value=“A“>Auto<br>
.html
<input type= “checkbox” name=“medio” value=“T“>Tren<br>
<input type= “checkbox” name=“medio” value=“C“>Colectivo<br>
<input type= “checkbox” name=“medio” value=“S“>Subterráneo<br> Al enviarse el formulario,
</p> los valores de los checkbox
seleccionados, son
<input type= "submit" value="Enviar"> pasados.
</form>
* El uso de los atributos name, value y checked es igual que para los radio buttons

Formularios: Etiqueta <select> - Lista Desplegable
La etiqueta <select> crea una lista desplegable con opciones.
Los usuarios, podrán seleccionar una o más opciones de las ofrecidas.
www
<form action="https://www.example.com/curso.php">
<p>Qué curso deseas tomar?
<select name="curso_elegido">
<option value= "HTML">HTML</option>
<option value= "CSS">Css</option>
<option value= "JS">JavaScript</option>
—---------------------
------------
.html <option value= "PY">Python</option>

<option value= "JV">Java</option>
<option value= "C++">C++</option>
El valor del atributo
</select> value, de la opción
</p> elegida, es pasada
<input type= "submit" value="Enviar"> al enviar el
formulario
</form>
Si el atributo multiple, es utilizado en el select, permitirá la elección de más de una opción.

_<select name="curso_elegido" multiple>_
Para elegir múltiple opciones, el usuario deberá usar la tecla Ctrl + click derecho del mouse

Resumen
Formularios - Parte 2
• <textarea> crea un campo para ingreso de texto multilínea
■ Atributo name: identifica al elemento con un nombre. Necesario para poder enviar los datos ingresados por
el usuario.
■ Atributos cols y rows: indicada la capacidad máxima de caracteres del cuadro, estableciendo la cantidad de
caracteres por fila (col), y la cantidad de filas (rows)
• <input type="radio"> crea un radio button. En grupo, selección única.
■ Atributo name: permite asignar un nombre, que debe ser igual para todos los radio buttons del mismo
grupo. Necesario para poder enviar los datos ingresados por el usuario.
■ Atributo value: permite establecer un valor para cada radio button. Este valor será pasado en el momento de
enviar el formulario.
■ Atributo checked: la opción aparecerá preseleccionada.
● <input type="checkbox"> crea un check box. En grupo, selección múltiple.
• Atributos name, value y checked: similar comportamiento que los del radio button.

Resumen
Formularios - Parte 2 (continuación)
• <select> crea una lista desplegable de opciones de selección única ó múltiple.
■ Atributo name: identifica a la lista con un nombre. Necesario para poder enviar los datos ingresados por el
usuario.
■ Atributo multiple: su presencia indica que se podrán seleccionar múltiple opciones.
● <option> crea un elemento de la lista desplegable dentro del <select>.
■ Atributo value: permite establecer un valor para cada item de la lista. Este valor será pasado en el momento
de enviar el formulario.

Formularios: Ejercicios
4. Crear una página para Ingreso de Datos Personales (título de la página).
Los datos a solicitar son:
✓ Nombre (máximo 20 caracteres). Obligatorio
✓ Apellido (máximo 25 caracteres). Obligatorio
✓ DNI (sólo números). Obligatorio
✓ Correo electrónico. Obligatorio
5. Agregá a la página del ejercicio 1 los siguientes campos:
✓ Estado Civil (Soltera/o, Casada/o, Divorciada/o, Viuda/o, Conviviente). Selección única.
✓ Intereses (Culturales, Deportivos, Turísticos, Sociales, Otros). Selección múltiple.
✓ Descripción de Intereses (Texto de hasta 400 caracteres).
✓ País de Residencia (Argentina, Bolivia, Brasil, Colombia, Costa Rica, Chile, México, Nicaragua, Panamá, Paraguay,
Perú, Uruguay, Venezuela, Otro) Selección única.
✓ Recibir información adicional (Seleccionado por omisión).
6. Investigar por tu cuenta, el uso de los siguientes elementos y aplícalos según lo indicado:
✓ Input de tipo date. Luego agregá a la página de Ingreso de Datos Personales, debajo del DNI, el control para que el
usuario ingrese su Fecha de Nacimiento.
✓ Input de tipo image. Luego reemplaza el botón de envío del formulario, por uno con una imagen elegida por vos.

CSS: Clase 1 - Introducción
Bianchi - Zulaica
Febrero 2023
Contenido:
• Qué es CSS
• Para qué se usa
• Cómo escribir una regla
• Cómo se vincula con HTML
CSS Clase 1: Introducción BIANCHI - ZULAICA

CSS
Cascading Hojas
Style de Estilo
Sheets en Cascada
Es un lenguaje que permite aplicar estilo de forma selectiva a elementos en
el documento HTML, mediante el uso de reglas

CSS: Estilo
Agregan estilo al contenido
Hojas de Estilo HTML
colores, tamaños, posiciones, etc

CSS: Cascada
Forma en la que se aplican las reglas
1 Orden de Aparición
2 Especiﬁdad
en Cascada
3 Origen
4 Importancia

CSS: Cómo escribir una regla
—----------------------
-----------
*{
.css box-sizing: border-box;
accent-color: #253b69;
selector {
}
section {
width: 300px;
margin: 50px;
propiedad: valor; }
font-family: Arial, sans-serif;
text-align: center;
propiedad: valor;
legend {
Sintaxis color: #152b59;
font-weight: bold;
padding: 0 .5rem;
...; }
button {
background-color: #152b59ee;
} border: none;
border-radius: 3px;
color: white;
padding: .3rem 1rem;
letter-spacing: 1px;
}

CSS: Cómo vincularlo con HTML
A
DAD
E N
M
CO
Externa
RE
Vinculación
Alternativas de cómo 2 Interna
introducir las reglas
3 En línea
CSS: Vinculación Externa
Las reglas CSS se escriben en un archivo propio, con extensión .css, y se relacionan con las páginas
html a través del elemento link que debe estar contenido en la sección head.
—----------------------
-----------
<!DOCTYPE html>
.css
<html> h3 {color: blue; font-size: large}
<head> ul {color: red}
<link rel = “stylesheet” href = “estilo.css”>
</head>
<body>
<h3>VINCULACION EXTERNA</h3> www
<ul>
—----------------------
-----------
.html <li>Las reglas se agregan en un archivo .css</li>

<li>Aplican a todas las páginas que se indiquen</li>
</ul>
</body>
</html>
RECOMENDADO !!! se puede vincular un archivo CSS a varias páginas para

dar estilo a todas con la misma hoja de estilo

CSS: Vinculación Interna
Las reglas CSS se agregan entre las etiquetas <style> </style>, dentro del elemento head.
<!DOCTYPE html>
<html>
<head> www
<style>
h1 {color: blue; font-size: large}
p {color: red}
—----------------------
</style>
-----------
</head>
.html
<body>
<h1>VINCULACION INTERNA</h1>
<p>Las reglas se agregan en la sección head.</p>
<p>Aplican sólo a la página en la cual están.</p>
</body>
</html>
En lo posible, evitar este tipo de vinculación!!!

CSS: Vinculación En línea
La regla CSS se agrega dentro de la etiqueta HTML y el estilo sólo se aplica a ese elemento.
—----------------------
-----------
.html
www
. . . . .
<p style = "color: red; font-weight: bold">
El texto se ve en Rojo y resaltado
</p>
. . . .
NO RECOMENDABLE - Evitar este tipo de vinculación!!!

Resumen
• Css (Cascading Style Pages - Hojas de Estilo en Cascada)

■ Hojas de Estilo: Agregan estilo al contenido HTML
■ Cascada: Forma en la que se aplican las reglas
• Sintaxis Regla: selector { propiedad: valor}
• Vinculación con el archivo HTML
■ En línea: usando style dentro de la etiqueta html (NO RECOMENDADO)
■ Interna: en la sección head de la página html (USAR SI NO HAY ALTERNATIVA)
■ Externa: en un archivo .css vinculado a través de un elemento <link> (ADECUADO)

CSS
Primeros Pasos
BIANCHI - ZULAICA
0
Tabla de Contenidos
1. Introducción 4
Definición 4
Sintaxis 4
Vinculación 5
Externa 5
Interna 5
En Linea 5
2. Selectores 7
Basicos 7
Etiqueta 7
Clase 7
Id 8
Universal 8
Combinados 8
Anidados 9
Multiples 9
Combinadores 10
Descendientes ( ) 10
Descendientes directos (>) 11
Hermano siguiente (+) 12
Hermanos siguientes (~) 13
Pseudo-Selectores 14
Pseudo Clases 14
Pseudo Elementos 16
3. Orden de Aplicación 17
CSS Bianchi - Zulaica 1

4. Herramientas (DevTools) 19
Abrir Herramientas 19
Inspección y Edición 22
Contenido 22
Estilo 23
Guardar Cambios 25
Editores Interactivos 26
5. Colores 27
Atributos de Color 27
Opacidad 27
Formatos de Color 28
Colores Nombrados 28
Hexadecimal 28
RGB & RGBA 29
HSL & HSLA 29
Otros 30
6. Texto 31
Atributos de Texto 31
Color 31
Tamaño 31
Familia 32
Peso 33
Alineación 34
Otros 34
Fuentes 35
7. Modelo de Cajas 37
Componentes de Caja 38
Tamaño de Caja 38
Relleno 39
Borde 40
Margen 41

8. Posición y Presentación 41
Posición 41
Estatica 41
Relativa 41
Fija 41
Absoluta 41
Pegajosa 41
Presentación 42
En Línea 42
Bloque 42
Bloque en Línea 42
Ninguna 42
Flexible (Flexbox) 42
Grilla 42
9. Variables y Funciones 43
Variables 43
Funciones 45
10. Referencias 46
Unidades de medida 46
Referencias externas 46

1. Introducción
Definición
Cascading Style Sheets, CSS, es el lenguaje que define la apariencia de la web.
Podemos traducir sus siglas a español como Hojas de Estilo en Cascada.
Hojas de Estilo refiere al aspecto que da al contenido html. Propiedades como

el color, el texto, el posicionamiento y otros que pueden ser editadas.
Mientras que la Cascada hace referencia al orden en el que se aplican las

reglas, donde una regla puede sobreescribir a otra si cumple ciertos criterios.
Sintaxis
Un archivo .css tendrá varias reglas, donde cada regla está compuesta por:
● Un selector que determinará los elementos que se verán afectados

● Un conjunto de propiedades que definirán su aspecto.
selector {
Propiedad 1: valor 1;
Propiedad 2: valor 2;
. . . . . . . . .;
Propiedad N: valor N;
}

Vinculación
1. Externa
Debemos utilizar la etiqueta <link> dentro del html, preferiblemente dentro de head,
para vincular un archivo de estilo externo.
El atributo rel definirá la relación del archivo, que en este caso será stylesheet para
hojas de estilo; mientras que el atributo href será la ruta al archivo.
<link rel='stylesheet' href='estilo.css'> HTML
Este tipo de vinculación es la recomendada, porque permite separar el contenido

(código HTML), del estilo (reglas CSS); y así, reutilizar las reglas CSS escritas,
relacionando el mismo archivo .css con las páginas HTML que sea conveniente
relacionar. Esto posibilita dar un estilo homogéneo a nuestro sitio de modo más
fácil y seguro; y ante futuros cambios, será más simple y eficiente, realizarlos.
2. Interna
Podemos utilizar la etiqueta <style> dentro del html, preferiblemente dentro de head,
y definir las reglas directamente en su contenido.
<style>
div { color: red; }
</style> HTML
⚠️ Se recomienda evitar, ya que es preferible separar los estilos del contenido.
3. En Linea
Podemos utilizar el atributo style para definir las propiedades de estilo que aplican a
una etiqueta de manera directa
<div style='color: red;'>

…
</div> HTML
⚠️ No se recomienda este uso, ya que obliga a repetir estilos comunes a varios elementos.

Ejemplo
Utilizando vinculación externa
<h1>CSS</h1>
<p>
El lenguaje que le da su <b>apariencia</b> a la web
</p> HTML
*{
font-family: sans-serif;
background-color: #5076da;
text-align: center;
}
h1 {
color: #152b59;
text-shadow: 0px 0px 6px #3369;
}
p { color: white; } CSS

2. Selectores
Basicos
Etiqueta
Podemos seleccionar todas las etiquetas html de cierto tipo utilizando el selector de
etiqueta, para esto simplemente escribimos su nombre.
<p>Hola Mundo</p>
HTML
p { color: red; }
CSS
Clase
El atributo class de una etiqueta html es usado para asignarle una clase ó tipo,
luego, en css los elementos de una clase son referidos utilizando un punto (.)
seguido por el nombre de la clase (sin espacios).
En general, varios elementos pueden tener la misma clase.
<p class='verde'>Hola Mundo</p>

<strong class='verde'>Hola Mundo</strong>
HTML
.verde { color: green; }

CSS

Id
El atributo id de una etiqueta html es usado para asignarle un identificador, luego, en
css podemos referirnos al elemento utilizando un numeral (#) seguido por el
nombre de la clase (sin espacios).
Los identificadores son únicos; es decir, no habrá dos elementos distintos con un
mismo id en una misma página.
<p id='azul'>Hola Mundo</p> HTML
#azul { color: blue; } CSS
Universal
El selector universal, asterisco (*), selecciona todos los objetos html.
*{ font-family: Roboto, Arial, sans-serif; } CSS
Combinados
Al separar selectores con un espacio podemos estilar elementos sólo si son
descendientes de otros, es decir, si se encuentran dentro.
ul li { font-family: sans-serif; } 👉 asigna la familia de tipografía
nav * { color: red; } 👉 sans-serif los elementos li dentro de ul

le otorga a todos los elementos dentro de un nav
el color rojo
.envio button { background-color: green; } 👉 los botones dentro de un
elemento con clase
“envio” serán de color
verde
CSS

Anidados
Anidando selectores de clase ó id, es decir, colocándolos sucesivamente (sin
espacios) podemos seleccionar elementos que cumplan varios criterios al mismo
tiempo.
En líneas generales la sintaxis es: etiqueta.clase1.clase2#id
<p>Texto Plano</p>
<p class='estilado'>Rojo</p>
<span class='estilado importante'>Negrita</span> HTML
p.estilado { color: red; }

.estilado.importante { font-weight: bold; } CSS
ℹ️ Aquí podemos ver como un elemento puede tener múltiples clases.
Multiples
Cuando tenemos un estilo que es común a múltiples elementos, podemos separar
varios selectores utilizando la coma (,) para que aplique a todos ellos.
input, select, textarea {

width: 100%;
padding: 0.5rem 1rem;
} CSS

Combinadores
Descendientes ( )
El selector de descendientes, usando el carácter “ “ (espacio), selecciona los
elementos que estén dentro de otro en cualquier nivel.
<section>
Alpha
<div>
<p>Beta</p>
</div>
<p>Gamma</p>
<p>Delta</p>
</section> HTML
section p { color: blue; text-decoration: underline; }

CSS

Descendientes directos (>)
El selector de descendientes directos, usando el carácter “>“ (mayor), selecciona
los elementos que estén directamente dentro de otro.
<section>
Alpha
<div>
<p>Beta</p>
</div>
<p>Gamma</p>
<p>Delta</p>
</section> HTML
section > p { color: blue; text-decoration: underline; }

CSS

Hermano siguiente (+)
El selector de hermano siguiente, usando el carácter “+“ (más), selecciona el
primer elemento que cumpla el selector luego de otro.
<section>
Alpha
<div>
<p>Beta</p>
</div>
<p>Gamma</p>
<p>Delta</p>
</section> HTML
div + p { color: blue; text-decoration: underline; } CSS

Hermanos siguientes (~)
El selector de descendientes, usando el carácter “~“ (virgulilla), selecciona los

elementos que cumplan el selector luego de otro.
<section>
Alpha
<div>
<p>Beta</p>
</div>
<p>Gamma</p>
<p>Delta</p>
</section> HTML
div ~ p { color: blue; text-decoration: underline; } CSS

Pseudo-Selectores
Pseudo Clases
Utilizamos pseudo clases para seleccionar elementos cuando se encuentran en un
estado especial. Se utilizan del modo selector:pseudo-clase.
Podemos estilar elementos al pasarles por arriba con el mouse utilizando :hover,
también podríamos estilar un botón al presionarlo con :active.
button {
background-color: #55d;
box-shadow: 0 0 2px 0 #0004;
}
button:hover {
background-color: #44b;
box-shadow: 0 0 3px 0 #0008;
}
CSS
Utilizamos :disabled para elementos deshabilitados, lo cual es muy común al

trabajar con interacciones de usuario, ejemplo: formularios.
*:disabled {
cursor: not-allowed;
}
textarea:disabled {
background-color: #a331;
border: 1px solid #a33;
}
CSS

El pseudo selector de :nth-child, o enésimo hijo en español, es útil en tablas o
cuando tenemos elementos repetitivos. Este nos permite editar un hijo según su
número (1: primero, 2: segundo, etc) ó incluso grupos de elementos.
table tr:nth-child(1) {
background-color: #152b59;
color: white;
}
table tr:nth-child(2n) {
background-color: #f4f4f4;
}
table tr:nth-child(2n+3) {
color: #237;
}
CSS
⚠️ El estilado de la cabecera utilizando :nth-child es a fin de ejemplo, en la práctica es

mejor dar estilo a los th o seccionar la tabla con thead y tbody.
Vemos en el ejemplo que podemos usar :nth-child(2n) para estilar las filas
pares (también podríamos haber usado even).
Para estilar las filas impares podríamos usar :nth-child(odd) o

:nth-child(2n+1) que es igual al de pares sumando un desfase. Lo que
conseguimos con desfase +3 es ignorar la primera fila.
También es común al usar tablas estilar las filas al pasar con el mouse:
tbody tr:hover {
background-color: #dde;
border: 2px solid black;
}
CSS

Pseudo Elementos
Utilizamos pseudo elementos para seleccionar partes específicas de un elemento.
Se utilizan del modo selector::pseudo-elemento.
Los pseudo elementos más comunes son ::before y ::after que agregan una
caja de texto antes y después del contenido de un elemento.
<p>Hola Mundo</p>
HTML
p::before { content: ‘¡’; }

p::after { content: ‘!’; }
CSS
Estos elementos se suelen utilizar con fines decorativos, por ejemplo para marcar la
página en una barra de navegación o agregar iconos a los títulos.

3. Orden de Aplicación
Orden de Aparición
Cuando varias reglas editan un mismo atributo de un elemento, aplicará la regla de
mayor prioridad según la “cascada” de criterios.
El primer criterio, y menos importante, es el orden de aparición en el código; de

modo que, si dos reglas tienen los mismos selectores, la última en aparecer tendrá
precedencia.
p{
color: red; /* NO APLICA */
font-weight: bold; /* SI APLICA */
}
p{
color: blue; /* SI APLICA */
} CSS
⚠️ En general, trataremos de no depender de este criterio, ya que no es claro
Especifidad
El siguiente criterio será la especificidad, esto refiere a que tan específico es un
selector. En líneas generales, podemos decir que un selector es más específico
mientras más descriptivo es del elemento seleccionado.
* { /* MENOS ESPECIFICO */ }
main { ... }
main p { ... }
body main p { ... }
main p.nota { /* MÁS ESPECIFICO */ } CSS
ℹ️ Encontraremos el cálculo exacto de especificidad en la documentación de MDN

Origen
El tercer criterio es el origen de la regla; por ejemplo, hay estilos del navegador ó del
usuario que tienen menos precedencia que los que definamos en css. Normalmente
no podremos editarlos y pueden diferir entre usuarios, lo cual debemos tener en
cuenta si queremos que una página se vea igual para todos.
Importancia
Por último, el criterio más prioritario es la importancia; para marcar un atributo
como importante agregamos un “!important” luego del valor.
/* Quitar subrayado de los enlaces */

a{
text-decoration: none!important;
} CSS
⚠️ Usar lo menos posible, ya que pisa todos los estilos, dificultando la edición y
causando inconvenientes a usuarios con estilos definidos.
Para resumir, tenemos 4 criterios de desempate para la aplicación del estilo;

normalmente deberíamos utilizar la especificidad para que los estilos queden
bien definidos y en algunos casos podríamos necesitar la importancia.

4. Herramientas (DevTools)
Los navegadores modernos nos proveen con herramientas que nos facilitan el
desarrollo, veremos cómo utilizar las que proporciona google chrome.
Abrir Herramientas
Podemos abrir las herramientas yendo al menú (⋮) de la esquina superior derecha y
luego seleccionando Más Herramientas > Herramientas de Desarrollador.

También, al tocar algún elemento con click derecho y luego la opción Inspeccionar,
se abrirán las herramientas y se seleccionará el elemento.

Por último, podemos utilizar atajos de teclado para abrir diferentes pestañas:
i ️ Podemos cambiar el lenguaje de las herramientas a español yendo a la configuración de idioma.

Inspección y Edición
Contenido
Para editar el contenido podemos dar doble clic tanto sobre los nombres de las
etiquetas, sus atributos o el contenido de texto.
También, podemos hacer clic derecho sobre una etiqueta para ver más opciones,
donde la opción de Editar como HTML nos da la mayor versatilidad.
Con esto podríamos editar el contenido existente, por ejemplo: agregar una clase
nueva a un elemento, o incluso crear nuevas etiquetas.
El botón de inspección (arriba a la izquierda de las herramientas) nos permite

seleccionar contenido con el puntero directamente sobre la página.
ℹ️ Podemos utilizar Ctrl + en windows o ⌘ + en macos para aumentar el zoom y Ctrl -

en windows o ⌘ - en macos para disminuir el zoom.

Estilo
Podemos editar el estilo sobre las reglas visibles en el panel a la derecha.
El selector element.style aplicará a los estilos en línea de la etiqueta, veremos

como se refleja en el atributo style de la etiqueta.
Podemos editar las reglas preexistentes en el css; al seleccionar un elemento

veremos las reglas cuyos selectores abarquen a dicho elemento.

Si queremos agregar una nueva regla, podemos presionar el botón de más (+), que
creará una nueva con un selector editable correspondiente al elemento.
Ejemplo:
1. Se le agrega la clase subrayado-al-pasar al h1 utilizando el botón .cls.

2. Se fuerza el estado de hover en el menú de .hov.
3. Se define una regla de subrayado al hacer hover.

Guardar Cambios
Para que los cambios se guarden automáticamente en nuestro código iremos a
‘fuentes’ > 'sistema de archivos', tras seleccionar Agregar carpeta al espacio de
trabajo buscaremos la carpeta del proyecto y permitimos el acceso.
ℹ️ ️ Podremos ver el archivo de los estilos y

un punto verde indicando la correcta
vinculación a las herramientas del
navegador.

Editores Interactivos
Al editar estilos, el navegador nos provee algunos editores interactivos, podemos
identificarlos mediante los iconos junto a las propiedades.

5. Colores
Atributos de Color
Varios atributos describen colores, podemos ver algunos a continuación:
Opacidad
La opacidad es tanto característica que describe la carencia de transparencia, es
decir un elemento será más transparente mientras menos opacidad tenga.
El atributo opacity modifica la opacidad de un elemento así como la de sus

descendientes; el valor que toma será un número entre 0 y 1 o un porcentaje.
ℹ️ Si un elemento y su padre tienen opacidad 50%, entonces la opacidad efectiva del objeto será 25%.
Podemos evitar esto utilizando la transparencia del color en sí.

Formatos de Color
Colores Nombrados
Hasta el momento hay 140 colores nombrados
que podemos utilizar simplemente mediante
su nombre. Por ejemplo red, green y blue.
Aunque son limitados, son simples de usar

y pueden ser útiles para prototipar elementos
inicialmente o al realizar pruebas de concepto.
Rueda de colores web por Anthony Lieuallen
Hexadecimal
Hexadecimal es un sistema numérico con 16 dígitos. Usamos los números del 0 al 9
(del sistema decimal) más las primeras 6 letras del abecedario (A a F).
Utilizamos estos números para asignar un valor a los canales de color rojo, verde y
azul; ademas, opcionalmente, al canal alfa de opacidad.
Podemos utilizar 1 o 2 dígitos por canal, como en los siguientes ejemplos:

RGB & RGBA
Similar a hex, asignamos valores a los canales de color rojo (Red), verde (Green) y
azul (Blue); ademas, opcionalmente, al canal alfa (Alpha).
Lo utilizamos llamando a la función rgb, o rgba si queremos transparencia, donde

los parámetros serán valores de 0 a 255 para cada canal en orden r,g,b.
HSL & HSLA

Este modo de color se basa en el tono o matiz (Hue), pureza o saturacion
(Saturation) y la luminosidad (Lightness) del color.
Lo utilizamos llamando a la función hsl, eg: hsl(221deg 62% 22%); o hsla si

necesitamos transparencia, eg hsla(221deg 100% 22% / 50%)
ℹ️ A pesar de que los modos anteriores son los más comunes, este tiene la virtud de utilizar
atributos que nos son intuitivos, volviéndola de las más útiles al diseñar.
ℹ️ Los valores de “ángulo”, como el tono, pueden estar por debajo de los 0deg o arriba de los
360deg; darán la vuelta, de modo que: angulo = angulo ± 360 * n.

Otros
Otro modo de color interesante es el valor currentcolor que toma el mismo color
que el texto, es decir, el atributo color.
También, podemos hacer gradientes utilizando la función linear-gradient o

radial-gradient como valor del atributo background (background-image).
border-color: currentcolor;
background: linear-gradient(90deg, #000, #236, #47E);
CSS
Además, existen los formatos cmyk (como el de las impresoras) y hwb (que utiliza
el tono, blancura y negrura).
ℹ️ Los editores comúnmente usan hwb; que es

similar a hsl pero usa brillo en vez de luminosidad,
que es incluso más intuitivo. Esto se suma a las
virtudes de utilizar las herramientas del navegador.
⚠️ hwb no es un modo de color nativo de css.

6. Texto
Atributos de Texto
Color
El atributo color define el color del texto.
Tamaño
El atributo font-size define el tamaño de la letra.
ℹ️ Podemos utilizar cualquier unidad de medida; la unidad pt (punto tipográfico) es la que

suelen utilizar los editores de texto.
ℹ️ El tamaño por defecto de la letra es 16px.

Familia
El atributo font-family define la familia de letra. Eg: Calibri o Times New Roman.
Además, podemos agregar más fuentes como respaldo, por si una no está
disponible, separándolas con coma.
También hay fuentes seguras que siempre estarán disponibles y fuentes genéricas
que utilizaran la primera de ese tipo disponible en el dispositivo.

Peso
El atributo font-weight define el peso o grosor de la letra. Eg: bold (negrita).
Además de las palabras clave de grosor, podemos utilizar números.
Podemos ver aquí la relación entre los valores numéricos y los nombres:
⚠️ No todas las fuentes soportan todos los pesos. Además, los

pesos pueden no ser consistentes entre diferentes familias.

Alineación
El atributo text-align define la alineación del texto. Al igual que en los editores de
texto; el texto por defecto se acomoda a la izquierda, pero se puede ajustar a la
derecha, centrar o justificar.
Otros
➔ Estilo: se utiliza font-style para hacer itálicas.
➔ Decoración: se utiliza text-decoration para dar subrayados.
➔ Transformación: se utiliza para text-transformation para transformar las

letras a mayúsculas, minúsculas, capitalizado, etc.
➔ Sombreado: se utiliza text-shadow para agregar sombra a las letras.

➔ Espaciado: se utiliza text-spacing para definir el espacio entre caracteres.
ℹ️ Existe el atributo abreviado font con el cual podemos definir múltiples valores en un
solo campo. Eg: ”font: bold 20px Arial, sans-serif;”

Fuentes
Podemos conseguir fuentes gratuitas en Google Fonts.
En la pestaña de ‘specimen’ podemos agregar varios grosores de letra.

En vez de descargar las tipografías,
podemos directamente importarlas
desde googleapis en nuestro código.
Al desplegar el menú de fuentes

seleccionadas veremos una sección
de uso en web.
Aquí podemos copiar el código de la

sección @import directo en nuestro css
para importar la fuente en los grosores
seleccionados.
Luego podemos utilizarla con el nombre

que aparece en la sección de abajo
(reglas de css para especificar familias).
Ejemplo:
@import url('https://fonts.googleapis.com/css2? . . . ');

*{
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
} CSS
ℹ️ Sólo es necesario importar los grosores que utilizaremos; si alguno no está disponible o
no existe, se utilizará el grosor más cercano al especificado posible.
ℹ️ Fuentes con mayor cantidad de grosores generalmente están mejor diseñadas.

7. Modelo de Cajas
Modelamos los elementos de html como cajas, compuestas de 4 elementos.
➔ Contenido (content): será texto o elementos descendientes.

➔ Relleno (padding): agrega espacio entre contenido y borde.
➔ Borde (border): recuadra al elemento.
➔ Margen (margin): es el espacio entre elementos.
Estos componentes (salvo el contenido) se pueden editar de forma independiente

en las 4 direcciones: arriba, derecha, abajo e izquierda.
ℹ️ Utilizamos unidades de medida para las dimensiones de cada componente.

Componentes de Caja
Tamaño de Caja
Utilizando las propiedades width (ancho) y height (alto) podemos dimensionar los
elementos.
Por defecto el box-sizing (tamaño de caja) será de content-box, de modo que las
dimensiones aplican al contenido de la caja; pero podemos darle el valor border-box
para que las dimensiones incluyan el relleno y el borde.
Relleno
El atributo abreviado padding determina el relleno de un elemento:
padding: 1px 2px 3px 4px; CSS
Podríamos indicar el relleno en cada dirección con las propiedades no abreviadas:
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px; CSS
También podríamos utilizar menos de 4 valores si estos se repitieran:

padding: 2px;/* Todas direcciones */ CSS
padding: 3px 10%; /* Vertical y horizontal */ CSS
padding: 3px 10% 6px; /* Arriba, horizontal y abajo */ CSS

Borde
El atributo abreviado border determina el relleno de un elemento; similar al relleno,
esta propiedad resume las cuatro direcciones, pero cada dirección también resume
varios componentes del borde (grosor, estilo, color).
border: 1.5pt solid #555;
border-left: 1.5pt solid #555;

border-right: 1.5pt solid #555;
border-width: 1.5pt;
border-style: solid;
border-color: #555;
border: 1.5pt solid #555;

border-top-style: dotted;
border-bottom-style: dashed;
Podemos utilizar la propiedad border-radius para redondear los bordes.
ℹ️ Esta propiedad también puede tomar varios valores para editar las puntas de manera
separada, empezando por arriba a la izquierda.

Margen
El atributo abreviado margin determina el margen de un elemento, el
funcionamiento de esta abreviación es igual al del relleno
margin: 10px 25%;
margin-top: 10px; margin-bottom: 10px;

margin-right: 25%; margin-left: 25%;
Normalmente los márgenes se “empujan”, pero en algunas situaciones los

márgenes verticales se pueden “solapar”; eg: elementos con display en block.
ℹ️ Podemos profundizar sobre el colapso de los márgenes en el artículo Entendiendo el

Colapso de Márgenes de Lupita Code en dev.to
ℹ️ Los márgenes pueden ser negativos, generando que los elementos se superpongan
entre sí. Eg: margin-top: -10px

8. Posición y Presentación
Posición
El atributo position define el modo de posicionamiento de un elemento. Utilizamos
los atributos top, right, bottom y left para determinar la distancia desde los
respectivos bordes (esta puede ser negativa, eg: left:-3px ).
ℹ️ Para ver estos modos puestos en práctica, podemos probar en este pen o visitar el
artículo de position en CSS-Tricks.
● Estática
La posición por defecto de un elemento es static (estática), en este modo de
posicionamiento no podremos desplazar el elemento.
● Relativa
El modo relative posiciona un elemento relativo a su posición original. El resto
de los objetos interactúan con este como si estuviera en su posición original.
● Fija
El modo fixed deja un elemento fijo en una posición de la página.
● Absoluta
El modo absolute posiciona un elemento relativo a otro, este otro será el primer
antecesor con posición relativa o absoluta.
● Pegajosa
El modo sticky se comporta inicialmente de manera normal, pero se mantiene
fija al ‘chocar’ con la pantalla según los atributos de desplazamiento.

Presentación
El atributo display define el modo en el que se presenta el elemento.
ℹ️ Para ver estos modos puestos en práctica, podemos probar en este pen o visitar el artículo
de display en CSS-Tricks.
● En Línea
El modo inline se utiliza por defecto en las etiquetas de texto (span, em, b),
donde los elementos van uno al lado del otro.
⚠️ En general no deberíamos asignarlo, ya que este modo ignora el ancho y márgenes
horizontales que definamos; sus casos de u so están por defecto.
● Bloque
El modo block hará que el elemento ocupe su propia línea.
● Bloque en Línea
El modo inline-block hará que los elementos puedan compartir una línea,
respetando las dimensiones y márgenes que definamos.
● Ninguna
El modo none esconderá un elemento, no será visible ni empujará al resto.
● Flexible (Flexbox)
Utilizamos el modo flex para organizar el contenido de un elemento de modo
‘flexible’; nos habilita atributos para centrar, espaciar y manejar el contenido.
Podemos profundizar con la guía de flexbox de CSS-Tricks
● Grilla
Utilizamos el modo grid para organizar el contenido en forma de grilla.
Podemos profundizar con la guía de grid de CSS-Tricks

9. Variables y Funciones
Variables
Las variables en css son valores que podemos reutilizar.
Las definimos como propiedades con 2 signos menos delante: --variable.

Accedemos a ellas mediante la función var.
De este modo si hay un color, tamaño u otro que repetiremos varias veces en el
código, podemos asignarlo y editarlo en un único lugar.
* { --color1: ■ hsl(221, 62%, 22%); } * { --color1: ■ hsl(279, 63%, 22%); }

nav { background: var(--color1); } nav { background: var(--color1); }
main { color: var(--color1); } main { color: var(--color1); }
CSS CSS
ℹ️ Es común definir variables globalmente (con el selector universal) para utilizar en

cualquier elemento.

También, podemos redefinir una variable en un contexto más específico, de modo
que reutilizamos cierta lógica.
Veamos el siguiente extracto de código como ejemplo:
<div class='caja chica'>Caja Chica</p>

<div class='caja'>Caja Normal</p>
<div class='caja grande'>Caja Grande</p>
HTML
div.caja {
--dimension: 20px;
width: var(--dimension);
height: var(--dimension);
...
}
div.caja.chica {
--dimension: 10px;
}
div.caja.grande {
--dimension: 30px;
}
CSS
ℹ️ Podemos editar el código de este ejemplo en codepen, así como otro ejemplo más
complejo que adapta las posiciones según los tamaños.

Funciones
Utilizamos las funciones para transformar valores según cierta lógica. Su sintaxis
consiste del nombre de la función y una lista de parámetros entre paréntesis:
función(parametro1, parametro2, ...)
Ya hemos visto algunas funciones: rgb(), hsl() y var() por ejemplo. Veamos ahora
algunas otras funciones útiles.
Podemos utilizar la función calc para realizar cálculos de suma, resta, multiplicación
y división; además, esta nos permite mezclar unidades de cualquier tipo, variables y
números.
width: calc(100% - 3rem);

height: calc(var(--grande) * 3 / 4); CSS
Podemos utilizar la función min y max para obtener el mínimo o máximo entre 2
valores ( o más, si utilizamos otra función de estas como parámetro). Mientras que
la función clamp recibe un valor mínimo, el valor preferido y el valor máximo.
width: min(80%, 1500px);

height: max(30%, max(10vw, 100px) );
font-size: clamp( 1rem, 2.5vw, 2rem); CSS
Otras funciones remarcables son las que se usan para los atributos de transform o
filter. También, al usar grillas podemos utilizar la función repeat para que sus
columnas se adapten al ancho disponible.
transform: rotate( 45deg );

filter:drop-shadow(0px 0px 6px #000) hue-rotate(180deg);
grid-template-columns: repeat( auto-fit, minmax(110px, 1fr) ); CSS

10. Referencias
Unidades de medida
Absolutas:
● px: pixel
● pt: punto tipografico
● mm: milimetro
Relativas:
● em: relativo al tamaño de letra (font-size) del elemento actual

● rem: relativo al tamaño de letra (font-size) del elemento raiz (:root)
● %: relativo a elemento padre
● vw: relativo al ancho de la pestaña (viewport width)
● vh: relativo al alto de la pestaña (viewport height)
Referencias externas
● W3Schools - CSS
● CSS Tricks
● Joshw Comeau - CSS
● MDN - CSS

CSS: Clase 2 - Selectores
Bianchi - Zulaica
Febrero 2023
Contenido:
Selectores
Básicos ➔ De Atributos
➔ De Etiqueta ➔ Universal
➔ De Clase ➔ Combinados
➔ De Id ➔ Anidados
➔ Múltiples
CSS Clase 1: Selectores BIANCHI - ZULAICA

CSS: Formato General de la Regla
Elementos
HTML a los que
queremos dar Nombre de Valor a
estilo la propiedad asignar a la
a afectar propiedad
selector/es {
propiedad: valor;
Sintaxis . . . .; Pueden haber varios
pares propiedad: valor,
. . . .; separados por “ ;”

CSS: Selectores Básicos
1 Etiqueta
Selectores
Básicos
2 Clase
3 Id
CSS: Selectores de Etiqueta
➔ Para dar estilo a todos los elementos HTML del tipo especificado
Ejemplo: Queremos que todos los elementos de tipo párrafo sean de color rojo
HTML
<p>Hola Mundo</p>
CSS p { color: red; }

Propiedad
Tipo de la
etiqueta
Valor
html

CSS: Selectores de Clase
➔ Para dar estilo a todos los elementos HTML con el nombre de clase especificado
Ejemplo: Queremos que todos los elementos cuya clase se llame “rojo” aparezcan en color rojo
HTML
<p class = “rojo”>Hola Mundo</p>
CSS .rojo { color: red; }

dado a la
Propiedad
Nombre
clase
Valor
CSS: Selectores de Id
➔ Para dar estilo al elemento HTML con el Id especificado
Ejemplo: Queremos que el elemento cuyo id se llama “azul” aparezcan en color azul
HTML
<p id = “blue”>Hola Mundo</p>
CSS #blue { color: blue; }

# al nombre
Propiedad
Anteponer
Valor
de Id

CSS: Ejercicio 1
Tomá la solución del siguiente ejercicio que se planteó en la primer clase de HTML:
Generar una página web con un título: “Primera clase” y una explicación resumida de al menos 3 de los conceptos vistos
en la introducción, por ejemplo:
➢ Navegador
➢ Frontend
➢ HTML
Para cada uno usar subtítulos y párrafos.
Utilizando vinculación externa, agregale el siguiente estilo a la página:

➢ Los subtítulos deben aparecer en color azul
➢ Los párrafos deben aparecer en color rojo

CSS: Selectores de Atributo
1. Para dar estilo a un atributo de un elemento HTML
Ejemplo: Queremos que la descripción de cualquier enlace sea mostradas en verde
HTML <a href = “https://fi.uba.ar” title = “FIUBA”>FIUBA</a>
CSS a[title] { color: green; }
Hay que indicar

la etiqueta y el
atributo

CSS: Selectores de Atributo
2. Para dar estilo a un elemento HTML, cuyo atributo tiene un valor específico
Ejemplo: Queremos que sólo la descripción del enlace del campus de fiuba sea mostrada en rojo
HTML <a href = “https://campus.fi.uba.ar” title = “Campus”>Campus FIUBA</a>
CSS a[href = “https://campus.fi.uba.ar”] { color: red; }
Hay que indicar específicamente para

que etiqueta, con cuál valor de atributo

CSS: Selector Universal
➔ Para dar el mismo estilo a todos los elementos HTML
➔ Se indica con el asterisco
Ejemplo: Queremos que el color de todos los elementos sea verde
HTML
Aplica a todo elemento html
CSS * { color: green; }

Propiedad
Universal
Selector
Valor
CSS: Selectores Combinados
Posibilidad de “ ” Descendientes
combinar varios
selectores “>” Descendientes directos
OBJETIVO
“+” Hermano Siguiente
hacer más selectiva la
aplicación del estilo “~” Hermanos Siguientes

CSS: Selectores Combinados Descendientes
—----------------------
—---------------------- -----------
-----------
.css Aplica a todos los

.html
descendientes de
<h2>Nombres Letras Griegas</h2> section p {color: red} <section> que sean
de tipo <p>
<section>
<p>Alpha</p>
www
<div>
Elementos <p> <p>Beta</p>
descendientes
del elemento </div>
<section> <p>Gamma</p>
<p>Delta</p>
</section>
NO es
descendiente de <p>Usadas comunmente</p>
<Section>

CSS: Selectores Combinados Descendientes Directos
Aplica sólo a los
—----------------------
----------- descendientes directos
.html de <section> que sean
—----------------------
de tipo <p>
<h2>Nombres Letras Griegas</h2> -----------
.css
<section> section > p {color: red}
<p>Alpha</p>
<div> NO es www
Elementos <p> <p>Beta</p> descendiente
descendientes directo de
directos de </div> <Section>
<section> <p>Gamma</p>
<p>Delta</p>
</section>
<p>Usadas comunmente</p>

CSS: Selectores Combinados Hermano Siguiente
Aplica sólo al hermano
—----------------------
-----------
siguientes de <div> que
.html sea de tipo <p>
—----------------------
-----------
<h2>Nombres Letras Griegas</h2> .css
<section> div + p {color: red}

<p>Alpha</p>
<div>
www
<p>Beta</p>
Elemento <p> </div>
hermano
<p>Gamma</p>
siguiente de
<div> <p>Delta</p>
</section>

CSS: Selectores Combinados HermanoS SiguienteS
Aplica a todos los
—----------------------
-----------
hermanos siguientes de
.html <div> que sean de tipo
—----------------------
----------- <p>
<h2>Nombres Letras Griegas</h2> .css
<section> div ~ p {color: red}

<p>Alpha</p>
<div>
www
<p>Beta</p>
</div>
Elementos <p>
<p>Gamma</p>
hermanos
siguientes de <p>Delta</p>
<div> </section>

CSS: Selectores Anidados
Aplica a todos los
—----------------------
-----------
elementos p cuya clase
.html sea azul
—----------------------
-----------
.css
<h2>Nombres Letras Griegas</h2> p.azul {color: blue}

<section>
<p class = “azul” >Alpha</p>
Elementos <p> www
y que la clase <p>Beta</p>
es azul <p class = “azul”>Gamma</p>
<p>Delta</p>
</section>
<p class = “azul”>Más Usadas</p>

CSS: Selectores Múltiples
Para afectar con la misma regla a un conjunto de selectores, se debe indicar a cada uno de los selectores separados por una “,”
—----------------------
-----------
La regla se aplica a todos
.html los selectores de la lista
—----------------------
-----------
.css
<h1>Nombres Letras Griegas</h1> h1, h3, p.azul {color: blue}
<section>
Elementos a los <p>Alpha</p> www
que se les
<p>Beta</p>
aplica la misma
regla <p class = “azul”>Gamma</p>
<p>Delta</p>
</section>
<h3>Muy Usadas</h3>

Resumen
• Selectores: Elemento HTML al que se desea dar estilo • Selector Universal: “*” selecciona todos los
mediante una regla elementos
• Regla CSS: selector/es { propiedad: valor } • Selectores Combinados:

■ Descendientes: “ “
• Selectores Básicos:
■ Descendientes Directos: “>”
■ de Etiqueta: selecciona a todos los del mismo tipo
■ Hermano Siguientes: “+”
de etiqueta
■ Hermanos Siguientes: “~”
■ de Clase: selecciona a los de una clase específica
■ de Id: selecciona los que tienen un determinado Id ● Selectores Anidados: para seleccionar un tipo de
elemento HTML, pero que además sea de una
• Selectores de Atributo: Selecciona el atributo de un determinada clase
elemento específico y también, con un valor
específico de atributo ● Selectores Múltiples: Lista de selectores separados
por “,”

CSS: Ejercicio 2
Tomá la solución del ejercicio 1 y generá en base a esta una nueva página que:
1. Agrega previo a los conceptos y luego del título, un párrafo explicando al internauta a
que corresponde la descripción de los conceptos que se detallan.
2. Si en tu página no habías incluído los conceptos de HTML, CSS y JavaScript; agregalos.
3. Aplica estilo, usando Selectores Combinados, Anidados y Múltiples; según
corresponda, para lograr que:
a. Los párrafos sobre HTML, CSS y JavaScript, tengan un color diferente al resto de
los otros párrafos.
b. De igual modo, los 3 títulos deben tener el mismo color, pero distinto al de los
párrafos.
c. El resto de los párrafos deben tener un color diferente cada uno, pero a su vez,
coincidir con el de sus títulos.
CSS: Clase 3 - Texto
Bianchi - Zulaica
Febrero 2023
Contenido:
➔ Propiedades de Texto
➔ Cómo modificarlas
CSS Clase 1: Texto BIANCHI - ZULAICA

Texto: PROPIEDADES
Las propiedades que podemos modificar y dar estilo, son varias
1 Color
2 Tamaño
3 Familia
4 Peso
5 Alineación
6 Otros

Texto: Propiedad color
Para modificar el color del texto, una alternativa es indicar el color mediante una
palabra clave que por lo general, describe el color en inglés.
color: red; ¡Hola Mundo!
color: green; ¡Hola Mundo!
color: blue; ¡Hola Mundo!

Texto: Propiedad font-size
Para indicar el tamaño de la letra, debemos usar la propiedad font-size.
font-size: 20pt; ¡Hola Mundo!

Texto: Propiedad font-family
Para indicar la familia de la letra o tipografía, debemos usar la propiedad font-family.
font-family: Arial; ¡Hola Mundo!
font-family: Georgia; ¡Hola Mundo!
font-family: Roboto; ¡Hola Mundo!

Texto: Propiedad font-family fallback
Si queremos indicar varias familias de la letra o tipografía, para que en caso que una falle, asigne la siguiente, debemos
usar la propiedad font-family y como valor dar una lista separada por comas de todas las familias posibles.
font-family: Lexend, Arial, sans-serif;

1
¡Hola Mundo! 3
¡Hola Mundo!
¡Hola Mundo!
IMPORTANTE: Es recomendable que la última fuente alternativa, sea una fuente segura del navegador. En este caso en particular “sans-serif” obligará
a utilizar cualquier clase de letra de la familia sans-serif que esté disponible.

Texto: Propiedad font-weight
Para modificar el peso o grosor de la letra, tenemos 2 alternativas:
➔ Mediante una palabra clave
➔ Mediante un número que indica el grosor
font-weight: light; ¡Hola Mundo! font-weight: 300;
font-weight: medium; ¡Hola Mundo! font-weight: 500;
font-weight: bold; ¡Hola Mundo! font-weight: 700;

Texto: Propiedad font-weight - Tabla Equivalencias
A continuación, hay una tabla que indica la palabra clave para cada peso y el valor equivalente
VALOR PALABRA CLAVE VALOR PALABRA CLAVE

Texto: Propiedad text-align
Para indicar la alineación del texto, debemos usar la propiedad text-align.
La alineación del texto se indica mediante

text-align: center; el uso de la propiedad text-align.

text-align: left; el uso de la propiedad text-align.

text-align: right; el uso de la propiedad text-align.

text-align: justify; el uso de la propiedad text-align.

Texto: Propiedad Otras
Algunas otras propiedades que se pueden aplicar a textos:
font-style: italic; ¡Hola Mundo!
text-decoration: underline; ¡Hola Mundo!
text-transform: uppercase; ¡HOLA MUNDO!

Resumen
Propiedades
• color: permite cambiar el color • text-align: indica la alineación del texto

■ center, left, right, justify
• font-size: permite cambiar el tamaño de la letra
• font-style: para indicar cursiva “italic”
• font-family: indica la familia tipográfica
■ fallback: se puede dar alternativas de familias • text-decoration: para indicar subrayado “underline”
tipográfica mediante una lista, por si no se
• text- transform: para pasar todo el texto a mayúsculas
encuentra disponible la indicada en primer lugar
• weight: indica el grosor de la letra mediante una

palabra clave ó un valor

Texto: Ejercicio
Tomá la solución del ejercicio 2 de Selectores y aplica lo visto de la siguiente manera:
1. Los subtítulos que tienen el mismo color, deben tener el mismo tipo de letra y
tamaño. A diferente color, diferente tipo de letra, pero todos deben tener el mismo
tamaño de letra y el mismo grosor, que debe ser mayor al grosor de las letras de los
párrafos.
2. Proceder de modo similar con los párrafos. La alineación de los párrafos debe ser
justificada.
3. El título general debe tener una tipo de letra distinto, de mayor tamaño y grosor que
el resto, debe estar subrayado y centrado.
4. Utilizá fallback para la familia tipográfica, compuesto al menos por 3 tipos de familias.

CSS: Clase 4 - Modelo de Cajas
Bianchi - Zulaica
Febrero 2023
Contenido:
➔ Descripción del Modelo de Cajas

➔ Propiedades de contenido, relleno, borde y márgen
➔ Relleno y márgen abreviado
➔ Unidades de distancia
➔ box-sizing
CSS Clase 1: Modelo de Cajas BIANCHI - ZULAICA

Modelo de Cajas
Todos los elementos en HTML pueden ser vistos como cajas
El contenido se encuentra rodeado en sus 4 contornos, de adentro
hacia afuera por: Lado Superior
➔ espacio de relleno (padding) top
➔ espacio de borde (border)
➔ espacio de margen (margin)
Margen Superior
margin-top
Borde Superior
border-top
Relleno Superior
padding-top
Margen Izquierdo
Relleno Izquierdo
Margen Derecho
margin-right
Relleno Derecho
Borde Izquierdo
padding-right
margin-left
Borde Derecho
padding-left
border-right
border-left
Lado Izquierdo Lado Derecho
left CONTENIDO right
padding-bottom
Relleno Inferior
border-bottom
Borde Inferior
margin-bottom
Margen Inferior
Lado Inferior
bottom

Modelo de Cajas: Borde - border
Podemos dar estilo al borde que rodea a nuestro elemento indicando valores para las propiedades que por ejemplo,
permiten establecer el color, el ancho y el estilo del borde.
Ejemplo: Queremos que nuestros párrafos estén rodeados por un borde de color rojo sólido y de 5 píxeles de ancho.
. . . .
www
—----------------------
----------- <p>La tierra es redonda</p>
.html
<p>El sol es amarillo</p>
. . . .
.html + .css
p {
border-color: red; BORDE DE COLOR ROJO
—----------------------
-----------
.css border-style: solid; BORDE DE ESTILO SOLIDO
border-width: 5px; BORDE DE 5 PIXELES DE ANCHO

Modelo de Cajas: Borde - border
Las propiedades pueden ser escritas individualmente, o en una única utilizando sólo la palabra clave border y luego de los “:” los
valores que correspondan
Ejemplo: En el ejemplo anterior, podemos lograr lo mismo con la regla que se muestra en una línea
—---------------------- —----------------------
----------- -----------
.css .css
p {
border-color: red; p {
border-style: solid; border: red solid 5px;

Equivalentes
}
BORDE DE 5 PIXELES DE ANCHO

border-width: 5px;
BORDE DE COLOR ROJO
BORDE DE ESTILO SOLIDO

}

Modelo de Cajas: Borde diferenciado - border top, right, bottom, left
Podemos dar estilo a cada borde por separado, o combinando los bordes
Ejemplo: A nuestro ejemplo le damos distinto estilo a cada borde
. . . .
—----------------------
www
.html
. . . .
.html
+
.css
p {
border-top: red 5px dashed;
—----------------------
----------- border-right: green 10px solid;
.css
border-bottom: blue 4px dotted;
border-left: orange 7px solid;
}

Modelo de Cajas: Relleno - padding
Entre el contenido y el borde, está el espacio de relleno o padding en inglés, siendo el primer espacio que rodea por completo al contenido. En
este caso, podemos indicar la distancia de separación entre el contenido y el borde, para sus 4 lados, pudiendo tener distintos valores.
Ejemplo: Queremos que el texto de nuestros párrafos estén separados de los bordes, por un relleno de 10 píxeles.
. . . .
www
—----------------------
.html
. . . .
.html + .css
p {
border-color: red;
—----------------------
----------- border-style: solid;
.css
border-width: 5px; Si comparamos con el
ejemplo anterior,se puede
padding: 10px; apreciar en este caso, la
separación entre el texto y SIN RELLENO
los bordes.
}

Modelo de Cajas: Relleno diferenciado - padding
El espacio de relleno puede ser distinto para cada uno de los lados que rodean el contenido.
Ejemplo: Queremos que el texto de nuestros párrafos estén separados de los bordes, por un relleno de 10 píxeles por el lado derecho y el izquierdo;
20 píxeles en la parte superior; y que no haya separación en la parte inferior.
. . . .
www
—----------------------
.html
. . . .
.html + .css
p {
border: red solid 5px;
—----------------------
----------- padding-top: 20px;
.css
padding-right: 10px; Se puede observar que el espacio
de relleno que rodea al texto, no
tiene la misma distancia entre el
padding-left: 10px; borde y el texto, en cada lado.

Modelo de Cajas: Relleno abreviado - padding
En lugar de indicar cada par formado por “lado: valor de separación”, podemos hacerlo de forma abreviada en una única
Si tomamos nuestro ejemplo anterior
—----------------------
----------- p { —----------------------
-----------
.css .css
border: red solid 5px; p {
padding-top: 20px; border: red solid 5px;
padding-right: 10px; Equivale padding: 20px 10px 0px 10px;
padding-left: 10px; }
TOP
RIGHT
BOTTOM
LEFT
}
➔ padding: todos;
➔ padding: vertical horizontal;
ALTERNATIVAS
➔ padding: arriba horizontal abajo;
➔ padding: arriba derecha abajo izquierda;

Modelo de Cajas: Margen - margin
Al borde, lo rodea externamente el margen, que nos dará el espacio de separación con otros elementos/cajas y los límites de la página.
Ejemplo: Queremos que nuestros párrafos estén rodeados por un borde de color rojo sólido y de 5 píxeles de ancho.
. . . .
www
—----------------------
.html
. . . .
.html
+
.css
p {
border: red solid 5px;
—----------------------
-----------
.css padding: 20px 10px 0px 10px;

Al igual que con el padding, Observe que no hay
margin: 0px 40px 0px 10px; podemos indicar el margin en separación entre los dos
forma abreviada. párrafos, ya que tanto el
} margin-top como el
TOP
RIGHT
BOTTOM
LEFT
margin-botton están
indicados de 0 píxeles.

Modelo de Cajas: Unidades de Distancia
Son varias las unidades de distancia que podemos utilizar para indicar el ancho ó el alto.
➔ px: pixeles
➔ pt: puntos (tipografía)
➔ em: relativo al tamaño de fuente
➔ %: relativo a la dimensión del padre
➔ vh: relativo al alto de la pantalla
➔ vw: relativo al ancho de la pantalla
más información en w3schools

Modelo de Cajas: Tamaño de Caja - box-sizing
Existen 2 alternativas para dimensionar la caja del contenido, mediante la propiedad box-sizing:
➔ content-box
Es el que tiene por defecto, las
content-box width
dimensiones de la caja del contenido,
dadas en ancho (width) y alto (height), Margen
margin
sólo se reﬁeren a la dimensión del
contenido. Borde
border
border-box height
Relleno
content-box padding
height
CONTENIDO
margin-bottom
Margen Inferior ➔ border-box
En este caso, las dimensiones dadas
en ancho y alto, incluyen:
border-box width
contenido + relleno + borde.

Modelo de Cajas: Tamaño de Caja - box-sizing
Ejemplo: A continuación vemos como se verían 2 elementos div, con la misma altura (height) y el mismo ancho (width) pero
con distinta propiedad de box-sizing.
. . . .
<div id="contenindo">La Tierra es redonda</div> www
—----------------------
-----------
.html <br>
<div id="borde">El sol es amarillo</div>
. . . .
.html
div { +
.css
width: 180px;
height: 60px;
—----------------------
-----------
padding: 10px;
.css
border: 8px solid blue;
background: pink;
}
#contenido {box-sizing: content-box}
#borde {box-sizing: border-box}

Resumen
Propiedades
• relleno (padding): rodea al contenido • width: indica el ancho de la caja

• borde (border): rodea al relleno • height: indica el alto de la caja
• márgen (margin): rodea al borde • box- sizing: indica la alineación del texto
■ content- box: sólo contenido
• top, right, bottom, left: lados superior, derecho,
■ border-box: contenido + relleno + borde
inferior e izquierdo para combinar e indicar
propiedades para padding, border y margin
• relleno y márgen abreviado:

■ top right bottom left
■ vertical horizontal
■ arriba horizontal abajo

Texto: Ejercicio
Partí de la solución del ejercicio que se te propuso que resuelvas en la presentación de
CSS - Texto y en esta ocasión aplica lo visto en Modelo de Cajas, de modo tal que:
1. Los subtítulos deben quedar encerrados por un recuadro y tener borde. Aplicale el
estilo que creas que queda mejor.
2. Los párrafos deben estar contenidos por el mismo recuadro si corresponden al
mismo subtítulo. Es decir, debe haber un recuadro para el subtítulo, y debajo a
continuación debe haber un recuadro único para los párrafos que tienen que ver con
ese subtítulo. No deben tener borde.
3. El margen de separación entre el subtítulo y sus párrafos, debe ser menor al margen
de separación entre los párrafos y el siguiente subtítulo.
4. Aplicá en los casos que creas necesario, relleno.

Programadores 4.0 PDF

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

Programadores 4.0 PDF

Cargado por

Copyright:

Formatos disponibles

HTML: Clase 1 - Introducción

Bianchi - Ciarallo - Juarez

• Origen del HTML, de la web y su funcionamiento

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

➔ Primera conexión entre las Universidades UCLA y Stanford

En los 90, Tim Berners Lee desarrolla:

➔ HTML (lenguaje de marcado)

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

Este mensaje y todos los datos enviados

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

➢ Hay dos partes claramente

➢ El servidor atiende los pedidos de

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

Es la parte del desarrollo Se complementan y Procesa la información que

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

Es esa parte Es todo el código

Es todo lo que el visitante ve y experimenta de forma directa

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

➔ Javascript: Es un lenguaje de programación, rápido y seguro, utilizado por la mayoría

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

• Visual Studio: https://vscode.dev

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Introducción BIANCHI - CIARALLO - JUAREZ

Bianchi - Ciarallo - Juarez

• Características y estructura del código HTML

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

➔ HT: Hipertexto/ ML: Lenguaje de Marcado (HyperText Markup Language)

➔ Es un estándar a cargo del World Wide Web Consortium (W3C), organización

➔ Define una estructura básica y un código (denominado código HTML) para la

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

<p> Este es un ejemplo de texto </p>

<html> <html> Encierra a todo el Código html </html>

<head> <head> Encierra la sección de metadatos </head>

<title> <title> Título Solapa - Va dentro de <head> </title>

<body> <body> Encierra al Cuerpo principal </body>

<h1> Título principal </h1>

<p> <p> Párrafo </p>

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

<h1> Texto muy grande usando h1.</h1>

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

✓ Declaración <!DOCTYPE html> para indicar el tipo de documento y versión de html

HTML Clase 1: Estructura BIANCHI - CIARALLO - JUAREZ

Bianchi - Ciarallo - Juarez

HTML Clase 1: Más Etiquetas BIANCHI - CIARALLO - JUAREZ

HTML Clase 1: Más Etiquetas BIANCHI - CIARALLO - JUAREZ

La etiqueta <br> produce un salto de línea en el texto (retorno de carro).

HTML Clase 1: Más Etiquetas BIANCHI - CIARALLO - JUAREZ

<p>Verás: <strong>HTML</strong> generalmente en negrita.</p>

HTML Clase 1: Más Etiquetas BIANCHI - CIARALLO - JUAREZ

<p>La ecuación más famosa es E=mc<sup>2</sup> . </p>

HTML Clase 1: Más Etiquetas BIANCHI - CIARALLO - JUAREZ

Nota: con ambas etiquetas se pueden utilizar los siguientes atributos:

HTML Clase 1: Más Etiquetas BIANCHI - CIARALLO - JUAREZ

La entidad &nbsp; representa un espacio en blanco y se utiliza normalmente en dos casos:

<p>La empresa multinacional estadounidense,

La entidad representa un espacio en blanco y se utiliza normalmente en dos casos: