[modo de compatibilidad] html

Taller HTMLTaller HTML

Diseñado: Ing. José Luis Sarta.

Contenido del Taller.

• Introducción al HTML

• Directivas del HTML

• Estructura HTML• Estructura HTML

• Ya creemos nuestra pagina.

Introducción al HTML.

HTML es el lenguaje con el que se definen las páginas

web.

Muy fácil de aprender.

Cualquier persona, aunque no haya programado en la

vida, pueda enfrentarse a la tarea de crear una web. vida, pueda enfrentarse a la tarea de crear una web.

HTML es fácil y pronto podremos dominar el lenguaje.

Más adelante se conseguirán los resultados profesionales

gracias a nuestras capacidades para el diseño y nuestra

vena artista, así como a la incorporación de otros

lenguajes para definir el formato con el que se tienen que

presentar las webs

Directivas del HTML

Las directivas en HTML son aquellas “ordenes” que se encuentran entre

los símbolos <...> y que son de 2 clases: abiertas y cerradas.

�Abiertas.

Son aquellas directivas que no necesitan ser cerradas para que su acción

sea comprendida por el navegador (<HR>, , ...) sea comprendida por el navegador (<HR>, , ...)

� Cerradas.

Son aquellas directivas que para ser comprendidas por el navegador,

deben indicar en dónde comienzan y e dónde terminan.

<DIRECTIVA>...</DIRECTIVA> quedan afectadas por la acción de

dicha DIRECTIVA en su totalidad (<H1>...</H1>,

<TABLE>...</TABLE>, ...).

Estructura HTML

Todo el contenido de un documento HTML debe

encontrarse englobado en el interior de la directiva cerrada

<HTML>...</HTML>.

La directiva <HTML>...</HTML> contiene en su interior

2 bloques: <HEAD>...</HEAD> que es la directiva que 2 bloques: <HEAD>...</HEAD> que es la directiva que

señala la cabecera del documento y,

<BODY>...</BODY>, que contiene el cuerpo del

documento.

<HTML>

<HEAD> ...

</HEAD>

<BODY> ...

</BODY>

</HTML>

Diseñando nuestra pagina.

1 2

Clic

contrario

3

Diseñando nuestra pagina.

3

4

1

2

Diseñando nuestra pagina.1

2

3

Nombre .htm

Diseñando nuestra pagina

Abrimos la

carpeta

2

Icono del

explorador

1

carpeta

Diseñando nuestra pagina

4

1

23

Aplicando la estructura

<HTML>

<HEAD> ...

</HEAD>

Tips :

1. Guardamos el documento.

( Ctrl + G ).

Para efectuar cualquier cambio.

<BODY> ...

</BODY>

</HTML>

( Ctrl + G ).

2. Actualizamos nuestra pagina

web. ( F5 ).

<TITLE>

• Es otra directiva de la cabecera del documento y es una directiva cerrada (<TITLE>...</TITLE>). Esta directiva nos da la opción de darle un título al documento, y mejor aún, permite visualizarlo en el visualizador de la barra del navegador.

<HTML>

<HEAD>

<TITLE> Técnico en mantenimiento </TITLE>

</HEAD>

...

<BODY> CUERPO DEL DOCUMENTO

.

En el cuerpo del documento se encontrarán

todas las directivas HTML así como el texto,

las imágenes, sonidos, tablas, listas, etc...

Como descripción gráfica, podremos decir Como descripción gráfica, podremos decir

que todo lo que aparezca entre las directivas

<BODY>...</BODY> será visualizado de una

u otra manera en la pantalla del navegador

Directivas

• BACKGROUND="...“ • BGCOLOR="..."

Este atributo define un

gráfico en formato

.jpg o .gif que nos

Este atributo define el

color que aparecerá de .jpg o .gif que nos

servirá de fondo para

la página de nuestro

documento.

color que aparecerá de

fondo en nuestra

página.

Los colores se

definirán de dos

formas: en formato

RGB, o dando el

nombre del color

deseado en inglés.

Colores HTML

• Ejemplo

