HTML PROGRAMACION WEB. LENGUAJE DE MARCAS Los lenguajes de marcas (Markup Languaje) es un conjunto...
-
Upload
casilda-londono -
Category
Documents
-
view
9 -
download
3
Transcript of HTML PROGRAMACION WEB. LENGUAJE DE MARCAS Los lenguajes de marcas (Markup Languaje) es un conjunto...
![Page 1: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/1.jpg)
HTML
PROGRAMACION WEB
![Page 2: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/2.jpg)
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>
![Page 3: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/3.jpg)
• 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
![Page 4: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/4.jpg)
HTML es un lenguaje de marcas orientado a la publicacion de documentos en internet.
![Page 5: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/6.jpg)
• 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>
![Page 7: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/7.jpg)
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.
![Page 8: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/8.jpg)
COMENTARIOS
Todo lenguaje de programación permite introducir comentarios
<!– Esto es un comentario -->
Para forzar un espacio en blanco
![Page 9: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/9.jpg)
ELEMENTOS BASICOS DE HTML
![Page 10: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/10.jpg)
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)
![Page 11: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/11.jpg)
<HTML>
<HEAD>
encabezamiento del documento
</HEAD>
<BODY>
cuerpo del documento
</BODY>
</HTML>
![Page 12: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/12.jpg)
• 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
![Page 13: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/13.jpg)
<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">
![Page 14: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/14.jpg)
<BODY>
informacion en la ventana del navegador
</BODY>Este es el texto que se quiere aparezca en la ventana del navegador
![Page 15: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/15.jpg)
• 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
![Page 16: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/16.jpg)
Ejercicio:
• Hacer una pagina con una autobiografía usando párrafos
![Page 17: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/17.jpg)
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.
![Page 18: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/18.jpg)
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
![Page 19: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/19.jpg)
• Cada encabezado incluye la funcionalidad de la marca de parrafo (<P>)
Ejecicio:
Hacer una prueba usando los diferentes niveles de titulo
![Page 20: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/20.jpg)
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
![Page 21: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/21.jpg)
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”>
![Page 22: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/22.jpg)
DEBUGGING
Los errores comunes son :
• No incluir cierres
• Caracteres erroneos <H!>
• Marcas incorrectas <G>
• No poner comillas para los atributos
Color = red
![Page 23: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/23.jpg)
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>
![Page 24: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/24.jpg)
Se pueden usar mas de una marca
Ej:
<I><B> AGENCIA DE VIAJES></B></I>
![Page 25: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/25.jpg)
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
![Page 26: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/26.jpg)
Tamaño de letra
• Font size 1 = BIG
• Font size -1 = small
![Page 27: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/27.jpg)
COLOR
MARCA APERTURA MARCA CIERRE PROPOSITO
<FONT COLOR=“nombre”>
O
<FONT COLOR=“#Hex_rgb”
</FONT> Da color al texto RedBlueGreen
![Page 28: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/28.jpg)
• Ejemplos de tablas de colores RGB
![Page 29: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/29.jpg)
CARACTERES ESPECIALES
![Page 30: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/30.jpg)
![Page 31: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/31.jpg)
![Page 32: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/32.jpg)
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
![Page 33: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/33.jpg)
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>
![Page 34: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/34.jpg)
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
![Page 35: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/35.jpg)
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.
![Page 36: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/36.jpg)
![Page 37: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/37.jpg)
TABLAS
![Page 38: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/38.jpg)
![Page 39: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/39.jpg)
• Con TH se ponen las celdas de encabezado en lugar de TD
• Para agregar bordes
• <TABLE BORDER>
• </TABLE>
• <CAPTION> TITULO DE LA TABLA</CAPTION>
![Page 40: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/40.jpg)
![Page 41: 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.](https://reader034.fdocuments.es/reader034/viewer/2022051413/552e7266550346ac768b491c/html5/thumbnails/41.jpg)
<TABLE WIDTH=## HEIGHT =## VALIGN=“ “ BGCOLOR = “ “ BORDERCOLOR =“ “>
</TABLE>
• VALIGN= CENTER, RIGHT, LEFT• BGCOLOR=Color de fondo de tabla• BORDERCOLOR= color del borde de tabla