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 S E <T I T L E ><TI T L E> I N S I DE H E A D E L E ME NT

CODE OUTPUT

BY:eng.Salma Mohamed
 PARAGRAPH:
-TO WRITE A PARAGRAPH IN HTML WE USE <P>YOUR PARAGRAPH</P>

CODE OUTPUT

BY:eng.Salma Mohamed
 BREAK LINES :
- IN HTML COMPUTER CAN’T RECOGNIZE SPACES OR ENTER , TO MAKE BREAK LINE WE USE <BR>

CODE OUTPUT
• Now we can see lines

BY:eng.Salma Mohamed
PREFORMATTED TEXT :
- T O M A K E SPA CES O R L I NES A P P EAR W E USE < P R E> YO UR T EX T < /PR E>

BEFORE USING <PRE > AFTER USING <PRE>

BY:eng.Salma Mohamed
LETS PLAY WITH CODE

W E N E E D TO M A K E A D I A M O N D
SHAPE HERE IS THE CODE

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 STYLE=“COLOR:RGB(RED VALUE,GREEN VALUE,BLUE VALUE);”>

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 STYLE=“COLOR:COLOR VALUE);”>

CODE O U T BU T

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
• Thank you

Link for today’s task:

https://forms.gle/hbUvBvAdDiZDjoDPA

BY:eng.Salma Mohamed