Manual html1 (Informatica Aplia Educa)

COLEGIO TECNICO NACIONAL”MARISCAL SUCRE”

Autor: Fabián Ruiz INFORMATICA A. EDUCACION 1ro Bachillerato

Que es HTML?

El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de marcación de

hipertexto), es un lenguaje informático diseñado para estructurar textos y presentarlos en forma

de hipertexto, que es el formato estándar de las páginas web.

Hipertexto.- Se refiere a cualquier texto disponible en el World Wide Web que contenga

enlaces con otros documentos. Utilizar el hipertexto es una manera de presentar información

en la cual texto, sonido, imágenes y acciones están enlazados entre sí de manera que se

pueda pasar de una a otra en el orden que se desee.

ARCHIVOS HTML.

Un archivo HTML puede ser leído, por un editor de texto como el Bloc de notas o Notepad.

Para este modulo cuando creamos un archivo HTML debemos guardarlo con la extensión html.

Ejemplo. Prueba.html, trabajo.html

Nota: Tomar en cuenta que la extensión debe ser en minúsculas.

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

COMO UTILIZAR Y EJECUTAR .?

Después de una breve introducción a este tema (espero

que hayan leído) entramos a de lleno a HTML. Lo único

que necesitamos es un simple editor de textos Windows

lo tiene y lo llamamos de la siguiente forma.

1. Clic en inicio

2. Escribimos Bloc

4. clic en Bloc de notas

ESTRUCTURA BASICA DE UN DOCUMENTO HTML

Un documento escrito en HTML contendría básicamente las siguientes etiquetas:

<HTML> Indica el inicio del documento.

<HEAD> Inicio de la cabecera.

<TITLE> Inicio del título del documento.



</TITLE> Final del título del documento.

</HEAD> Final de la cabecera del documento.

<BODY> Inicio del cuerpo del documento.

</BODY> Final del cuerpo del documento.

</HTML> Final del documento.

En la etiqueta <BODY> se encuentra toda aquella información visible en la pantalla del

navegador. Es aquí donde se van a alojar las demás etiquetas ya sean de texto, sonido,

imagen, vínculos, etc. Las cuales más adelante estaremos tratándolas.

Las mayúsculas o minúsculas son indiferentes al escribir etiquetas

<html>, <HTML> o <HtMl> .

COMENZANDO A PRACTICAR HTML.

Este es un pequeño ejemplo el cual nos permitirá entender los temas que más adelante

abarcaremos de forma individual. Por favor copiarlo al pie de la letra guardarlo (ejemplo.html) y

correrlo con su navegador (Mozilla Firefox o internet Explorer)

<html> <head> <title>EJEMPLO BASICO</title> </head> <body bgcolor="#bbggff"> Hola esta es mi primera pagina </body> </html>

ETIQUETA <BODY>.-

Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra página

web deberemos escribirlo dentro de la etiqueta body. Eso es lo que llamamos el "cuerpo" del

documento. Es la parte visible. Pero debes saber que ese cuerpo, o sea, que la etiqueta body

también tiene atributos para darle el aspecto que nosotros deseemos.

<BODY bgcolor=”#código color”> escritura de texto </BODY> .- Nos permitirá definir el

color de fondo de nuestra pagina.

Ejemplo:

<html> <head> <title>COLORES DE FONDO</title> </head> <body bgcolor="#bbggff">



Este es un ejemplo de cómo poner color al fondo de la pagina </body> </html> Nota: Recuerde el código”#000000” representa a negro y el “#ffffff” es blanco. Es decir

usted podrá tener una gama de colores al mesclar desde el 0 a la F.

<BODY background=”dirección de la imagen”> </BODY> .- Cuando quiera que su página

tenga una imagen. En ese caso deberás indicarlo con esta etiqueta.

<html> <head> <title>Todos los encabezados</title> </head> <body background="corazon.gif"> esto es un ejemplo con fondo </body> </html> Nota: Recuerda que debes tener la imagen en la misma carpeta donde tienes el archivo html. Y al colocar el nombre de la imagen también debes fijarte en la extensión de la imagen. <BODY text=”#código color”>escritura de texto </BODY> .- Sirve para predefinir ahora el

color del texto de nuestra web. Ejemplo:

