View
220
Download
0
Category
Preview:
Citation preview
1
Introducción Introducción HTMLHTML
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.
Que es una página Web?
6
Una página Web es un tipo de fichero de texto,
con una extensión .htm o html (hypertext markup
language – lenguaje de Hipertexto),
HTMLHTML
7
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:
<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”
texto/gráfico/etiquetas A la cual se aplica la etiqueta
</nombre de la etiqueta> Cierra de la etiqueta siempre entre “</ >”
10
HTMLHTMLCódigo Básico de una página:<html><html>
<head><head>
<title></title><title></title>
</head></head>
<body><body>
</body></body>
</html></html>
11
HTMLHTMLIngresando titulo de la página (en el
Browser:
<html><html>
<head><head>
<title><title> Mi Primera Página Mi Primera Página </title></title>
</head></head>
<body><body>
</body></body>
</html></html>
12
HTMLHTMLIngresando texto en la página:
<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
Aquí escribo lo que deseo... Hola Mundo!!!!!Aquí escribo lo que deseo... Hola Mundo!!!!!
</body></body>
</html></html>
13
Centrando texto en la página:
<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
<center><center> HOLA MUNDO!!!!! HOLA MUNDO!!!!! </center></center>
</body></body>
</html></html>
14
Mostrar texto en negrita:
<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
<center> <center> <strong> <strong> HOLA MUNDO!!!!!HOLA MUNDO!!!!! </strong> </strong> </center></center>
</body></body>
</html></html>
15
Cambiando color de Background:<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body <body bgcolor="#CCCCCC">bgcolor="#CCCCCC">
<div aling=“center”> <div aling=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
</body></body>
</html></html>
#000000-> NEGRO #ffffff-> BLANCO#000000-> NEGRO #ffffff-> BLANCO
16
Cambiando tamaño de texto y centrando de otra forma:
<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
<div align=“center”> <div align=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
</body></body>
</html></html>
ALIGN: right, left, center, justify.ALIGN: right, left, center, justify.
SIZE: desde 1 hasta 7 (con modificaciones de + SIZE: desde 1 hasta 7 (con modificaciones de + y -).y -).
17
Ingresando Imágenes:
<body bgcolor="#CCCCCC"><body bgcolor="#CCCCCC">
<div align=“center”> <div align=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
<img src="dirección_imagen/nombre.gif" width="100" <img src="dirección_imagen/nombre.gif" width="100" height="10" border="1">height="10" border="1">
</body></body>
18
Creando Links:
<body bgcolor="#CCCCCC"><body bgcolor="#CCCCCC">
<div aling=“center”> <div aling=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
<img src="dirección imagen/nombre.gif" width="100" <img src="dirección imagen/nombre.gif" width="100" height="10" border="1">height="10" border="1">
<a href=página2.html> Pagina 2 </a><a href=página2.html> Pagina 2 </a>
</body></body>
19
Modificar colores Links:
<body <body bgcolor="#CCCCCC“ link="#00FF33" bgcolor="#CCCCCC“ link="#00FF33" vlink="#FFFFFF" alink="#CC9966">vlink="#FFFFFF" alink="#CC9966">
<div align=“center”> <div align=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
<img src="dirección imagen/nombre.gif" width="100" <img src="dirección imagen/nombre.gif" width="100" height="10" border="1">height="10" border="1">
<a href=página2.html> Pagina 2 </a><a href=página2.html> Pagina 2 </a>
</body></body>
20
Salto de Línea:
<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“>
Estoy muy entretenido Estoy muy entretenido <br><br>
Es realmente bueno el curso Es realmente bueno el curso <br><br>
jajjajajajajjajjajajajaj
</body></body>
21
Revisando algunas etiquetas?
Etiqueta <hr>La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineadaautomáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que nonecesita de cierre, tiene los siguientes atributos:• Align establece que la regla se alinee a la izquierda, centro o derechaLEFT,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
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000">Bienvenidos al curso de HTML<br><hr align=center width=50%><br>Cuando la temperatura es menor a 15°c hacebastante frío.<br><hr align=left width=25% size=5><br>Este es un ejemplo de página WEB :)<br></body></html>
23
Encabezados
Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son encabezados delcuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notaráque si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carroal final del mismo. La etiqueta tiene el siguiente atributo:• Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de lapantalla (LEFT, CENTER,RIGHT)
24
Un ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000"><h1 align="center">Bienvenidos al curso de HTML</h1><br><hr align=center width=50%><br><h2>Bienvenidos</h2>Cuando la temperatura es menor a 15°c hacebastante frío.<br><hr align=left width=25% size=5><br>Este es un ejemplo de página WEB :)<br></body></html>
25
Ubicación, formato y atributos de textoEtiqueta <center> </center>Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre.Etiqueta <b> </b>Esta es la etiqueta que nos posibilita un texto con negrillas.Etiqueta <u> </u>Etiqueta que posibilita resaltar un texto con subrayado.Etiqueta <i> </i>Etiqueta que permite resaltar el texto con inclinación itálica.
26
Un ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000"><h1 align="center">Bienvenidos al curso de HTML</h1><br><hr align=center width=50%><br><h2>Bienvenidos</h2><hr align=left width=25% size=5><br><b>Este texto esta con negrillas</b><br><u>Este texto esta con subrayado</u><br><i>Este texto esta con inclinación itálica</i><br>Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br></body></html>
27
Etiqueta <font> </font>Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo defuente, 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
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000"><h1 align="center">Bienvenidos al curso de HTML</h1><br><hr align=center width=50%><br><h2>Bienvenidos</h2>Cuando la temperatura es menor a 15°c hacebastante frío.<br><hr align=left width=25% size=5><br>Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br><font color="red"><font size=7>B</font>o</font><font color="yellow">li</font><font color="green">via</font><br></body></html>
29
Etiqueta <img>Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye alnavegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es:
<img src=”imagen.ext”>
30
Un ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"><center><h1>Bienvenidos al curso de HTML</h1></center><br><hr width=50%><br><h2>Información General</h2>Este curso muestra los conceptos básicos del uso deetiquetas e instrucciones en la elaboración dedocumentos <b><i><font color="#000080">HTML</font></i></b>.<br><br><center><img src="foto.jpg" border="1" alt="Foto de Miguel"></center><br></body></html>
31
Generación de Tablas:<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“><TABLE BORDER="1">
<TR> <TH>Cabereca 1</TH> <TH>Cabereca 2</TH> </TR> <TR> <TD>Dato 1</TD> <TD>Dato 2</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 5</TD> </TR> </TABLE>
</body></body>
32
Generación de Tablas:<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“>
<table width="23%" height="214" border="1"><table width="23%" height="214" border="1">
<tr><tr>
<td>PRINCIPAL</td><td>PRINCIPAL</td>
</tr></tr>
<tr><tr>
<td>FOTOS</td><td>FOTOS</td>
</tr></tr>
</table></table>
</body></body>
33
Generación de links a mail:<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“>
<table width="23%" height="214" border="1"><table width="23%" height="214" border="1">
<tr><tr>
<td><td><a href="mailto:hola@hola.com">ENVIAR <a href="mailto:hola@hola.com">ENVIAR MAIL</a>MAIL</a></td></td>
</tr></tr>
</table></table>
</body></body>
34
Generación de Tablas:<TABLE border="1"> <CAPTION>Tazas de café consumidas </CAPTION>
<TR><TH>Nombre<TH>Tazas<TH>Tipo de Café<TH>¿Azúcar? <TR><TD> Miguel<TD>10<TD>Espresso<TD>No
<TR><TD>Juan <TD>5<TD>Descafeinado<TD>Sí <TR><TD>Carlos<TD colspan="3"><em>No disponible</em>
</TABLE>
35
Generación de Tablas:<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TR><TD>4 <TD>6 <TR><TD>7 <TD>8 <TD>9
</TABLE>
36
Generación de Tablas:<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9
</TABLE
37
Generación de Listas:Lista no ordenada<UL TYPE=“bullet”>
<LI>Perros<LI>Gatos<LI>Peces<LI>Hamsters
</UL>
38
Generación de Listas:Lista ordenada<OL TYPE=“A”>
<LI>Perros<LI>Gatos<LI>Peces<LI>Hamsters
</OL>
39
Generación de Listas:Lista de Definicion <DL> <DT><B>Vehiculo</B>
<DD> Vehículo de 4 o más ruedas que sirve para desplazar cosas, personas o animales.
<DT><B>HTML</B> <DD> Lenguaje de Marcas de Hipertexto
</DL>
40
Generación de Listas:Lista de Definicion <DL> <DT><B>Vehiculo</B>
<DD> Vehículo de 4 o más ruedas que sirve para desplazar cosas, personas o animales.
<DT><B>HTML</B> <DD> Lenguaje de Marcas de Hipertexto
</DL>
Recommended