Scribd
Cargar
49 vistas57 páginas

HTML

El documento presenta una introducción al lenguaje HTML, describiendo su estructura básica, incluyendo etiquetas, secciones como head y body, y elementos como títulos, encabezados, párrafos y enlaces. También se abordan formularios y sesiones en PHP, mostrando ejemplos de código para crear formularios y gestionar sesiones. Se enfatiza la importancia de la legibilidad del código y el uso de comentarios para facilitar su comprensión.

Cargado por

Tetito Ti Le
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
49 vistas57 páginas

HTML

El documento presenta una introducción al lenguaje HTML, describiendo su estructura básica, incluyendo etiquetas, secciones como head y body, y elementos como títulos, encabezados, párrafos y enlaces. También se abordan formularios y sesiones en PHP, mostrando ejemplos de código para crear formularios y gestionar sesiones. Se enfatiza la importancia de la legibilidad del código y el uso de comentarios para facilitar su comprensión.

Cargado por

Tetito Ti Le
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

HTML

Rogelio Ferreira Escutia

Caractersticas Bsicas

Estructura
HTML es un lenguaje basado en etiquetas. Cada etiqueta tiene un inicio y fin. Las etiquetas se identifican por los s !bolos " y #

%nicio y &in de 'rogra!a


La etiqueta "(t!l# nos indica el inicio del c)digo HTML. La etiqueta "*(t!l# nos indica fin del c)digo HTML. Co!o se obser+a, la diferencia es el s !bolo de diagonal - * . que nos indica el fin de la etiqueta.

Estructura ! ni!a

0l ejecutar este c)digo no aparece nada en pantalla.


/

%!presi)n de Te2to en 'antalla


Todo el te2to que +aya entre "(t!l# y "*(t!l# aparecer3 en pantalla y se i!pri!ir3 tal cual se escriba.

%!presi)n en 'antalla

Co!entarios
6n co!entario es un te2to que inserta el progra!ador en su c)digo que sir+e para (acerlo !as legible. Cuando el na+egador lee un co!entario no ejecuta ninguna operaci)n ni aparece nada en pantalla.

Co!entarios

:ecciones
Todo docu!ento HTML esta co!puesto por dos secciones; (ead y body y cada uno tiene sus etiquetas de inicio y fin.

89

:ecci)n (ead
La secci)n de cabecera -(ead. contiene infor!aci)n acerca del c)digo <HTML, tal co!o el t tulo del docu!ento, instrucciones del for!ato del docu!ento -co!o style s(eets. y descripci)n de scripts a ejecutar -co!o ja+ascript.. 0 e2cepci)n del t tulo, los de!3s datos de la secci)n (ead no son +isibles en pantalla cuando se ejecuta el c)digo.

88

:ecci)n body
En la secci)n del cuerpo del docu!ento -body. se encuentra el contenido de la p3gina =eb y es lo que aparecer a en pantalla cuando se ejecutara el c)digo.

82

T tulo
La etiqueta de titulo -"title#. nos indica el no!bre de la p3gina =eb. Este no!bre es el que aparecer3 en la barra de t tulo de la +entana del na+egador.

83

T tulo

8$

Formato del Documento

8/

Encabe>ados
E2isten 1 tipos de encabe>ados, los cuales sir+en para poner el t tulo en alguna parte de una p3gina =eb. El !3s grande de ta!a?o de letra es el 8 y el !as peque?o es el 1.

81

Encabe>ados

84

Encabe>ados

85

'3rrafos
En las etiquetas de p3rrafos -"p#. se introduce el te2to que el na+egador !ostrar3 en pantalla

87

Encabe>ados y '3rrafos
:e reco!ienda usar Encabe>ados y '3rrafos dentro de la p3gina ya que se !ejora la presentaci)n de la p3gina, ade!3s de ayudar a que los !otores de b@squeda -co!o google. puedan !ejorar el inde2ado de la p3gina.

29

Encabe>ados y '3rrafos

28

