Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Programacion en html
1.
2. • 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.
3. • 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>).
4. • 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.
5. • 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>.
6. • 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>
7. • 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 -->
8.
9. • 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>
10. • <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>.
• El elemento <BR> es vacío por lo que sólo tiene marca inicial.
Indica un salto de línea.
11. • <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.
• 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.
12.
13. • 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.
14. • 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
15.
16.
17. 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).
18.
19. • 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">
20. • 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">
21. • 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">
22.
23. • 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.
24. • 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
• 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.
25. • 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
26. • 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.
