Html power

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.


p,li,th,td { font-size: 75%; } body { background-color: #ffffff; } h1,h2,h3,hr { color:black; }


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.


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>


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>

Html power

Documents

Transcript of Html power