Web - lesson 3
( Decoration of website )
Hi and welcome on learn 4 free programming!
In this lesson we are going to talk about decorating your web site. When you go to some website you see background colors or images, menu, different text colors, sizes and fonts,...
Tag <hr>
Tag <hr> is the basic tag to "draw" a horizontal line on website page. With <hr> tag you can separate different text, images, ...
 |
| Example of <hr> tag |
You can also change the width and height of the vertical line.
Whenever you use <hr> tag it will automatically draw the line from left to right.
- example:
<html>
<head></head>
<body>
<hr>
</body>
</html>
In example above you will draw ordinary black line. What if you wanted to be smaller?
Well you can just use width attribute. In width attribute you write number of pixels how much you want the width of line to be. You can also use %.
-example :
<html>
<head></head>
<body>
<hr width="100px"> ----> or you could write width="30%"
</body>
</html>
Example above shows you how to change the width of the horizontal line. You notice that line is on the center of page. If you don't want it to be there you can use aling attribute. With aling attribute you can move the line on left, center or right of the page.
-example :
<html>
<head></head>
<body>
<hr width="30%" align="right">
</body>
</html>
With align="right" we have moved the line to right.
Change background
If you want to make your website more interesting you can change background color.
Changing background color is done in <body> tag. Inside of body tag you need to write bgcolor="red". With this you have changed the background color to red.
You can also make color you want here.
When you make your custom color just copy the code above and paste it instead red.
-example :
<html>
<head></head>
<body bgcolor="D3D55C">
</body>
</html>
If you don't want color as your background you can set picture as background. Inside of body tag you need to write bckground="image.jpg".
Before you insert image you have to download it.
 |
| Background image |
-example :
<html>
<head></head>
<body background="image.jpg">
</body>
</html>
Change text color
When you put background color or image you may not see text because of it's color. If you want to change the color of all text on webpage, just write text="color" in body tag. You can also paste the code from color picker and paste it.
-example :
<html>
<head></head>
<body bckground="image.jpg" text="green"> -----> or text="D3D55C"
</body>
</html>
But if you want to change the color of some text. Well it's easy, you just write <font> tag in front of the text you want to change and close it where you don't want anymore.
Let's say in the text "Welcome to my first website" you want "first" to be red color.
-example :
<html>
<head></head>
<body>
Welcome to my<font color="red"> first</font> website
</body>
</html>
If you don't close font tag behind firs than all text you write will be in red color.
Okay that's it for this lesson, come back to learn more about HTML.
I will be posting more lessons about HTML, so follow me, share and comment if there is something you would change or if you like it :) .
If something doesn't work or you need help just send me email on: sashans89@gmail.com and i will help you.
See you next time, Byee.
I will be posting more lessons about HTML, so follow me, share and comment if there is something you would change or if you like it :) .
If something doesn't work or you need help just send me email on: sashans89@gmail.com and i will help you.
See you next time, Byee.
Sasha
Very helpful thanks !
ReplyDeleteYou're welcome, there will be more interesting lessons.
ReplyDelete