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).

Atributo Styles

 Este atributo se ha extendido a la
mayoría de los elementos html.

style=“nom_elem1:val_elem1;nom_elem2:val_el
em2;…"

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.

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

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.

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>

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 <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> eyes
and 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
 Radio Buttons

<form>
<input type="radio" name="sex"
value="male" /> Male
<br />
<input type="radio" name="sex"
value="female" /> Female
</form>

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
 Submit

<form name="input" action="html_form_submit.php"
method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

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 <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>

Html power

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Destacado

Destacado (9)

Similar a Html power

Similar a Html power (20)

Html power