DOCENTE: Ing. Eddye Sánchez Castillo 29/04/2014 1.
-
Upload
emerico-arguello -
Category
Documents
-
view
274 -
download
0
Transcript of DOCENTE: Ing. Eddye Sánchez Castillo 29/04/2014 1.
PROGRAMACION WEB
DOCENTE: Ing. Eddye Sánchez Castillo
Facultad de Ingeniería
WWW.CENEINNOVA.COM/EDDYESANCHEZ/29/04/20141
2
¿QUÉ ES PROGRAMACIÓN WEB?Es una de las disciplinas dentro del mundo de Internet que
más se ha desarrollado y con las posibilidades que abre y genera, ya que no sólo consigue satisfacer necesidades que se generan, sino que sin la generación de necesidades ofrecen servicios a los usuarios que éstos no habían imaginado.La programación del sitio web tiene la misma importancia que el DISEÑO WEB, no se trata de poner uno por encima de otro, los dos se complementan y hacen que la eficiencia del sitio web sea importante.
29/04/2014
3
PAGINAS HTMLEs muy importante para iniciar el proceso de instalación de paginas web.Con HTML veremos las herramientas necesarias que necesita PHP con MYSQL para generar paginas estáticas y dinámicas.
HTML:Significa Hyper Text Markup Language (Lenguaje de Marcación de Hiper Texto) y permite la creación de paginas web.Este lenguaje se basa en tags que son instrucciones para indicar como se mostrara el texto y atributos que son los valores que se le puede asignar a los tag.
29/04/2014
4
ESTRUCTURA DE UNA PAGINA HTML
La creación de un documento o pagina web con HTML requiere de la siguiente estructura:
Toda pagina web que se cree con HTML debe empezar con la etiqueta <HTML> y terminar con </HTML>
<HTML><HEAD>
</HEAD>
<BODY>
</BODY></HTML>
29/04/2014
5
EDITORES DE HTMLLos editores son los programas donde se pueden escribir las instrucciones para crear las paginas Web.Un editor es el Bloc de Notas de Windows
Otro editor que se puede utilizar es Dreamweaver.
Sin importar el editor que utilice,
siempre debe grabar documentos
HTML con la extensión HTM o
HTML
29/04/2014
6
EDITORES DE HTMLEl ejemplo Nº 01 se ha escrito en bloc de notas y se ha grabado con el nombre e Primera.html
29/04/2014
7
EDITORES DE HTMLAl grabar el archivo en la carpeta PRACTICA, dentro de mis documentos, se observara el archivo con el logo respectivo del navegador.
29/04/2014
8
CUERPO DE UN DOCUMENTO HTMLEl cuerpo de un documento empieza con la etiqueta
<BODY> y termina con </BODY>.
Observe que se ha dejado varios espacios en blanco y todo el texto se ha escrito en 3 líneas. 29/04/2014
9
CUERPO DE UN DOCUMENTO HTMLSin embargo cuando se muestra el contenido de la pagina
el texto ocupa una sola línea.
29/04/2014
10
TRATAMIENTO DE TEXTOEn HTML se pueden usar secuencias de caracteres o etiquetas para el tratamiento de lo textos que se desean mostrar en una pagina web y se explican a continuación: :Permite dejar más de un espacio en blanco entre palabras.
<P>:Se utiliza para realizar un salto de párrafo, a diferencia del salto de línea <BR>, el salto de párrafo deja una línea en blanco.
29/04/2014
11
USO DE COMENTARIOSLos comentarios son textos que se pueden insertar dentro de un documento HTML con la finalidad de ir explicando la forma como se va desarrollando la pagina web.También se utiliza para indicar el nombre de la persona que diseño la pagina así como la fecha y otros datos que se crean convenientes.Los comentarios de un documento HTML se escriben utilizando la siguiente sintaxis:
<!- Texto del comentario ->
29/04/2014
12
ASIGNACION DE TITULOSLa etiqueta desde <H1> </H1> hasta <H6> </H6> permite asignar títulos dentro de una pagina web. Podemos usar el atributo Aling para alinear el titulo a la Derecha (Right), Izquierda (Left) o Centro (Center). <HTML>
<HEAD> <TITLE> Mi primera Pagina Web </TITLE> </HEAD> <BODY> <H1 Align=Center> Esto es un titulo Nº 1 </H1> <H2 Align=Right> Esto es un titulo Nº 1 </H2> <H3> Esto es un titulo Nº 1 </H3> <H4 Align=Left> Esto es un titulo Nº 1 </H4> <H5> Esto es un titulo Nº 1 </H5> <H6> Esto es un titulo Nº 1 </H6> </BODY></HTML>
29/04/2014
13
ASIGNACION DE TITULOSLa etiqueta desde <H1> </H1> hasta <H6> </H6> permite asignar títulos dentro de una pagina web.
29/04/2014
14
LINEAS HORIZONTALESLa etiqueta <HR> permite dibujar una línea horizontal y al mismo tiempo realiza un salto de párrafo.La etiqueta <HR> acepta los siguientes parámetros:
Align: para alinear la línea horizontal.
Size: Se utiliza para asignar un grosor de la línea.
Noshade: Para indicar que la línea no tenga sombra
Width: Se utiliza para indicar el ancho de la línea.
29/04/2014
15
LINEAS HORIZONTALES
29/04/2014
16
TIPOS Y TAMAÑOS DE LETRASExiste la etiqueta <FONT> </FONT> cuyos parámetros permiten asignar tipos y tamaños de letras así como colores:
Size: Permite establecer el tamaño de la letra mediante un numero que varia de 1 a 7. El valor predeterminado es 3.
Face:Permite establecer el tipo de letra.
Color:Permite asignarle colores a las letras.
29/04/2014
17
TIPOS Y TAMAÑOS DE LETRASSintaxis:
Size: <FONT> SIZE=6> Este es un ejemplo de tamaño de letra </FONT>
Face:<FONT FACE=“Arial”>El tipo de Letra</FONT>
Color:<FONT COLOR=“Red”>La letra es de color Rojo</FONT><FONT COLOR=#FF0000>La letra es de color Rojo</FONT>
29/04/2014
18
TIPOS Y TAMAÑOS DE LETRAS
29/04/2014
19
TIPOS Y TAMAÑOS DE LETRAS
29/04/2014
20
TIPOS Y TAMAÑOS DE LETRAS
29/04/2014
21
ESTILOS DE LETRASTambién se permite asignar ciertos estilos de letras a los textos que deseamos mostrar en una pagina web como negrita, subrayado, cursiva, etc.
Los siguientes son llamados estilos físicos en HTML:
<B> </B> : Permite poner en negrita un texto<I> </I> : Permite poner en cursiva un texto<U> </U> : Permite poner un texto subrayado
29/04/2014
22
ESTILOS DE LETRAS
29/04/2014
23
ESTILOS DE LETRAS
29/04/2014
24
ESTILOS DE LETRAS LOGICASTambién existen estilos lógicos en HTML, para resaltar los textos que se desea mostrar en una pagina Web.
<ADDRESS> </ADDRESS> :Se puede utilizar para mostrar direcciones electrónicas.
<BLOCKQUOTE> </BLOCKQUOTE>:destaca un texto. Deja espacio antes y después de mostrar el texto realizando saltos de párrafo.
<CITE> </CITE> :Para mostrar títulos o citas de libros.
<CODE> </CODE>:Para mostrar el código fuente de un lenguaje de programación.
29/04/2014
25
ESTILOS DE LETRAS LOGICASTambién existen estilos lógicos en HTML, para resaltar los textos que se desea mostrar en una pagina Web.
<DFN> </DFN> :Se puede utilizar para mostrar alguna definición.
<EM> </EM>:Se puede mostrar texto en letra cursiva y enfatizada.
<KBD> </KBD> :Se puede utilizar para representar texto que se introduce por el teclado.
<SAMP> </SAMP>:Se puede utilizar para mostrar información de ejemplos.
29/04/2014
26
ESTILOS DE LETRAS LOGICASTambién existen estilos lógicos en HTML, para resaltar los textos que se desea mostrar en una pagina Web.
<STRIKE> </STRIKE> :Permite mostrar un texto tachado.
<STRONG> </STRONG>:Permite mostrar un texto resaltado con negrita.
<VAR> </VAR> :Se puede utilizar para representar variables en una página Web.
29/04/2014
27
ESTILOS DE LETRAS LOGICAS
29/04/2014
28
ESTILOS DE LETRAS LOGICAS
29/04/2014
29
ATRIBUTOS PARA TODA LA PAGINAHTML permite asignar atributos en toda la pagina web,
para ello debe asignar valores a los atributos de en momento de crear el cuerpo (BODY) de la pagina.Al crear el cuerpo de la pagina se puede utilizar los siguientes atributos:
BACKGROUNDSe utiliza para establece una imagen de fondo a la pantalla. Si el tamaño de la imagen no ocupa todo el fondo de la pagina esta se multiplicara hasta llenar todo el fondo.
BGCOLORSe utiliza para asignar un color de fondo a toda la pagina Web.
29/04/2014
30
ATRIBUTOS PARA TODA LA PAGINA
29/04/2014
31
ATRIBUTOS PARA TODA LA PAGINA
29/04/2014
32
ATRIBUTOS PARA TODA LA PAGINA
29/04/2014
33
CREACION DE LISTASLas listas son un conjunto de elementos que se pueden crear con el lenguaje HTML para mostrarlas en una pagina Web. Hay 3 tipos de listas:
Listas No Ordenadas Listas Ordenadas Listas de Definición
LISTAS NO ORDENADASSINTAXIS:<UL TYPE = “icono”><LH> Titulo de la Lista </LH><LI> Elemento Nº 01<LI> Elemento Nº 02<LI> Elemento Nº 03...<LI> Elemento Nº n</UL>
Icono:El icono es una palabra que indica lo que va a acompañar a cada elemento de la lista y puede ser:o disc (predeterminado)o circleo square
29/04/2014
34
CREACION DE LISTAS
29/04/2014
35
CREACION DE LISTASLas LISTAS ORDENADAS se caracterizan porque cada elemento va enumerada.
LISTAS ORDENADASSINTAXIS:<OL START = “n” TYPE = “valor”><LH> Titulo de la Lista </LH><LI> Elemento Nº 01<LI> Elemento Nº 02<LI> Elemento Nº 03...<LI> Elemento Nº n</OL>
START:Es opcional , indica la primera numeración, se indica con el valor n.
TYPE:Indica el tipo de numeración, que puede ser;A: Letra Mayúsculasa: Letra MinúsculaI: romanos en mayúsculasi: romanos en minúscula0: números enteros. 29/04/2014
36
CREACION DE LISTAS
29/04/2014
37
CREACION DE LISTASLas LISTAS DE DEFINICIÓN permiten escribir un termino y su definición. LISTAS DE DEFINICION
SINTAXIS:<DL><LH> Titulo de la Lista </LH><DT> Termino Nº 01<DD> Definición Nº 01<DT> Termino Nº 02<DD> Definición Nº 02...<DT> Termino Nº n<DD> Definición Nº n</DL>
<LH>Es opcional, se utiliza para establecer un TITULO a la lista.
<DT>Se utiliza para escribir un termino que deseamos definir.
<DD>Se utiliza para describir el termino.
29/04/2014
38
CREACION DE LISTAS
29/04/2014
39
CREACION DE TABLAS
Una tabla es un conjunto de filas Y columnas que se pueden crear en HTML.
La creación de una Tabla empieza con la etiqueta <TABLE> y termina con </TABLE>.
La etiqueta <TABLE> se puede utilizar en forma opcional atributos cuyos valores y características afectaran a toda la tabla y son los siguientes:
29/04/2014
40
ATRIBUTOS DE <TABLE>BORDERSe utiliza para establecer el grosor del borde de una tabla, la forma predeterminada es 0= no borde.CELLSPACINGSe utiliza para establecer es espacio entre cada celda de la tabla, el valor predeterminada es 2.WIDTHSe utiliza para establecer el ancho de la tabla que se desea crear, el valor puede esta en porcentajes.HEIGHTSe utiliza para establecer la altura de la tabla que se desea crear, el valor puede esta en porcentajes.<TABLE BORDER=3 WIDTH=50% CELLPADDING=2> </TABLE>
29/04/2014
41
ETIQUETAS DE <TABLE><CAPTION> </CAPTION>Esta etiqueta es opcional y permite establecer un titulo a la tabla que deseamos crear.Podemos agregarle el atributo de ALIGN y asignarle valores de TOP o BOTTOM.<TABLE BORDER=5> <CAPTION ALIGN=TOP> Titulo de la Tabla </CAPTION></TABLE>
29/04/2014
42
ETIQUETAS DE <TABLE><TR> </TR>Esta etiqueta permite crear una fila dentro de una tabla, y tiene los siguientes atributos:ALIGNPara indicar la alineación Horizontal del contenido y sus valores son: Left (izquierda) Right (Derecha) o Center (Centro).VALIGNSe utiliza para la alineación vertical del contenido y sus valores sn: Top (Arriba) Middle (Mitad) o Botton (Abajo).BGCOLORSe utiliza para indicar el color de fondo de las celdas.
29/04/2014
43
ETIQUETAS DE <TABLE><TH> </TH>Esta etiqueta se debe escribir dentro de <TR> </TR> y permite crear columnas de cabecera, es decir columnas en la primera fila de la tabla, y tiene los siguientes atributos:ALIGNPara indicar la alineación Horizontal del contenido y sus valores son: Left, Right, Center, Justify o Decimal.VALIGNSe utiliza para la alineación vertical del contenido y sus valores son: Top, Middle o Botton.WIDTHSe utiliza para indicar el ancho de la columna en %.
29/04/2014
44
ETIQUETAS DE <TABLE>BGCOLORSe utiliza para indicar el color de fondo de las celdas.ROWSPANSe utiliza para indicar en número de filas que ocupará la celda.COLSPANSe utiliza para indicar el numero de columnas que ocupara la celda.NOWRAPAl usar este atributo el ancho de la celda se extenderá de acuerdo al ancho que ocupa el texto.Si no se utiliza el texto pasara a la siguiente línea cuando ocupe el ancho establecido para la columna.
29/04/2014
45
ETIQUETAS DE <TABLE>
29/04/2014
46
ETIQUETAS DE <TABLE><TD> </TD>Esta etiqueta permite crear dentro de una fila , columnas que contendrán datos. Esta etiqueta se deberá utilizar a partir de la segunda fila si la tabla contiene cabecera.
29/04/2014
47
ETIQUETAS DE <TABLE>
29/04/2014
48
ETIQUETAS DE <TABLE>
29/04/2014
49
INSERTAR IMAGENESEn HTML también se puede insertar imágenes en una pagina Web, normalmente las imágenes deben ser GIF o JPG.Se recomienda GIF para mostrar imágenes pequeñas como iconos y JPG para imágenes grandes y reales como una fotografía.
SINTAXIS:<IMG SRC=“Ruta\Nombre del Archivo”><IMG SRC=“URL\Nombre del Archivo”>
29/04/2014
50
INSERTAR IMAGENES
ALTCon este atributo se indica un texto el cual se visualizara cuando pase el puntero del Mouse por la imagen.
29/04/2014
51
INSERTAR IMAGENES
ALIGNSe utiliza cuando queremos que la imagen vaya acompañada de un texto.Left: IzquierdaRight: DerechaTop: Primera Línea del texto Arriba.Bottom: Primera línea del texto abajoMiddle: Primera línea del texto al medio.
29/04/2014
52
HIPERVINCULOSSon llamados también enlaces o Link y como su nombre lo indica, permiten enlazar i ir en forma directa a otra parte de la misma pagina Web o a otra pagina.
SINTAXIS: (Enlaces al mismo documento)<A NAME=Nombre de la sección>
contenido</A>
Para enlazar a la sección creada se utiliza la etiqueta <A REF>
<A REF=#Nombre de la sección> texto </A>29/04/2014
53
HIPERVINCULOS
29/04/2014
54
HIPERVINCULOS
29/04/2014
55
HIPERVINCULOSExisten también enlaces a otros documentos o paginas HTML, este tipo de enlace se utiliza cuando deseampos ir a otra página.
SINTAXIS: (Enlaces con textos)<A HREF=“URL”> Texto </A>
SINTAXIS: (Enlaces con Imágenes) <A HREF=“URL”> <IMG SCR=“imagen”> </A>
SINTAXIS: (Enlaces a secciones de otra pagina) <A HREF=“URL#Nombre de sección”> Texto </A>
<A HREF=“URL#seccion”> <IMG SCR=“imagen”> Texto </A>29/04/2014
56
FRAMESNos permiten dividir una pagina en varias secciones y cada una de ellas es independiente pudiendo mostrar una pagina Web diferente en cada una.Cuando vamos a usar frames dentro de una pagina se utiliza lka etiiqueta <FrameSet> </FrameSet> en lugar de <Body> </Body>:
29/04/2014
57
ATRIBUTOS DE FRAMESROWSPermite crear frames horizontales, se le asigna el tamaño del frame o frames que desea crear separados por una coma, el valor puede ser en porcentaje y el * indica el resto de la ventana.
COLSPermite crear frames en forma vertical. Al igual que Rows se le asigna tamaños del frame.
29/04/2014
58
ATRIBUTOS DE FRAMES
29/04/2014
59
ATRIBUTOS DE FRAMES
29/04/2014
60
FRAMES ANIDADOSSon aquellos frames que se encuentran dentro de otro frame. Solo hay que utilizar dentro de la etiqueta <FRAME> </FRAME> la etiqueta de creación <FRAMESET> </FRAMESET> con todos sus atributos y valores.
29/04/2014
61
FRAMES ANIDADOS
29/04/2014