Diseño web
Etiquetas pareadas:
<HTML>Esta etiqueta indica el comienzo de un documento
html
</HTML> fin del documento
Dentro de esta etiqueta pueden existir otras etiquetas
<head> encabezado o cabecera del documento
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Documento sin título</title>
</head>
La etiqueta body
<body bgcolor="#000000">
</body>
Dentro de estas etiquetas van todas las otras, que forman nuestro
documento o pagina
Observe que esta etiqueta maneja PROPIEDADES como la de
backcolor o color de fondo del documento o pagina. Pero existen
muchas otras propiedades que podemos alterar.
Etiqueta para el link-URL
<a href=“ruta/documento.html” >Ver reservaciones </a>
Esta etiqueta permite hacer LINK a otros documentos los cuales
pueden ser: HTML, PHP, Imágenes, videos, WORD, Excel etc. Solo
debe especificar el formato o extensión del archivo y su ubicación.
<a href="contactanos.html" class="">Contactanos</a>
Etiquetas para insertar imagenes:
<img src="images/body_main_footer.gif" width="700"
height="25" tittle=“mi imagen”/>
Igualmente puede insertarla en un link
<a href=“ruta/documento”> <img
src="images/body_main_footer.gif" width="700" height="25" />
<a />
Etiqueta para listas ordenadas
<ul>
<li> elemento 1 </li>
<li> elemento 2 </li>
</ul>
<ul class="art-vmenu">
<li><a href="home.html" class="">Anuncios</a></li>
<li><a href="fotos.html" class="">Galería</a></li>
<li><a href="about.html" class="">Acerca de</a></li>
<li><a href="contactanos.html"
class="">Contactanos</a></li>
<li><a href="solicitudes.php"
class="">Solicitudes</a></li>
<li><a href="pan_ingresar.php"
class="">Administrador</a></li>
<li><a href="Ayudas.docx" class="">Ayudas</a>
</li>
</ul>
Etiquetas para formatear textos:
<pre> nos permite que el texto
Salga tal como lo escribimos respetando
Las líneas y espacios en blanco </pre>
Dentro de ella podemos darle formato al texto.
<br /> Salto de línea
Etiquetas para formatear textos:
<p> estiqueta de párrafo </p>
Aquí también se puede dar formato al texto del párrafo
<p>Reservaciones</p>
<p>Shief de cocina </p>
<p>&nbsp; </p> espacio en blanco en el párrafo
<p><span style="font-size: 16px; font-weight: bold;">
Sector:</span></p>
Encabezados
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h2 class="art-postheader">
<span class="art-postheadericon"> Solicitudes:
</span>
</h2>
Hojas de estilos:
Las hojas de estilos son documentos que contienen códigos para dar formato a nuestras
paginas, objetos etc.
<link href=“mis_estilos.css" rel="stylesheet" type="text/css">
De esta forma incluimos o hacemos referencia dentro de una página a un documento que
tiene la hoja de estilo.
Esta instrucción se debe colocar antes de la etiqueta body
Pero igualmente se puede incluir este código dentro de una página sin tener un código en un
documento externo.
Hojas de estilos en el documento HTML:
<style type="text/css">
<!-- así se agregan comentarios en el documento
body {
background-color: #000000;
}
body,td,th {
color: #FFFFFF;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFF00;
}
a:hover {
color: #00CC33;
} </style>
Fíjense que este codigo enmarcado dentro de la etiqueta style, lo que
hace es darle colores a la etiqueta ancla <a> para los link.
1. A:link el color del link normal
2. A:visited el color cuando ud. Ya ha visitado esa pagina
3. A:hover el color del link cuando el apuntador del mouse pasa
sobre el link
4. También nos define el color negro blanco para el body, table
header y teble data
5.
Tablas
La etiqueta
<table width="700" border="0" align="center" >
<tr>fila 1 o table row
<td>columna 1 o table data; aquí va el logo</td>
</tr>
<tr>fila 2
<td>&nbsp; aqui va la pelicula </td>
</tr>
<tr>fila 3
<td>&nbsp;aqui va el rotulo o borde </td>
</tr>
</table>
formularios
Los formularios son utilizados para colocar objetos (botones, cajas,
combos, radiobutton etc) a través de los cuales el usuario
interactua con el sistema y un abase de datos
La etiqueta es
<form id=“miform” name=“miform” action=“ingresar.php”
method=“post” class="texto_formulario">
Aquí van todos los objetos que contendrá el formulario
</form>
Etiqueta LABEL
<label>cliente</label>
Etiqueta INPUT
<input name="cliente" type="text" size="15" maxlength="70"
id="cliente" /> <br/>
Etiqueta TEXTAREA
<textarea name="tb_comentario" cols="50" rows="5"
id="tb_comentario">
</textarea>
Etiqueta para fechas
<input name="tb_fecha" type="date" size="10" maxlength="10"
id="tb_fecha" value="<?php echo date("Y-m-d"); ?>"
<br>
Etiqueta SELECT
<label>tipo reservacion</label>
<select name="tipo_reservaciones" id="tipo_reservaciones">
<option value=“0”>Seleccionar</option>
<option value=“1”>no fumador</option>
<option value=“2”>fumador</option>
<option value=“3”>VIP</option>
<option value=“4”>Afuera</option>
</select> <br /><br />
Agregar botones
<input name="guardar" type="button" value="guardar"
class="botones" onclick="validar_nuevo(miform)" />
Agregar RADIOBUTTON
<label>hora</label>
<input type="radio" name=“radiogroup1" value="am" id="am_0"
/> Am</label>
<label>
<input type="radio" name="radiogroup1 " value="pm" id="am_1"
/>Pm</label> <br />
Practica nro 2
Relice el siguiente practico:
Vamos a diseñar el siguiente formulario:
A continuación, tiene el código para generar este formulario, utilizando las
etiquetas DIV
Note que primero va la etiqueta <form con sus atributos > y dentro de ella
antes de cerrarla están todos los objetos del formulario
Toda etiqueta de formulario debe tener una propiedad NAME para
diferenciarla de otras etiquetas form del documento html.
El id debe ser también obligatorio, ya que es el nombre como nos
referiremos al formulario, pero en javascript.
El method es para indicarle al formulario la forma como se enviarán los
datos o el canal que se utilizará para enviarlos al servidor. Existen 2
métodos:
Post: esto significa que los datos se enviaran, por llamarlo de alguna
forma, ocultos, no se ven . es como se los enviamos por un tubo
hasta el servidor.
Get: este método le indica que los datos van en la url del link, por lo
tanto, no van ocultos. Se colocan de la siguiente manera cuando se
invoca el link
1. <a href=”mi_programa.php?id=0001”>
2. Observe que en la url o ancla esta la variable id que la
enviamos al servidor con el valor 0001.
<form name="formulario" id="formulario" Method="post"
action="envio.php">
</fieldset>
<h2>Contacto</h2>
</fieldset>
<div>
<label for="nombre">Nombre: </label>
<input type="text" name="nombre" id="nombre" size="60">
</div>
<div>
<label for="correo">Correo:</label>
<input type="text" name="correo" id="correo" size="60"/>
</div>
<div>
<label for="sitio">Sitio Web:</label>
<input type="text" name="sitio" id="sitio" size="60"/>
</div>
<div>
<label for="mensaje">Mensaje: </label>
<textarea name="mensaje" id="mensaje" rows="10"
cols="56"></textarea>
</div>
<p id="envio">
<input type="submit" name="enviar" id="enviar" value="Enviar"
/>
</p>
<a href="mailto:[email protected]"><img
src="Imagenes/Note Book.png" title="Contactanos"
width="30" height="28" border="0"
/></a>
Un formulario es un contenedor. Por ejemplo. Cuando ud. Va a ingresar a
facebook, primeramente le muestra un formulario que contiene dentro de
el varios objetos.
Unas etiquetas que son títulos
2 botones. uno para ingresar y otro para cancelar
2 cajas de texto para ingresar datos
Y un link o vínculos por si desea registrarse y otro por si olvido
la contraseña, los cuales los llevaran a otros formularios
Otro aspecto de los fomularios importante , es que todos los objetos
deben tener 2 propiedades con un valor asignado. La propiedad id y la
propiedad name. En ambas se debe colocar el nombre del objeto, el cual
debe ser único. Por 2 propiedades para indicar el nombre del objeto.
Bueno porque javascript usa el valor de la propiedad id y php utiliza el
valor de la propiedad php. Esto significa que si yo quiero trabajar o hacer
referencia al objeto con el código del email, debo utilizar la variable
“correo” que es como la hemos llamado según nuestro ejemplo.
Si el nombre del objeto no es único, o sea existen 2 o más objetos con el
mismo name o id, el navegador no podrá resolver el código y simplemente
ignora la sentencia. No arroja error, pero no la ejecuta.
En la siguiente clase estaremos viendo como crear formularios utilizando
tablas.
En la clase del miércoles java script
Jueves , viernes y sábado php y final.
