COMPUTACIÓN

De: Melanie Karol

Mamani Mamani (AFTER USE, PLEASE P UT IT B ACK IN IT S P ROP ER P LACE )
 RUTAS
LOCALES

Acceder a un archivo en el mismo nivel de árbol

Ejemplo: si nos encontramos en el archivo index.html y deseamos acceder a
blog.html la ruta seria: “blog.hmtl”

Acceder a subcarpetas
Ejemplo si nos encontramos en el archivo index.html y deseamos acceder al
archivo docs.html la ruta seria:” sc1/docs.html”

Salir de subcarpetas
Ejemplo: Si nos entramos en el archivo docs.html y deseamos acceder a
blog.html; la ruta seria: “../blog.html”
 ENLACES
ENLACES EXTERNOS

ENLACES INTERNO (ANCLA)

TAREA
 MULTIMEDIA
Imagenes
DESDE UN ARCHIVO
Para insertar imagenes en HTML usamos la etiqueta
img con el atributo src

<img src="imagenesmel/gato.jpg" alt="gato">

donde:
imagenesmel : nombre de la carpeta donde se
encuentra la imagen
gato.jpg : nombre con el cual se encuentra la imagen

DESDE INTERNET
<img src= "https://t3.gstatic.com/licensed-image?
q=tbn:ANd9GcRoT6NNDUONDQmlthWrqIi_frTjsjQT
4UZtsJsuxqxLiaFGNl5s3_pBIVxS6-VsFUP_" >

donde:
"https://t3.gstatic.com/licensed-image?
q=tbn:ANd9GcRoT6NNDUONDQmlthWrqIi_frTjsjQT4UZt
sJsuxqxLiaFGNl5s3_pBIVxS6-VsFUP_" :
lo que se obtiene copiando la dirección de la imagen
Videos
DESDE UN ARCHIVO
Para insertar videos en HTML usamos la etiqueta video
con el atributo src

<video src="imagenesmel/abc.mp4"controls autoplay>

</video>

donde:
imagenesmel : nombre de la carpeta donde se
encuentra lel video
abc.mp4 : nombre con el cual se encuentra la video
control autoplay : para q se pueda dar play desde la
pagina

DESDE INTERNET
<iframe width="560" height="315"
src="https://www.youtube.com/embed/k5Xq2wR3joE"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-
share" allowfullscreen></iframe>

donde:
todo lo que se obtiene copiando de yotube en:
Audios
DESDE UN ARCHIVO
Para insertar audios en HTML usamos la etiqueta audio
con el atributo src

<audio src="imagenesmel/abc.mp3"controls autoplay>

</video>
donde:
imagenesmel : nombre de la carpeta donde se
encuentra el audio
abc.mp3: nombre con el cual se encuentra la imagen
control autoplay : para q se pueda dar play desde la
pagina

PDF
DESDE UN ARCHIVO
Para insertar PDF en HTML usamos la etiqueta emblet
con el atributo src

<embed width="400px"
height="600px"src="imagenesmel/meldramas.pdf">

donde:
imagenesmel : nombre de la carpeta donde se
encuentra el PDF
meldramas.pdf" : nombre con el cual se encuentra el
PDF
width="400px" height="600px" : es la medida en "px" el
cual se mostrara en la pagina
Mapas
DESDE INTERNET
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d61410.99077230034!2d-
70.05767429336449!3d-
15.846770021167643!2m3!1f0!2f0!3f0!3m2!1i1024!2i
768!4f13.1!3m3!1m2!1s0x915d6985f4e74135%3A0x
1e341dd8f24d32cf!2sPuno!5e0!3m2!1ses!2spe!4v16
81826775792!5m2!1ses!2spe" width="600"
height="450" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-
downgrade"></iframe>

donde:
"https://www.google.com/maps/embed?
pb=!1m18!1m1 ....... Puno!5e0!3m2!1ses!2spe!4v
1681826775792!5m2!1ses!2spe" : lo que se obtiene
copiando lde google maps

width="600px" height="450px" : es la medida en "px" el cual se

