Web Page Tutorial using HTML and CSS for Beginners

By Focusoncode August 27, 2018

 

A web page or webpage is a document commonly written in HyperText Markup Language (HTML) that is accessible through the Internet or other network using an Internet browser. A web page is accessed by entering a URL address and may contain text, graphics, and hyperlinks to other web pages and files. The page you are reading now is an example of a web page.

The basic parts of a web page are:

Header

The header is a part of a web page where you can add your website logo, website title, website description, website banner. Sometimes it includes a simple information about your website like contact email, address etc.

 

Navigation or Menu

Navigation or Menu is a part of a web page where you can see all your pages and navigate like Home, About Us, Contact etc. to give users or visitors an overview of what contents your website has.

 

Body Content

The page body is the main part of your website located between the header and footer area, it includes almost all of your website contents such as texts, forms, buttons, links, images, videos, tables.

Footer

The footer of a web page is located at the bottom of the page, the common content of the footer is footer copyright notice, contacts or website information. Sometimes a footer can also have a menu or navigation it all depends on website structure or design.

Now you know what’s the basic parts of a web page let’s proceed to a simple web page tutorial using HTML and CSS. For this tutorial you can use a simple notepad, it doesn’t require other installations.

To start, create a folder on your Desktop and name it as a webpage. This folder will contain every file or images that you need. Now open notepad and create a file and save it using an HTML extension, for example as index.html.

On this tutorial I will create the basic elements of a web page:

  1. Header
  2. Navigation
  3. Body
  4. Footer

The code below is the basic structure of every HTML document

<!DOCTYPE html>
<html lang="en">
<head>
<!--links -->
<title>My first web page</title>
</head>
<body>
<!-- element tags here -->

</body>
</html>

Everything that our web page will contain must be written inside the <body></body> tag.  To be able to select each element for CSS I will use a class attribute for HTML elements.

The first part is Header which in our case will contain an image. I am going to use img tag to attach the image and display it.  You should make sure that the image is in the same folder as your HTML file.

 <div class="header">
        <img src="focuslogo.png" width="200" height="100" />
    </div>

In the navigation part, we are  going to use:

  1. nav – Used for navigation links.
  2. ul (unordered list) – Used to sort the list item.
  3. li (list item) – Used to mark your text as bullets.
  4. a (anchor) – Used to create hyperlinks.
 <nav class="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
        </ul>
    </nav>

The body part will contain:

  • h2 tag – Used to display a larger text or text header. Header tag has six tags from h1 to h6, h1 tag text size is the larger font size of them all so each tag has a different font size.
  • p tag – Used for a paragraph.
   <div class="body">
        <h2>About Us</h2><br/>
        <p>This is a sample web page</p>

    </div>

 

In the end, the footer will contain just the copyright example.

 <div class="footer">
        <p>Sample Web Page © 2018</p>
    </div>

Right-click your index.html file and Open with then select a browser. You can also drag your file into your browser if you want.  The webpage will look like below:

Now that we finished the HTML I will add some CSS. To insert style to the web page you have three ways.

  • Internal style sheet
  • Inline style
  • External style sheet

Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.Internal styles are defined within the <style> element, inside the <head> section of an HTML page.

Inline Styles
An inline style may be used to apply a unique style to a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

External style sheet
With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

 <head>
    <!-- plugins or links -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

An external style sheet can be written in any text editor. The file should not contain any HTML tags. The style sheet file must be saved with a .css extension.

Properties Description

  • an asterisk (*) means is global so if you add an asterisk style it will be implemented to all elements that you will create inside the body tag.
  • margin property used to create space outside of your element.

In our HTML elements, we have the attribute like class=”header”. A class attribute used for CSS to identify which element you want to add a design or style.

To select an element that has a header class name you have to use (dot) followed by name of a class.

.header {
	height:auto;
	border:1px solid #ddd;
	padding:15px;
}

For styling our header we have used:

  • height auto – Used for auto adjustment depends on the content inside of the element.
  • border – border used to have a border alignment by using this pattern pixel + type + color.
  • padding – Used to create space inside of your element just like margin.
  • px – pixels

Navigation

For navigation, we have 3 selectors here for navigation class, list item element, and for the anchor element.

.navigation {
	padding:10px;
	border:1px solid #bbb;
	background:#000;
}

.navigation ul li {
	display:inline-block;
	margin:0 10px 0 0;
}

.navigation ul li a {
	text-decoration: none;
	color:#fff;
}


For styling our header we have used:

  • background – Add a background color for elements.
  • display – To align the element block.
  • margin – It has 4-pixel values here so the sequence is top margin, right margin, the bottom margin and left margin.
  • color – Add a text color

Body Content

body class properties.

.body {
	padding:50px;
	height:435px;
	border:1px solid #ddd;
}

Footer

footer class properties.

.footer {
	color:#fff;
	padding:20px;
	border:1px solid #ddd;
	background:#333;
	height:50px;
}

Once done save it, here’s the preview of complete codes to double check your code.

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <!-- plugins or links -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- element tags here -->
    <div class="header">
        <img src="focuslogo.png" width="200" height="100" />
    </div>
    <nav class="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
        </ul>
    </nav>

    <div class="body">
        <h2>About Us</h2><br/>
        <p>This is a sample web page</p>

    </div>

    <div class="footer">
        <p>Sample Web Page © 2018</p>
    </div>
</body>
</html>

CSS

* {margin:0 auto;}
.header {
	height:auto;
	border:1px solid #ddd;
	padding:15px;
}
.header {
	height:auto;
	border:1px solid #ddd;
	padding:15px;
}
.navigation {
	padding:10px;
	border:1px solid #bbb;
	background:#000;
}

.navigation ul li {
	display:inline-block;
	margin:0 10px 0 0;
}

.navigation ul li a {
	text-decoration: none;
	color:#fff;
}

.body {
	padding:50px;
	height:435px;
	border:1px solid #ddd;
}
.footer {
	color:#fff;
	padding:20px;
	border:1px solid #ddd;
	background:#333;
	height:50px;
}

For About Us page copy the code from index.html to about.html and change the body part text to identify the difference of the page once you switch pages.


    <div class="body">
        <h2>About Us</h2><br/>
        <p>This is a sample web page</p>

    </div>

In the end, the page will look like this:

We hope that you learned from these guide web page tutorial.

Leave a Comment

Your email address will not be published.