martes, 19 de julio de 2016

02. CSS Divs y Clases

Desde CSS podremos llamar a etiquetas HTML, Divs y Clases, para dar formato a cualquier parte de nuestro documento HTML.


El codigo del archivo divyclases.HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/divyclases.css">
<title>
Pruebas con div y clases
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Esto es el primer encabezado</h1>
</hgroup>
<p>Este es el primer parrafo para probar CSS</p>
<div id="segundodiv">
<p>Este es el segundo parrafo para probar CSS</p>
</div>
<p class="terceraclase">Este es el tercero parrafo para probar CSS</p>
<p>Este es el cuarto parrafo para probar CSS</p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
El codigo de la hoja de estilos divyclases.CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:blue;
}
p{
    font-size:35px;
    color:green;
}
#segundodiv p{
    color:yellow;
    background-color:green;
}
.terceraclase{
    color:red;
    background-color:yellow;
    font-size:45px;
}
Para cualquier duda podeis contactar conmigo.
En el video uso el editor NOTEPAD++.
Espero os sea util y no olvideis practicar. Gracias.

CSS. Toma de contacto

Video en el que se explica como empezar con CSS, manteniendo el archivo de formato aparte del codigo HTML.


El codigo del archivo tomadecontacto.HTML es:

<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/tomadecontacto.css">
<title>
Toma de contacto con CSS
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Esto es el primer encabezado</h1>
</hgroup>
<p>Este es el primer parrafo para probar CSS</p>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
El codigo de la hoja de estilos tomadecontacto.CSS es:

/*Comentario de CSS*/
/*selector universal*/
*{
    background-color:blue;
}
Espero os sea util. Gracias.

Html5 - 17. Formulario 2

Volvemos a retomar la etiqueta form de html, en este caso añadimos la etiqueta date, que proporciona un desplegable mostrando el calendario para elegir fecha, en principio le damos un valor que puede modificarse.
<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Formulario</title>
</head>
<body>
<header>
<h1>Formulario</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<h1>Mi Formulario</h1>
<form>
<label>Nombre:</label>
<input type="text" placeholder="nombre" required/>
<label>Telefono:</label>
<input type="number" placeholder="954358864"/>
<label>Fecha Nacimiento:</label>
<input type="date" value="2016-07-12"/>
<button type="submit">Guardar</button>
</article>
</form>

</section>

<aside>
<h1>Siguenos en:</h1><ul>
<li><a href="facebook.html">Facebook</a>
</li>
<li><a href="twitter.html">Twitter</a></li>
</ul>
</aside>
<footer>

<p>Pagina creada por Ticoticotaa @2016</p>

<ul>
<li><a href="contacto.html">Contacto</a>
</li>
<li><a href="mapaweb.html">Mapa Web</a></li>
</ul>
</footer>
</body>
</html>
El atributo placeholder hace que aparezca un ejemplo del valor requerido (mas atenuado) para que sirva de guia al usuario de la web.
Tambien aparece la etiqueta label que genera el nombre que aparece como etiqueta del campo a insertar.
Espero sea util, gracias,