Html power

444 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
444
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html power

  1. 1. 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).
  2. 2. Estilos HTLM
  3. 3. 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;…"
  4. 4. Atributo Styles Algunos ejemplos: style="background-color:yellow“ style="font-size:10px" style="font-family:Times" style="text-align:center"
  5. 5. 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>
  6. 6. 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.
  7. 7. CSS (Cascading Style Sheets)p,li,th,td{ font-size: 75%;}body {background-color: #ffffff; } h1,h2,h3,hr{color:black;}
  8. 8. 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.
  9. 9. 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>
  10. 10. 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.
  11. 11. 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>
  12. 12. HTM <div>
  13. 13. 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}
  14. 14. 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>
  15. 15. 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.
  16. 16. Formularios Los elementos más usados dentro de un formulario son los <input>. Estos pueden ser:1. Text Fields2. Radio Buttons3. Checkboxes4. Submit
  17. 17. Formularios Text Fields<form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /></form>
  18. 18. Formularios
  19. 19. Formularios Radio Buttons<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female</form>
  20. 20. Formularios
  21. 21. 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>
  22. 22. Formularios
  23. 23. Formularios Submit<form name="input" action="html_form_submit.php" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /></form>
  24. 24. Formularios
  25. 25. 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>
  26. 26. Formularios <textarea>
  27. 27. 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>
  28. 28. Formularios <select>

×