mostrara en la pagina
TAREA
 FORMULARIOS
DISABLED: BLOQUEA EL IMPUT

REQUIRED: PARA COMPLETAR EL CAMPO

PLACEHOLDER: MARCA DE AGUA

TYPE: PARA QUE SE CREE EL TEXTO

<input type="submit" value="guardar">

<label for="contraceña">introduca su contraceña</label>

<input type="password">

<label for="email">introduca un correo</label>

<input id="email" type="email"required>

<label for="descripcion">descripcion</label>
<textarea id="descripcion" cols="30" rows="10"></textarea>
campo numérico
<input type="number">

<input type="tel"> : hace que en el celular solo aparesca

el teclado de numero mas no de letras

<input type="range" min="0" max="100" step="5" >

donde :
min="0" : el minimo es 0
max="100" : el maximo es 100
step="5" : avanza de 5 en 5

campo de tipo fecha

<input type="time"> <input type="date">
Campo de color
<input type="color">

<button>4to-los?</button>
 GIT
1.

2.

NOS APARECERA

A CONTINUACION

git init: para que reconozca la carpeta

git status: para que se muestre lo que tiene que subir (en caso
que aparezca rojo quiere decir que hay alguna modificacion
que aun no esta guardada)
git add . : para que reconozca el error y se actualice
CREAR UNA CUENTA EN GIT HUB

CREAR UN REPOSITORIO
PONER UN NOMBRE
esperar a que cargue
 TAREA
Etiquetas por defecto que se consideran de bloque :

<div>: Se utiliza para crear divisiones o secciones

genéricas en el documento.
<p>: Representa un párrafo de texto.
<h1> a <h6>: Son encabezados de diferentes niveles,
siendo <h1> el más importante y <h6> el menos
importante.
<ul>: Define una lista desordenada.
<ol>: Define una lista ordenada.
<li>: Representa un elemento de una lista (<ul> o <ol>).
<table>: Define una tabla.
<form>: Se utiliza para crear un formulario.

Etiquetas por defecto que se consideran en línea :

<span>: Se utiliza para aplicar estilos o manipular

secciones de texto en línea.
<a>: Define un enlace o hipervínculo.
<img>: Se utiliza para insertar imágenes.
<strong>: Representa un texto enfatizado, generalmente
mostrado en negrita.
<em>: Indica un énfasis o importancia en el texto,
generalmente mostrado en cursiva.
<input>: Se utiliza para crear campos de entrada en
formularios.
<label>: Etiqueta para asociar un texto descriptivo con un
elemento de formulario.
 CSS
existe el código CSS, que unido al código HTML permite darle
forma, color, posición (y otras características visuales) a un
documento web.

ESTRUCTURA:

En primer lugar, recuerda que debemos tener el documento

.css enlazado desde nuestro documento .html,
preferiblemente desde una etiqueta <link rel="stylesheet">. En
su atributo href colocaremos el nombre del documento .css
que contiene los estilos:
 SINTAXIS
Vamos a centrarnos ahora en el contenido de nuestro
documento index.css. El código CSS de dicho documento, se
basa en una serie de conceptos que debemos tener claros
antes de continuar. Demos un repaso a cada uno de ellos:

Así pues, tras aprender estos conceptos, la estructura de un

documento .css se basaría en organizar el código siguiendo
el formato del siguiente bloque:
 HERENCIA
debemos saber que algunas propiedades CSS, como color o
font-family, se heredan desde los elementos HTML padres a los
elementos HTML hijos, modificando el valor que tienen por
defecto. Observa en el siguiente ejemplo, donde aplicamos un
color verde al texto de la clase .container (padre):

Si observas el resultado, verás que tanto el texto de .container

(padre) como el texto de .child (hijo) aparecerán de color
verde. Esto en cierta forma debería resultarnos lógico, ya que
el elemento .child se encuentra en el interior de .container, y
no hay ninguna otra regla más especifica que le dé otro color
de texto a ese elemento interior.
Sin embargo, con el borde rojo sólo se aplica borde al
.container. El elemento .child no se ve afectado. Esto ocurre
porque algunas propiedades como color o font-family se
heredan en los hijos, mientras que otras propiedades como
border, no.
 CASCADA
