Introduccion Al Desarrollo Web

INTRODUCCION AL
DESARROLLO WEB
Ing. José David Montesino H.
LENGUAJE HTML
HTML es el lenguaje básico que se emplea para el desarrollo de páginas de
internet.
Esta constituido de elementos que el navegador interpreta y las despliega en la

pantalla de acuerdo a su objetivo. Presenta elementos para disponer imágenes
sobre una página, hipervínculos que nos permiten dirigirnos a otras páginas,
listas, tablas, botones, etc.
Para poder crear una página HTML se requiere un editor de texto por ejemplo:
• Bloc de notas,
• WordPad,
• Notepad++, etc
y un navegador de internet como:
• Chrome
• IExplorer
• FireFox
• Safari
• Opera etc.
ESTRUCTURA DE UNA PAGINA HTML
Indica al navegador que
<!DOCTYPE html> el contenido es de un
archivo html
<html>
<head> Encabezados, es utilizado
por motores de búsqueda
<title> para indexar la pagina
Título de la página
</title>
</head>
<body>
Contenido de la pagina
Cuerpo de la página. web
</body>
</html>
ESTRUCTURA DE UNA PAGINA HTML
• HTML no es sensible a mayúsculas y minúsculas, es
decir podemos escribirlo como más nos guste
• No requiere que dispongamos cada marca en una
línea ejemplo <head><title>Titulo</title></head>
• Al guardar el archivo debemos colocarle la extensión
“.html” por ejemplo podemos colocarle a nuestra
pagina pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>
¡Hola Mundo!
</body>
</html>
SALTO DE LINEA <BR>
Cuando aparece la marca <br> el navegador continúa
con el texto en la línea siguiente. Es uno de los pocos
elementos HTML que no necesita marca de cerrado
<!DOCTYPE html>
<html>
<head>
<title>¡Hola Mundo!</title>
</head>
<body>
¡Hola <br> Mundo!
</body>
</html>
PARRAFO <P>
Un párrafo es una oración o conjunto de oraciones
referentes a un mismo tema. Todo lo que encerremos
entre las marcas <p> y </p> aparecerá separado por un
espacio con respecto al próximo párrafo.
Dentro de un párrafo puede haber saltos de línea <br>.
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio con parrafos</title>
</head>
<body> <p> SQL, (Lenguaje de Consulta Estructurado) es un lenguaje
de programacion para trabajar con base de datos relacionales.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.
<br> permite crear base de datos y tablas, insertar datos,
modificarlos, eliminarlos, hacer consultas y administrar
bases de datos. </p> <p> Este tutorial tiene por objetivo acercar
los conceptos iniciales para introducirse en el mundo de las bases
de datos. </p>
</body>
</html>
Títulos <h1><h2><h3><h4><h5><h6>
Son utilizados según la importancia del titulo, en el cual <h1> es el que tiene mayor
nivel y así sucesivamente
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title> </head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p> se usa para almacenar cadenas de caracteres. <br> El tipo
"varchar" define una cadena de longitud variable en la cual
determinamos el máximo de caracteres. Puede guardar hasta 255
caracteres.</p>
<h2>int</h2>
<p> Se usa para guardar valores numéricos enteros.<br> Definimos
campos de este tipo cuando queremos representar, por ejemplo,
cantidades. </p
</body>
</html>
ENFASIS (<EM> <STRONG>)
Sirven para resaltar las palabras u oraciones de nuestra pagina, <strong> resalta en
negrita y <em> resalta en itálica.
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title> </head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p> se usa para almacenar cadenas de caracteres. <br> El tipo
<strong>"varchar“</Strong> define una cadena de longitud variable
en la cual determinamos el máximo de caracteres. Puede guardar
hasta 255 caracteres.</p>
<h2>int</h2>
<p> Se usa para guardar valores <em>numéricos</em> enteros.<br>
Definimos campos de este tipo cuando queremos representar, por
ejemplo, cantidades.</p
</body>
</html>
HIPERVÍNCULO A OTRA PÁGINA DEL MISMO SITIO <A>
El hipervínculo, nos permite cargar otra página en el navegador
La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:
<a href="pagina2.html">Contexto</a>
<!DOCTYPE html>
<html>
<head>
<title>Título de la página 1</title></head> Pagina1.html
<body>
<h1>Página principal.</h1>
<a href="pagina2.html">Ir a pagina 2</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Título de la página 2</title>
</head> Pagina2.html
<body>
<h1>Noticias.</h1>
<a href="pagina1.html">Regresar</a>
</body>
</html>
Hipervínculo a otro sitio de internet <a>
La sintaxis para disponer un hipervínculo a otro sitio de internet es:
<a href="http://www.google.com">Buscador Google</a>

