Introducción a HTML: Estructura básica de un documento y etiquetas

COLEGIO TECNICO NACIONAL”MARISCAL SUCRE”
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.

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

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


Introducción a HTML: Estructura básica de un documento y etiquetas

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Introducción a HTML: Estructura básica de un documento y etiquetas

Similar a Introducción a HTML: Estructura básica de un documento y etiquetas (20)

Más de Mariscalino2012

Más de Mariscalino2012 (8)

Introducción a HTML: Estructura básica de un documento y etiquetas