Vicky HTML

1
First Step - Basic HTML Page

HTML is the standard markup language for creating websites and CSS is the language that describes the style
of an HTML document. We will combine HTML and CSS to create a basic web page.
Note: If you don't know HTML and CSS, we suggest that you start by reading our HTML Tutorial.
1. <!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines this document to be HTML5

 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <meta> element should define the character set to be UTF-8
 The <meta> element with name="viewport" makes the website look good on all devices and screen
resolutions
 The <style> element contains the styles for the website (layout/design)
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph
Creating Page Content

Inside the <body> element of our website, we will use our "Layout Draft" and create:
 A header
 A navigation bar
 Main content
 Side content
 A footer
Header
A header is usually located at the top of the website (or right below a top navigation menu). It often contains a
logo or the website name
2. <!DOCTYPE html>
2
<html lang="en">
<head>
<style>
body {
margin: 0;
/* Style the header */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
/* Increase the font size of the h1 element */
.header h1 {
font-size: 40px;
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
</div>
</body>
</html>
Navigation Bar
3
A navigation bar contains a list of links to help visitors navigating through your website:
3. <!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
.header {
padding: 80px;
text-align: center;
color: white;
.header h1 {
font-size: 40px;
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
/* Style the navigation bar links */
.navbar a {
float: left;
4
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
/* Right-aligned link */
.navbar a.right {
float: right;
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
</style>
</head>
<body>
<h1>My Website</h1>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
</body>
</html>
Content
Create a 2-column layout, divided into a "side content" and a "main content".
5
4. <!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
box-sizing: border-box;
body {
margin: 0;
.header {
padding: 80px;
text-align: center;
color: white;
.header h1 {
font-size: 40px;
.navbar {
overflow: hidden;
6
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
.navbar a.right {
float: right;
.navbar a:hover {
color: black;
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
7
background-color: #f1f1f1;
padding: 20px;
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
</style>
</head>
<body>
<h1>My Website</h1>
</div>
</div>
8
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
</div>
</div>
</body>
</html>
Then add media queries to make the layout responsive. This will make sure that your
website looks good on all devices (desktops, laptops, tablets and phones). Resize the
browser window to see the result.
9
Footer
At last, we will add a footer.
5. <!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
box-sizing: border-box;
body {
margin: 0;
.header {
padding: 80px;
text-align: center;
color: white;
.header h1 {
font-size: 40px;

10
.navbar {
overflow: hidden;
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
.navbar a.right {
float: right;
.navbar a:hover {
color: black;
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
/* Create two unequal columns that sits next to each other */

11
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
12
/* Responsive layout - when the screen is less than 400px wide, make the navigation
links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width:100%;
</style>
</head>
<body>
<h1>My Website</h1>
</div>
</div>
<div class="row">
<div class="side"
<h2>About Me</h2>
<h5>Photo of me:</h5>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
13
<p>Lorem ipsum dolor sit ame.</p>
</div>
<div class="main">
<h5>Title description, Dec 7, 2017</h5>
<p>Some text..</p>
<br>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
W3Schools Spaces
If you want to create your own website and host your .html files, try our website
builder, called W3schools Spaces:
6. <!DOCTYPE html>
<html>
<head>
<style>
body {
14
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.
If you have a large screen, the menu will always be present on the left.
If you have a small screen, open the menu by clicking the top menu sign ☰.
CSS Templates
We have created some responsive W3.CSS templates for you to use.
You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
7. <!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
15
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
8. <!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Example
The CSS rule below will be applied to the HTML element with id="para1"
9. <!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
</style>
16
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
The CSS class Selector

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
10. <!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
CSS Rounded Corners

With the CSS border-radius property, you can give any element "rounded corners".
CSS border-radius Property

17
The CSS border-radius property defines the radius of an element's corners.
Tip: This property allows you to add rounded corners to elements!
Here are three examples:
1. Rounded corners for an element with a specified background color:
Rounded corners!
2. Rounded corners for an element with a border:
Rounded corners!
3. Rounded corners for an element with a background image:
Rounded corners!
Here is the code:
11. <!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
#rcorners2 {
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
#rcorners3 {
18
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p>Rounded corners for an element with a background image:</p>
</body>
</html>
CSS border-radius - Specify Each Corner

The border-radius property can have from one to four values. Here are the rules:
Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner,
second value applies to top-right corner, third value applies to bottom-right corner, and fourth
value applies to bottom-left corner):
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner,
second value applies to top-right and bottom-left corners, and third value applies to bottom-
right corner):
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right
corners, and the second value applies to top-right and bottom-left corners):
One value - border-radius: 15px; (the value applies to all four corners, which are rounded
equally:
Here is the code:
12. <!DOCTYPE html>
<html>
<head>
<style>
19
#rcorners1 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 200px;
height: 150px;
#rcorners2 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 200px;
height: 150px;
#rcorners3 {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 150px;
#rcorners4 {
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>

20
<p>Two values - border-radius: 15px 50px:</p>
<p>One value - border-radius: 15px:</p>
</body>
</html>
13. <!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
padding: 20px;
width: 200px;
height: 150px;
#rcorners2 {
border-radius: 15px / 50px;
padding: 20px;
width: 200px;
height: 150px;
#rcorners3 {
border-radius: 50%;
padding: 20px;
width: 200px;
height: 150px;
</style>
21
</head>
<body>
<p>Elliptical border - border-radius: 50px / 15px:</p>
<p>Elliptical border - border-radius: 15px / 50px:</p>
<p>Ellipse border - border-radius: 50%:</p>
</body>
</html>
14. <!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
padding: 20px;
width: 200px;
height: 150px;
#rcorners2 {
border-radius: 15px 50px 30px;
padding: 20px;
width: 200px;
height: 150px;
}
22
#rcorners3 {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 150px;
#rcorners4 {
padding: 20px;
width: 200px;
height: 150px;
</style>
</head>
<body>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p>Three values - border-radius: 15px 50px 30px:</p>
<p>Two values - border-radius: 15px 50px:</p>
<p>One value - border-radius: 15px:</p>
</body>
23
</html>
15.

Vicky HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vicky HTML

Uploaded by

Copyright:

Available Formats

1

First Step - Basic HTML Page

 The <!DOCTYPE html> declaration defines this document to be HTML5

Creating Page Content

<meta name="viewport" content="width=device-width, initial-scale=1">

font-family: Arial, Helvetica, sans-serif;

/* Style the header */

/* Increase the font size of the h1 element */

<p>A website created by me.</p>

<meta name="viewport" content="width=device-width, initial-scale=1">

font-family: Arial, Helvetica, sans-serif;

/* Style the header */

/* Increase the font size of the h1 element */

/* Style the top navigation bar */

/* Style the navigation bar links */

padding: 14px 20px;

/* Change color on hover */

<p>A website created by me.</p>

<a href="#" class="right">Link</a>

<meta name="viewport" content="width=device-width, initial-scale=1">

font-family: Arial, Helvetica, sans-serif;

/* Style the header */

/* Increase the font size of the h1 element */

/* Style the top navigation bar */

/* Style the navigation bar links */

padding: 14px 20px;

/* Change color on hover */

/* Create two unequal columns that sits next to each other */

/* Fake image, just for this example */

<p>A website created by me.</p>

<a href="#" class="right">Link</a>

<div class="fakeimg" style="height:200px;">Image</div>

<p>Some text about me in culpa qui officia deserunt mollit anim..</p>

<p>Lorem ipsum dolor sit ame.</p>

<div class="fakeimg" style="height:60px;">Image</div><br>

<div class="fakeimg" style="height:60px;">Image</div><br>

<div class="fakeimg" style="height:60px;">Image</div>

<h5>Title description, Dec 7, 2017</h5>

<div class="fakeimg" style="height:200px;">Image</div>

<h5>Title description, Sep 2, 2017</h5>

<div class="fakeimg" style="height:200px;">Image</div>

<meta name="viewport" content="width=device-width, initial-scale=1">

font-family: Arial, Helvetica, sans-serif;

/* Style the header */

/* Increase the font size of the h1 element */

/* Style the top navigation bar */

/* Style the navigation bar links */

padding: 14px 20px;

/* Change color on hover */

/* Create two unequal columns that sits next to each other */

/* Fake image, just for this example */

@media screen and (max-width: 700px) {

@media screen and (max-width: 400px) {

<p>A website created by me.</p>

<a href="#" class="right">Link</a>

<div class="fakeimg" style="height:200px;">Image</div>

<p>Some text about me in culpa qui officia deserunt mollit anim..</p>

<p>Lorem ipsum dolor sit ame.</p>

<div class="fakeimg" style="height:60px;">Image</div><br>

<div class="fakeimg" style="height:60px;">Image</div><br>

<div class="fakeimg" style="height:60px;">Image</div>

<h5>Title description, Dec 7, 2017</h5>

<div class="fakeimg" style="height:200px;">Image</div>

<h5>Title description, Sep 2, 2017</h5>