Introducci

1
Introducción HTML
2
Que es Servidor Web
Un servidor web es un programa que se ejecuta
continuamente en un computador, manteniéndose a
la espera de peticiones de ejecución que le hará
un cliente o un usuario de Internet.
El servidor web se encarga de contestar a estas
peticiones de forma adecuada, entregando como
resultado una página web o información de todo
tipo de acuerdo a los comandos solicitados.
En este punto es necesario aclarar lo siguiente
mientras que comúnmente se utiliza la palabra
servidor para referirnos a una computadora con un
software servidor instalado, en estricto rigor un
servidor es el software que permite la
realización de las funciones descritas.
3
Que es Apache
es el servidor encargado de interpretar el
protocolo HTTP, es un servidor Web de código
abierto y trabaja en múltiples plataformas como
Linux, Windows y Mac.
4
Que es PHP

•  es un lenguaje de programación interpretado,
  diseñado originalmente para la creación de
  páginas web dinámicas, es decir, olvidemos de las
  eventuales páginas o sitios estáticos que
  realizábamos anteriormente en HTML ahora con PHP
  nos permite una conexión con bases de datos y
  volver dinámico nuestro sitio.

5
Mysql

• Mysql es un gestor de base de datos sencillo de
  usar y increíblemente rápido. También es uno de
  los motores de base de datos mas usados en
  Internet, la principal razón de esto es que es
  gratis para aplicaciones no comerciales.

6
HTML

• Que es una página Web?

Una página Web es un tipo de fichero de texto,
con una extensión .htm o html (hypertext markup
language lenguaje de Hipertexto),
7
(No Transcript)
8
Que es el Código HTML?

• HTML es un lenguaje de etiquetas para crear
  documentos de hipertexto que sean portables de
  una plataforma a otra.
• Es un lenguaje para estructurar documentos a
  partir de texto en World Wide Web. Este lenguaje
  se basa en tags (Etiquetas) (instrucciones que le
  dicen al texto como deben mostrarse) y atributos
  (parámetros que dan valor al tag).

9
Que son las Etiquetas?
Una etiqueta es un texto que cumple con el
siguiente formato ltnombre de la etiquetagt
Apertura de una etiqueta siempre entre lt
gt texto/gráfico/etiquetas A la cual se aplica
la etiqueta lt/nombre de la etiquetagt Cierra de
la etiqueta siempre entre lt/ gt
10
HTML

• Código Básico de una página
• lthtmlgt
• ltheadgt
• lttitlegtlt/titlegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

