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.
This article was co-authored by wikiHow staff writer, Nicole Levine, MFA. Nicole Levine is a Technology Writer and Editor for wikiHow. She has more than 20 years of experience creating technical documentation and leading support teams at major web hosting and software companies. Nicole also holds an MFA in Creative Writing from Portland State University and teaches composition, fiction-writing, and zine-making at various institutions.
The wikiHow Tech Team also followed the article’s instructions and verified that they work.
This article has been viewed 4,543,787 times.
This wikiHow teaches you how to write a simple web page with HTML (hypertext markup language). HTML is one of the core components of the World Wide Web, making up the structure of web pages. Once you’ve created your web page, you can save it as an HTML document and view it in your web browser. Creating an HTML page is possible using basic text editors found on both Windows and Mac computers.
Adding a Head to Your HTML
Type in and press ↵ Enter . This tells the web browser that this is an HTML document. [1] X Research source
Type in and press ↵ Enter . This is the tag that opens your HTML head. The HTML head information that is not usually displayed on your web page. This information can include, the title, meta data, CSS style sheets, and other scripting languages. [2] X Research source
Type and press ↵ Enter . This is the tag to close your head. Your HTML code should look something like this.
html>head>title>My Web Pagetitle>head>
Adding a Body and Text to Your HTML
Type in below the closed «Head» tag. This tag opens the body of your HTML document. Everything that goes in the HTML body displays on the web page.
Type in . This is the tag to add a heading to your HTML document. A Heading is large bold text that typically goes at the top of your HTML document.
Add additional headings as you go. There are six different headings that you can create by using the through tags. These create headings of different sizes. For example, to create three different-sized headings in succession, you might write the following:
h1>Welcome to My Page!h1>h2>My name is Bob.h2>h3>I hope you like it here.h3>
Type
. This is the tag to open a paragraph. Paragraph text is used to display normal sized text.
Type some text. This can be a description for your web page or any other information you wish to share.
Type
after your text and press ↵ Enter . This the tag to close your paragraph text. The following is an example of paragraph text in HTML:
You can add multiple paragraph lines in a row in order to create a series of paragraphs under one heading.
You can change the color of any text by framing the text with the and tags. Make sure to type your preferred color into the «color» section (you’ll keep the quotes). You can turn any text (e.g., headers) into a different color with this set of tags. For example, to turn a paragraph’s text blue, you would write the following code:
Whales are majestic creatures.
You can add bolds, italics and other text formats using HTML. The following are examples of how you can format text using HTML tags: [3] X Research source
