HTML II Etiquetas en el Cuerpo (BODY) Imágenes - Links Formularios Introducción a CSS...
15
HTML II Etiquetas en el Cuerpo (BODY) Imágenes - Links Formularios Introducción a CSS Introducción a Javascript Introducción a PHP
-
Upload
vicente-razon -
Category
Documents
-
view
236 -
download
0
Transcript of HTML II Etiquetas en el Cuerpo (BODY) Imágenes - Links Formularios Introducción a CSS...
HTML II
Etiquetas en el Cuerpo (BODY)
Imágenes - Links
Formularios
Introducción a CSS
Introducción a Javascript
Introducción a PHP
Estructura Básica
<html><head> <title>Html Basico </title></head><body>
</body></html>
Código para Fotos
<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo:
<img src="baby.jpg">
Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".
Referencias con fotos tomadas del internet:<img src="?" alt=”descripcion” align=”right”>
? = http://www.uprm.edu/cti/media/mainbn.jpgLinks: <a href=”http://www.uprm.edu”> <img src=”?”> </a>
Algunos Atributos del BODY
Backgound - Bgcolor - Text - Link - Vlink - Alink
Protección para Fotos y Texto
<body ondragstart="return false" onselectstart="return false" oncontextmenu="return false">
Formularios
•Los formularios son posiblemente la herramienta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online y luego ejecutar una determinada acción con la misma ...
Form Action
<form> y </form>
Algunos Atributos:
Action = URL, METHOD = GET o POST
<form action=”contactus.php” method=”post” name=”forma” onsubmit=”return validate()”>
Etiquetas INPUT
La etiqueta <INPUT> es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes".
Algunos Atributos:NAME, ALIGN, CHECKED, MAXLENGTH, SIZE, VALUE, TYPE= TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, HIDDEN;
Cajas de Texto:<input type=”text” name=”nombre” maxlength=”25” value=””>
Radio Buttons:<input type=”radio” name=”sexo” value=”masculino”>
CheckBoxes:<input type=”checkbox” name=”sistema1” value=”windows”>
Text Area:<textarea name=”asunto” cols=”20” rows=”6”></textarea>
Etiquetas para Formularios
Etiquetas para Formularios
Listas:
<select name="edad" size="1"><option value="0">Escoga uno...</option><option value="1 - 10 años">1 - 10 años</option><option value="11 - 30 años">11 - 30 años</option><option value="31 años en adelante">31 años en adelante</option></select>
Botones
Botón de SUBMIT :<input type="submit" name="btenviar" value="Enviar" />
Botón de RESET:<input type="reset" value=”reset” />
Introducción a CSS
Añada en el HEAD:<style type="text/css" media="screen">... css samples ...</style>
Llamada a CSS Externo:<link rel="stylesheet" type="text/css" href="css/local.css" media="all">
Etiquetas más usadas:<div class="font1"> Hello World! </div><span class="font1"> frase o palabra, inline text </span><p class="font1"> hello </p>
Ejemplos de CSS
.font1 { color: blue; font-size: 15px; font-family: verdana; }
body { background-color: #FFFF99; }
Links: a:hover { color: green; text-decoration: none; }
Bordes: .borde { border: solid 3px #666; background-color: white; }
Introducción a Javascript<script type=”text/javascript>: incrusta un script en la página y se cierra con </script>.
Ejemplo para validar caja de texto email:<script type="text/javascript"> function validate() {frm = document.forma;if((frm.email.value == "") || (frm.email.value.indexOf("@") == -1)){alert("Por favor incluya una dirección de correo electrónico válida");frm.email.focus();return false; }
return true;}</script>
Introducción a PHP:MAIL
Subir el formulario por FTP/SFTP al Server
Varibales Usadas:$nombre = $_POST['nombre'];
<?php ... código ... ?>
Función para Mail
mail(“myemail”, “subject”, $msg, “From: $email\n”);
