Sample Web Page using HTML and CSS

Sample Web Page Using HTML and CSS

Using HTML and CSS

HTML stand for hyper text mark up language. It is used to create web pages. It is a rendering language and not a programming language. It depends on its tags and attributes.

CSS stands for cascade style sheets. It decides how the elements of HTML are to be displayed on screen.

index.html file :-

<!doctype html>

<html>

<head>

</head>

<body>

<div id = 'header'><h1>My First Web Page</h1></div>

<ul>

<a href='#'><li><b>Science</b></li></a>

<a href='#'><li><b>Economics</b></li></a>

<a href='#'><li><b>About Us</b></li></a>

<a href='#'><li><b>Privacy Policy</b></li></a>

<a href='#'><li><b>Contact Us</b></li></a>

</ul>

</div>

<div class = 'title'><h2>Economics Knowledge</h2></div>

<div class = 'description'><p>The five economic goals to be achieved through knowledge of this subject are; (1) create employment opportunity for all, (2) stability in earnings, (3) economic growth, (4) efficiency in all activities, and (5) create equity in society, are considered to be beneficial and worth pursuing the knowledge. Each goal, achieved by it, improves the overall well-being of society. Greater employment is typically better than less. Stable prices are better than inflation The five economic goals to be achieved through knowledge of this subject are; (1) create employment opportunity for all, (2) stability in earnings, (3) economic growth, (4) efficiency in all activ The five economic goals to be achieved.....<a href = '#'>Continue<a></div>

<div class = 'title'><h2>Scienctific knowledge</h2></div>

<div class = 'title'><h2>Basic concepts of economics</h2></div>

</div>

</div>

<div id = 'footer'><h3>Copyright &copy Passable Blog</h3></div>

</div>

</body>

</html>

style.css file :-

* {

margin : 0;

padding : 0

}

#container {

background : none;

width : 1500px;

margin : 0 auto;

border : 1px solid black;

}

#header {

background : midnightblue;

width : 1500px;

height : 100px;

}

h1 {

color : white;

margin : 0 5px;

padding : 25px;

text-align : center;

}

#nav {

background : lavender;

width : 1500px;

height : 50px;

}

#nav ul li {

width : 210px;

float : left;

list-style : none;

padding : 10px;

margin : 5px ;

text-align : center;

}

#nav ul li:hover {

background : pink;

color : black;

}

#nav a {

color : black;

}

#middle{}

#left {

background : white;

width : 1000px;

height :520px;

float : left;

}

.title {

margin: 15px 10px 0px 10px;

background : brown;

color : white;

padding : 10px;

}

.description {

margin : 0px 10px;

padding : 5px;

background : #f3e0cc;

}

#right {

background : black;

width : 490px;

height : 510px;

padding : 5px;

float : left;

}

#footer {

background : midnightblue;

color : white;

width : 1460px;

height : 30px;

text-align : center;

padding : 20px;

}

Web Page :-

Using HTML-5 and CSS-3

HTML5 is the latest verion of HTML. It has a complete new and semantic structure to create a webpage. It has some new tags and attributes.

CSS3 is the latest evolution of CSS. It adds a lot of new features to CSS such as animation and some effects.

index1.html file :-

<!doctype html>

<html>

<head>

<title>PassableBlog</title>

</head>

<body>

<h1>Passable Blog<h1>

</header>

<nav>

<ul>

<a href = '#'><li>Posts</li></a>

<a href = '#'><li>About Us</li></a>

</ul>

</nav>

<main>

<div class = 'article_title'>Ability to work independently</div>

Self-awareness refers to your knowledge and understanding of yourself - your emotions, your beliefs, values, knowledge base, abilities, motivations, biases, interests, etc. Your self-awareness includes recognition of your own personality, your strengths and weaknesses ,your likes and dislikes. It makes you conscious of your own moods, emotions and drives. As we move ahead in the knowledge-based economy the need to upgrade our knowledge and skills to keep pace with the 'permanent white waters' becomes all the more important. However, the starting point should be the knowledge of oneself as a unique individual and how one relates to the new economy. When you are self-aware you almost always know how you are going to respond to certain good or bad situation. Developing self-awareness can help you in recognizing when you are stressed or under pressure. This knowledge also capacitates you to have effective communication and productive interpersonal relations.

