Introducción a Html

Lic. Juana Isabel Quispe Condori

HTMLEn resumen, la estructura básica de un documento HTML queda de la forma siguiente:

Es una palabra o conjunto de palabras y dígitos que va entre el signo menor “<” y el signo mayo “>”. Estos comandos o etiquetas (Marcas o Tags) indican al navegador la forma de representar los diferentes elementos que formarán parte de la Web.

Generalmente la gran mayoría de comandos requieren de un comando inicial y un comando final o de cierre que incluye una barra “/” entre el signo menor y antes del nombre del comando, como ejemplo:

<H1> Título del Documento</H1>

COMANDOS O ETIQUETAS

Existen 2 Tipos de comandos:Abiertas.-

son los que utilizan únicamente la palabra clave (tag) al inicio de la instrucción, como por ejemplo <HR> Y < BR>.

Cerradas.-

son los que utilizan la palabra clave al inicio y final de la instrucción, como por

Ejemplo:

<BODY>………. </BODY>

<B> …………………………..</B>

<html>

<head>

<title>Una página Web de prueba</title>

</head>

<body bgcolor=“red”><H1 align=“center”>HTML</H1><align=“left”>align=“right”><i>.</i> <b>Este texto es en negrita</b>

</body>

</html>

Ejemplo:

PARA GUARDAR

Una vez que hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html (o . htm en Windows)

<html> <head>

<title>El primer documento HTML</title> </head> <body bgcolor=“red”>

Hola a todos<h1><HTML</h1> ></Font> <h2>HTML</h2>

<p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p></Font>

</body> </html>

Trabajando con HTML

Codigo de colores

ETIQUETA- COMANDOS (marcas o tag)

Background.- visualiza el fondo una imagen en formato (*.gif, *.jpg), la imagen debe guardarse en el mismo directorio que el documento html.

<body background=“sfondo.gif”><body bgcolor=“red” background=“ruta y nombre de la imagen” TEXT = “color”>

Ejemplo:<BODY background=“fondo.gif” Link=“color” ><BODY TEXT = “green”>

BR.- se utiliza para indicar un salto de línea.

<body bgcolor=“red” background=“ruta y nombre de la imagen” TEXT = “color”>

Ejemplo:<BODY background=“fondo.gif” Link=“color” ><BODY TEXT = “green”>

COMANDO DE COMPLEMENTO

Link=“color”Alink=“color”Vlink =“color”

COMANDOS DE COMPLENTO EN BODY

<P> Se utiliza para separar párrafos.<PRE>Marca que indica que el texto a insertat será visualizado con el mismo formato(fuente, tamaño, etc)<BR>Comando que se utiliza para indicar un salto de línea.

Alineación de párrafos:<align>para alinear el texto que forma parte de un párrafo se utiliza CENTER/LEFT y RIGHT

Ejemplo: <p Align=“center/Left/Right”>

DEFINICION DE BLOQUES O PARRAFOS

Se utiliza para diferenciar el tamaño de letras para los titulos, contenidos, epigrafes y organizer visualmente la información.

Ejemplo:

<html><head><title>Headings</title></head><body>

<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>

</body></html>

Tipo de encabezado o cabeceras

<html><head><title>Párrafos</title></head>

<body><p>Este es el primer párrafo.</p><p>Y este es el segundo párrafo.</p>

</body></html>

los párrafos

COMANDOS SEPARADORES

Se utiliza para la separación de párrafos una línea que es el comando HR. Es un comando abierto, es decir, no tiene una etiqueta de cierre.Size.- determina el ancho o espesor de la línea.Width.- Determina el largo de la línea horizontal el cual puede

determinarse en función al porcentaje(%)Noshade.- Permite desactivar el efecto de sombra(3D)

<HR ALING=“center / right / left” SIZE=“numero” WIDTH=“%” noshade>

<FONT>.- Comando que permite actuar sobre bloques distintos de caracteres situados entre <Font> y </Font>SIZE.- Atributo que utilizamos para establecer el tamaño de los caracteres.COLOR.- atributo que permite establecer el color de los caracteres.FACE.- Atributo que permitirá establecer el tipo de letra.Ejemplo:

<Font color=“blue”><Font color=“red” size=“14” face=“garamod”> </Font>

FORMATO BASICO DE TEXTO

COMANDOS DE ESTILO FISICO

<B> Comando que establece el estilo negrita<I> Comando que utiliza para establecer el estilo cursiva.<U> Comando que utiliza para establecer un estilo subrayado<TT> Comando que utiliza para establecer un estilo maquina de escribir al texto.<STRIKE> Se utiliza para que los textos se muestren tachado por una línea horizontal.<BIG> comando se utiliza para aumentar el tamaño del texto ligeramente.<SMALL> Comando muy similar al comando Big y que se utiliza para disminuir el tamaño del texto.<SUB> Comando que se utiliza para poner el texto como subíndice en el documento.<SUP> Comando que utiliza para poner el texto como superíndice en el documento.

COMANDOS DE ESTILO LOGICO<STRONG>comando que se utiliza para mostrar en negrita.<EM>enfatiza al texto y muestra en cursiva.

COMANDOS COMPLEMETARIOSMARQUEE .- permite crear una banda (marquesina) con un texto en su interior que

se desaplaza. comando cerrado.Align.- indica si el texto del interior de la marquesina se alinea en la zona alta(top),

en la baja(bottom) o en el centro(middle) de la misma.Behavior.- Especifica el tipo de movimiento del texto.”Scroll”, el texto se moverá de

forma “circular”, el texto sale por el extremo y se oculta por el opuesto y lo va repitiendo, “Slide” el texto saldrá de un extremo y al llegar al otro, de detendrá.”Alternate”, el texto inicia el movimiento en un extremo en dirección al otro extremo, al llegar este, inicia el movimiento en dirección contraria.

Bgcolor.- indica el color del fondo de la marquesina.Dirección.- indica hacia que lugar se desplaza el texto. Hacia la izquierda(left)o hacia la derecha(raight)Heigth.- indica la altura de la marquesina.Width. Indica la anchura de la marquesina.Hspace.- Especifica el numero de pixels de margen a la derecha e izquierda.Vspace .- especifica el numero de pixels de margen superior e inferior del texto que lo rodea.Loop.- indica el numero de veces que se desplazara por la marquesina.Scrolldelay.- indica el numero de milisegundos que tarda en reescribirse el texto por la marqusina.

Ejemplo:

<html><head><title>Párrafos</title></head>

<body><p>Este es el primer párrafo.</p><p>Y este es el segundo párrafo.</p><MARQUEE align=“top” BGCOLOR=“red” DIRECTION=“right”

LOOP=“10” SCROLLDELAY=“200”>

</body></html>

MARQUEE

<html><head><title>aplicando marquee</title></head><body><MARQUEE align=“bottom” BGCOLOR=“red” DIRECTION=“rigth” BEHAVIOR=“SCROLL” LOOP=“2” SCROLLDELAY=“200” width=“50” height=“30” hspace=“20”>

<p>Ejemplo de marquee.</p><MARQUEE></body></html>

Ejemplo

Bgsound

Comando que permite tener un sonido que se active al entrar, y esta característica se realiza a través del comando <BGSOUND><BGSOUND Src=“Archivo MIDI o WAV” Loop=“Num”>

SRC.- Fija la ruta en la que se encuentra el archivo de audio a reproducir.Loop.- Determina el numero de veces que se debe ejecutar el archivo de audio.Balance.- Determina el balance del sonido entre los dos altavoces del equipo. Volumen.- Determina el volumen al que se oirá el sonido.

Ejemplo

<html><head><title>aplicando sonido</title></head><body> <BGSOUND Src=“archivo mid o wav” Loop=“infinite” Balance=“O” Volumen=“1000”> <p>El sonido que se escucha es de esta página. Este comando también se puede utilizar en la cabecera de la pagina.</p></body></html>

Introducción a Html

Education

Transcript of Introducción a Html