B11 Introduccion a html

lunes, 29 de julio de 2013

Codigo PHP Envio Correo (Guardar Como html_form_send.php)

<?php
if(isset($_POST['email'])) {

    // CHANGE THE TWO LINES BELOW
    $email_to = "sucorreo@yahoo.com";

    $email_subject = "website html Correos";


    function died($error) {
        // your error code can go here
        echo "Lo sentimos pero tienes que llenar los campos Correspondientes*. ";
        echo "Se muestran los errores a continuacion.<br /><br />";
        echo $error."<br /><br />";
        echo "Llena los campos.<br /><br />";
        die();
    }

    // validation expected data exists
    if(!isset($_POST['first_name']) ||
        !isset($_POST['last_name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['comments'])) {
        died('Lo sentimos pero hubo un error');
    }

    $first_name = $_POST['first_name']; // required
    $last_name = $_POST['last_name']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['comments']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'Direccion de correo invalida.<br />';
}
    $string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'Nombre incorrecto.<br />';
}
if(!preg_match($string_exp,$last_name)) {
    $error_message .= 'Apellido incorrecto.<br />';
}
if(strlen($comments) < 2) {
    $error_message .= 'Comentarios invalidos.<br />';
}
if(strlen($error_message) > 0) {
    died($error_message);
}
    $email_message = "Form details below.\n\n";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "First Name: ".clean_string($first_name)."\n";
    $email_message .= "Last Name: ".clean_string($last_name)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";


// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
?>



Gracias por su correo.

<?php
}
die();
?>

lunes, 15 de julio de 2013

Pagina simple HTML y CSS

Pagina con HTML y CSS

domingo, 30 de junio de 2013

Entregas Parcial 2

Entrega del 15 al 19 Julio

Web page por pareja (3.0)

Desarrolla una página por parejas, donde uses al menos 5 reglas CSS, uses 5 imágenes, al menos un párrafo con 5 líneas.
Primera pagina Bienvenida, donde esta solo una imagen al centro, al dar click, entramos a la segunda pagina donde se encuentran el texto y las imágenes.

Avance Proyecto Final (5.0)

Puedes seguir usando los archivos HTML, que entregaste en primer parcial o puedes hacer algo nuevo.

El sitio debe estar conformado por al menos 3 páginas web y links entre ellos. (ejemplo: Home, galería, Biografía)

Utilizar comandos CSS para mejorar el estilo de tu página. (Decide si utilizar External y/o embeded y/o inline)

Optimizar la resolución de las imágenes, utilizar 5 imágenes mínimo en una Galería.

Investigación (1.0)
Mandar por correo

Has un resumen no mayor a una cuartilla ni menor a 5 párrafos o puedes explicarlo gráficamente de la Historia de World Wide Web. NO SOLO CONSULTES WIKIPEDIA Y NO COPIES Y PEGUES. Agrega las direcciones de al menos 2 fuentes digitales consultadas o Bibliografías.

domingo, 23 de junio de 2013

Texto

Fuente
font-family:

La propiedad font-family te permite especificar que fuente vas a utilizar en los elementos y a que regla de CSS aplica.
El valor de esta propiedad indica al usuario que fuente debe tener instalada, para poder mostrarla en su navegador. se pueden dar opciones separado por comas. Si la fuente esta hecha de dos palabras se usa " ".

body {
font-family: Impact, Times, serif;}
h1, h2 {
font-family: Arial, Verdana, Helvetica;}
#encabezado{
font-family: "Courier New", Courier,
monospace;}

Tamaño de fuente
font-size:

El valor de esta propiedad nos va dar el tamaño y puede ser especificado en:

Pixeles (px)
Porcentaje (80%) el tamaño de una fuente por defecto es 16px, por lo tanto será del 80% de 16px ( resultado 12.8px), se pueden usar valores mayores al 100% por ejemplo 200% ( resultará 32px)
em un em es equivalente a la anchura de la letra "m"

h1 {
font-size: 14px;}
h2
{
font-size: 1.5em;}
p, a {
font-size; 150%;}

Usar Fuente instalada en el sitio
@font-face:

Permite usar una fuente aunque no este instalada en la computadora de una persona, se tiene que especificar la ruta donde se encuentra esta fuente, hay que tener 4 archivos diferentes de la fuente dentro de la ruta de la página web:

eot
woff
ttf/oft
svg

font-face {

font-family: 'HardRock';

src: url('fonts/HardRock.eot');

src: url('fonts/HardRock.eot?#iefix')

format('embedded-opentype'),

url('fonts/HardRock.woff') format('woff'),

url('fonts/HardRock.ttf')

format('truetype'),

url('fonts/HardRock.svg#HardRockRegular')

format('svg');}

Bold
font-weight:

normal
bold
lighter
bolder

Italic
font-style:

normal
italic
oblique

Mayúsculas y minúsculas
text-transform:

lowercase
uppercase
capitalize

Subrayado
text-decoration:

none
underline
overline

line-through
blink

Espacios entre líneas, letras y palabras
line-height:
letter-spacing:
word-spacing:

