Practica_HTML
Práctica HTML
Introducción
HTML (HyperText Markup Language) es el primer lenguaje que una persona debe conocer si desea comenzar a realizar páginas web. HTML no es un lenguaje de programación, sino un lenguaje descriptivo, una serie de etiquetas que el navegador interpretará de una u otra forma para mostrar distintos contenidos por pantalla.
Por tanto el HTML, es el lenguaje utilizado por el servidor para definir las páginas del WORLD WIDE WEB. El ejemplo más claro lo encontramos precisamente en la primera página creada en la WWW: primera página web. En está veremos cómo esta página web está compuesta por un simple fichero HTML que a día de hoy, nuestro navegador sigue siendo capaz de leer.
Los ficheros HTML son que pueden ser escritos con cualquier editor básico, tal como Notepad. En este fichero de texto se introducen unas marcas o caracteres de control llamadas TAGs, que son interpretadas por el navegador. Cuando éste lee un fichero con extensión *.htm o *.html interpreta estas TAGs y formatea el texto de acuerdo con ellas.
En conclusión, HTML es el lenguaje que nos sirve para crear páginas sencillas a través de una serie de TAGs que veremos a continuación:
Notepad
Para esta práctica usaremos el programa Notepad++ y guardaremos el archivo con la extensión .html. Después, clicaremos la opción de run en la barra de herramientas y seleccionaremos el navegador que deseemos, por ejemplo: “Google Chrome”.
Si no posee este programa, puede emplear al Notepad tradicional guardar el archivo como html y ejecutarlo en el navegador que prefiera.
TAGs básicos
Una vez abierto el Notepad, recrearemos la primera página web e iremos viendo paso por paso que indica cada comando del HTML.
Es importante saber que el lenguaje HTML es un lenguaje completamente anidado. Esto significa que existe una jerarquía dentro de los TAGS. Cada tag empieza cuando el usuario escribe <> y termina al poner </>.
HEAD
El operador head, da nombre a la pestaña que queremos crear. De esta manera, no creará nada en el documento más que el título de la misma en la parte superior del buscador. Véase el ejemplo:
Copie el texto de la imagen superior, guarde el fichero con la extensión .html y ejecútelo en el navegador. A partir de ahora usaremos Ctrl para guardar el documento y refrescaremos la página (tecla F5) del navegador para ver el resultado. Además puede emplear la tecla de Windows en su teclado para establecer el navegador en el lado izquierdo de la pantalla (Windows + flecha izquierda) y Notepad al lado derecho (Windows + flecha derecha).
BODY
El operador body da paso al cuerpo de la página web. Aquí escribiremos lo que deseamos que se vea en nuestra página.
El operador h a su vez, indica título (headline) y va ordenado desde el 1 hasta el 6. En este caso hemos establecido h1 como título. Véase el ejemplo:
Por otro lado, el operador p se emplea para definir un párrafo. Cuando queramos empezarlo emplearemos el comando p y terminarlo /p. Así el buscador representará los párrafos de manera automática.
Para incluir referencias a links crearemos un tag de la siguiente forma:
El alumno terminará la página por su cuenta ahora.
Tablas
Para la creación de una página web, es imprescindible el empleo de tablas como veremos más adelante. Para crear una tabla el alumno copiará el siguiente código:
RESULTADO
<table border=2 cellspacing=5 cellpadding=5>### Opciones más avanzadas: Para el lenguaje HTML no es necesario aprenderse de memoria cada comanda. Uno siempre puede consultar en internet cómo hacer las cosas que desee. Para ello se deja a modo de ejemplo lo siguiente. El alumno puede probar a copiar y pegar el texto del ejemplo y así ver el resultado en el buscador.Year Revenue Expenditures Profits 1999 $58,295 $73,688 $(15,393) </table> 2000 $902,995 $145,400 $757,595
| Así se escribe: | Así se ve: |
|---|---|
<form action="query.html" method="GET" name="form"> <pre> Nombre: <input NAME="nombre" size="20"> Contraseña: <input TYPE="password" NAME="contrasena" size="20"> <input TYPE="SUBMIT" VALUE="Enviar"> </pre> </form> |
|
<form action="query.html" method="GET" name="comentario"> Caja de texto de varias líneas:<p> <textarea rows="3" name="comentario" cols="20">Texto inicial</textarea> <input TYPE="SUBMIT" VALUE="Enviar"> <input TYPE="RESET" VALUE="Borrar"> </form> |
## Botones de opciones
| Así se escribe: | Así se ve: |
|---|---|
<form action="query.html"
method="GET" name="radio">
<p>Seleccione el idioma:</p>
<input TYPE="radio" NAME="Idioma" VALUE="euskera"> Euskera <br>
<input TYPE="radio" NAME="Idioma" VALUE="ingles"> Inglés <br>
<input TYPE="radio" NAME="Idioma" VALUE="frances"> Francés <br>
<input TYPE="SUBMIT" VALUE="Enviar">
</form>
|
## Casillas de verificación
| Así se escribe: | Así se ve: |
|---|---|
<form action="query.html"
method="GET" name="checks">
<p>Indique los idiomas que hablar:</p>
<input TYPE="checkbox" NAME="Idioma" VALUE="euskera"> Euskera <br>
<input TYPE="checkbox" NAME="Idioma" VALUE="ingles"> Inglés <br>
<input TYPE="checkbox" NAME="Idioma" VALUE="frances"> Francés <br>
<input TYPE="SUBMIT" VALUE="Enviar">
</form>
|
## Ventana de selección
| Así se escribe: | Así se ve: |
|---|---|
<form action="query.html"
method="GET" name="ventana">
<p>Indique la forma de pago:</p>
<p><select NAME="Pago" size="1" >
<option VALUE="metalico"> En metálico </option>
<option VALUE="cheque"> Cheque </option>
<option VALUE="transferencia"> Transferencia bancaria </option>
</select> <input TYPE="SUBMIT" VALUE="Enviar"> </p>
</form>
|
## Listas
| Así se escribe: | Así se ve: |
|---|---|
<form action="query.html"
method="GET" name="lista">
<p>Indique la forma de pago:</p>
<p><select NAME="Pago" size="3" MULTIPLE>
<option VALUE="metalico"> En metálico </option>
<option VALUE="cheque"> Cheque </option>
<option VALUE="transferencia"> Transferencia bancaria </option>
</select> <input TYPE="SUBMIT" VALUE="Enviar"> </p>
</form>
|