Guia HTLM

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: <h1> Hola chicos </h1>
ESTRUCTURA BASICA DE UNA PGINA
<html>
<head>
<title> Nombre de la pgina </title>
</head>
<body>
Cuerpo de la pgina
</body>
</html>
ETIQUETAS PARA MANEJO DE TEXTOS
<p> </p>
<h1> </h1>
<hr>
<br>
<b> </b>
<i> </i>
<u> </u>
<strike> </strike>
<big> </big>
<small> </small>
<sub> </sub>
<sup> </sup>
<kbd> </kbd>
<cite> </cite>
<dfn> </dfn>
<samp> </samp>
<q> </q>
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
<font face =Helvetica color =blue size=5> Letra times roman </font>
COLORES
Negro
Gris
marrn
Morado
Verde
Verde oliva
azul marino
azul verdoso
L I S TAS
Black
Gray
maroon
purple
green
Olive
Navy
TeaL
#000000
#808080
#800000
#800080
#008000
#808000
#000080
#008080
Gris claro
Blanco
Rojo
Fucsia
Verde claro
Amarillo
azul
azul celeste
Silver
White
red
fuchsia
Lime
yellow
blue
agua
#c0c0c0
#FFFFFF
#FF0000
#FF00FF
#00FF00
#FFFF00
#0000FF
#00FFFF
Para crear y definir las listas existen dos opciones:

1.- Listas Numeradas <ol>
</ol> 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 <ul>
</ul> Unordered List
atributo type=disc
Crculos rellenos
type=square Cuadrados rellenos
type=circle Cuadrados rellenos
Para agregar los elementos de la lista <li> </li>
Animales domesticos
<ul type="square">
<li> Perro
<li> gato
</ul>
Frutas
<ol type="i">
<li> mango
<li> manzana
</ol>
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 <img>
ALT,
ALIGN,
BORDER,
HEIGHT,
WIDTH,
HSPACE,
VSPACE,
Indicar un texto alternativo a mostrar si no fue posible mostrar la imagen

Indica como se alinea el texto que sigue a la imagen con respecto a esta
valores: top, bottom, middle,texttop, absmiddle, absbottom, left, right
Indicar el tamao del borde de la imagen, 0 omite el borde.
Establece la altura de la imagen en pixel o porcentaje.
Establece el ancho de la imagen en pixel o porcentaje.
Indica el espaciado horizontal que debe separar a la imagen del texto o
cualquier otro elemento circundante
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.
<A HREF=direccin absoluta o relativa"> texto o imagen </A>
URL absoluta, hace referencia a la direccin completa donde aloja el archivo
url absoluta = c:\windows\imgenes\1.jpg
URL relativa, hace referencia a niveles relativos donde aloja el archivo
url absoluta = ../imgenes/1.jpg
ANCLAS INTERNAS
Son por definicin direcciones internas dentro de la pagina, donde pueden ocurrir llamados
o desplazamientos.
<A name=nombre identificador"> texto o imagen </A>
ANCLAS EXTERNAS
Son anclas realizadas en pginas externas, donde pueden ocurrir llamados o
desplazamientos.
PAGINA UNO
<A name=nombre identificador"> texto o imagen </A>
<a name=inicio>Inicio de la pagina uno</a>
PAGINA DOS
Se realiza el llamado al ancla ubicada en la pagina uno:
<a href=pagina externa#nombre identificador"> texto o imagen </A>
<a href=pagina uno#inicio"> regresar al inicio de la Pag. Uno </A>
ATRIBUTOS DEL BODY O CUERPO
<BODY>
Atributos:
</BODY>
bgcolor
background
Text
link
accedidos.
Color de fondo del body o cuerpo

Establece una imagen de fondo
Especifica el color del texto nomal en el body o cuerpo
Indicar el color que tendrn los hiperenlaces que no han sido
Por defecto ser azul.
Vlink
Color de los enlaces que ya han sido visitados
TABLAS
<table>
Atributos:
</table>
border
bgcolor
align
width
height
cellpadding
cellspacing
caption
Define el borde de la tabla

