La estructura basica de una pagina HTML es etiquetas HTML que indican el comienzo y el fin de todo el documento, las etiquetas HEAD, TITLE, y BODY, que indican respectivamente cabecera, titulo y cuerpo de la paginas.
Ejemplo:
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
</HEAD>
<BODY> Cuerpo</BODY>
</HTML>
El lenguaje HTML es muy amplio, aqui podemos encontrar la especificación completa del mismo Especificacion HTML, sin embargo en el curso nos enfocaremos en los elementos de mayor importancia para nuestro caso.
Formatear texto:
Negrita <B> Texto en negrita</B>
Cursiva <I> Texto en cursiva</I>
Subrayado <U> Texto subrayado</U>
Preformateado <PRE> Mantiene el formato con que fue escrito, espacios, tabuladores, etc.</PRE>
Parrafos:
Nuevo párrafo (dos espacios) <P>
Línea horizontal <HR>
Salto de línea (un espacio) <BR>
Hipervinculos:
<A HREF="URL">Texto del vínculo</A>
Imagenes:
<IMG SRC= "Nombre de la imagen" >
Tablas:
Las tablas estan compuestas por las etiquetas que definen una tabla "table", las etiquetas que
definen una fila "tr", las que definen una columna de principal o de cabecera "th", las que
definen una celda "td".
De esta forma la estructura general de una tabla quedaria:
<table>
<tr><th>celda principal 1</th><th>celda principal 2</th><td>celda principal 3</th></tr>
<tr><td>celda 1,1</td><td>celda 1,2</td><td>celda 1,3</td></tr>
<tr><td>celda 2,1</td><td>celda 2,2</td><td>celda 2,3</td></tr>
</table>
Adicionalemnte a las tablas se les puede colocar varios atributos, importante border="numero"
donde o indica, sin borde, y 1, 2, 3, .. el ancho del borde.
A las celdas se les puede colocar el atributo colspan='numero' donde indica el numero de
columnas que abarca dicha celda.
Campos de entrada de datos:
Existen diversos tipos de campos de entradas de datos, se definen con la etiqueta "input", con el atributo
type de esta etiqueta se define el tipo, el cual puede ser:
text = Campo de entrada de texto
password = Password, coloca * cada vez que se coloca un caracater.
checkbox = Seleccion simple (Caja)
radio = Seleccion simple (Circulo)
submit = Envia los datos de la forma HTML.
reset = Blanquea los campos de entrada de datos en la forma HTML.
file = Para cargar archivos.
hidden = Campo oculto
image = Imagen
button = Boton
Combos de seleccion multiple:
Los combos de seleccion multiple, se usan para seleccionar uno o mas valores entre los mostrados
en el combo, estos se colocan con la etiqueta "select" para indicar un combo, y las etiquetas
option por cada opcion que tenga el combo, en la etiqueta select se puede colocar el atributo
multiple, para indicar que es de seleccion multiple (presionando ctrl) y el atributo size='valor'
para indicar que cuantas opciones se muestran en el select.
Formas HTML:
Se usan para contener la informacion que sera enviada al hacer submit, dentro de las formas HTML
se deben colocar los campos de entrada de datos que se usaran para enviar al servidor, para
por ejemplo ser almacenados en BD, pero, estas seran mas utiles cuando trabajemos con PHP.
Ahora como hacemos una pagina HTML? basicamente creamos un archivo de texto, con en block de notas
o con el notepad++, luego colocamos las correspondientes etiquetas, luego lo salvamos, pero en vez
de colocar extension .txt al archivo, le colocamos extension .html, esto es todo, si queremos
seguir editando el archivo, lo abrimos con el block de notas, si queremos visualizarlo como un
html, basta con abrilo con un navegador Web (Firefox, Internet Explorer, Chrome, Opera, netscape, etc...)
Ahora un ejemplo con varias de las etiquetas vistas:
<HTML>
<BODY>
<table border = '0'>
<tr><th colspan='2'>Datos del alumno</th></tr>
<tr><td>Cedula</td><td><input type='text'></td></tr>
<tr><td>Sexo</td><td><select type='text'>
<option value=''></option>
<option value='M'>Masculino</option>
<option value='F'>Femenino</option>
</select></td></tr>
<tr><td align='center'>
<input type='button' value='Guardar'> <input type='button' value='Salir'></td></tr>
</table>
</BODY>
</HTML>
Actividad sin nota, continue el ejemplo anterior, colocando mas datos, usando otros tipos de campos de entrada de datos,
y agregue el boton imprimir.
Hola profesor! ¿Cuando vuelve?
ReplyDeleteHola Kathleen, aun no lo se, cuialquier cosa escribeme por aqui o via correo, saludos.
ReplyDeleteBuenas tardes profesor, en la actividad que nos mandó tenemos que utilizar base de datos ?, o Solo son 2 paginas html completamente estaticas ?, Se lo pregunto xq como hay que eliminar profesores entonces supongo que hay que usar base de datos ?. Y las validaciones con javascript las podemos hacer utilizando la libreria prototype ?. Gracias y Saludos.
ReplyDelete