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.
Publicado por en No hay comentarios:
Etiquetas: , , , ,

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.

Publicado por en No hay comentarios:
Etiquetas: , , , , ,

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,
Publicado por en No hay comentarios:
Etiquetas: , , , , , ,

lunes, 30 de mayo de 2016

Plantilla basica HTML5 con CSS

Os indico codigo basico HTML5 desde donde comenzar a modificar para crear nuestros propios archivos, segun los puntos vistos hasta ahora en este blog.
El codigo de partida HTML5 es:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo Html5">
<meta name="keywords" content="HTML5, CSS">
<title>Plantilla de html5</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header>
<h1>Titulo principal de la web</h1>
</header>
<nav>
<ul>
<li>inicio</li>
<li>acerca de</li>
<li>contacto</li>
<li>blog</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Titulo primer mensaje</h1>
<h2>Subtitulo del primer mensaje</h2>
</hgroup>
</header>
<p>Texto del primer mensaje</p>
<figure>
<img src="#" alt="imagen">
<figcaption>Imagen del primer mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie primer mensaje</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Titulo segundo mensaje</h1>
<h2>Subtitulo del segundo mensaje</h2>
</hgroup>
</header>
<p>Texto del segundo mensaje</p>
<figure>
<img src="#" alt="imagen2">
<figcaption>Imagen del segundo mensaje</figcaption>
</figure>
<footer>
<p>comentarios pie segundo mensaje</p>
</footer>
</article>
</section>
<aside>
<blockquote>Cita en barra lateral</blockquote>
</aside>
<footer><p>Derechos reservados 2016</p></footer>
</body>
</html>
El codigo basico de la hoja de estilos o CSS (estilo.css) seria asi:
 *{
    margin: 0 auto;
    max-width:960px;
}
header h1{

    background-color: grey;
    margin:10px;  
}
nav {
  
}
section{
    float:left;
    width: 70%;
    padding: 5px;
}
aside {
    float:right;
    width: 25%;
    padding: 5px;
    background-color: grey;
    border-radius: 15px 20px;
}
footer{
    clear:both;
    width: 100%;
    padding: 5px;
    margin: 5px;
    background-color: grey;
    border-radius: 15px 20px;
}
 Con lo que obtendriamos la siguiente web:

Que es el punto de partida para comenzar a desarrollar nuestra web, sirviendo como ejemplo al que poder modificar o añadir todo lo que se nos ocurra.
Espero os sea util. Gracias.
Publicado por en No hay comentarios:
Etiquetas: , , , , ,

miércoles, 27 de abril de 2016

Html5- 16. Etiqueta Code

Ejemplo de etiqueta "code" en html5, con dicha etiqueta marcamos partes del documento que hacen referencia a codigo para que se muestre con otro formato al texto normal y pueda resaltar.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Etiqueta code</title>
</head>
<body>
<header>
<h1>Etiqueta code</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>
<p>En php usamos el comando <code>include("contador.php");</code> para insertar codigo de otro archivo en el documento donde lo incluimos ...</p>
</article>
</section>
<footer>
</footer>
</body></html>
Dentro de la etiqueta "code" incluimos el texto de ejemplo para que se muestre con otro formato, distinto al del parrafo.
Espero os sea util. Gracias.



Publicado por en No hay comentarios:
Etiquetas: , , , ,

jueves, 21 de abril de 2016

Html5 - 15. Atributo Start y reversed en listas

Expongo en esta entrada el atributo "start" con el que podemos indicar que una lista empieze a numerarse desde el numero indicado con este atributo.
Para ver un ejemplo, retomamos la plantilla web que hemos creado en los apartados anteriores, modificando el "article" principal:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="hojadeestilo.css">
<title>Atributo start / reversed</title>
</head>
<body>
<header>
<h1>Start y reversed en listas</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>
<h2>Lista desde el principio</h2>
    <ol>
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ol>
<h2>Lista desde el numero cinco</h2> 
  <ol start="5">
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ol>
<h2>Lista numerada al reves</h2> 
  <ol reversed>
      <li>Uno</li>
      <li>Dos</li>
      <li>Tres</li>
    </ol>
</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>
Incluyo 2 listas una sin el atributo start y la otra con el valor de start = 5, por lo que esta segunda lista se empieza a numerar desde 5.
El atributo "reversed" hace que la lista se numere al reves, de mayor a menor, puede combinarse con "start".
Esperando sea util, gracias.
Publicado por en No hay comentarios:
Etiquetas: , ,

jueves, 14 de abril de 2016

Html - Terminacion plantilla - video 06

En este video se termina de preparar la plantilla para nuestro sitio web.



Publicado por en No hay comentarios:
Etiquetas: ,
Suscribirse a: Entradas (Atom)