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 ELEMENTOS Cada 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
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 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 Red Blue Green
Ejemplos de tablas de colores RGB
CARACTERES ESPECIALES
top bottom middle left right AGREGAR UNA IMAGEN <IMG SRC=“ " WIDTH=“##" HEIGHT =“##" align=“ “ BORDER=“#”> Attribute Value Description align top bottom middle left right Deprecated. Use styles instead. Specifies the alignment of an image according to surrounding elements border pixels Deprecated. Use styles instead. Specifies the width of the border around an image height pixels % Specifies the height of an image hspace Deprecated. Use styles instead. Specifies the whitespace on left and right side of an image ismap Specifies an image as a server-side image-map longdes URL Specifies 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 Deprecated. Use styles instead. Specifies the whitespace on top and bottom of an image width 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 color rgb(x,x,x) #xxxxxx colorname Deprecated. Use styles instead. Specifies the color of text face font_family Deprecated. Use styles instead. Specifies the font of text size number Deprecated. 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 =“ “> VALIGN= CENTER, RIGHT, LEFT BGCOLOR=Color de fondo de tabla BORDERCOLOR= color del borde de tabla