lunes, 29 de mayo de 2017

FORMULARIOS



FORMULARIOS HTML Y CSS PARA UNA CORRECTA Y PROLIJA VISUALIZACIÓN


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Registro - iDESWEB</title>
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  width: 90%;
  margin: 0 auto;
}

header {
  text-align: center;
}

h1, h2 {
  font-family: Georgia, serif;
}

h1 {
  font-size: 3em;
}

fieldset {
  margin: 1em auto;
}

legend {
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
}

label {
  font-weight: bold;
  display: block;
}

input:focus, select:focus {
  background-color: yellow;
}

input:hover, select:hover {
  background-color: red;
}

#boton-crear {
  font-size: 2em;
  padding: 0.5em;
}

.inline {
  display: inline;
}

.centrado {
  text-align: center;
}
</style>
</head>
<body>
<header>
<h1>iDESWEB</h1>
<h2>Formulario de registro</h2>
</header>

<form action="" method="post">
<fieldset>
<legend>¿Quién eres?</legend>
<p>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" />
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" />
</p>

<p>
<label for="nombre">Correo electrónico</label>
<input type="text" name="correo" id="correo" />
</p>

<p>
<label for="dia">Fecha de nacimiento</label>
<select name="dia" id="dia">
<option>Día</option>
</select>

<select name="mes" id="mes">
<option>Mes</option>
</select>

<select name="anyo" id="anyo">
<option>Año</option>
</select>
</p>
</fieldset>

<fieldset>
<legend>¿De dónde eres?</legend>
<p>
<label for="ciudad">Ciudad</label>
<input type="text" name="ciudad" id="ciudad" />
</p>

<p>
<label for="cp">Código postal</label>
<input type="text" name="cp" id="cp" />
</p>

<p>
<label for="pais">País</label>
<select name="pais" id="pais">
<option>País</option>
</select>
</p>
</fieldset>

<fieldset>
<legend>¿Cómo quieres iniciar sesión?</legend>
<p>
<label for="nomusu">Nombre de usuario</label>
<input type="text" name="nomusu" id="nomusu" />
</p>

<p>
<label for="contrasenya">Contraseña</label>
<input type="password" name="contrasenya" id="contrasenya" />
</p>

<p>
<label for="repcontrasenya">Vuelve a escribir la contraseña</label>
<input type="password" name="repcontrasenya" id="repcontrasenya" />
</p>
</fieldset>

<fieldset>
<legend>Condiciones de registro</legend>
<p>
<label>Deseo recibir ofertas de iDESWEB</label>
<input type="radio" name="ofertas" id="ofertas1" value="1" /> 

<label for="ofertas1" class="inline">Una vez al día</label>
<input type="radio" name="ofertas" id="ofertas2" value="2" /> 

<label for="ofertas2" class="inline">Una vez a la semana</label>
<input type="radio" name="ofertas" id="ofertas3" value="3" />

 <label for="ofertas3" class="inline">Una vez al mes</label>
</p>

<p>
<input type="checkbox" name="acepto" id="acepto" />
<label for="acepto" class="inline">Acepto el acuerdo de servicios, 
la declaración de privacidad y la declaración de uso de cookies</label>
</p>
</fieldset>

<p class="centrado">
<input type="submit" value="Crear cuenta" id="boton-crear" />
</p>

</form>
</body>
</html>


FUENTE: SERGIO LUJAN MORA

Diseño elástico para paginas web



Ejemplo de Diseño elástico para encajar en cualquier tamaño de pantalla

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>H TML &amp; CSS: Curso práctico avanzado</title>
<style>
body {
  width: 60em;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

#datos, #principal {
  float: left;
  padding: 0;
  margin: 0;
}

#datos {
 width: 16em;
}

#principal {
  width: 44em;
}

#contenido {
  list-style-type: none;
  padding: 0;
}

#contenido li {
  float: left;
  width: 33%;
}
</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<div id="datos">
<h2>Datos del libro</h2>

<ul>
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>

</div>

<div id="principal">
<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta,
 no ha sido hasta los años noventa cuando, gracias a la Web, 
se ha extendido su uso por todo el mundo. En pocos años, la
 Web ha evolucionado enormemente: se ha pasado de páginas 
