Transcript LENGUAJE HTML - INTEF

LENGUAJE HTML
CONCEPTOS BÁSICOS PARA
SABER LEER EL CÓDIGO DE
UNA PÁGINA WEB
INTRODUCCIÓN
•
Una página WEB es un documento que se puede gestionar a través de un
servidor, en estructuras cliente-servidor, redes de área local ( LAN ) y
comerciales de servicios internacionales de redes.
•
•
Se gestiona a través del HTML ( Hyper Text Markup Language ).
Existen en el mercado muchas herramientas, unas gratis, otras comerciales
y algunas otras de código abierto.
•
FORMA RÁPIDA (AUTOMÁTICA) DE CREAR UNA PÁGINA WEB
•
Para crear un documento HTML desde Word, primero lo editamos en Word
y después lo guardamos con el tipo de documento HTML Document.
Queda con extensión HTM.
Para saber si tenemos instalada aplicación y utilizarla pinchamos el icono
VER / HTML Source
Se visualiza el texto editado con Word pero con todas las etiquetas
incluidas por defecto; entonces personalizaremos el documento con las
etiquetas necesarias que no han sido incluidas.
•
•
•
PARTES DE UNA WEB
•
•
El documento como tal, lo delimitan 2 etiquetas :
< HTML > Documento < / HTML >
•
Partes del documento :
•
•
•
CABECERA : < HEAD > Cabeceras < / HEAD >
< TITLE > Texto < / TITLE > Para poner título a la ventana
< BASE > ( Atributos ) < / BASE > Propiedades de una parte o elemento
del documento que gestionan unas determinadas etiquetas.
HREF = "URL"  Referencia a la página base en la que nos hemos
basado.
FILE  Referencia a un archivo
URL ( Localizador Uniforme de Recursos )
< ISINDEX > < / ISINDEX > Cuando el WEB tiene una conexión a una
base de datos en la que el navegante puede realizar búsquedas.
•
•
•
•
•
< META > Información adicional < / META >
•
CUERPO : < BODY > Cuerpo de la página. < / BODY >
•
Titulares, encabezados : < Hn > Texto < / Hn >  Es un estilo que
jerarquiza el texto con tamaños, valor entre 1-6 ( 1 el más grande ).
•
•
•
•
•
•
•
•
•
•
Párrafos : < P > Párrafo < / P >  No reconoce tabulaciones
Listas :
No ordenadas  <UL><LI> Elemento de la lista </LI><LU>
Los elementos de la lista aparecen con una tab. a la dcha y un bolo.
Ordenadas  <OL><LI> Elemento de la lista <LI></OL>
Los elementos aparecen igual que antes pero con numeración
Comentarios : No son visibles en el WEB, solo son para el programador
<COMMENT> Texto </COMMENT>
•
•
•
Enfasis :
•
•
•
•
•
<EM></EM> Aumenta el tamaño fuente en Itálica y Negrita
•
•
•
•
•
•
•
Palabras reservadas :
<B></B> Negrita
<I></I> Itálica
<U></U> Subrayado
A tener muy en cuenta:
Caracteres especiales :
Ñ  &NTILDE ;
ACUTE  Acento agudo
GRAVE  Acento grave
CIRC  Acento circunflejo
ULM  Diéresis
GT  >
LT  <
Ejemplo: Cigüeña  cig&uULM ;e&nTILDE ;a
• Separadores entre texto :
• Lineas Horizontales <HR> Atributos </HR>
• Atributos : ALIGN = LEFT, CENTER, RIGHT
•
WIDTH = Pixels
•
SIZE = 1, ½, 1/3
• Hiperenlaces : Son enlaces a partes del documento u otras páginas:
•
•
•
•
•
- De propia página : <A HREF = "#AYUDA"> Ayuda </A>
- A otra página local :
<A HREF = "FOTOS.HTML"> Ver fotos </A>
- A una pág. de otro servidor :
<A HREF = " http ://...."> Yahoo! </A>
• TABLAS :
• <TABLE Atributos>
</TABLE>
• - Están compuestas de un título <CAPTION Atributos>
</CAPTION>
• - Filas <TR Atributos><TH Atributos>
</TH></TR>
• <TD Atributos>
</TD>
• TH  Guardan datos para encabezados.
• TD  Guardan datos para las filas.
• Atributos para TABLE :
•
BORDER = Valor en pixels  especifica el ancho del borde
para la tabla y sus celdas.
•
ALIGN = " TOP, BOTTOM, LEFT, RIGHT, CENTER "
•
WIDTH = Valor  Anchura de la tabla , si no se especifica se
ajusta a las entradas.
•
•
•
•
•
•
•
•
FORMULARIOS :
Sirven para enviar información al servidor.
Se introducen en la página WEB mediante :
<FORM Atributos>
</FORM>
<INPUT Atributos>
</INPUT>
<SELECT Atributos>
</SELECT>
<OPTION> </OPTION>
<TEXTAREA Atributos>
</TEXTAREA>
•
•
•
•
•
- Atributos para FORM :
Obligatorio y necesario : ACTION "URL" ( Servidor y aplicación )
METHOD = " GET "  Lee información del servidor.
" POST "  Envía por correo.
- Atributos para SELECT : Permite incluir en sus etiquetas asociadas
OPTION, distintas opciones para que puedan ser elegidas una o varias de
ellas. Los atributos para esta etiqueta son :
SIZE = " MULTIPLE "  Permite que se puedan escoger más de una
de las opciones de la lista desplegable.
NAME = " Id. de control "
OPTION SELECTED  Opción seleccionada por defecto
•
•
•
•
•
•
•
•
- Atributos para TEXTAREA :
Es un cuadro para poder introducir texto de más de 1 línea, y tiene como
propiedades :
NAME
ROWS = Nº de filas
COLUMNS = Nº de Columnas
•
•
Atributos para INPUT :
TYPE = " Palabra clave "  Tipo de control para entrada
•
- Palabras clave :
•
•
•
•
•
•
•
" TEXT "  Formato texto, también números.
" KEYBOARD "  Caracteres o recuadro de texto.
" CHECKBOX "  Casilla de verificación.
" RADIO "  Botones circulares, solo una opción de todas.
" SUBMIT "  Botón para pulsar sobre él, que envía el FORM al URL de ACTION.
“ RESET "  Visualiza un botón y si se pulsa, limpia el contenido del formulario.
" NAME "  Es el nombre que se da al control de entrada para referenciarlo.
•
SIZE = Nº ( Número de caracteres que admite como máximo los controles INPUT de
tipo TEXT y KEYBOARD.