Html power
Upcoming SlideShare
Loading in...5
×
 

Html power

on

  • 276 views

 

Statistics

Views

Total Views
276
Views on SlideShare
183
Embed Views
93

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 93

http://cursing2prg.milaulas.com 93

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html power Html power Presentation Transcript

    • 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_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.
    • 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> 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 Fields2. Radio Buttons3. Checkboxes4. 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>