11
HTML
Ingresando titulo de la página (en el
Browser lthtmlgt ltheadgt lttitlegt Mi Primera
Página lt/titlegt lt/headgt ltbodygt lt/bodygt lt/htmlgt
12
HTML
Ingresando texto en la página lthtmlgt ltheadgt lttit
legt Mi Primera Página lt/titlegt lt/headgt ltbodygt Aqu
í escribo lo que deseo... Hola
Mundo!!!!! lt/bodygt lt/htmlgt
13
Centrando texto en la página lthtmlgt ltheadgt lttitl
egt Mi Primera Página lt/titlegt lt/headgt ltbodygt ltcen
tergt HOLA MUNDO!!!!! lt/centergt lt/bodygt lt/htmlgt
14
Mostrar texto en negrita lthtmlgt ltheadgt lttitlegt
Mi Primera Página lt/titlegt lt/headgt ltbodygt ltcenter
gt ltstronggt HOLA MUNDO!!!!! lt/stronggt
lt/centergt lt/bodygt lt/htmlgt
15
Cambiando color de Background lthtmlgt ltheadgt lttitl
egt Mi Primera Página lt/titlegt lt/headgt ltbody
bgcolor"CCCCCC"gt ltdiv alingcentergt ltfont
size"5"gtholalt/fontgtlt/divgt lt/bodygt lt/htmlgt 000
000-gt NEGRO ffffff-gt BLANCO
16
Cambiando tamaño de texto y centrando de otra
forma lthtmlgt ltheadgt lttitlegt Mi Primera Página
lt/titlegt lt/headgt ltbodygt ltdiv aligncentergt
ltfont size"5"gtholalt/fontgtlt/divgt lt/bodygt lt/htmlgt
ALIGN right, left, center, justify. SIZE
desde 1 hasta 7 (con modificaciones de y -).
17
Ingresando Imágenes ltbody bgcolor"CCCCCC"gt ltdi
v aligncentergt ltfont size"5"gtholalt/fontgtlt/divgt
ltimg src"dirección_imagen/nombre.gif"
width"100" height"10" border"1"gt lt/bodygt

18
Creando Links ltbody bgcolor"CCCCCC"gt ltdiv
alingcentergt ltfont size"5"gtholalt/fontgtlt/divgt lt
img src"dirección imagen/nombre.gif" width"100"
height"10" border"1"gt lta hrefpágina2.htmlgt
Pagina 2 lt/agt lt/bodygt
19
Modificar colores Links ltbody bgcolor"CCCCCC
link"00FF33" vlink"FFFFFF" alink"CC9966"gt ltd
iv aligncentergt ltfont size"5"gtholalt/fontgtlt/div
gt ltimg src"dirección imagen/nombre.gif"
width"100" height"10" border"1"gt lta
hrefpágina2.htmlgt Pagina 2 lt/agt lt/bodygt
20
Salto de Línea ltbody bgcolor"CCCCCCgt Estoy
muy entretenido ltbrgt Es realmente bueno el curso
ltbrgt jajjajajajaj lt/bodygt
21
Revisando algunas etiquetas?
Etiqueta lthrgt La etiqueta lthrgt dibuja de manera
predeterminada una regla horizontal
alineada automáticamente, con una apariencia de
tercera dimensión. Esta etiqueta especial, por
que no necesita de cierre, tiene los siguientes
atributos Align establece que la regla se
alinee a la izquierda, centro o
derecha LEFT,CENTER o RIGHT NOSHADE quita el
sombreado predeterminado de la regla WIDTH
permite especificar el ancho de la regla (en
pixeles o porcentaje) SIZE permite especificar
el alto de la regla (en pixeles)
22
Un ejemplo
lthtmlgt ltheadgt lttitlegtCurso de HTMLlt/titlegt
lt/headgt ltbody bgcolor"C0D9D9"
text"000000"gt Bienvenidos al curso de
HTMLltbrgt lthr aligncenter width50gtltbrgt Cuando
la temperatura es menor a 15degc hace bastante
friacuteo.ltbrgt lthr alignleft width25
size5gtltbrgt Este es un ejemplo de paacutegina
WEB )ltbrgt lt/bodygt lt/htmlgt
23
Encabezados Las etiquetas lth1gt lt/h1gt al lth6gt
lt/h6gt (acrónimos de heading 1..6) son
encabezados del cuerpo del texto. El
encabezamiento lth1gt nos proporciona las letras de
mayor tamaño. Notará que si usamos una etiqueta
de encabezamiento, automáticamente se incluirá un
retorno de carro al final del mismo. La etiqueta
tiene el siguiente atributo Align Permite
ubicar el encabezamiento a la izquierda, centro o
derecha de la pantalla (LEFT, CENTER,RIGHT)
24
Un ejemplo
lthtmlgt ltheadgt lttitlegtCurso de HTMLlt/titlegt
lt/headgt ltbody bgcolor"C0D9D9"
text"000000"gt lth1 align"center"gt Bienvenidos
al curso de HTMLlt/h1gtltbrgt lthr aligncenter
width50gtltbrgt lth2gtBienvenidoslt/h2gt Cuando la
temperatura es menor a 15degc hace bastante
friacuteo.ltbrgt lthr alignleft width25
size5gtltbrgt Este es un ejemplo de paacutegina
WEB )ltbrgt lt/bodygt lt/htmlgt
25
Ubicación, formato y atributos de texto Etiqueta
ltcentergt lt/centergt Se utiliza para centrar el
texto/imagen o datos que se encuentren entre la
apertura y el cierre. Etiqueta ltbgt lt/bgt Esta es
la etiqueta que nos posibilita un texto con
negrillas. Etiqueta ltugt lt/ugt Etiqueta que
posibilita resaltar un texto con
subrayado. Etiqueta ltigt lt/igt Etiqueta que permite
resaltar el texto con inclinación itálica.
26
Un ejemplo
lthtmlgt ltheadgt lttitlegtCurso de HTMLlt/titlegt
lt/headgt ltbody bgcolor"C0D9D9"
text"000000"gt lth1 align"center"gt Bienvenidos
al curso de HTMLlt/h1gtltbrgt lthr aligncenter
width50gtltbrgt lth2gtBienvenidoslt/h2gt lthr
alignleft width25 size5gtltbrgt ltbgtEste texto
esta con negrillaslt/bgtltbrgt ltugtEste texto esta con
subrayadolt/ugtltbrgt ltigtEste texto esta con
inclinacioacuten itaacutelicalt/igtltbrgt Este
ltbgttexto ltigtcuenta ltugtcon un lt/ugtcombinadolt/igt
delt/bgt todo.ltbrgt lt/bodygt lt/htmlgt
27
Etiqueta ltfontgt lt/fontgt Esta etiqueta proporciona
al autor un medio de personalizar el texto con
respecto al tipo de fuente, tamaño y color.
Atributos Color determina el color que se
aplica al texto Size determina el tamaño
relativo del texto. Los tamaños válidos son del 1
al 7, siendo el predeterminado el 3 y el más
grande el 1. Face asigna una fuente o tipo de
letra.
28
Un ejemplo
lthtmlgt ltheadgt lttitlegtCurso de HTMLlt/titlegt
lt/headgt ltbody bgcolor"C0D9D9"
text"000000"gt lth1 align"center"gt Bienvenidos
al curso de HTMLlt/h1gtltbrgt lthr aligncenter
width50gtltbrgt lth2gtBienvenidoslt/h2gt Cuando la
temperatura es menor a 15degc hace bastante
friacuteo.ltbrgt lthr alignleft width25
size5gtltbrgt Este ltbgttexto ltigtcuenta ltugtcon un
lt/ugtcombinadolt/igt delt/bgt todo.ltbrgt ltfont
color"red"gtltfont size7gtBlt/fontgtolt/fontgtltfont
color"yellow"gtlilt/fontgtltfont color"green"gtvialt/f
ontgtltbrgt lt/bodygt lt/htmlgt
29
Etiqueta ltimggt Se trata de otra etiqueta
especial, pues no necesita de etiqueta de cierre.
Esta etiqueta instruye al navegador para que
exhiba la imagen especificada. El formato básico
para incluir un gráfico es ltimg
srcimagen.extgt
30
Un ejemplo
lthtmlgt ltheadgt lttitlegtCurso de HTMLlt/titlegt
lt/headgt ltbody bgcolor"C0D9D9" text"000000"
background"fondo.gif"gt ltcentergtlth1gt Bienvenidos
al curso de HTMLlt/h1gtlt/centergtltbrgt lthr
width50gtltbrgt lth2gtInformacioacuten
Generallt/h2gt Este curso muestra los conceptos
baacutesicos del uso de etiquetas e
instrucciones en la elaboracioacuten
de documentos ltbgtltigtltfont color"000080"gtHTMLlt/fo
ntgtlt/igtlt/bgt.ltbrgtltbrgt ltcentergtltimg src"foto.jpg"
border"1" alt"Foto de Miguel"gtlt/centergt ltbrgt lt/b
odygt lt/htmlgt
31
Generación de Tablas ltbody bgcolor"CCCCCCgt ltTA
BLE BORDER"1"gt ltTRgt    ltTHgtCabereca 1lt/THgt
   ltTHgtCabereca 2lt/THgt lt/TRgt ltTRgt    ltTDgtDato