Enlaces -(iper+ nculos.


6n (iper+ nculo es un enlace que apunta (acia otra p3gina =eb y sir+e para ir na+egando entre diferentes p3gina. 'ara crear un (iper+ nculo se utili>a la etiqueta de anc(ura de ele!ento -"a#. seguida de la direcci)n a (acer referencia -(ref. y el te2to que se ober+a en el na+egador donde se (ar3 clicA.

22

Enlaces -(iper+ nculos.

23

:alto de l nea

2/

Letra negrita
'ara (acer que un te2to en una p3gina apare>ca negrita -!as !arcada, en inglBs Cold. se utili>a la etiqueta "strong#

25

:uper ndice
Dos sir+e para super ndice. introducir un te2to co!o

27

:ub ndice
Dos sir+e para introducir un te2to co!o sub ndice.

39

Tac(ado
Dos sir+e para i!pri!ir un !ensaje en pantalla pero que apare>ca tac(ado

38

Caracteres especiales
E2iste una for!a de insertar caracteres especiales que no se encuentran de !anera directa en el teclado.

En la siguiente direcci)n se encuentra la tabla de todos los caracteres especiales;


(ttp;**===.=3.org*TE*EECF(t!l$9*sg!l*entities.(t!l
32

Correo electr)nico
En una p3gina =eb se puede insertar un (iper+ nculo especial que cuando se (ace clicA enci!a de el, !anda lla!ar al ser+icio de correo electr)nico que se tenga por default en ese !o!ento -por eje!plo GutlooA en Hindo=s. con el objeto de en+iar un correo electr)nico (acia cierta persona definida en el etiqueta (ref seguida de !ailto.

33

Rogelio Ferreira Escutia


Instituto Tecnolgico de Morelia Departamento de Sistemas y Computacin Correo: rogeplus gmail!com r"erreir itmorelia!edu!m# $gina %e&: 'ttp:((antares!itmorelia!edu!m#()*aos( 'ttp:((+++!#umar'u!net( T+itter: 'ttp:((t+itter!com(rogeplus Face&oo*: 'ttp:((+++!"ace&oo*!com(groups(#umar'u!net(

Contenido
,- Formularios .- Sesiones

3/

Formularios

31

Formulario Bsico
<!DOCTYPE html> <html> <head> <meta charset="utf- " !> <title>Formularios e" #T$%<!title> <!head> <&od'> <h(>P)gi"a co" Formulario<!h(> <form actio"="reci&ir*+h+" method = "+ost"> ,om&re- <i"+ut t'+e="te.t" "ame=""om&re"!><&r!> <i"+ut t'+e="su&mit" /alue="E"/iar"!> <!form> <!&od'> <!html>

34

Formulario Bsico

35

Botn /reset0
<!DOCTYPE html> <html> <head> <meta charset="utf- " !> <title>0oto" reset<!title> <!head> <&od'> <h(>0oto" reset<!h(> <form actio"="reci&ir*+h+" method = "+ost"> ,om&re- <i"+ut t'+e="te.t" "ame=""om&re"!><&r!> <i"+ut t'+e="su&mit" /alue="E"/iar"!> <i"+ut t'+e="reset" /alue="0orrar"!> <!form> <!&od'> <!html>

37

$9

$re1rellenar campos
<!DOCTYPE html> <html> <head> <meta charset="utf- " !> <title>Formularios<!title> <!head> <&od'> <h(>Pre-relle"ado de cam+os<!h(> <form actio"="reci&ir*+h+" method = "+ost"> ,om&re- <i"+ut t'+e="te.t" "ame=""om&re" /alue="Escri&e tu "om&re a1ui" !><&r!> <i"+ut t'+e="su&mit" /alue="E"/iar"!> <!form> <!&od'> <!html>

$8

$2

2ongitud del campo


<!DOCTYPE html> <html> <head> <meta charset="utf- " !> <title>Formularios<!title> <!head> <&od'> <h(>%o"gitud de cam+os<!h(> <form actio"="reci&ir*+h+" method = "+ost"> ,om&re- <i"+ut t'+e="te.t" "ame=""om&re" si2e="(3" ma.le"gth="43" !><&r!> <i"+ut t'+e="su&mit" /alue="E"/iar"!> <!form> <!&od'> <!html>

$3

$$

Campo pass+ord
<!DOCTYPE html> <html> <head> <meta charset="utf- " !> <title>Formularios<!title> <!head> <&od'> <h(>Cam+o +ass5ord<!h(> <form actio"="reci&ir*+h+" method = "+ost"> %ogi"- <i"+ut t'+e="te.t" "ame="logi"" !><&r!> Pass5ord- <i"+ut t'+e="+ass5ord" "ame="+ass5ord"!><&r!> <i"+ut t'+e="su&mit" /alue="E"/iar"!> <!form> <!&od'> <!html>

$/

$1

3ona de te#to
<!DOCTYPE html> <html> <head> <meta charset="utf- " !> <title>Formularios<!title> <!head> <&od'> <h(>6o"as de te.to<!h(> <form actio"="reci&ir*+h+" method = "+ost"> ,om&re- <i"+ut t'+e="te.t" "ame=""om&re" !><&r!> Escri&e tu come"tario-<&r!> <te.tarea "ame="come"tario" id="come"tario" > <!te.tarea><&r!> <i"+ut t'+e="su&mit" /alue="E"/iar"!> <!form> <!&od'> <!html>

$4

$5

Tama4o de 5onas de te#to


<!DOCTYPE html> <html> <head> <meta charset="utf- " !> <title>Formularios<!title> <!head> <&od'> <h(>6o"as de te.to<!h(> <form actio"="reci&ir*+h+" method = "+ost"> ,om&re- <i"+ut t'+e="te.t" "ame=""om&re" !><&r!> Escri&e tu come"tario-<&r!> <te.tarea "ame="come"tario" id="come"tario" cols="73" ro5s="7" > <!te.tarea><&r!> <i"+ut t'+e="su&mit" /alue="E"/iar"!> <!form> <!&od'> <!html>

$7

/9

Sesiones

/8

Iniciar la Sesin

<8P#P sessio"9start:;< 8>

=l e>ecutar el c?digo a"terior@ "o a+arece "ada e" la +a"talla del "a/egador*

/2

Identi"icador de la Sesin
<8P#P sessio"9start:;< Asesio"=sessio"9id:;< echo "Bde"tificador de la sesio"- "*Asesio"< 8>

/3

6uardar datos de la Sesin


<8P#P sessio"9start:;< A9CECCBO,DElogi"EF=">ua""< A9CECCBO,DE+ass5ordEF="G(4"< 8>

=l e>ecutar el c?digo a"terior@ "o a+arece "ada e" la +a"talla del "a/egador*

/$

6uardar datos de la Sesin ci"rados 7,<?PHP session_start(); $_SESSION['login']="juan"; $_SESSION[' ass!or"']=#"$("%&'"); e()o*"+ogin*"e la*sesion,*"-$_SESSION['login']; e()o*"<.r*/0Pass!or"*(i1ra"o*"e la*sesion,*"-$_SESSION[' ass!or"']; ?0

//

6uardar datos de la Sesin ci"rados 7.<?PHP session_start(); $_SESSION['login']="juan"; $_SESSION[' ass!or"']=s)a%("%&'"); e()o*"+ogin*"e la*sesion,*"-$_SESSION['login']; e()o*"<.r*/0Pass!or"*(i1ra"o*"e la*sesion,*"-$_SESSION[' ass!or"']; ?0

/1

Recuperar datos de la Sesin


<?PHP session_start(); e()o*$_SESSION['login']-"<.r0"; e()o*$_SESSION[' ass!or"']-"<.r0"; ?0

/4

6uardar 8aria&les de la Sesin


<?PHP session_start(); $#i_login="juan"; $#i_ ass!or"="%&'"; $_SESSION['login']=$#i_login; $_SESSION[' ass!or"']=$#i_ ass!or"; ?0
=l e>ecutar el c?digo a"terior@ "o a+arece "ada e" la +a"talla del "a/egador*

/5

6uardar e imprimir 8aria&les de la Sesin


<?PHP session_start(); $#i_login="juan"; $#i_ ass!or"="%&'"; $_SESSION['login']=$#i_login; $_SESSION[' ass!or"']=$#i_ ass!or"; e()o*"2alor*"e*la*3aria.le*'login'*"e la*sesion,*"-$_SESSION['login']; e()o*"<.r*/02alor*"e*la*3aria.le*' ass!or"'*"e la*sesion,*"-$_SESSION[' ass!or"']; ?0

/7

Destruir una Sesin


<?PHP session_start(); session_"estro4(); ?0

=l e>ecutar el c?digo a"terior@ "o a+arece "ada e" la +a"talla del "a/egador*

19

También podría gustarte