HTML + CSS, El principio del fin...
23
HTML+CSS=PLANTILLAS EN JOOMLA SCARLETT MELGAREJO Y HECTOR MANSILLA ARIAS
-
Upload
hector-mansilla-arias -
Category
Documents
-
view
162 -
download
8
description
Clase del curso JoomlaUSACH
Transcript of HTML + CSS, El principio del fin...
H T M L + C S S = P L A N T I L L A S E N J O O M L A
S C A R L E T T M E L G A R E J O Y H E C T O R M A N S I L L A A R I A S
E S T R U C T U R A B Á S I C A H T M L
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
A P L I C A N D O A L T E X T E O I N T E N S O
“ VA M O S A E N T R A R A P I C A R ”
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>
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>
T Í T U L O S
• <H1> <H2>
L Í N E A H O R I Z O N TA L < H R >
<HR>
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>
E N L A C E S W E B
<A HREF=“index.html”>Inicio</A>
I M A G E N E S
<IMG SRC=“imagen.png">
VA M O S A C R E A R U N A PÁ G I N A W E B S I M P L E
E S T Ú P I D O Y S E N S U A L C S S¿ P E N S A B A N Q U E E S O E R A T O D O ?
E S T Ú P I D O Y S E N S U A L D I V
<DIV>…</DIV>
C L A S S E S & I D
• 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
M A R G I N , PA D D I N G , B O R D E RH E I G H T W I D T H
B A C K G R O U N D
background-color:#b0c4de; background-image:url(‘paper.gif’); background-repeat:repeat-x;
C O L O R : # F F F F F F ;
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;
T R A B A J O C O N F U E N T E S
• font-style:normal; / italic
• font-weight:bold; / normal
• font-family:"Times New Roman",Georgia,Serif;
U S A R F U E N T E S E X T E R N A S
<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
C R E A R E M O S N U E S T R O C S ST E R M I N A N D O E L S I T I O S I M P L E
P R Ó X I M A C L A S E
• Creación de una plantilla desde cero
• Creación de un sitio desde cero con Joomla!