a la propiedad href la inicializamos con el nombre del protocolo (http) seguida de dos
puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el nombre de dominio
del sitio a enlazar.
<!DOCTYPE html>
<html>
<head>
<title>Visitar Yahoo</title></head>
<body>
<a href= "http://www.yahoo.es">Ir a Yahoo</a>
</body>
</html>
Hipervínculo a otro sitio de internet <a>
La sintaxis para disponer un hipervínculo a otro sitio de internet es:
<a href="http://www.google.com">Buscador Google</a>
a la propiedad href la inicializamos con el nombre del protocolo (http) seguida de dos
puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el nombre de dominio
del sitio a enlazar.
<!DOCTYPE html>
<html>
<head>
<title>Visitar Yahoo</title></head>
<body>
<a href= "http://www.yahoo.es">Ir a Yahoo</a>
</body>
</html>
Imágenes dentro de una página <img>

<!DOCTYPE html>
<html>
<head> <title>Imagenes</title> </head>
<body>
<img src="foto1.jpg" alt="Imagen1">
<img src="imagenes/foto2.jpg" alt="Imagen2">
</body>
</html>
Hipervínculo mediante una imagen <a> y <img>
Consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin
del enlace(<a>)
<!DOCTYPE html>
<html>
<head>
<title>Hipervinculo con imagenes</title>
</head>
<body>
<h2>Presione alguna de las imagenes</h2>
<a href="pagina1.html"><img src="foto1.jpg"> </a>
<br>
<a href="pagina2.html" target="_blank">
<img src="imagenes/foto2.jpg"</a>
</body>
</html>
Anclas llamadas desde la misma página.
Una práctica común cuando queremos desplazarnos dentro de una página de gran
tamaño. Se disponen hipervínculos a diferentes anclas.
La sintaxis para definir un ancla es:
<a name="nombreancla"></a>
La sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreancla">Introducción</a><br>
Anclas llamadas desde otra página

Debemos conocer el nombre de la página a llamar y el nombre del ancla, luego la sintaxis
para la llamada al ancla es:
<a href="pagina2.html#introduccion">Introducción</a>
<!DOCTYPE html>
<html>
<head> <title>Anclas</title> </head>
<body> <h1>Tutorial de MySQL</h1>
<a href="anclas.html#introduccion">Introducción</a><br>
<a href="anclas.html#mostrarbasedatos">show databases</a><br>
<a href="anclas.html#creaciontabla">Creación de una tabla</a><br>
<a href="anclas.html#cargarregistros">Carga de registros</a><br>
</body>
</html>
Color, Tamaño y tipo de Letra
Por razones de homogeneidad y sencillez de código este tipo de formatos son
controlados actualmente por hojas de estilo en cascada (Estilos CSS), existe una
forma clásica y directa de definir color tamaño y tipo de letra de un texto
determinado.
Se hace a partir de la etiqueta <font> y sus respectivos atributos.
Atributo face: Define el tipo de letra
<font face="Comic Sans MS,arial,verdana">Hola</font>
Atributo size: Define el tamaño de la letra.Existen 7 niveles de tamaño distintos

numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la
letra más pequeña o size="7" para la más grande.
<font size=4>Este texto es más grande</font>
Atributo color: El color del texto puede ser definido mediante el atributo color. Cada color es
a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes.
Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.
Por otra parte, es posible definir de una manera inmediata algunos de los colores más
frecuentemente usados para los que se ha creado un nombre comun:
Aqua,Black,Blue,Fuchsia,Gray,Green,Lime,Maroon,Navy,Olive,Purple,Red,Silver,Teal,White,
Yellow <font color="red">Color Rojo</font>
<font color="#FF0000">Rojo</font>
Color, Tamaño y tipo de Letra
<!DOCTYPE html>
<html>
<head><title>Colores, Tamaño y tipo de letra</title></head>
<body bgcolor="white">
<font color="aqua" face="Comic Sans MS" size=1>Agua - Comic Sans MS</font><br>
<font color="black" face="Verdana" size=2>Negro - Verdana</font><br>
<font color="Blue" face="Monotype corsiva" size=3>Azul - Monotype corsiva</font><br>
<font color="Fuchsia" face="Arial" size=4>Fucsia - Arial</font><br>
<font color="gray" face="Calibri" size=5>Gris - Calibri</font><br>
<font color="green" face="Cambria" size=6>Verde - Cambria</font><br>
<font color="lime" face="Castellar" size=7>Lima - Castellar</font><br>
<font color="maroon" face="Courier" size=6>Granate - Courier</font><br>
<font color="navy" face="Lucida console" size=5>Marino - Lucida Console</font><br>
<font color="olive" face="Lucida fax" size=4>Oliva - Lucida fax</font><br>
<font color="Purple" face="Comic Sans MS" size=3>Purpura - Comic Sans MS</font><br>
<font color="red" face="Tahoma" size=2>Rojo - Tahoma</font><br>
<font color="silver" face="Castellar" size=1>Plateado - Castellar</font><br>
<font color="teal" face="Verdana" size=2>Azul verdoso - Verdana</font><br>
<font color="white" face="Arial" size=3>Blanco - Arial</font><br>
<font color="yellow" face="Calibri" size=4>Amarillo - Calibri</font><br>
<font color="#339966" face="Monotype Corsiva" size=5>Verde Turquesa - Monotype Corsiva</font><br>
<font color="#FF8000" face="Lucida Console" size=6>Naranja - Lucida Console</font>
</body>
</html>
Lista ordenada (<ol>).
Se utiliza cuando debemos numerar o listar una serie de objetos.
<!DOCTYPE html>
<html>
<head>
<title>Lista Ordenada</title>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>
Luego el navegador se encarga de numerar cada uno de los items contenidos

en la lista.
Lista no ordenada (<ul>).
No utiliza un número delante de cada item sino un pequeño símbolo gráfico.
La forma de implementar este tipo de listas es idéntico a las listas ordenadas.
<!DOCTYPE html>
<html>
<head>
<title>Lista no ordenada</title>
</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>
Listas anidadas
HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de
distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item
puede ser una lista ordenada.
<!DOCTYPE html>
<html>
<head> <title>Listas anidadas</title></head>
<body>
<ol>
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.ar">Página 12</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País Digital</a></li>
<li><a href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</ol>
</body>
</html>
Tabla (<table><tr><td>)
El objetivo de las tablas es mostrar una serie de datos en forma ordenada,
organizado en filas y columnas.
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la
marca de cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del
elemento table. Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro
del elemento tr. Este elemento requiere la marca de cierre.
Tabla (<table><tr><td>)
<!DOCTYPE html>
<html>
<head> <title>Título de la
página</title> </head>
<body>
<table border="1">
<tr>
<td>China</td>
<td>1300 millones</td>
</tr>
<tr>
<td>India</td>
</tr>
<tr>
<td>Estados Unidos</td>
</tr>
</table>
</body>
</html>
Tabla con encabezado (<th>) y titulo (<caption>)
<!DOCTYPE html>
<html>
<head> <title>Título de la página</title> </head>
Normalmente la primera fila de <body>
<table border="1">
una tabla puede representar los
<caption>Población de los paises.</caption>
títulos para cada columna. <tr>
Para indicar que se trata de una <th>Paises</th>
celda de encabezado utilizamos <th>Cantidad de habitantes</th>
el elemento <th> en lugar de </tr>
<td> el navegador representa <tr>
distinto las celdas de datos y las <td>China</td>
celdas de encabezamiento. <td>1300 millones</td>
</tr>
<tr>
<td>India</td>
</tr>
<tr>
<td>Estados Unidos</td>
</tr>
</table>
</body>
</html>
Tabla y combinación de celdas
En algunas situaciones se necesita que una celda ocupe el lugar de dos o
más celdas en forma horizonzal o vertical, para estos casos el elemento td o
th dispone de dos propiedades llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la
propiedad colspan con el valor 3:
<td colspan="3">CONTEXTO1</td>
Si por el contrario queremos que una celda se extienda a nivel de filas luego
hacemos:
<td rowspan="3">Secciones</td>
Tabla y combinación de celdas
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">Recursos</td>
<td colspan="3">Facturación</td>
</tr>
<tr>
<td>CPU</td>
<td>73000</td>
<td>67300</td>
</tr>
<tr>
<td>Monitores</td>
<td>53000</td>
<td>72000</td>
</tr>
</table>
</body>
</html>
Comentarios
Un comentario es un texto que solo le interesa a la persona que desarrolló la página,
el navegador ignora todo el contenido que se encuentra dentro de esta marca.
Los comentarios son muy útiles porque facilitan el mantenimiento del sitio.
Además hay que tener en cuenta que puede ser otra persona la que continúe en otro
momento el mantenimiento de las páginas que desarrollamos. Lo que para uno
puede ser muy obvio a otro desarrollador puede no ser tan obvio.
Otro uso muy habitual cuando estamos desarrollando la página si queremos
deshabilitar una parte del código podemos encerrarla entre los caracteres de
comentarios.
La sintaxis es la siguiente 
<!DOCTYPE html>
<html>
<head>
<title>¡Hola Mundo!</title> 
</head>
<body>
<!– cuerpo de la pagina-->
¡Hola Mundo!
</body>
</html>
Ejercicio Crear una pagina web con sus datos personales,
incluyendo una foto
Datos personales
Documento: xxxxxxx
Nombres: xxxxxxx
FOTO
Apellidos: xxxxxxx
Sexo: xxxxxxx
Fecha de nacimiento: xxxxxxx Direccion: xxxxxxx

