web development basics 3
DESCRIPTION
Font size Font colour Font family Background colour Aligning the text strong words in html language Emphasize wordsTRANSCRIPT
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 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”>
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>
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”>
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>
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.
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>
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>
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>
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>
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.
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>
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!
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>
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
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>
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
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>
REFERENCES
• www.codecademy.com
Head first web design .
Learning web design-Jennifer Niederst Robbins
www.w3schools.com
