In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.
HTML Web Page Example 1
This is an example of a simple HTML web page that shows the profile of a professional camel.
Here is how the camel profile is designed in HTML:
Container — The complete HTML web page is wrapped in a container. The container is a div element with the class container .
Header — Inside the container, we have a header element that contains the logo and the navigation menu.
Aside — Aside contains the profile picture and other navigational links.
Main — The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.
Footer — The footer contains copyright information.
This is the second example of an HTML web page. This is a simple error 404 page which is shown when the user tries to access a page that does not exist.
This is a very simple webpage that shows the error 404 page on the screen and gives a link to return to the homepage.
To design an error 404 page you need to use the following steps:
Create a div element that covers the whole page set height: 100vh .
Give it a background image that suits the 404 error.
In this HTML code example we will create offer page. This is a simple newsletter signup page.
Here is the list of steps to create a newsletter signup page:
First, we need to create the HTML structure of the page. We will use the tag to wrap the content of the page. Then, we will create two sections: one for the intro and one for the sign-up form.
Next, we will style the page using CSS. We will use the display: flex property to align the content of the page. We will also use the min-height property to make sure that the page is always fully visible.
Then, we will style the intro section.
Next, we will style the sign-up section.
Finally, we will style the form. Look at the complete code below to see how we did it.
Get up to 50% off on all our products and services. Hurry up, the offer ends in 24 hours.
!
!
!
!
Terms and Services
Here is the result of the code in example 3.
HTML Code Example 4
In the fourth example, we are going to create a testimonial page that shows the reviews of the customers along with their profile pictures, name and designation.
The basic idea will be to create HTML section first and then styling it with CSS.
The reviews and all its details will be stored in an array and then we will loop through the array to display the reviews.
Here is the complete code for the testimonial page.
Complete HTML code for the testimonial page
Our Reviews
Here is the output of the above HTML code for testimonials:
Conclusion
This brief guide includes HTML web page examples with source code. We have learned how to create a basic HTML web page with 2 different examples. We have also learned how to create a basic CSS style sheet and how to use it on our HTML web page.
If you want a detailed explanation of a portfolio site then visit the HTML code for homepage.
In this chapter we will show some basic HTML examples.
Don’t worry if we use tags you have not learned about yet.
HTML Documents
All HTML documents must start with a document type declaration: .
The HTML document itself begins with and ends with .
The visible part of the HTML document is between
and .
Example
My First Heading
My first paragraph.
The Declaration
The declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The declaration is not case sensitive.
The declaration for HTML5 is:
HTML Headings
HTML headings are defined with the to tags.
defines the most important heading. defines the least important heading:
Example
This is heading 1
This is heading 2
This is heading 3
HTML Paragraphs
HTML paragraphs are defined with the
tag:
Example
This is a paragraph.
This is another paragraph.
HTML Links
HTML links are defined with the tag:
Example
The link’s destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the tag.
The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:
Example
How to View HTML Source
Have you ever seen a Web page and wondered «Hey! How did they do that?»
View HTML Source Code:
Right-click in an HTML page and select «View Page Source» (in Chrome) or «View Source» (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose «Inspect» or «Inspect Element» to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
