Vous êtes sur la page 1sur 20

DISEO DE PGINAS WEB

LENGUAJE HTML
Ing Carlos Alberto Valdivia Salazar
Contenido
Qu es una pgina Web?
Qu se necesita?
Lenguaje HTML
Definiciones bsicas
Estructura de una pgina Web
La etiqueta <BODY>
Etiquetas de texto y formatos

Qu es una pgina Web?
Es un estndar para mostrar informacin en
Internet. Puede ser texto, video, imgenes, etc.
Los archivos HTML o pginas Web tienen por
extensin .html o .htm
Un sitio Web es un conjunto de pginas Web que se
encuentran enlazadas unas con otras y tratan sobre
un tema en particular.
En un sitio Web, casi siempre la primera pgina
que se muestra lleva por nombre index.html

Qu se necesita?
Editor
Cualquier programa para edicin de texto simple, sin
formatos especiales para agregar las etiquetas HTML. Se
tiene entre otros:
Block de notas
Dreamweaver
EditPlus
Navegador
Programa que interpreta las etiquetas HTML de la pgina y
presenta la informacin. Se tiene entre otros:
Microsoft Internet Explorer
Mozilla Firefox
Opera
Organizando pginas Web
Se recomienda crear una carpeta en donde
guardar las pginas Web.
Los nombres de las pginas Web deben indicar la
informacin que van a mostrar.
Los diferentes tipos de archivos que se necesitan
agregar a una pgina deberan estar en carpetas
(imgenes, videos, animaciones, documentos, etc).

Lenguaje HTML
HTML (HyperText Markup Language) es un lenguaje
de marcas utilizado para elaborar pginas Web.
Se basa en etiquetas o TAGs que permiten indicar
el tipo de informacin a presentar en la WWW.
Las etiquetas es un texto encerrado entre los
caracteres < y >
Por ejemplo: <TABLE> nos permite definir una tabla
con filas y columnas.
Cada etiqueta puede incluir atributos que le dan
diferentes posibilidades de presentacin.
Las etiquetas
Entre otras cosas, las etiquetas permiten:
Definir la estructura de un documento HTML.
Aplicar estilos a los textos (negrita, cursiva, )
Incluir hiperenlaces, que permiten acceder a
documentos relacionados con nuestra informacin.
Incluir imgenes y archivos multimedia (grficos, videos,
audios)
Tienen la forma:
<Etiqueta atributos>Contenido a mostrar</Etiqueta>

Reglas de las etiquetas
Cada etiqueta debe estar abierta y cerrada. La
etiqueta que cierra debe incluir una barra inclinada.
Ejemplos:
<TABLE></TABLE>
<H2></H2>
Algunas etiquetas no necesitan ser cerradas.
<P> para prrafos
<BR> para bajar una lnea
Las etiquetas pueden ser escritas en maysculas o
minsculas.
Slo se acepta un espacio en blanco.
Estructura de un documento HTML
<HTML> Indica el inicio del documento
<HEAD> Indica el inicio del encabezado
<TITLE> Inicio del ttulo del documento
</TITLE> Final del ttulo del documento
</HEAD> Indica el final del encabezado
<BODY> Inicio del cuerpo del documento
Instrucciones y etiquetas HTML
</BODY> Final del cuerpo del documento
</HTML> Indica el final del documento
Creando una primera pgina
Abrir el block de Notas.
Escribir el siguiente cdigo HTML





Guardar el archivo como pagina1.html
Los colores
Se pueden especificar por su nombre o por su
cdigo de color (en hexadecimal).
Ejemplos:
Black - #000000 (color negro)
Blue - #0000FF (color azul)
Navy - #000080 (color azul marino)
Purple - #800080 (color prpura)
Yellow - #FFFF00 (color amarillo)
Red - #FF0000 (color rojo)
Atributos de etiqueta <BODY>
bgcolor = nombre o cdigo de color
Indica un color para el fondo de la pgina.
<BODY bgcolor = red>
<BODY bgcolor = #FF0000
background = direccin de imagen
Permite colocar una imagen de fondo a la pgina.
<BODY background=fondo.jpg>
text = nombre o cdigo de color
Indica un color para todo el texto de la pgina.
<BODY text=Yellow>
Las cabeceras
Permiten colocar ttulos en las pginas.
Se tiene 6 tipos en encabezados.
Ejemplo Salida
<H1> Cabecera 1 </H1>
Cabecera 1
<H2> Cabecera 2 </H2>
Cabecera 2
<H3> Cabecera 3 </H3>
Cabecera 3
<H4> Cabecera 4 </H4>
Cabecera 4
<H5> Cabecera 5 </H5>
Cabecera 5
<H6> Cabecera 6 </H6>
Cabecera 6
Etiquetas de formato de texto
Texto en negrita
<B> </B>
Texto en cursiva
<I> </I>
Texto subrayado
<U> </U>
Letra en superndice
<SUP> </SUP>
Letra en subndice
<SUB> </SUB>

Etiquetas de formato de texto
Parpadeo (slo en algunos navegadores)
<BLINK> </BLINK>
Texto tipeado (como estilo de texto)
<TT> </TT>
Texto tachado
<S></S>
Texto centrado
<CENTER> </CENTER>
La etiqueta <FONT>
Permite modificar atributos para un texto o
prrafo: color, tipo de letra o tamao.
<FONT>
Color=nombre de color o cdigo
Face=tipo de letra
Size=tamao
</FONT>
Otras etiquetas para texto
Bajar lnea de un prrafo
<BR>
Cambio de prrafo
<P>
Lnea horizontal
<HR>
Texto preformateado
<PRE> </PRE>
Comentarios (no se muestran en la pgina)
<!-- -->

Alineaciones
Se utiliza el atributo ALIGN y se aplica a la
mayora de etiquetas HTML.
Valores:
Left
Right
Center
Justify
Ejemplo para un prrafo centrado
<P Align=Center>
Probando prrafos y alineacin
Preguntas

Vous aimerez peut-être aussi