Programacion en html
27
PROGRAMACION EN HTML NOMBRE Marcela Amangandi 6to INFORMATICA
-
Upload
marcelajhajayra -
Category
Education
-
view
463 -
download
1
Transcript of Programacion en html
PROGRAMACION EN HTML
NOMBRE Marcela Amangandi
6to INFORMATICA
• HTML es un lenguaje muy sencillo que nos permite preparar documentos Web insertando en el texto de los mismos una serie de marcas (tags) que controlan los diferentes aspectos de la presentación y comportamiento de sus elementos.
CONCEPTOS
• Empiezan por la marca <HTML> y finalizarán con la marca </HTML> . Esta marca tan solo sirve como identificación del contenido del fichero para ciertos programas que realizan cambios masivos en muchas páginas a la vez.
• Los documentos escritos en HTML están estructurados en dos partes
diferenciadas: la cabecera (<HEAD>) y el cuerpo (<BODY>).
ESTRUCTURA DE HTML
• Entre las marcas del elemento <HEAD> se podrán utilizar los siguientes elementos:
• <TITLE>.- para dar nombre al documento.
• <META> para forzar a la página activa a ser cargada cada cierto tiempo.
• <BASE> para prefijar la dirección base de los documentos referenciados mediante un URL relativo.
El fichero fuente de un documento HTML podrá contener comentarios explicativos que serán ignorados por el browser.
• La cabecera se emplea para facilitar información acerca del documento y está delimitada por <HEAD> prólogo </HEAD>.
• Normalmente esta información no se ve cuando se navega por el documento. Dentro de la cabecera se podrá definir una breve descripción que identifica el documento mediante las marcas <TITLE> y </TITLE>.
HEAD, TITLE, META, BASE
• El resto del documento, o sea, todo aquello que no pertenezca a la cabecera, residirá entre <BODY> y </BODY>. Esta es la estructura mínima que debe poseer todo documento HTML:
<HTML> <HEAD> <TITLE>Estructura mínima de un documento HTML</TITLE> </HEAD> <BODY> Documento ...
</BODY> </HTML>
BODY
• En el código fuente de una página HTM, los comentarios se introducirán entre las marcas: <!-- y -->. Todo texto situado entre dichas marcas será ignorado por el browser, y por tanto no será visible.
Ejemplo<!-- Esto es una línea de comentarios -->
COMENTARIOS
SEPARADORES DE TEXTO
• Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto pre formateado o bloques con significado especial como direcciones o citas. Marcas de bloques:
Párrafos. <P> Saltos de línea. <BR>
Línea horizontal. <HR>Direcciones. <ADDRESS>Centrado de bloques. <CENTER>
• <P> se utiliza para separar párrafos. Dado que para el HTML todo el texto es continuo, necesitamos algún mecanismo para indicar el principio y el fin de un párrafo. Las marcas inicial y final son <P> y </P>.
PARRAFOS <P>
SALTO DE LINEA <BR>• El elemento <BR> es vacío por lo que sólo tiene marca inicial.
Indica un salto de línea.
LINEA HORIZONTAL<HR>
• <HR> es un elemento vacío por lo que solo tiene marca inicial. Se emplea para separar bloques de texto representando una línea horizontal.
CENTRADO <CENTER>
• El elemento <CENTER> centra los elementos situados entre sus marcas de apertura y cierre. Dichos elementos podrán ser: bloques de texto, tablas, enlaces, imágenes, formularios.
TIPOS DE LETRAS
• En este apartado se indica cómo definir cabeceras mediante el elemento <Hn>, y cómo modificar el tamaño y color de algún grupo de caracteres mediante el elemento <FONT> y sus atributos SIZE y COLOR.
• El elemento <Hn> se utiliza fundamentalmente para escribir encabezamientos. Asigna un tamaño a los caracteres, dependiendo del valor n, el cual varía de 1 a 6.
• Los más grandes tienen valor 1 y los más pequeños valor 6. • El texto entre estas marcas se trata en negrita. Se inserta
automáticamente un salto de párrafo
CABEZERAS <Hn>
ESTILOS DE CARACTERES
TABLAS
La estructura de una tabla se define mediante:
•una marca de inicio de la tabla (TABLE),•una marca de comienzo de una nueva línea (TR) y•una marca de comienzo de una celda (TD).
Al final de cada uno de estos elementos se deberá definir la marca de final correspondiente.Se pueden definir además textos de cabecera en las celdas (TH) y títulos para las tablas (CAPTION).
IMAGENES
• Este elemento permite incluir una imagen en un documento. Vendrá siempre acompañado por el atributo SRC que indica la dirección del fichero gráfico que contiene la imagen:
<IMGSRC="dirección_URL_del_fichero_gráfico">Ejemplos: Imagen situada en un fichero local:
<IMG SRC="images/wmelon.gif">
<IMG>
• Mediante el elemento <BODY> y el atributo BACKGROUND se permite utilizar una imagen residente en el servidor, o en un fichero local, como fondo de página.
<BODYBACKGROUND="direccion_del_fichero_grafico">• Ejemplo:• <BODY BACKGROUND="images/blanco51.gif">
IMÁGENES COMO FONDODE PAGINA
• Los gráficos animados en formato GIF permiten almacenar secuencias de imágenes en un solo fichero, las cuales forman animaciones que pueden ser visualizadas directamente por el browser. No hay que confundir estos gráficos con los vídeos en formato MPG que no son tratados por el browser sino por una herramienta
• Ejemplo: <IMG SRC="images/frogani.gif">
IMÁGENES CON AMIMACION
LISTAS
• Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes.
Define varios tipos de listas:Listas sin orden, sin numeración: <UL> , <LI>
• Listas ordenadas, con numeración: <OL> , <LI>
• Listas de directorio, similares a las listas sin orden: <DIR> , <LI>
• Listas de menú , similares a las listas sin orden: <MENU> , <LI>
• Listas de definición, típicamente un glosario: <DL> , <DT> , <DD>
• Cualquiera de los tipos de listas nombrados puede ser anidado.
• La marca <LI> es un elemento vacío, o sea, no requiere de marca de fin, y es común a las denominadas listas regulares
LISTAS SIN ORDEN <LI>
LISTAS SIN ORDEN <UL>• La marca <UL> permite generar listas no ordenadas, cada uno de los
elementos de la lista irá precedido por un símbolo (fijo por defecto) que puede variar según el nivel de anidamiento de la lista.
• La marca <OL> se utiliza para una lista ordenada o numerada. Cada marca </LI> incrementará el número que se visualizará delante del elemento de la lista
LISTAS ORDENADAS <OL>
• Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes valores:
• TYPE=1 (por defecto) para números,• TYPE=A para letras mayúsculas,• TYPE=a para letras minúsculas,• TYPE=I para numeración romana en mayúsculas,• TYPE=i para numeración romana en minúsculas.
GRACIAS