Ciudad: xxxxxxx Telefono: xxxxxxx
Email: xxxxxxx Estado civil: xxxxxxx
Elementos HTML <div> y <span>
Estas marcas se utilizan en conjunción con las hojas de estilo.
La diferencia entre estos dos elementos es que cuando utilizamos el elemento div
produce un salto de línea previo y uno al final, en cambio el elemento span no
produce un salto de línea porque se trata de un elemento en línea.
<!DOCTYPE html> Las hojas de estilo: Son conjuntos de
<html>
<head><title>título página</title></head> instrucciones, a veces en forma de
<body> archivo anexo, que se asocian a las
<div style="background-color:#eeee00; width: 80%; Margin: 0 auto"> paginas web y se ocupan de los
<h3>Luis Barrionuevo</h3>
aspectos de formato y de
<p style="color:#888888;text-indent:20px">
Aquí <span style="background-color:#eeee00">comentarios.</span> presentación de los contenidos: tipo,
<pre> fuente y tamaño de letras, alineación
Aquí comentarios. y posicionamiento del texto, colores
Aquí comentarios.
</pre> y fondos, etc. Las hojas de estilo
</p> permiten liberar la composición del
<h3>Ana Rodriguez</h3> texto de los aspectos visuales y
<p style="color:#888888;text-indent:20px">
favorecen que se estructure y anote
<span style="background-color:#eeee00">Aquí comentarios.</span>
Aquí comentarios. mediante códigos que permiten un
Aquí comentarios. tratamiento más eficaz de los
</p> contenidos
</div>
<div>linea1</div><div>linea2</div>
</body>
</html>
Formulario - <form>
• Un formulario permite que el visitante al sitio cargue datos y sean enviados al
servidor.
• Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar
productos, sacar turnos etc.
• El lenguaje HTML solo tiene el objetivo de crear el formulario. El HTML no tiene
la responsabilidad de registrar los datos en el servidor, esta actividad está
delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net,etc.)
• Lo recomendable para los que comienzan en e mundo del desarrollo de páginas
web es primero aprender y conocer todos los elementos para la creación de
formularios en HTML y en un paso posterior estudiar la registración en el servidor
<!DOCTYPE html>
<html>
<head> <title>Prueba de formulario</title> </head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20"> <br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Formulario - input type="text"/ input type="password"
• Este elemento nos permite definir cuadros de texto y botón para subir los datos
al servidor. También podemos definir cuadros para el ingreso de una clave y
botones para borrar el contenido de todos los controles del formulario
<!DOCTYPE html>
<html>
<head><title>Prueba de formulario</title> </head>
<body>
Ingrese su nombre:
Ingrese su clave:
<input type="password" name="clave" size="12"><br>
<input type="submit" value="enviar">
<input type="reset" value="borrar">
</form>
</body>
</html>
Formulario - textarea
El elemento de tipo textarea nos permite el ingreso de varias líneas a diferencia del
cuadro de texto (input/text), Es muy utilizado cuando queremos ingresar un
comentario de una longitud de caracteres grande.
<!DOCTYPE html>
<html>
<body>
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Ingrese su mail:
<input type="text" name="mail" size="50"><br>
Comentarios:<br>
<textarea name="comentarios" rows="5" cols="60"></textarea>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
EJERCICIOS PROPUESTOS
GESTION DOCUMENTAL
DEPENDENCIA FECHA DESCRIPCION ARCHIVO

