[modo de compatibilidad] HTML

Taller HTML

Diseñado: Ing. José Luis Sarta.

Contenido del Taller.

• Introducción al HTML
• Directivas del 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.
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>, , ...)

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

Clic
contrario

1 2

3

3

4

2
1

1

2

Nombre .htm

3

Diseñando nuestra pagina
2

Abrimos la Icono del
carpeta explorador

1

Diseñando nuestra pagina
4

1

2 3

Aplicando la estructura

<HTML>
Para efectuar cualquier cambio.
<HEAD> ... Tips :

</HEAD> 1. Guardamos el documento.
( Ctrl + G ).

<BODY> ... 2. Actualizamos nuestra pagina
web. ( F5 ).

</BODY>

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

<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
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 Este atributo define el
gráfico en formato color que aparecerá de
.jpg o .gif que nos fondo en nuestra
servirá de fondo para página.
la página de nuestro Los colores se
documento. 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">)
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>

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
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>
<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 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.
– 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”>...

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

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”

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.

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.

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.

[modo de compatibilidad] HTML

Más contenido relacionado

La actualidad más candente

Destacado

Similar a [modo de compatibilidad] HTML

Más de JONNATAN TORO

Último

[modo de compatibilidad] HTML