[modo de compatibilidad] html

32
Taller HTML Taller HTML Diseñado: Ing. José Luis Sarta.

Upload: jonnatan-toro

Post on 26-Jun-2015

929 views

Category:

Education


1 download

DESCRIPTION

Estructuras para Paginas Web

TRANSCRIPT

Page 1: [modo de compatibilidad] HTML

Taller HTMLTaller HTML

Diseñado: Ing. José Luis Sarta.

Page 2: [modo de compatibilidad] HTML

Contenido del Taller.

• Introducción al HTML

• Directivas del HTML

• Estructura HTML• Estructura HTML

• Ya creemos nuestra pagina.

Page 3: [modo de compatibilidad] HTML

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

Page 4: [modo de compatibilidad] HTML

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>, <BR>, ...) sea comprendida por el navegador (<HR>, <BR>, ...)

� 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>, ...).

Page 5: [modo de compatibilidad] HTML

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>

Page 6: [modo de compatibilidad] HTML

Diseñando nuestra pagina.

1 2

Clic

contrario

3

Page 7: [modo de compatibilidad] HTML

Diseñando nuestra pagina.

3

4

1

2

Page 8: [modo de compatibilidad] HTML

Diseñando nuestra pagina.1

2

3

Nombre .htm

Page 9: [modo de compatibilidad] HTML

Diseñando nuestra pagina

Abrimos la

carpeta

2

Icono del

explorador

1

carpeta

Page 10: [modo de compatibilidad] HTML

Diseñando nuestra pagina

4

1

23

Page 11: [modo de compatibilidad] HTML

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

Page 12: [modo de compatibilidad] HTML

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

...

Page 13: [modo de compatibilidad] HTML

<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

Page 14: [modo de compatibilidad] HTML

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.

Page 15: [modo de compatibilidad] HTML

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.

Page 16: [modo de compatibilidad] HTML

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 <BR> (Break Return).

<BODY>

Esto es un texto <BR>

que muestra como los retornos de <BR>

carro que pongo no se respetan <BR> en el

navegador <BR>

</BODY>

Page 17: [modo de compatibilidad] HTML

Párrafos

<BODY>

<P> 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. </P> </BODY>

Page 18: [modo de compatibilidad] HTML

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>

Page 19: [modo de compatibilidad] HTML

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

Page 20: [modo de compatibilidad] HTML

Estilos Físicos

• Negrita <B>...</B>

• Cursiva <I>...</I>

• Subrayado <U>...</U>

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

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

• Letra pequeña <SMALL>...</SMALL>

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

• Subindice <SUB>...</SUB>

• Superíndice <SUP>...</SUP>

Page 21: [modo de compatibilidad] HTML

Estilos Lógicos

– Negrita <STRONG>...</STRONG> “fuerte” o marcado, se identifica con negrita.

– Enfatizado <EM>...</EM> 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>.

Page 22: [modo de compatibilidad] HTML

Tamaño y color de letra.

• Directiva <FONT>...</FONT>

Posee 3 atributos.

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

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

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

Ej. <FONT COLOR=“#000000”>...</FONT>

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

Ej. <FONT FACE=“arial”>...</FONT>

Page 23: [modo de compatibilidad] HTML

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

Page 24: [modo de compatibilidad] HTML

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.

Page 25: [modo de compatibilidad] HTML

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.

Page 26: [modo de compatibilidad] HTML

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

Page 27: [modo de compatibilidad] HTML

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.

Page 28: [modo de compatibilidad] HTML

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.

Page 29: [modo de compatibilidad] HTML

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

Page 30: [modo de compatibilidad] HTML

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.

Page 31: [modo de compatibilidad] HTML

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.

Page 32: [modo de compatibilidad] HTML

• Fin