Cuando hablamos de la Cascada CSS nos referimos al algoritmo
o conjunto de reglas y normas que tiene el navegador para
aplicar estilos CSS a un elemento HTML. No es tan sencillo como
la mayoría cree, ya que hay múltiples casos donde pueden
existir ambigüedades o conflictos de valores, y el navegador
debe resolverlos para saber cual debe prevalecer.
Imagina que tenemos enlazados dos archivos .css mediante
<link> y en cada uno tenemos un mismo selector .text aplicando
colores diferentes. ¿Cuál de los dos se aplicará finalmente?
Quizás pienses que el último que haya sido definido. A veces,
esto es cierto, pero otras muchas veces no. Expliquemos la
razón.
La cascada comprende varios temas importantes a la hora de
resolver dichos conflictos:
Importancia: Los estilos pueden tener una importancia
concreta, eso le da mayor o menor prioridad.
Origen: Existen varios orígenes de CSS, cada uno con una
prioridad específica.
Orden de aparición: El orden en el que se procesa el CSS
influye a la hora de resolver conflictos.
Especificidad: Cuanto más específicos sean los estilos CSS,
mayor prioridad.
Capas: Los estilos CSS se pueden aislar en capas fusionables. Lo
explicamos en @layers CSS.
Vamos a repasar cada uno de ellos para comprenderlo lo
mejor posible.
Importancia
Existe la posibilidad de añadir el texto !important al final de
una regla, consiguiendo que el navegador le de prioridad a la
hora de evaluar dichos estilos sobre otros. Veamos un ejemplo
de como funciona:
 CÓDIGOS DE COLORES
Primero vamos a ver las propiedades CSS que podemos
utilizar para cambiar el color de texto y el color de fondo
de un elemento HTML:

Propiedad Valor Significado

color Cambia el color del texto que está en el interior de un
elemento.
background-color Cambia el color de fondo de un
elemento.
Como podemos ver en la tabla anterior, la propiedad color
establece el color del texto, mientras que la propiedad
background-color establece el color de fondo del elemento.
De esta forma, podemos hacer cosas como estas:
 LA FUNCIÓN RGB()
Las siglas RGB significan Rojo (red), verde (green) y azul
(blue) y es un modelo para representar colores basados en la
combinación de estos tres colores primarios. La idea es
sencilla: dependiendo de la cantidad de cada color, obtendrás
otro color diferente. Veamos algunos ejemplos:

Si tienes el canal de rojo al máximo, y el verde y azul al

mínimo, obtendrás el color rojo.
Si tienes el canal rojo y verde al máximo, y el azul al mínimo,
obtendrás el amarillo.
Si tienes todos los canales al máximo, obtendrás el blanco.
Si tienes todos los canales al mínimo, obtendrás el negro.

Función RGB Descripción

rgb(r g b) Valores numéricos o porcentajes separados por espacio.
rgb(r g b / a) Se añade un valor correspondiente al grado de
transparencia, separado por /. Ver canales alfa
Los valores anteriormente indicados como r, g y b significan rojo,
verde y azul, respectivamente, y hacen referencia a la cantidad de color
que poseen estos canales para generar otro color. Para especificarlo se
puede hacer de dos formas:
 Como números, desde el 0 al 255, siendo el primero el más oscuro y el
segundo el más claro.
Como porcentajes, desde el 0% al 100%, siendo el primero el más
oscuro y el segundo el más claro.
Como se puede ver en la siguiente imagen, donde utilizamos el formato
de , si utilizamos una cantidad rgb(0 0 0) de cada canal, obtenemos el
color negro (todos los canales están en su valor menos intenso). En
cambio, si utilizamos una cantidad rgb(255 0 0), obtendremos el color
rojo (solo el canal rojo está en el más intenso). De esta forma,
mezclando las cantidades de cada canal, se puede obtener
prácticamente cualquier color:
MODELOS DE CAJA
La representación básica del modelo de cajas se basa en varios
conceptos importantes, como veremos a continuación:

