0 Usuarios y 1 Visitante están viendo este tema.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>HTML Básico</title></head><body><h1>HTML Básico</h1><hr><p>Esto es un párrafo, con unsalto<br>de línea, precedido de unalínea horizontal.</p><p align="right">Esto es otro párrafoalineado a la derecha. Losseparadores extra se ignoran.</p></body></html>
<html><body><h1>Cabecera h1</h1><h2>Cabecera h2</h2><h3>Cabecera h3</h3><h4>Cabecera h4</h4><h5>Cabecera h5</h5><h6>Cabecera h6</h6></body></html>
<html><head><script type="text/javascript"><!--function saluda (texto){ window.alert(texto);}//--></script></head><body><!-- Esto es un comentario y no se visualizará. --><p>Los comentarios, además de servircomo texto aclaratorio en losdocumentos, también se utilizan paraevitar que el contenido correspondientea elementos no reconocidos por algúnnavegador (o alguna versión anteriordel mismo) se muestre de forma literal.Por ejemplo, en estilos y scripts.</p><script type="text/javascript"><!--saluda("Ejemplo de JavaScript");//--></script></body></html>[/cose][color=red][b]METAINFORMACION[/b][/color][code=html5]<html><head> <meta name="Description" content="HTML,CSS,JavaScript,DHTML"> <meta content="text/html; charset=UTF-8"> <meta http-equiv="Refresh" content="6; url=/aii/"></head><body><h2>Está página ha sido movida</h2><p>Serás redirigido a<br><a href="/aii/"><b>http://www.inforg.uniovi.es/aii/</b></a><br>en 6 segundos.</p></body></html>
<html><body><p>Esto es un texto no formateado.</p><p>El siguiente texto está formateado: <br><b>Este texto está en negrita</b> <br><i>Este texto está en cursiva</i> <br><em>Texto enfatizado</em> <br><strong>Texto destacado</strong> <br><big>Texto grande</big> <br><small>Texto pequeño</small> <br>Texto con <sup>superíndice</sup> <br>Texto con <sub>subíndice</sub> <br></p></body></html>
<html><body><p>El texto preformateado permite mostrarel texto tal cual se escribe, respetandotodos los separadores. Habitualmente, eltexto se mostrará con algún tipo de letrade ancho fijo.</p><pre> Este texto está preformateadoy se <b>verá</b> igual que aquí.Obsérvese que se interpreta elcódigo HTML.</pre></body></html>
<html><body><p><b><code></b> Define el texto como código para la computadora.</p><pre> <code> int s=0; for (int i=0; i<n; i++) s+=i; </code></pre><p><b><kbd></b><kbd> Define texto a introducir porteclado</kbd><br><b><samp></b><samp>Código de computadora corto</samp><br><b><tt></b><tt>Define el tipo teletexto</tt> <br><b><var></b><var>Define una variable</var></p></body></html>
<html><body><p>Para indicar las modificacionesen los documentos se indican laspalabras borradas e insertadas.</p><p>Esta <del>palabra</del> estáborrada y las palabras siguientes<ins>son nuevas</ins></p></body></html>
<html><body><h4>Una cita corta:</h4><p><q>Si uno no sabe historia, no sabenada.</q><br><em>Edward Johnston, 1990</em></p><p><br></p><h4>Una cita larga:</h4><blockquote><p>La mayoría de las ideas fundamentales dela ciencia son esencialmente sencillas y, por regla general pueden ser expresadasen un lenguaje comprensible para todos.<br><em>Albert Einstein</em></p></blockquote></body></html>[/code=html5][color=red][b]DIRECCIONES[/b][/color][code=html5]<html><body><p>Con la etiqueta <b><address></b>se indican los datos del autordel documento (u otras direcciones):</p><p><br></p><address>© 2000, Juan Fernández<br>Spain</address></body></html>
<html><body><p><br><abbr title="Abreviatura">UN</abbr></p><p><acronym title="World Wide Web">WWW</acronym></p><p>En las versiones actuales de losnavegadores el valor de la propiedad<b>title</b> se utiliza como elementoinformativo, mostrándose dicho valoren una etiqueta al situar el ratónsobre el elemento.</p></body></html>
<html><body><p>La etiqueta <b><bdo></b> permiteindicar la dirección del texto.<br>El atributo <b>dir</b> es obligatorio ypuede tomar los valores:<br>- ltr (de izquierda a derecha)<br>- rtl (de derecha a izquierda)</p><p><br></p><p><bdo dir="rtl">Derecha a izquierda<br>Dabale arroz a la zorra el abad</bdo></p></body></html>
<html><body><h4>Una lista ordenada</h4><ol> <li>uno</li> <li>dos</li> <li>tres</li></ol><h4>Una lista desordenada</h4><ul> <li>Asturias</li> <li>Cantabria</li> <li>Galicia</li></ul><p><br>La lista ordenada se utilizacuando los elementos de la misma secitan según un orden que es relevante.</p></body></html>
<html><body><p>Se puede elegir el tipo de numeraciónde las listas ordenadas mediante elatributo <b>type</b> que puede tomar losvalores: 1, a, A, i, I. </p><ol type="a"> <li>uno</li> <li>dos</li> <li>tres</li></ol><ol type="I"> <li>uno</li> <li>dos</li> <li>tres</li></ol></body></html>
<html><body><p>Se puede elegir el tipo de viñetade las listas no ordenadas mediante elatributo <b>type</b> que puede tomar losvalores: disc, square, circle.</p><ul type="square"> <li>Asturias</li> <li>Cantabria</li> <li>Galicia</li></ul><ul type="circle"> <li>Asturias</li> <li>Cantabria</li> <li>Galicia</li></ul></body></html>
<html><body><p>Cualquier elemento de una listapuede a su vez ser otra lista y asísucesivamente. De esta forma tenemoslo que se denomina listas anidadas.<br>No hay ninguna restricción en cuantoa la forma de anidamiento, pudiéndosemezclar ambos tipos de listas.</p><h4>Una lista anidada</h4><ol> <li>uno</li> <li>dos <ul type="square"> <li>Asturias</li> <li>Cantabria</li> <li>Galicia</li> </ul> </li> <li>tres</li></ol></body></html>
<html><body><p>Las listas descriptivas estánformadas por términos a definir juntocon las correspondientes definiciones.</p><h4>Una lista descriptiva</h4><dl> <dt>HTML</dt> <dd><i>HyperText Markup Language</i> es la lengua franca para publicar hipermedia en el World Wide Web. </dd> <dt>DHTML</dt> <dd>HTML Dinámico. ¡ Esto si que es díficil de definir!.<br>En realidad es un conjunto de tecnologías. </dd></dl></body></html>
<html><frameset cols="30%,40%,30%"> <frame src="ejframe1.html"> <frame src="ejframe2.html"> <frame src="ejframe3.html"></frameset></html>
<html><frameset rows="30%,40%,30%"> <frame src="ejframe1.html"> <frame src="ejframe2.html"> <frame src="ejframe3.html"></frameset></html>
<html><frameset cols="50%,50%"><frame src="ejframe1.html"><frameset rows="60%,40%"> <frame src="ejframe2.html"> <frame src="ejframe3.html"></frameset><!-- Contenido alternativo paranavegadores que no admiten marcos --><noframes><body> <h3>Su navegador no admite marcos</h3></body></noframes></frameset></html>
<html><body bgcolor="yellow"><iframe width="300" height="275"src="http://www.uniovi.es/"> </iframe></body></html>
<html><body><p>Las referencias a páginas delmismo web pueden ser absolutas orelativas.<br><a href="../index.php">Esto es unenlace</a> a una página de éste web.(URL relativa)</p><p>Las referencias a páginas de otroswebs sólo pueden ser absolutas (si están en la misma máquina) o URLs completas.<br><a href="http://www.w3.org/">Esto esun enlace</a> a otra web y en otra máquina.</p></body></html>
<html><body><p>También se pueden hacer referenciasa otras partes de la página identificadasmediante un marcador.<br></p><p><br><a href="#linea15">Haz click aquí</a> para ir a la línea 15.<br>01<br>02<br>03<br>04<br>05<br>06<br>07<br>08<br>09<br>10<br>11<br>12<br>13<br>14<br><a name="linea15">15</a><br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br></p></body></html>
<html><body><p>También se pueden referenciar,directamente, marcadores de otras páginasdel web o de otros webs.</p><p><a href="http://www.uniovi.es/" target="_blank">Esto es un enlace</a> a una página de otro web.</p><p><br>Mediante el atributo <b>target</b> seespecifica donde se visualiza el contenidode la página referenciada.<br>Si el valor del atributo es <b>_blank</b>se muestra en una nueva ventana.</p></body></html>
<html><body> <!-- mostrar en marco --><p>Cuando se utilizan marcos (frames) laspáginas referenciadas se muestran en éstos(como ocurre con el ejemplo). Si se quieremostrar un documento fuera de los marcosdebe especificarse el valor <b>_top</b>para el atributo <b>target</b>.</p><p><a href="http://web.uniovi.es/"target="_top">Haz click aquí</a></p></body></html>
<html><body><h4>Mensaje</h4><p><a href="mailto:[email protected]">Envíaun E-mail</a></p><h4>Mensaje con título</h4><p><a href="mailto:[email protected]?Subject=Hola de nuevo">Envía un E-mail</a></p><h4>Mensaje con título y contenido</h4><p><a href="mailto:[email protected]?Subject=Hola de nuevo&Body=Escribe algo aquí">Envía un E-mail</a></p></body></html>
<html><body><p>La tabla está constituida porfilas de datos.</p><table border="1"><!-- Primera fila --><tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td></tr><!-- Segunda fila --><tr> <td>Dato 4</td> <td>Dato 5</td> <td>Dato 6</td></tr></table></body></html>
<html><body><p>Con la etiqueta <b><caption></b>se describe la tabla.</p><table border="1"><caption>Borde normal</caption><tr> <td>Primera</td> <td>fila</td></tr><tr> <td>Segunda</td> <td>fila</td></tr></table><p><br></p><table border="10"><caption>Borde grueso</caption><tr> <td>Primera</td> <td>fila</td></tr><tr> <td>Segunda</td> <td>fila</td></tr></table></body></html>
<html><body><p>La etiqueta <b><th></b> permiteindicar las celdas cabecera de la tabla.<br></p><h4>Con cabeceras horizontales</h4><table border="0"> <!-- Sin bordes --><tr> <th>Encabezado 1</th> <th>Encabezado 2</th> <th>Encabezado 3</th></tr><tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td></tr><tr> <td>Dato 4</td> <td>Dato 5</td> <td>Dato 6</td></tr></table><p><br></p><h4>Con cabeceras verticales</h4><table border="1"><tr> <th>Encabezado 1</th> <td>Dato 1</td> <td>Dato 2</td></tr><tr> <th>Encabezado 2</th> <td>Dato 3</td> <td>Dato 4</td></tr></table></body></html>
<html><body><p>Para indicar margenes de separación enuna tabla se utilizan los atributos:<br><b>cellpadding</b>: espacio dentro de lasceldas (entre borde y contenido).<br><b>cellspacing</b>: espacio entre celdas.<br></p><p>Tabla con cellpadding="10"</p><table border="1" cellpadding="10"><tr> <td>---- Primera</td> <td>fila ----</td></tr><tr> <td>---- Segunda</td> <td>fila ----</td></tr></table><p><br>Tabla con cellspacing="10"</p><table border="1" cellspacing="10"><tr> <td>---- Primera</td> <td>fila ----</td></tr><tr> <td>---- Segunda</td> <td>fila ----</td></tr></table></body></html>
<html><body><p>Se puede conseguir cualquier forma detabla uniendo celdas horizontal overticalmente. La unión de celdas seindica mediante los atributos:<br><b>colspan</b> para unir celdas de unamisma fila <br><b>rowspan</b> para unir celdas de unamisma columna <br><br>En ambos casos el valor del atributo esel número de celdas a unir.<br></p><table border="1"><tr> <td>Uno</td> <td>Dos</td> <td>Tres</td> <td rowspan="3">Cuatro</td></tr><tr> <td rowspan="2">Cinco</td> <td colspan="2">Seis</td></tr><tr> <td>Siete</td> <td>Ocho</td></tr></table><p>Obsérvese que al unir celdas éstas sólo se declaran en la primera fila o columna de la unión.</p></body></html>
<html><body><p>Atributos para establecer el tamaño yel alineamiento de la tabla:<br><b>width</b> Fija la anchura de latabla (en pixeles o porcentaje)<br><b>align</b> Fija la posición de latabla (<em>left</em>, <em>center</em> y <em>right</em>).<br></p><table border="1" align="center" width="70%"><tr> <td>Uno</td> <td>Dos</td> <td>Tres</td></tr><tr> <td>Cuatro</td> <td>Cinco</td> <td>Seis</td></tr></table></body></html>
<html><body><h4>Las celdas de una tabla puedencontener etiquetas HTML</h4><table border="3" width="80%"><tr> <td>Uno</td> <td>Dos<br> <p>Esto es un párrafo</p> </td> <td>Tres<hr></td></tr><tr> <td>Cuatro <table border="1"> <tr> <td><br></td> <td><br></td> </tr> <tr> <td><br></td> <td><br></td> </tr> </table> </td> <td>Cinco</td> <td><p>Seis</p> <ul> <li>Asturias</li> <li>Cantabria</li> <li>Galicia</li> </ul> </td></tr></table></body></html>
<html><body><p>Mediante los atributos <b>align</b> y<b>valign</b> se puede establecer elalineamiento horizontal y vertical paracada celda.</p><p>También se puede fijar el alineamientode una fila de la tabla con el atributo<b>align</b>.<br></p><table border="1" width="60%"><tr align="center"> <td valign="top">Uno</td> <td>Dos</td> <td align="right">Tres<br><br></td></tr><tr> <td>Cuatro<br><br></td> <td valign="bottom">Cinco</td> <td align="center">Seis</td></tr></table></body></html>
<html><body><table border="1" width="80%"><tr> <td width="33%">Uno</td> <td width="33%">Dos</td> <td width="33%">Tres</td></tr><tr> <td width="33%">Cuatro</td> <td width="33%" height="120">Cinco</td> <td width="33%">Seis</td></tr></table></body></html>
<html><body><table bgcolor="red"border="1" width="80%"><tr> <td>Uno</td> <td>Dos</td> <td>Tres</td></tr><tr> <td>Cuatro</td> <td>Cinco</td> <td>Seis</td></tr></table></body></html>
<html><body><table border="1" width="80%" align="center"><tr bgcolor="yellow"> <td>Uno</td> <td>Dos</td> <td>Tres</td></tr><tr> <td bgcolor="#DAA520">Cuatro</td> <td>Cinco</td> <td bgcolor="green">Seis</td></tr></table></body></html>
<html><body><table border="5" cellspacing="5"bgcolor="#DAA520"><tr> <td>Uno</td> <td></td> <td>Dos</td></tr><tr> <td>Tres</td> <td>Cuatro</td> <td>Cinco</td></tr></table><p>Si se quieren dejar celdas vacías yque se vea el borde (y el fondo en algunos navegadores) es necesario poner un espacioen blanco: <b>&nbsp;</b><br></p><table border="5" cellspacing="5"bgcolor="#DAA520"><tr> <td>Uno</td> <td> </td> <td>Dos</td></tr><tr> <td>Tres</td> <td>Cuatro</td> <td>Cinco</td></tr></table></body></html>
<html><body><p>Se puede utilizar el atributo<b>frame</b> de tablas para indicar quepartes del marco alrededor de la tabladeben mostrarse.<br>Los valores que puede tomar el atributoson: <b>void</b>, <b>above</b>,<b>below</b>, <b>hsides</b>, <b>lhs</b>,<b>rhs</b>, <b>vsides</b>, <b>box</b> y<b>border</b>.<br></p><table frame="vsides" border="10"cellspacing="5" width="70%"><tr> <td height="100">Uno</td> <td>Dos</td> <td>Tres</td></tr><tr> <td>Cuatro</td> <td height="100">Cinco</td> <td>Seis</td></tr></table></body></html>
<html><head><style type="text/css"><!-- h1.rojo {color: red} h2.azul {color: blue} h3.verde {color: green}--></style></head><body><h1 class="rojo">Cabecera h1</h1><h2 class="azul">Cabecera h2</h2><h3 class="verde">Cabecera h3</h3><p>El atributo <b>type</b> en el elemento de estilo (<b>style</b>) es obligatorio.</p></body></html>
<html><head><link rel="stylesheet" type="text/css" href="estilos.css"></head><body><h1>Cabecera h1</h1><h2>Cabecera h2</h2><h3>Cabecera h3</h3><p><br></p><p>En este caso los colores de las cabeceras se han establecido con una hoja de estilos en cascada enlazada mediante el elemento de cabecera <b>link</b>.</p></body></html>
<html><head><base href="http://validator.w3.org/"></head><body><p><a href="file-upload.html">Validación de archivos con código HTML</a></p><p><br></p><p>Si situas el cursor sobre el enlace y te fijasen la barra de estado observaras que la URLrelativa de destino del enlace se resuelve conrespecto a la base dada.</p></body></html>
<html><head><script type="text/javascript"><!--function msg (){ window.alert("Hola a todos !");}//--></script></head><body><p><input type="button" value="Púlsame" onclick="msg()"></p></body></html>
<html><body><p>Nombre: <input type="text" name="nombre"><br>Apellidos: <input type="text" size="35"name="apellidos"></p></body></html>
<html><body><p>Tienes televisión:<input type="checkbox" name="ele" value="television"checked="checked"><br>Tienes vídeo:<input type="checkbox" name="ele" value="video"><br>Tienes DVD:<input type="checkbox" name="ele" value="DVD"></p></body></html>
<html><body><p>Hombre:<input type="radio" name="sexo" value="masc"><br>Mujer:<input type="radio" name="sexo" value="fem"checked="checked"></p></body></html>
<html><body><p>Selecciona tu color preferido:<br><select name="color"><option value="amarillo">Amarillo</option><option value="azul">Azul</option><option value="rojo">Rojo</option><option value="verde">Verde</option><option value="otro" selected="selected">Otro</option></select><br><br>Selecciona tus frutas predilectas:<br><select name="frutas" size="7" multiple="multiple"><option value="melón">Melón</option><option value="piña">Piña</option><option value="uvas">Uvas</option><option value="pera">Pera</option><option value="manzana">Manzana</option><option value="naranja">Naranja</option><option value="plátano">Plátano</option></select></p></body></html>
<html><body><p><textarea rows="10" cols="30" name="texto">Aquí puedes escribir el texto que quieras.El elemento <textarea> sólo puedecontener texto (incluido entidades).</textarea></p><p><br>Los atributos <b>rows</b> y <b>cols</b>del elemento <b><textarea></b> sonobligatorios.</p></body></html>
<html><body><p>Un botón <input type="button" value="Inicial"></p></body></html>
<html><body><p><label><b>Etiqueta</b> </label><input type="text" name="nombre"value="es un ejemplo" readonly></p></body></html>
<html><body><fieldset><legend>Ficha de compra</legend><label>Nombre</label><input type="text" name="nombre"><br><label>Apellidos</label><input type="text" size="35"name="apellidos"><br><br><label>Televisión</label><input type="checkbox" name="TV"><label>Vídeo</label><input type="checkbox" name="vídeo"><label>DVD</label><input type="checkbox" name="DVD"></fieldset></body></html>
<html><body><p>Contraseña: <input type="password" name="passw"></p></body></html>
<html><body><p><label>Archivo</label><input type="file" name="fname"></p></body></html>
<html><body><form method="get"action="formej1.php"><fieldset><legend>Formulario</legend><label>Nombre</label><input type="text" name="nombre"><br><label>Apellidos</label><input type="text" size="30"name="apellidos"><br><br><label>E-mail</label><input type="text" size="30"name="email"><br><br><h4>De que aparatos dispones:</h4><label>Televisión</label><input type="checkbox" name="aparatos[1]"value="Televisión"><label>Vídeo</label><input type="checkbox" name="aparatos[2]"value="Vídeo"><label>DVD</label><input type="checkbox" name="aparatos[3]"value="DVD"><br><br><input type="submit" value=" Enviar "><input type="reset" value="Restablecer"></fieldset></form><p><br></p><p>El atributo <b>action</b> del<b>form</b> es obligatorio.</p></body></html>
<html><body><form method="post"action="formej2.php"><fieldset><legend>Formulario</legend><label>Selecciona tus frutas predilectas</label><br><select name="frutas[]" size="7" multiple><option value="melón">Melón</option><option value="piña">Piña</option><option value="uvas">Uvas</option><option value="pera">Pera</option><option value="manzana">Manzana</option><option value="naranja">Naranja</option><option value="plátano">Plátano</option></select><br><br><label>Tus comentarios</label><textarea rows="5" cols="30"name="comentarios">Escribe aquí</textarea><br><br><input type="submit" value=" Enviar "><input type="reset" value="Restablecer"></fieldset></form><p>Observa que puedes seleccionar más deuna fruta manteniendo pulsada la tecla<b>CTRL</b>.</p></body></html>
<html><body><p>Esto es una imagen:<img src="rana.gif" width="79"height="78" alt="fija"></p><p><br></p><p>Esto es una imagen en movimiento(un <i>gif</i> animado):<img src="agolpes.gif" width="140"height="104" alt="animada"></p><p><br></p><p>Los atributos <b>src</b> y <b>alt</b>son obligatorios.</p></body></html>
<html><body><p>Esto es un párrafo con una imagen<img src="ranita.gif" align="left"width="55" height="55" alt=""> a laizquierda del texto (la imagen flotará ala izquierda del párrafo).</p><p><img src="ranita.gif" align="right"width="55" height="55" alt="">Esto es un párrafo con una imagen a laderecha del texto (la imagen flotará ala derecha del párrafo).</p><p><img src="ranita.gif" width="55"height="55" alt="">Una imagen antes del texto.</p><p>Una imagen después del texto<img src="ranita.gif" align="top"width="55" height="55" alt=""></p><p>Esto es una imagen incluida<img src="ranita.gif" align="middle"width="55" height="55" alt=""> en el texto.</p></body></html>
<html><body><p>Variando los valores de los atributos<b>width</b> y <b>height</b> se puedeampliar o redurcir una imagen.</p><p><br></p><p>Esto es una imagen normal:<img src="rana.gif" width="79"height="78" alt=""></p><p><br></p><p>Esto es una imagen ampliada:<img src="rana.gif" width="150"height="150" alt=""></p><p><br></p><p>Esto es una imagen reducida:<img src="rana.gif" width="50"height="40" alt=""></p></body></html>
<html><body><h2>Imagen con texto alternativo</h2><p><br></p><p>Sitúa el cursor sobre la imagen<img src="rana.gif"alt="Imagen de una rana"title="Imagen de una rana"width="79" height="78"></p><p><br></p><p>El texto alternativo, dado mediante el atributo <b>alt</b> debe permitir interpretar la misión de la imagen aún en el caso de que ésta no sea visible.</p></body></html>
<html><body><table border="1"><tr> <td> <img src="rana.gif" border="2" width="79" height="78" alt="rana"> </td></tr></table><p><br></p><table border="1"><tr> <td> <img src="rana.gif" border="2" hspace="40" vspace="60" width="79" height="78" alt="rana"> </td></tr></table></body></html>
<html><body><p><map name="prueba"><area shape="circle" coords="60,60,40"alt="La página del WWW" href="/aii/tutorial.php"><area shape="rect"coords="105,78,155,100"alt="Tutorial de HTML" href="/aii/ejemplos.php?id_codigo=1&codigo=HTML"><area shape="rect"coords="105,110,155,135"alt="Tutorial de CSS" href="/aii/ejemplos.php?id_codigo=2&codigo=CSS"><area shape="rect"coords="105,140,155,165"alt="Tutorial de DOM" href="/aii/ejemplos.php?id_codigo=4&codigo=DHTML"></map></p><h1>Ejemplo de mapa</h1><p><br>La imagen tiene cuatro zonas activas.Haz click sobre ellas:<br><br><img src="mapa.jpg" border="0"usemap="#prueba" width="176"height="185" alt="mapa"></p></body></html>
