Está en la página 1de 195

PNF EN ELECTRICIDAD

Curso Bsico de HTML

Facilitador
Ing. Nestor Molina
QU ES Y PARA QU SIRVE HTML?

El HTML, Hyper Text Markup Language (Lenguaje de marcacin de Hipertexto) es el lenguaje de


marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el
fsico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de
Hipertexto (Conocido tambin como link o ancla) el cual permite conectar dos elementos entre si y
el SGML (Lenguaje Estndar de Marcacin General) el cual sirve para colocar etiquetas o marcas
en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programacin
como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningn compilador,
por lo tanto algn error de sintaxis que se presente ste no lo detectar y se visualizara en la forma
como ste lo entienda.

Tim Berners-Lee

El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los
sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office
(Word). El conjunto de etiquetas que se creen, se deben guardar con la extensin .htm o .html.

Podramos decir que HTML sirve para crear pginas web, darles estructura y contenido. Un ejemplo
sencillo de cdigo HTML podra ser:

<html>

<body>

<p>Esto es un prrafo. Bienvenidos a esta pgina web.</p>

</body>

</html>

Este ejemplo est formado por 3 etiquetas HTML. Como podemos observar cada una de las
etiquetas debe acabar con su homloga de cierre. En este caso la etiqueta <html> debe cerrarse con
</html>, la etiqueta <body> con </body> y la etiqueta <p> con </p>.
Este sencillo ejemplo mostrara por pantalla lo siguiente.

La estructura de un documento HTML

Un documento HTML comienza con la etiqueta <html>,, y termina con </html>.

Dentro del documento hay dos zonas principales: el encabezamiento, delimitado por las marcas
<HEAD> y </HEAD>, que sirve para definir algunos valores vlidos para todo el documento, y el
cuerpo, delimitado por las etiquetas <BODY> y </BODY>, donde reside la informacin del
documento.

El elemento <TITLE></TITLE> contenido dentro del encabezamiento permite especificar el ttulo


de un documento HTML. Este ttulo no forma parte del documento en s pues no se ve en la pantalla
principal, sino que sirve como ttulo de la ventana del programa que la muestra.

Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura
bsica del lenguaje HTML en su nivel bsico no son necesarios.

El cuerpo de un documento HTML contiene el texto, imgenes, etc. que, con la presentacin y los
efectos que se decidan, se presentarn ante el usuario. Dentro del cuerpo se pueden aplicar una serie
de efectos a travs de diferentes marcas o etiquetas (tambin otros autores las denominan
"directivas").

As pues, la estructura de un documento HTML es la siguiente:

<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
</HEAD>
<BODY>
[Aqu se sitan otras etiquetas que hacen posible visualizar la pgina]

</BODY>
</HTML>

Creacin de pginas web con lenguaje HTML

Para crear una pgina web se pueden utilizar varios programas especializados en esto, como por
ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver 3. Otra forma de disear un
archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa
cumple con un requisito mnimo que es la posibilidad de trabajar con las etiquetas con las que
trabaja este lenguaje.
A continuacin les mostraremos las etiquetas ms comunes que deben aprenderse para hacer una
pgina Web.

Estructura de los documentos de HTML

Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos
comparten una estructura en comn. Un documento de HTML empieza con la etiqueta <HTML>,
que es la que encerrar el documento actual. Contiene dos secciones primordiales: la cabecera y el
cuerpo encerrados respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera puede contener informacin y siempre contiene el ttulo del documento encerrado por
el elemento <TITLE>.

En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imgenes, sonidos,
hipervnculos, etc.

Un documento escrito en HTML contiene las siguientes etiquetas en el siguiente orden:

Ejemplo:
<HTML>
<HEAD>
<TITLE> Ttulo de mi pgina de Internet </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera pagina </CENTER> </H1>

<HR>

Esta es mi primera pagina, aunque todava es muy sencilla. Como el lenguaje HTML no es difcil,
pronto estaremos en condiciones de hacer cosas mas interesantes.

<P> Aqu va un segundo prrafo.

</BODY>
</HTML>

Para escribir ttulos se usa la etiqueta <Hx></Hx> en donde x es un nmero.

Ejemplo:
<h1>Titulo principal</h1>

<h2>Titulo secundario</h2>

<h3>Titulo terciario</h3>

<h4>Titulo cuarto nivel</h4>

<h5>Titulo quinto</h5>

<h6>Titulo sexto</h6>

Quedara mas o menos as:

Titulo principal

Titulo secundario

Titulo terciario

Titulo cuarto nivel

Titulo quinto
Titulo sexto

Etiquetas de prrafo

Para esto se utiliza la etiqueta <P> y </P>. Este comando es muy til debido a que si uno escribe
algo (en el editor que se est utilizando) por mucho espacio que uno le de siempre al texto, siempre
va a aparecer en la misma lnea.

Para alinear un prrafo se utiliza el comando <ALING> y </ALING>, utilizado dentro de la


etiqueta <P>. Se puede alinear de tres formas diferentes:

<p align="left"> Prrafo... </p> Alinea a la izquierda.

<p align="center"> Prrafo... </p> Realiza un centrado.

<p align="right"> Prrafo... </p> Alinea a la derecha.

Cuando nosotros queremos que lo que escribimos aparezca en otra lnea utilizamos el comando
<BR>.
Al terminar de escribir un prrafo es conveniente y esttico utilizar el comando para separar un
prrafo de otro que es <HR>

Etiquetas para darle formato al texto:

Para el tamao y tipo de letra se usa la etiqueta <FONT> y </FONT>, que posee tres atributos:
tamao (Size), Tipo de letra o fuente (face) y color

Formato:
<B> y </B> Sirve para colocar un texto en Negrita.

<U> y < /U> Sirve para subrayar un texto

<STRIKE> y </STRIKE> Sirve para tachar un texto.

<STRONG> y </STRONG> Cumple la misma funcin que <B>

<I> y <I> Para colocar un texto en cursiva.

<EM>texto con nfasis</EM> texto con nfasis


<CITE>citacin</CITE> citacin

<DFN>definicin</DFN> definicin

<KBD>teclado</KBD> teclado

<SAMP>ejemplo</SAMP> ejemplo

SIZE: Regula el tamao de los caracteres.

Ejemplo:<font> texto... </FONT>.

Ejemplo:
<FONT> texto</FACE>

Color: Regula el color de los caracteres. En principio existen dos posibilidades para definir los
colores en HTML:

1. Mediante la especificacin de los valores RGB del color deseado en forma hexadecimal
(RGB=Red/Green/Blue, valores Rojo/Verde/Azul)

2. Mediante la especificacin del nombre del color en ingles

Ejemplos:

<FONT COLOR="WHITE">Blanco</FONT> Blanco #FFFFFF


<FONT COLOR="BLACK">Negro</FONT> Negro #000000
<FONT COLOR="RED">Rojo</FONT> Rojo #FF0000
<FONT COLOR="GREEN">Verde</FONT> Verde #00FF00
<FONT COLOR="BLUE">Azul</FONT> Azul #0000FF
<FONT COLOR="YELLOW">Amarillo</FONT> Amarillo #FFFF00
<FONT COLOR="CYAN">Cyan</FONT> Cyan #00FFFF
<FONT COLOR="MAGENTA">Magenta</FONT> Magenta #FF00FF

Si especificamos el nombre del color, podemos evitar la definicin del color en forma hexadecimal
que es un poco ms difcil. Actualmente estn estandarizados tan slo 16 colores. Existen colores
adicionales los cuales son dependientes de los navegadores Web.
Primero que todo debe escribir un smbolo #. A continuacin siguen las 6 cifras para la definicin
del color. Las primeras 2 cifras definen el valor rojo, las siguientes 2 el valor verde y las 2 ltimas
el valor azul.

Las cifras hexadecimales son:


0 (corresponde al decimal 0)
1 (corresponde al decimal 1)
2 (corresponde al decimal 2)
3 (corresponde al decimal 3)
4 (corresponde al decimal 4)
5 (corresponde al decimal 5)
6 (corresponde al decimal 6)
7 (corresponde al decimal 7)
8 (corresponde al decimal 8)
9 (corresponde al decimal 9)
A (corresponde al decimal 10)
B (corresponde al decimal 11)
C (corresponde al decimal 12)
D (corresponde al decimal 13)
E (corresponde al decimal 14)
F (corresponde al decimal 15)
(mirar el cuadro de la pgina anterior)

Para ponerle color de fondo a la pgina escribir:

<body bgcolor=#808080></body> con el cual obtendremos un color de fondo gris oscuro.

Colocar mal los colores de fondo en nuestras pginas puede provocar problemas. Qu ocurra con
los links o enlaces si colocramos un fondo de color azul?. Puesto que los links son azules cuando
todava no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se
puedan distinguir en absoluto del fondo.

Se puede imaginar todava un caso peor si decidiramos colocar un fondo demasiado oscuro, tan
oscuro que no permitiera distinguir con claridad la informacin que se presenta en pantalla.
Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o
enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes:
text="#nmero" Para el color del texto.
link="#nmero" Para el color de los enlaces.
vlink="#nmero" El color con que aparecern los enlaces ya visitados.
alink="#nmero" Color del enlace cuando lo pulsamos.

Por lo tanto la etiqueta <body> puede quedar del siguiente modo:

<body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num">

Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta:

background="localizacin de la imagen" Esta etiqueta va dentro de la etiqueta <body>.

Ejemplo:
<body background="/documentos/html/gifs/dragonball.gif">

Con esto lograremos que la imagen dragonball.gif aparezca como fondo en nuestra pagina.

Etiquetas META

Son usadas para poner meta-informacin del documento. Esta "directiva" indica al visor de Internet
las palabras clave y contenido de nuestra pgina Web. Muchos de los buscadores de pginas Web
de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la pgina en sus
bases de datos.

Ejemplo:
<META NAME = "Pagina de Pablo" content = "Mi pgina personal de Sailor Moon">

Indica al visor el nombre de la pgina y sus contenidos principales.

<META NAME="Author" content="Pablo Ravioli">

Indica el nombre de la persona que elabora la pgina WEB

<META NAME = "keywords" content = "Informacin de Sailor Moon">

Indica al visor las palabras clave para los buscadores de Internet.

Para hacer listas


Las listas se definen de forma muy sencilla: se dice dnde empieza la lista, dnde empieza cada
punto y dnde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio
de lnea, o al menos sin texto por delante (slo espacios o tabulaciones).

Las listas pueden ser: Lista desordenada, <UL> (Unordered List).

Lista ordenada, <OL> (Ordered List).

Ejemplos de diferentes tipos de listas:

Lista con nmeros romanos:

<ol>
<li type=I>Manzana

<li type=I>Zanahoria

<li type=I>Lechuga

<li type=I>Tomate

</ol>
Manzana
Zanahoria
Lechuga
Tomate

Lista numerada:

<ol>
<li>Manzana
<li>Zanahoria
<li>Lechuga
<li>Tomate
</ol>
Manzana
Zanahoria
Lechuga
Tomate

Lista con puntos:

<ul>
<li> Manzana

<li> Zanahoria

<li> Lechuga

<li>Tomate
</ul>
Manzana
Zanahoria
Lechuga
Tomate

Lista con crculos:

<ul>
<li type=circle> Manzana

<li type=circle> Zanahoria

<li type=circle> Lechuga

<li type=circle> Tomate

</ul>
Manzana
Zanahoria
Lechuga
Tomate

Lista con cuadrados:

<ul>
<li type=square> Manzana

<li type=square> Zanahoria

<li type=square> Lechuga

<li type=square> Tomate

</ul>
Manzana
Zanahoria
Lechuga
Tomate

Como insertar una imagen

A la hora de crear una pgina Web podemos introducir grficos de forma muy sencilla, slo hay
que tener en cuenta que las imgenes deben tener formato Gif o JPEG.

La etiqueta utilizada para agregar imgenes a una pgina Web es <IMG> y va acompaada de un
atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la
imagen a insertar.

Es decir:

<IMG SRC="lugar donde guardo la imagen">

Supongamos que tenemos la imagen dragonball.gif, que est presente en el mismo directorio en
donde est la pgina y que la queremos insertar. La etiqueta apropiada sera:

<IMG SRC="dragonball.gif">

Y el usuario ver en el browser:

Para poner la imagen en la izquierda escribir:

<IMG ALIGN=LEFT SRC=" dragonball.gif ">

A la derecha: <IMG ALIGN=RIGHT SRC=" dragonball.gif">


Y si se quiere poner la imagen en el centro:

<P ALIGN=CENTER> <IMG SRC=" dragonball.gif"> </P>

Hiperenlaces, Hyperlinks, Anclas o Links

Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho
enlace. Dicha directiva debe incluir el parmetro href="URL" para especificar el destino del enlace.
Es decir, que antes del objeto elegido debemos abrir con <a href="URL">, y despus cerrar con
</a>. Por ejemplo, si queremos que el texto "pulse aqu para visitar la NASA" nos conduzca a la
"home page" de la NASA, debemos escribir en nuestro texto HTML:

<a href="http://www.nasa.gov/">Pulse aqu para visitar a la NASA</a>

Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:
<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrir la imagen.gif.

Tambin se puede ir a otro enlace por medio de una imagen. Lo nico que se debe hacer es cambiar
el texto por una imagen:

<a href="http://www.altavista.com"><img src="Logo.jpg"></a>

Con esto tendremos por resultado que cuando se pase el puntero del mouse por arriba del Logo.jpg
(que podra ser el logo del Altavista) y se convierta en una "manito", al hacer clic nos enve al
buscador Altavista.

Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera:
<a href="mailto:pfravioli[arroba]fibertel.com.ar">Mandame un Email</a>

Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrir (por defecto) el
Microsoft Outlook Express con la direccin del destinatario ya escrita.

Caracteres especiales

Existe una razn evidente que impide que podamos escribir ciertos smbolos directamente en un
texto HTML, como por ejemplo el <: dichos smbolos tienen un significado en HTML, y es
necesario diferenciar claramente cundo poseen ese significado y cundo queremos que aparezcan
literalmente en el documento final. Por ejemplo, como ya sabemos, < indica el comienzo de una
directiva, y, por ello, si queremos que aparezca en el texto como tal tendremos que dar un rodeo
escribiendo algo que no de lugar a confusin, en este caso &lt;. Los smbolos afectados por esta
limitacin, y la forma de escribirlos, se detallan a continuacin:

< (Menor que): &lt;


>(Mayor que): &gt;
& (smbolo de and, o ampersand): &amp;
" (comillas dobles): &quot;

Es decir, que para escribir <"hola"> en nuestro texto HTML original debemos poner
&lt;&quot;hola&quot;&gt;.
El otro caso especial se da cuando en un texto HTML se quiere escribir una ee, por ejemplo. Existe
una forma fcil de hacerlo, que consiste en utilizar cdigos como las que antes se presentaron para
escribir ciertos smbolos. Los cdigos comienzan siempre con el smbolo &, y terminan con un
punto y coma (;). Entre medias va un identificador del carcter que queremos que se escriba. Los
cdigos necesarias en nuestro idioma son:

: &aacute;
: &eacute;
: &iacute;
: &oacute;
: &uacute;
: &Aacute;
: &Eacute;
: &Iacute;
: &Oacute;
: &Uacute;
: &uuml;
: &Uuml;
: &ntilde;
: &Ntilde;
: &#191;
: &#161;
?: &#63;
!: &#33;
@: &#64;

Por lo tanto la palabra pgina la podramos escribir como :

pgina
p&aacute;gina
Otro ejemplo: En qu ao estamos?

Sera: &#191En qu&eacute; a&ntilde;o estamos&#63;

Es por ello que si deseamos que cualquier visor de pginas Web pueda visualizar las letras
acentuadas de nuestro documento debemos utilizar sus correspondientes cdigos para
representarlas.
Recuerden que las etiquetas se pueden escribir en maysculas o en minsculas, es lo mismo poner
<HTML>, <html> o <HtmL>.