El borde (border), en negro, es el límite que separa el

interior del exterior del elemento.
El márgen (margin), en naranja, es la parte exterior del
elemento, por fuera del borde.
El relleno (padding), en verde, es la parte interior del
elemento, entre el contenido y el borde.
El contenido, en azul, es la parte interior del elemento,
excluyendo el relleno.

Como veremos, cada una de estas partes del modelo de cajas de

CSS se puede alterar, cambiando sus dimensiones, colores, etc.
Así pues, cada elemento HTML tendrá su propio borde, margen,
relleno y contenido.
 Dimensiones (ancho y alto)
Para dar tamaños específicos a los diferentes elementos de
un documento HTML, necesitaremos asignarles valores a las
propiedades width (ancho) y height (alto):

En el caso de indicar el valor auto a dichas propiedades, el

navegador se encargará de darle el tamaño apropiado,
dependiendo de su contenido. Ten en cuenta que este valor es
el que tienen por defecto estas propiedades. De no indicar un
valor concreto, width y height tienen establecido el valor auto.
Es importante recalcar que el tamaño automático dado a
un elemento depende del tipo de elemento (bloque, en
línea...). Este tema lo veremos en un capítulo posterior.
Hay que ser muy conscientes de que, sin indicar valores de
ancho y alto para una caja, el elemento generalmente toma el
tamaño que debe respecto a su contenido, mientras que si
indicamos un ancho y alto concretos, estamos obligando
mediante CSS a tener un aspecto concreto y podemos obtener
resultados similares al siguiente (conocida broma de CSS) si su
contenido es más grande que el tamaño que hemos obligado
a tener:
 Rango de dimensiones
Otra forma de lidiar con esto, es utilizar las propiedades
hermanas de width: por un lado, min-width y max-width y
por otro, sus equivalentes de height: min-height y max-
height.

Con estas propiedades, en lugar de

establecer un tamaño fijo,
establecemos unos rangos
máximos y mínimos, donde el
ancho o alto podría variar entre
esos valores:

En este caso, por ejemplo, a pesar de estar indicando un

tamaño de 800px, le aplicamos un max-width de 500px, por lo
que estamos limitando el elemento a un tamaño de ancho de
500 píxeles como máximo y nunca superará ese tamaño.

Ojo: Las propiedades de mínimos min-width y min-height por

defecto tienen valor 0, mientras que las propiedades de
máximos max-width y max-height, tienen por defecto valor
none.
 Zonas de un elemento
Antes de continuar, es importante saber que en CSS existen
ciertas palabras clave para hacer referencia a una zona u
orientación concreta sobre un elemento. Son conceptos muy
sencillos y prácticamente lógicos, por lo que no tendrás
ningún problema en comprenderlos. Son los siguientes:

La propiedad overflow
Volvamos a pensar en la situación de la imagen anterior:
Damos un tamaño de ancho y alto a un elemento HTML,
pero su contenido de texto es tan grande que no cabe
dentro de ese elemento. ¿Qué ocurriría? Probablemente
lo que vimos en la imagen: el contenido se desbordaría.

Podemos modificar ese comportamiento con la

propiedad de CSS overflow, o con alguna de sus
propiedades específicas overflow-x o overflow-y:
LA PROPIEDAD BOX-SIZING
Aunque el concepto del modelo de cajas de CSS es
sencillo, hay varios detalles que es interesante conocer
antes de continuar. En muchas ocasiones, trabajar con
los tamaños de varios elementos puede resultar
frustrante, ya que es muy habitual que ocurran ciertas
situaciones inesperadas.

El tamaño de las cajas

Por defecto, el modelo de cajas de CSS sigue un
esquema donde al dar un tamaño a un elemento,
concretamente se le da tamaño a su contenido, de
modo que si además le añadimos un borde (border)
y/o un relleno (padding), se sumará al tamaño
indicado previamente.

Esto puede resultar algo poco intuitivo, ya que un