BGCOLOR="#FF0000“

en el atributo <BODY>

(<BODY BGCOLOR="#FF0000">) (<BODY BGCOLOR="#FF0000">) nos dará el color de fondo ROJO

BGCOLOR="#00FF00" el color VERDE

BGCOLOR="#0000FF" el color AZUL.

TEXT="...” Nos permite modificar el color del

texto general que aparecerá en nuestro documento.

Saltos de línea

<BODY>

Esto es un texto

que muestra como los retornos de carro

que pongo no se respetan en el

navegador

</BODY> </BODY>

Directiva (Break Return).

<BODY>

Esto es un texto 

que muestra como los retornos de 

carro que pongo no se respetan en el

navegador 

</BODY>

Párrafos

<BODY>

 En este ejemplo se muestra como pese a que no

nos importe el poder ver los retornos de carro en

distintas posiciones, la directiva de párrafo, lo que

hace es que cuando finaliza el ancho de pantalla de hace es que cuando finaliza el ancho de pantalla de

que dispone, realiza un retorno de carro y continúa

con el texto en la siguiente línea. Si reducimos el

ancho de la pantalla del visualizador, veremos como

la directiva de párrafo se adapta a este ancho, dando

un formato distinto al texto. </BODY>

Texto preformateado

Directiva cerrada (<PRE>...</PRE>) que permite visualizar el

texto tal y como se encuentre colocado entre estas 2 directivas.

<BODY> <BODY>

<PRE>

Esto es un texto

que muestra como los retornos de carro

que pongo

Pasan igual en el navegador

<PRE>

</BODY>

Estilos de texto

Los estilos de texto sirven para modificar la apariencia

o aspecto final del texto en la pantalla del navegador

cuando vemos el documento, (negrita, subrayado,

tachado, ...).

Hay 2 tipos de estilos.

• los físicos

• los lógicos

(tanto unos como otros son directivas cerradas).

Estilos Físicos

• Negrita ...

• Cursiva ...

• Subrayado ...

• Texto de Terminal <TT>...</TT>

• Letra grande <BIG>...</BIG>• Letra grande <BIG>...</BIG>

• Letra pequeña ...

• Letra tachada <S>...</S>

• Subindice ...

• Superíndice ...

Estilos Lógicos

– Negrita ... “fuerte” o marcado, se identifica con negrita.

– Enfatizado ... se identifica con el estilo de cursiva.

– Cita o texto literal <CITE>...</CITE> se identifica con el estilo de texto citado textualmente.con el estilo de texto citado textualmente.

– Texto de Terminal <KBD>...</KBD> similar a <TT>...</TT>.

– Código <CODE>...</CODE> código que normalmente se emplea para representar un elemento HTML.

– Definición <DFN>...</DFN>.

– Ejemplo <SAMP>...</SAMP>.

– Variable <VAR >...</VAR>.

Tamaño y color de letra.

• Directiva ...

Posee 3 atributos.

1. SIZE=“valor numérico” Tamaño de la letra.

Ej. FONT SIZE=“4”>...Ej. FONT SIZE=“4”>...

2. COLOR=“nombre o peso” Color de la letra.

Ej. ...

3. FACE=“nombre de letra” Tipo de letra.

Ej. ...

Cabeceras

• Directiva <Hn> …… </Hn>

HTML emplea otro medio de modificar el tamaño Son las

denominadas “Headings” o cabeceras <Hn>...</Hn>, donde n

indica un número desde 1 hasta (en un principio), 6, siendo el 1 el indica un número desde 1 hasta (en un principio), 6, siendo el 1 el

más grande de todos (el principal) y 6 el más pequeño (a la hora

de visualizar texto).

Posee el atributo ALIGN que permite cambiar la forma de alinear

la cabecera por defecto el valor es de LEFT (izda)

Teniendo CENTER (centrado) y RIGHT (derecho).

Ej. <H1 ALIGN=center>...</H1>).

Separadores, líneas Horizontales.

• <HR> (Horizontal Rule) y es una directiva abierta.

Consiste de una línea horizontal que delimita 2 partes del documento