sencillas, con pocas imágenes y contenidos estáticos que
 eran visitadas por unos pocos usuarios a páginas complejas,
 con contenidos dinámicos que provienen de bases de datos y 
que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma
 tecnología, con el Lenguaje de marcas de hipertexto (Hypertext
 Markup Language, HTML) y con las Hojas de estilo en cascada
 (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en
 aprender a desarrollar sus propias páginas web. No son
 necesarios conocimientos previos para aprender con este
 libro, lo único que es necesario es saber utilizar un ordenador 
y saber navegar por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados 
bien diferenciados:
</p>

<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos 
generales que son necesarios para poder desarrollar 
páginas web; se explican conceptos de estructura física y 
estructura lógica (o estructura de navegación) de un sitio web.
 Se detalla cómo influye la estructura física en las URL o 
direcciones que se emplean a la hora de crear los enlaces
 de un sitio web. Pasando por el concepto de "estándar web", 
un término general que se emplea para refererirse a los 
estándares que define su funcionamiento como HTML y 
CSS, empleados para el desarrollo de las páginas web en
 el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la 
estructura básica de una página web, se explican las etiquetas 
de HTML que se utilizan para definir el texto, los enlaces,
 las listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que 
se emplea para definir el formato y la presentación de una página
 web. Se explica cómo utilizar el color, cómo definir la 
presentación del texto, de las tablas y de los formularios; 
cómo realizar transformaciones y transiciones con el fin de
 diseñar una página web.</li>
</ul>
</div>

</body>
</html>



Fuente: Sergio Luján Mora

Maquetación de una página web



Ejemplo del correcto uso de márgenes y selección del ancho de página.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HT ML &amp; CSS: Curso práctico avanzado</title>
<style>
body {
  width: 960px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

#datos, #principal {
  float: left;
  padding: 0;
  margin: 0;
}

#datos {
 width: 260px;
}

#principal {
  width: 700px;
}

#contenido {
  list-style-type: none;
  padding: 0;
}

#contenido li {
  float: left;
  width: 33%;
}
</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<div id="datos">
<h2>Datos del libro</h2>

<ul>
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>

</div>

<div id="principal">
<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, 
no ha sido hasta los años noventa cuando, gracias a la Web, se 
ha extendido su uso por todo el mundo. En pocos años, la Web
 ha evolucionado enormemente: se ha pasado de páginas sencillas, 
con pocas imágenes y contenidos estáticos que eran visitadas
 por unos pocos usuarios a páginas complejas, con contenidos 
