Lenguaje html 9º guia blog

I.E. CÁRDENAS CENTRO

PROCESO Y CÓDIGO: GESTIÓN ACADÉMICA

CC-PR-013

AÑO LECTIVO 2013

ÁREA DE TECNOLOGÍA E INFORMÁTICA ESP. XIMENA PAOLA MARTÍNEZ Q.

Guía Grado9°

1

LENGUAJE HTML

INSTRUCCIONES BÁSICAS: 1. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML El 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 debe estar 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, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás en el momento de publicar Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, Gif animados 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 CÓDIGOS: 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 valor a 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 valores automá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: #00FFFF Otra 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, WHITE y YELLOW.

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.



CC-PR-013

AÑO LECTIVO 2013


Guía Grado9°

2

<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.

EJERCICIO 1: La edición de nuestra primera pagina web será realizada en el procesador de palabras 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>



CC-PR-013

AÑO LECTIVO 2013


Guía Grado9°

3

<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.

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



CC-PR-013

AÑO LECTIVO 2013


Guía Grado9°

4

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 todavía es muy sencilla. Como el lenguaje

HTML no es difícil, pronto estaré en condiciones de hacer cosas mas interesantes.

<br> Aquí va un segundo párrafo.

<FONT COLOR="#FF0000"> Este texto es de color rojo </FONT>

<FONT SIZE=+3>

<UL>

<LI> <FONT COLOR="4619041"> Mamíferos </FONT>

Los mamíferos (Mammalia) son una clase de vertebrados amniotas homeotermos (de "sangre caliente"),

con pelo y glándulas mamarias productoras de leche con la que alimentan a las crías.

<LI> Cuadrupedos <UL>

<LI> Vaca

<LI> Gata

<LI> Cerdo

</UL>

</FONT>

<LI> <FONT COLOR="4619041"> Ovìparos </FONT>

Un animal ovíparo (del latín ovum, "huevo", y parire, "parir") es un animal cuya modalidad de reproducción incluye el

depósito de huevos en el medio externo donde completan su desarrollo antes de la eclosión

<OL>

<LI> Insectos

<LI> aves <LI> peces

</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

EJERCICIO 4: Temas: Insertar sonidos

Insertar Videos

Establecer vínculos entre páginas

Procedimiento:

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

http://es.wikipedia.org/wiki/Clase_(biolog%C3%ADa)

http://es.wikipedia.org/wiki/Vertebrados

http://es.wikipedia.org/wiki/Amniotas

http://es.wikipedia.org/wiki/Homeotermos

http://es.wikipedia.org/wiki/Pelo

http://es.wikipedia.org/wiki/Gl%C3%A1ndulas_mamarias

http://es.wikipedia.org/wiki/Leche

http://es.wikipedia.org/wiki/Lat%C3%ADn

http://es.wikipedia.org/wiki/Animal

http://es.wikipedia.org/wiki/Reproducci%C3%B3n

http://es.wikipedia.org/wiki/Huevo_(biolog%C3%ADa)

http://es.wikipedia.org/w/index.php?title=Eclosi%C3%B3n&action=edit&redlink=1



CC-PR-013

AÑO LECTIVO 2013


Guía Grado9°

5

EJERCICIO 4:

<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 música 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

<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

Lenguaje html 9º guia blog

Documents

Transcript of Lenguaje html 9º guia blog