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 : <B></B> Negrita
• <I></I> Itálica
• <U></U> Subrayado
• <EM></EM> Aumenta el tamaño fuente en Itálica y Negrita
•
• A tener muy en cuenta:
•
• Caracteres especiales : Ñ &NTILDE ;
• Palabras reservadas : 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 = "[Link]"> 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.