WEB DEVELOPMENT BASICS
BY
KALLURI VINAY REDDY
12MSE1013
VIT CHENNAI
HTML AND CSS
• LECTURE 4
TOPICS
Lecture 4
Font size
Font colour
Font family
Background colour
Aligning the text strong words
Emphasize words
FONT SIZE
• We can give tags more instructions by including attributes in the opening tag.
• An attribute is simply a char...
FONT SIZE SAMPLE
CODE
<!DOCTYPE html>
<html>
<head>
<title>First font size change</title>
</head>
<body>
<p style="font-si...
FONT COLOUR
What is awesome about the style attribute is that we use it a lot! And we can use
it with many different tags,...
SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Changing the colors!</title>
</head>
<body>
<h1 style="color:green;font-s...
FONT FAMILY
• We've covered font colours and font sizes. But we want more
power! We want to decide what font type to use. ...
SAMPLE CODE
• <!DOCTYPE html>
• <html>
• <head>
• <title>Loving the font changes</title>
• </head>
• <body>
• <h1>Big titl...
RECAP
<!DOCTYPE html>
<html>
<head>
<title>Putting it all together</title>
</head>
<body>
<p style="font-size:20px;color:b...
BACKGROUND COLOUR
• The previous section covered a number of nice tricks to control how the text
looks. Now we want to lea...
SAMPLE
CODE
<!DOCTYPE html>
<html>
<head>
<title> background color!</title>
</head>
<body style="background-color:brown">
...
ALIGNING THE TEXT
• Often it is nice to be able to move the text around. To do
so, we again use the style attribute. And t...
SAMPLE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body>
<h3 style="text-align:cent...
STRONG WORDS
• We can change the appearance of words. What if we want to make them bold?
We don’t have to use the style at...
SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Viva La Revolution!</title>
</head>
<body>
<p>Do you hear the people <str...
EMPHASIZE WORDS
• Aside from bolding words , we often want to italicize words for emphasis
• Like bolding, we do not need ...
SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Some nice practice</title>
</head>
<body>
<p>Hey, don't say <em>that</em>...
SUMMARY
This has been an incredibly busy lesson, and you've covered a lot.
Congratulations! We have learned how to:
Make o...
SAMPLE CODE
• <!DOCTYPE html>
• <html>
• <head>
• <title>MS</title>
• </head>
• <body style="background-color:yellow">
• <...
REFERENCES
• www.codecademy.com
Head first web design .
Learning web design-Jennifer Niederst Robbins
www.w3schools.com
Thank you
Any doubts
Email: kalluri.vinayreddy@gmail.com
Upcoming SlideShare
Loading in …5
×

Web development basics 3

579 views

Published on

Font size
Font colour
Font family
Background colour
Aligning the text strong words in html language
Emphasize words

Published in: Education, Technology, Design
2 Comments
0 Likes
Statistics
Notes
  • @agriya thanku very much.!!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • To become a proficient web developer,one should have a thorough knowledge on basic elements of web development tools and techniques.So this presentation would be a most helpful guidance to the users whoever wish to explore with the tricky web development tools and mechanisms.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
579
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
16
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Web development basics 3

  1. 1. WEB DEVELOPMENT BASICS BY KALLURI VINAY REDDY 12MSE1013 VIT CHENNAI
  2. 2. HTML AND CSS • LECTURE 4
  3. 3. TOPICS Lecture 4 Font size Font colour Font family Background colour Aligning the text strong words Emphasize words
  4. 4. FONT SIZE • We can give tags more instructions by including attributes in the opening tag. • An attribute is simply a characteristic or some description for the content in the element. • You saw this with src in <img> and href in <a> • Let’s change the size of the text. How? • We use style attribute . We make it equal to font-size, followd by a colon,the size you want, and end it with px(shorts for “pixels”). • For example:<p style=“font-size:12 px”>
  5. 5. FONT SIZE SAMPLE CODE <!DOCTYPE html> <html> <head> <title>First font size change</title> </head> <body> <p style="font-size: 10px"> Some text for you to make tiny! </p> <p style="font-size: 20px"> Some text for you to make normal size!</p> <p style="font-size: 40px"> Some text for you to make super big!</p> </body> </html>
  6. 6. FONT COLOUR What is awesome about the style attribute is that we use it a lot! And we can use it with many different tags, not just <p>. Let’s now change the colours of our text in a heading . To change the colour of text, simply add the style attribute in the opening tag, then make the style equal to “color:blue”(or whatever colour you like) For example: <h2 style =“color:red”> What if you want to change the colour and the size of the text? Simple! Just add a semi-colon between each bit. For example: <h2 style=“color:green;font-size:12px”>
  7. 7. SAMPLE CODE <!DOCTYPE html> <html> <head> <title>Changing the colors!</title> </head> <body> <h1 style="color:green;font-size:16px">Big Heading</h1> <p style="color:violet">A giant bear and a little duck were friends.</p> <p style="color:red;font-size:10px" >But the bear got hungry and ate the duck.</p> </body> </html>
  8. 8. FONT FAMILY • We've covered font colours and font sizes. But we want more power! We want to decide what font type to use. We can do this using font family like • <h1 style=“font-family: Arial”>Title</h1> • http://www.w3.org/TR/CSS21/fonts.html#generic-font-families • In this link more details about font has been given just check it out.
  9. 9. SAMPLE CODE • <!DOCTYPE html> • <html> • <head> • <title>Loving the font changes</title> • </head> • <body> • <h1>Big title</h1> • <ol> • <li style="font-family:Garamond;font-size:16px">This item is big Garamond.</li> • <li style="font-family:Verdana;font-size:12px">This item is medium Verdana.</li> • <li style="font-family:Impact;font-size:10px">This item is small Impact.</li> • </ol> </body> • </html>
  10. 10. RECAP <!DOCTYPE html> <html> <head> <title>Putting it all together</title> </head> <body> <p style="font-size:20px;color:blue;font-family:Garamond">A truly spectacular paragraph!</p> </body> </html>
  11. 11. BACKGROUND COLOUR • The previous section covered a number of nice tricks to control how the text looks. Now we want to learn about how to change the color of the webpage's background. • We can use the style attribute again, and set it equal to “background-color:red” (or whatever colour you want). • For example: • <p style=“background-color:red;”>Hello World</p>
  12. 12. SAMPLE CODE <!DOCTYPE html> <html> <head> <title> background color!</title> </head> <body style="background-color:brown"> <h3>Favorite Football Teams</h3> <ol style="background-color: yellow"> <li>The Hawthorn Football Club</li> <li>San Francisco 49ers</li> <li>Barcelona FC</li> </ol> </body> </html>
  13. 13. ALIGNING THE TEXT • Often it is nice to be able to move the text around. To do so, we again use the style attribute. And then we use "text- align: left" (or right, or centre) to determine the location of the text.
  14. 14. SAMPLE CODE: <!DOCTYPE html> <html> <head> <title>Sexy background color!</title> </head> <body> <h3 style="text-align:center">Favourite Football Teams</h3> <ol> <li style="text-align: left">The Hawthorn Football Club</li> <li style="text-align:center">San Francisco 49ers</li> <li style="text-align: right">Barcelona FC</li> </ol> </body> </html>
  15. 15. STRONG WORDS • We can change the appearance of words. What if we want to make them bold? We don’t have to use the style attribute. Steps 1. Identify the word or words you want to bold. 2. Surround those words with opening tag <strong> and closing tag </strong> 3. Celebrate how awesome you are at HTML!
  16. 16. SAMPLE CODE <!DOCTYPE html> <html> <head> <title>Viva La Revolution!</title> </head> <body> <p>Do you hear the people <strong>sing</strong>?</p> <p>No I don't. I'm <strong>too</strong> busy eating cake.</p> </body> </html>
  17. 17. EMPHASIZE WORDS • Aside from bolding words , we often want to italicize words for emphasis • Like bolding, we do not need to use the style attribute. Instead: • 1. identify the word or words you want to italicize. • 2. surround the word or words with the opening tag <em> and closing tag </em> • Be humble and grateful for your newfound powers
  18. 18. SAMPLE CODE <!DOCTYPE html> <html> <head> <title>Some nice practice</title> </head> <body> <p>Hey, don't say <em>that</em>!</p> <p>I am <em>so</em> tired.</p> </body> </html>
  19. 19. SUMMARY This has been an incredibly busy lesson, and you've covered a lot. Congratulations! We have learned how to: Make ordered and unordered lists Change the color, size and type of font Add comments to our HTML file Change the page's background color Align text Bold and italicize text
  20. 20. SAMPLE CODE • <!DOCTYPE html> • <html> • <head> • <title>MS</title> • </head> • <body style="background-color:yellow"> • <ol> • <li style="color:red;font-size:40px;font-family:Impact;text-align:center">list one</li> • <li style="color:blue;font-size:30px;font-family:impact;text-align:right">list two</li> • </ol> • <ul> • <li>what next</li> • <li>t • he thing<em>on </em> the <strong>world </strong>alone </li> • </ul> • <!--make ure the syntax is correct--> • </body> </html>
  21. 21. REFERENCES • www.codecademy.com Head first web design . Learning web design-Jennifer Niederst Robbins www.w3schools.com
  22. 22. Thank you Any doubts Email: kalluri.vinayreddy@gmail.com

×