elemento de tamaño width: 200px, con un border:
15px y un padding: 20px, tendría en realidad un
tamaño total de 270px (15px + 15px de borde izquierdo
y derecho, 20px + 20px de relleno izquierdo y derecho
y los 200px del contenido). Tener que realizar estos
cálculos, puede resultar complejo y poco predecible,
especialmente en situaciones donde estamos muy
justos de espacio.
La propiedad box-sizing
En CSS, existe una propiedad denominada box-sizing que
permite alterar esta versión del modelo de cajas. Lo explicado
en el ejemplo anterior es el funcionamiento por defecto del
modelo de cajas de CSS, y el valor content-box de la propiedad
box-sizing, que obviamente, es el valor por defecto:
content-box : Las propiedades width y height no incluyen
borde, relleno y/o margen. Valor por defecto.
border-box : Las propiedades width y height incluyen
borde y relleno.
Sin embargo, tiene disponible otro valor denominado border-
box donde se puede cambiar el comportamiento de este
modelo de cajas por uno simplificado donde el tamaño del
border y del padding están incluídos en el tamaño del
contenido dados por propiedades como width o height.

Veamos un ejemplo donde utilizaremos:

Tamaño width y height de 200px.
Borde de 15px por cada lado.
Relleno de 20px por cada lado.
 Reseteos de CSS
Aunque cada vez es menos frecuente, simplificar los
cálculos del desarrollador con box-sizing o la necesidad de
eliminar el margin en el body o en elementos de
encabezado h1, h2, etc. han hecho que muchos
programadores decidan utilizar reseteos que eliminen estas
particularidades de todos los navegadores y hagan que sea
más fácil de escribir CSS.

Tradicionalmente, han habido muchos sistemas de reset en

CSS, pero sólo algunos se han quedado hasta estos días.
Citaré los que creo que son más conocidos y relevantes:

Sistema de reseteo Descripción

Reset CSS El reset de Eric Meyer, históricamente, quizás el
primero.
Normalize.css Uno de los reset más tradicionales y
populares.
A Modern CSS Reset El reseteo CSS de Andy Bell.
A CSS Reset for 2022 CSS Reset 2022 de Mayank99
CSS Remedy CSS Remedy, de Jen Simmons
Josh W. Comeau Un reset moderno, explicado paso a paso.
Utilizar un sistema de reset CSS es decisión del
desarrollador y no es algo obligatorio. En algunos casos,
quizás pueda ayudar a que el desarrollador realice pasos
en sus diseños de forma mucho más intuitiva.
 El «Margin Collapse»
Otro detalle que merece la pena destacar, y que sorprende
mucho en el aprendizaje del modelo de cajas de CSS, es el
llamado «margin collapse» o colapso de márgenes.
Como veremos más adelante, CSS tiene varios mecanismos de
maquetación. Los más básicos son inline y block, y en ellos,
ocurre la siguiente situación. Imaginemos que tenemos dos
elementos adyacentes, y cada uno de ellos, tiene un margen
de 20px definido.
Quizás, lo más intuitivo es pensar que que el elemento de la
izquierda tiene 20px de margen derecho, mientras que el
elemento de la derecha tiene 20px de margen izquierdo, que
al sumarse, predecimos que resultará un tamaño de 40px.
Sin embargo, la realidad es distinta:

El margin collapse se refiere a que en estos modelos de

maquetación básica, los márgenes de dos elementos se
colapsan, ocupando el tamaño una sola vez. En el ejemplo
anterior, ocupa sólo esos 20px, en lugar de 40px.
 ESQUINAS REDONDEADAS
CSS3 añade interesantes características en materia de bordes,
como la posibilidad de crear bordes con esquinas
redondeadas, característica que en versiones anteriores de
CSS era muy complicado de lograr, necesitando recurrir al
apoyo de imágenes gráficas. Por su parte, en CSS3 es
realmente sencillo hacerlo mediante código.

La idea es especificar un radio para el borde de las esquinas