Talento humano 30/05/2015
Informática 30/05/2015
Calidad 30/05/2015
Facturación 30/05/2015
Auditoria interna a Dependencias de la entidad

Imagen 1 Imagen 2 Imagen 3
Imagen 4 Imagen 5 Imagen 6

TITULO O BANNER DE LA PAGINA
LINK 1
TITULO
LINK 2 PARRAFO 1
PARRAFO 2
• Listado 1
LINK 3 • Listado 2
• Listado 3
LINK 4
Formulario - input type="checkbox"
El elemento checkbox es otro control que se puede insertar en un formulario. Un
checkbox es una casilla de selección que puede tomar dos valores (seleccionado/no
seleccionado)
<!DOCTYPE html>
<html>
<head><title>Prueba de formulario</title> </head>
<body>
Ingrese su nombre:
Seleccione los lenguajes que conoce: <br>
<input type="checkbox" name="java">Java<br>
<input type="checkbox" name="cmasmas">C++<br>
<input type="checkbox" name="c">C<br>
<input type="checkbox" name="csharp">C#<br>
</form>
</body>
</html>
Formulario - input type="radio"
Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada
debemos emplear controles visuales de tipo radio. Para definir controles de tipo
radio también utilizamos el elemento input inicializando la propiedad type con el
valor "radio"
<!DOCTYPE html>
<html>
<body>
Ingrese su nombre:
Seleccione el nivel de estudios que tiene: <br>
<input type="radio" name="estudios" value="1">Sin estudios<br>
<input type="radio" name="estudios" value="2">Primario<br>
<input type="radio" name="estudios" value="3">Secundario<br>
<input type="radio" name="estudios" value="4">Universitario<br>
</form>
</body>
</html>
Formulario - select (cuadro de selección individual)
El elemento select es un cuadro de selección. Este elemento HTML nos permite
seleccionar una opción entre un conjunto. según como la configuramos podemos
seleccionar varias opciones.
<!DOCTYPE html>
<html>
<body>
Ingrese su nombre:
Seleccione su pais:
<select name="pais">
<option value="1">Argentina</option>
<option value="2">España</option>
<option value="3">México</option>
<option value="4">Colombia</option>
</select> <br>
</form>
</body>
</html>
Formulario - select (cuadro de selección múltiple)
Una variante del cuadro de selección que vimos en el concepto anterior es permitir
que el visitante del sitio pueda seleccionar varias opciones
<!DOCTYPE html>
<html>
<body>
Seleccione uno o varios colores
(Presione Ctrl para seleccionar varios colores)<br>
<select name="colores[]" size="4" multiple>
<option value="1">Rojo</option>
<option value="2">Verde</option>
<option value="3">Azul</option>
<option value="4">Amarillo</option>
<option value="5">Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select> <br>
</form> </body>
</html>
Formulario - select (agrupamiento de opciones)
Podemos agrupar las opciones que tiene el cuadro de selección, esto tiene sentido
si el cuadro de selección tiene muchos items. Se cuenta con un nuevo elemento
llamado optgroup que agrupa un conjunto de elementos option.
Por ejemplo agrupar una serie de frutas y verduras:
<!DOCTYPE html>
<html>
<head><title>Prueba de formulario</title></head>
<body>
Seleccione una fruta o verdura: <select name="articulo">
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3">Durazno</option>
<option value="4">Ciruela</option>
</optgroup>
<optgroup label="Verduras">
<option value="5">Lechuga</option>
<option value="6">Papas</option>
<option value="7">Batatas</option>
<option value="8">Zanahorias</option>
<option value="9">Calabaza</option>
</optgroup> </select> <br>
<input type="submit" value="Enviar"> </form> </body>
</html>
Formulario - button
El elemento button es un control visual que se puede utilizar para sustituir los
controles:
<input type="reset" value="Borrar">
Entre otras las ventajas de este elemento es que podemos agregar imágenes dentro
del botón.
La sintaxis de este elemento es la siguiente:
<button type="submit"> Texto a mostrar dentro del botón. </button>
Todo lo que está contenido entre las marcas de comienzo y fin del elemento button
aparece dentro del botón, como por ejemplo una imagen, un párrafo, enfatizado de
una palabra etc.
La propiedad type se puede inicializar con alguno de estos tres valores: "submit",
"reset" y "button". Los dos primeros cumplen las funciones que ya conocemos es
decir envío de los datos al servidor y borrado del contenido de los controles. En
cuanto al tercer valor posible de la propiedad type significará que deberemos
codificar una función en javascript para procesar el evento.
Formulario - button
<!DOCTYPE html>
<html>
<head><title>Prueba de formulario</title></head>
<body>
Ingrese su nombre:
<button type="submit">Enviar
<img src= "foto1.jpg" alt="envio">
</button>
<button type="reset">Borrar
<img src= "foto2.jpg" alt="borrado">
</button>
</form>
</body>
</html>
Formulario - input type="file"
El control de tipo file nos permite enviar un archivo al servidor.
Nuevamente el HTML solo indica al navegador que debe enviar
el archivo al servidor pero debe haber en el servidor un programa
que lo almacene en una carpeta de dicho servidor.
Veamos la sintaxis para disponer un control de tipo file:
<input type="file" name="archi">
<!DOCTYPE html>
<html>
<head> <title>Prueba de formulario</title></head>
<body>
<form action="registrardatos.php" method="post"
enctype="multipart/form-data">
Ingrese su nombre:
Seleccione la foto: <input type="file" name="foto">
<br><input type="submit" value="Enviar">
</form></body>
</html>
Formulario - agrupamiento de controles.
El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de
recuadrar y agrupar un conjunto de controles de un formulario.
Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y
</fieldset>. Además para agregar un título a este recuadro debemos agregar
otro elemento HTML llamado legend.
<!DOCTYPE html>
<html>
<body>
<fieldset> <legend>Datos personales</legend>
Apellido y nombre:
Documento de identidad: <input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
Dirección: <input type="text" name="direccionpersona" size="30"><br>
</fieldset>
</form>
</body>
</html>
EVALUACION
1. INDICAR QUE HACEN LAS SIGUIENTES INSTRUCCIONES (1 PTO)
a) <br>
b) <title> <title>
c) <p> </p>
d) <ul><li> </li></ul>
e) <ol><li> </li></ol>
f) <h1> </h1>
g) <strong> </Strong>
h) <input type="text" name="nombre" size="30">
i) <a href="pagina2.html">pagina 2</a>
j.) <table border="1">
<tr>
<td>celda 1</td>
<td>celda 2</td>
</tr>
</table>
2. REALIZAR LA SIGUIENTE PAGINA WEB (VALOR 4 PTS)
Realizar una pagina Html con el siguiente formato: Pagina principal y que tengan
links o enlaces a las secciones de entretenimiento, deportiva, política y Económica.
PORTAL DE NOTICIAS WEB
Bienvenidos al portal de noticias web escoja la