1lt/TDgt    ltTDgtDato 2lt/TDgt lt/TRgt ltTRgt
   ltTDgtDato 4lt/TDgt    ltTDgtDato 5lt/TDgt   lt/TRgt
lt/TABLEgt lt/bodygt
32
Generación de Tablas ltbody bgcolor"CCCCCCgt ltta
ble width"23" height"214" border"1"gt lttrgt
lttdgtPRINCIPALlt/tdgt lt/trgt lttrgt
lttdgtFOTOSlt/tdgt lt/trgt lt/tablegt lt/bodygt
33
Generación de links a mail ltbody
bgcolor"CCCCCCgt lttable width"23"
height"214" border"1"gt lttrgt lttdgtlta
href"mailtohola_at_hola.com"gtENVIAR MAILlt/agtlt/tdgt
lt/trgt lt/tablegt lt/bodygt
34
Generación de Tablas ltTABLE border"1"gt
ltCAPTIONgtTazas de café consumidas lt/CAPTIONgt
ltTRgtltTHgtNombreltTHgtTazasltTHgtTipo de
CaféltTHgtAzúcar? ltTRgtltTDgt MiguelltTDgt10ltTDgtEspresso
ltTDgtNo ltTRgtltTDgtJuan ltTDgt5ltTDgtDescafeinadoltTD
gtSí ltTRgtltTDgtCarlosltTD colspan"3"gtltemgtNo
disponiblelt/emgt lt/TABLEgt
35
Generación de Tablas ltTABLE border"1"gt
ltTRgtltTDgt1 ltTD rowspan"2"gt2 ltTDgt3 ltTRgtltTDgt4
ltTDgt6 ltTRgtltTDgt7 ltTDgt8 ltTDgt9 lt/TABLEgt
36
Generación de Tablas ltTABLE border"1"gt
ltTRgtltTDgt1 ltTDgt2 ltTDgt3 ltTRgtltTD colspan"2"gt4
ltTDgt6 ltTRgtltTDgt7 ltTDgt8 ltTDgt9 lt/TABLE
37
Generación de Listas Lista no ordenada ltUL
TYPEbulletgtltLIgtPerrosltLIgtGatosltLIgtPecesltLIgt
Hamsters lt/ULgt
38
Generación de Listas Lista ordenada ltOL
TYPEAgtltLIgtPerrosltLIgtGatosltLIgtPecesltLIgtHamst
ers lt/OLgt
39
Generación de Listas Lista de Definicion ltDLgt
ltDTgtltBgtVehiculolt/Bgt ltDDgt Vehículo de 4 o
más ruedas que sirve para desplazar cosas,
personas o animales. ltDTgtltBgtHTMLlt/Bgt ltDDgt
Lenguaje de Marcas de Hipertexto lt/DLgt
40
Generación de Listas Lista de Definicion ltDLgt
ltDTgtltBgtVehiculolt/Bgt ltDDgt Vehículo de 4 o
más ruedas que sirve para desplazar cosas,
personas o animales. ltDTgtltBgtHTMLlt/Bgt ltDDgt
Lenguaje de Marcas de Hipertexto lt/DLgt