HTML Para Principiantes | Somos data para TI!...

Capítulo 12: Publicar una web en HTML

Para publicar un sitio, debe cargar todos los archivos de su sitio Web en un servidor, éste servidor mantendrá la Web online las 24horas del día, no obstante, si la página no recibe suficientes visitas, será borrada, de modo que asegúrese de ofrecer contenido de interés (como trucos de un videojuego) o noticias actuales, puede actualizar su sitio Web tantas veces como desee.

El inconveniente llega si no está dispuesto a pagar al servidor, bien porque es usted menor o porque no se lo puede permitir o lo que sea… De modo que debe optar por un servidor gratuito, no obstante carece de muchas ventajas que sólo están en de pago, pero no debemos quejarnos, al menos es gratis. Si elegimos uno de pago, al menos que esté en nuestro idioma, sobre todo nos aseguraremos de abrir una cuenta bancaria con el dinero justo para dar el número de la cuenta, porque en Internet, mucha gente está viendo lo que haces en este mismo momento, millones de hackers pueden colarse en cualquier comunidad virtual, Messenger, nada es privado, así queasegúrese de que usa el dinero tan sólo para el servidor.

Final, Una página Web completa

Voy a mostrar a continuación una gran página Web completa con todo lo que hemos visto.

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<meta http-equiv=Refresh content=4 url=indexnew.htm>
<meta name=description content=”Curso de html para quien no sabe nada en
absoluto”>
<meta name=author content=Fer>
<meta name=keywords content=”html,curso”>
<title>Curso de HTML Básico</title>
<script type=”text/javascript”
src=”http://lineadecodigo.com/js/wforms/wforms.js”></script>
<style type=”text/css”>
.onstate-datos { display: block; }
.offstate-datos { display: none; }
</style>
</head>
<body background=leaves.jpg bgproperties=fixed text=#000000 link=#0000FF
vlink=#FF00FF alink=#FF0000>
<center>
<h1>Curso de HTML</h1><h2>Para principiantes</h2><h3>Muy
básico</h3><h4>Hecho por</h4><h5>Fernando García</h5><h6>Publicado en
MailXmail</h6>
<b>Negrita</b>&nbsp<i>  cursiva</i><u>  Subrayado
</u><s>Tachado</s><b><i><u>  Negrita cursiva y
subrayado</u></i></b></center>Texto a la
izquierda <div align=right>Texto a la derecha</div>
<br>2<sup>2</sup>Hemos usado superíndice   C<sub>2</sub>Hemos
usado subíndice
<font face=arial size=4>Esto es fuente arial grande</font>
<div style=”position: absolute; width: 849px; height: 100px; z-index: 1; left: 10px;
top: 363px; background-color:#FFFFFF” id=”capa1″ >

Este texto esta en una capa blanca</div>
<span style=”background-color= #FFFF00>Este es un texto resaltado en
amarillo</span>
<br>Ahora viene una línea horizontal grande
<pre>

Este código se muestra igual por el tag pre
</pre>
<p>esto es un párrafo</p>
esto son caracteres especiales á > ñ à &copy. <br>

Esto son listas
<ul><li>Lista1</li><ul><li>Sublista</li><ul><li>subsublista</li></ul></ul></ul>
<ol type=A><li>lista numerada</li></ol><br>

Esto es una tabla <br>
<br>
 <table border=”1″ width=”100%” id=”table1″ bgcolor=#FFFF99>
<tr>
<td colspan=”2″> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td rowspan=”2″> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table><br>

Esto es una imagen
<img lowsrc=arbol.gif src=ArbolHD.gif width=65 height=65 border=0 alt=arbol>

Esto es un sonido <embed src=sound1.wma><br>

Cuénteme que le parece mi curso
<!–formulario–>
<form method=post action=mailto:me@1.com?subject=5>
<fieldset><legend>Datos</legend>
<label for=name>Nombre</label><input type=text maxlength=50 size=”28″><br>
<label for=sx>Hombre</label><input type=radio selected>
<label for=sx>Mujer</label><input type=radio><br>
<label for=mail>mail</label><input type=text><br>
<label for=com>Comentario</label><textarea cols=20 rows=3></textarea>
<p><input type=”submit” value=”Enviar” name=”B3″></p>
</fieldset>
</form>
<hr width=80% height=10 color=#CCCCCC noshade>
<a href=mailxmail.com>Enlace externo-externo</a>&nbsp&nbsp&nbsp
<a href=2.htm>Enlace externo-interno</a>&nbsp&nbsp&nbsp
<a href=#start>Enlace interno-interno</a>&nbsp&nbsp&nbsp
<a href=mailxmail.com#fin>Enlace interno externo</a>&nbsp&nbsp&nbsp
<a href=mailto:me@1.com?subject=5>Enlace de correo</a>&nbsp&nbsp&nbsp
<a href=program.rar>Enlace de descarga</a>
</body>
</html>