dinámicos que provienen de bases de datos y que son visitadas 
por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma
tecnología, con el Lenguaje de marcas de hipertexto (Hypertext
 Markup Language, HTML) y con las Hojas de estilo en cascada
 (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en
 aprender a desarrollar sus propias páginas web. No son
 necesarios conocimientos previos para aprender con este libro,
 lo único que es necesario es saber utilizar un ordenador y saber
 navegar por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien 
diferenciados:
</p>

<ul id="contenido">
<li>En la primera parte del libro se trabajan conceptos generales
 que son necesarios para poder desarrollar páginas web; se
 explican conceptos de estructura física y estructura lógica (o
 estructura de navegación) de un sitio web. Se detalla cómo
 influye la estructura física en las URL o direcciones que se
 emplean a la hora de crear los enlaces de un sitio web. Pasando
 por el concepto de "estándar web", un término general que se
 emplea para refererirse a los estándares que define su 
funcionamiento como HTML y CSS, empleados para el 
desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la
 estructura básica de una página web, se explican las etiquetas 
de HTML que se utilizan para definir el texto, los enlaces, las 
listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje
 que se emplea para definir el formato y la presentación de una
 página web. Se explica cómo utilizar el color, cómo definir
 la presentación del texto, de las tablas y de los formularios; 
cómo realizar transformaciones y transiciones con el fin de 
diseñar una página web.</li>
</ul>
</div>

</body>
</html>




Fuente: Sergio Luján Mora

domingo, 28 de mayo de 2017

Relleno, márgenes, bordes y padding.



Ejemplo de estilos para cajas. BOX.




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
body {
  padding-left: 10px;
  padding-right: 10px;
}

h1 {
  border: 2px solid #00F;
  padding: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
}

h2 {
  border: 2px solid #AAA;
  padding: 5px;
  margin-top: 15px;
  margin-bottom: 15px;
}

ul {
  border: 2px solid #0F0;
}

li {
  margin-bottom: 0;
}

li + li {
  margin-top: 15px;
}
</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ulid="datos">
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, 
no ha sido hasta los años noventa cuando, gracias a la Web, se
 ha extendido su uso por todo el mundo. En pocos años, la Web
 ha evolucionado enormemente: se ha pasado de páginas
 sencillas, con pocas imágenes y contenidos estáticos que
 eran visitadas por unos pocos usuarios a páginas complejas,
 con contenidos dinámicos que provienen de bases de datos 
y que son visitadas por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma
 tecnología, con el Lenguaje de marcas de hipertexto
 (Hypertext Markup Language, HTML) y con las Hojas de
 estilo en cascada (Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés 
en aprender a desarrollar sus propias páginas web. No son 
necesarios conocimientos previos para aprender con este libro, 
lo único que es necesario es saber utilizar un ordenador y
 saber navegar por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien
 diferenciados:
</p>

<ulid="contenido">
<li>En la primera parte del libro se trabajan conceptos generales 
que son necesarios para poder desarrollar páginas web; 
se explican conceptos de estructura física y estructura lógica
 (o estructura de navegación) de un sitio web. Se detalla cómo 
influye la estructura física en las URL o direcciones que se 
emplean a la hora de crear los enlaces de un sitio web. Pasando 
por el concepto de "estándar web", un término general que se 
emplea para refererirse a los estándares que define su
 funcionamiento como HTML y CSS, empleados para el
 desarrollo de las páginas web en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la 
estructura básica de una página web, se explican las etiquetas 
de HTML que se utilizan para definir el texto, los enlaces, las
 listas, las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que
 se emplea para definir el formato y la presentación de una
 página web. Se explica cómo utilizar el color, cómo definir
 la presentación del texto, de las tablas y de los formularios; 
cómo realizar transformaciones y transiciones con el fin de
 diseñar una página web.</li>
</ul>
</body>
</html>

Bordes


Ejemplo de empleo de BORDES


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML &amp; CSS: Curso práctico avanzado</title>
<style>
h1 {
  border-bottom: 2px solid #00F;
}

h2 {
  border: 2px solid #AAA;
}

#datos {
  border-top: 4px dotted #F00;
  border-bottom: 4px dotted #F00;
}

#contenido {
  border: 2px dashed #0F0;
}
</style>
</head>
<body>
<h1>HTML &amp; CSS: Curso práctico avanzado</h1>

<h2>Datos del libro</h2>

<ulid="datos">
<li>Título: HTML &amp; CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Luján Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>


<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, 
no ha sido hasta los años noventa cuando, gracias a la Web, se 
ha extendido su uso por todo el mundo. En pocos años, la Web ha 
evolucionado enormemente: se ha pasado de páginas sencillas, 
con pocas imágenes y contenidos estáticos que eran visitadas
 por unos pocos usuarios a páginas complejas, con contenidos 
dinámicos que provienen de bases de datos y que son visitadas 
por miles de usuarios al mismo tiempo.
</p>

<p>
Todas las páginas están internamente construidas con la misma
 tecnología, con el Lenguaje de marcas de hipertexto (Hypertext 
Markup Language, HTML) y con las Hojas de estilo en cascada 
(Cascading Style Sheets, CSS).
</p>

<p>
Este libro es adecuado para cualquiera que tenga interés en 
aprender a desarrollar sus propias páginas web. No son necesarios 
conocimientos previos para aprender con este libro, lo único 
que es necesario es saber utilizar un ordenador y saber navegar 
por la Web.
</p>


<h2>Contenido del libro</h2>

<p>
El contenido de este libro se estructura en tres apartados bien
 diferenciados:
</p>

<ulid="contenido">
<li>En la primera parte del libro se trabajan conceptos generales
 que son necesarios para poder desarrollar páginas web; se explican 
conceptos de estructura física y estructura lógica (o estructura 
de navegación) de un sitio web. Se detalla cómo influye la
 estructura física en las URL o direcciones que se emplean a la
 hora de crear los enlaces de un sitio web. Pasando por el concepto
 de "estándar web", un término general que se emplea para 
refererirse a los estándares que define su funcionamiento como
 HTML y CSS, empleados para el desarrollo de las páginas web 
en el lado del cliente.</li>

