Hi friends,
Now all the website are open from various screen sizes from a small mobile phone to large screen computer, so we required a webpage which adapt according to the various screen size and OS system like android phone, iPhone, Linux Ubuntu, Windows PC and Mac computers.
In my previous blog post, we discussed about How to create SEO friendly responsive web page in HTML5 . you can use css programming for the same. for making an responsive web page you required to have a separate css file or you can add some line of code to you html file. In this tutorial, we are focusing on link to external css file.
<div class="w3-container w3-teal">
<h1>CSS File Header</h1>
</div>
<img src="img_car.png" alt="Car" style="width:100%">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My Footer</p>
</div>
You can save the above code in .css format and you according to your needs. you may customize this file.
The an example of how to make simple seo friendly web page. in this page we have one heading and three divs which have three subheading and also have some description paragraph.
Code for Responsive Web Page via CSS:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> // Just mention the path of your css file
<body>
<div class="w3-container w3-orange">
<h1>CSS SEO Friendly Example</h1>
<p>Scale to the Devive Page</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>New Delhi</h2>
<p>New Delhi is the capital city of India.</p>
<p>It is the most populous city in the India,
with a metropolitan area of over billion inhabitants.</p>
</div>
<div class="w3-third">
<h2>Rome</h2>
<p>Paris is the capital of Italy.</p>
<p>The Rome area is one of the largest population centers in Europe,
with many millions inhabitants.</p>
</div>
<div class="w3-third">
<h2>Madrid</h2>
<p>Tokyo is the capital of Spain.</p>
<p>It is the center of the Spain,
and one of the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
Source: W3schools
Conclusion:
Hope you enjoy reading this blog post on making of seo friendly web page with the help of CSS programming. Apart from this, If you have any programming question like iOS, do post FindNerds iPhone developer Forum.
0 Comment(s)