html programacion web. lenguaje de marcas los lenguajes de marcas (markup languaje) es un conjunto...

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

<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






• 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

html programacion web. lenguaje de marcas los lenguajes de marcas (markup languaje) es un conjunto...

Documents