 |
DistrictND |
Am sure you are happy with the way am sharing my programming knowledge with you well that's me me I love sharing and today I'll share to you a tutorial on how to design the background of your webpage with coding
In this post we are going to discuss two topics namely
1 How to design the color of your webpage background with coding.
2 How to add an image to your webpage background with coding.
OK so let's start with the first then we go to the second.
How to design the background of your webpage with coding.
1 OK go to your HTML editor i like this one here so use it for android users.
2 Now integrate this lines codes if you want the background of the text in that paragraph (<p>) to show display color
<div style ="background-
color:GreenYellow;width:200px;
border:1px solid
black;padding:15px;" >
<p> DistrictND is cool </p>
</div>
The above code will display in a web browser like this
DistrictND is cool
You can edit that text that says "DistrictND is cool" and put the text you want to be displayed in that paragraph.
3 Integrate this code below the <head> of your webpage if you want the whole page background to display color.
<body style = "background-
color:yellowgreen;color:white;" >
...content goes here...
</body>
don't edit anything here unless you will experience error.
How to add image background to your webpage with coding.
Am sure I thought you how to do this in my post about how to add images to your webpage, but I'll repeat it again in this post.
1 first of all go to your HTML editor
2 copy the source code of the image you want to use this is normally in url form.
3 Integrate this lines of codes in your HTML editor
<div style ="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUBqVpTTxvwxFWmY4J56NcTCW2qY7_90UKKCZRIQe4NAVjVCkpA35s2R-QnBabejs-UihqFHEBfz57Nn_0Gafb3g2Z1puFkj0rpNpVTio6kS_D3-CyXfYaU2nLiagLnNk6957e6ckzTEM/s1600/districtnd+icon.png);padding:5px;width:150px;
height:200px;border:1px solid
black;" >
<p> Your text </p>
</div>
The above code will display in a web browser like this
The above code will display in a web browser like this
Your text
4 Replace that URL in the bracket and put the source code of the image you want to use.
That's all your done designing your webpage background.
Note
If you design the background of your webpage it will not display in your HTML editor, you have to save the webpage and name it index.html then upload the file to the internet to view your progress.
Follow these steps on how to upload your webpage file to the internet.
(i) With windows or Mac: Save the webpage as a html file then drag the file to your browser it will upload and display your work or find a web hosting company and host your webpages.
(ii) With Android: Find a web hosting company and host your webpages.
Now your progress will be displayed.
Warning
Make sure you integrate this codes properly failure to do that will lead to code error.
Conclusion
Well you are now Able to build and design websites with my tutorials, which means your a web developer now what a good title, now its upto to you to help me by visiting the support and motivate us page and see if you can accomplish the given task there thanks.
0 Comments