Post on 14-Apr-2015
HTML
PROGRAMACION WEB
LENGUAJE DE MARCAS
Los lenguajes de marcas (Markup Languaje) es un conjunto de palabras o marcas que se colocan junto al texto de un documento para especificar una propiedad del mismo.
<negrita> Diseño de pagina web</negrita>
<titulo>Diseño de pagina web</titulo>
• Las marcas se utilizan para indicar la forma en que se debe de representar el texto al que se aplican o la informacion que representa dicho texto
HTML es un lenguaje de marcas orientado a la publicacion de documentos en internet.
CARACTERISTICAS
• ELEMENTOSCada elemento de un documento HTML consta de marca de comienzo, un bloque de texto y una marca de fin.
<MARCA>bloque de texto</MARCA><H1> Titular e nivel 1 </H1>Estos elementos se denominan contenedores, porque contienen un bloque de texto entre dos marcas
También existen elementos vacios, que no afectan a bloques de texto y, por tanto no tienen marca de fin.<MARCA>Línea 1 <BR> línea 2
• Atributos
Muchos elementos tienen atributos que definen propiedades del elemento<MARCA ATRIBUTO = “VALOR”> Bloque de texto</MARCA>
Por ejemplo:
<H1 ALIGN = “CENTER”> Titular de nivel uno centrado</H1>
HTML no distingue entre mayúsculas y minúsculas. Tanto los nombres de las marcas como los de los textos pueden aparecer indistintamente en mayúsculas o minúsculas.
COMENTARIOS
Todo lenguaje de programación permite introducir comentarios
<!– Esto es un comentario -->
Para forzar un espacio en blanco
ELEMENTOS BASICOS DE HTML
ESTRUCTURA
• Un documento comienza y termina con la marca HTML, esta marca indica que se trata de un documento HTML
• Dentro del documento se distinguen el encabezado (HEAD) y el cuerpo (BODY)
<HTML>
<HEAD>
encabezamiento del documento
</HEAD>
<BODY>
cuerpo del documento
</BODY>
</HTML>
• En el encabezamiento pueden aparecer también elementos META, que proporcionan información sobre el contenido del documento.
• META de meta información
<META NEME=“nombre” CONTENT=“VALOR”>
<META HTTP-EQUIV=“nombre” CONTENT =“valor”>
NAME para especificar el nombre de la metainformacion
HTTP-EQUIV metainfrmacion proporcionada por HTTP
CONTENT tiene el valor de la metainformacion
<META NAME =“descripción” CONTENT =“ pagina muestra del diseño de pagina WEB por HTML”>
<META HTTP-EQUIV = "refresh" CONTENT="5" file:///C:/Users/marcela/Documents/tec/Programacion%20Web/ejercico.html>
<META HTTP-EQUIV = "expires" CONTENT="Mon, 29 Aug 2011 20:00:00">
<BODY>
informacion en la ventana del navegador
</BODY>Este es el texto que se quiere aparezca en la ventana del navegador
• Para empezar nuevos parrafos en la información dentro de la marca BODY se tienen dos opciones
Marca de apertura Marca de cierre Propósito
<P> </P> opcional Hace un brinco de línea +linea en blanco
<BR> No se usa Hace un brinco de linea
<BLOCKQUOTE> </BLOCKQUOTE> El texto es justificado
Ejercicio:
• Hacer una pagina con una autobiografía usando párrafos
ENCABEZADOS
Son líneas de texto con formato sobresaliente del cuerpo del documento.
Son usados para organizar el contenido de la pagina WEB
Los encabezados deben de ser títulos de secciones, títulos de pagina, etc.
Apertura Cierre Formato en la linea de texto
<H1> </H1> Encabezado de párrafo de nivel 1
<H2> </H2> Encabezado de párrafo de nivel 2
<H3> </H3> Encabezado de párrafo de nivel 3
<H4> </H4> Encabezado de párrafo de nivel 4
<H5> </H5> Encabezado de párrafo de nivel 5
<H6> </H6> Encabezado de párrafo de nivel 6
• Cada encabezado incluye la funcionalidad de la marca de parrafo (<P>)
Ejecicio:
Hacer una prueba usando los diferentes niveles de titulo
ALINEACION DE PARRAFOS
<DIV ALIGN=“ALIGMENT”>
APERTURA CIERRA PROPOSITO
<DIV ALIGN=“aligment”>
</DIV> Alinea el texto incluido dentro de las marcas.Las alineaciones validas: LEFT, CENTER, RIGHT
REGLAS HORIZONTALES
Las marcas de reglas horizontales son separadores de línea para las paginas
<HR>
Se pueden especificar tres atributos
WIDTH ---- es en pixeles
SIZE ---- altura en pixeles
ALIGN ---- LEFT, RIGHT, CENTER
<HR WIDTH=“##%” SIZE = “##” ALIGN=“aligment”>
DEBUGGING
Los errores comunes son :
• No incluir cierres
• Caracteres erroneos <H!>
• Marcas incorrectas <G>
• No poner comillas para los atributos
Color = red
MARCA DE APERTURA MARCA DE CIERRE TEXTO FORMATEADO
<B> </B> Letra remarcada (BOLD)
<STRONG> </STRONG> Puede ser BOLD
<I> </I> Letra italica
<EM> </EM> Enfatizado, puede ser italica
<CITE> </CITE> italica
<ADDRESS> </ADDRESS> Usada para indicar una direccion, italica
<STRIKE> </STRIKE> Rayado
<U> </U> Subrayado
<BLINK> </BLINK> Parpadear
<SUP> </SUP> Superindice
<SUB> </SUB> Subindice
<MARQUEE> </MARQUEE> Desplaza texto
<CODE> </CODE>
Se pueden usar mas de una marca
Ej:
<I><B> AGENCIA DE VIAJES></B></I>
TAMAÑO DEL CARACTER
MARCA APERTURA MARCA CIERRE PROPOSITO
<FONT SIZE =“#”> </FONT> AUMENTAR TAMAÑO
<BIG> </BIG> Lo hace mas grande
<SMALL> </SMALL> Lo hace mas pequeño
Tamaño de letra
• Font size 1 = BIG
• Font size -1 = small
COLOR
MARCA APERTURA MARCA CIERRE PROPOSITO
<FONT COLOR=“nombre”>
O
<FONT COLOR=“#Hex_rgb”
</FONT> Da color al texto RedBlueGreen
• Ejemplos de tablas de colores RGB
CARACTERES ESPECIALES
AGREGAR UNA IMAGEN
<IMG SRC=“ " WIDTH=“##" HEIGHT =“##" align=“ “ BORDER=“#”>
Attribute Value Description
align
topbottommiddle
leftright
Deprecated. Use styles instead.Specifies the alignment of an image according to surrounding elements
border pixelsDeprecated. Use styles instead.Specifies the width of the border around an image
heightpixels%
Specifies the height of an image
hspace pixelsDeprecated. Use styles instead.Specifies the whitespace on left and right side of an image
ismap ismap Specifies an image as a server-side image-map
longdes URLSpecifies the URL to a document that contains a long description of an image
usemap #mapname Specifies an image as a client-side image-map
vspace pixelsDeprecated. Use styles instead.Specifies the whitespace on top and bottom of an image
widthpixels%
Specifies the width of an image
TIPOS Y TAMAÑOS DE LETRAS
<FONT SIZE=“##” FACE=“ “ COLOR =“ “> </FONT>
SIZE : Tamaño de la letra
FACE : Tipo de letra
COLOR : El color ya sea con nombre o en hexadecimal
Ej.
<FONT SIZE="8" FACE="Lucida Calligraphy" COLOR="3B0B39> hadas</FONT>
Attribute Value Description
colorrgb(x,x,x)#xxxxxxcolorname
Deprecated. Use styles instead.Specifies the color of text
face font_familyDeprecated. Use styles instead.Specifies the font of text
size numberDeprecated. Use styles instead.Specifies the size of text
SONIDO<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
• src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL
• loop="l" determina el número de veces (l) que se debe ejecutar el fichero de audio. Si le damos el valor infinite, el fichero se reproducirá indefinidamente.
• balance="b" determina el balance del sonido entre los dos altavoces del equipoSus valores pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.
• volume="v" fija el volumen al que se oirá el sonido, y sus valores pueden variar entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos MAC.
TABLAS
• Con TH se ponen las celdas de encabezado en lugar de TD
• Para agregar bordes
• <TABLE BORDER>
• </TABLE>
• <CAPTION> TITULO DE LA TABLA</CAPTION>
<TABLE WIDTH=## HEIGHT =## VALIGN=“ “ BGCOLOR = “ “ BORDERCOLOR =“ “>
</TABLE>
• VALIGN= CENTER, RIGHT, LEFT• BGCOLOR=Color de fondo de tabla• BORDERCOLOR= color del borde de tabla