px
%
em

Alineación de texto
text-align:

left
right
justify
center

Alineación de texto vertical
vertical-align:

baseline
sub
super
top
text-top
middle
bottom
text-bottom

Sombra de texto
text-shadow:

Usa 4 valores, el primero indica izquierda o derecha (x), segundo arriba o abajo (y), tercer valor opcional, la cantidad de blur, y el caurto el color de la sombra.

h1 {
background-color: #cccccc;
color: #ffffff;
text-shadow: 3px 2px 5px #111111;}

Color dentro de CSS

Color de Texto
color:

Valores RGB
color: rgb(20,0,255);

Códigos Hexa decimáles
color: #00eeaa;

Nombre del color
color: seagreen;

Hay 147 nombres nombres de colores predefinidos.

Color de Fondo
background-color:

Por defecto todos los navegadores manejan un fondo de color blanco. Para poner un fondo de color se declara en la hoja de estilo en body.
body {
background-color: darkgray;
}
h1{
color: black;
background-color: #87cefa
}

Cuando escojas colores de fondo y haya texto:

Un contraste bajo hace la lectura difícil
Un alto contraste hace la lectura más fácil
Un contraste medio es utilizado para grandes párrafos de lectura

domingo, 16 de junio de 2013

Introducción CSS

CSS Cascading Style Sheet

Una manera más fácil de dar formato a las páginas Web.

CSS usa reglas para dar un mejor control en cada uno de los elementos que conforman nuestra(s) página.
CSS asocia las reglas con elementos de HTML.
Tiene una sintesis muy sencilla que consta de "Selectores", "Propiedades" y "Valores" juntos crean reglas de Estilo

Construcción de una regla CSS

-----------------Selector {Propiedad:Valor;}

html---------------- p {color:blue;font-family:Arial;}
Multiple----------- th,td {font-weight:bold;padding:7px;}
Descendiente-- div h1 {font-size:80%;margin-left:7px;}
Class--------------.centro {text-align:center;line-height:16px;}
ID------------------- #logo {background-color:blue;color:orange;}

Una regla CSS consta de 2 partes:
Un Selector identifica el elemento o combinación de elementos que se les dará ese formato.
Declaracion: El estilo o formato que se aplicará, consta de 2 partes {propiedad : valor;}

Se pueden especificar muchas propiedades en una declaración , siempre separados por ;

La propiedad indica los apspectos del elemento que vamos a cambiar ( color, Font, Width, Height, border)
El Valor especifica las variables que se usarán para las propiedades.

Hay 3 formas de aplicar el formato CSS a las páginas

Dento del código html (Inline)

<html>
<head>
<title>CSS dentro de código</title>
</head>
<body>
<h1 style=" font-family: Helvetica; color: red;">Titulo</h1>
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh non sapien tempor faucibus. Duis pretium sollicitudin lectus nec pellentesque. Duis pellentesque mattis nibh, vel convallis ligula. Praesent dapibus blandit quam quis scelerisque. Ut risus justo, porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar lectus. </p>
</body>
</html>

Incluido de manera interna en un hoja de estilo, (Embeded)

<html>
<head>
<title>Uso Interno CSS</title>
<style type="text/css">
body {
font-family: Verdana;
font-size: 16px;
color: white;
background-color: blue;}
h1 {
color: orange;
font-size:24px;}
</style>
</head>
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh non sapien tempor faucibus. Duis pretium sollicitudin lectus nec pellentesque. Duis pellentesque mattis nibh, vel convallis ligula. Praesent dapibus blandit quam quis scelerisque. Ut risus justo, porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar lectus. </p>
</body>
</html>

<style type="text/css">Se delcara el uso de un estilo, usa el atributo type para identificar que estilos son usados en CSS, cuando se hace un sitio con más de una página se debe optar por usar una Hoja de estilo externa.

Hoja de Estilo CSS externa (external)

<!DOCTYPE html>
<html>
<head>
<title>CSS de manera Externa</title>
<link href="css/estilo.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh non sapien tempor faucibus. Duis pretium sollicitudin lectus nec pellentesque. Duis pellentesque mattis nibh, vel convallis ligula. Praesent dapibus blandit quam quis scelerisque. Ut risus justo, porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar lectus. </p>
</body>
</html>

<link href=Usado en los documentos html para encontrar la ubicación del estilo usado por el archivo CSS, es un elemento vacío(no necesita ser cerrado el atributo) y va dentro del elemento <head>
Tiene e elementos:
href= para especificar la ruta
type Especifica el tipo de documento enlazado y el valor es text/css
rel Especifica la relacion entre la página HTML y al archivo enlazado su valor es stylesheet cuando va enlazado a un archivo CSS

estilo.css
body {
font-family: Arial;
font-size: 14px;
color: yellow;
background-color: black;}
h1 {
color: red;
font-family: Impact;
font-size:20px;}

El uso de hojas externas de estilo nos va dar flexibilidad para dar mantenimiento a nuestro sitio.
Permite que diferentes páginas html usen las mismas reglas en vez de repetirlas por cada página.