visualizándola gráficamente.

Posee 4 atributos.

SIZE=“valor numérico” Grosor de la línea.

WIDTH=“valor numérico” Anchura de la línea.

ALIGN=“LEFT | CENTER | RIGTH”

NOSHADE Elimina, la sombra que proyecta sobre el documento.

Imágenes en HTML

La inclusión de imágenes en un documento HTML precisa

de la directiva abierta <IMG> (image). Hace uso de

varios atributos.

� SRC=“imagen”� SRC=“imagen”

Indica el nombre del fichero gráfico a mostrar (GIF o JPEG)

� ALT=“texto”

Muestra un texto alternativo a la imagen que mostramos para las

personas que no tengan navegadores gráficos.

Imágenes en HTML

� ALIGN=“TOP | MIDDLE | BOTTOM”

Indica como se ha de alinear el texto que siga o preceda a la imagen

que mostremos. TOP coloca el comienzo de texto en la parte superior

de la imagen, MIDDLE a la altura de la parte central de la misma y

BOTTOM alinea el texto en el pie de imagen.

� BORDER=“tamaño numérico”

Indica un valor numérico para el borde de una imagen que se visualiza

como un marco alrededor de la misma en la pantalla del navegador

Imágenes en HTML

� HEIGHT=“tamaño numérico”

Indica el alto de la imagen en puntos (pixeles) o en porcentaje. Se

emplea para variar el tamaño de la imagen original, así como para

indicar al navegador el tamaño de pantalla que debe de reservar para

dicho gráfico en altura.

� WIDTH=“tamaño numérico”

Indica el ancho de la imagen en puntos (pixeles) o en porcentaje. Se

emplea para variar el tamaño de la imagen original, así como para

indicar al navegador el tamaño de pantalla que debe de reservar para

dicho gráfico en anchura.

Imágenes en HTML

� HSPACE=“valor de margen”

Indica un margen horizontal que debe existir entre la imagen y el

texto que lo circunde (si lo hubiera). Este valor separa, tanto al texto

que precede como al que sigue a la imagen.

� VSPACE=“valor de margen”� VSPACE=“valor de margen”

Al igual que el anterio, pero para márgenes verticales de la imagen.

Marquesinas en HTML

Las marquesinas son una fracción de texto que se desplaza a

lo largo de la pantalla.

< MARQUEE > texto en movimiento < /MARQUEE >

Atributos.Atributos.

� Bgcolor= Con este modificador podemos modificar el color de

fondo de la marquesina.

� WIDTH = Nos permite determinar el ancho de pantalla que ocupará.

Podemos expresarlo en puntos o en %.

Ej: < MARQUEE WIDTH=50% >

Marquesinas en HTML

� HEIGHT = Igual que el caso anterior, pero refiriéndose a

la altura de la marquesina.

� ALIGN = Al igual que una imagen o una tabla, las

marquesinas se pueden alinear mediante: TOP, MIDDLE ,

BOTTOM, pero no con LEFT, RIGHT. BOTTOM, pero no con LEFT, RIGHT.

� DIRECTION = Dirección hacia la cual se mueve la

marquesina. Puede ser LEFT (por defecto ) o RIGHT.

� BEHAVIOR=ALTERNATE : Si introducimos este

parámetro, la marquesina "rebotará" de un lado a otro de la

pantalla.

Marquesinas en HTML

� SROLLAMOUNT = X : Nos permite determinar la cantidad de

puntos que se desplazará el texto en cada "salto". Cuanto más pequeña

sea la cantidad, mayor será la sensación de "scroll".

� SCROLLDELAY = X : Indica el tiempo que transcurrirá entre cada

salto del texto, expresado en milisegundos

� LOOP = Indica el nº de veces que se repetirá la acción de la

marquesina, que por defecto será infinito.

� HSPACE = Permite definir la separación horizontal del texto que esté

fuera de la marquesina, con respecto a ella.

� VSPACE = Igual que hspace, pero en referencia a la separación

vertical.

• Fin

[modo de compatibilidad] html

Education