html + css, el principio del fin
DESCRIPTION
Clase del curso JoomlaUSACHTRANSCRIPT
![Page 1: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/1.jpg)
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
![Page 2: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/2.jpg)
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>
![Page 3: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/3.jpg)
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 ”
![Page 4: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/4.jpg)
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>
![Page 5: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/5.jpg)
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>
![Page 6: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/6.jpg)
T Í T U L O S
• <H1> <H2>
![Page 7: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/7.jpg)
L Í N E A H O R I Z O N TA L < H R >
<HR>
![Page 8: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/8.jpg)
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>
![Page 9: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/9.jpg)
E N L A C E S W E B
<A HREF=“index.html”>Inicio</A>
![Page 10: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/10.jpg)
I M A G E N E S
<IMG SRC=“imagen.png">
![Page 11: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/11.jpg)
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
![Page 12: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/12.jpg)
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 ?
![Page 13: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/13.jpg)
![Page 14: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/14.jpg)
E S T Ú P I D O Y S E N S U A L D I V
<DIV>…</DIV>
![Page 15: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/15.jpg)
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
![Page 16: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/16.jpg)
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
![Page 17: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/17.jpg)
B A C K G R O U N D
background-color:#b0c4de; background-image:url(‘paper.gif’); background-repeat:repeat-x;
![Page 18: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/18.jpg)
C O L O R : # F F F F F F ;
![Page 19: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/19.jpg)
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;
![Page 20: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/20.jpg)
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;
![Page 21: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/21.jpg)
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'>
![Page 22: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/22.jpg)
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
![Page 23: HTML + CSS, El principio del fin](https://reader033.vdocuments.mx/reader033/viewer/2022052322/557b4928d8b42a0d388b4d84/html5/thumbnails/23.jpg)
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!