Capítulo 11: Creación de la página. Consejos

Es realmente importante lo que viene a continuación.

- Guarde la página principal con el nombre index.htm, si no, el servidor no podrá publicar la Web, si lo que desea es que se abra otra página, puede usar el truco de redireccionar a otra página Web:

En 5 segundos la página irá a xyz.com

- Cree siempre un diseño sencillo pero profesional, haga uso del contraste entre botones y fondo, por ejemplo, utilice las CSS para definir color de scroll, formularios y botones.

- Reduzca el tamaño de la página para evitar que tarde.

- Si una imagen ocupa demasiado, guarde una similar y de las mismas dimensiones que ocupe menos (por ejemplo en blanco y negro) y especifique <img lowsrc=blancoynegro.gif src=color.gif> de esta forma se cargará primero la blanco y negro mientras se carga la otra, así el visitante tendrá menos razones para abandonar la página.

- Guarde todos los archivos para publicar en la carpeta o sub carpetas del sitio Web, lo que usted publicará será el sitio Web. Para lo cual deberá también actualizar los hipervínculos rotos al cambiar el nombre/ruta del archivo.

- Muestre siempre lo que en teoría, anda buscando el visitante en la parte superior de la página, y la información adicional debajo, jamás permita el desplazamiento en ambas direcciones.

- Indique siempre la página en que el visitante se encuentra, puede desactivar el hipervínculo de la página actual para que el visitante lo vea

- Jamás confunda al visitante usando un formato distinto para cada página, de esta forma el visitante prensará que continúa en el sitio Web Use siempre vínculos de texto alternativos a las imágenes.

- Use acceskey en los formularios para que al pulsar una letra se acceda a escribir al formulario, subraye la letra en el nombre.

Capítulo 10: Lenguajes de programación. Otros f...

Existen otros formatos como xml, que permite usar tags inventados, o XSLT, todos lenguajes Legs de marcado, un HTML puede contener subprogramas java y/o c++, pero lo más importante, es que puede contener Hojas de estilo en cascada. Esto se llama DHTML, HTML dinámico, esto quiere decir que una página Web puede contener capas y formatos prediseñados.

Podemos aislar cada elemento en capas, por ejemplo, el fondo, el titular, el texto, la imagen, cada capa puede contener cualquier cosa que hayamos mencionado
excepto, obviamente, marcos. Se muestran superpuestas pero son capas distintas

Además podemos ahorrarnos escribir los mismos formatos de fondo y color de letra, y todos los formatos, gracias a hojas de estilo en cascada, o CSS Cascade Shell Styles, o Cascading Style sheets. Podemos usar un bloc de notas y configurar unos formatos, a partir de ahí podemos importar la misma CSS a todas las páginas y adquirirán el formato establecido en la CSS sin tener que especificar en todas el mismo formato. <link rel=”stylesheet” type=”text/css”
href=”file:///C:/Documents%20and%20Settings/ıx.css”>

Todo lo que podamos hacer con una CSS lo haremos para evitarnos trabajo en HTML, ya que normalmente, en todo el sitio web se usa el mismo formato para evitar confusión, lo explicaremos en el siguiente capítulo. Para diseñar una CSS abriremos un segundo bloc de notas o text, o cualquier herramienta de texto simple, pero realmente simple, no vale Writting, Writter, ni Word, bueno claro que vale, pero no no interesa usar esos sino bloc de notas.

Un ejemplo sería

Bgcolor {color:blue;}
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
p {text-align:center;color:red}

En efecto, podemos definir también los colores mediante nombres, 00 00 FF es el azul (blue), pero siempre es mejor definir el color para más seguridad.

Recordad que si o guardamos en el formato correcto, no funcionará absolutamente nada.

Capítulo 9: Marcos en HTML

Si queremos dividir una página en dos, usaremos marcos, esto quiere decir que el navegador se dividirá en varias secciones y cada una mostrará un archivo diferente, puede sernos útil para aislar contenido fijo como una barra de vínculos. Veamos como crear marcos horizontales y verticales. Como se trata de dos o más páginas que directamente mostramos, la página actual posee datos, pero nada más, de modo que no tiene contenido, solo páginas, así que no necesitaremos el tag body, a no ser de que queramos decir que esta página usa marcos, en caso de que no se muestren:

