Post on 13-Jun-2015
HTML
Estilos HTLM
Los estilos son mecanismos para definir la apariencia física de los elementos html.
Pueden ser añadidos directamente a los elementos utilizando el atributo style o indirectamente con hojas de estilo (archivos CSS).
Estilos HTLM
Atributo Styles
Este atributo se ha extendido a la mayoría de los elementos html.
style=“nom_elem1:val_elem1;nom_elem2:val_elem2;…"
Atributo Styles
Algunos ejemplos:
style="background-color:yellow“style="font-size:10px"
style="font-family:Times"style="text-align:center"
Atributo Styles
<body style="background-color:PowderBlue;"><h1>Este es un header simple.</h1><p style="font-family:verdana;color:red">
Este es un texto en verdana de color rojo.</p><p style="font-family:times;color:green">
Este es un texto en times de color verde.</p><p style="font-size:30px">
Este texto es de 30 pixeles de tamaño</p>
</body>
CSS (Cascading Style Sheets)
Los estilos son normalmente almacenados en hojas de estilo.
Una hoja de estilo puede ser aplicada a varias páginas web. Esto centraliza los cambios.
Una página web puede utilizar mas de una hoja de estilo.
CSS (Cascading Style Sheets)
p,li,th,td { font-size: 75%; } body { background-color: #ffffff; } h1,h2,h3,hr { color:black; }
CSS (Cascading Style Sheets)
Una hoja de estilo puede ser interna o externa.
Las hojas de estilo internas son creadas dentro del documento html y utilizan el tag style y son creadas dentro del head.
Una hoja de estilo externa tiene la extensión .css.
CSS (Cascading Style Sheets)
Un ejemplo de hoja de estilo interna.
<head> <style type="text/css">
hr {color: sienna} p {margin-left: 20px}
body {background-image: url("images/back40.gif")} </style>
</head>
CSS (Cascading Style Sheets)
Un ejemplo de hoja de estilo externa referenciada.
<head> <link rel="stylesheet" type="text/css" href=“estilo.css" />
</head>
En este caso, la hoja de estilo se llama estilo.css.
HTM <div> Un ejemplo sencillo:<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
HTM <div>
HTM <span>
Funciona básicamente igual que <div>, aunque se usa más para estilizar contenidos específicos o manipularlos con javascript.
span.blue {color:lightskyblue;font-weight:bold}
span.green {color:darkolivegreen;font-weight:bold}
HTM <span>
<p>My mother has <span class="blue">light blue</span> eyesand my father has <span class="green">dark green</span>eyes.</p>
Formularios
Un formulario se define con el tag <form> .
Define un área donde poner elementos que generalmente permiten al usuario ingresar información.
Estos elementos pueden ser inputs, textareas, selects, etc.
Formularios
Los elementos más usados dentro de un formulario son los <input>.
Estos pueden ser:
1. Text Fields
2. Radio Buttons
3. Checkboxes
4. Submit
Formularios
Text Fields
<form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" />
</form>
Formularios
Formularios
Radio Buttons
<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female
</form>
Formularios
Formularios Checkboxes
<form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane" />
</form>
Formularios
Formularios
Submit
<form name="input" action="html_form_submit.php" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" />
</form>
Formularios
Formularios <textarea> Es un input multilínea que puede contener
un número ilimitado de caracteres. Su tamaño puede ser especificado con los
atributos rows y cols o con las propiedades de estilo height y width.
<textarea rows="2" cols="20">bla bla bla bla bla bla bla bla bla bla bla bla …
</textarea>
Formularios <textarea>
Formularios <select> Sirve para mostrar al usuario una lista
desplegable de opciones.
<select name="carlist">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Formularios <select>