LENGUAJE
DE
MARCAS
APUNTES
Apuntes HTML
Una pagina web se compone de varias parte, dentro de las cuales se mete el contenido, dentro de HEAD es donde van las
especificaciones de la pagina y el titulo de la misma (el nombre que nos muestra el Navegador en su barra) y dentro de BODY
metemos todo el contenido de la pagina, seria algo así (En azul los comentarios que se pueden poner dentro de la pagina pero
que el Navegador web no muestra):
<!--la siguiente linea indica el estandar que utilizamos en la pagina, el html 4 estricto-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--la siguiente linea, le dice al navegador que use el conjunto de caracteres europeo occidental, el nuestro-->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
<title>"Aquí el nombre de la pagina"</title>
</head>
<body>
"Aquí va el contenido, Texto, fotos, videos, Formularios, etc.
<!--Para validar la pagina, vamos a http://validator.w3.org/#validate_by_upload+with_options
y una vez validada nos da el codigo que se pega a continuacion-->
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-
html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a></p>
</body>
</html>
Los Formularios
<!--la siguiente linea indica el estandar que utilizamos en la pagina, el html 4 estricto-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--la siguiente linea, le dice al navegador que use el conjunto de caracteres europeo occidental, el nuestro-->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
<title>Formularios HTML</title>
</head>
<body>
<!--Para poner encabezados o titulares que destaquen (texto mayor y en negrita) se usa <h1> hasta <h5> y
<H6>--
>
<h1> Ejercicio Formularios </h1>
<p><br></p>
<!--Para poner un formulario y que nos envie el resultado a una cuenta de correo, pondriamos lo siguiente-->
<form action="mailto:
[email protected]" method="post">
<!--La caja donde se introducen los datos seria con input type="text" con size el tamaño de la
caja y con maxlength el limite de caracteres, en este tipo de comandos no hay etiqueta de final, para XHTML
se usaria lo mismo pero con espacio y / al final, seria <input type="text" name="usu" size="10"
maxlength="15" />-->
<p>
Teclee su nombre:
<input type="text" name="usu" size="10" maxlength="15">
</p>
<!--Cuando queremos que dentro del cuadro donde vamos a escribir el nombre, se visualice un texto lo
hacemos como value="texto",de la siguiente manera-->
<p>
Teclee su nombre:
<input type="text" name="usu" size="10" maxlength="15" value="Dña">
</p>
<!--cuando queremos meter un dato tipo contraseña, que quede oculto al meterlo se pone con
"password"-->
<p>
Teclee su clave:
<input type="password" name="pas" size="10" maxlength="10">
</p>
<!--cuando queremos preguntar por varias opciones y que se marquen, usamos type="checkbox"-->
<p>
Selecciona los Lenguajes que conoces: <br>
<input type="checkbox" name="java"> Java <br>
<input type="checkbox" name="html"> Html <br>
<input type="checkbox" name="Cobol"> Cobol <br>
<input type="checkbox" name="Pascal"> Pascal <br>
</p>
<!--cuando queremos que ya haya alguna opcion marcada, teniendo como referencia el ejemplo
anterior, añadimos checked a la que queremos que este marcada-->
<p>
Selecciona los Lenguajes que conoces: <br>
<input type="checkbox" name="java"> Java <br>
<input type="checkbox" name="html" checked="checked"> Html <br>
<input type="checkbox" name="Cobol"> Cobol <br>
<input type="checkbox" name="Pascal"> Pascal <br>
</p>
<!--cuando solo queremos que se marque una opcion, usamos type="radio" en name se pone lo mismo
en todos y en value numeramos de 1 a los que haya-->
<p>
Selecciona tu nivel maximo de Estudios: <br>
<input type="radio" name="nivel" value="1"> Sin Estudios <br>
<input type="radio" name="nivel" value="2"> Bachiller <br>
<input type="radio" name="nivel" value="3"> Grado Medio <br>
<input type="radio" name="nivel" value="4"> Grado superior <br>
<input type="radio" name="nivel" value="5"> Universitario <br>
</p>
<!--siguiendo el ejemplo anterior, Si queremos que haya una opcion marcada por defecto
añadiriamos checked-->
<p>
Selecciona tu nivel maximo de Estudios: <br>
<input type="radio" name="nivel" value="1"> Sin Estudios <br>
<input type="radio" name="nivel" value="2" checked="checked"> Bachiller <br>
<input type="radio" name="nivel" value="3"> Grado Medio <br>
<input type="radio" name="nivel" value="4"> Grado superior <br>
<input type="radio" name="nivel" value="5"> Universitario <br>
</p>
<!--siguiendo el ejemplo anterior, Si queremos que una opcion no se pueda marcar usamos
disabled="disabled", vale tambien para el resto de formularios-->
<p>Selecciona tu nivel maximo de Estudios: <br>
<input type="radio" name="nivel" value="1" disabled="disabled"> Sin Estudios <br>
<input type="radio" name="nivel" value="2" checked="checked"> Bachiller <br>
<input type="radio" name="nivel" value="3"> Grado Medio <br>
<input type="radio" name="nivel" value="4"> Grado superior <br>
<input type="radio" name="nivel" value="5"> Universitario <br>
</p>
<!--cuando solo queremos que nos de una seleccion desplegable, usamos la etiqueta <select
name="texto"> y despues con la etiqueta <option value="1"> texto </option> y de estos tantos
como queramos poner, finalizamos con </select>-->
<p>Elige tu color favorito</p>
<p><select name="Color">
<option value="1"> Amarillo </option>
<option value="2"> Rojo </option>
<option value="3"> Naranja </option>
<option value="4"> Verde </option>
<option value="5"> Azul </option>
</select></p>
<!--cuando queremos que en la seleccion desplegable se diferencien grupos, usamos la etiqueta
<optgroup label="texto"> antes de la etiqueta option-->
<p>Elige tu plato preferido</p>
<p><select name="pla" size="1">
<optgroup label="Carnes">
<option value="1"> Entrecot </option>
<option value="2"> Chuleta </option>
<option value="3"> Solomillo </option>
<option value="4"> San Jacobo </option>
<option value="5"> Cordero </option>
</optgroup>
<optgroup label="Pescados">
<option value="6"> Salmon </option>
<option value="7"> Rodaballo </option>
<option value="8"> Merluza </option>
<option value="9"> Sardinas </option>
<option value="10"> Atun </option>
</optgroup>
<optgroup label="Postres">
<option value="11"> Helado </option>
<option value="12"> Hojaldre </option>
<option value="13"> Fruta </option>
<option value="14"> Pastel </option>
<option value="15"> Flan </option>
</optgroup>
</select></p>
<!--cuando queremos que en la seleccion desplegable, podamos seleccionar mas de una
opcion, añadimos multiple a la etiqueta: <select name="pla" size="10" multiple="multiple">-->
<p>Elige tus platos preferidos (Para elegir mas de uno manten pulsada la tecla Ctrl)</p>
<p><select name="pla" size="10" multiple="multiple">
<optgroup label="Carnes">
<option value="1"> Entrecot </option>
<option value="2"> Chuleta </option>
<option value="3"> Solomillo </option>
<option value="4"> San Jacobo </option>
<option value="5"> Cordero </option>
</optgroup>
<optgroup label="Pescados">
<option value="6"> Salmon </option>
<option value="7"> Rodaballo </option>
<option value="8"> Merluza </option>
<option value="9"> Sardinas </option>
<option value="10"> Atun </option>
</optgroup>
<optgroup label="Postres">
<option value="11"> Helado </option>
<option value="12"> Hojaldre </option>
<option value="13"> Fruta </option>
<option value="14"> Pastel </option>
<option value="15"> Flan </option>
</optgroup>
</select></p>
<!--Si en el ejemplo anterior queremos que aparezcan algunos marcados, usamos selected-->
<p> Elige tus platos preferidos (Para elegir mas de uno manten pulsada la tecla Ctrl)</p>
<p><select name="pla" size="10" multiple="multiple">
<optgroup label="Carnes">
<option value="1"> Entrecot </option>
<option value="2" selected="selected"> Chuleta </option>
<option value="3"> Solomillo </option>
<option value="4"> San Jacobo </option>
<option value="5"> Cordero </option>
</optgroup>
<optgroup label="Pescados">
<option value="6" selected="selected"> Salmon </option>
<option value="7"> Rodaballo </option>
<option value="8"> Merluza </option>
<option value="9"> Sardinas </option>
<option value="10"> Atun </option>
</optgroup>
<optgroup label="Postres">
<option value="11" selected="selected"> Helado </option>
<option value="12"> Hojaldre </option>
<option value="13"> Fruta </option>
<option value="14"> Pastel </option>
<option value="15"> Flan </option>
</optgroup>
</select></p>
<fieldset>
<!--con FIELDSET hacemos un recuadro donde metemos dentro los formularios contenidos en esta
etiqueta-->
<legend> Rellena el formulario </legend>
<!--con LEGEND le damos un nombre a ese recuadro-->
Selecciona tu nivel maximo de Estudios: <br>
<input type="radio" name="nivel" value="1" disabled="disabled"> Sin Estudios <br>
<input type="radio" name="nivel" value="2" checked="checked"> Bachiller <br>
<input type="radio" name="nivel" value="3"> Grado Medio <br>
<input type="radio" name="nivel" value="4"> Grado superior <br>
<input type="radio" name="nivel" value="5"> Universitario <br>
</fieldset>
<!--Para determinar el orden en el que navegamos por las cajas con la tecla TAB usamos
tabindex="aqui numero de orden", si lo hacemos con otro grupo debemos poner numeros
diferentes, osea un grupo del 1 al 9 y el siguiente de 9 al 18-->
<p>
Al pasar TAB pasamos de una caja a otra por columnas<br>
<input type="text" name="t1" size="5" value="f1-c1" tabindex="1">
<input type="text" name="t1" size="5" value="f1-c2" tabindex="4">
<input type="text" name="t1" size="5" value="f1-c3" tabind
Crear cuenta
Comentarios de: Lenguaje de marcas - Apuntes (0)
No hay comentarios