[modo de compatibilidad] html
Post on 26-Jun-2015
928 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>, <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>, ...).
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 <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>
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>
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 <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>
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>.
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>
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
top related