Ejercicios de inicio _ HTML_apuntes teoría_w3

-

 Ejer 1 HTML_                                                                                                                            w3

En la página colorhexa.com o poniendo ‘ colores html wikipedia‘ en google encuentras los colores de hTML

<!DOCTYPE html> es la declaración de tipo de documento (o doctype) que se coloca siempre al inicio de un archivo HTML, justo antes de la etiqueta <html>.

Sirve principalmente para dos cosas:

1. Decirle al navegador qué versión de HTML estás usando

Al incluir <!DOCTYPE html>, le estás indicando al navegador (Chrome, Firefox, Safari, Edge, etc.) que la página está escrita en HTML5 (la versión estándar y moderna de HTML).

2. Activar el "Modo Estándar" (Standard Mode)

Si no colocas el <!DOCTYPE html>, los navegadores asumen que el código es muy antiguo y entran en un modo de compatibilidad llamado "Modo Quirks" (Quirks Mode).

En el Modo Quirks, el navegador intenta adivinar cómo mostrar la página para que no se "rompa", lo que suele provocar que:

  • El diseño o los estilos CSS se vean totalmente diferentes según el navegador.

  • Ciertas funciones modernas de CSS no funcionen bien.

Etiqueta strong ejercicio 1

<!DOCTYPE html>

<html>

<head>

<style>

strong {

font-weight: bold;

}

</style>

</head>

<body>



<p>A strong element is displayed like this:</p>



<strong>Some important text</strong>



<p>Change the default CSS settings to see the effect.</p>



</body>

</html>

Solucion:



A strong element is displayed like this:

Some important text

Change the default CSS settings to see the effect.





El atributo style en   HTML se usa para agregar estilos a un elemento, como color, fuente, tamaño y más.

La configuración del estilo de un elemento HTML se puede hacer con el atributo style



El atributo style en HTML tiene la siguiente sintaxis:



<tagname style="property:value;">

El atributo de HTML style  se emplea para añadir estilos a un elemento, como es color, font, size, y más.

Configurar el style (estilo) de un elemento HTML puede realizarse con el atributo style.

El  HTML  attribute style has the following syntax:

<nombre de la etiqueta style="propiedad:valor;">

<tagname style="property:value;">

La propiedad es una propiedad CSS.El valor es un valor CSS .

Ejercicio 2

<!DOCTYPE html>

<html>

<body>



<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>



</body>

</html>



solución



I am normal

I am red ______ rojo

I am blue---------- aparece azul

I am big _________ Aparece mas grande



Background Color

La background-color propiedad CSS define el color de fondo de un elemento HTML.



Ejemplo 3

Establezca el color de fondo de una página en azul polvo:



<!DOCTYPE html>

<html>

<body style="background-color:powderblue;">



<h1>This is a heading</h1>

<p>This is a paragraph.</p>



</body>

</html>



solución:

This is a heading_________ (aparece en grande) y fondo azul toda la página

This is a paragraph.

Ejercicio 3 version b_color página en hexadecimal

<!DOCTYPE html>

<html>

<body style="background-color:#0045ff;">



<h1>This is a heading</h1>

<p>This is a paragraph.</p>



</body>

</html>



Ejercicio 4:Establezca el color de fondo para dos elementos diferentes:

<!DOCTYPE html>

<html>

<body>



<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>



</body>

</html>

Aparece con colores de fondo h1 y p

Color de texto

La propiedad  color CSS define el color del texto de un elemento HTML:

Ejercicio 5:

<!DOCTYPE html>

<html>

<body>



<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>



</body>

</html>

Modifica los colores del texto

Ejercicio 6

Fuentes

La font-family propiedad CSS define la fuente que se utilizará para un elemento HTML:

<!DOCTYPE html>

<html>

<body>



<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>



</body>

</html>

Solución: dos fuentes diferentes

This is a heading

This is a paragraph.



Tamano del texto

La font-sizepropiedad CSS define el tamaño del texto de un elemento HTML:

Ejemplo 7

<!DOCTYPE html>

<html>

<body>



<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>



</body>

</html>


Solución ejer 7

This is a heading______aparece muy grande

This is a paragraph.

