HTML y 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 R H 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 S T 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!

HTML y CSS: El principio del fin...

HTML y CSS: El principio del fin...

Hector Mansilla Arias

More Decks by Hector Mansilla Arias

Featured

Transcript

H T M L + C S S = P

E S T R U C T U R A

A P L I C A N D O A

PA R R A F O < P > <

S A LT O D E L I N E

T Í T U L O S • <H1> <H2>

L Í N E A H O R I Z

L I S TA S D E S O R

E N L A C E S W E B

I M A G E N E S <IMG SRC=“imagen.png">

VA M O S A C R E A R

E S T Ú P I D O Y S

E S T Ú P I D O Y S

C L A S S E S & I D

M A R G I N , PA D D

B A C K G R O U N D

C O L O R : # F F F

F O R M AT E O D E T

T R A B A J O C O N

U S A R F U E N T E

C R E A R E M O S N

P R Ó X I M A C L A