Parte 5_HTML5_CSS_REPASO +++carpeta_20_20_formularios_Y CLASES
Parte 2_Lección 1_(repaso)
Quizás
ya adivinaste esta parte, pero si no, vamos a decirla de una vez:
¡cualquier elemento de HTML puede ser un selector de CSS! Podéis
modificar las <ul>, <table>,
e incluso la etiqueta <body> completa,
seleccionando ul, table,
y body,
respectivamente.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title></title>
</head>
<body></body>
</html>
parte 2 lección 1 stylesheet.css
body{
background-color:black;
}
parte 2_lección 2_repaso:
En
la pestaña CSS, selecciona únicamente el encabezado h3 anidado
dentro de tres <div> y
cámbiale su color a rojo.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Result</title>
</head>
<body>
<h3>Soy una simple letra antigua</h3>
<div>
<h3>Y yo también</h3>
<div>
<h3>¿y yo?</h3>
<div>
<h3>¡Olvídense! ¡Estoy a punto de ser roja!</h3>
</div>
</div>
</div>
</body>
</html>
Lección2 parte segunda stylesheet.css
div div div h3{
color:red;
}
parte segunda_lección 3
Usa el selector universal para colocar un borde azul punteado de
valor 1px
dashed blue alrededor
de cada elemento de la página. ¿Ves cómo cada elemento parece
estar dentro de su propia caja en la página? Esto es parte del
"modelo de caja" de HTML/CSS, que veremos en la siguiente
lección.
El selector universal (*) no solo selecciona los div y los p, sino que aplica esa regla a absolutamente todos los elementos que existan dentro del documento HTML (incluyendo html, head, body, title, etc., aunque algunos no muestren bordes visibles por defecto).
En este programa específico, lo que hace es:
Efecto en el documento
Borde a todos los elementos: Dibuja un borde de 1 píxel, con línea punteada (dashed) y de color azul alrededor de cada caja o etiqueta HTML presente en la página.
Visualización de la estructura: Permite ver cómo se anidan las cajas. Verás un borde azul grande para el
body, bordes alrededor de cada uno de los tresdiv, y bordes alrededor de cada uno de los párrafos (p) que están dentro de losdiv.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>Resultado</title>
</head>
<body>
<h3>Cajas dentro de cajas</h3>
<div>
<p>Párrafo uno</p>
</div>
<div>
<p>Párrafo dos</p>
</div>
<div>
<p>Párrafo tres</p>
</div>
</body>
</html>
parte segunda lección 3 stylesheet
*{
border: 1px dashed blue;
}
Lección 2 de la parte 2ª
Selectores múltiples
Como ya viste, es posible anidar elementos HTML dentro de otros, así:
<div>
<div>
<p>¡Me gustan las empanadas!</p>
¿Y
si queréis enfocaros en las <p> que
están dentro de dos <div>,
y no en todas las <p>?
Podéis seleccionarlas en la pestaña CSS de esta forma:
div div p {
/*¡Lo de CSS!*/
}
Carpeta 20_20 ejercicio 1_input_formularios
<!DOCTYPE html>
<html>
<head>
<title>Entrada de texto </title>
</head>
<body>
<p style="font-size:30px;">Formularios</p>
<form >
Nombre: <input type = "text" name = "nombre_pila" />
<br>
Apellidos: <input type = "text" name = "apellidos" />
<br>
Clave: <input type = "password" name = "clave_usuario" />
<br>
Detalles:<br>
<textarea rows ="6" cols="40" name="detalles_usuario">Ingrese los detalles aquí</textarea>
<br>
<input type="checkbox" name="patatas" > Me gustan las patatas
<br>
<input type="checkbox" name="tomates" > Me gustan los tomates
<br>
<input type="radio" name="sabores" value="salado"> Me gusta el salado
<input type="radio" name="sabores" value="dulce"> Me gusta el dulce
<input type="radio" name="sabores" value="amargo"> Me gusta el amargo
<br>
<select name="tratamiento">
<option value="sra" >Señora</option>
<option value="sr" >Señor</option>
<option value="otr" selected >Otro</option>
</select>
</form>
</body>
</html>
EXPLIcación:
Explicación parte por parte:
<!DOCTYPE html>Es la declaración del tipo de documento. Le indica al navegador que estamos utilizando HTML5.
<head>y<title>Configuran los metadatos de la página. El
<title>define el texto que aparece en la pestaña del navegador ("Entrada de texto").
<p style="font-size:30px;">Formularios</p>Un párrafo con estilo en línea (
style="...") para hacer el texto más grande.
-
<form>El contenedor principal de cualquier formulario. En este caso no tiene atributos comoactionomethodporque es puramente visual/didáctico, pero en una aplicación real serviría para enviar los datos a un servidor. Los campos de texto y contraseña (
<input>)type="text": Crea cajas de texto de una sola línea para el nombre y los apellidos.type="password": Oculta los caracteres con asteriscos o puntos para proteger la clave.name="...": Identifica cada campo para que, al enviar el formulario, el servidor sepa qué dato es cuál.
El área de texto (
<textarea>)Permite escribir textos largos (multilínea). Los atributos
rowsycolsdefinen su tamaño inicial en filas y columnas.
Casillas de verificación (
checkbox) y botones de opción (radio)type="checkbox": Permite seleccionar múltiples opciones independientes ("Me gustan las patatas", "Me gustan los tomates").type="radio": Permiten elegir una sola opción de un grupo. Nota cómo todos comparten el mismoname="sabores", lo que hace que el navegador entienda que forman parte del mismo grupo y desmarque uno si marcas otro.
Menú desplegable (
<select>y<option>)Crea una lista desplegable. El atributo
selecteden la opción "Otro" indica que esa será la opción seleccionada por defecto al cargar la página.
Ejercicio 14_de carpeta 20_20 con listas de distintos tipo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Página Nueva</title>
<!-- CSS interno (Cascade Style Sheet)-->
<style>
table,th,td {
border: 1px solid black; /* Borde de 1 pixel solido negro, otro podria ser, 2px dashed red*/
text-align:center;
}
table {
border-collapse: separate;
}
</style>
</head>
<body>
<table>
<tr>
<th>Cosa</th> <th>Precio</th>
</tr>
<tr>
<td>Patata</td> <td>1€</td>
</tr>
<tr>
<td>Tomate</td> <td>0.5€</td>
</tr>
</table>
<br>
<table>
<tr>
<th>Hora</th>
<th>Temperatura</th>
</tr>
<tr>
<td>12:00</td>
<td>22c</td>
</tr>
<tr>
<td>14:00</td>
<td>17c</td>
</tr>
</table>
<p>Esto es un p, pero puedo hacerlo mas grande que un h1 </p>
<h1>Este es un h1 (encabezado) "h1 - Header 1"</h1>
<a href="https://es.wikipedia.org/wiki/James_Stewart" target="_blank">Acceso a Página de James Stewart</a>
<!-- Ordered List - Ordenada con números-->
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ol>
<!-- Unordered List Sin ordenar, con "bullets" delante-->
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</body>
</html>
EJERCICIO 7__con clases
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CSS interno (Cascade Style Sheet)-->
<style>
h1 {color:red;
background-color: #00ff00;
font-size: 80px;
}
#grandes {color:blue; font-size:60px}
#medianos {color:green; font-size:40px;}
.con-fondo {background-color: lightblue;}
</style>
</head>
<body>
<h1>Este es un h1 (encabezado) "h1 - Header 1"</h1>
<p class="con-fondo" style="font-size:40px;">Esto es un texto</p> <!-- CSS "en linea" -->
<h1>Este es otro h1"</h1>
<p class="con-fondo" id="grandes">Este texto es del color que tenga el selector grandes (letra grande y azul)</p>
<p id="medianos">Este texto es del color que tenga el selector medianos (letra mediana y verde)</p>
</body>
</html>
Ejercicio con CSS subrayado con clases:
<!DOCTYPE html>
<!-- html Boilerplate -->
<html lang="es">
<head>
<meta charset= "UTF-8">
<title> Ejemplos CSS</title>
<style>
.tachado {
text-decoration:line-through; /* esto es efecto tachado*/
}
.subrayado {
text-decoration:underline; /* esto es efecto subrayado*/
}
.rayaEncima {
text-decoration:overline; /* esto es efecto sobre_subrayado*/
}
.dobleraya {
text-decoration:underline overline ; /* esto es efecto subrayado encima y debajo*/
}
</style>
</head>
<body>
<h1>Este es el encabezado con h1</h1>
<p>Este es un párrafo con p</p>
<p>
<span class="subrayado">Londres</span>, la capital de Inglaterra y del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la
época romana. En su centro se alzan el imponente <span class="tachado" >Palacio del Parlamento</span>, la torre del icónico reloj "Big Ben"
y la <i class="dobleraya">Abadía de Westminster</i>, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis,
la rueda de observación <b class="rayaEncima ">London Eye</b> ofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad
</p>
</body>
</html>
Ejercicio font-weight y clases
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset= "UTF-8">
<title> Ejemplos CSS</title>
<style>
.negrita {
font-weight:bold; /* Puede ser también un valor numérico entre 100 y 900*/
/* Los valores en código son: normal, bold, bolder, lighter*/
}
.masnegrita {
font-weight:bolder;
}
.cursiva {
font-style: italic; /* hay otro que es oblique */
}
</style>
</head>
<body>
<h1>Este es el encabezado con h1</h1>
<p>Este es un párrafo con p</p>
<p>
<span class="negrita">Londres, la capital de Inglaterra</span> y del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la
época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"
y la <span class="masnegrita">Abadía de Westminster</span>, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis,
la rueda de observación <span class="cursiva">London Eye</span> ofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad
</p>
</body>
</html>
CSS ALIGN STYLE
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset= "UTF-8">
<title> Ejemplos CSS</title>
<style>
.justificado {
text-align:justify;
}
.centrado {
text-align:center;
}
.izquierda {
text-align:left;
}
.derecha {
text-align:right;
}
</style>
</head>
<body>
<h1>Este es el encabezado con h1</h1>
<p>Este es un párrafo con p</p>
<p class="justificado">
Justificado<br>
Londres, la capital de Inglaterray del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la
época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"
y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis,
la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad
</p>
<hr>
<p class="centrado" >
Centrado<br>
Londres, <span style="font-family:'Times New Roman', Times, serif">la capital de Inglaterra</span> y del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la
época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"
y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis,
la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad
</p>
<hr>
<p class="izquierda">
Izquierda<br>
Londres, <span style="font-family:Arial, Helvetica, sans-serif">la capital de Inglaterra</span> del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la
época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"
y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis,
la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad
</p>
<hr>
<p class="derecha">
Derecha<br>
Londres, la capital de Inglaterray del Reino Unido, es una ciudad del siglo XXI con una historia que se remonta a la
época romana. En su centro se alzan el imponente Palacio del Parlamento, la torre del icónico reloj "Big Ben"
y la Abadía de Westminster, lugar de las coronaciones monárquicas británicas. Al otro lado del río Támesis,
la rueda de observación London Eyeofrece vistas panorámicas del complejo cultural South Bank y de toda la ciudad
</p>
<hr>
</body>
</html>
