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.

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
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>

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
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

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
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

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (13)

Destaque

Destaque (9)

Semelhante a Lenguaje html 9º guia blog

Semelhante a Lenguaje html 9º guia blog (20)

Mais de Ximena Martinez

Mais de Ximena Martinez (20)

Lenguaje html 9º guia blog