HTML + CSS, El principio del fin...

269 views
190 views

Published on

Clase del curso JoomlaUSACH

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
269
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

HTML + CSS, El principio del fin...

  1. 1. SCARLETT MELGAREJO Y HECTOR MANSILLA ARIAS HTML+CSS=PLANTILLAS EN JOOMLA
  2. 2. ESTRUCTURA BÁSICA HTML <HTML> <HEAD> <TITLE>Título de la página</TITLE> ... </HEAD> <BODY> ... </BODY> </HTML>
  3. 3. “ VA M O S A E N T R A R A P I C A R ” APLICANDO AL TEXTEO INTENSO
  4. 4. PA R R A F O < P > < / P > <P>Este es un ejemplo de cómo se formatean los párrafos en lenguaje HTML. En este ejemplo se incluyen dos párrafos</P> <P>El resultado puede verse en el navegador web</P>
  5. 5. S A LT O D E L I N E A < B R > <P>Los párrafos se separan con un espaciado superior al correspondiente a una nueva línea. <BR> Para tener un espaciado más compacto puede utilizarse el Line Break, como en este ejemplo.</P>
  6. 6. TÍTULOS • <H1> <H2>
  7. 7. L Í N E A H O R I Z O N TA L < H R > <HR>
  8. 8. L I S TA S D E S O R D E N A D A S <UL> <LI>Van precedidas por “viñetas”</LI>
 
 <LI>Se entiende que no importa el orden</LI> <LI>Se utilizan con mucha frecuencia</LI> </UL>
  9. 9. ENLACES WEB <A HREF=“index.html”>Inicio</A>
  10. 10. IMAGENES <IMG SRC=“imagen.png">
  11. 11. V A M O S A C R E A R U N A PÁ G I N A W E B SIMPLE
  12. 12. ¿PENSABAN QUE ESO ERA TODO? ESTÚPIDO Y SENSUAL CSS
  13. 13. ESTÚPIDO Y SENSUAL DIV <DIV>
 …
 </DIV>
  14. 14. CLASSES & ID • CLASS=“NOMBRE_DE_LA_CLASE” • Se ocupan para repetir varias veces un estilo • ID=“NOMBRE_DE_LA_ID” • Se ocupan para utilizar una vez un estilo
  15. 15. HEIGHT WIDTH M A R G I N , PA D D I N G , B O R D E R
  16. 16. BACKGROUND background-color:#b0c4de;
 background-image:url(‘paper.gif’);
 background-repeat:repeat-x;
  17. 17. COLOR: #FFFFFF;
  18. 18. F O R M AT E O D E T E X T O • text-align:center / right / center; • text-decoration:none; • text-transform:uppercase / lowercase / capitalize;
  19. 19. TRABAJO CON FUENTES • font-style:normal; / italic • font-weight:bold; / normal • font-family:"Times New Roman",Georgia,Serif;
  20. 20. <link href='http://fonts.googleapis.com/css?family=Jolly +Lodger' rel='stylesheet' type='text/css'> USAR FUENTES EXTERNAS
  21. 21. TERMINANDO EL SITIO SIMPLE CREAREMOS NUESTRO CSS
  22. 22. PRÓXIMA CLASE • Creación de una plantilla desde cero • Creación de un sitio desde cero con Joomla!

×