Color de fondo de la tabla
Alineacin dentro de la tabla: left, right
Ancho en pixel o porcentual relativo
Alto de la tabla, pixel o porcentual
Espacio entre el borde de la celdas y la tabla
Espacio entre cada celda
Titulo de la tabla
FILAS
Para cada una de las filas de la tabla se especificar los parmetros que afectarn a todas las
celdas de la fila.
<tr> </tr>
Atributos:
valign
Alineacin vertical: top, middle, bottom
bicolor
Color de fondo de la fila
align
Alineacin: left, right, center
width
Ancho en pixel o porcentual relativo
height
Alto de la fila
colspan
Define cuantas columnas ocupa la celda
rowspan
Define cuantas filas ocupa la celda
COLUMNAS
Define cada una de las celdas de una fila de la tabla, TH se usar para definir una celda de
tipo cabecera, en este caso se mostrarn destacados en negrita y TD para definir una celda
de datos.
<th>
<td>
Atributos:
</th> Encabezado de columna

</td> celda o columnas
valign = Alineacin vertical: top, middle, bottom
bgcolor= Color de fondo de la columna
align= Alineacin: left, right, center
width= Ancho en pixel o porcentual relativo
height= Alto de la columna
colspan= Define cuantas columnas ocupa la celda
rowspan= Define cuantas filas ocupa la celda
nowrap= Evita que la lnea de texto se divida por defecto
FORMULARIOS
Los formularios son plantillas que permiten la creacin de documentos HTML con
peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear
cuestionarios, encuestas, pginas de comentarios o cualquier documento en la que se desee
una interaccin por parte del usuario. Se podrn definir distintos tipos de recuadros de
dialogo, botones de seleccin, mens de mltiples opciones. Para permitir obtener los
datos de una manera ms intuitiva.
< FORM ACTION=mailto:iutpcserrano@yahoo.com" METHOD= POST / GET >
...
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
<INPUT> 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.
<INPUT
TYPE=PASSWORD
NAME="variable"
SIZE="tamao" MAXLENGTH="li>longitud mxima"
VALUE="valor
inicial"
Es similar al anterior pero en este caso no se imprimen los caracteres segn se van
introduciendo, se muestra un asterisco en vez de los caracteres.
< INPUT TYPE=CHECKBOX NAME="variable" CHECKED>
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.
<TEXTAREA NAME="variable" ROWS=Filas COLS=Columnas>
texto de varias lineas
</TEXTAREA>
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.
<SELECT NAME="variable">
< OPTION SELECTED VALUE=valor1> Opcin Primera
< OPTION VALUE=valor2> Opcin Segunda
...
< OPTION VALUE=valorn> Opcin Ensima
</SELECT>
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
<MAP NAME="mi_mapa">
<AREA SHAPE="RECT" COORDS="46,40,250,75" HREF="mipag2.html">
<AREA SHAPE="RECT" COORDS="46,100,250,135" HREF="mipag3.html">
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<IMG SRC="pulsadr1.gif" USEMAP="#mi_mapa">
MARQUESITAS
<MARQUEE> </MARQUEE>
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
<bgsound src=sonido.mid>
GUIA ORIGINAL ELABORADA POR: ING. Antonio Serrano, Revisada y modificada en
algunos aspectos por: Ing. Senin Antequera.
COMPUTACIN I
Docente: Ing. Senin Antequera

Guia HTLM

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia HTLM

Cargado por

Copyright:

Formatos disponibles

QU ES HTML?

Es un lenguaje muy sencillo que permite describir hipertexto, es decir texto

Para crear y definir las listas existen dos opciones:

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

El hipertexto o hipervnculo, permite indicar zonas de texto o imgenes que si son

Color de fondo del body o cuerpo

Color de los enlaces que ya han sido visitados

Define el borde de la tabla

</th> Encabezado de columna

la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacin

También podría gustarte