Una vez que terminamos de escribir todo nuestro documento, lo guardamos ponindole un nombre,
y necesariamente lo debemos guardar con la extensin .HTM o .HTML.
Para ir visualizando lo que hemos estado haciendo tendramos que abrir nuestro browser (Netscape
o Internet Explorer), hacemos click en la opcin FILE o ARCHIVO, estando all seleccionamos
OPEN o ABRIR, le damos BROWSE o EXAMINAR, seleccionamos el archivo y le damos OPEN.
Luego le damos ACEPTAR, e inmediatamente se abrir nuestra pagina.
Instalacin de XAMPP
Qu es XAMPP?

XAMPPes una distribucin de Apache que incluye MySQL, PHP y otras herramientas para el
desarrollo de aplicaciones web, como phpMyAdmin

XAMPP es gratuito y fcil de instalar: basta con descargar el archivo y extraerlo

XAMPP es multiplataforma: existen versiones para Windows, Linux y Mac OS

Instalacin y configuracin de XAMPP


Pasos:
Descargar
Instalar
Probar
Crear un acceso directo en el escritorio al programa xampp.exe situado en esa carpeta

Ejecutar XAMPP haciendo doble clic sobre el icono xampp


Pulsar el botn siguiente (Next>)

Pulsar el botn siguiente (Next>)

Pulsar el botn Instal


Pulsar el botn finalizar (Finish)

Arrancar (Start) los mdulos Apache y MySQL. Aparecen de Color Verde ambos

Probar que el servidor local est funcionando escribir: www.localhost.com y aparecer la siguiente
pantalla:
Pulsar phpMyAdmin. Aparecer la pgina:

Establecer una contrasea para el administrador (root) de MySQL (por defecto est en blanco).
Para empezar a trabajar con el servidor local siga la ruta: C/Xampp/htdocs y abra una nueva carpeta
que en nuestro caso la llamaremos curso.
Editor de textos Sublime Text

Sublime Text es un editor de texto y editor de cdigo fuente est escrito en C++ y Python para los
plugins. Desarrollado originalmente como una extensin de Vim, con el tiempo fue creando una
identidad propia, por esto an conserva un modo de edicin tipo vi llamado Vintage mode.

Se puede descargar y evaluar de forma gratuita. Sin embargo no es software libre o de cdigo
abierto y se debe obtener una licencia para su uso continuado, aunque la versin de evaluacin es
plenamente funcional y no tiene fecha de caducidad

Caractersticas

Minimapa: consiste en una previsualizacin de la estructura del cdigo, es muy til para desplazarse
por el archivo cuando se conoce bien la estructura de este.
Multi Seleccin: Hace una seleccin mltiple de un trmino por diferentes partes del archivo.
Multi Cursor: Crea cursores con los que podemos escribir texto de forma arbitraria en diferentes
posiciones del archivo.
Multi Layout: Trae siete configuraciones de plantilla podemos elegir editar en una sola ventana o
hacer una divisin de hasta cuatro ventanas verticales o cuatro ventanas en cuadrcula.
Soporte nativo para infinidad de lenguajes: Soporta de forma nativa 43 lenguajes de
programacin y texto plano.
Syntax Highlight configurable: El remarcado de sintaxis es completamente configurable a travs
de archivos de configuracin del usuario.
Bsqueda Dinmica: Se puede hacer bsqueda de expresiones regulares o por archivos, proyectos,
directorios, una conjuncin de ellos o todo a la vez.
Auto completado y marcado de llaves: Se puede ir a la llave que cierra o abre un bloque de una
forma sencilla.
Soporte de Snippets y Plugins: Los snippets son similares a las macros o los bundles adems de la
existencia de multitud de plugins.
Configuracin total de Keybindings: Todas las teclas pueden ser sobrescritas a nuestro gusto.
Acceso rpido a lnea o archivo: Se puede abrir un archivo utilizando el conjunto de teclas Cmd+P
en Mac OS X o Ctrl+P en Windows y Linux y escribiendo el nombre del mismo o navegando por
una lista. Tambin se puede ir a una lnea utilizando los dos puntos ":" y el nmero de lnea.
Paleta de Comandos: Un intrprete de Python diseado solo para el programa con el cual se puede
realizar infinidad de tareas.
Coloreado y envoltura de sintaxis: Si se escribe en un lenguaje de programacin o marcado, resalta
las expresiones propias de la sintaxis de ese lenguaje para facilitar su lectura.
Pestaas: Se pueden abrir varios documentos y organizarlos en pestaas.
Resaltado de parntesis e indentacin: Cuando el usuario coloca el cursor en un parntesis,
corchete o llave, resalta sta y el parntesis, corchete o llave de cierre o apertura correspondiente.

Lenguajes soportados

ActionScript Clojure Graphviz Lua Perl Scala


(DOT)
AppleScript CSS Groovy Lisp PHP Shell Script (Bash)
ASP D Haskell Makefile Python SQL
Batch File Diff HTML Markdown R Tcl
C Erlang Java MATLAB Rails Texto plano
C# Expresin regular JavaScript Objective-C ReStructuredText Textile
C++ Go LaTeX Ocaml Ruby XML
XSL

Instalacin de Sublime Text

Pulsar el icono Sublime Text

Pulsar el botn siguiente (NEXT>)


Pulsar el botn siguiente (NEXT>)

Pulsar el botn siguiente (NEXT>)


Pulsar el botn Install

Pulsar el botn Finish

Aparecer el icono que se muestra en la pantalla:


Al pulsar este icono se muestra la pantalla siguiente:

Para guardar un archivo buscamo la direccin o ruta C/xampp/htdocs/curso:


Bibliografa

https://www.google.co.ve/?gfe_rd=cr&ei=t16XWLj6OfKw8weu-4jwCg&gws_rd=ssl#q=sublime+text+3
Clase1.html

<!DOCTYPE html>
<html>
<head>
<title>Titulo de nuestra primera web</title>
</head>
<body>
<!-- h1 se utiliza para titulares-->
<h1>Titulo de nuestro documento</h1>
<h2>Titulo de nuestro documento</h2>
<br/>
<h3>Titulo de nuestro documento</h3>
<h4>Titulo de nuestro documento</h4>
</body>
</html>
Clase2.html
!DOCTYPE html>
<html>
<head>
<title>Clase numero 3</title>
<!--<link rel="stylesheet" type="image/x-icon" href="imagenes/favicon.ico">-->
</head>
<meta charset="utf-8">
<body>
<p>
<!-- "p" para escribir un parrafo-->
<!-- h1 se utiliza para titulares-->
<!-- "strong" lo coloca en negrita y se utiliza para los buscadores como por ejemplo en google-->
<!-- "b" lo coloca en negrita para efecto visual-->
<!-- "span" no tiene cambio visual pero con css lo que esta entre el "span" le vamos agregar
cierto estilo-->
<!-- "i" lo coloca en itlica para efecto visual-->
<h1>QU ES UNA LNEA DE INVESTIGACIN?</h1>
<strong>Una Lnea de Investigacin</strong> es un eje temtico, lo suficientemente amplio y
con orientacin <b>disciplinaria y conceptual</b>, que se utiliza para organizar, planificar y
construir, en forma perspectiva o prospectiva, el conocimiento cientfico en un campo especfico
de la ciencia y la tecnologa. <span>sta se origina</span> debido al inters de un grupo en
desarrollar un rea temtica. <br/>En su inicio, la Lnea de Investigacin viene a ser el rea de
inters y, en un tiempo posterior, las investigaciones realizadas, los trabajos divulgados y las
vinculaciones con los grupos de trabajos. Una vez construida la Lnea de Investigacin, y
durante su dinmica de trabajo, <i>se le pueden adicionar nuevos temas</i> que no se
consideraron en su definicin inicial.<br/>
<hr/><!--hr agrega una linea separadora-->
<!--h2 se utiliza para subtitulo-->
<h2>QUINES CONFORMAN EL PERSONAL ADSCRITO A UNA LNEA DE
INVESTIGACIN?</h2>
<!--blockquote se utiliza para hacer citas-->
<blockquote>Bsicamente una Lnea de Investigacin est constituida por un (1)
Coordinador y por un (1) grupo de investigadores activos. El Coordinador de la Lnea debe ser
un profesor con experiencia demostrada en el rea de Investigacin de la Lnea y ser el
responsable del trabajo realizado en la misma. Velar por su actualizacin permanente y por la
divulgacin de sus resultados. Consignar en forma anual los resultados de la Lnea al
Coordinador de Departamento o de Ncleo para su registro.</blockquote>
<!--cite se utiliza para colocar el nombre del autor de la cita-->
<cite>UNEXPO</cite><br/>
</p>
</body>
</html>
Clase3.html
<!DOCTYPE html>
<html>
<head>
<title>Clase numero 3</title>
<!--<link rel="stylesheet" type="image/x-icon" href="imagenes/favicon.ico">-->
</head>
<meta charset="utf-8">
<body>
<p>
<h1>QU ES UNA LNEA DE INVESTIGACIN?</h1>
<strong>Una Lnea de Investigacin</strong> es un eje temtico, lo suficientemente amplio y
con orientacin <b>disciplinaria y conceptual</b>, que se utiliza para organizar, planificar y
construir, en forma perspectiva o prospectiva, el conocimiento cientfico en un campo especfico
de la ciencia y la tecnologa. <span>sta se origina</span> debido al inters de un grupo en
desarrollar un rea temtica. <br/>En su inicio, la Lnea de Investigacin viene a ser el rea de
inters y, en un tiempo posterior, las investigaciones realizadas, los trabajos divulgados y las
vinculaciones con los grupos de trabajos. Una vez construida la Lnea de Investigacin, y
durante su dinmica de trabajo, <i>se le pueden adicionar nuevos temas</i> que no se
consideraron en su definicin inicial.<br/>
<a target="_blank" href="http://google.co.ve/">Ir a Google</a><!--a se utiliza para enlazar--
>
<a href="imagenes/logo.PNG">Ir a la imagen</a> <!-- ruta relativa puede ser pdf, doc, ppt-->
<hr/><!--hr agrega una linea separadora-->
<!--h2 se utiliza para subtitulo-->
<h2>QUINES CONFORMAN EL PERSONAL ADSCRITO A UNA LNEA DE
INVESTIGACIN?</h2>
<!--blockquote se utiliza para hacer citas-->
<blockquote>Bsicamente una Lnea de Investigacin est constituida por un (1)
Coordinador y por un (1) grupo de investigadores activos. El Coordinador de la Lnea debe ser
un profesor con experiencia demostrada en el rea de Investigacin de la Lnea y ser el
responsable del trabajo realizado en la misma. Velar por su actualizacin permanente y por la
divulgacin de sus resultados. Consignar en forma anual los resultados de la Lnea al
Coordinador de Departamento o de Ncleo para su registro.</blockquote>
<!--cite se utiliza para colocar el nombre del autor de la cita-->
<cite>UNEXPO</cite><br/>
<a href="mailto:ingnestormolina@hotmail.com" title="Enviar correo a Nestor Molina">Enviar
Email</a>
</p>
</body>
</html>
Clase4.html
<!DOCTYPE html>
<html>
<head>
<title>Clase numero 4</title>
</head>
<meta charset="utf-8">
<body>
<ul>
<li>Iten #1</li>
<ul>
<li>Iten #2</li>
<li>Iten #3</li>
<li>Iten #4</li>
</ul>
<li>Iten #2</li>
<li>Iten #3</li>
<li>Iten #4</li>
</ul>
</body>
</html>
Clase5.html
<!DOCTYPE html>
<html>

<head>
<title>Clase numero 5</title>
<!--<link rel="stylesheet" type="image/x-icon" href="imagenes/favicon.ico">-->
</head>
<meta charset="utf-8">
<body>
<p>
<h1>QU ES UNA LNEA DE INVESTIGACIN?</h1>

<strong>Una Lnea de Investigacin</strong> es un eje temtico, lo suficientemente amplio y


con orientacin <b>disciplinaria y conceptual</b>, que se utiliza para organizar, planificar y
construir, en forma perspectiva o prospectiva, el conocimiento cientfico en un campo especfico
de la ciencia y la tecnologa. <span>sta se origina</span> debido al inters de un grupo en
desarrollar un rea temtica. <br/>En su inicio, la Lnea de Investigacin viene a ser el rea de
inters y, en un tiempo posterior, las investigaciones realizadas, los trabajos divulgados y las
vinculaciones con los grupos de trabajos. Una vez construida la Lnea de Investigacin, y
durante su dinmica de trabajo, <i>se le pueden adicionar nuevos temas</i> que no se
consideraron en su definicin inicial.<br/>

<img src="imagenes/logo1.JPG" alt= "Logotipo de Nestor Molina" title="Nestor Molina"


width="300" height="300" />
<img src="imagenes/logo.jpg" alt= "Logotipo de Nestor Molina" title="Nestor Molina"
width="300" height="300" /><br/>

<a target="_blank" href="http://google.co.ve/">Ir a Google</a>

<a href="imagenes/logo.PNG">Ir a la imagen</a> <!-- ruta relativa puede ser pdf, doc, ppt-->
<hr/><!--hr agrega una linea separadora-->

<!--h2 se utiliza para subtitulo-->


<h2>QUINES CONFORMAN EL PERSONAL ADSCRITO A UNA LNEA DE
INVESTIGACIN?</h2>

<!--blockquote se utiliza para hacer citas-->


<blockquote>Bsicamente una Lnea de Investigacin est constituida por un (1)
Coordinador y por un (1) grupo de investigadores activos. El Coordinador de la Lnea debe ser
un profesor con experiencia demostrada en el rea de Investigacin de la Lnea y ser el
responsable del trabajo realizado en la misma. Velar por su actualizacin permanente y por la
divulgacin de sus resultados. Consignar en forma anual los resultados de la Lnea al
Coordinador de Departamento o de Ncleo para su registro.</blockquote>

<!--cite se utiliza para colocar el nombre del autor de la cita-->


<cite>UNEXPO</cite><br/>
<a href="mailto:ingnestormolina@hotmail.com" title="Enviar correo a Nestor Molina">Enviar
Email</a>
</p>
</body>
</html>

Clase6.html
<!DOCTYPE html>
<html>
<head>
<title>Clase Numero 6</title>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Item 3</li>
<li>Item 4</li>
</ol>

<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>

Clase7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clases Numero 7</title>
</head>
<body>
<form>
<label for="nombre">Ingrese su nombre</label>
<input type="text" value="Escribe tu nombre" placeholder="Escribe tu nombre"
size="20" maxlength="10" id="nombre"><br/>
<label for="nombre">Ingrese su Contrasea</label>
<input type="password"><br/>
<label for="nombre">Ingrese su Email</label>
<input type="email" name="" id=""><br/><br/>
<input type="checkbox" name="" id="">Hombre
<input type="checkbox" name="" id="">Mujer<br/><br/>
<input type="radio" name="" id="">Hombre
<input type="radio" name="" id="">Mujer<br/><br/>
<input type="button" value="Enviar"><br/><br/>
<input type="submit" value="Enviar"><br/><br/><br/><br/>
<select name="" id="">
<option value="Venezuela">Cabimas</option>
<option value="Colombia">Cartagena</option><br/><br/>
<input type="color" name="" id="">
<input type="range" name="" id="">
</select>
</form>
</body>
</html>
Clase8.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clase Numero 8</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
</head>
<body>

