Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PROCESO Y CÓDIGO:                                                                                GESTIÓN ACADÉMICA        ...
PROCESO Y CÓDIGO:                                                                              GESTIÓN ACADÉMICA          ...
PROCESO Y CÓDIGO:                                                               GESTIÓN ACADÉMICA                         ...
PROCESO Y CÓDIGO:                                                               GESTIÓN ACADÉMICA                         ...
PROCESO Y CÓDIGO:                                                                   GESTIÓN ACADÉMICA                     ...
PROCESO Y CÓDIGO:                                                                        GESTIÓN ACADÉMICA                ...
PROCESO Y CÓDIGO:                                                                       GESTIÓN ACADÉMICA                 ...
Upcoming SlideShare
Loading in …5
×

Lenguaje html 9º guia blog

452 views

Published on

Published in: Education, Technology, Business
  • Be the first to comment

  • Be the first to like this

Lenguaje html 9º guia blog

  1. 1. PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA I.E. CÁRDENAS CENTRO CC-PR-013 AÑO LECTIVO 2011 ÁREA DE TECNOLOGÍA E INFORMÁTICA Guía Grado9° ESP. XIMENA PAOLA MARTINEZ Q. LENGUAJE HTMLINSTRUCCIONES BASICAS:1. ESTRUCTURA BASICA DE UN DOCUMENTO HTMLEl principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera: <XXX> Este es el inicio de una etiqueta. </XXX> Este es el cierre de una etiqueta.Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente.Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debeestar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML>Un documento HTML en sí está dividido en dos zonas principales:  El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>  El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>principalmente la información encontrada en el encabezamiento es el título del documento, comprendidoentre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo quevean los demás en el momento de publicarDentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, Gifanimados etc.)Por tanto, la estructura de un documento HTML queda de esta manera:<HTML><HEAD><TITLE> Título de la página </TITLE></HEAD><BODY>[Aquí van las etiquetas que visualizan la página]</BODY></HTML>ALGUNOS CODIGOS:EL FORMATO DEL COLOR:El formato más usado para definir el color es el RGB (Red, Green, Blue) que se basa en asignar un “peso” o valora cada uno de los tres componentes del color: rojo, verde, azul. El código tiene pues el siguiente formato:#RRGGBB, y los valores de cada componente son números hexadecimales que van desde los extremos 00 a FF,pasando por niveles intermedios (33, 66, 99, etc). Existen aplicaciones que asignan estos valoresautomáticamente.Como ejemplo práctico asignaremos a continuación valores extremos a cada uno de los tres colores básicos,obteniendo los siguientes códigos de colores RGB: Negro: #000000 Rojo: #FF0000 Amarillo: #FFFF00 Blanco: #FFFFFF Verde: #00FF00 Púrpura: #FF00FF Azul: #0000FF Celeste: #00FFFFOtra forma alternativa de asignar un color es indicando su nombre. El HTML 3.2 recoge una lista de 16 colores.Estos colores, que tienen su origen en el estándar soportado por la paleta VGA de Windows, son los siguientes:AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITEy YELLOW. 1
  2. 2. PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA I.E. CÁRDENAS CENTRO CC-PR-013 AÑO LECTIVO 2011 ÁREA DE TECNOLOGÍA E INFORMÁTICA Guía Grado9° ESP. XIMENA PAOLA MARTINEZ Q. FONDO DE LA PANTALLA: <BGCOLOR=“#RRGGBB”> Valor RGB del color de fondo. <BGCOLOR=NOMBRE DE COLOR> Nombre del color usado como fondo. <BODY BGCOLOR ="BLUE"> Color del fondo de la página <BACKGROUND=“URL” > Dirección de la imagen que se usará como fondo del documento. <BODY BACKGROUND="imagen.gif"> ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página PARRAFOS Y FUENTES: <P>. </P> inicio y fin de párrafo <P ALIGN =”LEFT”, “CENTER” Ò “RIGHT”> alineación del texto <FONT FACE = "ARIAL" SIZE:"4" COLOR=PURPLE> </Font> Fuente, tamaño y color <B></B>: Negrita (Bold), el texto aparece con un tipo de letra más grueso. <I></I>: Cursiva (Italic), el texto se muestra ligeramente inclinado. <U></U>: Subrayado (Underline), se incluye una línea horizontal bajo cada letra <S></S>: Tachado (Strikeout). <SUB></SUB>: Subíndice (Subscript). <SUP></SUP>: Superíndice (Superscript). <BIG></BIG>: Tamaño Grande (Big) de letra. <SMALL></SMALL>: Tamaño Pequeño (Small) de letra. <MARQUEE> MENSAJE </MARQUEE> Marquesina <P> </P> Divisor de Párrafos <BR> <P> deja un renglón en blanco <HR> Barra horizontal LISTAS Listas numeradas: para presentar cosas en un orden determinado <OL> <LI> Primera cosa <LI> Segunda cosa <LI> Tercera cosa <LI> Etc. </OL> Listas con viñetas: sirven para presentar cosas que, por no tener un orden determinado, <UL> no necesitan ir precedidas por un número <LI> Una cosa <LI> Otra cosa <LI> Otra más <LI> Etc. </UL> IMÁGENES, SONIDO Y VIDEO <IMG SRC="imagen.gif"> Inserta imágenes <IMG SRC="nombre.gif" ALIGN=RIGHT> Inserta imágenes a la derecha <IMG SRC="nombre.gif" ALIGN=LEFT> Inserta imágenes a la izquierda <center> <IMG SRC="imagen.gif"> </center> Inserta imágenes centradas <BGSOUND SRC="fichero_de_sonido" LOOP=3> insertar sonido <img dynSRC="nombre del archivo de video" LOOP=n width="400" height="300"> inserta videos <H1> <A href="enlace1.htm"> regresar </A> </H1> enlaza dos paginas web loop=“número” Número de veces que se repite el sonido. loop=infinite El sonido se repetirá indefinidamente. 2
  3. 3. PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA I.E. CÁRDENAS CENTRO CC-PR-013 AÑO LECTIVO 2011 ÁREA DE TECNOLOGÍA E INFORMÁTICA Guía Grado9° ESP. XIMENA PAOLA MARTINEZ Q.EJERCICIO 1:La edición de nuestra primera pagina web será realizada en el procesador depalabras que tiene Windows como el block de notas 1. Ingrese al block de notas de la siguiente manera Inicio- programas – accesorios – Bloc de notas 2. digite la siguiente información : <HTML> <HEAD> <TITLE> Mi pagina en el Web - 1 </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera Pagina </CENTER> </H1> <HR> Esta es mi primera pagina, aunque todavía es muy sencilla. Como él lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas más interesantes. <P> Aquí pronto ira un segundo párrafo, que les parece.</BODY></HTML> 3. Procedamos a guardar la información teniendo cuidado de dar la extensión del nombre de archivo como HTML Ejemplo Pagina1.html 4. Para visualizar como va nuestra primera pagina web minimicemos todas las ventanas, doble clic sobre el icono Mi PC, doble clic en el icono del documento (Pagina1.html).el documento visualizado será muy sencillo pero es un paso importante en nuestro aprendizaje. 3
  4. 4. PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA I.E. CÁRDENAS CENTRO CC-PR-013 AÑO LECTIVO 2011 ÁREA DE TECNOLOGÍA E INFORMÁTICA Guía Grado9° ESP. XIMENA PAOLA MARTINEZ Q.EJERCICIO 2: Cree un nuevo documento del Bloc de notas y digite lo siguiente :<HTML><HEAD><TITLE> Mi pagina del Web - 2 </TITLE></HEAD><BODY><CENTER><H1> Mis aficiones </H1></CENTER><HR>Sin un orden particular, mis <B> aficiones </B> son las siguientes:<UL><LI> El cine<LI> El deporte<UL><LI> Natación<LI> Baloncesto</UL><LI> La música</UL>La música que mas me gusta es <I> (en orden de preferencia): </I><OL><LI> El rock<LI> El jazz<LI> La música clásica</OL></BODY></HTML> 5. Proceda a guardarlo con el nombre de pagina2.HTML 6. para visualizarlo repita el paso 4 4
  5. 5. PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA I.E. CÁRDENAS CENTRO CC-PR-013 AÑO LECTIVO 2011 ÁREA DE TECNOLOGÍA E INFORMÁTICA Guía Grado9° ESP. XIMENA PAOLA MARTINEZ Q.EJERCICIO 3:Temas: Insertar imágenes o animaciones Alineación y dimensiones de imágenes Colores de fondo y colores de texto<HTML> <HEAD> <TITLE> Mi pagina del Web - 2 </TITLE> </HEAD> <BODY BGCOLOR="#23624556"> <H1> <CENTER> Segunda Pagina </CENTER> </H1> <HR><FONT COLOR="4619041"> Esta es mi segunda pagina, </FONT>aunque todavia es muysencilla. Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosasmas interesantes.<br> Aqui va un segundo parrafo.<FONT COLOR="#FF0000"> Este texto es de color rojo </FONT><FONT SIZE=+3><UL><LI> <FONT COLOR="4619041"> Mamíferos </FONT><LI> Peces<UL> <LI> Sardina<LI> Bacalao </UL></FONT><LI> Aves</UL><OL><LI> El rock<LI> El jazz<LI> La musica clasica</OL><center> <IMG SRC="Ag00001_.gif"> </center><br><p><br><p> <img src="Ag00003_.gif"align=right> </BODY></HTML>no olvide guardar con extensión .html en su dispositivo de trabajo 5
  6. 6. PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA I.E. CÁRDENAS CENTRO CC-PR-013 AÑO LECTIVO 2011 ÁREA DE TECNOLOGÍA E INFORMÁTICA Guía Grado9° ESP. XIMENA PAOLA MARTINEZ Q.EJERCICIO 4:Temas: Insertar sonidos Insertar Videos Establecer vínculos entre páginasProcedimiento: 1. Cree en el escritorio Una carpeta con el nombre de Provisional y copie en dicha carpeta los sonidos que vaya a utilizar , al igual que un video 2. Ingrese al bloc de notas y digite el siguiente código html<HTML><HEAD><TITLE> Mi pagina con sonidos </TITLE></HEAD><BODY><CENTER><H1> esta pagina suena </H1></CENTER><HR>La musica que mas me gusta es <I> (en orden de preferencia): </I><OL><LI> El rock<LI> El jazz<LI> La musica clásica</OL> <BGSOUND SRC="fichero_de_sonido" LOOP=3><H1> siguiente pagina </H1></BODY></HTML> 3. Grave esta pagina en la carpeta provisional con el nombre de enlace1.html 4. En una pagina nueva del bloc de notas digite el siguiente código<HTML><HEAD><TITLE> Mi pagina con video </TITLE></HEAD><BODY><CENTER><H1> esta pagina tiene movimiento </H1></CENTER><HR>Los videos que mas me gustan son <I> (en orden de preferencia): </I><OL><LI> peliculas<LI> XXX 6
  7. 7. PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA I.E. CÁRDENAS CENTRO CC-PR-013 AÑO LECTIVO 2011 ÁREA DE TECNOLOGÍA E INFORMÁTICA Guía Grado9° ESP. XIMENA PAOLA MARTINEZ Q.<LI> Cuentos infantiles</OL><img dynSRC="nombre del archivo de video" LOOP=n width="400" height="300"><H1> regresar </H1></BODY></HTML> 5. Grave en la carpeta provisional con el nombre de enlace2.html 6. Para enlazar las dos paginas proceda a insertar el siguiente código 7. El la pagina enlace1 donde se encuentra la palabra siguiente pagina inserte este código <a href="enlace2.html"> siguiente pagina </A> la linea textualmente deberá quedar así: <H1> <A href="enlace2.htm"> siguiente pagina </A> </h1> 8. Grave y actualice 9. en la pagina enlace2 donde se encuentra la palabra regresar digite el siguiente código <a href="enlace1.htm"> regresar </A> textualmente debe quedar así <H1> <A href="enlace1.htm"> regresar </A> </H1>10. Grave , actualice y proceda a correr las paginas 7

×