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_r_d__i_____c)
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.
<!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_r_d__i________c)
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;
}