<header>
<div>
<img src="imagenes/logo.jpg" width="70" alt="Logo tipo de Nestor">
</div>
<nav>
<ul>
<li><a href="">Inicio</a> </li>
<li><a href="">Categoria</a> </li>
<li><a href="">Categoria2</a> </li>
</ul>
</nav>
</header>
<section class="wrapper">
<section class="main">
<article>
<h2>Titulo de Nuestra pagina</h2>
<p>
Una Lnea de Investigacin es un eje temtico, lo suficientemente
amplio y con orientacin disciplinaria y conceptual, que se utiliza para organizar, planificar y
construir, en forma perspectiva o prospectiva, el conocimiento cientfico en un campo especfico
de la ciencia y la tecnologa. sta se origina debido al inters de un grupo en desarrollar un rea
temtica. En su inicio, la Lnea de Investigacin viene a ser el rea de inters y, en un tiempo
posterior, las investigaciones realizadas, los trabajos divulgados y las vinculaciones con los
grupos de trabajos. Una vez construida la Lnea de Investigacin, y durante su dinmica de
trabajo, se le pueden adicionar nuevos temas que no se consideraron en su definicin inicial.
</article>
<article>
</p>
<h2>Titulo de Nuestra pagina</h2>
<p>
Una Lnea de Investigacin es un eje temtico, lo suficientemente
amplio y con orientacin disciplinaria y conceptual, que se utiliza para organizar, planificar y
construir, en forma perspectiva o prospectiva, el conocimiento cientfico en un campo especfico
de la ciencia y la tecnologa. sta se origina debido al inters de un grupo en desarrollar un rea
temtica. En su inicio, la Lnea de Investigacin viene a ser el rea de inters y, en un tiempo
posterior, las investigaciones realizadas, los trabajos divulgados y las vinculaciones con los
grupos de trabajos. Una vez construida la Lnea de Investigacin, y durante su dinmica de
trabajo, se le pueden adicionar nuevos temas que no se consideraron en su definicin inicial.
</p>
</article>
</section>
<aside>
<h3>Sidebar</h3>
<p>
Una Lnea de Investigacin es un eje temtico, lo suficientemente
amplio y con orientacin disciplinaria y conceptual, que se utiliza para organizar, planificar y
construir, en forma perspectiva o prospectiva, el conocimiento cientfico en un campo especfico
de la ciencia y la tecnologa. sta se origina debido al inters de un grupo en desarrollar un rea
temtica. En su inicio, la Lnea de Investigacin viene a ser el rea de inters y, en un tiempo
posterior, las investigaciones realizadas, los trabajos divulgados y las vinculaciones con los
grupos de trabajos. Una vez construida la Lnea de Investigacin, y durante su dinmica de
trabajo, se le pueden adicionar nuevos temas que no se consideraron en su definicin inicial.
</p>
</aside>
</section>

<footer>
<p>Nestor Molina - IUTC 2017</p>
</footer>
</body>
</html>
Clases9.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Texto alrededor de Imagen</title>
<style>
img {
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<img src="imagenes/logo.jpg" width="200" alt="">
<p>Son usadas para poner meta-informacin del documento. Esta "directiva" indica al
visor de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los
buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta
directiva para incluir la pgina en sus bases de datos.</p>
<p>Son usadas para poner meta-informacin del documento. Esta "directiva" indica al
visor de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los
buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta
directiva para incluir la pgina en sus bases de datos.</p>
<p>Son usadas para poner meta-informacin del documento. Esta "directiva" indica al
visor de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los
buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta
directiva para incluir la pgina en sus bases de datos. </p>
<p>Son usadas para poner meta-informacin del documento. Esta "directiva" indica al
visor de Internet las palabras clave y contenido de nuestra pgina Web. Muchos de los
buscadores de pginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta
directiva para incluir la pgina en sus bases de datos.</p>
</body>
</html>
Bibligrafia
1.- http://www.hipertexto.info/documentos/html.htm. 01/02/2017
2.-
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=435:iqu
e-es-y-para-que-sirve-html-el-lenguaje-mas-importante-para-crear-paginas-webs-html-tags-
cu00704b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

3.- http://www.monografias.com/trabajos7/html/html.shtml.
PNF EN ELECTRICIDAD

Curso Bsico de CSS

Facilitador:
Ing. Nestor Molina
Introduccin a las CSS

El lenguaje HTML est limitado a la hora de aplicarle forma a un documento. Esto es as porque fue
concebido para otros usos (cientficos sobre todo), distinto a los actuales, mucho ms amplios.
Para solucionar estos problemas los diseadores han utilizado tcnicas tales como la utilizacin de
tablas imgenes transparentes para ajustarlas, utilizacin de etiquetas que no son estndares del
HTML y otras. Estas "trampas" han causado a menudo problemas en las pginas a la hora de su
visualizacin en distintas plataformas.
Adems, los diseadores se han visto frustrados por la dificultad con la que, aun utilizando estos
trucos, se encontraban a la hora de maquetar las pginas, ya que muchos de ellos venan
maquetando pginas sobre el papel, donde el control sobre la forma del documento es absoluto.
Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnologa consiste en que
las pginas web tienen mezclado en su cdigo HTML el contenido del documento con las etiquetas
necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del cdigo HTML se
hace pesada y difcil a la hora de buscar errores o depurar las pginas. Aunque, desde el punto de
vista de la riqueza de la informacin y la utilidad de las pginas a la hora de almacenar su
contenido, es un gran problema que estos textos est en mezclados con etiquetas incrustadas para
dar forma a estos: se degrada su utilidad.
En estas pginas de CSS pretendemos dar a conocer la tecnologa con un enfoque prctico para que
en pocos captulos podis usar las CSS de una manera depurada, reflejando toda nuestra experiencia
en su uso. No pretendendemos explorar todos los aspectos de la tecnologa ya que para realizar esto
necesitaramos un la extensin de un libro entero.

Caractersticas y ventajas de las CSS


El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma
de presentacin que le aplicaremos a:
l Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
l Un documento HTML o pgina, se puede definir la forma, en un pequeo trozo de cdigo en la
cabecera, a toda la pgina.
l Una porcin del documento, aplicando estilos visibles en un trozo de la pgina.
l Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola
etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programacin. Podemos definir,
por ejemplo, varios tipos de prrafos: en rojo, en azul, con margenes, sin ellos...
La potencia de la tecnologa salta a la vista. Pero no solo se queda aqu, ya que adems esta sintaxis
CSS permite aplicar al documento formato de modo mucho ms exacto. Si antes el HTML se nos
quedaba corto para maquetar las pginas y tenamos que utilizar trucos para conseguir nuestros
efectos, ahora tenemos muchas ms herramientas que nos permiten definir esta forma:
l Podemos definir la distancia entre lneas del documento.
l Se puede aplicar identado a las primeras lneas del prrafo.
l Podemos colocar elementos en la pgina con mayor precisin, y sin lugar a errores.
l Y mucho ms, como definir la visibilidad de los elementos, mrgenes, subrayados, tachados...
Y seguimos mostrando las ventajas, ya que si con el HTML tan slo podamos definir atributos en
las pginas con pixeles y porcentajes, ahora podemos definir utilizando muchas ms unidades
como:
l Pixels (px) y porcentaje (%), como antes.
l Pulgadas (in)
l Puntos (pt)
l Centmetros (cm)
Navegadores que lo soportan
Esta tecnologa es bastante nueva, por lo que no todos los navegadores la soportan. En concreto,
slo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versin
3 son capaces de comprender los estilos en sintaxis CSS. Adems cabe destacar que no todos los
navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet
Explorer 3 no soporta todo lo relativo a capas.
Esto quiere decir que debemos de usar esta tecnologa con cuidado, ya que muchos usuarios no
podrn ver los formatos que apliquemos a las pginas con CSS. As pues, utilizad las hojas de
estilos cuando estas no vayan a suponer un problema.

Usos de las CSS I

CSS tiene una sintaxis propia, la veremos a travs de ejemplos.


Luego se ver con detalle
Vamos ahora a describir los diferentes usos de las CSS introducidos en el anterior captulo. Vamos
por orden, describiendo los puntos segn su dificultad e importancia.
Hemos partido este captulo en dos partes por su extensin y por haber varias formas distintas de
aplicar estilos, aqu veremos las ms sencillas y en el captulo siguiente otras ms complicadas pero
ms potentes.
Pequeas partes de la pgina
Para definir estilos en secciones reducidas de una pgina se utiliza la etiqueta <SPAN>.
Con su atributo style indicamos en sintaxis CSS las caractersticas de estilos. Lo vemos con un
ejemplo, pondremos un prrafo en el que determinadas palabras las vamos a visualizar en color
verde.
<p>
Esto es un prrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>.
resulta muy fcil.
</p>
Que tiene como resultado:
Esto es un prrafo con varias palabras en color verde. resulta muy fcil.
Estilo definido para una etiqueta
De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo,
podemos definir un prrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo
style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un
navegador compatible con CSS).

<p style="color:#990000">
Esto es un prrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un prrafo de color azul.
</p>

Que tiene como resultado:


Esto es un prrafo de color rojo.
Esto es un prrafo de color azul.
Estilo definido en una parte de la pgina

Con la etiqueta <DIV> podemos definir secciones de una pgina y aplicarle estilos con el atributo
style, es decir, podemos definir estilos de una vez a todo un bloque de la pgina.

<div style="color:#000099; font-weight:bold">


<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>

Que tiene como resultado:


Estas etiquetas van en azul y negrita
Seguimos dentro del DIV, luego permanecen los etilos
Hasta aqu este captulo, en el siguiente seguiremos viendo formas ms avanzadas de usar las CSS.

Usos de las CSS y II

Estilo definido para toda una pgina


Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la pgina. Es
una manera muy cmoda de darle forma al documento y muy potente, ya que estos estilos sern
seguidos en toda la pgina y nos ahorraremos as muchas etiquetas HTML que apliquen forma al
documento. Adems, si deseamos cambiar los estilos de la pgina lo haremos de una sola vez.
Este ejemplo es ms complicado, puesto que se utiliza la sintaxis CSS de manera ms avanzada.
Pero no te preocupes puesto que con los ejemplos irs aprendiendo su uso y ms tarde
comentaremos la sintaxis en profundidad.
En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la pgina para
definir los distintos estilos del documento.
A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que
queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las caractersticas de
estilos.

<html>
<head>
<title>Ejemplo de estilos para toda una p&aacute;gina</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>
<body>
<h1>P&aacute;gina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p>
</body>
</html>

Como se puede apreciar en el cdigo, hemos definido que la etiqueta <H1> se presentar
l Subrayado
l Centrada
Tambin, por ejemplo, hemos definido que el cuerpo entero de la pgina (etiqueta <BODY>) se le
apliquen los estilos siguientes:
l Color del texto negro
l Color del fondo grisceo
l Margen lateral de 1 centmetro
Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos sern heredados por el resto de
las etiquetas del documento. Esto es as siempre y cuando no se vuelvan a definir esos estilos en las
siguientes etiquetas, en cuyo caso el estilo de la etiqueta ms concreta ser el que mande. Puede
verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos para
<BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es ms concreta.
Por ltimo, ha de apreciarse los comentarios HTML que engloban toda la declaracin de estilos: <!-
-Declaracin de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos, que no
comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la pgina. Si no se pusiera, los
navegadores antiguos (por ejemplo Netscape 3) escribiran ese "feo cdigo" en la pgina.
Hemos preparado la misma pgina, pero con declaraciones de estilos distintas, para que comprobis
las diferencias en la forma del documento con slo unos cambios en sus estilos.

Estilo definido para todo un sitio web

Una de las caractersticas ms potentes de la programacin con hojas de estilos consiste en que, de
una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo
donde tan slo colocamos las declaraciones de estilos de la pgina y enlazando todas las pginas del
sitio con ese archivo. De este modo, todas las pginas comparten una misma declaracin de estilos
y, por tanto, si la cambiamos, cambiarn todas las pginas. Con las ventajas aadidas de que se
ahorra en lneas de cdigo HTML (lo que reduce el peso del documento) y se evita la molestia de
definir una y otra vez los estilos con el HTML, tal como se coment anteriormente.
Veamos ahora cmo el proceso para incluir estilos con un fichero externo.
1- Creamos el fichero con la declaracin de estilos
Es un fichero de texto normal, que puede tener cualquer extensin, aunque le podemos asignar la
extensin .css para aclararnos qu tipo de archivo es. El texto que debemos incluir debe ser escrito
exclusivamente en sintaxis CSS, es decir, sera errneo incluir cdigo HTML en el: etiquetas y
dems. Podemos ver un ejemplo a continuacin.

P{
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White

2- Enlazamos la pna web con la hoja de estilos


Para ello, vamos a colocar la etiqueta <LINK> con los atributos l rel="STYLESHEET" indicando
que el enlace es con una hoja de estilos l type="text/css" porque ela archivo es de texto, en sintaxis
CSS l href="estilos.css" indica el nombre del fichero fuente de los estilos Veamos una pgina web
entera que enlaza con la declaracin de estilos anterior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>P&aacute;gina que lee estilos</title>
</head>
<body>
<h1>P&aacute;gina que lee estilos</h1>
Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de
estilos. Es muy f&aacute;cil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto est&aacute; dentro de un TD, luego tiene estilo propio, declarado en el fichero
externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>

Reglas de importancia en los estilos


Los estilos se heredan de una etiqueta a otra, como se indic anteriormente. Por ejemplo, si tenemos
declarado en el <BODY> unos estilos, por lo general, estas declaraciones tambin afectarn a
etiquetas que estn dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.
En muchas ocasiones ms de una declaracin de estilos afecta a la misma porcin de la pgina.
Siempre se tiene en cuenta la declaracin ms particular. Pero las declaraciones de estilos se pueden
realizar de mltiples modos y con varias etiquetas, tambin entre estos modos hay una jerarqua de
importancia para resolver conflictos entre varias declaraciones de estilos distintas para una misma
porcin de pgina. Se puede ver a continuacin esta jerarqua, primero ponemos las formas de
declaracin ms generales, y por tanto menos respetadas en caso de conflicto:
l Declaracin de estilos con fichero externo. (Para todo un sitio web)
l Declaracin de estilos para toda la pgina. (Con la etiqueta <STYLE> en la
cabecera de la pgina)
l Estilos definidos en una parte de la pgina. (Con la etiqueta <DIV>)
l Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestin)
l Declaracin de estilo para una porcin pequea del documento. (Con la etiqueta <SPAN>)
Ya vimos cmo incluir estilos en la pgina, de todas las maneras posibles e hicimos un repaso con
la lista anterior. Ahora ests en condiciones de empezar a usar las hojas de estilo en cascada para
mejorar tus pginas y aumentar la productividad de tu trabajo.
Pero estate atento a los siguientes captulos donde aprenders las lecciones que te faltan para
dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que
mejorarn tus pginas.

Otra manera de definir estilos en un archivo externo


