Lenguaje html 9º guia blog

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 HTML

INSTRUCCIONES BASICAS:

1. ESTRUCTURA BASICA 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 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 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.

1

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
AÑO LECTIVO 2011
Guía Grado9°

 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

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
AÑO LECTIVO 2011
Guía Grado9°

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

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
AÑO LECTIVO 2011
Guía Grado9°

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

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
AÑO LECTIVO 2011
Guía Grado9°

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 muy
sencilla. Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosas
mas 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

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
AÑO LECTIVO 2011
Guía Grado9°

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

<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

PROCESO Y CÓDIGO:
GESTIÓN ACADÉMICA
AÑO LECTIVO 2011
Guía Grado9°

<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

Lenguaje html 9º guia blog

Recommended

Recommended

More Related Content

Similar to Lenguaje html 9º guia blog

Similar to Lenguaje html 9º guia blog (20)

More from Ximena Martinez

More from Ximena Martinez (20)

Recently uploaded

Recently uploaded (20)

Lenguaje html 9º guia blog