</div>

</article>

<div class = 'article_title'>Boost Self Confidence</div>

Self-confidence is a combination of a state of mind and a strong feeling of self-belief which is commonly used when one needs self-assurance especially in one's personal judgment,power, ability etc. The more self confidence you have, the more you value yourself and your capabilities, the stronger and more powerful you feel and the happier you are with yourself. Self-confidence is a combination of a state of mind and a strong feeling of self-belief which is commonly used when one needs self-assurance especially in one's personal judgment,power, ability etc. The more self confidence you have, the more you value yourself and your capabilities, the stronger and more powerful you feel and the happier you are with yourself. Self-confidence is a combination of a state of mind and a strong feeling of self-belief which is commonly used when one needs self-assurance especially in one's personal judgment,power, ability etc. The more self confidence you have, the more you value yourself and your capabilities, the stronger and more powerful you feel and the happier you are with yourself. Self-confidence is a combination of a state of.

</div>

</article>

<div class = 'article_title'>Self Defense for women</div>

Self-defense is the use of force to protect yourself against someone who is attacking you. Self-defense helps to prepare you for unexpected situations and also helps develop increased mental and physical health. Self defense opens up the source of freedom for women in an imperfect world. Building confidence in physical resistence skills allows women to feel more capable and more at peace when in potentially dangerous areas. Keeping yourself safe is a priority, and every women deserves to know the proper skills to defend herself if or when danger attacks. Self-confidence is a combination of a state of mind and a strong feeling of self-belief which is commonly used when one needs self-assurance especially in one's personal judgment,power, ability etc. The more self confidence you have, the more you value yourself and your capabilities, the stronger and more powerful you feel and the happier you are with yourself. Self-confidence is a combination of a state of mind and a strong feeling of self-belief which is commonly used when one needs self-assurance especially in one's personal judgment,power, ability etc. The more self.

</div>

</article>

</section>

<div id = 'profile'><a href = '#'><h3><b>Profile</b><br></h3></a>Passable Blog</div>

<h2 id = 'head_contact' ><br>Contact Form</h2>

<form>

<label for = 'contact'>Contact Number</label><br>

<label for = 'message'>Your message</label><br>

<form>

</div>

</section>

</main>

</div>

</body>

</html>

style1.css file :-

* {

margin : 0;

padding : 0;

}

.clearfix {

clear: both;

}

#container {

background : white;

width: 100%;

font-family: arial;

}

header {

background: linear-gradient(to right,black,blue);

color: white;

width: 100%;

}

header h1 {

font-size: 50px;

padding: 20px;

}

nav {

border: 10px solid white;

background: black;

width: 420px;;

}

nav ul li {

float : left;

list-style-type: none;

color: cyan;

width: 100px;

font-size: 15px;

font-weight: bold;

padding: 20px;

text-align: center;

}

nav ul li:hover {

background: linear-gradient(to bottom,yellow,orange,red);

color: black;

font-weight: bold;

}

main {}

#left {

float:left;

width: 80%;

}

article{

background : #fafad2;

float : left;

padding: 10px;

margin : 10px;

border : 2px solid black;

}

.article_image {

float: left;

margin: 20px;

}

.article_title{

font-size: 30px;

font-weight: bold;

color: red;

margin: 5px;

}

.article_desc {

color: midnightblue;

text-overflow: ellipsis;

}

#right{

float: left;

margin : 30px;

}

#profile {

text-align : center;

}

#web_pr {

padding : 10px;

}

#head_contact {

padding: 10px;

color: brown;

}

input {

margin: 5px;

}

textarea {

margin : 5px;

}

input [type = 'submit'] {

padding : 2px;

background: silver;

color: black;

font-weight: bold;

}

footer {

background: linear-gradient(to left,black,blue);

width : 100%;

height : 100px;

}

#footer_text {

color: white;

text-align : center;

font-size : 20px;

padding: 20px;

}

Web Page : -

Search This Blog

Passable Blog