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
• 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
&nbsp;
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%2
0Web/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>
<STRONG>
</STRONG>
<I>
</I>
<EM>
</EM>
<CITE>
</CITE>
<ADDRESS>
</ADDRESS>
<STRIKE>
</STRIKE>
<U>
</U>
Subrayado
<BLINK>
</BLINK>
Parpadear
<SUP>
</SUP>
Superindice
<SUB>
</SUB>
Subindice
<MARQUEE>
</MARQUEE>
<CODE>
</CODE>
Letra remarcada (BOLD)
Puede ser BOLD
Letra italica
Enfatizado, puede ser italica
italica
Usada para indicar una direccion, italica
Rayado
Desplaza texto
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”>
</FONT>
Da color al texto
Red
Blue
Green
O
<FONT
COLOR=“#Hex_rgb”
• Ejemplos de tablas de colores RGB
CARACTERES
ESPECIALES
AGREGAR UNA IMAGEN
<IMG SRC=“ " WIDTH=“##" HEIGHT =“##" align=“
Attribute
Value
“ BORDER=“#”>
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
pixels
Deprecated. 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
URL
usemap
#mapname
vspace
pixels
Deprecated. Use styles instead.
Specifies the whitespace on top and bottom of an image
width
pixels
%
Specifies the width of an image
Specifies the URL to a document that contains a long
description of an image
Specifies an image as a client-side image-map
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 =“ “>
</TABLE>
• VALIGN= CENTER, RIGHT, LEFT
• BGCOLOR=Color de fondo de tabla
• BORDERCOLOR= color del borde de tabla
“
Descargar

Slide 1