Os dejo un ejemplo de un formulario, podéis utilizarlo como modelo y cambiar las opciones a vuestro gusto.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<title>InformáticaESP:: Formulario</title>
/*<link rel="stylesheet" type="text/css" href="splaycss.css" /> Aquí haríamos referencia al archivo .css*/
/*<script type="text/javascript" src="funciones.js" > </script> Aquí haríamos referencia a un archivo javascript */
</head>
<body>
<div id="divcabecera">
<h1> Formulario </h1>
<p> InformáticaESP </p>
</div>
<div id="divform">
/*<form method="post" onsubmit="return validarformulario(this)" action="http://www.urldedestino.com/" > Aquí es donde enviaríamos el formulario y haríamos la validación*/
<p> Nombre:
<input type="text" name="nombre" size="15" maxlength="30" />
<br />
<br />
e-mail:
<input type="text" name="email" size="17" maxlength="35" />
<br />
</p>
<fieldset>
<legend>Edad entre:</legend>
<input type="radio" name="edad" value="nen" checked="checked" /> de 4 a 10 <br />
<input type="radio" name="edad" value="adolescente" /> de 11 a 18 <br />
<input type="radio" name="edad" value="mayor" /> mayor de 18 <br />
</fieldset>
<p>
<br />
Intereses:
<br />
<input name="Internet" value="intereses" type="checkbox" /> Internet
<input name="Leer" value="intereses" type="checkbox" /> Leer
<input name="Cine" value="intereses" type="checkbox" /> Cine
<input name="Consolas" value="intereses" type="checkbox" /> Consolas
<br />
<br />
País:
<br />
<select name="Pais">
<option value=""></option>
<option value="España">España</option>
<option value="Marruecos">Marruecos</option>
<option value="Sud America">Sud America</option>
<option value="Inglaterra">Inglaterra</option>
</select>
<br />
<br />
Idioma:
<br />
<select multiple="idioma" size="2" name="Idiomas">
<option value="Español">Español</option>
<option value="Ingles">Ingles</option>
<option value="Aleman">Aleman</option>
<option value="Frances">Frances</option>
<option value="Catalan">Catalan</option>
</select>
<br />
<br />
Consulta o comentarios:
<br />
<textarea rows="10" cols="50"></textarea>
<br />
<br />
<input type="submit" value="Enviar"/>
<input type="reset" />
</p>
</form>
</div>
</body>
</html>
Mostrando entradas con la etiqueta css. Mostrar todas las entradas
Mostrando entradas con la etiqueta css. Mostrar todas las entradas
martes, 31 de enero de 2012
viernes, 7 de octubre de 2011
Tutorial básico HTML, como crear una página web sencilla.
Vamos a iniciarnos en el mundo de la creación de páginas web, vamos a crear una muy básica con HTML y CSS.
Para empezar, para éste tutorial usaré el Rapid CSS 2007, también podéis hacerlo con un simple bloc de notas o notepad.
Abriremos un documento HTML y crearemos nuestra página, en éste caso he decidido crear una web sobre fútbol.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Esto es la cabecera del documento HTML, la podéis usar para crear otras webs-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body background="imatges\fondo.gif">
<title>LigaBBVA</title>
</head>
<!-- Aquí tenemos la cabecera de la página web, donde se declara el título, contenido, fondo de la web etc. -->
<!-- A partir de aquí empieza el cuerpo de la página, señalizado con la etiqueta body -->
<body>
<div id="divtitulo">LIGABBVA! Tu web sobre el mundo del futbol español!</div>
<div id="divlogo"><img SRC="imatges\logoliga.gif"></div>
<hr />
<div id="divclubbar">
<table width="600" border="4">
<tr><td>Equipo</td></tr>
</table>
<table width="600" border="4">
<tr>
<td colspan="2"><p align="center"><p align="center"><a href="Barcelona.htm">FC Barcelona</a>
______________________________</p></td>
<td rowspan="5"><img SRC="imatges\escudobarsa.jpg"></td>
</tr>
</table>
<table width="600" border="4">
<tr>
<td colspan="2"><p align="center"><a href="Madrid.htm">Real Madrid CF.</a>
______________________________</p></td>
<td rowspan="5"><img SRC="imatges\escudomadrid.jpg"></td>
</tr>
</table>
<table width="600" border="4">
<tr>
<td colspan="2">
<p align="center"><a href="Espanyol.htm">RCD Espanyol</a>
______________________________</p></td>
<td rowspan="5"><img SRC="imatges\espanyol.jpg"></td>
</tr>
</table>
</div> <!--divclubbar-->
<div id="divcierre">
<p>© LIGABBVA 27 Enero 2011 Davishh</p>
</div>
<!-- Los div sirven para crear bloques, cuando creas un div y dentro pones elementos, estos quedan dentro de ese bloque para que posteriormente les puedas dar estilos con la hoja de estilos CSS-->
<!--Para esta web hemos creado tablas, de ésta manera podemos situar de una forma sencilla cada elemento -->
</body>
</html>
Una vez terminada, daremos vida a lo escrito dentro de cada div, dandole un estilo propio.
Sin cerrar el html, abriremos un archivo nuevo CSS, y haremos lo siguiente:
*{
margin:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}
#divlogo{
margin-top:50px;
text-align:center;
}
#divtitulo{
margin-left:0px;
margin-top:50px;
text-align:center;
font-weight:bold;
font-size:30px;
color: white;
}
#divclubbar{
margin-left:250px;
text-align:center;
font-weight:bold;
}
#divcampnou{
margin-left:250px;
text-align:center;
font-weight:bold;
}
#divcierre{
text-align:right;
font-weight:bolt;
}
<!--Escribimos almohadilla y el nombre del div que hemos puesto en el HTML para dar estilo a cada bloque -->
Existen muchas posibles propiedades para añadir pero nosotros demomento solo usaremos estas, finalmente guardamos.
Una vez hecho esto vamos a la página HTML y en el Head pondremos lo siguiente:
<link rel="stylesheet" href="Ruta del archivo CSS" />
Aquí solo deberiamos de cambiar el url del archivo CSS y ponerlo donde lo tengais guardado vosotros, yo por ejemplo lo tengo guardado en la carpeta Estilo y lo he llamado ligacss. ( \Estilo\Ligacss.css)
El head tendrá que quedar así:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body background="imatges\fondo.gif">
<title>LigaBBVA</title>
<link rel="stylesheet" href="Estilo\ligacss.css"/>
</head>
y este es el resultado:
Espero que os sea útil.
Para empezar, para éste tutorial usaré el Rapid CSS 2007, también podéis hacerlo con un simple bloc de notas o notepad.
Abriremos un documento HTML y crearemos nuestra página, en éste caso he decidido crear una web sobre fútbol.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Esto es la cabecera del documento HTML, la podéis usar para crear otras webs-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body background="imatges\fondo.gif">
<title>LigaBBVA</title>
</head>
<!-- Aquí tenemos la cabecera de la página web, donde se declara el título, contenido, fondo de la web etc. -->
<!-- A partir de aquí empieza el cuerpo de la página, señalizado con la etiqueta body -->
<body>
<div id="divtitulo">LIGABBVA! Tu web sobre el mundo del futbol español!</div>
<div id="divlogo"><img SRC="imatges\logoliga.gif"></div>
<hr />
<div id="divclubbar">
<table width="600" border="4">
<tr><td>Equipo</td></tr>
</table>
<table width="600" border="4">
<tr>
<td colspan="2"><p align="center"><p align="center"><a href="Barcelona.htm">FC Barcelona</a>
______________________________</p></td>
<td rowspan="5"><img SRC="imatges\escudobarsa.jpg"></td>
</tr>
</table>
<table width="600" border="4">
<tr>
<td colspan="2"><p align="center"><a href="Madrid.htm">Real Madrid CF.</a>
______________________________</p></td>
<td rowspan="5"><img SRC="imatges\escudomadrid.jpg"></td>
</tr>
</table>
<table width="600" border="4">
<tr>
<td colspan="2">
<p align="center"><a href="Espanyol.htm">RCD Espanyol</a>
______________________________</p></td>
<td rowspan="5"><img SRC="imatges\espanyol.jpg"></td>
</tr>
</table>
</div> <!--divclubbar-->
<div id="divcierre">
<p>© LIGABBVA 27 Enero 2011 Davishh</p>
</div>
<!-- Los div sirven para crear bloques, cuando creas un div y dentro pones elementos, estos quedan dentro de ese bloque para que posteriormente les puedas dar estilos con la hoja de estilos CSS-->
<!--Para esta web hemos creado tablas, de ésta manera podemos situar de una forma sencilla cada elemento -->
</body>
</html>
Una vez terminada, daremos vida a lo escrito dentro de cada div, dandole un estilo propio.
Sin cerrar el html, abriremos un archivo nuevo CSS, y haremos lo siguiente:
*{
margin:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
}
#divlogo{
margin-top:50px;
text-align:center;
}
#divtitulo{
margin-left:0px;
margin-top:50px;
text-align:center;
font-weight:bold;
font-size:30px;
color: white;
}
#divclubbar{
margin-left:250px;
text-align:center;
font-weight:bold;
}
#divcampnou{
margin-left:250px;
text-align:center;
font-weight:bold;
}
#divcierre{
text-align:right;
font-weight:bolt;
}
<!--Escribimos almohadilla y el nombre del div que hemos puesto en el HTML para dar estilo a cada bloque -->
Existen muchas posibles propiedades para añadir pero nosotros demomento solo usaremos estas, finalmente guardamos.
Una vez hecho esto vamos a la página HTML y en el Head pondremos lo siguiente:
<link rel="stylesheet" href="Ruta del archivo CSS" />
Aquí solo deberiamos de cambiar el url del archivo CSS y ponerlo donde lo tengais guardado vosotros, yo por ejemplo lo tengo guardado en la carpeta Estilo y lo he llamado ligacss. ( \Estilo\Ligacss.css)
El head tendrá que quedar así:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<body background="imatges\fondo.gif">
<title>LigaBBVA</title>
<link rel="stylesheet" href="Estilo\ligacss.css"/>
</head>
y este es el resultado:
Espero que os sea útil.
Suscribirse a:
Entradas (Atom)
