WEB DESIGN

HTML&CSS

SESSION 2
BY:eng.Salma Mohamed
CONTENT
• Changing tab name
• Paragraph in html
• Break line in html
• Preformatted text in html
• Start styling with css :
– Color

BY:eng.Salma Mohamed
 CHANGING TAB NAME :
- W E U SE < T I T LE > < TI TL E> I N S I D E H E A D EL EM E N T

CODE OUTPUT

BY:eng.Salma Mohamed
 PARAGRAPH:
- TO W R I T E A PA R A G R A P H I N H T M L W E U S E < P > Y O U R PA R A G R A P H < / P >

CODE OUTPUT

BY:eng.Salma Mohamed
 BREAK LINES :
- I N H T M L C O M P U T E R C A N ’ T R E C O G N I Z E S PA C E S O R E N T E R , TO M A K E
BREAK LINE WE USE <BR>

CODE OUTPUT
• Now we can see lines

BY:eng.Salma Mohamed
PREFORMATTED TEXT :
- T O M A K E S P A CES O R L IN ES A P P EA R W E US E < P R E> Y O UR TEX T< /P R E>

B E F O R E U S IN G < P R E > A F T E R U S IN G < P RE >

BY:eng.Salma Mohamed
LETS PLAY WITH CODE

WE NE E D TO M A K E A D IA M O N D
SHAPE H E R E IS T H E C O D E

BY:eng.Salma Mohamed
 TO STYLE OUR PARAGRAPH WE USE :
CSS
• There are many ways to use CSS
• First way : in line method
• We write our styling code inside tags

BY:eng.Salma Mohamed
CHANGE COLOR OF THE PARAGRAPH:
<P STYLE=“COLOR: COLOR NAME;”>

CODE OUTPUT

BY:eng.Salma Mohamed
 CHANGING COLOR :
< P S T Y L E = “ C O L O R : R G B ( R E D VA L U E , G R E E N VA L U E , B L U E VA L U E ) ; ” >

CODE OUTPUT

You can use color wheel from this link to know the values:
https://www.colorspire.com/rgb-color-wheel/

BY:eng.Salma Mohamed
 CHANGING COLOR :
- < P S T Y L E = “ C O L O R : C O L O R VA L U E ) ; ” >

CODE OUTBUT

You can use color wheel from this link to know the values:
https://www.colorspire.com/rgb-color-wheel/

BY:eng.Salma Mohamed
W H AT Q U E S T I O N S W O U L D
YOU LIKE TO ASK ME?

BY:eng.Salma Mohamed
SLIDE TITE

• Thank you

Link for today’s task:

https://forms.gle/hbUvBvAdDiZDjoDPA

BY:eng.Salma Mohamed