de la caja. Por defecto, este borde es de tamaño 0, por lo que
no hay borde redondeado. A medida que se aumenta este
valor, el borde se redondea más. Una vez llegado a su
máximo, no se apreciará ningún cambio.
PROPIEDADES LÓGICAS CSS
El modelo de cajas de CSS
Antes de empezar, hay que tener claro el modelo de cajas
en CSS, ya que nos basaremos en él para entender la nueva
familia de propiedades. Lo hemos explicado en capítulos
anteriores como en modelo de cajas de CSS, por lo que si
no lo conoces, es conveniente que le eches un vistazo antes
de continuar.

La idea de todos estos cambios, desde un punto de vista físico

a un punto de vista lógico, es que sea mucho más sencillo
alterar el orden de flujo de los elementos en bloque y en
línea y que podamos alterarlo, de modo que las nuevas
disposiciones sean coherentes, por ejemplo, cambiando este
flujo con la propiedad writing-mode:
 Propiedades de dimensión
El primer cambio que hay que tener claro, es que en el
futuro no hablaremos de ancho (width) y alto (height) de los
elementos, sino de un concepto algo más abstracto. Ahora
debemos tener en cuenta que los conceptos «en linea**
(inline) y en bloque (block), van a reemplazar los anteriores.

Cuando antes hablabamos de ancho, ahora estaremos

hablando de espacio en dirección «en línea», mientras que lo
que antes denominábamos alto, ahora es espacio en
dirección «en bloque». A priori, puede parecer lioso, pero la
idea es simplificarlo globalmente, incluyendo todos los
idiomas y su forma de escritura o dirección.
Bordes con imágenes
 La propiedad opacity
La sintaxis de la propiedad opacity es la siguiente:

Propiedad Valor Significado

opacity Establece una transparencia con un valor del 0 al
1 (permite decimales).
opacity Establece una transparencia con un valor del 0%
al 100%.
Para indicar la opacidad podemos indicar tanto valores
numéricos entre 0 (completamente transparente) y 1
(completamente visible), pasando por valores como 0.25 o
0.75. Si lo preferimos, podemos usar valores porcentuales
entre 0% (completamente transparente) y 100%
(completamente visible): opacity: 50%; /* Equivalente a la
anterior */
 TABLAS
Las tablas de HTML son un grupo de etiquetas que sirven para
mostrar datos tabulares. En el pasado se utilizaron de forma
errónea para crear diseños, debido a la ausencia de alternativas y
a su facilidad de colocación al ser un esquema rectángular. Sin
embargo, esta forma producía grandes problemas de rendimiento
y accesibilidad. Afortunadamente, hoy en día hay mecanismos
potentes y flexibles para maquetar, y ya se ha perdido esa
percepción incorrecta de diseñar con tablas (aunque nunca está
de más conocer un poco de historia para no repetir los errores
del pasado).
Las tablas deben utilizarse para su finalidad: mostrar datos de
forma organizada y legible. Para ello, recordemos que las tablas
tienen varias etiquetas importantes, puedes aprender más sobre
otras etiquetas relacionadas con las Tablas HTML, como <tfoot> o
<thead>:
Etiqueta HTML Descripción
<table> Etiqueta que contiene todo el contenido de la tabla.
<tr> Representa una fila de una tabla.
<th> Representa la cabecera o título de una columna.
<td> Representa una celda de una columna.
Para dar estilo a la tabla o sus filas o columnas, podemos utilizar
propiedades CSS genéricas que conocemos como border,
background, color, font-family, padding, margin, entre otras. Sin
embargo, también existen varias propiedades CSS específicas para
alterar o modificar el comportamiento de ciertas características de
una tabla HTML. Veamos cuales son esas propiedades:
 VARIABLES
Para definir una custom property haremos uso de los dos
guiones -- previos al nombre que queramos utilizar. Además,
debemos fijarnos en el elemento que definimos la variable,
en este ejemplo la pseudoclase :root:

Ámbito de las custom properties

El ejemplo anterior es muy básico y puede que no se
aprecie el detalle de los ámbitos con las custom
properties, así que vamos a verlo con un ejemplo más
específico.
Observa el marcado HTML del siguiente ejemplo, donde
tenemos tres elementos con clase child, los dos primeros
dentro de parent y el tercero fuera: