Web development basics 3
Download as PPTX, PDF0 likes665 views
The document provides an overview of key HTML and CSS concepts including font size, color, family, background color, and text alignment. It explains how to use the style attribute to customize text and background properties, along with the use of tags for emphasizing text. Additionally, it includes sample code to illustrate the application of these concepts in web development.
Web development basics 3
- 1. WEB DEVELOPMENT BASICS BY KALLURI VINAY REDDY 12MSE1013 VIT CHENNAI
- 2. HTML AND CSS • LECTURE 4
- 3. TOPICS Lecture 4 Font size Font colour Font family Background colour Aligning the text strong words Emphasize words
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. REFERENCES • www.codecademy.com Head first web design . Learning web design-Jennifer Niederst Robbins www.w3schools.com
- 22. Thank you Any doubts Email: kalluri.vinayreddy@gmail.com