<li>En la segunda parte se trabaja HTML. Partiendo de la
 estructura básica de una página web, se explican las etiquetas 
de HTML que se utilizan para definir el texto, los enlaces, las listas,
 las tablas, los formularios y los elementos multimedia.</li>

<li>En la tercera y última parte se explica CSS, el lenguaje que
 se emplea para definir el formato y la presentación de una página 
web. Se explica cómo utilizar el color, cómo definir la presentación
 del texto, de las tablas y de los formularios; cómo realizar 
transformaciones y transiciones con el fin de diseñar una página 
web.</li>
</ul>
</body>
</html>

jueves, 25 de mayo de 2017

Cómo se define la presentación de los elementos de una página web



EJEMPLO PARA DEFINIR UNA PRESENTACIÓN DE LOS ELEMENTOS DE UN SITIO WEB

  • El tipo de letra de la página es Arial, con el tipo de respaldo Verdana.
  • El encabezado de nivel 1 utiliza el tipo de letra Georgia, con un tamaño de letra de 32 px y en versalitas.
  • El encabezado de nivel 2 utiliza el tipo de letra Georgia, con un tamaño de letra de 24 px, en cursiva y en versalitas.
  • Los títulos de los elementos de las listas aparecen en negrita.
  • El contenido de los elementos de las listas, aunque están etiquetados como <strong>, no se visualizan en negrita.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Curriculum Vitae de Bruce Wayne</title>
<style>
body {
  font-family: Arial,Verdana,sans-serif;
}

h1 {
  font-family: Georgia,Times,serif;
  font-size: 32px;
  font-variant: small-caps;
}

h2 {
  font-family: Georgia,Times,serif;
  font-size: 24px;
  font-style: italic;
  font-variant: small-caps;
}

li  {
  font-weight: bold;
}

strong {
  font-weight: normal;
}
</style>
</head>
<body>

<h1>Curriculum Vitae de Bruce Wayne</h1>

<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>

<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>

<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>

</body>
</html>


FUENTE_ ACTIVATE GOOGLE SERGIO LUJAN MORA

Resaltar cuando el raton se sitúe encima de un elemento de menú






Efecto cuando el cursor del ratón se sitúe encima de un elemento del menú o cuando un elemento del menú reciba el foco del teclado: se debe mostrar un borde sólido de color rojo.




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Página web con menú</title>
<style>
ul {
  list-style-type: none;
  text-align: center;
  /* Suficiente anchura para que quepa "Presentación" */
  width: 120px;
  padding: 0;
}

li {
  background-color: #00F;
  color: #FFF;
  /* El borde blanco separa los elementos */
  border: 2px solid #FFF;
}

li a {
  color: #FFF;
  text-decoration: none;
  /* Necesario para que el enlace ocupe todo el ancho del elemento  de la lista */
  display: block;
  width: 100%;
}

/* Efecto cuando se situa el ratón encima de un elemento de la lista o cuando recibe el foco del teclado */
li a:hover, li a:focus {
 /* ¿Qué pasa si se utiliza la propiedad border */
  outline: 2px solid #F00;
}
</style>
</head>
<body>
<h1>Universidad de Alicante</h1>

<ul>
<li><a href="">Presentación</a></li>
<li><a href="">Estudios</a></li>
<li><a href="">Alumnos</a></li>
<li><a href="">Deportes</a></li>
<li><a href="">Servicios</a></li>
</ul>
</body>
</html>





Fuente: Sergio Lujan Mora, Activate

CSS - LISTAS CON ESTILOS




EJEMPLO DE REGLAS CSS EN LISTAS CON IDENTIFICADORES

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de listas</title>
<style>
.lista-sin {
  list-style-type: none;
}

.lista-circulos {
  list-style-type: circle;
}

.lista-cuadrados {
  list-style-type: square;
}

.lista-romanos {
  list-style-type: lower-roman;
}

.lista-griegos {
  list-style-type: lower-greek;
}
</style>
</head>
<body>
<p>Lista sin elemento gráfico:</p>
<ul class="lista-sin">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con círculos:</p>
<ul class="lista-circulos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con cuadrados:</p>
<ul class="lista-cuadrados">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con números romanos:</p>
<ol class="lista-romanos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

<p>Lista con letras griegas:</p>
<ol class="lista-griegos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>