Ejer 7Version B) con tamaño con pixeles

<!DOCTYPE html>

<html>

<body>



<h1 style="font-size:30px;">This is a heading</h1>

<p style="font-size:160px;">This is a paragraph.</p>



</body>

</html>

Ejer 8

Alineación del texto

La text-align text-align propiedad CSS define la alineación horizontal del texto para un elemento HTML:

Ejemplo

<!DOCTYPE html>

<html>

<body>


<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>


</body>

</html>


aparecen centrados los párrafos


Resumen

  • Utilice el atributo style para diseñar elementos HTML

  • Usar background-colorpara color de fondo

  • Usar colorpara colores de texto

  • Usar font-familypara fuentes de texto

  • Usar font-sizepara tamaños de texto

  • Usar text-alignpara alineación de texto

    • ¿Qué es CSS?

Las hojas de estilo en cascada (CSS) se utilizan para formatear el diseño de una página web.

Con CSS, puede controlar el color, la fuente, el tamaño del texto, el espacio entre los elementos, cómo se colocan y distribuyen los elementos, qué imágenes de fondo o colores de fondo se utilizarán, diferentes pantallas para diferentes dispositivos y tamaños de pantalla, y ¡mucho más!

Sugerencia: La palabra en cascada significa que un estilo aplicado a un elemento principal también se aplicará a todos los elementos secundarios dentro del elemento principal. Por lo tanto, si establece el color del texto del cuerpo en "azul", todos los encabezados, párrafos y otros elementos de texto dentro del cuerpo también obtendrán el mismo color (a menos que especifique algo más).

Usando CSS

CSS se puede agregar a documentos HTML de 3 formas:

  • Inline : mediante el uso del atributo style dentro de los elementos HTML

  • Interno : mediante el uso de un elemento style en la <head>sección

  • Externo : mediante el uso de un elemento  <link> para vincular a un archivo CSS externo


CSS en línea

Se utiliza un CSS en línea para aplicar un estilo único a un solo elemento HTML.

Un CSS en línea usa el atributo  style de un elemento HTML.

El siguiente ejemplo establece el color del texto del <h1>elemento en azul y el color del texto del <p>elemento en rojo:

Ejemplo


<!DOCTYPE html>

<html>

<body>


<h1 style="color:blue;">A Blue Heading</h1>


<p style="color:red;">A red paragraph.</p>


</body>

</html>

CSS interno

Se utiliza un CSS interno para definir un estilo para una sola página HTML.

Un CSS interno se define en la sección <head>de una página HTML, dentro de un elemento <style>

El siguiente ejemplo establece el color del texto de TODOS los elementos <h1> (en esa página) en azul y el color del texto de TODOS los elementos  <p> en rojo. Además, la página se mostrará con un color de fondo "azul claro":

Ejemplo

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>



<h1>This is a heading</h1>

<p>This is a paragraph.</p>



</body>

</html>



CSS externo

Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.

Para utilizar una hoja de estilo externa, agréguele un enlace en la sección <head> de cada página HTML:



Ejemplo

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="styles.css">

</head>

<body>



<h1>This is a heading</h1>

<p>This is a paragraph.</p>



</body>

</html>



La hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no debe contener ningún código HTML y debe guardarse con una extensión .css

"Una hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no debe contener código HTML y se debe guardar con la extensión .css.

Lo más sencillo es tener ambos archivos en la misma carpeta; de este modo, el atributo href —que viene de Hypertext REFerence— solo necesita el nombre del archivo .css como ruta relativa para localizarlo."


La palabra href viene de Hypertext REFerence (referencia de hipertexto).


Así es como se ve el archivo "styles.css":

guardadlo como "styles.css" porque así lo llamó en href de la página html:



body {

background-color: powderblue;

}

h1 {

color: blue;

}

p {

color: red;

}




Ejercicio 8:


<!DOCTYPE html>

<html>

<head>


</head>

<body>


<p>A strong element is displayed like this:</p>


<em>Some important text</em>


<p>Change the default CSS settings to see the effect.</p>


</body>

</html>