sección de su interés
• Entretenimiento
• Deportes
• Política
• Economía
EVALUACION
Ejemplo de la subpágina entretenimiento
ENTRETENIMIENTO
ESCRIBA AQUÍ UNA NOTA O PARRAFO DE

ENTRETENIMIENTO
IR A PRINCIPAL
EVALUACION
Ejemplo de la subpágina deportes
DEPORTES
ESCRIBA AQUÍ UNA NOTA O PARRAFO DE

DEPORTES
IR A PRINCIPAL

Introduccion Al Desarrollo Web

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion Al Desarrollo Web

Cargado por

Copyright:

Formatos disponibles

INTRODUCCION AL

Esta constituido de elementos que el navegador interpreta y las despliega en la

La sintaxis para disponer un hipervínculo a otro sitio de internet es:

<a href="http://www.google.com">Buscador Google</a>

Imágenes dentro de una página <img>

La sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

Anclas llamadas desde otra página

Atributo size: Define el tamaño de la letra.Existen 7 niveles de tamaño distintos

<font size=4>Este texto es más grande</font>

Luego el navegador se encarga de numerar cada uno de los items contenidos

Fecha de nacimiento: xxxxxxx Direccion: xxxxxxx

DEPENDENCIA FECHA DESCRIPCION ARCHIVO

Auditoria interna a Dependencias de la entidad

Imagen 1 Imagen 2 Imagen 3

Imagen 4 Imagen 5 Imagen 6

TITULO O BANNER DE LA PAGINA

PORTAL DE NOTICIAS WEB

Bienvenidos al portal de noticias web escoja la

ESCRIBA AQUÍ UNA NOTA O PARRAFO DE

ESCRIBA AQUÍ UNA NOTA O PARRAFO DE

También podría gustarte