Con rows creamos uno horizontal, y cols, vertical. Podemos usar atributos como width y height (en sustitución de los porcentajes de tamaño en el área de navegación. Podemos usar el atributo sin valor, noresize, para que el marco sea inamovible es decir, que no se pueda redimensionar por el usuario. También podemos usar marginheight y marginwidth, así como border color y todos los atributos que lógicamente, tienen que servir. Para texto alternativo usaremos:

<NOFRAMES>
<BODY>
<P>Esta página Web utiliza marcos, pero su explorador no los admite.</P>
</BODY>
</NOFRAMES>

Finalmente, si queremos un marco cuadrado en el medio de la pantalla, necesitamos un marco flotante, que es el que normalmente vemos con un cuadrado en medio de una pantalla que podemos desplazar hacia abajo con un scroll (la barra azul de la derecha para desplazar) y leer la licencia.

Importante, usaremos el atributo target=right, si queremos que un hipervínculo se abra en el marco de la derecha, adaptarlo a vuestras necesidades.

Capítulo 8: Formularios en HTML

Si tu página es buena, es obligatorio que tenga más de un formulario:

Crear un formulario de búsqueda:

Para buscar entre páginas Web, conviene tener un buscador, de artículos por ejemplo.
Usaremos el tag form para crear un formulario e input para los diferentes controles, para un formulario de búsqueda usaremos el siguiente código.

<!–webbot bot=”Search” s-index=”Web ” s-dsn=”default”
s-fields=”DocumentK,TimeStamp,Weight”
TAG=”BODY”
S-Text=”Buscar:”
I-Size=”20″
S-Submit=”Iniciar búsqueda”
S-Clear=”Restablecer” b-useindexserver=”0″
–>

De esta forma tenemos nuestro formulario de búsqueda, recordad adaptarlo a vuestrasnecesidades cambiando la ruta y lo que sea necesario

Crear un formulario de registro

Aquí intervienen esos tags, vamos a nombrarlos todos:

Para crear botones accionables usaremos como tipo radio, para casillas de verificación, checkbox, para área de texto, directamente <textarea>, para listas usaremos <select><option></option> para formularios de carga de un archivo, usaremos file. Y Si queremos agrupar unos cuantos campos usaremos <fieldset><legend>registro:Acceder</legend>y cerraremos fieldset> agrupando los necesarios. A los formularios les podemos dar atributos como maxlenght (máximo numero de caracteres, readonly, solo lectura, también podemos usar type=hidden, la diferencia con solo lectura es que el usuario ignora que existe. No sé si he sidodemasiado claro así que voy a poner un ejemplo:

A continuación de la imagen muestro el código para crear el Formulario

<form method=”POST” enctype=”multipart/form-data” action=”–WEBBOTSELF–”>
<!–webbot bot=”FileUpload” U-File=”fpweb:///_private/form_results.csv”
S-Format=”TEXT/CSV” S-Label-Fields=”TRUE” –>
<fieldset style=”padding: 2″>
<legend>Datos personales</legend>
Nombre<input type=”text” name=”T1″ size=”20″><br>
Contraseña<input type=”text” name=”T2″ size=”20″><br>
Envíenos un archivo<input type=”file” name=”F1″ size=”20″><br>
Mayor de 18 años<input type=”checkbox” name=”C1″ value=”ON”><br>
Hombre<input type=”radio” value=”V1″ checked name=”R1″><br>
Mujer<input type=”radio” name=”R1″ value=”V2″><br>
<select size=”1″ name=”D1″>
<option>1</option>
<option>2</option>
</select><br>
Comentario<textarea rows=”2″ name=”S1″
cols=”20″></textarea></fieldset><br>
<input type=”submit” value=”Enviar” name=”B1″><input type=”reset”
value=”Restablecer” name=”B2″>
</form>

Podemos usar label para colocar la etiqueta al formulario, como por ejemplo, nombre

Podemos ir más lejos, podemos por ejemplo, crear una página con licencia, que al no aceptarla, no la podamos ver, para ello usaremos un script que ocultará el formulario mientras que la casilla de verificación esté inactiva. En primer lugar antes de head configuraremos el script, después,, en el formulario configuraremos el”interruptor” y los datos que se ocultan o muestran:

<h1>Condicionar secciones</h1>

<form action=”#” method=”post”>
<input id=”activar” type=”checkbox” class=”switch-datos”/><label for=”activar”>Quiere dejarnos sus datos de la tarjeta</label><br>

De esta forma lo que esta contenido en offstate se activará al accionar switch.

No obstante si queremos ofrecer un contrato o advertencia decente, necesitamos conocer
una cosa más.