<html> <head> <title>Todos los encabezados</title> </head> <body text="#rrbbff"> Este es un ejemplo de como poner color al texto de la página </body> </html>

<MARQUEE></MARQUEE> MARQUESINA Y SUS PARAMETROS

Sirve para hacer que el contenido de un bloque ya sea texto o imágenes se desplace por la

página web.

Ejemplo de la etiqueta básica:

<MARQUEE> Texto que se desplaza </MARQUEE>

Al escribir esta codificación observaremos que por defecto se moverá el texto de derecha a

izquierda.

Ejemplo: Escriba la codificación y guárdela “ Marquesina.html” y luego ejecútela.



<html> <head> <title>MARQUESINA SIMPLE</title> </head> <body> <MARQUEE> TEXTO EN MOVIMIENTO</MARQUEE> </body> </html>

La marquesina tiene muchos parámetros o atributos, veremos algunas de ellas:

<MARQUEE DIRECTION=” “> </MARQUEE> Establece en qué dirección se mueve el contenido del bloque en la pantalla. Puede tener los siguientes valores:

<MARQUEE DIRECTION=”LEFT”> TEXTO </MARQUEE> izquierda (por defecto)

<MARQUEE DIRECTION=”RIGHT”></MARQUEE> derecha

<MARQUEE DIRECTION=”UP”></MARQUEE> hacia arriba

<MARQUEE DIRECTION=”DOWN”></MARQUEE> hacia abajo

Ejemplo:

<html> <head> <title>DIRECCION DE TEXTO</title> </head> <body> <MARQUEE direction=”RIGHT”>EL TEXTO SE MOVERA HACIA LA DERECHA</MARQUEE> <MARQUEE direction=”LEFT”>EL TEXTO SE MOVERA HACIA LA IZQUIERDA</MARQUEE> <MARQUEE direction=”UP”>EL TEXTO SE MOVERA HACIAARRIBA</MARQUEE> <MARQUEE direction=”DOWN”>EL TEXTO SE MOVERA HACIA ABAJO</MARQUEE> </body> </html>

<MARQUEE BEHAVIOR=””> </MARQUEE> Indica cómo se mueve el contenido dentro de la

marquesina. Puede tener tres valores:

<MARQUE BEHAVIOR=”SCROLL”> TEXTO <MARQUEE>.- El contenido se desplaza

normalmente.

<MARQUEE BEHAVIOR=”SLIDE”> TEXTO <MARQUEE>.- El contenido se detiene al llegar

al extremo.

<MARQUEE BEHAVIOR=”ALTERNATE”> texto <MARQUEE> Se moverá alternativamente en una dirección y otra.

EJEMPLO:

<html> <head>



<title>MARQUESINA DIRECCIONES</title> </head> <body> <MARQUEE BEHAVIOR=SCROLL>EL TEXTO RAPIDO</MARQUEE> <MARQUEE BEHAVIOR=SLIDE>EL TEXTO DETENDRA</MARQUEE> <MARQUEE BEHAVIOR=ALTERNATE>EL TEXTO ALTERNATIVO</MARQUEE> </body> </html> Adicionalmente existen 2 parámetros para la velocidad de la marquesina y son:

1.<MARQUEE SCROLLAMOUNT= > </MARQUEE> .- Define la cantidad de desplazamiento del bloque Cuanto mayor es el número, más rápido avanza.

Ej:

<title>MARQUESINAS</title> </head> <body> <MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE> </body> </html>

2.<MARQUEE SCROLLDELAY = > </MARQUEE>.- Define el tiempo entre cada movimiento

de avance, Cuanto mayor es el número más lento avanza.

<title>MARQUESINAS</title> </head> <body> <MARQUEE SCROLLDELAY =200> Espero mucho </MARQUEE> </body> </html>

<MARQUEE BGCOLOR= "código de color"> </MARQUEE> Indica el color del fondo de la

marquesina.

<html> <head> <title>MARQUESINA CON COLOR</title> </head> <body> <MARQUEE BGCOLOR="#447733">color verde en marquesina</MARQUEE> </body> </html>

Nota: La marquesina también de aplica no solo en texto además a imágenes siempre y cuando

este dentro del bloque marquesina

Documents

Manual html1 (Informatica Aplia Educa)