QU ES HTML

QU ES HTML?

Es un lenguaje muy sencillo que permite describir hipertexto, es decir texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de informacin relacionadas, y con inserciones multimedia (grficos, sonido, entre otros

HTML : HyperText Markup Language

Lenguaje Lgico utilizado para describir documentos de tipo .html o .htm, describe el lugar y como se mostrara a travs del navegador

El HTML fue elaborado a principios de los aos 90 por el informtico suizo TIM BERNRS LEE y se encuentra en la versin 5.

Editor: Lugar donde se colocaran las instrucciones o tags para ser interpretadas por el navegador

BLOCK DE NOTAS DE WINDOWS

Navegador: Interpretador de los archivos HTML para visualizar las paginas.

INTERNET EXPLORER

LAS ETIQUETAS DE HTML:

Se llaman etiquetas a todas las palabras reservadas que utiliza HTML para organizar el texto, estas se reconocen porque estn encerradas por los smbolos de mayor y menor (< >) la mayora de las etiquetas de HTML utiliza una etiqueta de inicio y la etiqueta de fin, la cual simboliza el fin de la accin a ejecutar y est precedida por un / .

Ejemplo: Hola chicos

ESTRUCTURA BASICA DE UNA PGINA

Nombre de la pgina

Cuerpo de la pgina

ETIQUETAS PARA MANEJO DE TEXTOS

Prrafo

Titulo

Lnea

Salto de lnea

Negrillas

Itlica

Subrayado

Tachado

Letra grande

Letra pequea

Subndice

Superndice

Texto a escribir con teclado

Citas literarias

Definiciones de textos

Texto sin formato

Citas en cursivas

FONT

Esta etiqueta permite definir: tipo, tamao y color de las fuentes o letras.

atributo:

face define tipo de letra

color define el color de la letra

size define el tamao de la letra de 1 a 7

Letra times roman

COLORES

Negro

Black

#000000

Gris claroSilver

#c0c0c0

Gris

Gray

#808080

Blanco

White

#FFFFFF

marrn

maroon#800000

Rojo

red

#FF0000

Moradopurple

#800080

Fucsia

fuchsia

#FF00FF

Verde

green

#008000

Verde claroLime

#00FF00

Verde olivaOlive

#808000

Amarilloyellow

#FFFF00

azul marinoNavy

#000080

azul

blue

#0000FF

azul verdosoTeaL

#008080

azul celesteagua

#00FFFF

L I S TAS

Para crear y definir las listas existen dos opciones:

1.- Listas Numeradas Order List

atributo type=1 tipo numerado por defecto

type=A Letras maysculas

type=a Letras minsculas

type=I Cifras Romanas maysculas

type=i Cifras Romanas minsculas

start= Cifra inicial

2.- Listas con vietas Unordered List

atributo type=disc Crculos rellenos

type=square Cuadrados rellenos

type=circle Cuadrados rellenos

Para agregar los elementos de la lista

Animales domesticos

Perro

gato

MANEJO DE IMGENES

Para incluir una imagen en una pgina web se debe utilizar alguno de los siguientes formatos grficos: GIF, JPEG PNG.

Atributos del tag

ALT,

Indicar un texto alternativo a mostrar si no fue posible mostrar la imagen

ALIGN, Indica como se alinea el texto que sigue a la imagen con respecto a esta

valores: top, bottom, middle,texttop, absmiddle, absbottom, left, right

BORDER,Indicar el tamao del borde de la imagen, 0 omite el borde.

HEIGHT, Establece la altura de la imagen en pixel o porcentaje.

WIDTH, Establece el ancho de la imagen en pixel o porcentaje.

HSPACE, Indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante

VSPACE,Indica el margen vertical

HIPERVNCULOS O HIPERTEXTOS

El hipertexto o hipervnculo, permite indicar zonas de texto o imgenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML u otras zonas del mismo documento.

texto o imagen

ANCLAS EXTERNAS

Son anclas realizadas en pginas externas, donde pueden ocurrir llamados o desplazamientos.

PAGINA UNO

texto o imagen

...

Elementos que forman el formulario

...< /FORM>

ACTION

Indica el programa que se encargar de tratar los datos del formulario. Este programa debe encontrarse en el servidor y estar escrito en algn lenguaje de programacin. A este programa se le pasar como parmetros los datos introducidos en el formulario y retornar un cdigo HTML que se mostrar al procesar el formulario. A este tipo de programas se les llama cgi-bin.

METHOD:

Indica el protocolo usado para el envo de los datos. Con POST enva los datos en la entrada estndar del programa que trata el formulario y con GET los datos se pasan por parmetro, en la lnea de comandos, al programa. El usar uno o otro mtodo vendr determinado por como son tratados los parmetros en el formulario en el CGI-BIN. El mtodo de uso ms normal ser POST.

ELEMENTOS QUE FORMAN EL FORMULARIO

Entrada bsica de datos

El tag INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. El formato bsico es el siguiente:

< INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Variable que toma el valor" VALUE = "Valor de Inicializacin" >

< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="longitud mxima" >

El tamao de la ventana de introduccin de texto se fija con el atributo SIZE, que indica el tamao de la ventana en caracteres. Aqu solo se define la parte visible, pero el usuario podr introducir ms texto si lo desea. Para indicar el mximo nmero de caracteres que se permiten en la entrada usaremos: MAXLENGTH. El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacin del campo. De todos los atributos solo ser obligatorio NAME, siendo el resto opcionales. En la entrada se podrn usar cualquier tipo de caracteres incluso los acentuados, en su formato normal.

Se requiere el atributo NAME. Los valores que tomar la variable sern on off, dependiendo de su estado. Si el botn estaba activado cuando se envan los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botn se encontrar activado en la inicializacin. Si se indica el atributo VALUE, cuando se envan los datos con el botn activado se mandar la variable con el valor indicado y en caso contrario no se mandar ningn valor.

< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" >

Cada una de las etiquetas RADIO tendr el mismo atributo NAME, y con un distinto atributo VALUE que ser el valor que tome si se selecciona esta opcin. Para inicializarlo se usa el atributo CHECKED que se indicar solo en la opcin que se quiera especificar por defecto.

< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >

En este caso no se muestra ningn campo para la entrada de datos al usuario, pero el par variable valor especificado es enviado junto con el formulario. Se suele usar para transmitir informacin de estado control para enviar algn tipo de informacin que no debe ser variada en el formulario, pero s debe ser enviada junto a este.

< INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" >

Este botn se usa para enviar los datos del formulario, al pulsar el usuario este botn, se finaliza la introduccin del formulario y pasa el control al programa indicado en ACTION. En todo formulario debe existir al menos un botn de SUBMIT, si solo incluye un recuadro del tipo TEXT no ser necesario incluirlo. El atributo VALUE especifica una etiqueta no editable que se mostrar en el botn de envo. Lo normal es que este botn no enve datos, pero si se indica el atributo NAME con un nombre de variable ser enviada la variable con el valor de VALUE. Esto puede ser til si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >

El punto de la imagen en el que pulsa el usuario tambin es pasado al programa interprete del formulario, de forma que la imagen igualmente podra ser un mapa sensible. Se pasarn dos parmetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se puls, si se desea.

< INPUT TYPE=RESET VALUE="Etiqueta a mostrar" >

Este botn se usa para volver a los valores por defecto todos los elementos del formulario, borrando todos los datos introducidos por el usuario. El atributo VALUE especifica la etiqueta que tendr el botn.

texto de varias lineas

Permite la introduccin de un texto que puede abarcar varias lneas, introduciendo este en forma de prrafo.En este caso se presenta una ventana del tamao especificado con los atributos ROWS, filas, y COLS, columnas.

< OPTION SELECTED VALUE=valor1> Opcin Primera< OPTION VALUE=valor2> Opcin Segunda . . .< OPTION VALUE=valorn> Opcin Ensima Se usa para mens simple o mltiples. Define mens de tipo pop-up (men de barras) y ofrece una alternativa ms compacta al uso de botones RADIO o CHECKBOX. Si se desea que sea un men mltiple se deber incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarn todas las opciones en forma de tabla, en el otro caso se mostrar la opcin activa y un botn para poder modificar esta opcin.

MAPA DE IMAGENES

MARQUESITAS

Atributos:

Loop = repeticin del ciclo, valor numrico

Behavior= scroll, alternate, slide

Direction= left, right, down, up

Bgcolor= valor del color de fondo

Height = alto

Width= ancho

Scrollamount= indica el numero pixel que se mueve el objeto

Scrolldelay= pausa entre cada paso

SONIDO

GUIA ORIGINAL ELABORADA POR: ING. Antonio Serrano, Revisada y modificada en algunos aspectos por: Ing. Senin Antequera.

COMPUTACIN I

Docente: Ing. Senin Antequera

Frutas

1. mango

2. manzana