parte 3 HTML_CSS
PARTE 3 HTML5 HTML_CSS
EJERCICIO 2 HTML-CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Fuentes atractivas</title>
</head>
<body>
<p>¡Soy un párrafo escrito en rojo pero una de mis palabras es <span>azul</span>!</p>
</body>
</html>
stylesheet.css de ejercicio 2
p {
color: red;
}
span {
color: blue ;
}
ejercicio 3 html y css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Fuentes mucho más lindas</title>
</head>
<body>
<p>Mucho de esto es texto común pero una parte es <span>atractiva</span>!
Podemos usar la fuente <span>que hicimos más linda</span> para darle
<span>estilo</span> a nuestro sitio web. Sería un <span>lío</span>
hacer cada una de estas etiquetas <span>lindas</span> una por una,
pero es una papa con <span>CSS</span>!</p>
</body>
</html>
stylesheet.css de ejer 3
span {
font-family:cursive;
}
Explicación: font-family: cursive;
Lo que hace: Le indica al navegador que elija una fuente genérica con estilo de caligrafía o manuscrito disponible en tu sistema (como Comic Sans MS, Apple Chancery, Brush Script, etc.). Por eso notas que "cambia" el aspecto, es porque está cambiando el tipo de letra.
Ejer 4 html y css__CSS interno__en el <head>
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: purple;
}
</style>
<title>Resultado</title>
</head>
<body>
<p>¡Mira! ¡Soy violeta!</p>
</body>
</html>
ejer 5
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<p>Quiero ser una fuente de TAMAÑO 44</p>
</body>
</html>
ejer 5 css stylesheet.css
p {
font-size: 44px;
}
ejer 6 html y css: etiquetas llamadas elementos Vacíos (Void Elements), ejemplos (m____a______d____i_____)
1. Elementos Vacíos (Void Elements)
Estas etiquetas no pueden tener contenido dentro ni necesitan una etiqueta de cierre (</br>). El navegador ya sabe que terminan ahí por sí solas.
Algunos de los ejemplos más comunes son:
<img>(para imágenes)<br>(para saltos de línea)<hr>(para líneas divisorias horizontales)<input>(para campos de formulario)<link>(para enlazar hojas de estilo, etc.)
2. ¿Cómo se debe poner la barra diagonal (/)?
En el estándar anterior (XHTML), era obligatorio cerrar estas etiquetas con una barra al final, por ejemplo: <img src="imagen.jpg" />.
En HTML5:
La barra diagonal al final es totalmente opcional en elementos void.
Puedes escribir
<img src="imagen.jpg">o<img src="imagen.jpg" />y ambas son válidas para el navegador.La recomendación general en HTML5 hoy en día es omitir la barra diagonal (
<img src="...">) para mantener el código más limpio, ya que la barra pertenece estrictamente a la sintaxis XML/XHTML.
<link rel="stylesheet" href="dirección de archivo CSS">
<img src="dirección web">
Ejer 7 html y css_ hoja de estilos externa
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<p>Estás por darle estilo con CSS a este párrafo, vos solo</p>
</body>
</html>
Ejer 7 de css stylesheet.css
p{
color:green;
}
Ejercicio 8 de Html y css_varias propiedades para un párrafo <p>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<p>Estás por darle estilo con CSS a este párrafo, vos solo</p>
</body>
</html>
Ejer 8 de css stylesheet.css
p{
color:green;
font-family: Garamond;
font-size:24px;
}
-----------------------------------------------------------------------------------
Lección 9
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Ya sé Kung Fu (es decir, CSS)</title>
</head>
<body>
<div>
<h3>¿Para qué sirve CSS?</h3>
<p>CSS sirve para darle estilo a las páginas de HTML</p>
<h3>¿Por qué hay que usarlo?</h3>
<p>Porque hace que las páginas web queden <span>realmente espectaculares</span>.</p>
<h3>¿Que qué me parece?</h3>
<p>¡Me parece genial!</p>
</div>
</body>
</html>
leccion9 stylesheet.css primera versión
/*Escribe tu CSS a continuación.*/
h3{
color:red;
}
p{
font-family:Courier;
}
span{
background-color:yellow;
}
¿Para qué está ese <div> ahí?
El elemento <div> (divisor) es una caja invisible. En este código, está actuando como un contenedor que envuelve a todos los títulos y párrafos.
. ¿Qué pasa si lo quitas en el ejemplo anterior?
A nivel funcional: Absolutamente nada. El navegador leerá los títulos (
<h3>) y los párrafos (<p>) exactamente igual y los mostrará en pantalla.A nivel de CSS: Si en tu archivo
stylesheet2.csstienes alguna regla que afecte a ese contenedor (por ejemplo,div { background-color: pink; padding: 20px; width: 500px; }), al quitar eldivla página perderá esos estilos (el fondo rosa, el margen interior, etc.), porque ya no habrá ningún elementodival que aplicárselos.A nivel de organización: A veces se usan los
divpara centrar todo el contenido de la web en la pantalla o para aplicarles un fondo común a varios elementos a la vez.
Si tu archivo CSS no tiene ninguna regla vinculada al div, puedes borrarlo tranquilamente y tu web se verá exactamente igual. Pero si quieres centrar todo el bloque de texto o ponerle un borde o fondo común a toda la sección de golpe, el div es muy útil para eso.
Ese código de CSS le da un diseño específico a todos los elementos <div> que haya en la página web.
Cada propiedad hace exactamente lo siguiente:
background-color: pink;Pinta el fondo de la caja deldivde color rosa.padding: 20px;Añade un espacio de relleno interior de 20 píxeles. Esto hace que el texto que está dentro no quede pegado a los bordes de la caja rosa, sino que tenga un margen bonito alrededor.width: 500px;Fija el ancho de la caja en exactamente 500 píxeles. No importa si la pantalla del ordenador es más grande, esa caja medirá siempre ese ancho.
background-color: pink; padding: 20px; width: 500px;margin:auto;
}
los elementos <div> son elementos de bloque por defecto en HTML, por lo que no necesitas declarar display: block; para que reconozcan las propiedades de caja como los márgenes automáticos (margin: auto;).
Para que margin: auto; funcione perfectamente y centre un elemento de bloque horizontalmente, lo único indispensable es que el elemento tenga un ancho (width) definido que sea menor que el de su contenedor (en tu caso, los 500px), ya que de lo contrario el bloque ocuparía todo el ancho disponible y no dejaría espacio libre para repartir a los lados.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<h3>Proyectos recientes</h3>
<p>Empecé a aprender HTML y CSS. Espero poder diseñar pronto mi propio sitio web</p>
</body>
</html>
lección 10 stylesheet.css___se llama CSS externo cuando tiene una hoja de estilos relacionada con <link.........>
Recuerda qué significa font-family: cursive; queda muy bonito
Imagina que estás diseñando una página web y quieres que un texto parezca escrito a mano, con letras fluidas, elegantes o con un estilo más informal y artístico. Para lograrlo, usas esta línea de código.
font-family: Significa "familia de fuente". Le indica al navegador qué tipo de letra o tipografía debe usar para mostrar un texto.cursive: Es el valor que le dice: "Usa una fuente de estilo cursivo o manuscrito".
h3 {
font-family: Verdana;
color: blue;
}
p {
font-family: Garamond;
font-size: 16px;
}
lección 11_comentarios en CSS /*.........................*/
COMENTARIOS EN HTML <!-- esto es un comentario en html -->
En CSS /* y */ se utilizan para escribir comentarios.
Todo lo que se encuentre entre esos símbolos será ignorado por el navegador y no afectará al diseño de la página web.
💡 ¿Para qué sirven los comentarios en CSS?
Desactivar código temporalmente: Como en nuestro ejemplo, si pones
/* color: red; */, el navegador no aplicará esa regla (por eso el texto aún no se ha puesto rojo). A esto se le suele llamar comentar código.Dejar notas o recordatorios: Puedes explicar qué hace una parte del código para ti o para otros desarrolladores.
Organizar secciones: Ayudan a dividir hojas de estilo grandes (por ejemplo:
/* --- ESTILOS DEL MENÚ --- */).
Nota importante: En HTML los comentarios se escriben de otra forma diferente (
<!-- esto es un comentario en html -->)Seguridad (Precaución): Aunque no se ven en la página, cualquier persona puede ver los comentarios en HTML si hace clic derecho y selecciona "Ver código fuente" de la página web. Por lo tanto, nunca debes poner información sensible (como contraseñas o datos personales) dentro de un comentario HTML.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<p>Ahora mi color es rojo pero me estoy por poner de color negro</p>
</body>
</html>
lección 11 css
/*p {
color:red;
}*/
(m___a____d____i_____)
Lección 12_diferentes niveles de subtítulos<H1> a <H6>
En HTML5, existen 6 niveles de encabezados o subtítulos, representados desde la etiqueta <h1> hasta la <h6>.
Sirven para estructurar el contenido de una página web en orden de importancia, jerarquía y legibilidad, tanto para los usuarios como para los motores de búsqueda (SEO).
📊 Niveles y Características
| Etiqueta | Nivel de Importancia / Jerarquía | Uso Recomendado | Tamaño por defecto (aproximado) |
| <h1> | Máxima importancia | El título principal de la página (idealmente solo uno por página). | Muy grande (~32px) |
| <h2> | Segundo nivel | Títulos de secciones principales o apartados importantes. | Grande (~24px) |
| <h3> | Tercer nivel | Subsecciones dentro de un <h2>. | Mediano (~18.72px) |
| <h4> | Cuarto nivel | Divisiones más específicas dentro de un <h3>. | Normal (~16px) |
| <h5> | Quinto nivel | Elementos de menor jerarquía o detalles particulares. | Pequeño (~13.28px) |
| <h6> | Mínima importancia | El nivel más bajo de subtítulo en la jerarquía HTML. | Muy pequeño (~10.72px) |
EJercicio 12a)__interesante, con todos los niveles de encabezados:
<!DOCTYPE html>
<html>
<head>
<title>Jerarquía de Títulos</title>
</head>
<body>
<h1>Título Principal de la Web (H1)</h1>
<h2>Sección 1: Introducción (H2)</h2>
<p>Texto introductorio de la primera sección.</p>
<h3>Subsección 1.1: Detalles (H3)</h3>
<p>Información más específica sobre el punto anterior.</p>
<h2>Sección 2: Conclusión (H2)</h2>
<p>Texto de cierre de la página web.</p>
</body>
</html>
Lección 12_b_diferentes niveles de subtítulos<H1> a <H6>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Result</title>
</head>
<body>
<h1>Cambiame por Verdana.</h1>
<h3>Cambiame por Courier.</h3>
<p>Haceme violeta.</p>
</body>
</html>
lección 12 css
h1{
font-family:Verdana;
}
h3{
font-family:Courier;
}
p{
color:purple;
}
/*soy un comentario de css*/
¡Exacto! Definición de serif y sans serif :
Verdana es sans serif (sin remates o "rabitos"): Sus trazos son limpios y rectos, perfecta para verse genial en pantallas.
Courier
es una fuente con serif: Sí tiene esos pequeños rabitos o remates en los extremos. Cuando escribes
font-family: Verdana;ofont-family: Courier;, le estás diciendo al navegador web:"Busca en el ordenador de la persona que está visitando la página una fuente que se llame Verdana (o Courier) y úsala. Si la tienes instalada, muéstrala; si no, usa la que tengas por defecto".
¿Cómo funciona en la práctica?
font-family: Verdana; ---> El navegador revisa el sistema operativo (Windows, Mac, Linux, etc.) buscando la tipografía exacta Verdana. Como es una fuente muy común y viene preinstalada en casi todas partes, la encuentra y la aplica.
font-family: Courier; ----> El navegador busca la tipografía Courier (o su versión moderna Courier New). Al encontrarla, transforma el texto para que parezca escrito con una máquina de escribir clásica.
💡 En resumen: El nombre que pones después de
font-family:es el nombre específico de la fuente que el navegador tiene que salir a buscar e instalar en la pantalla de forma automática.
Lección13 hexadecimal_bonita presentación _visitad las páginas: colores Wikipedia HTML o colorhexa
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<h1>Soy color ciruela </h1>
<h2>Soy color coral </h2>
<h3>Soy dorado </h3>
<h4>Soy verde esmeralda </h4>
<h5>Soy azul francia </h5>
<h6>Soy color lila </h6>
</body>
</html>
continúa la lección 13, parte css
h1 {
color: #8B1C62;
}
h2 {
color: #FF7256;
}
h3 {
color: #FFC125;
}
h4 {
color: #54FF9F;
}
h5 {
color: #530EE8;
}
h6 {
color: #8B668B;
}
lección14_repaso_bonita
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<h3>Una flor y otra flor celeste</h3>
<h2> del jacarandá</h2>
</body>
</html>
continúa la lección 14 ---> parte stylesheet.css
h3 {
color:#cc6666;
}
h2 {
color:#8a2be2;
}