Veamos ahora otra manera de importar una declaracin externa de estilos CSS: @import
url("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de estilos guardadas
en la ruta que se indica entre parntesis. (las comillas son opcionales, pero los parntesis son
obligatorios, por lo menos, en Explorer).
Se debe incluir en la declaracin de estilos global a una pgina, es decir entre las etiquetas <style
type="text/css"> y </style>, que se colocan en la cabecera del documento.
Es importante sealar que la sentencia de importacin del archivo CSS se debe escribir en la
primera lnea de la declaracin de estilos, algo parecido al cdigo siguiente.
<style type="text/css">
@import url ("estilo.css");
body{
background-color:#ffffcc;
}
</style>
El funcionamiento es el mismo que si escribisemos todo el fichero a importar dentro de las
etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del cdigo HTML (entre las
etiquetas </style>) estilos que haban quedado definidos en el archivo externo, los que se aplicarn
sern los que hayamos redefinido.
As, en el ejemplo anterior, aunque hubisemos definido en estilo.css un color de fondo para la
pgina, el color que prevalecera sera el definido a continuacin de la importacin: #ffffcc
La diferencia entre este tipo de importacin del tipo y la que hemos visto anteriormente:
<link rel="stylesheel" type="text/css" href="hoja.css">
Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas bsicas en el trabajo con
los estilos (que se definen en un archivo a importar) y unos estilos especficos para cada pgina, que
se definen a continuacin, dentro del cdigo HTML entre las etiquetas </style>, como es el caso del
ejemplo visto anteriormente.

Sintaxis CSS
Tal como se vi en los ejemplos la sintaxis es bastante sencilla y repetitiva. Vamos a verla:
l Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos
y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos
separados por punto y coma.
Ejemplo:
font-size: 10pt; text-decoration: underline; color: black; (el ltimo punto y
coma de la lista de atributos es opcional)
l Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos
encerrados entre llaves.
Ejemplo:
H1{text-align: center; color:black}
l Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla en el
siguiente captulo. Muchos estos valores son unidades de medida, por ejemplo, el valor del tamao
de un margen o el tamao de la fuente. Las unidades de medida son las siguientes:
Puntos pt
Pulgadas in
Centmetros cm
pixels px
Hasta aqu, queda dicho todo lo relativo a la sintaxis. En el siguiente captulo podrs encontrar una
lista de los atributos de las hojas de estilo en cascada.

Atributos de las hojas de estilo


Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer de una
tabla donde se vean los distintos atributos y valores de estilos que podemos aplicarle a las pginas
web.
Nombre FUENTES FONT
Posibles
Nombre del atributo Ejemplos
valores
valor RGB o color: #009900;
color
nombre de color color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML.
No todos los nombres de colores son admitidos en el estndar, es aconsejable
entonces utilizar el valor RGB.
xx-small | x-small |
small | medium | font-size:12pt;
font-size
large | x-large | xxlarge font-size: x-large;
Unidades de CSS
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor
exactitud
serif | sans-serif |
cursive | fantasy |
font-family:arial,helvetica;
font-family monospace
font-size: fantasy;
Todas las fuentes
habituales
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores
son genricos, es decir, los exploradores las comprenden y utilizan las fuentes que
el usuario tenga en su sistema.
Tambin se pueden definir con tipografas normales, como ocurra en html. Si el
nombre de una fuente tiene espacios se utilizan comillas para que se entienda
bien.
normal | bold |
bolder | lighter |
font-weight:bold;
ont-weight 100 | 200 | 300 |
font-weight: 200;
400 | 500 | 600 |
700 | 800 | 900
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para
poner negrillas con total libertad.
Normal y 400 son el mismo valor, as como bold y 700.
normal | italic | font-style:normal;
font-style
oblique font-style: italic;
Es el estilo de la fuente, que puede ser normal, itlica u oblcua. El estilo oblique
es similar al italic.
PRRAFOS - TEXT
normal y unidades line-height: 12px;
line-height
CSS line-height: normal;
El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas
caractersticas que no se podian mofificar utilizando HTML.
none | [ underline text-decoration: none;
text-decoration
|| overline || linethrough] text-decoration: underline;
Para establecer la decoracin de un texto, es decir, si est subrayado,
sobrerayado o tachado.
left | right | center text-align: right;
text-align
| justify text-align: center;
Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de
estilo permiten el justificado de texto, aunque recuerda que no tiene por que
funcionar en todos los sistemas.
text-indent: 10px;
text-indent Unidades CSS
text-indent: 2in;
Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y
novedosa.
capitalize |
text-transform: none;
text-transform uppercase |
text-transform: capitalize;
lowercase | none
Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas de todas las
palabrs, todo en maysculas o minsculas.
FONDO - BACKGROUND
Un color, con su
background-color: green;
Background-color nombre o su valor
background-color: #000055;
RGB
Sirve para indicar el color de fondo de un elemento de la pgina.
El nombre de la background-image: url
imagen con su (mrmol.gif) ;
Background-image
camino relativo o background-image: url(http://
absoluto www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina.
BOX - CAJA
margin-left: 1cm;
Margin-left Unidades CSS
margin-left: 0,5in;
Indicamos con este atributo el tamao del margen a la izquierda
margin-right: 5%;
Margin-right Unidades CSS
margin-right: 1in;
Se utiliza para definir el tamao del margen a la derecha
padding-left: 0.5in;
Margin-top Unidades CSS
padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elementocontinente
y el contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-top: 10pt;
Padding-right Unidades CSS
padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el
contenido de este.
padding-right: 0.5cm;
Padding-bottom Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elementocontinente y el
contenido de este.
color RGB y nombre border-color: red;
Border-color
de color border-color: #ffccff;
Para indicar el color del borde del elemento de la pgina al que se lo aplicamos.
Se puede poner colores por separado con los atributos border-top-color, borderright-
color, border-bottom-color, border-left-color.
Border-style none | dotted | border-style: solid;
solid | double | border-style: double;
groove | ridge |
inset | outset
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece
funcionar), solid=solido, double=doble borde, y desde groove hasta outset son bordes con varios
efectos 3D.
border-width: 10px;
border-width Unidades CSS
border-width: 0.5in;
El tamao del borde del elemento al que lo aplicamos.
float none | left | right float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor
de dicho elemento. Igual que el atributo align en imagenes en sus valores right y left.
clear none | right | left clear: right;
Si este elemento tiene a su altura imagenes u otros elementos alineados a la derecha o la izquierda,
con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos a el
lado que indiquemos.

La especificacin de estilos CSS es muy amplia, seguro que se queda en el tintero algn atributo de
estilo, pero creo que la inmensa mayora estn, y por supuesto la seleccin de los ms importantes.
Definir estilos utilizando clases
Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces.
Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o en un
archivo externo a la pgina. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del
nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera:
.nombredelaclase {atributo: valor;atributo2:valor2; ...}
Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos
el atributo class, ponindole como valor el nombre de la clase, de esta forma:
<ETIQUETA class="nombre de la clase">

Ejemplo de la utilizacin de clases


<html>
<head>
<title>Ejemplo de la utilizaci&oacute;n de clases</title>
<STYLE type="text/css">
.fondonegroletrasblancas {background-color:black;color:white;font-size:12;font-family:arial}
.letrasverdes {color:#009900}
</STYLE>
</head>
<body>
<h1 class=letrasverdes>Titulo 1</h1>
<h1 class=fondonegroletrasblancas>Titulo 2</h1>
<p class=letrasverdes>
Esto es un p&aacute;rrafo con estilo de letras verdes</p>
<p class=fondonegroletrasblancas>
Esto es un p&aacute;rrafo con estilo de fondo

</body>
</html>
clase1.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilos1.css"/>
<title>Nestor Molina</title>
</head>
<meta charset="utf-8">
<body>
<h1>Que es PHP</h1>
<b><i>El lenguaje PHP</i></b>(cuyo nombre es acrnimo de PHP: Hipertext Preprocessor) es
un lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Es un lenguaje de
programacin del lado del servidor, es decir, que un servidor local lo copila lo copila y
ejecuta.<br><hr>Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es
en la generacin dinmica de pginas web donde ha alcanzado su mxima popularidad. En
concreto, suele incluirse incrustado en pginas HTML (o XHTML), siendo el servidor web el
encargado de ejecutarlo.
<p>
<h2>Inclusin de cdigo PHP en una pgina HTML</h2>
Para incluir cdigo PHP basta con precederlo de la etiqueta <?php, y cerrarlo con ?>. Si el
servidor web est correctamente configurado, detectar cdigo PHP y, en vez de proporcionarle
el contenido de la pgina directamente al cliente (lo que significara que recibira el cdigo
fuente del programa), ejecuta el programa y devuelve su resultado al navegador.
</p>
</body>
</html>
estilos1.css
body {
background: black;
color: white;
}
clases2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilos2.css"/>
<title>Nestor Molina</title>
</head>
<meta charset="utf-8">
<body>
<h1>Titulo de nuestro sitio</h1>
<h2>Titulo de nuestro sitio</h2>
<h3>Titulo de nuestro sitio</h3>
<h4>Titulo de nuestro sitio</h4>
<h5>Titulo de nuestro sitio</h5>
<a href="http://www.falconmasters.com">Nestor Molina</a><br>
<a href="#">Nestor Molina numero 2</a>
<p><b><i>El lenguaje PHP</i></b>(cuyo nombre es acrnimo de PHP: Hipertext
Preprocessor) es un lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Es un
<a href="#" class="red"> lenguaje de programacin del lado del servidor</a>, es decir, que un
servidor local lo copila lo copila y ejecuta.</p>
<br><hr>
<p>Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es en la
generacin dinmica de pginas web donde ha alcanzado su mxima popularidad. En concreto,
suele incluirse incrustado en<a href="#" class="green"> pginas HTML (o XHTML)</a>,
siendo el servidor web el encargado de ejecutarlo. </p>
</body>
</html>
estilos2.css

h1,h2,h3,h4,h5 {
color: red;
}
h1{
font-size: 50px
}

h2{
font-size: 30px
}

p{
color: orange;
}
a{
color: green;
font-size: 20px;
}
p .red{
color: blue;
}
p .green{
color: red;
}

a[href="http://www.falconmasters.com"]{
color: blue;
font-size: 30px;
}
clase3.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilos3.css"/>
<title>Nestor Molina</title>
</head>
<meta charset="utf-8">
<body>
<h1>Titulo de nuestro sitio</h1>
<h2>Titulo de nuestro sitio</h2>

<a href="http://www.falconmasters.com">Nestor Molina</a><br>


<a href="#">Nestor Molina numero 2</a>
<div>El lenguaje PHP(cuyo nombre es acrnimo de PHP: Hipertext Preprocessor) es un
lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Es un <a href="#"
class="red"> lenguaje de programacin del lado del servidor</a>, es decir, que un servidor local
lo copila y ejecuta.</div><br><hr>

<div><p>Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es en la


generacin dinmica de pginas web donde ha alcanzado su mxima popularidad</p>. En
concreto, suele incluirse incrustado en<a href="#" class="green"> pginas HTML (o
XHTML)</a>, siendo el servidor web el encargado de ejecutarlo. </div>
</body>
</html>
estilos3.css
body { font-size: 16px;
}
div { background: #000;
color: #fff;
font-size: 20px;
width: 400px;
}
p{ font-size: 0.5em;
}
div p{ font-size: 15px;
width: 50%;
}
clase4.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilos4.css"/>
<title>Nestor Molina</title>
</head>
<meta charset="utf-8">
<body>
<h1>Titulo de nuestro sitio</h1>
<h2>Titulo de nuestro sitio</h2>
<h3>Titulo de nuestro sitio</h3>
<h4>Titulo de nuestro sitio</h4>
<h5>Titulo de nuestro sitio</h5>
<a href="http://www.falconmasters.com">Nestor Molina</a><br>
<a href="#">Nestor Molina numero 2</a>
<p><b><i>El lenguaje PHP</i></b>(cuyo nombre es acrnimo de PHP: Hipertext
Preprocessor) es un lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Es un
<a href="#" class="red"> lenguaje de programacin del lado del servidor</a>, es decir, que un
servidor local lo copila lo copila y ejecuta.</p>
<br><hr>
<p>Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es en la
generacin dinmica de pginas web donde ha alcanzado su mxima popularidad. En concreto,
suele incluirse incrustado en<a href="#" class="green"> pginas HTML (o XHTML)</a>,
siendo el servidor web el encargado de ejecutarlo. </p>
</body>
</html>
estilos4.css
h1 {
color: rgb(49,163,239);
}
clase5.html
<!DOCTYPE html>
<html>
<head>
<title>Nestor Molina</title>
</head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilos5.css">
<h1>Titulo del sitio web</h1>
<a href="">Hola 1</a>
<a href="">Hola 2</a>
<body>

<div> El Servidor OPC para toda la familia de PLCs Allen Bradley es el RSLinx en su
versin Professional o Gateway.
</div>
<div>
Nos aparece la siguiente imagen, y damos al boton New para crear un nuevo Tpico,
asignamos el nombre que nos interese
</div>
</body>
</html>
estilos5.css

div{
width: 30%;
height: 60px;
margin: 20px 50px;
padding: 30px;
background: #ff8000;
border: 10px solid #000;
display: inline-block;
}
clase6.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web con css</title>
<link rel="stylesheet" type="text/css" href="css/estilos7.css">
</head>
<body>
<div>
<h2>#1</h2>
</div>
<div>
<h2>#2</h2>
</div>
<div>
<h2>#3</h2>
</div>
<div>
<h2>#4</h2>
</div>
<div>
<h2>#5</h2>
</div>
<div>
<h2>#6</h2>
</div>
</body>
</html>
estilos6.css

body{
background:url(../imagenes/logo2.jpg);
width: 1000px;
height: 1000px;
background-repeat: no-repeat;
color: white;
background-attachment: scroll;
background-position: 0px 0px;
}
div{
width: 380px;
}
clases7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web con css</title>
<link rel="stylesheet" type="text/css" href="css/estilos7.css">
</head>
<body>
<div>
<h2>#1</h2>
</div>
<div>
<h2>#2</h2>
</div>
<div>
<h2>#3</h2>
</div>
<div>
<h2>#4</h2>
</div>
<div>
<h2>#5</h2>
</div>
<div>
<h2>#6</h2>
</div>
</body>
</html>
estilos7.css
div {
width: 100px;
height: 100px;
background: red;
color: #fff;
font-size: 30px;
}
clases8.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nestor Molina</title>
<link rel="stylesheet" type="text/css" href="css/estilos8.css"/>
</head>
<h1>Normal</h1>
<body>
<p class="uno">El lenguaje PHP(cuyo nombre es acrnimo de PHP: Hipertext Preprocessor) es
un lenguaje interpretado con una sintaxis similar a la de C++ o JAVA. Es un lenguaje de
programacin del lado del servidor, es decir, que un servidor local lo copila lo copila y
ejecuta.</p>
<p class="dos">Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es
en la generacin dinmica de pginas web donde ha alcanzado su mxima popularidad. En
concreto, suele incluirse incrustado en pginas HTML (o XHTML), siendo el servidor web el
encargado de ejecutarlo. </p>
<p class="tres">Aunque el lenguaje se puede usar para realizar cualquier tipo de programa, es
en la generacin dinmica de pginas web donde ha alcanzado su mxima popularidad. En
concreto, suele incluirse incrustado en pginas HTML (o XHTML), siendo el servidor web el
encargado de ejecutarlo. </p>
</body>
</html>
estilos8.css
h1 {
font-weight: normal;
text-align: center;
background: #ccc;
}
p{
font-family: "Verdana";
font-size: 20px;
font-weight: normal;
text-align: center;
line-height: 20px;
text-decoration: underline; /* se puede colocar tambien overline, line-through y none */
text-transform: capitalize;/*uppercase y lowercase*/
letter-spacing: 20px;
word-spacing: 20px;
text-shadow: 5px 5px 5px #000;
}
clases9.html
<title>Nestor Molina</title>
<link rel="stylesheet" type="text/css" href="css/estilos9.css"/>
</head>
<body>
<a href=>Blog de Diseo Web</a>
<a href=>Blog de Diseo Web</a>
<a href=>Blog de Diseo Web</a>
<a href=>Blog de Diseo Web</a>
<a href="http://www.falconmasters.com/tutoriales/Nestor">Blog de Diseo Web</a>
</body>
</html>
estilos9.css
a{
font-size: 20px;
color: blue;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
margin: 10px 20px 10px 10px;
background: #3BA7E1;
color: #fff;
box-shadow: 0px 5px 0px #1D64A6;
}
a:hover{
box-shadow: 0px 2px 0px #000;
background: #ccc;
}
a:active{
box-shadow: none;
}
clases10.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nestor Molina</title>
<link rel="stylesheet" type="text/css" href="css/estilos10.css">
</head>
<body>
<div>
<img src="imagenes/logo.jpg" width="200" alt="">
</div>
</body>
</html>
estilos10.css
div{
background:#ccc;
width: 800px;
}
img {
height: 300px;
width: auto;
/*margin: auto;*/
display: block;
border-radius: 50px;
/*box-shadow: 5px 5px 0px blue;*/
padding: 10px;
border: 1px solid #000;
}
clases11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nestor Molina</title>
<link rel="stylesheet" type="text/css" href="css/estilos11.css">
</head>
<body>
<ul class="menu">
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #1</a></li>
</ul>
<ol>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
</ol>
</body>
</html>
estilos11.css

/*ul{
list-style-type: circle; /* square (cuadro)*/
/* list-style-position: inside;
}
/*ol{
list-style-type: decimal-leading-zero;/*para agregar ceros, upper-latin
para cambiar a letras mayuscula, lewer-latin para cambiar a letras minuscula*/
/*
}*/
.menu {
width: 100%;
background: #000;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
}
.menu li a {
padding: 10px 20px;
display: inline-block;
color: #fff;
}
.menu li a:hover {
background: #ccc;
color: #000;
}
clases12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nestor Molina</title>
<link rel="stylesheet" type="text/css" href="css/estilos12.css">
</head>
<body>
<table>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>
<tr>
<td>Item #1</td>
<td>Item #2</td>
<td>Item #3</td>
<td>Item #4</td>
<td>Item #5</td>
</tr>

</table>
</body>
</html>
estilos12.css

table {
border: 1px solid #000;
border-collapse: collapse;
}

table td {
border: 1px solid #000;
padding: 20px;
}

table tr:hover {
background: #ccc;
}
table td:hover {
background: #000;
color: #fff;
}
clases13.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nestor Molina</title>
<link rel="stylesheet" type="text/css" href="css/estilos13.css">
</head>
<body>
<form>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" pattern="Escribe tu nombre">

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Escribe tu email">

<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" placeholder="Escribe tu mensaje"></textarea>
<input type="submit" value="Enviar">
</form>
</body>
</html>
estilos13.css
form {
width: 25%;
border: 1px solid RED;
margin: 20px;
padding: 20px;
}

label {
font-size: 12px;
display: block;
width: 100%
}

textarea {
resize: vertical;
max-height: 300px;
min-height: 100px;
}

input, textarea {
margin-bottom: 20px;
width: 100%;
padding: 10%;
box-sizing: border-box;
border: 1px solid blue;
}

input:focus, textarea:focus {
border: 1px solid #1668C4;
}

input[type="submit"] {
margin-bottom: 0;
background: #1668C4;
color: #fff;
border: none;
}

input[type="submit"]:hover {
background: #4A88F4;
cursor: pointer;
}
clases14.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nestor Molina</title>
<link rel="stylesheet" type="text/css" href="css/estilos14.css">
</head>
<body>

<header>
<div class="logotipo">
<img src="imagenes/logo.jpg" width="100" alt="">
</div>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>

</nav>
</header>
<section class="main">
<section class="articles">
<article>
<h2>Este es el titulo de mi sitio web</h2>
<p>
ETAP se diseo y desarrollo para ingenieros, con el fin de manejar las diversas disciplinas de los
sistemas elctricos de potencia en un paquete integrado con mltiples interfaces, con vistas como
redes AC y DC, canal para cables, malla de tierra, tableros, coordinacin y selectividad de
dispositivos de proteccin, y Control de diagramas de sistemas AC y DC.
</p>
<h2>Este es el titulo de mi sitio web</h2>
<p>
ETAP permite trabajar directamente con diagramas unilineales,
sistemas de canalizacin subterrneos de cables, sistema tridimensional de cables, coordinacin
tiempo-corriente de protecciones y grficas de selectividad, esquemas de sistemas de informacin
geogrficos (GIS), as como sistemas de mallas de puesta a tierra tridimensionales.
</p>
</article>
</section>
<aside>
<h3>Este es mi Sidebar</h3>
<p>
ETAP es un programa de anlisis de sistemas elctricos de potencia
totalmente grfico que es compatible con los sistemas operativos Microsoft Windows 2000,
XP, 2003, 2007 y 2008. Adems de los mdulos de simulacin estndar para anlisis off-line,
ETAP puede utilizar datos de operacin en tiempo real para la supervisin avanzada y
simulacin en tiempo real, optimizacin y desprendimiento inteligente de carga en tiempo real.
</p>
</aside>
</section>
<footer>
Ing. Nestor Molina
</footer>
</body>
</html>
estilos14.css
*{
margin: 0;
padding: 0;
}
body {
background: #e6e6e6;
}
header, .main, footer {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
header nav {
background: #528FD5;
overflow: hidden;
}
header nav ul {
list-style: none;
}

header nav ul li {
float: left;
}
header nav ul li a {
padding: 10px 20px;
display: block;
color: #fff;
text-decoration: none;
}
header nav ul li a:hover {
background: #75ACEC;
}
.main .articles {
width: 68.5%;
margin-bottom: 1.5%;
float: left;
}
.main .articles article {
padding: 20px;
background: #fff;
margin-bottom: 20px;
}
aside {
width: 30%;
background: #ff8000;
float: left;
padding:12px;
box-sizing: border-box;
}
footer {
background: #000;
color: #fff;
clear: both;
padding: 10px 0px;
text-align:center;
}
Bibliografa
Tutoriales y recursos sobre Desarrollo Web!
www.falconmasters.com
PNF EN ELECTRICIDAD

Curso Bsico de PHP

Facilitador:
Ing. Nestor Molina
Qu es PHP?
PHP (acronimo de "PHP: Hypertext Preprocessor") es un lenguaje interpretado de alto nivel
embebido en pginas HTML y ejecutado en el servidor.
Una respuesta corta y concisa, pero que significa realmente? Un ejemplo nos aclarar las cosas:
Ejemplo 1-1. Un ejemplo introductorio
<html>
<head>
<title>Ejemplo PHP</title>
</head>
<body>
<?php echo "Hola, este es un ejemplo con PHP!"; ?>
</body>
</html>
Podemos ver que no es lo mismo que un script CGI escrito en otro lenguaje de programacin como
Perl o C En vez de escribir un programa con muchos comandos para crear una salida en HTML,
escribimos el cdigo HTML con cierto cdigo PHP embebido (introducido) en el mismo, que
producir cierta salida (en nuestro ejemplo, producir un texto). El cdigo PHP se incluye entre
etiquetas especiales de comienzo y final que nos permitirn entrar y salir del modo PHP.
Lo que distingue a PHP de la tecnologa Javascript, la cual se ejecuta en la mquina cliente, es que
el cdigo PHP es ejecutado en el servidor. Si tuvisemos un script similar al de nuestro ejemplo en
nuestro servidor, el cliente solamente recibira el resultado de su ejecucin en el servidor, sin
ninguna posibilidad de determinar que cdigo ha producido el resultado recibido. El servidor web
puede ser incluso configurado para que procese todos los ficheros HTML con PHP.

Qu se puede hacer con PHP?


Al nivel ms bsico, PHP puede hacer cualquier cosa que se pueda hacer con un script CGI, como
procesar la informacin de formularios, generar pginas con contenidos dinmicos, o mandar y
recibir cookies.
Quizs la caracterstica ms potente y destacable de PHP es su soporte para una gran cantidad de
bases de datos. Escribir un interfaz via web para una base de datos es una tarea simple con PHP.
Las siguientes bases de datos estn soportadas actualmente:
Adabas D Ingres Oracle (OCI7 and OCI8)
dBase InterBase PostgreSQL
Empress FrontBase Solid
FilePro mSQL Sybase
IBM DB2 MySQL Velocis
Informix ODBC Unix dbm
PHP tambin soporta el uso de otros servicios que usen protocolos como IMAP, SNMP, NNTP,
POP3, HTTP y derivados.
Tambin se pueden abrir sockets de red directos (raw sockets) e interactuar con otros protocolos.

Corta historia de PHP

PHP fue concebido en otoo de 1994 por Rasmus Lerdorf (mailto:rasmus@php.net). Las primeras
versiones no distribuidas al pblico fueron usadas en un sus pginas web para mantener un control
sobre quien consultaba su currculum. La primera versin disponible para el pblico a principios de
1995 fue conocida como "Herramientas para pginas web personales"(Personal Home Page Tools).
Consistan en un analizador sintctico muy simple que solo entenda unas cuantas macros y una
serie de utilidades comunes en las pginas web de entonces, un libro de visitas, un contador y
otras pequeas cosas. El analizador sintctico fue reescrito a mediados de 1995 y fue nombrado
PHP/FI versin 2. FI viene de otro programa que Rasmus haba escrito y que procesaba los datos de
formularios. As que combin las "Herramientas para pginas web personales", el "intrprete de
formularios", aadi soporte para mSQL y PHP/FI vio la luz. PHP/FI creci a gran velocidad y la
gente empez a contribuir en el cdigo.
Es difcil dar estadsticas exactas, pero se estima que a finales de 1996 PHP/FI se estaba usando al
menos en 15.000 pginas web alrededor del mundo. A mediados de 1997 este nmero haba crecido
a mas de 50.000. A mediados de 1997 el desarrollo del proyecto sufri un profundo cambio, dej de
ser un proyecto personal de Rasmus, al cual haban ayudado un grupo de usuarios y se convirti en
un proyecto de grupo mucho ms organizado. El analizador sintctico se reescribi desde el
principio por Zeev Suraski y Andi Gutmans y este nuevo analizador estableci las bases para PHP
versin 3. Gran cantidad de cdigo de PHP/FI fue portado a PHP3 y otra gran cantidad fue escrito
completamente de nuevo.
Hoy en da (finales 1999), tanto PHP/FI como PHP3 se distribuyen en un gran nmero de productos
comerciales tales como el servidor web "C2s StrongHold"y Redhat Linux. Una estimacin
conservativa basada en estadsticas de NetCraft (http://www.netcraft.com/) (ver tambin Estudio de
NetCraft sobre servidores web (http://www.netcraft.com/survey/)), es que ms de 1.000.000 de
servidores alrededor del mundo usan PHP. Para hacernos una idea, este nmero es mayor que el
nmero de servidores que utilizan el "Netscapes Enterprise server"en Internet.
A la vez que todo esto est pasando, el trabajo de desarrollo de la prxima generacin de PHP est
en marcha. Esta versin utiliza el potente motor de scripts Zend (http://www.zend.com/) para
proporcionar altas prestaciones, as como soporta otros servidores web, adems de apache, que
corren PHP como mdulo nativo.

Uso de la barra invertida proporciona una manera de codificar caracteres no imprimibles en


patrones de una forma visible. No hay restricciones en la aparicin de los caracteres no imprimibles,
excepto para el cero binario el cual finaliza el patrn, pero cuando un patrn est siendo preparado
para edicin de texto, normalmente es ms fcil usar una de las siguientes secuencias de escape en
vez del carcter binario que representan:

\a alarma, es decir, el carcter BEL (07 hex)


\cx "control-x", donde x es cualquier carcter
\e escape (1B hex)
\f salto de pgina (0C hex)
\n nueva lnea (0A hex)
\p{xx} un carcter con la propiedad xx, vase propiedades unicode para ms informacin
\P{xx} un carcter sin la propiedad xx, vase propiedades unicode para ms informacin
\r retorno de carro (0D hex)
\R salto de lnea: coincide con \n, \r y \r\n
\t tabulador (09 hex)
\xhh carcter con el cdigo hexadecimal hh
\ddd carcter con el cdigo octal ddd, o retroreferencia

El efecto exacto de "\cx" es como sigue: si "x" es una letra minscula, sta se convierte a
mayscula. Despus se invierte el bit 6 del carcter (40 hex). As, "\cz" se convierte en 1A hex, pero
"\c{" se convierte en 3B hex, mientras que "\c;" se conviente en 7B hex.

Despus de "\x", se leen hasta dos dgitos hexadecimales (las letras pueden ser tanto maysculas
como minsculas). En modo UTF-8, "\x{...}" es permitido, donde el contenido entre las llaves es
una cadena de dgitos hexadecimales. Esto se interpreta como un carcter UTF-8 cuyo nmero de
cdigo es el dado por el nmero hexadecimal. La secuencia de escape hexadecimal original, \xhh,
conincide con un carcter UTF-8 de dos bytes si el valor es mayor que 127.
Despus de "\0", se leen hasta dos dgitos octales ms. En cualquier caso, si hay menos de dos
dgitos, slo se usan aqullos que estn presentes. As, la secuencia "\0\x\07" especifica dos ceros
binarios seguidos de un carcter BEL. Asegrese de proporcionar dos dgitos despus del cero
inicial si el carcter que sigue es tambin un dgito octal.

El manejo de una barra invertida seguida de un dgito distinto de 0 es complicado. Fuera de una
clase carcter, PCRE lee este dgito, as como cualesquiera dgitos siguientes, como un nmero
decimal. Si el nmero es menor que 10, o si ha habido al menos tantas capturas previas hacia la
izquierda en la expresin, la secuencia entera es tomada como una retroreferencia. Una descripcin
de cmo funciona esto se da ms adelante, seguido de una discusin sobre sub-patrones entre
parntesis.

Dentro de una clase carcter, o si el nmero decimal es mayor que 9 y no han habido tantos sub-
patrones de captura, PCRE relee hasta tres dgitos octales siguientes a la barra invertida, y genera un
slo byte de los 8 bits menos significativos del valor. Cualesquiera dgitos subsiguientes se
representan a s mismos. Por ejemplo:

\040 es otra manera de escribir un espacio


\40 es lo mismo, siempre que haya menos de 40 sub-patrones de captura previos
\7 es siempre una retroreferencia
\11 puede ser una retrorefenrencia, u otra manera de escribir una tabulacin
\011 es siempre una tabulacin
\0113 es una tabulacin seguida del carcter "3"
\113 es el carcter con el cdigo octal 113 (ya que no puede haber ms de 99 retroreferencias)
\377 es un byte consistente en bits 1 enteramente
\81 es tanto una retroreferencia como un cero binario seguido de los caracteres "8" y "1"

Observ e que los valores octales 100 y mayores no deben ser precedidos por un cero inicial, ya que
nunca se leen ms de tres dgitos octales.

Todas las secuencias que definen un valor de byte nico se pueden usar tanto dentro como fuera de
las clases carcter. Adems, dentro de una clase carcter, la secuencia "\b" se interpreta como el
carcter retroceso (08 hex). Fuera de una clase carcter tiene diferentes significados (vase ms
abajo).

El tercer uso de la barra invertida es parar especificar tipos de caracteres genricos:


\d cualquier dgito decimal
\D cualquier carcter que no es un dgito decimal
\h cualquier carcter espacio en blanco horizontal (desde PHP 5.2.4)
\H cualquier carcter que no es un carcter espacio en blanco horizontal (desde PHP 5.2.4)
\s cualquier carcter espacio en blanco
\S cualquier carcter que no es un carcter espacio en blanco
\v cualquier carcter espacio en blanco vertical (desde PHP 5.2.4)
\V cualquier carcter que no es un carcter espacio en blanco vertical (desde PHP 5.2.4)
\w cualquier carcter "palabra"
\W cualquier carcter que no es "palabra"

Cada par de sencuencias de escape divide el conjunto completo de caracteres en dos conjuntos
separados. Cualquier carcter dado concide con uno, y slo uno, de cada par

Los caracters "espacios en blanco" son HT (9), LF (10), FF (12), CR (13), y el espacio (32). Sin
embargo, si ocurre una coincidencia especfica de una regin, los caracteres con puntos de cdigo
en el rango 128-255 podran tambin considerarse como caracteres de espacio en blanco, por
ejemplo, NBSP (A0).

Un carcter "palabra" es cualquier letra o dgito o el carcter subrayado, es decir, cualquier carcter
que pueda ser parte de una "palabra" Perl. La definicin de letras y dgitos est controlada por las
tablas de caracteres de PCRE, y pueden variar si tiene lugar la comparacin de configuraciones
regionales especficas. Por ejemplo, en la configuracin regional "fr" (Francs), algunos cdigos de
caracteres mayores que 128 se usan para letras acentuadas, y stos se comparan por \w.

Estas secuencias de tipo de caracteres puede aparecer tanto dentro como fuera de las clases carcter.
Cada una coincide con un carcter del tipo apropiado. Si el punto de coincidencia actual est al final
de la cadena objetivo, todas ellas fallarn, ya que no hay caracteres a comparar.

El cuarto uso de la barra invertida es para ciertas declaraciones simples. Una declaracin especifica
una condicin que se debe encontrar en un punto particular de una comparacin, sin consumir
ningn carcter de la cadena objetivo. El uso de sub-patrones para declaraciones ms complicadas
se describe despus. Las declaraciones de la barra invertida son

\b lmite de palabra
\B distinto a lmite de palabra
\A comienzo del sujeto (independientemente del modo multilnea)
\Z fin del sujeto o nueva lnea al final (independientemente del modo multilnea)
\z final del sujeto (independientemente del modo multilnea)
\G primera posicin de coincidencia del sujeto

Estas declaraciones pueden no aparecer en clases carcter (pero observe que "\b" tiene un
significado diferente, a saber, el carcter retroceso, dentro de una clase carcter).

Un lmite de palabra es una posicin en la cadena objetivo donde el carcter actual y el carcter
previo no coinciden con \w o \W (es decir, uno coincide con \w y el otro coincice con \W), o el
inicio o final de la cadena si el primer o ltimo carcter coincide con \w, respectivamente.

Las declaraciones \A, \Z, y \z difieren de los tradicionales circumflejo y dlar (descritos en anclas)
de modo que siempre coinciden con el inicio y final absolutos de la cadena objetivo, sin importar
las opciones que se apliquen. No les afectan las opciones PCRE_MULTILINE o
PCRE_DOLLAR_ENDONLY. La diferencia entre \Z y \z es que \Z coincide antes de una nueva
lnea que es el ltimo carcter de la cadena, adems de al final de la cadena, mientras que \z
coincide slo con el final.

La declaracin \G es verdadera slo cuando la posicin de comparacin actual est al principio del
punto de coincidencia, tal como se especifica en el argumento offset de preg_match(). Difiere de \A
cuando el valor de offset no es cero.

Se puede usar \Q y \E para ignorar metacaracteres de expresiones regulares. Por ejemplo:


\w+\Q.$.\E$ coincidir con uno o ms caracteres palabra, seguidos por los literales . $. y anclados al
final de la cadena.
Index2.php

<?php

echo "Primera Practica de PHP";

?>
practica2.php
<?php
echo "Variables"; echo "<br/>";echo "<br/>";
$numero1=15;
$numero2=30;
echo "Numero1= ".$numero1;echo ",";echo "\040";echo "Numero2= ".$numero2;
echo "<br/>";
$suma=$numero1+$numero2;
$resta=$numero1-$numero2;
$multiplicacion=$numero1*$numero2;
$division=$numero1/$numero2;
echo "La suma es = $suma"; echo "<br/>";
echo "La resta es = $resta"; echo "<br/>";
echo "La multiplicacion es = $multiplicacion"; echo "<br/>";
echo "La division es = $division";
$nombre = "Nestor Alberto";
$apellido = "Molina Alvarado";
echo "<br/>"; echo "<br/>";
print "Tus nombres son: $nombre"; echo "<br/>";
print "Tus apellidos son: $apellido";
?>
proctica3.php
<meta charset="utf-8">
<?php
echo "Conversiones";echo "<br>"; echo "<br>";
$var= 5;
echo $var." es ";
print gettype($var);echo " o entero";
echo "<br/>";
$var="5";
echo "5 se transform con gettype($var) en ";
print gettype($var);echo " o en cadena";
//* Otra forma
echo "<br/>";
echo "5 se transform con (real) $var en ";
$convertido= (real) $var;
print gettype($convertido);echo " o en real";
?>
practica4.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inclucin del Codigo php en html</title>
<link rel="stylesheet" type="text/css" href="practica4.css">
</head>
<body>
<?php
$canal="SINCRNICO";
echo "BUSCA EL MOTOR<br>SINCRNICO"; echo "<br>";
$sub= "EN ELECTRICIDAD<br>";
echo "$sub"; ?>
<p id="azul"> <?php echo "$canal"; ?> </p>
</body>
</html></html>
practica4.css
{
background-color: white;
}
#azul
{
color: blue;
}
practica5.php
Metodos
<?php
//Cocatenacion
$nombre = "Nestor molina";
$apellido ="Molina Alvarado";
echo ("Tus nombres son: <br>$nombre <br>y tus<br> apellidos son:<br> $apellido");
echo "<br>";
// longitud
$letras="Nestor Alberto Molina Alvarado";
print strlen($letras);
//cortar cadenas
echo "<br>";
$letras="abc";
print substr($letras, 0)
?>
practica6.php
//Concatenacin
/*$nombre = "Nestor";
$apellido = "Molina";
echo ('Tu nombre es '.$nombre.' '.'y tu apellido es '.$apellido);
*/
$letras1 = "abc";
$letras2 = "ABC";
print strcmp($letras1, $letras2);
echo "<br>";
$letras1 = "abc";
$letras2 = "ABC";
print strcasecmp($letras1, $letras2);
echo "<br>";
$letras1 = "abc";
$letras2 = "ABC";
$comparacion = strcasecmp($letras1, $letras2);
echo $comparacion;
?>
practica7.php
math
?php
// cos - Coseno
print cos(180);
echo "<br>";
// sin - Seno
echo sin(3);
echo "<br>";
//floor para quitar decimales
$num = 121.256;
print floor($num);
echo "<br>";
echo ("la tangente de 5 es: ".tan(5));
?>
practica7.php
mathe
<?php
//round - Rendondear
$num = 5.6;
echo round($num);
echo "<br>";
print round(3.5655999);
echo "<br>";
//rand - Random
echo rand(1,100); echo "<br>";
//sqrt -Raices
echo sqrt(25); echo "<br>";
// pow - Elevar numero a potencia
print pow(2, 20);
?>
practica8.php
array
<?php
$numeros[0]=1;
$numeros[1]=-3;
$numeros[2]=-1;
print $numeros[0];
echo "<br>";
print $numeros[1];
echo "<br>";
print $numeros[2];
echo "<br>";
$estaciones= array("Sandra","Elena","Molina","Alvarado");
echo $estaciones[3];
echo "<br>";
echo "me gusta ".$estaciones[2].", pero me gusta mas ".$estaciones[0].", pero no me gusta
".$estaciones[1];

?>

Practica9.php
array
<?php

$cliente = array('Nombre'=>"Carla",'apellido'=>"Mora");
echo $cliente['apellido'];
echo "<br>";
echo $cliente['Nombre'] . "\040".$cliente['apellido'];
echo "<br>";
$indice= 'ColorFavorito';
$color= array('$indice' => "Verde");
echo $color['$indice'];
?>

Practica10.php
array
<?php
$persona = array('Nombre'=>"Nestor");
echo $persona['Nombre'];
/*
Cliente
Nombre
Edad
Localidad
*/
echo "<br>";
$clientes = array(
array('Nombre' => "Nestor",'Apellido' =>"Molina"),
array('Nombre' => "Alberto", 'Apellido' => "Alvarado" ),
array('Nombre' => "Instituto",'Apellido' => "IUTC")
);
echo $clientes[2]['Apellido'];
echo "<br>";
$numero =array(
array(1,2,3),
array(4,5,6)
);
echo $numero [1][2];
?>

Practica15.php
array
<?php
echo "// Array count - Cuenta cuantos elementos hay en un array";
echo "<br>";
$numero = array(1,2,3,4);
$longitud = count($numero);
print count($numero);
echo "<br>";
echo $longitud;
echo "<br>";
echo "//array rand - Imprime un elemento aleatorio del array";
echo "<br>";
$numero = array(1,2,3,4);
$random = array_rand($numero);
print $random;
echo "<br>";
echo "//array_product - Calcula el producto de los valores de un array";
echo "<br>";
$numero = array(1,2,3,4,5);
print array_product($numero);
echo "<br>";
echo "//in_array - verifica si esta dentro de un array";
echo "<br>";
$nombre = array("Nestor","Alberto)");
print in_array("Nestor", $nombre);
?>
Array16.php
<?php
echo "array_unshift - A&ntildeadir al incio de un array uno o mas elementos";
echo "<br>";
$nombre =array("Nestor","Alberto");
array_unshift($nombre, "Molina");
echo $nombre[0];
echo "<br>";
echo "array_push - Inserta uno o mas elementos al final de un array";
echo "<br>";
$nombre =array("Nestor","Alberto");
array_push($nombre, "Alvarado");
echo $nombre[2];
echo "<br>";
echo "array_shift - quita un elementos al pricipio de un array";
echo "<br>";
$numero = array(1,2,3);
array_shift($numero);
echo $numero[0];
echo "<br>";
print_r($numero);
echo "<br>";
echo "array_pop - extrae el ultimo elemento del final de un array";
echo "<br>";
$numero = array(1,2,3);
array_pop($numero);
echo $numero[1];
echo "<br>";
echo "array_merge - Combina o une dos o mas array";
echo "<br>";
$numeros1 = array(1,2);
$numeros2 = array(3,4);
$unir = array_merge($numeros1, $numeros2);
echo $unir[3];
echo "<br>";
echo "array_reverse - Cambia la posicion de los elementos";
echo "<br>";
$frutas = array("Manzana","Pera");
$reverso = array_reverse($frutas);
print_r($reverso);
echo "<br>";
?>

If_17.php
<?php
$num1 = 1;
$num2 = 3;
if ($num1>$num2) {
echo "num1=$num1 es mayor que num2=$num2";
}
else
{
echo "num1=$num1 es menor que num2=$num2";
}
?>

If_18.php
<meta charset="utf-8">
<?php
// Operadores de comparacion
// > - Mayor que
// < - Menor que
// >= - Mayor o igual que
// <= - Menor o igual que
// == - Igual
// != - Diferente
$num1 = 10;
$num2 = 5;
echo "Operador comparacin ( > ) - Mayor que";
echo "<br>";
if ($num1>$num2) {
echo "El numero1= ".$num1." es mayor que el numero2= ".$num2;
}
else
{
echo "El numero ".$num2." es menor que el numero ".$num1;
}
echo "<br>";
echo "<br>";
echo "Operador de comparacin ( < ) - Menor que";
echo "<br>";
$num1 = 10;
$num2 = 5;
if ($num1<$num2) {
echo "El numero ".$num1." es mayor que el numero ".$num2;
}
else
{
echo "El numero2= ".$num2." es menor que el numero1= ".$num1;
}
echo "<br>";
echo "<br>";
echo "Operador de comparacin ( >= ) - Mayor o igual que";
echo "<br>";
$num1 = 1;
$num2 = 5;
if ($num1>=$num2) {
echo "El numero1=".$num1." es mayor o igual que el numero 2= ".$num2;
}
else
{
echo "El numero1=".$num1." no es mayor ni igual que el numero2=".$num2;
}
echo "<br>";
echo "<br>";
echo "Operador de comparacin ( <= ) - Menor o igual que";
echo "<br>";
$num1 = 10;
$num2 = 5;
if ($num1<=$num2) {
echo "El numero1=".$num1." es menor o igual que el numero 2= ".$num2;
}
else
{
echo "El numero1=".$num1." no es menor ni igual que el numero2=".$num2;
}
echo "<br>";
echo "<br>";
echo "Operador de comparacin ( == ) - igual que";
echo "<br>";
$num1 = 5;
$num2 = 5;
if ($num1==$num2) {
echo "El numero1=".$num1." es igual que el numero 2= ".$num2;
}
else
{
echo "El numero1=".$num1." no es igual al numero2=".$num2;
}
echo "<br>";
echo "<br>";
echo "Operador de comparacin ( != ) - Diferente a";
echo "<br>";
$num1 = 5;
$num2 = 5;
if ($num1!=$num2) {
echo "El numero1=".$num1." es diferente a el numero 2= ".$num2;
}
else
{
echo "El numero1=".$num1." es igual al numero2=".$num2;
}
?>
If_19.php
<?php
$var = true;
if($var==false)
{
echo "Es falso";
}
else {
echo "Es verdadero";
}
echo "<br>"; echo "<br>"; echo "<br>";
$numero = 4;
if ($numero == 1) {
echo "La variable es igual a 1";
}
elseif ($numero == 2) {
echo "La variable es igual a 2";
}
elseif ($numero == 3) {
echo "La variable es igual a 3";
}
else {
echo "La variable no es igual ni a 1, ni a 2, ni a 3";
}
?>
while20.php
<?php
$num = 0;
while ($num <= 6) {
echo "$num"."<br>";
echo "$num es menor o igual que 6"."<br>";;
$num++;
echo "<br>";
}
?>
while21.php
<?php
$nombre = "Nestor Alberto";
$contador = 0;
while($nombre == "Nestor Alberto")
{
echo "El Contador es: ".$contador."<br>"."<br>";
echo "Cuando el contador sea igual a 4 cambia tus nombres por los apellidos"."<br>";
echo "Tus nombres son ". $nombre."<br>";
$contador++;
//echo $contador;
if($contador==4)
{
echo "El contador es: ".$contador."<br>";
$nombre = "Molina Alvarado"."<br>";
echo "Y ahora tus nombres cambian a tus apellidos: ".$nombre;
}
}
?>
dowhile22.php

<?php
$num = 0;
do
{
echo $num."<br>";
$num++;
} while ($num < 4);
echo "<br>";
?>
switch23.php
<?php
$nombre = "Alvrado";
switch ($nombre)
{
case "Nestor":
echo $nombre;
break;
case "Alvarado":
echo $nombre;
break;
default:
echo "No cumpli con los datos"."<br>";
break;
}
$num = 5;
switch ($num)
{
case 0:
echo $num;
break;
case 1:
echo $num;
break;
default:
echo "No es ninguno de los casos";
break;
?>
for24.php
<?php
$nombre = "Nestor";
for($i = 0; $i<5;$i++)
{
echo "Mi nombre es:".$nombre."<br>";
}
echo "<br>";
for($i = 0; $i<=5;$i++)
{
echo $i."<br>";
}
echo "<br>";
for($i = 10; $i>=0;$i--)
{
echo $i."<br>";
if ($i==5) {
break;
}
}
?>
foreach25.php
<meta charset="utf-8">
<?php
$persona =array("Sandra","Brenda","Alan","Jean Carlos");
echo $persona[0]."<br>".$persona[1]."<br>".$persona[2]."<br>".$persona[3];
echo "<br>";
echo "<br>";
echo "Otra forma";
echo "<br>";
foreach ($persona as $nombre)
{
echo $nombre."<br>";
}
echo "<br>";
echo "<br>";
echo "array asociativo";
echo "<br>";
$cuenta = array('Usuario'=>"starlen",'Contrasea'=>"123");
foreach ($cuenta as $claves=> $elementos)
{
echo $claves."<br>";
echo $elementos."<br>";
}
?>
funciones26.php
<?php
function saludo()
{
echo "Hola";
}
saludo();
echo "<br>";
function suma()
{
echo 5 + 5;
}
suma();
?>
funciones27.php
<?php
function suma()
{
echo 15 + 5;
}
suma();
echo "<br>";
echo "<br>";
echo "<br>";
$num1 =15;
$num2 = 25;
function suma1($num1, $num2)
{
echo $num1+$num2;
}
suma1($num1, $num2);
echo "<br>";
echo "<br>";
function suma2($num1, $num2)
{
echo $num1+$num2;
}
suma2(20, 29);
echo "<br>";
echo "<br>";
function DameNombre($nombre)
{
echo $nombre;
}
DameNombre("Nestor");
echo "<br>";
echo "<br>";
$nombre1 = "Alberto";
function DameNombre1($nombre1)
{
echo $nombre1;
}
DameNombre1($nombre1);
echo "<br>";
echo "<br>";
$nombre2 = "Alvarado";
function DameNombre2($nombre2)
{
echo $nombre2;
}
DameNombre2($nombre2);
?>
funciones28.php
<?php
function suma($num1, $num2)
{
return $num1 + $num2;
}
echo suma(90,10);
echo "<br>";
echo "<br>";
function suma1($num1, $num2)
{
return $num1 + $num2;
}
$sum = suma1(50,10);
echo "La suma es: ".$sum;
echo "<br>";
echo "<br>";
function CrearClientes($nombre, $apellido, $edad)
{
return "El nombre es ".$nombre.", su apellido es ".$apellido." y su edad ".$edad;
}
$cliente1 = CrearClientes("Antonio", "Ortiz", 54);
$cliente2 = CrearClientes("Sofia", "Reyes", 3);
$cliente3 = CrearClientes("Viviana", "Prieto", 18);
echo $cliente1;echo "<br>";
echo $cliente2;echo "<br>";
echo $cliente3;echo "<br>";
?>
scope29.php
<?php

$nombre = "Zuleyma";
$apellido = "Negra";
function DameNombre()
{
global $nombre, $apellido;
return $nombre." ". $apellido."<br>";
}
echo DameNombre($nombre);
echo DameNombre($nombre);
echo DameNombre($nombre);
echo DameNombre($nombre);
?>
static30.php
<?php
function Contador ()
{
static $num = 0;
$num++;
echo $num."<br>";
}
Contador();
Contador();
Contador();
Contador();
echo "<br>";
echo "<br>";
static $num1 = 0;
function Contador1 ()
{
global $num1;
$num1++;
echo $num1."<br>";
}
Contador1();
Contador1();
Contador1();
Contador1();
Contador1();
Contador1();
Contador1();
>
pagina31a.php
<?php
include 'pagina31b.php';
require 'pagina31b.php';
?>

Pagina31b.php

<?php
echo "Hola"."<br>";
include 'pagina31c.php';
?>
pagina31c.php

<?php
echo 5 + 5;
echo "<br>";
?>
forms34.php

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<?php
echo "oo";
?>
<!DOCTYPE html>
<html>
<body>
<form method=post>
<!--Usuario<br><input type="text" name="Usuario" required="required"><br>
Contrase&ntildea<br><input type="text" name="contrasea" required="required"><br><br><br>
-->
<!--Usuario<br><input type="text" name="Usuario"/><br>
Contrase&ntildea<br><input type="password" name="contrasea"><br><br><br>
Usuario<br><input type="text" name="Usuario"/><br>
Contrase&ntildea<br><input type="password" name="contrasea">
<input type="button" value="Entrar"><br><br><br>
-->
<!--Usuario<br><input type="text" name="Usuario" required="required"/><br>
Contrase&ntildea<br><input type="password" name="contrasea" required="required">
<input type="submit" value="Entrar">
-->
Usuario<br><input type="text" name="Usuario" required="required"/><br>
Contrase&ntildea<br><input type="password" name="contrasea" required="required">
<input type="submit" value="Entrar">
</form>
</body>
</html>
forms35.php
<?php
echo "cancin";
?>
<!DOCTYPE html>
<html>
<body>
<form method=post>
<!--Usuario<br><input type="text" name="Usuario" required="required"><br>
Contrase&ntildea<br><input type="text" name="contrasea"
required="required"><br><br><br>-->
<!--Usuario<br><input type="text" name="Usuario"/><br>
Contrase&ntildea<br><input type="password" name="contrasea"><br><br><br>
Usuario<br><input type="text" name="Usuario"/><br>
Contrase&ntildea<br><input type="password" name="contrasea">
<input type="button" value="Entrar"><br><br><br> -->
<!--Usuario<br><input type="text" name="Usuario" required="required"/><br>
Contrase&ntildea<br><input type="password" name="contrasea" required="required">
<input type="submit" value="Entrar"> -->
<br><br>
Usuario<br><input type="text" name="Usuario" required="required" minlength="3"
autocomplete="off" value="Usuario" readonly="readonly" /><br>
Contrase&ntildea<br><input type="password" name="contrasea" required="required">
<input type="submit" value="Entrar"><br><br>
<br><br>
Usuario<br><input type="text" name="Usuario" required="required" maxlength="3"
/><br>
Contrase&ntildea<br><input type="password" name="contrasea" required="required"
autofocus="on">
<input type="submit" value="Entrar"><br><br>
<br><br>
Usuario<br><input type="text" name="Usuario" required="required" minlength="3"
autocomplete="off" value="Usuario" disabled="on" /><br>
Contrase&ntildea<br><input type="password" name="contrasea" required="required">
<input type="submit" value="Entrar"><br><br>
<br><br>
Usuario<br><input type="text" name="Usuario" required="required" minlength="3"
placeholder="Usuario" /><br>
Contrase&ntildea<br><input type="password" name="contrasea" required="required"
placeholder="Contrasea ">
<input type="submit" value="Entrar"><br><br>
</form>
</body>
</html>
die36.php
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<?php
$nombre = "ao";
echo "die o exit hacen los mismo"."<br>";
exit('Error al mostrar el nombre');
die('Error al mostrar el nombre');
echo "Mi nombre es ".$nombre;
?>
get37.php
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<?php
/* if(isset($_GET['nombre']))
{
$nombre = $_GET['nombre'];
echo "Tu nombre es ".$nombre;
if (empty($_GET['nombre']))
{
echo "Error, el campo esta vaco";
}
*/
if (isset($_GET['num1']) && isset($_GET['num2']))
{
$num1 = $_GET['num1'];
$num2 = $_GET['num2'];
$suma = $num1 + $num2;
echo "La suma es: ".$suma;
}
?>
<!DOCTYPE html>
<html>
<body>
<form method="get">
<!--Nombre<br><input type="text" name="nombre" /><br><br>
<input type="submit" value="Mostrar Nombre">
-->
<input type="text" name="num1"/>
<input type="text" name="num2"/>
<input type="submit" value="Sumar"/>
</form>
</body>
</html>
post38.php

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<?php
if (empty($_POST['contrasea']))
{
echo "Ingrese una contrasea"."<br>";
}
if (isset($_POST['contrasea']))
{
$con = $_POST['contrasea'];
if ($con=="123")
{
echo "contrasea correcta";
}
else
{
echo "contrasea incorrecta";
}
if (empty($_POST['contrasea']))
{
echo "Ingrese una contrasea";
}
}
?>
<!DOCTYPE html>
<html>
<body>
<form method="post">
Contrasea<br><input type="password" name="contrasea" required="required" />
<input type="submit" value="Entrar"/>
</form>
</body>
</html>
server39.php

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<?php
echo $_SERVER['PHP_SELF']."<br>";
echo $_SERVER['SERVER_NAME']."<br>";;
echo $_SERVER['SCRIPT_FILENAME']."<br>";
echo $_SERVER['REQUEST_METHOD']."<br>";
echo $_SERVER['DOCUMENT_ROOT']."<br>";
?>
usuario40.php
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<?php
require 'detectar40.php';
?>
detectar40.php
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<?php
$ip = $_SERVER['REMOTE_ADDR'];
echo $ip."<br>";
echo "<br>";
if ($ip=="127.0.0.1")
{
echo "Tu ip es ".$ip;
}
else {
echo "Tu ip es diferente que la ip ".$ip;
}
?>
cookie41.php

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<?php
echo "Las cookie son archivos de pequeos tamaos que en los sitios web pueden guardar en la
computadora del usuario tambin permiten almacenar informacin sobre nuestros usuarios y se
almacenan a peticin del navegador, por ejemplo google y yootu las cuales son publicidades
segn lo que nosotros publicamos y sobre nuestros gustos que se guardad en las cookie tambin
otro ejemplo de facebook que como sabemos luego de cerrar seccin en la cuenta todas las pginas
que visitamos, luego se quedaran guardadas hasta borrar las cookie.";
echo "Las cookie almacenan a partir de un nombre al que le asignamos un valor, el nombre es lo
unico que se guarda en la cookie tambin se almacena la fecha la cual se expira o se borra en esa
cookie la cual es opcional y el dominio donde se va a usar.";
echo "por ejemplo, $nombre =Nestor; expira=5000, ruta/path=/ ;dominio = domain.com ";
?>

Cookie42a.php
<?php
setcookie('usuario', 'STARLEX', time() + 25);
?>

Cookie42b.php

<?php
echo $_COOKIE['usuario'];
?>

Cookie43a.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cookies</title>
</head>
<body>
<form action="Cookie43b" method="post">
Usuario<br><input type="text" name="usuario"><br><br>
<input type="submit" value="Crear Cookie">
</form>
</body>
</html>

Cookie43b.php
<?php
$usuario = $_POST['usuario'];
setcookie('Usuario',$usuario, time() + 50);
echo $_COOKIE['Usuario'];
if (isset($_COOKIE['Usuario']))
{
echo "La cookie existe";
}
else
{
echo "La cookie se ha borrado";
}
?>

Cookie44a.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cookies</title>
</head>
<body>
<form action="Cookie43b" method="post">
Usuario<br><input type="text" name="usuario"><br><br>
<input type="submit" value="Crear Cookie"><br>
</form>
</body>
</html>

Cookie44b.php
<?php
$usuario = $_POST['usuario'];
setcookie('Usuario',$usuario, time() + 10);
echo $_COOKIE['Usuario'];
?>
<html>
<body>
<a href="cookie44c.php">Salir</a>
</body>
</html>

Cookie44c.php
<?php
setcookie('Usuario', $usuario, time() - 10);
if (isset($_COOKIE['Usuario'] ))
{
echo "La cookie si existe";
}
else
{
echo "La cookie ya se ha borrado";
}
?>
Secciones45.php
<?php
session_start();
$_SESSION['nombreE'] = "Nestor";
$_SESSION['apellido'] = "Molina";
?>

Secciones46.php
<?php
/*session_start();
$_SESSION['nombre'] = "Nestor";
echo $_SESSION['nombre'];
echo "<br>";
*/
//otra forma
//$nom = $_SESSION['nombre'];
//echo $nom;
session_start();
$_SESSION['usuario'] = "STARLEX";
?>

Verificacion.php
<?php
/*session_start();
echo $_SESSION['nombre'];*/
session_start();
if (isset($_SESSION['usuario']))
{
echo "Bienvenido".$_SESSION['usuario'];
}
else
{
echo "Debes ingresar la clave";
}
?>

Secciones47.php
<?php
session_start();
$_SESSION['usuario'] = "STARLEX";
$_SESSION['contrasea'] = 123;
?>

Eliminar47.php
<?php
session_start();
session_destroy();
//unset($_SESSION['usuario']);
echo $_SESSION['usuario']."<br>";
echo $_SESSION['contrasea'];
?>

Login48.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<?php
//if (isset($GET['error']))
//{
//echo "Usuario o Contrasea Incorrecta";
//}
?>
<form action="verification48.php " method="post" name="Form"/>
<input type="text" name="usuario" placeholder="Usuario">
<input type="password" name="con" placeholder="Contrasea"/>
<input type="submit" value="Ingresar"/>
</form>
</body>
</html>

Verificacion48.php
<?php
$user = "nestor";
$pass = "123";
if($_POST['usuario'] == $user && $_POST['con'] == $pass)
{
session_start();
$_SESSION['logueado'] = "Logueado Correctamente";
echo $_SESSION['logueado'];
}
else
{
echo "Usuario o Contrasea Incorrecta";
//header("Location:login48.php?error=error");
}
?>

Crear50.php
<?php
$archivo = 'archivo.text';
$fp = fopen($archivo,'a');
fclose($fp);
?>

Formulario52.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<!--El atributo "action" indica el tipo de accin que va a realizar
el formulario.-->
<!--Mediante este atributo le indicamos al formulario la forma
en la que el formulario ser enviado. Existen dos valores
posibles: get y post.
El valor post indica que el mtodo de envo no se har a
travs de la url, sino formando parte del cuerpo de la peticin-->
<form action ="datos52.php" method="post" name="formulario"/>
<input type="text" name="nombre"/>
<input type="text" name="apellido"/>
<input type="text" name="edad"/>
<input type="text" name="Color_Favorito"/>
<input type="submit" value="Guardar">
</form>
</body>
</html>
datos52.php
<?php
$archivo = 'datos.txt';
$fp = fopen($archivo, 'a');
//fwrite($fp, "Datos Personales");
fwrite($fp, " Nombre: ");
fwrite($fp, $_POST['nombre']."\r\n");
fwrite($fp, "Apellido: ");
fwrite($fp, $_POST['apellido']."\r\n");
fwrite($fp, " Edad: ");
fwrite($fp, $_POST['edad']."\r\n");
fwrite($fp, "Color favorito: ");
fwrite($fp, $_POST['Color_Favorito']."\r\n");
fclose($fp);
?>

datos.txt

Nombre: Nestor
Apellido: Molina
Edad: 54
Nombre: Nestor
Apellido: Molina
Edad: 54
Color favorito: Azul
Nombre:
Apellido:
Edad:
Color favorito:
Nombre: ju
Apellido:
Edad:
Color favorito:
Nombre:
Apellido:
Edad:
Color favorito:

estilos.css
body
{
background-color: white;
}
#rojo
{
color: red;
}

visitas55.php

<?php
/*La funcin fgets() devuelve
una lnea desde un archivo abierto*/
//La funcin fgets() //recupera el contenido
//de una lnea de un archivo.
//Contador de visitas
$archivo = 'visitas.txt';
$contador =0 ;
$fp = fopen($archivo,'r') or die("Error al crear nuestro archivo");
$contador= fgets($fp, 26);
fclose($fp);
$contador++;
$fp = fopen($archivo, 'w+');
fwrite($fp, $contador, 26);
fclose($fp);
echo "Visitas: ".$contador;
?>

Visitas.txt
11

Leer56.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>leer</title>
</head>
<body>
</body>
</html>
<?php
$fp = fopen("clientes.txt", 'r');
$text = fread($fp, filesize('clientes.txt'));
echo nl2br($text);
?>

Archivo56.php
<?php
$archivo = "clientes.txt";
$fp = fopen($archivo, 'a') or die("Error al crear el archivo");
fwrite($fp, "Nombre: ");
fwrite($fp, "Nestor");
fwrite($fp, "\r\n");
fwrite($fp, "Apellido: ");
fwrite($fp, "Molina");
fwrite($fp, "\r\n");
fclose($fp);
?>
clientes.txt
Nombre: Nestor
Apellido: Molina

Subir57.php
<?php
?>
<!DOCTYPE html>
<html>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" value="Subir">
</form>
</body>
</html>

Subir58.php
<meta charset="utf-8">
<?php
////$nombre = $_FILES['archivo']['name'];
//echo "El nombre de tu archivo es ".$nombre;
$tipo = $_FILES['archivo']['type'];
echo "El Tipo de tu archivo es ".$tipo;
//$tamano = $_FILES['archivo']['size'];
//echo "El Tamao de tu archivo es ";
//echo $tamano;
?>
<html>
<body>
<form action="subir58.php" method="post" enctype="multipart/form-data">
<input type="file" name="archivo"/><br><br>
<input type="submit" value="Mostrar"/>
</form>
</body>
</html>

Subir59.php
<meta charset="utf-8">
<?php
if (is_uploaded_file($_FILES['archivo']['tmp_name']))
{
//echo "El archivo se ha subido correctamente";
//Comparaciones
if ($_FILES['archivo']['size']>=(500*1024))
{
echo "Tu imagen es mayor que 500 kb"."<br>";
}
else
{
echo "Error: Tu imagen debe ser mayor que 500 kb"."<br>";
}
if ($_FILES['archivo']['type'] == 'image/jpeg' || $_FILES['archivo']['type'] == 'image/jpng')
{
echo "La extensin jpg y png esta permitidad";
}
else
{
echo "Tu imagen debe ser extesin jpg o png";
}
}
?>
<html>
<body>
<form action="subir59.php" method="post" enctype="multipart/form-data">
<input type="file" name="archivo"/><br><br>
<input type="submit" value="Mostrar"/>
</form>
</body>
</html>

Guardar60.php
<?php
copy($_FILES['archivo']['tmp_name'],$_FILES['archivo']['name']);
echo "Guardado Corresctamente";
?>
<html>
<body>
<form action="guardar60.php" method="post" enctype="multipart/form-data">
<input type="file" name="archivo"/><br><br>
<input type="submit" value="Guardar"/>
</form>
</body>
</html>
Guardar61.php
<?php
/*$carpeta ="files/";
opendir($carpeta);
$path = $carpeta.$_FILES['archivo']['name'];
copy($_FILES['archivo']['tmp_name'], $path);
echo "Guardado Corresctamente";
*/
?>
<html>
<body>
<!--<form action="guardr61.php" method="post" enctype="multipart/form-data">-->
<form action="guardado61.php" method="post" enctype="multipart/form-data">
<input type="file" name="archivo"/><br><br>
<input type="submit" value="Guardar"/>
</form>
</body>
</html>

Guardar62.php
<?php
$carpeta ="files/";
opendir($carpeta);
$path = $carpeta.$_FILES['archivo']['name'];
copy($_FILES['archivo']['tmp_name'], $path);
echo "Guardado Corresctamente";
$file = $_FILES['archivo']['name'];
?>
<html>
<body>
<form action="guardar62.php" method="post" enctype="multipart/form-data">
<input type="file" name="archivo"/><br><br>
<input type="submit" value="Guardar"/><br><br>
</form>
<?php
echo "<img src=\"files/$file\">";
?>
</body>
</html>

Dowload63.php
<!--<a href="descarga63.php">Descargar Imagen </a>-->
<a href="descarga63.php">Descargar</a>

Descarga63.php
<?php
//$path = "C://AppServ/www/curso9/archivos/cedula.jpeg";
$path = "C://AppServ/www/curso9/archivos/tornillo.doc";
//$path = "C://AppServ/www/curso9/archivos/model.html";
//$path = "C://AppServ/www/curso9/archivos/hijo.MP3";
//$path = "C://AppServ/www/curso9/archivos/LOGO.exe";
//$path = "C://AppServ/www/curso9/archivos/xampp.zip";
//$path = "C://AppServ/www/curso9/archivos/alarmas.pdf";
//header("Content-disposition:attachment; filename=cedula.jpeg");

header("Content-disposition:attachment; filename=tornillo.doc");
//header("Content-disposition:attachment; filename=model.html");
//header("Content-disposition:attachment; filename=hijo.MP3");
//header("Content-disposition:attachment; filename=LOGO.exe");
//header("Content-disposition:attachment; filename=alarmas.pdf");
//header("Content-type: image/jpeg");

header("Content-type: application/ms-word");
//header("Content-type: text/html");
//header("Content-type: audio/mpeg");
//header("Content-type: application/pdf");
move_uploaded_file();
readfile($path);
?>
Carpeta Contacto
Index64.php
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<title>Contacto</title>
<!--<link rel="stylesheet" type="text/css" href="estilos.css"> -->
</header>
<body>
<form action="envio.php" method="post" name="Formulario">
<input id="caja" type="text" name="Nombre" placeholder="Nombre"
required="required">
<input id="caja" type="text" name="Empresa" placeholder="Empresa"
required="required">
<input id="caja" type="text" name="Mail" placeholder="Tu correo electrnico"
required="required">
<input id="caja" type="text" name="Telefono" placeholder="Telfono"
required="required">
<textarea id="caja" placeholder="Escribe tu mensaje"></textarea>
</form>
</body>
</html>
Index65.php
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<title>Contacto</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</header>
<body>
<div id="form">
<form action="envio.php" method="post" name="Formulario">
<div id="header">
<h1 class="titulo">Contactanos</h1>
</div><br><br>
<input id="caja" type="text" name="Nombre" placeholder="Nombre"
required="required"/><br><br>
<input id="caja" type="text" name="Empresa" placeholder="Empresa"
required="required"/><br><br>
<input id="caja" type="text" name="Mail" placeholder="Tu correo electrnico"
required="required"/><br><br>
<input id="caja" type="text" name="Telefono" placeholder="Telfono"
required="required"/><br><br>
<textarea id="caja" placeholder="Escribe tu mensaje"></textarea><br>
<input id="boton" type="submit" value="Enviar"/>
</form>
</div>
</body>
</html>
Index66.php
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<title>Contacto</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</header>
<body>
<div id="form">
<form action="envio.php" method="post" name="Formulario">
<div id="header">
<h1 class="titulo">Contactanos</h1>
</div><br><br>
<input id="caja" type="text" name="Nombre" placeholder="Nombre"
required="required"/><br><br>
<input id="caja" type="text" name="Empresa" placeholder="Empresa"
required="required"/><br><br>
<input id="caja" type="text" name="Mail" placeholder="Tu correo electrnico"
required="required"/><br><br>
<input id="caja" type="text" name="Telefono" placeholder="Telfono"
required="required"/><br><br>
<input id="caja" type="text" name="direccion" placeholder="Direccin"
required="required"/><br><br>
<textarea id="caja" placeholder="Escribe tu mensaje"></textarea><br>
<input id="boton" type="submit" value="Enviar"/>
</form>
</div>
</body>
</html>
Envio66.php

<?php
$destino = "ingnestormolina@hotmail.com";
$asunto = "Mensaje de la pagina";
$mensaje = "
Nombre: $_POST[Nombre]
Empresa: $_POST[Empresa]
E-Mail: $_POST[Mail]
Telefono: $_POST[Telefono]
Mensaje: $_POST[Mensaje]
";
$header = 'From: pagina web';
if (mail($destino, $asunto, $mensaje,$header))
{
echo "Muchas gracias";
}
else
{
echo "Error";
}
?>

Estilos.css
body{
background-color: white;
margin-top:0px;
}
#form{
background-color: red;
border-style: solid;
border-width: 3px;
border-color: black;
height: 450px;
width: 300px;
margin: auto;
margin-top: 200px;
}
#caja
{
background-color: #52FFFF;
height: 25px;
width: 90%;
margin-left: 10px;
border-width: 5px;
}
#header
{
background-color: #52FFFF;
height: 50px;
width: 100%
border-style: solid;
border-width: 13px;
border-color: black;
}
.titulo
{
margin-top: 0px;
color: #002173;
text-align: center;
font-family: "Forte";
margin-left: 05px;
}
#boton
{
background-color: #002173;
width: 250px;
font-family: "Forte";
height: 40px;
margin-left: 25px;
border-color: blue;
border-width: 5px;
border-style: solid;
}
date67.php
<meta charset="utf-8">
<?php
date_default_timezone_get("America/Venezuela");
//$fecha = date("d-m-Y");
//echo "Fecha de hoy en Venezuela: ".$fecha."<br><br>";
//$fecha = date("n-j-y");
//echo "Fecha de hoy en Venezuela: ".$fecha."<br><br>";
date_default_timezone_get("America/Venezuela");
$hora = date("h:i:a");
echo "Hora de hoy en Venezuela: ".$hora."<br><br>";
$bisiesto = date('L');
if ($bisiesto==1)
{
echo "Es bisiesto";
}
else
{
echo "No es bisiesto";
}
echo "<br>";
echo "<br>";
$dias = date('z');
echo "Han pasado ".$dias." das desde que comenzo el ao";
?>
filtro68.php
?php
$filtro = array("Nestor","Molina");
$palabra = array("******","******");
if (isset($_POST['Comentario'])&& !empty($_POST['Comentario']))
{
$user = $_POST['Comentario'];
$sensoring = str_replace($filtro, $palabra, $user);
echo $sensoring;
}
?>
<form action="filtro68.php" method="post">
<input type="text" name="Comentario" placeholder="Escriba algo aqui"/>
<input type="submit" value="Guardar"/>
</form>
Encriptacion69.php

<meta charset="utf-8">
<?php
/*$pass="Nestor";
$cifrado = md5($pass);
echo $cifrado;
*/
if (isset($_POST['Password']) && !empty($_POST['Password']))
{
$password = $_POST['Password'];
$cifrado = md5($password);
echo "La palabra". $password;
echo " cifrada es ". $cifrado;
}
?>
<form action="encriptacion69.php" method="post">
<input type="text" name="Password" placeholder="Contrasea" />
<input type="submit" value="Registrarse"/>
</form>
Encriptacion70.php

<meta charset="utf-8">
<?php
$pass = "nestor";
$cifrado1=md5($pass);
$cifrado2=sha1($pass);
echo "La funcin md5: ";
echo strlen($cifrado1)."<br>";
echo "La funcin sha1: ";
echo strlen($cifrado2)."<br>";
?>
PNF EN ELECTRICIDAD

Curso Bsico de MYSQL

Facilitador
Ing. Nestor Molina
Conexion75.php
<?php
$conexion = mysqli_connect('localhost','root','','empresa');
if ($conexion)
{
echo 'Conectado...........';
}else{
echo 'No Conectado';
}
?>

Ordie76.php
<?php
$host ="localhost";
$user = "root";
$pass = "";
$bd = "empresa";
$connect = mysqli_connect($host,$user,$pass,$bd) or die("Error al conectar la base de datos");
if ($connect==false)
{
echo 'No conectado';
}else{
echo 'Conectado';
}
?>
Select7778.php
<?php
$connect = mysqli_connect("localhost","root","","empresa") or die("Error al conectar la base de
datos");
if ($connect==false)
{
echo 'No conectado';
}else{
echo 'Conectado';
}
echo "<br>";
echo "<br>";
$select ="SELECT `Nombre` FROM `clientes`";
$query = mysqli_query($connect,$select);
if ($query)
{
echo "Consulta Satisfactoria";
}else{
echo "Error en Consulta";
}
echo "<br>";echo "<br>";echo "<br>";
while ($row = mysqli_fetch_assoc($query)) //Guarda en la variable $row los datos de nuestro select
hasta que haya datos.
{
echo "Nombre: ".$row['Nombre']."<br>"."<br>";;
}
?>
select79.php
<?php
$connect = mysqli_connect("localhost","root","","empresa") or die("Error al conectar la base de
datos");
if ($connect)
{
echo 'Conectado';
}else{
echo 'No Conectado';
}
echo "<br>";
echo "<br>";
$select ="SELECT /*`Nombre`, `Edad`, `Direccion`, `Id_Cliente`*/ * FROM `clientes`";
$query = mysqli_query($connect,$select);
if ($query)
{
echo "Consulta Satisfactoria";
}else{
echo "Error en Consulta";
}
echo "<br>";
echo "<br>";
while ($row = mysqli_fetch_assoc($query)) //Guarda en la variable $row los datos de nuestro select
hasta que haya datos.
{
echo "ID: ".$row['Id_Cliente'].", Nombre: ".$row['Nombre'].", Edad: ".$row['Edad']. ",
Paiz de procedencia: ".$row['Direccion']."<br>";
}
?>
Select80.php
<?php
$connect = mysqli_connect("localhost","root","","empresa") or die("Error al conectar la base de
datos");
if ($connect)
{
echo 'Conectado';
}else{
echo 'No Conectado';
}
echo "<br>";
echo "<br>";
//$select ="SELECT * FROM `clientes` LIMIT 5";
//Otra forma de hacerlo
$select ="SELECT * FROM `clientes` WHERE `Id_Cliente`= 1";
$query = mysqli_query($connect,$select);
if ($query) {
echo "Consulta Satisfactoria";
}else{
echo "Error en Consulta";
}
echo "<br>";
echo "<br>";
while ($row = mysqli_fetch_assoc($query)) //Guarda en la variable $row los datos de nuestro select
hasta que haya datos.
{
echo "ID: ".$row['Id_Cliente'].", Nombre: ".$row['Nombre'].", Edad: ".$row['Edad']. ", Paiz de
procedencia: ".$row['Direccion']."<br>"."<br>";
}
>
Insert8182.php
<?php
$conexion = mysqli_connect("localhost","root","","empresa") or die("Error");
if ($conexion)
{
echo 'Conectado +++++++';
}else{
echo 'No Conectado';
}
echo "<br>";
echo "<br>";
$insert = "INSERT INTO `clientes`(`Nombre`, `Direccion`,`Edad`, `Descripcion`)
VALUES ('Carolina', 'Colombiana', '15', 'Diseadora') ";
$query = mysqli_query($conexion, $insert);
if ($query)
{
echo "Datos Guardados Correctamente";
}else{
echo "Error al Guardar";
}
?>

Update83.php
<meta charset="utf-8">
<?php
$conexion = mysqli_connect("localhost","root","","empresa") or die("Error");
if ($conexion)
{
echo '<- Conectado ->';
}else{
echo 'No Conectado';
}
echo "<br>";
echo "<br>";
$update = "UPDATE `clientes` SET `Direccion`= 'Ruso' WHERE `Id_cliente`=2";
$update = "UPDATE `clientes` SET `Edad`= 50 WHERE `Id_cliente`=2";
$query = mysqli_query($conexion, $update);
if ($query)
{
echo "Actualizado Correctamente";
}else{
echo "Error al Actualizar";
}
?>

Delete84.php
<?php
$conexion = mysqli_connect("localhost","root","","empresa") or die("Error");
if ($conexion)
{
echo '<- Conectado ->';
}else{
echo 'No Conectado';
}
echo "<br>";
echo "<br>";
$delete ="DELETE FROM `clientes` WHERE `Id_cliente`= 4";
$query = mysqli_query($conexion, $delete);
if ($query)
{
echo "Eliminado Correctamente";
}else{
echo "Error";
}
?>

numRows85.php
<?php
$conexion = mysqli_connect("localhost","root","","empresa") or die("Error");
if ($conexion)
{
echo '<- Conectado ->';
}else{
echo 'No Conectado';
}
echo "<br>";
echo "<br>";
$sql = "SELECT `Id_cliente` FROM `clientes`";
$query = mysqli_query($conexion, $sql);
$num = mysqli_num_rows($query);
echo $num;
?>
PNF EN ELECTRICIDAD

Registros

Facilitador
Ing. Nestor Molina
Index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Registro de Usuarios</title>
<link rel="stylesheet" href= "https :// maxcdn.bootstrapcdn.com /bootstrap /3.3.6/css
/bootstrap.min.css" >
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2 class="title">Registro de Usuarios PHP & MYSQL</h2>
<div id="regist-form">
<img src="Usericon.png">
<hr color="#eeeeee"/>
<form class="form-group" action="registro.php" method="POST">
<input class="form-control" type="text" name="Nombre" placeholder="Nombre"><br><br>
<input class="form-control" type="text" name="Usuario" placeholder="Usuario"><br><br>
<input class="form-control" type="mail" name="Email" placeholder="Correo Electrnico"><br>
<br>
<input class="form-control" type="text" name="Password" placeholder="Contrasea"><br><br>
<input class="form-control" type="text" name="Rpassword" placeholder="Repite
Contrasea"><br><br>
<input class="btn btn-success" type="submit" value="Registrarme"><br><br><br>
</form>
</div>
</body>
</html>
estilos.css
body{
background-color: #A5A5A5
;
}
/*Formulario de Registro*/
#regist-form{
background-color: white;
width: 410px;
height: auto; /*550px*/
margin: auto;
margin-top: 50px;
}
img{
padding-top: 20px;
margin-left: 40%;
}
.title{
text-align: center;
}
.form-group{
width: 70%;
margin: auto;
}
.btn-success{
float: right;
}
conexion.php

<?php
$conexion = mysqli_connect("localhost","root","","starlex") or die("Error");
if ($conexion)
{
echo '<- Conectado ->';
}else{
echo 'No Conectado';
}
echo "<br>";
echo "<br>";
?>

registros.php
<?php
include("conexion.php");
$name = $_POST['Nombre'];
$user = $_POST['Usuario'];
$mail = $_POST['Email'];
$password = $_POST['Password'];
$sql = "SELECT * FROM `usuarios` WHERE `Usuario` = '$user' OR `Email` = '$mail'";
$query = mysqli_query($conexion, $sql);
if (mysqli_num_rows($query)>0)
{
echo "Ese usuario ya existe";
}else{
$insert = "INSERT INTO `usuarios`(`Nombre`,`Usuario`,`Email`,`Password`)
VALUES ('$name', '$user', '$mail', '$password') ";
$query = mysqli_query($conexion, $insert);
if ($query)
{
echo "Registrado";
}
}
?>
Bibliografa

1.- https://www.youtube.com/channel/UCJl1YajcPWTeJNsQhGyMIMg , 15/12/2016

2.- http://php.net/manual/es/regexp.reference.escape.php, 15/02/2017

3.- https://desarrolloweb.com/articulos/392.php