Parte 6_Parte 2 de carpeta_20_20_formularios_ CLASES
Ejercicio 28 nov___20_San Francisco_muy bonito_texto e imágenes
(d__i_c___m__a__r_)
Fíjate: <img src="img1.jpg" style="height:250px; padding:10px; float:right;">
<img src="img2.jpg" style="border: 7px solid red; height:250px; padding:10px; float:left;">
Cuando le das un valor fijo a height (alto) y no defines el width (ancho), el navegador calcula automáticamente el ancho proporcional para que la imagen no se deforme ni se distorsione.
¿Cómo funciona en el navegador?
Calcula la proporción original: El navegador lee las dimensiones nativas de
img2.jpg(por ejemplo, 800px de ancho × 400px de alto).Aplica tu
height: Ajusta la altura de la imagen a los250pxque especificaste.Aplica
width: autoimplícitamente: Como no pusiste ancho, el navegador asume un ancho automático proporcional a la nueva altura (en el ejemplo, pasaría a medir 500px de ancho).
Las 3 situaciones comunes con imágenes en CSS
Es un concepto genial para enseñar a principiantes sobre las proporciones en imágenes:
Poner solo
height(lo que hiciste tú): Ajusta el alto y escala el ancho automáticamente. No se deforma.Poner solo
width: Ajusta el ancho y escala el alto automáticamente. Tampoco se deforma.Poner
widthYheightfijos (ej.width: 300px; height: 100px;): Fuerza a la imagen a medir exactamente eso. ¡Aquí sí se deforma! (se aplasta o se estira a menos que se use la propiedad modernaobject-fit).
Cuando usas float en una imagen, estás diciendo al navegador que la "flote" a la izquierda o a la derecha de las otras imágenes. Las otras imágenes seguirán a la imagen flotada, ¡pero no tendrán que tener la misma altura!
¿Por qué es útil el float?
El float es muy útil cuando quieres crear diseños más creativos con imágenes. Por ejemplo, puedes usarlo para:
Crear galerías de imágenes: ¡Puedes poner varias imágenes una al lado de la otra para crear una galería de fotos!
¡El
floates muy útil para crear diseños que se adapten a diferentes tamaños de pantalla!Crear diseños más divertidos: ¡Puedes usar el
floatpara crear diseños más divertidos.
img {
float: right; /* La imagen se alinea a la derecha */
margin-left: 15px; /* Espacio para que el texto no se pegue a la imagen */
}
float: right; ---> flota/alinea el elemento a la derecha.
float: left; ----> flota/alinea el elemento a la izquierda.
float: right;, la foto se vuelve como un corcho que flota hacia la derecha y el texto fluye alrededor de ella como el agua."padding?( acolchado en castellano)El padding es un espacio en blanco que puedes añadir alrededor de una imagen. ¡Es como si le dieras un poco de espacio para respirar a la imagen!
¿Cómo usar el padding?
Cuando usas padding en una imagen, estás añadiendo un espacio en blanco alrededor de ella. ¡Esto puede ser útil para que la imagen no se vea demasiado apretada!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>San Francisco</title>
<style>
p {
text-align:justify;
}
</style>
</head>
<body>
<img src="sf.jpg" alt="San Francisco">
<p>
<b style="font-size:20px; font-family: 'Times New Roman', Times, serif; ">San Francisco</b> está ubicado en la costa oeste de los <span style="text-decoration: underline overline;">Estados Unidos</span>, en la punta de la península de San Francisco e incluye importantes tramos del océano Pacífico y la bahía de San Francisco dentro de sus fronteras. Varias islas como Alcatraz, isla Treasure, la vecina isla de Yerba Buena, y pequeñas partes de la isla de Alameda, la isla Roja y la isla Ángel forman parte de la ciudad. También se incluyen las deshabitadas islas Farallones, alejadas 43 kilómetros de la costa del océano Pacífico. La parte sobre tierra firme dentro de los límites de la ciudad forma aproximadamente un cuadrado de siete por siete millas, un término coloquial usado para referirse a la forma de la ciudad, aunque su superficie total, incluida la superficie cubierta por agua, es cercana a los 600 km².
San Francisco es famosa por sus colinas. Hay más de 50 colinas dentro de los límites de la ciudad.Algunos de los nombres de los barrios pertenecen al nombre de la colina en la que están situados, como Nob Hill, Pacific Heights y Russian Hill. Cerca del centro geográfico de la ciudad, al suroeste, hay una serie de colinas menos densamente pobladas. Twin Peaks, un par de colinas que reposan en uno de los puntos más altos de la ciudad, constituye un popular mirador. La colina más alta de San Francisco, el monte Davidson, mide 282 metros de altura y en ella se encuentra una cruz de 31 metros de altura construida en 1934.51Dominando esta área se erige la Torre de Sutro, una gran torre de transmisión de radio y televisión.
<img src="img1.jpg" style="height:250px; padding:10px; float:right;">
Las fallas de San Andrés y Hayward son responsables de gran actividad sísmica, aunque ninguna de ellas pasa físicamente a través de la propia ciudad. Fue la falla de San Andrés la que resbaló y causó los terremotos de 1906 y 1989. Frecuentemente ocurren terremotos menores, pero la amenaza de los terremotos mayores juega un papel importante en el desarrollo de la infraestructura de la ciudad. La ciudad ha actualizado constantemente sus códigos de construcción, por lo que se han requerido mayores modificaciones para los edificios más antiguos y estándares de ingeniería superiores para los de nueva construcción.52Sin embargo, aún hay miles de pequeños edificios que siguen siendo potencialmente vulnerables a daños provocados por movimientos sísmicos.
</p>
<h3 style="font-size:30px; font-family: Arial, Helvetica, sans-serif; ">Lombard Street</h3>
<p>
Lombard Street es una calle de San Francisco, en California, Estados Unidos. Está orientada de este a oeste: comienza en El Presidio y termina en el barrio de Embarcadero. Es mundialmente conocida por un tramo específico de su trazado, el situado entre Russian Hill y Hyde Street, donde la calzada está distribuida en ocho virajes, que le otorgan el título de la calle más sinuosa de los Estados Unidos.
<img src="img2.jpg" style="border: 7px solid red; height:250px; padding:10px; float:left;">
Su concepción sinuosa fue realizada en 1922 por el propietario Carl Henry, con el objetivo de reducir la pendiente del 27% que presentaba la calle, haciendo posible con esta medida que pudiera ser transitada por automóviles.
En 1999, se creó una comisión especial para tratar de resolver los problemas de circulación dentro del propio barrio. Dicha comisión decidió en 2001 que no sería legal cortar de manera permanente el paso a la circulación por el tramo más inclinado de la calle. Acordó impedir el estacionamiento en esta zona durante el verano, habilitando otra para ello e incrementar las multas a aquellos que quebrantaran la nueva norma. Igualmente, se propuso utilizar minibuses para llevar a los turistas hasta Lombard Street, pero los vecinos contestaron que el gran atractivo de la calle para muchos turistas era el de poder conducir su automóvil por la parte sinuosa de la calle.
</p>
</body>
</html>
foto sf.jpg
| Propiedad en CSS | ¿Qué hace realmente? | Ejemplo visual |
| font-style: italic; | Inclina la letra hacia la derecha (cursiva/itálica estándar). 👉 Esta es la equivalencia exacta de | Texto inclinado |
| font-style: oblique; | Inclina una letra normal mecánicamente (se usa muy poco). | Texto inclinado |
| font-family: cursive; | Cambia la fuente/tipografía a un estilo de caligrafía o escritura a mano. | Texto tipo caligrafía |
EJEMPLO PROFESOR FERNANDO, lembra: fotos na mesma carpeta que o arquivo .html
<html>
<head>
<title>TRABALLO CON IMAXES</title>
</head>
<body>
TRABALLO CON IMAXES
<br>
<img src="minions1.png"> <!--Imaxe que está na mesma carpeta que o arquivo html--> <!--As imaxes non teñen etiqueta de peche-->
<img width="400" height="200" src="Penguins.jpg"> <!--Imaxe que está no equipo pero noutra carpeta e modificamos o
tamaño de anchura e altura-->
<img width="400" height="200" src="https://images.pexels.com/photos/8243086/pexels-photo-8243086.jpeg?_gl=1*bhvrs3*_ga*NzczNDc3NzQyLjE3ODcwNTg4NjE.*_ga_8JE65Q40S6*czE3ODcwNTg4NjAkbzEkZzEkdDE3ODcwNTg5NTckajI2JGwwJGgw"> <!--Para unha imaxe
que está en internet temos que introducir a url-->
<br>
<img title="minion" src="minions1.png"> <!--Con title aparece un texto ao pasar o rato pola imaxe-->
<img border="5" src="minions1.png"> <!--Con border metemos un borde co tamaño en pixels para cambiar o color temos que usar estilos CSS-->
<img hspace="30" vspace="30" src="minions1.png"> <!--hspace e vspace marcan a distancia co borde e con outros obxectos a esquerda e dereita e arriba e
abaixo respectivamente-->
<br>
MINIONS
<img align="left" src="minions1.png"> <!--O texto queda á dereita da imaxe con right quedaría á esquerda e con top middle e bottom aliña a 1ªliña coa parte
superior,central e inferior respectivamente-->
</body>
</html>
Hay más ejemplos en carpeta 20_20
Hay más carpetas d_r_i