La diferencia entre significado y apariencia

  • <em> (Semántica): Significa énfasis. Se usa para indicar que esa palabra o frase debe leerse con un tono de voz distinto o más marcado.

  • <i> (Visual / Término alternativo): Históricamente era solo para poner texto en cursiva (italics). Hoy se usa para cosas como términos técnicos, palabras en otro idioma o nombres de obras.

  • CSS (font-style: italic;): Es la forma correcta de hacer que algo se vea en cursiva cuando solo buscas un efecto puramente estético y no hay ningún énfasis especial.

Un ejemplo rápido de comparación


Etiqueta¿Qué entiende el navegador / Google?Visual por defecto
<em>texto</em>"Atención: este texto lleva énfasis al leerlo."Cursiva
<i>texto</i>"Texto en tono alternativo (p. ej. extranjerismo)."Cursiva
<span style="font-style: italic;">texto</span>"Ningún significado especial, solo diseño."Cursiva

A los ojos del usuario, los tres ejemplos se van a ver exactamente igual: texto inclinado (en cursiva).

La única diferencia no es visual, sino de "significado oculto" (lo que lee el navegador, Google o un lector de pantalla para personas con discapacidad visual):

  • <em>: "Léelo con énfasis".  Se ve en cursiva.

  • <i>: "Es un término especial / extranjerismo".  Se ve en cursiva.

  • <span style="...">: "Solo es diseño, sin significado especial".  Se ve en cursiva.

Así que sí: la apariencia externa final en la pantalla para los tres casos es pura cursiva.

Entradas populares de este blog

BLOQUE 5_Páginas de IA generativa de video (gratis y sin pagar) para 4º ESO IA artificial_Inteligencia artificial

-
  Aquí te dejo   algunas plataformas que SÍ generan videos a partir de un prompt de texto   (como: "Haz un video de un perro aprendiendo a leer") y que tienen   versiones gratuitas : 🧠  Páginas de IA generativa de video (gratis y sin pagar): 1.  Pika Labs  ( https://pika.art ) ⚡ IA generativa de video real, solo necesitas escribir un prompt. 🎨 Puedes pedir cosas como:  “Un gato volando en un globo en un cielo rosado” . 👦 Ideal para creatividad con niños. ✅ Gratis (necesitas crear cuenta, pero no tarjeta). 📽️ Algunos videos duran solo unos segundos. 2.  Runway ML (Gen-2)  ( https://runwayml.com ) 🔥 Muy popular para generar videos a partir de texto o imágenes. ✏️ Puedes escribir un prompt como  “Una mariposa mecánica volando sobre flores” . ✅ Plan gratuito (hasta unos minutos de video por mes). 🎓 Ideal para explorar en clases. 3.  Kaiber  ( https://www.kaiber.ai ) 🎥 Transforma texto o imágenes en animaciones y clips. ...
Leer más

GrÁfico de lineas, google colab o jupyter ,GRÁFICO DE DISPERSIÓN Y DETECCIÓN DE PROFUNDIDAD, NOTEBOOK, PÍDELE A TU IA FAVORITA,

-
Imagen
# Importar bibliotecas necesarias import numpy as np import matplotlib.pyplot as plt # Datos de ejemplo x = np.linspace(0, 10, 100) y = np.sin(x) # Crear gráfico de líneas plt.figure(figsize=(10, 6)) plt.plot(x, y, label='Seno', color='blue') plt.title('Gráfico de Líneas del Seno') plt.xlabel('X') plt.ylabel('Seno(X)') plt.legend() plt.grid() plt.show() GRÁFICO DE DISPERSIÓN # Importar bibliotecas necesarias import numpy as np import matplotlib.pyplot as plt # Datos de ejemplo x = np.random.rand( 100 ) y = np.random.rand( 100 ) # Crear gráfico de dispersión plt.figure(figsize=( 10 , 6 )) plt.scatter(x, y, color= 'red' ) plt.title( 'Gráfico de Dispersión' ) plt.xlabel( 'Eje X' ) plt.ylabel( 'Eje Y' ) plt.grid() plt.show() Cómo Usar en Google Colab Abre Google Colab. Crea un nuevo notebook. Copia y pega cada uno de estos bloques de código en celdas diferentes y ejecútalos. (Le llama celda a donde pegas todo el pr...
Leer más