Creating a Simple Front page for any website using HTML and CSS
HTML and CSS are
the basic pre-requisites for any webpage development without which we couldn’t
do anything easily.
Many of the aspirants who dream to be a good web designer
need to learn both html and css as their initial step.
Straightly beginning , In this blog I am going to make you
feel better with both which we took as our starters.
The primary goal for us at this time is to create a home
page for an xyz website with all the layout ,headers ,images and links.Many of
the beginners might be looking for this
kind of examples,So please follow the simple steps I give you here on…….
Creating a HTML page:
- 1.First open your notepad .
- 2.Open file menu in that and click as SaveAs option.
- 3.Give a filename for it with a .html extension, generally a html file should have a .html extension.
- Ex: myFile.html…..which we will work throughout this session.
- Oue design would look something like this.
Now copy the following code in to your html page ie…myFile.html
<html>
<body>
<link rel="stylesheet" type="text/css" href="css/myStyle.css">
<div class="banner1">
<span class="title">XYZ COMPANY</span>
</div>
<div class="banner2">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>CONTACT US</li>
</ul>
<img src="images/xyz.png"/>
</div>
<div class="NewsBox">
<span>NEWS</span>
<div class="News">
- Our Company is now MSoft partner in Information Security Solutions</br>
- We deliver one of the largest online information in the world</br>
- Our team delivered the first Metro style application for the Windows Phone grou p at Microsoft</br>
- Our Company partners with a strategic technology UFZO group
</div>
</div>
<div class="info"><p><span>Welcome!</span></p>
Proven
dependability
Being reliably “on time and on budget” has always been a
hallmark of our engagements. For us, budget numbers and timelines aren’t moving
targets; they are a rock-solid foundation for business planning and decision
making. We help you set the right goals from the outset and then pre-plan, ramp
up and adapt as necessary to meet your time-to-market deadlines and budgetary
requirements.
Maximizing your investment
You need to make the most of your IT and business investments.
Our uncompromising devotion to rigorous, world-class processes and standards
ensures that the solutions we develop minimize the time to value for your
investment. We introduce predictability, standardization and governance into
your processes, giving you the confidence to not just run your business, but to
transform it.
Customized solutions that deliver
By complementing our comprehensive service offerings with expert
consultation, we optimize your systems and enable your organization to respond
more quickly to market changes. Our customized solutions provide better
visibility and control across all areas of your business so you can operate
more efficiently, improve profit margins, reduce risk and achieve longterm
success—no matter what the market has in store.
<div>
</body>
</html>
2.Now creating a css file for the html file which adds the
design and layout for it
Creating a CSS page:
- 1.First open your notepad .
- 2.Open file menu in that and click as SaveAs option.
- 3.Give a filename for it with a .css extension, generally a css file should have a .css extension.
- Ex: myStyle.css…..which we will work throughout this session.
Copy the following code into your css file …
body
{
padding:0;
margin:0;
color:black;
}
div.banner1
{
padding:40px;
background-color:#3399cc;
color:White;
font-size:65px;
}
.title
{
font-size:65px;
font-family:Segoe UI Light;
color:white;
font-weight:normal;
font-weight:bold;
}
div.banner2
{
width=100%;
height:45px;
margin-top:0px;
}
ul
{
margin:0px;
padding:2px;
list-style-type:none;
}
li
{
float:left;
padding-left:45px;
padding-top:12px;
padding:right:25px;
color:white;
font-size:17px;
font-family:verdana;
font-weight:bold;
}
img
{
width: 35px;
height:35px;
float:right;
margin: 1px 35px 7px 1px;
}
div.NewsBox
{
width:50%;
padding:12px;
border:1px solid gray;
margin-left:85px;
margin-top:40px;
line-height:2;
font-size:16px;
font-family:candara;
}
div.news
{
margin-left:20px;
padding:5px;
font-family:candara;
font-weight:bold;
margin:5px;
}
div.info
{
margin-left:90px;
width:80%;
margin-top:40px;
font-family:candara;
font-size=16px;
font-weight:bold;
}
span
{
font-family:Arial;
font-weight:bold;
font-size:16px;
color:#333333;
}
a
{
text-decoration:none;
color:white;
}
After pasting this code in your css file ie myStyle.css,check whether you have included the exact file name in your html file at....
link rel="stylesheet" type="text/css" href="css/myStyle.css">
Important points to keep in mind to execute this
link rel="stylesheet" type="text/css" href="css/myStyle.css">
Important points to keep in mind to execute this
- See that the filenames have the proper file extensions....ie [.html and .css]
- Check whether the css file is properly included in the html page.
- Give a proper path to present your image in the html page at <img src="images/xyz.png"/>
- It is always recomended to have a separate folders for images and css file that are usen in your project.
- The path i mentioned for the image above means an image named xyz.png is present in the images folder of your project.Better save all your files in a single folder.
- So,your project should contain
- -myFile.html
- -CSS(myStyle.css)
- -Images(images/xyz.png)
After having all these in your folder ,now open your html file by using any browser .....and gets your final design opened.
Thus you have made your first design using html and css.
Hope this would help you and if yopu have any doubts you can comment a post or can reach me directly through my mail id: sri.hibernate@gmail.com.
SPONSORS:
No comments:
Post a Comment